/* ── One frame for every screen (his word, 24.10) ───────────────────────────
 * 1. Every screen is as responsive as Home: no fixed column, the blocks take
 *    whatever width the window gives them, and the phone keeps its edge.
 * 2. One gutter, borrowed from Home, so no screen sits further from the edge
 *    than another.
 * 3. Every popup blurs what stands behind it.
 * 4. Arabic wears IBM Plex Sans Arabic, the face the vault already uses (D-001
 *    of the websidian record), bundled here — never a CDN.
 * ────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Plex Arabic";
  src: url("/static/fonts/arabic-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
@font-face {
  font-family: "Plex Arabic";
  src: url("/static/fonts/arabic-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
@font-face {
  font-family: "Plex Arabic";
  src: url("/static/fonts/arabic-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}

:root {
  --gutter: 12px;
  --font-arabic: "Plex Arabic";
}

/* the Arabic face sits at the end of the stack: unicode-range means it only
   ever serves Arabic glyphs, and Latin keeps the app's own face */
body, input, textarea, select, button {
  font-family: "Plex Arabic", var(--font), system-ui, sans-serif;
}

/* ── 1 + 2: one responsive frame, one gutter ───────────────────────────── */
#view {
  max-width: none;                 /* the column no longer stops at 720px */
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.d2 .body, .d2.deck .body { padding-left: var(--gutter); padding-right: var(--gutter); }
body.is-deck #view, body.is-deck .d2.deck .body { padding-left: var(--gutter); padding-right: var(--gutter); }
.home__hero, .home__sheet { padding-left: 0; padding-right: 0; }

/* the phone-sized blocks that were fixed now stretch with their column */
.d2 .metrics, .d2 .top2, .d2 .chart, .d2 .deckrow, .d2 .ptile { width: 100%; }
.d2 .chart { gap: clamp(3px, 1.2vw, 8px); }
.d2 .metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.d2 .top2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; }
.d2 .ring, .d2 .rr .disc { max-width: 100%; }
.d2 .btn { width: 100%; }

/* room to breathe on a wide window, without turning the phone into a column */
@media (min-width: 760px) {
  :root { --gutter: 24px; }
  .d2 .body { max-width: 1100px; margin: 0 auto; }
}

/* ── 3: every popup blurs what is behind it ────────────────────────────── */
.sheetback,
.modal {
  background: rgba(4, 8, 6, .46) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.06);
  backdrop-filter: blur(12px) saturate(1.06);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sheetback, .modal { background: rgba(4, 8, 6, .74) !important; }
}
.sheetcard, .modal__card { box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }

/* a row's text takes every pixel the marks leave, and no more */
.d2.decks-screen .deckrow .t, .d2 .deckrow .t { flex: 1 1 0; width: 0; min-width: 0; }
.d2 .deckrow { gap: 10px; }

/* ── the five-part ring that replaced the bars (T-253) ─────────────────── */
.d2 .metrics .m .segsig { width: 34px; height: 34px; display: block; }

/* ── the admin card: a title and its action on one line, rows that fit ─── */
.admincards { display: grid; gap: 12px; }
.adhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.adhead h2 { font-size: 15px; font-weight: 700; margin: 0; }
.admrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; padding: 10px 2px;
  background: none; border: 0; border-top: 1px solid var(--line); color: inherit; }
.admrow:first-of-type { border-top: 0; }
.admrow__id { flex: 0 0 auto; font-size: 11px; color: var(--muted); min-width: 30px; }
.admrow__t { flex: 1 1 0; min-width: 0; }
.admrow__t b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.admrow__t i { display: block; font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.runnow { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--raised);
  color: var(--ink); border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 700; }
.runnow svg { width: 13px; height: 13px; }
.morebtn { width: 100%; margin-top: 10px; padding: 10px; border-radius: 12px; background: none;
  border: 1px solid var(--line); color: var(--muted); font-size: 12px; }

/* ── the concept rows are buttons now: they open their own card (T-254) ─── */
.d2 .kidrow { width: 100%; background: none; border: 0; border-top: 1px solid #1E2622; text-align: start;
  font: inherit; cursor: pointer; }
.d2 .kidrow:first-child { border-top: 0; }
.d2 .sheetcard .input, .d2 .sheetcard .select, .sheetcard .input, .sheetcard textarea.input {
  width: 100%; background: #0F1412; border: 1px solid #2A332F; color: #EDF2EE; border-radius: 10px;
  padding: 9px 10px; font-size: 13px; font-family: inherit; }
