/* safina — Fihrist's shell, row for row, in safina's own colours (👯 diwan's diwan.css, whose shell this is).
   The header, the menu, the footer and the spacing are Fihrist's, so a sibling site is an easy transition for the
   people who use the others (Shabbir, 24 Sep 2026). The COLOURS are safina's, sampled from its mark by
   scripts/brand.py (29 Sep 2026): the outline's navy #083a88, the sky #76b9ee, the waves' teal #1fb2b8, the mast's
   gold #e7a739 and the cream #fcf3e4 — the ground deepened from the navy, the text from the cream. Every colour lives
   in :root and nowhere else. Served as a file: the Content-Security-Policy allows no inline style or script. */
:root{
  color-scheme:dark;
  --bg:#0a1324; --bg-2:#0e1a30; --panel:#14223c; --panel-2:#1b2b48;
  --line:#25365a; --line-2:#3a4d74;
  --ink:#f3ede2; --ink-2:#c2c9d6; --ink-3:#8e99af;
  --accent:#e7a739; --on-accent:#0a1324;
  --accent-2:#3cc4c9; --accent-wash:rgba(60,196,201,.13);
  --gold:#e7a739; --sky:#76b9ee; --red:#e0695f; --red-wash:rgba(224,105,95,.14);
  --header-bg:rgba(10,19,36,.88); --selection:rgba(231,167,57,.35);
  --glow:rgba(118,185,238,.25); --shadow:rgba(0,0,0,.45);
  /* the DEVELOPMENT mark — the family's amber (research-toolkit 120), as every sibling wears it */
  --warn:#f59e0b; --on-warn:#1a1204; --warn-ink:#f7b955;
  --header-dev-bg:rgba(41,29,12,.9); --warn-line:rgba(245,158,11,.42);
  --radius:12px; --radius-s:8px;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --arabic:"SF Arabic","Geeza Pro","Noto Naskh Arabic","Amiri",serif;
  /* the prose face for the Persian and Arabic the archive holds: Naskh first, a serif after it */
  --prose:"Vazirmatn","Noto Naskh Arabic","SF Arabic","Geeza Pro","Amiri","Iowan Old Style",Georgia,serif;
  --head-h:100px;
}
*{box-sizing:border-box}
/* every jump — a Contents entry, a search hit's #L123 — lands BELOW the sticky header, never under it */
html{background:var(--bg);scroll-padding-top:calc(var(--head-h) + 12px)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);
 font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--selection)}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.ar{font-family:var(--arabic);font-size:1.15em;line-height:2;direction:rtl;unicode-bidi:isolate}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
/* the frame: 1360 px, not the family's 1120 (Shabbir, 29 Sep 2026) — header, page and footer widen TOGETHER, so
   the text beside the sidebar is wider than it was without one, and still inside the same edges */
.wrap{max-width:1360px;margin:0 auto;padding:0 20px;width:100%}

/* The shell, two rows: the name and who you are; then the menu. */
header{position:sticky;top:0;z-index:5;background:var(--header-bg);
 backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
 border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;gap:12px;padding:14px 0 8px;flex-wrap:wrap;row-gap:8px}
.topbar .brand{display:inline-flex;align-items:baseline;gap:10px;font-weight:650;font-size:19px;
 letter-spacing:-.01em;color:var(--ink)}
.topbar .brand img{width:30px;height:30px;display:block;align-self:center}
.topbar .brand small{color:var(--ink-3);font-weight:500;font-size:13px;letter-spacing:0}
.topbar .brand:hover{text-decoration:none;color:var(--accent-2)}
.topbar .sp{flex:1}
.topbar .who{color:var(--ink-3);font-size:.85rem;margin-right:6px}
.topbar .who b{color:var(--ink-2);font-weight:500}
.topbar form.signout{display:inline;margin:0}
.topbar form.signout button{padding:6px 12px;font-size:.85rem;background:transparent;
 border:1px solid var(--line-2);color:var(--ink-2);border-radius:8px}
