/* diwan — Fihrist's shell, row for row, in diwan's own colours (docs/DESIGN.md).
   The header, the menu, the footer and the spacing are Fihrist's (research-toolkit src/rtk/web.py `CSS`,
   read 24 Sep 2026): a sibling site should be an easy transition for the people who use the others
   (Shabbir). The COLOURS are diwan's, sampled from its mark and lifted, hue held, only where they are
   text. Every colour lives in :root and nowhere else — tests/test_brand.py holds that, and the contrast
   of every pairing. Served as a file: the Content-Security-Policy allows no inline style or script. */
:root{
  color-scheme:dark;
  --bg:#14101b; --bg-2:#1a1522; --panel:#221e29; --panel-2:#2b2832;
  --line:#34303a; --line-2:#56535b;
  --ink:#ece9ef; --ink-2:#b5b4b7; --ink-3:#8f8d94;
  --accent:#e5a925; --on-accent:#0d0a12;
  --accent-2:#29bfa0; --accent-wash:rgba(41,191,160,.13);
  --gold:#e5a925; --red:#d7635a; --red-deep:#a63128; --red-wash:rgba(166,49,40,.17);
  --header-bg:rgba(20,16,27,.86); --selection:rgba(229,169,37,.35);
  --glow:rgba(229,169,37,.22); --shadow:rgba(0,0,0,.4);
  /* the DEVELOPMENT mark — the family's amber (research-toolkit 120): the badge, its ink, the bar's line,
     tint and hairline. #f59e0b and #1a1204 are the spec's; the rest are diwan's, measured in test_brand.py */
  --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;
}
*{box-sizing:border-box}
html{background:var(--bg)}
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}
.wrap{max-width:1120px;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}

/* 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}

.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600;
 border:1px solid var(--line-2);line-height:1.5;white-space:nowrap;color:var(--ink-2)}
.pill.warn{border-color:var(--red);color:var(--red)}
.note{padding:13px 16px;border-radius:0 var(--radius-s) var(--radius-s) 0;margin:0 0 18px;font-size:14.5px;
 border-left:3px solid}
.note.ok{background:var(--accent-wash);border-color:var(--accent-2)}
.note.r{background:var(--red-wash);border-color:var(--red-deep);color:var(--ink)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.card + .card{margin-top:12px}   /* /connect stacks them; touching borders read as one box */

/* the token page's form and its one-time secret */
.mint{display:grid;gap:14px;max-width:560px;margin:20px 0 26px}
.mint label{display:grid;gap:4px;color:var(--ink-2);font-size:14px}
.mint fieldset{border:1px solid var(--line);border-radius:var(--radius-s);display:flex;gap:18px;flex-wrap:wrap}
.mint legend{color:var(--ink-2);font-size:14px;padding:0 6px}
.mint .check{display:inline-flex;align-items:center;gap:6px}
.mint button{justify-self:start}
.secret{display:flex;gap:8px} .secret input{flex:1;min-width:0;font-size:14px}

.tw{overflow-x:auto;border-radius:var(--radius)}
table{border-collapse:separate;border-spacing:0;width:100%;background:var(--panel);border:1px solid var(--line);
 border-radius:var(--radius);overflow:hidden;font-size:14px}
/* 🔴 `break-word`, NOT `anywhere` (25 Sep 2026): `anywhere` also shrinks a cell's MINIMUM width to one letter, so
   the table was free to squeeze a column below its own content — "Rev/oke" in two lines, dates and the token's
   prefix broken mid-word. `break-word` breaks a word only when it would overflow its line; .tw scrolls the rest. */
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:break-word}
th{font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);background:var(--bg-2);
 white-space:nowrap}
tr:last-child td{border-bottom:0}
tr.off td{opacity:.55}
/* the Tokens table (1195), balanced: every cell that holds ONE value stays on one line and sizes to it; the
   assistant and its label take what is left; the button column is exactly as wide as its button */
table.tokens td{vertical-align:middle}
table.tokens .nw,table.tokens .act{white-space:nowrap}
table.tokens th.act,table.tokens td.act{width:1%;text-align:right}
table.tokens .for b{display:block}
table.tokens .for .lab{display:block;color:var(--ink-2);font-size:13.5px}
table.tokens .for .pill{margin-top:5px}
table.tokens .scopes{display:flex;flex-wrap:wrap;gap:4px}
table.tokens .scopes code{white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 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}
  /* the Tokens table becomes a card per token: the assistant and the button on top, each value captioned */
  table.tokens,table.tokens tbody,table.tokens tr,table.tokens td{display:block}
  table.tokens thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.tokens{background:transparent;border:0;border-radius:0}
  table.tokens tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:14px 16px;
   margin-bottom:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
  table.tokens td{padding:0;border:0;text-align:left}
  table.tokens td.for{grid-column:1;grid-row:1;margin-bottom:4px}
  table.tokens td.act{grid-column:2;grid-row:1;width:auto;align-self:start}
  table.tokens td[data-label]{grid-column:1 / -1;display:flex;gap:10px;align-items:baseline}
  table.tokens td[data-label]::before{content:attr(data-label);flex:0 0 6.8em;font:600 10.5px var(--mono);
   text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
}
/* /connect's snippets: scroll INSIDE the card, so a long command never widens the page on a phone */
pre.mono{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:12px 14px;overflow-x:auto;white-space:pre;margin:8px 0 0}
/* /connect's operation chips — fihrist's rules, verbatim (research-toolkit src/rtk/web.py). A flex row that WRAPS:
   without it the chips ran on in one unbreakable line and pushed a 360px page to 511px (measured 25 Sep 2026). */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{font-size:11.5px;padding:2px 8px;border-radius:20px;background:var(--bg-2);
 border:1px solid var(--line);color:var(--ink-2)}