.sheetcard .btn { width: 100%; margin-top: 8px; }
.sheetcard .btn--danger { background: #3A1F1A; color: #FFD7CF; border: 1px solid #5A2E26; }

/* ── three circles on one line, two boxes under them (T-255) ───────────── */
.d2 .top2.triple { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: start; }
.d2 .top2.triple .rr { width: 100%; }
.d2 .top2.triple .rr .disc { width: 100%; max-width: 118px; aspect-ratio: 1; margin: 0 auto; }
.d2 .top2.triple .disc .arc, .d2 .top2.triple .disc svg { width: 100%; height: 100%; }
.d2 .top2.triple .rr .v { font-size: clamp(22px, 7.2vw, 30px); }
.d2 .top2.triple .cap2 { font-size: 9.5px; letter-spacing: .1em; margin-top: 8px; white-space: nowrap; }
.d2 .top2.triple .disc .segsig--big { width: 95%; height: 95%; display: block; margin: 2.5% auto; }
.d2 .metrics.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.d2 .metrics.duo .m { min-height: 96px; }

/* the corner control: sign out, with its own mark (T-255) */
.signout-fab {
  position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 60;
  width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 25, 23, .72); border: 1px solid #2A332F; color: #C7D2CB;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.signout-fab svg { stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body.is-session .signout-fab, body.is-login .signout-fab { display: none; }
/* the report word leaves that corner; the report itself moves into Account */
.report-mark { display: none !important; }

.reportrow { width: 100%; margin-bottom: 8px; padding: 10px; border-radius: 12px; background: none;
  border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }

/* ── T-256: one title, tighter margins on a phone, sign out only in Account ── */
.d2 .mark, .d2.deck .mark, .d2.stats .mark, .d2.account .mark, .d2.decks-screen .mark {
  font-size: 15px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
}
.d2 header { padding: 10px 0 2px; min-height: 44px; align-items: center; }
body:not(.is-session) .d2 > .body > header { display: flex; }

/* the corner mark is Account's alone */
.signout-fab { display: none; }
body.is-me .signout-fab { display: flex; }

/* the account column takes the window, like every other screen */
@media (min-width: 600px) {
  .d2.account main { max-width: none; }
  .d2.account header { max-width: none; }
}

/* a phone has little room: the gutter halves under 420 */
@media (max-width: 420px) {
  :root { --gutter: 8px; }
  .d2 .body, .d2.deck .body { padding-left: 8px; padding-right: 8px; }
  body.is-deck #view, body.is-deck .d2.deck .body { padding-left: 8px; padding-right: 8px; }
  .d2 header { padding: 6px 0 0; }
}

/* the report item in the bar reads like the other three */
.tabbar__item--report .tabbar__icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linejoin: round; }

/* a button in the bar wears the bar's clothes, never the browser's */
.tabbar__item, .tabbar__item--report, button.tabbar__item {
  background: none !important; border: 0 !important; padding: 0; color: inherit;
  -webkit-appearance: none; appearance: none;
}
.tabbar__item .tabbar__icon, .tabbar__item--report .tabbar__icon { background: none !important; }
.tabbar__item svg, .tabbar__item--report svg { background: none !important; }

/* the report is its own control in the same bar, drawn at the links' size */
.tabbar__report { background: none; border: 0; padding: 0; color: inherit; display: inline-flex;
  align-items: center; justify-content: center; width: 32px; height: 32px; }