.topbar form.signout button:hover{border-color:var(--ink-3);color:var(--ink);background:var(--panel-2)}
/* the same name in Arabic at the right edge, in the mark's gold and the Naskh face — a little larger
   than the Latin, because Arabic reads visually smaller at the same size */
.wm-ar{font-family:var(--arabic);color:var(--gold);opacity:.85;font-weight:500;line-height:1;
 user-select:none;white-space:nowrap}
.topbar .wm-ar{font-size:23px;margin-left:10px}
/* a link since 24 Sep 2026, with the brand's hover rather than the page's underline */
.topbar a.wm-ar:hover{text-decoration:none;color:var(--accent-2);opacity:1}
.wordmark{display:flex;justify-content:space-between;align-items:baseline;gap:18px}
.wordmark .wm-ar{font-size:1.12em}
/* ⭐ THE DEVELOPMENT MARK (tp-website 1197; the family's spec, research-toolkit 120): the bar tinted amber, the
   badge by the name, and the bar's line beneath it — on every marked page, signed in or out. Not a banner. */
header.is-dev{background:var(--header-dev-bg);border-bottom-color:var(--warn-line)}
.dev-badge{align-self:center;font:700 11px/1 var(--mono);letter-spacing:.08em;padding:5px 8px;border-radius:6px;
 background:var(--warn);color:var(--on-warn);white-space:nowrap}
.dev-line{margin:0;padding:0 0 9px;font-size:12.5px;line-height:1.4;color:var(--warn-ink)}
/* the phone's menu (layout.html): a <details>, hidden until the bar is too narrow for the row below it */
.topbar{position:relative}
.menu{display:none}
.menu > summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:40px;height:40px;
 border:1px solid var(--line-2);border-radius:10px;color:var(--ink-2)}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary:hover{color:var(--ink);background:var(--panel-2)}
.menu[open] > summary{color:var(--accent-2);border-color:var(--accent-2);background:var(--accent-wash)}
.menu-panel{position:absolute;right:0;top:calc(100% + 6px);width:min(280px,100%);z-index:10;padding:8px;
 background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 14px 34px var(--shadow)}
nav.menu-nav{flex-direction:column;align-items:stretch;gap:2px;padding:0}
nav.menu-nav a{padding:10px 12px;font-size:15.5px}
.menu-who{margin:8px 0 0;padding:12px 12px 8px;border-top:1px solid var(--line);color:var(--ink-3);font-size:.85rem}
.menu-who b{color:var(--ink-2);font-weight:500}
.menu-panel form.signout{display:block;padding:0 4px 4px}
.menu-panel form.signout button{width:100%;padding:9px 12px;background:transparent;border:1px solid var(--line-2);
 color:var(--ink-2);font-weight:500}
.menu-panel form.signout button:hover{border-color:var(--ink-3);color:var(--ink);background:var(--panel-2)}
nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap;padding:0 0 8px}
nav a{color:var(--ink-2);font-size:14.5px;font-weight:500;padding:6px 10px;border-radius:var(--radius-s)}
nav a:hover{color:var(--ink);background:var(--panel);text-decoration:none}
nav a.on,nav a.on:hover{color:var(--accent-2);background:var(--accent-wash)}

main{flex:1;padding:30px 0 60px}
h1{font-size:28px;line-height:1.2;margin:0 0 6px;font-weight:650;letter-spacing:-.015em}
h2{font-size:19px;margin:30px 0 12px;font-weight:600;letter-spacing:-.01em}
.sub{color:var(--ink-3);font-size:14.5px;margin:0 0 22px;max-width:70ch}
.lede{font-size:1.1em;color:var(--ink-2);margin:0 0 6px;max-width:70ch}
.muted{color:var(--ink-3)}
.fine{color:var(--ink-3);font-size:.9rem}
.mono,code{font-family:var(--mono);font-size:13px}
code{background:var(--accent-wash);padding:1px 5px;border-radius:5px}
/* a block of code (/about's robots.txt lines): one panel, not a highlight per line (30 Sep 2026) */
pre{background:var(--accent-wash);padding:10px 14px;border-radius:var(--radius);overflow-x:auto;line-height:1.6;max-width:max-content}
pre code{background:none;padding:0;border-radius:0}

