/* Moazzin public site: the text pages (policies, /about, /developers, 404,
   error, offline). Built on site.css tokens and classes (docs/web-style.md).
   The Website design has no long-form frame, so the column uses its parts:
   8A/8C title (.lead), the annotation cards (.panel.lg: bordered, radius 20)
   for "In short", 8C's bordered table with a surface header row, the 8A
   primary card (.card) for the MCP URL, 8C's get-the-app card (.appcard),
   8A city pills for 404 suggestions, and the 2F expanded layout (main pane
   + rail, from 1024 px) for the privacy policy's "On this page". */

/* ---------- The article column ---------- */
.prose,.policy{max-width:720px;font-size:16px;line-height:1.6;color:var(--ink)}
:is(.prose,.policy)>*{margin:0}
:is(.prose,.policy)>*+*{margin-top:14px}
:is(.prose,.policy) a{text-decoration-thickness:1px;text-underline-offset:2px}
:is(.prose,.policy) b,:is(.prose,.policy) strong{font-weight:700}
:is(.prose,.policy) .eff{margin-top:6px;font-size:13px;color:var(--ink2)}
:is(.prose,.policy) h2{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);scroll-margin-top:16px}
:is(.prose,.policy) h3{font-size:16px;font-weight:700;line-height:1.35;margin-top:22px;scroll-margin-top:16px}
:is(.prose,.policy) h2+*,:is(.prose,.policy) h3+*{margin-top:8px}
:is(.prose,.policy) ul,:is(.prose,.policy) ol{padding-inline-start:22px}
:is(.prose,.policy) li+li{margin-top:6px}
:is(.prose,.policy) li::marker{color:var(--muted)}
:is(.prose,.policy) code{font:.88em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:1px 5px;border-radius:6px;background:var(--surface);border:1px solid var(--line);overflow-wrap:anywhere}
html[lang=ur] :is(.prose,.policy){line-height:2}
html[lang=ur] :is(.prose,.policy) h2{letter-spacing:0;line-height:1.7;font-weight:400}

/* "In short": the design's annotation card (.panel.lg). */
:is(.prose,.policy) .sum{margin-top:20px;padding:var(--s5);border-radius:var(--r-panel);border:1px solid var(--line);background:var(--bg);color:var(--ink2);font-size:14px;line-height:1.55}
:is(.prose,.policy) .sum b{color:var(--ink)}

/* "On this page": a surface panel with an eyebrow from its aria-label. */
:is(.prose,.policy)>nav[aria-label]{margin-top:20px;padding:var(--s4) var(--s5);border-radius:var(--r-card);background:var(--surface)}
:is(.prose,.policy)>nav[aria-label]::before{content:attr(aria-label);display:block;margin-bottom:var(--s2);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
:is(.prose,.policy)>nav ul{list-style:none;margin:0;padding:0;columns:2;column-gap:24px;font-size:14px}
:is(.prose,.policy)>nav li{margin:0;padding:3px 0;break-inside:avoid}
:is(.prose,.policy)>nav a{font-weight:600;text-decoration:none}
:is(.prose,.policy)>nav a:hover{text-decoration:underline}

/* Tables: 8C's month table (hairline border, radius 10, surface header). */
:is(.prose,.policy) .tblw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-row)}
:is(.prose,.policy) .tbl{width:100%;border:0;border-radius:0;border-collapse:collapse;font-size:13px;line-height:1.5}
:is(.prose,.policy) .tbl th,:is(.prose,.policy) .tbl td{padding:8px 10px;text-align:start;vertical-align:top;border-bottom:1px solid var(--line)}
:is(.prose,.policy) .tbl tr:last-child td{border-bottom:0}
:is(.prose,.policy) .tbl th{background:var(--surface);font-weight:700;color:var(--ink);white-space:nowrap}

/* /about#app, where every "Get the app" lands: 8C's app card, the mark
   standing in for the QR. */
:is(.prose,.policy) .appcard{font-size:13px;line-height:1.5}
:is(.prose,.policy) .appcard .mark{width:56px;height:56px;border-radius:var(--r-card);font-size:30px}

/* "This page is in English only" above an English-only page. */
.textnote{max-width:720px;margin-bottom:var(--s2)}

/* ---------- Short pages: 404, error, offline ---------- */
.textpage{max-width:720px}
.textpage .eyebrow+.lead{margin-top:-6px}
.textpage .intro{font-size:16px}
html[lang=ur] .textpage .intro{line-height:2}
.textpage .dym{font-size:15px;font-weight:600}
/* 404 suggestions as the 8A city pills. */
.nf .results{display:flex;flex-wrap:wrap;gap:6px}
.nf .results li{border:0}
.nf .results a{justify-content:flex-start;gap:6px;min-height:0;padding:8px 12px;border-radius:var(--r-chip);background:var(--surface);font-size:13px;font-weight:600;line-height:1.25}
.nf .results a:hover{background:var(--line)}
.nf .results small{font-size:12px;font-weight:400}

/* ---------- /developers ---------- */
.dev .intro{font-size:17px}
html[lang=ur] .dev .intro,html[lang=ur] .dev .steps li,html[lang=ur] .dev .tools li{line-height:2}
.dev .card.url{margin-top:20px;cursor:auto}
.dev .card.url code{justify-self:start;padding:0;border:0;background:none;color:inherit;font-size:16px;font-weight:600;user-select:all}
.dev .steps{list-style:none;padding:0;counter-reset:step;display:grid;gap:var(--s2)}
.dev .steps li{counter-increment:step;display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;margin:0;padding:var(--s3) 14px;border-radius:var(--r-input);background:var(--surface);font-size:15px;line-height:1.5}
.dev .steps li::before{content:counter(step);display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-chip);background:var(--ink);color:var(--on-ink);font:700 13px/1 var(--font-num)}
.dev .tools{list-style:none;padding:0;border-top:1px solid var(--line)}
.dev .tools li{display:grid;grid-template-columns:minmax(0,190px) 1fr;gap:4px 16px;align-items:baseline;margin:0;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.dev .tools code{justify-self:start;font-size:13px}
.dev .tools span{color:var(--ink2)}
.dev .tools+h2{margin-top:28px;padding-top:0;border-top:0}
.dev .more{font-size:14px;font-weight:600}
@media (max-width:600px){
:is(.prose,.policy)>nav ul{columns:1}
.dev .tools li{grid-template-columns:1fr}
}

/* 2F expanded: the privacy policy's contents become a sticky rail. */
@media (min-width:1024px){
:is(.prose,.policy):has(>nav[aria-label]){max-width:none;display:grid;grid-template-columns:minmax(0,720px) 260px;column-gap:56px;align-items:start}
:is(.prose,.policy):has(>nav[aria-label])>*{grid-column:1}
:is(.prose,.policy)>nav[aria-label]{grid-column:2;grid-row:1/span 400;position:sticky;top:16px;margin-top:var(--s2);max-height:calc(100vh - 32px);overflow-y:auto}
:is(.prose,.policy)>nav[aria-label] ul{columns:1}
}

@media print{
:is(.prose,.policy)>nav[aria-label]{display:none}
:is(.prose,.policy) h2{break-after:avoid}
:is(.prose,.policy) a{color:inherit}
}