.tabbar__report .tabbar__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linejoin: round; }
.tabbar__report[aria-pressed="true"], .tabbar__report:hover { color: #C9F45A; }

/* ── T-257: the deck screens wear the same gutter and the same title edge as the rest ── */
:root { --gutter: 4px; }
@media (min-width: 760px) { :root { --gutter: 12px; } }
#view { padding-left: var(--gutter); padding-right: var(--gutter); }
.d2 .body, .d2.deck .body { padding-left: var(--gutter); padding-right: var(--gutter); }
body.is-deck #view { padding: var(--gutter) var(--gutter) calc(16px + var(--tabbar-h)) !important; }
body.is-deck .d2 .body { padding: 0 var(--gutter) 0 !important; }
body.is-deck .d2 header { padding: 8px 0 0 !important; }
.d2 header { padding: 8px 0 0 !important; }
@media (max-width: 420px) {
  :root { --gutter: 4px; }
  .d2 .body, .d2.deck .body, body.is-deck .d2 .body { padding-left: 4px; padding-right: 4px; }
  body.is-deck #view { padding-left: 4px; padding-right: 4px; }
}

body.is-deck .d2.deck { padding: 0 !important; }
body.is-deck .d2.deck .body { padding-top: 0 !important; }
.d2 header, body.is-deck .d2 header { padding: 13px 0 0 !important; }
body.is-deck #view { padding-top: 0 !important; }

/* ── T-258: the notch owns the top edge, and every popup is centred ───────── */
#view { padding-top: calc(var(--gutter) + env(safe-area-inset-top, 0px)); }
.d2 header, body.is-deck .d2 header { padding-top: calc(13px + env(safe-area-inset-top, 0px)) !important; }
body.is-deck #view { padding-top: env(safe-area-inset-top, 0px) !important; }

.sheetback, .modal, .report { align-items: center !important; justify-content: center !important; }
.report__sheet { margin: auto !important; border-radius: 18px; }

/* T-259 — the top margin is a third of what it was: 13 → 4 (plus the notch inset) */
#view { padding-top: calc(4px + env(safe-area-inset-top, 0px)); }
.d2 header, body.is-deck .d2 header { padding-top: calc(4px + env(safe-area-inset-top, 0px)) !important; }

#view { padding-top: calc(2px + env(safe-area-inset-top, 0px)) !important; }
body.is-deck #view { padding-top: env(safe-area-inset-top, 0px) !important; }
.d2 header, body.is-deck .d2 header { padding-top: calc(4px + env(safe-area-inset-top, 0px)) !important; }

.d2 header { min-height: 20px !important; align-items: center !important; }

.d2 .avatar { width: 26px !important; height: 26px !important; }
.d2 header { min-height: 0 !important; padding-top: calc(2px + env(safe-area-inset-top, 0px)) !important; }

/* T-261 — the notch inset belongs to ONE box, not two: the phone was being given it twice, which is
   the tall empty band under the status bar on an installed shortcut. */
#view { padding-top: calc(2px + env(safe-area-inset-top, 0px)) !important; }
body.is-deck #view { padding-top: env(safe-area-inset-top, 0px) !important; }
.d2 header, body.is-deck .d2 header { padding-top: 2px !important; }
.d2 .body { padding-top: 0 !important; }

/* the parent's own two decisions sit on its tile, small and out of the way (T-263) */
.d2 .ptile .tileedit { width: 28px; height: 28px; border-radius: 99px; border: 0; background: rgba(201,244,90,.10);
  color: #C9F45A; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.d2 .ptile .tileedit svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGNER PASS (T-264) — the craft manual's laws applied to what ships:
   one 8-pt grid, three type steps, three radii, 56 px rows, tabular numbers.
   Every value below replaces an off-grid number that came in screen by screen.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --t-sm: 12px; --t-md: 15px; --t-lg: 20px; --t-xl: 30px;
  --r-sm: 14px; --r-md: 18px; --r-lg: 22px;
  --hair: #1E2622;
}

/* one hairline, one row rhythm */
.d2 .deckrow, .d2 .kidrow, .admrow { min-height: 56px; border-top: 1px solid var(--hair); }
.d2 .kidrow { min-height: 48px; }
.admrow { min-height: 52px; }

/* three type steps, two weights */
.d2 .deckrow .t b, .d2 .kidrow b, .admrow__t b { font-size: var(--t-md); font-weight: 600; }
.d2 .deckrow .t i, .d2 .kidrow i, .admrow__t i, .d2 .meta, .d2 .zero { font-size: var(--t-sm); color: #8FA084; }
.d2 .h1, .d2 .page-title { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.01em; }
.d2 .mark { font-size: var(--t-sm); font-weight: 700; letter-spacing: .16em; }
.d2 .kicker { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #8FA084; }
.d2 .n, .d2 .rr .v { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.03em; }

/* digits never jump */
.d2 .v, .d2 .n, .d2 .duepill, .d2 .num, .d2 .rr .v, .admrow__id {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}

/* radii: three, never six */
.d2 .m, .d2 .ptile, .sheetcard, .wizrow, .d2 .tile-row { border-radius: var(--r-sm); }
.d2 .tile-row, .d2 .ptile { border-radius: var(--r-sm); }
.d2 .btn { border-radius: 999px; }

/* the boxes breathe on the grid, not on odd numbers */
.d2 .metrics { gap: var(--s2); }
.d2 .metrics .m { padding: var(--s2) var(--s2) var(--s2); }
.d2 .sect { margin-top: var(--s5); }
.d2 .icrow { margin-top: var(--s3); gap: var(--s3); }
.sheetcard { padding: var(--s4); }
.wizrow { padding: var(--s3); }
.wizico { width: 36px; height: 36px; border-radius: 11px; }

/* one salient thing per screen: the lime is the action, everything else is quiet */
.d2 .duepill { background: #C9F45A; color: #0A0C0B; font-weight: 700; }
.d2 .zero { background: none; }

/* every control answers within 100 ms */
.tabbar__item, .d2 .btn, .d2 .deckrow, .d2 .kidrow, .addbtn2, .iconbtn, .admrow, .tabbar__fab {
  transition: transform .09s ease, opacity .09s ease, background-color .09s ease;
}
.tabbar__item:active, .d2 .btn:active, .d2 .deckrow:active, .d2 .kidrow:active,
.addbtn2:active, .iconbtn:active, .admrow:active, .tabbar__fab:active { transform: scale(.985); opacity: .92; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* T-299 — icon button base style (works outside .d2, e.g. in sheets).
   44 × 44 touch target, centred icon, dark surface, hairline border. */
.iconbtn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--hair, #1E2622);
  background: var(--card, #141917);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.iconbtn svg { width: 20px; height: 20px; stroke: var(--ink, #EDF2EE); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* T-299 — the shared date control: one row, input fills, 44 px button at right. */
.date-control { display: inline-flex; gap: 8px; align-items: center; position: relative; }
.date-control .input { width: auto; flex: 1 1 auto; min-width: 0; }

/* T-305 — a visually hidden native <input type="date"> sits in the control; the calendar button
   calls showPicker() on it (or focuses+clicks it), so the OS picker opens from a tap on the icon.
   It is 1px and out of the layout flow, so it can never repeat T-299's WebKit width. */
.date-control__native {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.d2 .top2.triple .disc { overflow: visible; }

/* T-265 — the three circles are ONE size, their numbers ONE size, and the words under them on ONE line */
.d2 .top2.triple { align-items: start; }
.d2 .top2.triple .rr { display: grid; grid-template-rows: auto 18px; justify-items: center; align-items: start; }
.d2 .top2.triple .disc { width: 100%; aspect-ratio: 1; display: grid; place-items: center; margin: 0; }
.d2 .top2.triple .disc .arc { width: 100%; height: 100%; }
.d2 .top2.triple .disc .sigwrap { display: grid; place-items: center; width: 100%; height: 100%; }
.d2 .top2.triple .disc .segsig--big { width: 100%; height: 100%; margin: 0; }
.d2 .top2.triple .rr .v { font-size: 28px; line-height: 1; font-weight: 700; }
.d2 .top2.triple .cap2 { margin: 8px 0 0; height: 18px; display: flex; align-items: flex-start;
  font-size: 10px; letter-spacing: .1em; white-space: nowrap; }

/* ═══ T-266 — ONE circle, everywhere ══════════════════════════════════════════
   Home's three, the Decks ring, Statistics' pair: one diameter, one number size,
   one caption size, one gap under the circle. The tokens are the contract. */
:root { --ring: 104px; --ring-num: 30px; --cap: 10px; --cap-gap: 8px; }

.d2 .disc, .d2 .ring { width: var(--ring) !important; height: var(--ring) !important; }
.d2 .disc svg, .d2 .ring svg { width: 100%; height: 100%; }
.d2 .disc .v, .d2 .rr .v, .d2 .ring .in b, .d2 .ring .in .num { font-size: var(--ring-num) !important;
  line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.d2 .disc .v span, .d2 .ring .in i { font-size: 11px !important; }
.d2 .cap2, .d2 .ring ~ .meta, .d2.decks-screen .ring + .meta, .d2.stats .cap2 {
  font-size: var(--cap) !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #8FA084; margin-top: var(--cap-gap) !important; text-align: center;
}
/* the three on Home keep their own track so the words still share a line */
.d2 .top2.triple .rr { grid-template-rows: auto calc(var(--cap) + var(--cap-gap) + 4px); }
.d2 .top2.triple .disc { margin: 0 auto !important; }
/* a ring that sits alone (Decks, Statistics) centres without changing its size */
.d2 .ring { margin-inline: auto !important; }

.d2.stats .rr .v, .d2.stats .rr .v span, .d2.stats .num, .d2.decks-screen .ring .in .num,
.d2.decks-screen .ring .in b { font-size: var(--ring-num) !important; line-height: 1; font-weight: 700; }
.d2.stats .rr .v span { font-size: 13px !important; }

/* ═══ T-268 — the bar is iOS tempered glass at 80% of the width ═══ */
.tabbar {
  width: calc(80% - 74px) !important; left: 10% !important; right: auto !important; margin-inline: 0 !important;
  height: 58px !important; padding: 0 14px !important;
  background: rgba(30, 36, 33, .58) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 999px !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .07);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar { background: rgba(24, 29, 27, .93) !important; }
}
.tabbar__item { color: #A9B6AF; }
.tabbar__item[aria-current="page"] { color: #C9F45A; }
.tabbar__fab { right: -74px !important; }

/* his word, 25.10: the glass is right, the size and the centring go back to what they were */
.tabbar { width: 210px !important; left: calc(50% - 142px) !important; right: auto !important; }
.tabbar__fab { right: -74px !important; }