/* the home page's hero, as Fihrist's dashboard: the mark, then the name and what this is */
.hero{display:flex;gap:28px;align-items:center;margin:6px 0 30px;flex-wrap:wrap}
.hero img{width:104px;height:104px;flex:none;filter:drop-shadow(0 8px 24px var(--glow))}
.hero h1{font-size:34px;margin:0 0 4px}
.hero .sub{margin:0 0 16px}
.hero > div{flex:1;min-width:280px}

/* sign-in, and a refusal: one centred column */
.signin{max-width:520px;margin:8vh auto 0;text-align:center}
.signin img{width:72px;height:72px;margin-bottom:12px}
.signin h1{margin:0 0 6px}
.signin .wordmark{text-align:left}
.signin p{color:var(--ink-2)}
.signin .fine{margin-top:22px}
.go{display:inline-block;margin-top:18px;padding:13px 24px;border-radius:12px;background:var(--accent);
 color:var(--on-accent);font-weight:600;text-decoration:none}
.go:hover{background:var(--accent-2);text-decoration:none}

input[type=text]{padding:11px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2);
 color:var(--ink);font-size:15.5px;font-family:inherit}
input[type=text]::placeholder{color:var(--ink-3)}
input[type=text]:focus{border-color:var(--accent-2);outline:none;box-shadow:0 0 0 3px var(--accent-wash)}
button{font:inherit;cursor:pointer;padding:11px 18px;border:0;border-radius:10px;background:var(--accent);
 color:var(--on-accent);font-size:14.5px;font-weight:650;letter-spacing:.005em}
button:hover{background:var(--accent-2)}
button.quiet{background:transparent;color:var(--ink-2);border:1px solid var(--line-2);padding:5px 12px;font-weight:500}
button.quiet:hover{border-color:var(--ink-3);color:var(--ink);background:var(--panel-2)}
form{margin:0}

/* ── the reading room ─────────────────────────────────────────────────────────────────────────────────────────── */
.crumbs{color:var(--ink-3);font-size:14px;margin:0 0 10px}
.crumbs a{color:var(--ink-2)}
table.list{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:15px}
table.list th{text-align:left;color:var(--ink-3);font-weight:500;font-size:13px;padding:8px 10px;
 border-bottom:1px solid var(--line)}
table.list td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.list tr:hover td{background:var(--bg-2)}
table.list td.num{font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.t-rtl{direction:rtl;unicode-bidi:isolate;font-family:var(--prose);font-size:1.05em}
h1.t-rtl{font-size:30px;line-height:1.7;margin:4px 0 10px}
.pill{display:inline-block;font:600 11.5px/1 var(--mono);padding:4px 7px;border-radius:6px;background:var(--panel-2);
 color:var(--ink-2);white-space:nowrap}
.pill.ok{background:var(--accent-wash);color:var(--accent-2)}
.pill.bad{background:var(--red-wash);color:var(--red)}
.pill.gold{color:var(--gold)}
.meta{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:14px 0 22px;font-size:14px;
 color:var(--ink-2)}
.meta dt{color:var(--ink-3)}
.meta dd{margin:0;overflow-wrap:anywhere}
article.prose{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:26px 30px;
 font-family:var(--prose);font-size:19px;line-height:2.05}
article.prose[dir=rtl]{text-align:right}
article.prose p{margin:0 0 1em}
article.prose a{color:var(--sky)}
article.prose blockquote{margin:0 0 1em;padding:0 16px;border-inline-start:3px solid var(--line-2);color:var(--ink-2)}
article.prose h1,article.prose h2,article.prose h3{font-family:var(--prose);font-weight:700;line-height:1.5}
.aside{color:var(--ink-3);font-size:14px}
ol.history{list-style:none;padding:0;margin:8px 0 24px}
ol.history li{padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
ol.history li.on{color:var(--accent-2)}
.none{color:var(--ink-3);font-style:italic}

/* The footer, Fihrist's: who this belongs to on one line — the family, and its siblings — and who
   built it opposite; then the version and the one-line promise. */
footer{border-top:1px solid var(--line);background:var(--bg-2);padding:26px 0 30px;font-size:14px;color:var(--ink-2)}
footer .foot-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer .family{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
footer .sep{color:var(--ink-3)}
footer a{color:var(--ink-2)}
footer a b{color:var(--ink);font-weight:600}
footer a:hover{color:var(--accent-2);text-decoration:none}
footer a:hover b{color:var(--accent-2)}
footer .foot-line{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;color:var(--ink-3);
 align-items:center}
footer .foot-line a{color:var(--ink-3)}
@media (max-width:600px){
  h1{font-size:24px} main{padding:22px 0 44px}
  footer .foot-row{flex-direction:column;align-items:flex-start}
}
/* ⭐ A PHONE (640 px and under): the bar is ONE row — the name, the badge on dev, the menu, the Arabic name — and
   the menu row, who you are and Sign out move into the menu. The tagline goes: it is what wrapped first. */
@media (max-width:640px){
  .topbar{flex-wrap:nowrap;padding:10px 0 8px}
  .topbar .brand small{display:none}
  .topbar .who,.topbar > form.signout,header .wrap > nav{display:none}
  .menu{display:block}
  .topbar .wm-ar{margin-left:4px}
  table.list .opt{display:none}
  article.prose{padding:18px 16px;font-size:18px}
}

/* search (B2b) */
.nav-search input[type=text]{padding:6px 10px;font-size:14px;width:220px}
form.search-big{display:flex;gap:10px;margin:8px 0 12px;max-width:720px}
/* a right-to-left form sits at the right edge, where its box and the results start */
form.search-big[dir=rtl]{margin-left:auto}
form.search-big input[type=text]{flex:1}
ol.results{list-style:none;padding:0;margin:14px 0 30px}
ol.results li{padding:14px 0;border-bottom:1px solid var(--line)}
ol.results li a{font-size:1.1em}
p.snippet{margin:6px 0 0;font-family:var(--prose);font-size:17px;line-height:1.9;color:var(--ink-2)}
mark{background:var(--selection);color:var(--ink);border-radius:3px;padding:0 2px}

/* ── the reading page (👯 diwan.css: .readbar, .reading, .ledger, .toc; Shabbir, 29 Sep 2026) ──────────────────────── */
/* the reader's bar, inside the sticky header: where you are, and how long the text is */
.readbar{border-top:1px solid var(--line);padding:8px 0 9px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.readbar .crumbs{flex:1 1 260px;margin:0;padding:0;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;
 font-size:13.5px;min-width:0;color:var(--ink-3)}
.readbar .crumbs a{padding:2px 4px;font-size:13.5px;font-weight:400;flex-shrink:0;color:var(--ink-2)}
.readbar .crumbs > span{flex-shrink:0}
.readbar .crumbs .here{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 color:var(--ink-2);font-family:var(--prose)}
.doc-counts{color:var(--ink-3);font-size:13.5px;white-space:nowrap}
/* the header is taller by the bar on an item's page: what sits below it (the sidebar) and every jump (a Contents
   entry, a note) must know. Measured, not guessed: see tests/test_web.py and the PR. */
html:has(.readbar){--head-h:150px}
html:has(.readbar):has(header.is-dev){--head-h:172px}

/* the text, filling its column, and the sidebar beside it that stays in view */
.reading{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
.ledger{position:sticky;top:calc(var(--head-h) + 16px);max-height:calc(100vh - var(--head-h) - 32px);overflow:auto;
 padding:18px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius)}
.ledger h2{margin:0 0 8px;font-size:15px;color:var(--ink-2)}
.ledger .side{margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--line)}
.ledger .side:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.ledger .meta{grid-template-columns:max-content minmax(0,1fr);margin:0;font-size:13.5px}
.ledger ol.history{margin:0}
ol.side-problems{list-style:none;margin:0;padding:0}
ol.side-problems li{padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
ol.side-problems li:last-child{border-bottom:0}
ol.side-problems .mono{display:block;margin-top:4px;overflow-wrap:anywhere;color:var(--ink-2)}
@media (max-width:900px){
  .reading{grid-template-columns:minmax(0,1fr)}
  .ledger{position:static;max-height:none}
}
@media (max-width:640px){.doc-counts{flex-basis:100%}}

/* Contents: pinned in the sidebar, and behind the round button on every screen (a <details>: no script) */
nav.toc{display:block;margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--line)}
.toc ol,.toc-panel ol{list-style:none;margin:0;padding:0}
.toc ol{max-height:45vh;overflow:auto}
.toc li a,.toc-panel li a{display:block;padding:4px 8px;border-radius:var(--radius-s);color:var(--ink-2);
 font:14px/1.6 var(--prose)}
.toc li a:hover,.toc-panel li a:hover{text-decoration:none;color:var(--ink);background:var(--panel-2)}
.toc .lv1 a,.toc-panel .lv1 a{font-weight:600;color:var(--ink)}
/* a level indents from the side it READS from: the start of a right-to-left entry is its right */
.toc .lv2 a,.toc-panel .lv2 a{padding-inline-start:20px}
.toc .lv3 a,.toc-panel .lv3 a{padding-inline-start:34px;font-size:13.5px}
.toc-fab{position:fixed;right:16px;bottom:24px;z-index:20}
.toc-fab > summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
 background:var(--accent);color:var(--on-accent);box-shadow:0 8px 22px var(--shadow)}
.toc-fab > summary::-webkit-details-marker{display:none}
.toc-fab[open] > summary{background:var(--accent-2)}
.toc-panel{position:absolute;right:0;bottom:62px;width:min(340px,calc(100vw - 32px));max-height:min(70vh,560px);
 overflow:auto;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
 box-shadow:0 14px 34px var(--shadow)}
.toc-title{margin:4px 8px 8px;font-weight:600;font-size:15px}

/* notes (reading._link_notes): a marker small and raised; the notes set apart at the end; the one jumped to, lit */
article.prose a.fn{font-size:.7em;line-height:0;vertical-align:super;padding:0 1px;text-decoration:none}
article.prose a.fn-back{text-decoration:none}
article.prose p.fn-note,article.prose ol.fn-notes{font-size:.84em;line-height:1.9;color:var(--ink-2)}
article.prose :not(.fn-note) + p.fn-note,article.prose ol.fn-notes{margin-top:1.8em;padding-top:1em;
 border-top:1px solid var(--line)}
article.prose p.fn-note:has(> a:target),article.prose p.fn-note:target,article.prose li:target,article.prose a.fn:target{
 background:var(--accent-wash);border-radius:var(--radius-s)}
/* the problems page: the item here, beside the page on the site */
a.here-link{font-family:var(--sans);white-space:nowrap}

/* an error, in the site's own shell (error.html): the status small and quiet above what it means */
.error-page .error-code{margin:0 0 6px;font:600 13px/1 var(--mono);letter-spacing:.12em;color:var(--ink-3)}
.error-page .error-ref{font-size:13px;user-select:all}

/* tokens and connecting an assistant (B3): the form to make one, the token shown once, the list */
form.mint{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin:18px 0 22px}
form.mint label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--ink-3)}
.fresh{margin:16px 0;padding:14px 16px;border:1px solid var(--accent-2);border-radius:var(--radius);background:var(--accent-wash)}
.fresh p{margin:0 0 8px}
.fresh.bad{border-color:var(--red);background:var(--red-wash)}
input.secret{width:100%;max-width:640px;user-select:all}
table.tokens tr.off td{opacity:.55}
code.addr{font-size:14px;user-select:all}
.meta.connect{grid-template-columns:minmax(160px,max-content) 1fr;font-size:14.5px}