/* PM Copilot — tokens (verbatim from context/input-DESIGN.md) + components.
   Components use semantic tokens only; raw hex lives in these two blocks.
   Exception: --text-subtle (both modes) and dark --accent / --accent-hover are darkened to pass WCAG AA; BRAND.md §2. */
:root {
  --bg: #F4F5F7; --surface: #FFFFFF; --surface-2: #F4F4F6;
  --border: #E3E4E9; --border-strong: #D4D5DB;
  --text: #16171D; --text-muted: #5F616B; --text-subtle: #6E6F79;
  --accent: #4F46E5; --accent-hover: #4338CA; --accent-text: #4338CA; --accent-tint: #EEF2FF; --on-accent: #FFFFFF;
  --ok-fg: #15803D; --ok-bg: #DCFCE7; --risk-fg: #92400E; --risk-bg: #FEF3C7; --late-fg: #B91C1C; --late-bg: #FEE2E2;
  --ai-tint: #EEF2FF; --ai-fg: #4338CA;
  --p1: #0F766E; --p2: #0369A1; --p3: #57534E; --p4: #86198F;
  --logo-plate: #16171D; --logo-bar: #FFFFFF; --logo-band: #8A8C96; --logo-tick: #A5B4FC;
  --shadow-popover: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-modal: 0 16px 48px rgba(0,0,0,0.18);
  --scrim: oklch(0.18 0.01 270 / 0.36);
  --scrim-light: oklch(0.18 0.01 270 / 0.08);
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-pill: 999px;
  --fast: 120ms; --base: 180ms; --ease: cubic-bezier(0.2, 0, 0, 1);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sb-w: 232px; --panel-w: 520px;
  --bar-k: 100%; /* share of the status color in large solid bars; dark mode damps it (dark fg tokens are tuned for text) */
  /* Mobile fixed chrome: bottom nav (60) + gap (8) + Ask button (48). Content keeps 24px clear of it. */
  --chrome-b: calc(60px + 8px + 48px + 24px + env(safe-area-inset-bottom));
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #0B0C0F; --surface: #17181D; --surface-2: #1F2127;
  --border: #2C2E36; --border-strong: #3A3D45;
  --text: #EDEEF2; --text-muted: #A3A5AF; --text-subtle: #868A94;
  --accent: #6265F0; --accent-hover: #5756E0; --accent-text: #A5B4FC; --accent-tint: #22203F; --on-accent: #FFFFFF;
  --ok-fg: #4ADE80; --ok-bg: #10291B; --risk-fg: #FBBF24; --risk-bg: #2E2310; --late-fg: #F87171; --late-bg: #301616;
  --ai-tint: #22203F; --ai-fg: #A5B4FC;
  --p1: #2DB3A6; --p2: #3B9EDB; --p3: #A8A29E; --p4: #C468D0; /* lighter project hues: ≥ 5:1 on dark surface */
  --bar-k: 72%;
  --logo-plate: #EDEEF2; --logo-bar: #16171D; --logo-band: #5F616B; --logo-tick: #4F46E5;
  --shadow-popover: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-modal: 0 16px 48px rgba(0,0,0,0.6);
  --scrim: oklch(0.05 0 0 / 0.6);
  --scrim-light: oklch(0.05 0 0 / 0.2);
  color-scheme: dark;
}
html[lang="fa"] { --font: Vazirmatn, Tahoma, system-ui, -apple-system, "Segoe UI", sans-serif; --fs: 14px; --lh: 1.7; --fs-sm: 12px; --fs-xs: 11px; }
html[lang="en"] { --font: Inter, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --fs: 13px; --lh: 1.5; --fs-sm: 12px; --fs-xs: 11px; }

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs); line-height: var(--lh); -webkit-font-smoothing: antialiased; }
body { margin: 0; min-height: 100dvh; }
html.lock { overflow: hidden; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* <main tabindex=-1> takes focus on route change for screen readers; it is not a control, so no ring
   (its outline showed as a stray full-width accent line under the content). */
main:focus { outline: none; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 8px; top: -40px; z-index: 100; background: var(--surface); padding: 6px 10px; border-radius: var(--r-md); border: 1px solid var(--border); }
.skip:focus { top: 8px; }
svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .flip { transform: scaleX(-1); }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid transparent; background: none; font-weight: 500; white-space: nowrap; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.btn-lg { height: 36px; padding: 0 14px; }
.btn-sm { height: 28px; padding: 0 10px; font-size: var(--fs-sm); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-ghost { color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { color: var(--late-fg); }
.btn-danger:hover { background: var(--late-bg); }
.btn-danger-solid { background: var(--late-bg); color: var(--late-fg); border-color: var(--late-fg); }
.btn-danger-solid:hover { background: var(--surface-2); }
.btn[disabled] { opacity: .5; cursor: default; }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-md); border: 0; background: none; color: var(--text-muted); }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.link-btn { border: 0; background: none; padding: 0 2px; color: var(--accent-text); font-weight: 500; border-radius: var(--r-sm); }
.link-btn:hover { text-decoration: underline; }
kbd { font-family: var(--mono); font-size: 11px; line-height: 18px; padding: 0 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--r-sm); color: var(--text-muted); background: var(--surface); direction: ltr; }

/* ---------- Badges & pills ---------- */
.tier { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; border: 1px solid; }
/* Tier chips: no hue (accent stays for actions/links/selection); weight carries the authority level so T2 stands out on a skim. */
.tier-T0 { border-color: var(--border); color: var(--text-subtle); }
.tier-T1 { border-color: var(--border-strong); color: var(--text-muted); }
.tier-T2 { border-color: var(--text); color: var(--text); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-ok { background: var(--ok-bg); color: var(--ok-fg); }
.pill-risk { background: var(--risk-bg); color: var(--risk-fg); }
.pill-late { background: var(--late-bg); color: var(--late-fg); }
.pill-neutral { background: var(--surface-2); color: var(--text-muted); }
.ai { color: var(--ai-fg); font-variant-emoji: text; }
.ai-block { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-md); background: var(--ai-tint); color: var(--ai-fg); font-size: var(--fs-sm); font-weight: 500; }
.ai-reason { display: grid; gap: 4px; padding: 10px 12px; }
.ai-reason p { margin: 0; color: var(--text); font-size: var(--fs); font-weight: 400; line-height: 1.55; }
.ai-src { color: var(--ai-fg); font-weight: 500; }
/* AI surfaces are always exactly --ai-tint: no mixes, no hover tints (a mixed hover stuck on after taps on touch). */
.avatar.avatar-ai { background: var(--ai-tint); border-color: transparent; color: var(--ai-fg); }

/* ---------- Shell ---------- */
.app { display: grid; grid-template-columns: var(--sb-w) minmax(0, 1fr); min-height: 100dvh; }
.app.collapsed { --sb-w: 56px; }
.sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-inline-end: 1px solid var(--border); background: var(--bg); overflow: hidden; }
.brand { display: flex; align-items: center; gap: 10px; height: 32px; padding-inline: 4px; margin-bottom: 12px; font-weight: 600; white-space: nowrap; }
.mark { flex: none; display: block; width: 24px; height: 24px; }
.mark .m-plate { fill: var(--logo-plate); } .mark .m-bar { fill: var(--logo-bar); } .mark .m-band { fill: var(--logo-band); } .mark .m-tick { fill: var(--logo-tick); }
.nav-item { position: relative; display: flex; align-items: center; gap: 10px; height: 32px; width: 100%; padding-inline: 10px; border: 0; border-radius: var(--r-md); background: none; color: var(--text-muted); text-align: start; white-space: nowrap; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item[aria-current="page"] { background: var(--accent-tint); color: var(--accent-text); font-weight: 500; }
.nav-badge { margin-inline-start: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent-text); font-size: var(--fs-xs); font-weight: 600; line-height: 18px; text-align: center; } /* Actions waiting for you → accent pair */
.nav-item[aria-current="page"] .nav-badge { background: var(--surface); }
.sb-foot { margin-top: auto; }
.collapsed .nav-label, .collapsed .brand-name { display: none; }
.collapsed .nav-badge { position: absolute; top: 1px; inset-inline-end: 1px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; font-size: 11px; background: var(--accent); color: var(--on-accent); }
.collapsed .nav-item { justify-content: center; padding: 0; }

.main { min-width: 0; transition: padding var(--base) var(--ease); }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 20px; background: var(--bg); border-bottom: 1px solid var(--border); }
.topbar .mobile-only { display: none; }
.askbar { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 560px; height: 36px; padding: 0 8px 0 12px; padding-inline: 12px 8px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text-muted); text-align: start; transition: border-color var(--fast) var(--ease); }
.askbar:hover { border-color: var(--border-strong); }
.askbar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-end { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
.seg { display: inline-flex; height: 28px; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.seg button { border: 0; background: none; padding: 0 8px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.seg button:hover { color: var(--text); background: var(--surface-2); }
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); }
.avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 600; color: var(--text); flex: none; }
.avatar-sm { width: 20px; height: 20px; font-size: 11px; }
.bottom-nav, .ask-fab { display: none; }

/* ---------- Today ---------- */
.page { max-width: 800px; margin-inline: auto; padding: 32px 24px 96px; }
.overline { color: var(--text-muted); font-size: var(--fs-sm); }
h1.count { margin: 4px 0 0; font-size: 26px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
html[lang="fa"] h1.count { letter-spacing: 0; }
.sec { margin-top: 36px; }
/* Skim anchors: every section starts with a readable title (text color, one step above body) and its count as a chip.
   The chip takes a meaning color only when the count is one: .n-act = waiting for you (accent = action), .n-risk = at risk (status). */
.sec-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: calc(var(--fs) + 1px); font-weight: 600; color: var(--text); }
.sec-h .n, .card-h h2 .n, .gl-gh .n, .h1 .n, .psec h3 .n, .ig-h .n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); line-height: 1; }
.sec-h .n-act { background: var(--accent-tint); border-color: transparent; color: var(--accent-text); }
.sec-h .n-risk { background: var(--risk-bg); border-color: transparent; color: var(--risk-fg); }
.stack { display: grid; gap: 8px; }
.box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }

/* Action card — compact */
.acard { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 12px 12px 12px 16px; padding-inline: 16px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color var(--fast) var(--ease); }
.acard:hover { border-color: var(--border-strong); }
.acard.is-open { border-color: var(--accent); }
.acard-meta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.acard-sum { grid-column: 1; font-weight: 500; font-size: calc(var(--fs) + 1px); }
.acard-imp { grid-column: 1; display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-sm); color: var(--text-muted); }
.acard-imp svg { margin-top: 2px; }
.acard-open { grid-column: 2; grid-row: 1 / span 3; }
.imp-late { color: var(--late-fg); } .imp-risk { color: var(--risk-fg); } .imp-ok { color: var(--ok-fg); }
/* Inline, not flex: the segment is a sentence; flex would put a gap between a <bdi> run ("CRM") and the colon after it. */
.imp-seg { display: inline; }
.imp-seg svg, .acard-imp .imp-seg svg { margin-top: 0; vertical-align: -3px; }
.imp-sum { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: var(--fs-sm); }
.imp-sum svg { flex: none; margin-top: 2px; }

/* Risk rows */
.row-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 16px; border: 0; border-bottom: 1px solid var(--border); background: none; text-align: start; transition: background var(--fast) var(--ease); }
.row-btn:last-child { border-bottom: 0; }
.row-btn:hover { background: var(--surface-2); }
.row-btn .grow { flex: 1; min-width: 0; }
.row-btn .go { color: var(--text-subtle); }
.ico-late { color: var(--late-fg); } .ico-risk { color: var(--risk-fg); } .ico-ok { color: var(--ok-fg); }
/* Risk rows: the leading icon sits in its status pair (fg on bg), so severity reads before the sentence does. */
.risk-row > svg.i:first-child, .risk-row .row-main > svg.i:first-child { box-sizing: content-box; padding: 6px; border-radius: 50%; background: var(--surface-2); color: var(--text-muted); }
.risk-row > svg.ico-late:first-child { background: var(--late-bg); color: var(--late-fg); }
.risk-row > svg.ico-risk:first-child { background: var(--risk-bg); color: var(--risk-fg); }
.risk-row > svg.ico-ok:first-child { background: var(--ok-bg); color: var(--ok-fg); }
/* "Waiting for you": the one chip that asks the reader to act → accent pair. */
.tag-me { border-color: transparent; background: var(--accent-tint); color: var(--accent-text); font-weight: 600; }
.tag { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 6px; white-space: nowrap; }

/* Projects */
.proj-head, .proj { display: grid; grid-template-columns: minmax(0, 1.4fr) 110px minmax(120px, 1fr) 104px; align-items: center; gap: 16px; padding: 0 16px; }
.proj-head { height: 32px; font-size: var(--fs-xs); color: var(--text-subtle); border-bottom: 1px solid var(--border); }
.proj { min-height: 44px; width: 100%; border: 0; border-bottom: 1px solid var(--border); background: none; text-align: start; }
.proj:last-child { border-bottom: 0; }
.proj:hover { background: var(--surface-2); }
.pname { display: flex; align-items: center; gap: 8px; font-weight: 500; min-width: 0; }
.pdot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.bar { display: flex; align-items: center; gap: 10px; }
.bar-track { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; direction: ltr; }
.bar-fill { display: block; height: 100%; border-radius: 3px; }.bar-pct { min-width: 36px; font-size: var(--fs-sm); color: var(--text-muted); text-align: end; }
.p85 { text-align: end; font-size: var(--fs-sm); }
.p85 b { font-weight: 500; color: var(--text); }
.p85 small { color: var(--text-subtle); font-size: var(--fs-xs); margin-inline-end: 4px; }

.since { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--text-muted); }
.since span { display: inline-flex; align-items: center; gap: 6px; }
.since .dot { color: var(--text-subtle); }
.empty-line { margin: 4px 0 0; font-size: 24px; font-weight: 600; line-height: 1.35; }
.decided { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-sm); }
.decided button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); }
.decided button:hover { background: var(--surface-2); color: var(--text); }
.soon { padding-top: 64px; }
.soon h1 { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
.soon p { margin: 0 0 16px; color: var(--text-muted); }

/* ---------- Action panel (expanded) ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); animation: fade var(--base) var(--ease); }
.scrim-light { background: var(--scrim-light); }
.panel { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 41; width: min(var(--panel-w), 100%); display: flex; flex-direction: column; background: var(--surface); border-inline-start: 1px solid var(--border); box-shadow: var(--shadow-modal); animation: slide-in var(--base) var(--ease); }
[dir="rtl"] .panel { animation-name: slide-in-rtl; }
/* Sheets (sheet.js): S ~40% · M ~70% · L ~90% of the viewport, from the inline-end edge. The provider's content
   sits in .sh-c (display: contents), so its head / body / foot stay flex children of the sheet. */
.sheet-S { width: min(100%, max(400px, 40vw)); }
.sheet-M { width: min(100%, max(480px, 70vw)); }
.sheet-L { width: min(100%, 90vw); }
.sh-c { display: contents; }
.sh-bar { display: flex; align-items: center; gap: 4px; min-height: 48px; padding-inline: 12px 8px; border-bottom: 1px solid var(--border); flex: none; }
.sh-back { max-width: 40%; } .sh-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-handle { flex: 1; align-self: stretch; min-width: 44px; border: 0; background: none; padding: 0; visibility: hidden; }
.sh-handle span { display: block; width: 36px; height: 4px; margin: 0 auto; border-radius: var(--r-pill); background: var(--border-strong); }
.sh-page { color: var(--text-muted); }
/* "Open as page": the same content in the page flow (no inner scroll box; the foot stays reachable). */
.as-page .panel-head { padding-inline: 0; }
.as-page .panel-body { overflow: visible; padding-inline: 0; }
.as-page .panel-foot { position: sticky; bottom: 0; padding-inline: 0; }
.panel-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--border); display: grid; gap: 10px; }
.ph-top { display: flex; align-items: center; gap: 8px; }
.ph-top h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; }
.ph-top .icon-btn { margin-inline-start: auto; }
.ph-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.quote { margin: 0; font-size: calc(var(--fs) + 2px); line-height: 1.55; font-weight: 500; }
.quote::before { content: open-quote; color: var(--text-subtle); } .quote::after { content: close-quote; color: var(--text-subtle); }
html[lang="fa"] .quote { quotes: "«" "»"; } html[lang="en"] .quote { quotes: "\201C" "\201D"; }
.req-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-sm); color: var(--text-muted); }
.req-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.panel-body { flex: 1; overflow-y: auto; padding: 16px 20px 24px; display: grid; align-content: start; gap: 22px; }
.psec h3 { margin: 0 0 8px; font-size: var(--fs); font-weight: 600; color: var(--text); }
.kv { display: grid; gap: 2px; }
.kv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 32px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.kv-row:last-child { border-bottom: 0; }
.kv-k { color: var(--text-muted); min-width: 64px; }
.chg { display: inline-flex; align-items: center; gap: 6px; }
.chg .from { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--text-subtle); }
.chg .to { font-weight: 600; }
.chg svg { color: var(--text-subtle); width: 14px; height: 14px; }
.goal-label { font-weight: 500; margin-bottom: 2px; }
.sub-list { margin: 4px 0 6px; padding: 0; list-style: none; width: 100%; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); }
.sub-list li { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 4px 10px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.sub-list li:last-child { border-bottom: 0; }
.sub-list li .grow { flex: 1; min-width: 0; }
.itable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.itable th { text-align: start; font-weight: 500; color: var(--text-subtle); font-size: var(--fs-xs); padding: 0 8px 6px 0; padding-inline: 0 8px; border-bottom: 1px solid var(--border); }
.itable td { padding: 8px 8px 8px 0; padding-inline: 0 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.itable td.after { font-weight: 600; }
.itable td.after.late { color: var(--late-fg); } .itable td.after.ok { color: var(--ok-fg); } .itable td.after.risk { color: var(--risk-fg); }
.mobile-label { display: none; }
.settled { animation: none !important; }
.warns { display: grid; gap: 6px; margin-top: 10px; }
.warn { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 500; }
.warn svg { margin-top: 2px; }
.warn-late { background: var(--late-bg); color: var(--late-fg); }
.warn-risk { background: var(--risk-bg); color: var(--risk-fg); }
.warn-ok { background: var(--ok-bg); color: var(--ok-fg); }
.plan-row { display: flex; align-items: center; gap: 10px; }
/* Deviation-rule alternative under the Plan: one neutral row, one link (an Adjust, not an approval). */
.alt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; }
.alt-row > span { flex: 1; min-width: 12em; }
.diff { margin-top: 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); font-family: var(--mono); font-size: 12px; line-height: 1.6; direction: ltr; text-align: left; overflow-x: auto; }
.diff-item { padding: 6px 12px; border-bottom: 1px solid var(--border); }
.diff-item:last-child { border-bottom: 0; }
.diff-t { color: var(--text-muted); }
.diff-t b { color: var(--text); font-weight: 500; }
.diff-del { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--text-subtle); }
.diff-add { color: var(--text); font-weight: 500; }
.diff-del::before { content: "\2212  "; text-decoration: none; display: inline-block; white-space: pre; }
.diff-add::before { content: "+  "; white-space: pre; }
/* FA plan: Persian prose in the UI font, RTL; GitLab tokens stay LTR code (app.js glText). */
.diff[dir="rtl"] { direction: rtl; text-align: start; font-family: var(--font); font-size: var(--fs-sm); line-height: 1.9; }
.diff-code { font-family: var(--mono); font-size: 12px; direction: ltr; unicode-bidi: isolate; }
.note { font-size: var(--fs-sm); color: var(--text-muted); padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.state-banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 500; }
.state-approved { background: var(--ok-bg); color: var(--ok-fg); }
.state-rejected { background: var(--surface-2); color: var(--text-muted); }
.panel-foot { border-top: 1px solid var(--border); padding: 12px 20px; padding-bottom: max(12px, env(safe-area-inset-bottom)); display: grid; gap: 10px; background: var(--surface); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.foot-row .end { margin-inline-start: auto; }
.adj-input { display: flex; gap: 8px; }
.adj-input input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); }
.adj-input input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 28px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-sm); color: var(--text); }
.chip:hover { background: var(--surface-2); border-color: var(--border-strong); }
.hint-err { font-size: var(--fs-sm); color: var(--risk-fg); background: var(--risk-bg); padding: 6px 10px; border-radius: var(--r-md); }
.sk { display: inline-block; height: 12px; width: 56px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; vertical-align: middle; }
.sk-line { display: block; height: 30px; width: 100%; border-radius: var(--r-md); }
.recalc-note { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-muted); }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent); animation: spin .8s linear infinite; }

/* ---------- Command palette ---------- */
.pal-wrap { position: fixed; inset: 0; z-index: 60; display: grid; justify-items: center; align-items: start; padding: 12vh 12px 12px; background: var(--scrim); animation: fade var(--fast) var(--ease); }
.pal { width: min(640px, 100%); max-height: 72vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-modal); overflow: hidden; }
.pal-in { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.pal-in input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: calc(var(--fs) + 2px); color: var(--text); }
.pal-in input::placeholder { color: var(--text-subtle); }
.pal-tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--border); }
.pal-tab { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 0; background: none; color: var(--text-muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pal-tab:hover { color: var(--text); }
.pal-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.pal-body { flex: 1; overflow-y: auto; padding: 8px; }
.pal-group { padding: 8px 8px 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-subtle); }
html[lang="en"] .pal-group { text-transform: uppercase; letter-spacing: .06em; }
.pal-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: var(--r-md); background: none; text-align: start; color: var(--text); }
.pal-item .grow { flex: 1; min-width: 0; }
.pal-item .meta { font-size: var(--fs-sm); color: var(--text-muted); }
.pal-item svg { color: var(--text-muted); }
.pal-item.sel, .pal-item:hover { background: var(--surface-2); }
.pal-item .enter { visibility: hidden; }
.pal-item.sel .enter { visibility: visible; }
.pal-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 16px; border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-muted); }
.pal-foot span { display: inline-flex; align-items: center; gap: 6px; }
.pal-foot .note-inline { margin-inline-end: auto; }
.sim { margin: 8px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: var(--r-lg); display: grid; gap: 10px; }
.sim-banner { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-sm); }
.sim-q { color: var(--text-muted); font-size: var(--fs-sm); }
.pal-empty { padding: 20px 12px; color: var(--text-muted); font-size: var(--fs-sm); }

/* ---------- Toast ---------- */
.toast { position: fixed; z-index: 80; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 8px 8px 8px 14px; padding-inline: 14px 8px; border-radius: var(--r-lg); background: var(--text); color: var(--bg); box-shadow: var(--shadow-popover); font-size: var(--fs-sm); animation: rise var(--base) var(--ease); }
.toast button { height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-md); background: none; color: var(--bg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.toast button:hover { border-color: var(--text-muted); }
.toast button:focus-visible { outline-color: var(--bg); }

/* ---------- Goals: shared ---------- */
.page-wide { max-width: 1080px; }
.h1 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 24px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
html[lang="fa"] .h1 { letter-spacing: 0; }
.h1 .n { height: 24px; min-width: 28px; font-size: var(--fs-sm); }
.goal-link { padding: 0; font: inherit; font-weight: 500; }
.prio { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: var(--r-sm); border: 1px solid var(--border); font: 600 11px/1 var(--mono); color: var(--text-muted); direction: ltr; }
.prio-P0 { background: var(--text); border-color: var(--text); color: var(--bg); }
.prio-P1 { border-color: var(--border-strong); color: var(--text); }
.pill-btn { border: 0; font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: help; }
.pill-btn:hover { box-shadow: inset 0 0 0 1px currentColor; }
.nodl { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }
.tip { position: fixed; z-index: 90; width: max-content; max-width: min(300px, calc(100vw - 16px)); padding: 10px 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-popover); color: var(--text); font-size: var(--fs-sm); line-height: 1.55; pointer-events: none; }
.tip p, .tip .tip-p { display: block; margin: 0 0 8px; } .tip p:last-child, .tip .tip-p:last-child { margin: 0; } .tip .tip-h { display: block; }
.tip ul { margin: 4px 0 8px; padding: 0; list-style: none; display: grid; gap: 2px; }
.tip ul:last-child { margin-bottom: 0; }
.tip-h { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.tip .formula { color: var(--text-muted); unicode-bidi: isolate; }
.tip-foot { color: var(--text-muted); }

/* Forecast strip — always LTR (dir="ltr" in markup) */
.strip { position: relative; display: block; height: 14px; direction: ltr; }
.strip::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border); }
.sg { position: absolute; top: 3px; bottom: 3px; }
.sg-solid { background: var(--text-muted); border-radius: 2px 0 0 2px; }
.sg-band { background: color-mix(in oklch, var(--text-muted) 30%, transparent); border-radius: 0 2px 2px 0; }
/* The bar takes the goal's status (goals.js health → .h-*): green on track, amber at risk; the part past the deadline stays red.
   No verdict (no deadline, low confidence) stays neutral. */
.h-ok .sg-solid { background: color-mix(in oklch, var(--ok-fg) var(--bar-k), var(--surface)); }
.h-ok .sg-band { background: color-mix(in oklch, var(--ok-fg) 32%, transparent); }
.h-risk .sg-solid { background: color-mix(in oklch, var(--risk-fg) var(--bar-k), var(--surface)); }
.h-risk .sg-band { background: color-mix(in oklch, var(--risk-fg) 34%, transparent); }
.h-late .sg-solid { background: color-mix(in oklch, var(--late-fg) 70%, var(--surface)); }
.sg-solid.late, .h-late .sg-solid.late { background: var(--late-fg); border-radius: 0; }
.sg-band.late { background: color-mix(in oklch, var(--late-fg) 38%, transparent); }
.mk { position: absolute; top: 0; bottom: 0; width: 0; }
.mk-dl { border-left: 2px solid var(--text); margin-left: -1px; }
.mk-today { border-left: 1px dashed var(--text-subtle); }
.strip-mini { flex: 1; min-width: 80px; }
.strip-lg { height: 28px; margin: 14px 0 8px; }
.strip-lg .sg { top: 7px; bottom: 7px; }
.strip-lg .mk-today { border-left-width: 2px; border-left-color: var(--text-muted); }
.strip-rm { position: absolute; inset: 0; height: auto; }
.strip-rm::before { display: none; }
.strip-rm .sg { top: calc(50% - 7px); bottom: auto; height: 14px; } /* fixed height: a two-line label row must not stretch the bar */
.strip-rm .mk-dl { top: calc(50% - 11px); bottom: auto; height: 22px; }

/* ---------- Goals list ---------- */
.gl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 16px 0 20px; }
.gl-bar .seg { height: 32px; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Dropdown (app.js dropdown()): a menu of radio items, so the selected row uses tokens, not the OS highlight. */
.dd-btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding-inline: 10px 9px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; transition: border-color var(--fast) var(--ease); }
.dd-btn:hover, .dd-btn[aria-expanded="true"] { border-color: var(--border-strong); color: var(--text); }
.dd.on .dd-btn { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); }
.dd-btn svg { width: 14px; height: 14px; color: var(--text-subtle); }
.dd .menu { inset-inline-end: auto; inset-inline-start: 0; min-width: max(100%, 180px); max-height: 320px; overflow-y: auto; }
.menu-item[aria-checked="true"], .menu-item[aria-checked="true"]:hover { background: var(--accent-tint); color: var(--accent-text); font-weight: 500; }
.menu-item[aria-checked="true"] svg { color: var(--accent-text); }
.gl-cols, .gr { display: grid; grid-template-columns: 40px minmax(0, 1.5fr) 28px 104px minmax(180px, 1.25fr) 44px; align-items: center; gap: 12px; padding: 0 16px; }
.gl-cols { height: 24px; font-size: var(--fs-xs); color: var(--text-subtle); }
.gl-cols .end, .gr-pct { text-align: end; }
.gl-group { margin-top: 16px; }
.gl-gh { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: calc(var(--fs) + 1px); font-weight: 600; color: var(--text); }
.gl-list { margin: 0; padding: 0; list-style: none; }
.gr { position: relative; min-height: 48px; padding-block: 8px; border-bottom: 1px solid var(--border); transition: background var(--fast) var(--ease); }
.gr:last-child { border-bottom: 0; }
.gr:hover { background: var(--surface-2); }
.gr-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.gr-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 500; color: var(--text); text-align: start; border-radius: var(--r-sm); }
.gr .gr-link::after { content: ""; position: absolute; inset: 0; }
.gr .gr-link:focus-visible { outline: 0; }
.gr:has(.gr-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.gr-health, .gr-owner { position: relative; z-index: 1; }
.gr-owner { display: inline-flex; }
.pend-tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 500; color: var(--accent-text); background: var(--accent-tint); border-radius: var(--r-sm); padding: 1px 6px; white-space: nowrap; } /* pending Actions = a decision to take → accent pair */
.pend-tag svg { width: 12px; height: 12px; }
.gr-fc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gr-p85 { font-size: var(--fs-sm); font-weight: 500; color: var(--text); white-space: nowrap; min-width: 72px; text-align: end; }
.gr-p85 small { color: var(--text-subtle); font-size: var(--fs-xs); font-weight: 400; }
.gr-pct { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.empty-box { padding: 24px; display: grid; justify-items: start; gap: 12px; }
.empty-box p { margin: 0; color: var(--text-muted); }

/* Roadmap */
.rm-scroll { overflow-x: auto; }
.rm-inner { min-width: 720px; }
.rm-row { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 36px; border-bottom: 1px solid var(--border); }
.rm-row:last-child { border-bottom: 0; }
.rm-lab { position: sticky; inset-inline-start: 0; z-index: 2; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 12px; padding-inline: 16px 12px; background: var(--surface); border-inline-end: 1px solid var(--border); }
.rm-lab .gr-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-lab .gr-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.rm-track { position: relative; overflow: hidden; direction: ltr; }
.rm-grp { min-height: 32px; background: var(--bg); }
.rm-grp .rm-lab { background: var(--bg); font-size: var(--fs-sm); }
.rm-axis { min-height: 30px; }
.rm-gl { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--border); }
.rm-month { position: absolute; top: 7px; padding-left: 6px; font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.rm-foot { min-height: 28px; }
.rm-today-l { position: absolute; top: 5px; transform: translateX(-50%); font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.rm-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: var(--fs-xs); color: var(--text-muted); }
.rm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 18px; height: 8px; border-radius: 2px; }
.lg-solid { background: var(--text-muted); }
.lg-band { background: color-mix(in oklch, var(--text-muted) 30%, transparent); }
.lg-late { background: color-mix(in oklch, var(--late-fg) 38%, transparent); }
.lg-dl { width: 2px; height: 14px; border-radius: 0; background: var(--text); }
.lg-today { width: 0; height: 14px; border-radius: 0; border-left: 1px dashed var(--text-muted); }
.rm-legend .lg-st { width: 8px; margin-inline-end: -3px; }
.lg-ok { background: var(--ok-fg); } .lg-risk { background: var(--risk-fg); } .lg-lt { background: var(--late-fg); }

/* ---------- Goal detail ---------- */
.crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-subtle); margin-bottom: 8px; }
.crumbs .link-btn { color: var(--text-muted); font-weight: 400; }
.crumbs .link-btn:hover { color: var(--text); }
.gd-head { display: grid; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.gd-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.gd-btns { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
.gd-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.gd-meta > div { display: grid; gap: 2px; }
.gd-meta dt { font-size: var(--fs-xs); color: var(--text-subtle); }
.gd-meta dd { margin: 0; display: flex; align-items: center; gap: 6px; min-height: 24px; font-weight: 500; }
.menu-wrap { position: relative; }
.menu { position: absolute; z-index: 25; top: calc(100% + 4px); inset-inline-end: 0; min-width: 220px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-popover); }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-md); background: none; color: var(--text); text-align: start; white-space: nowrap; }
.menu-item:hover { background: var(--surface-2); }
.menu-item .grow { flex: 1; }
.menu-item svg { color: var(--text-muted); }
.pend-banner { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 10px 12px; padding-inline: 14px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface); color: var(--text); text-align: start; font-size: var(--fs-sm); transition: background var(--fast) var(--ease); }
.pend-banner:hover { background: var(--surface-2); }
.pend-banner:hover .btn { border-color: var(--border-strong); }
.pend-banner.is-ai { background: var(--ai-tint); border-color: transparent; }
.pend-banner.is-ai:hover { background: var(--ai-tint); border-color: var(--border-strong); }
.pend-banner > svg { color: var(--text-muted); }
.pend-banner .grow { flex: 1; min-width: 0; }
.pb-chg { white-space: nowrap; }
.pb-chg .chg { vertical-align: middle; }
.gd-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: "fc fc" "bl bu" "wk pp" "wk dc" "nt nt"; gap: 16px; margin-top: 16px; align-items: start; }
.gd-forecast { grid-area: fc; } .gd-blockers { grid-area: bl; } .gd-burnup { grid-area: bu; } .gd-work { grid-area: wk; } .gd-people { grid-area: pp; } .gd-decisions { grid-area: dc; } .gd-note { grid-area: nt; margin: 0; }
/* Desktop only: this selector outranks the single-column rules below 1024px. */
@media (min-width: 1024px) { .gd-grid:not(:has(.gd-blockers)) { grid-template-areas: "fc fc" "wk dc" "nt nt"; } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px 16px; min-width: 0; }
.card-h { display: flex; align-items: center; gap: 10px; min-height: 24px; margin-bottom: 10px; }
.card-h h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs); font-weight: 600; color: var(--text); }
.card-h > :nth-child(2) { margin-inline-start: auto; }
.verdict { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: calc(var(--fs) + 2px); font-weight: 500; line-height: 1.5; text-wrap: pretty; }
.verdict svg { width: 18px; height: 18px; margin-top: 3px; }
.conf { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--text); font-size: var(--fs-sm); font-weight: 500; cursor: help; }
.conf:hover { background: var(--surface-2); border-color: var(--border-strong); }
.conf-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.conf-bars i { width: 3px; background: var(--border-strong); border-radius: 1px; }
.conf-bars i:nth-child(1) { height: 4px; } .conf-bars i:nth-child(2) { height: 7px; } .conf-bars i:nth-child(3) { height: 10px; }
.conf-low i:nth-child(1), .conf-medium i:nth-child(-n+2), .conf-high i { background: var(--text); }
/* Forecast labels at their real dates (goals.js axis(), app.js layoutAxes()). Lanes are 34px; a leader tick runs up to the strip. */
.fc-axis { --lane-h: 34px; position: relative; height: calc(var(--lanes, 1) * var(--lane-h)); direction: ltr; }
.fx { --lane: 0; position: absolute; top: calc(var(--lane) * var(--lane-h) + 6px); transform: translateX(-50%); display: grid; justify-items: center; line-height: 1.35; white-space: nowrap; font-size: var(--fs-xs); }
.fx::before { content: ""; position: absolute; bottom: 100%; left: var(--tick, 50%); height: calc(var(--lane) * var(--lane-h) + 14px); border-left: 1px solid var(--border-strong); }
.fx.placed { transform: none; }
.fx.al-s { justify-items: start; } .fx.al-e { justify-items: end; }
.fx-k { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); }
.fx-sep { color: var(--text-subtle); padding-inline: 2px; }
.fx-d { font-weight: 500; color: var(--text); }
.sw { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 2px; }
.sw-today { width: 0; border-left: 2px solid var(--text-muted); border-radius: 0; }
.sw-p50 { background: var(--text-muted); }
.sw-dl { width: 0; border-left: 2px solid var(--text); border-radius: 0; }
.sw-p85 { background: color-mix(in oklch, var(--text-muted) 30%, transparent); }
.blk-list, .ppl-list { margin: 0; padding: 0; list-style: none; }
/* Blocker row: text + Nudge/Escalate on one row; mobile swaps the two buttons for a ⋯ menu. */
.blk { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.blk:first-child { padding-top: 2px; }
.blk:last-child { border-bottom: 0; padding-bottom: 0; }
.blk .grow { flex: 1 1 auto; min-width: 0; }
.blk-btns { display: flex; flex: none; gap: 4px; }
.blk-more { display: none; flex: none; }
.bk-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.bk { display: grid; gap: 0; padding: 8px 12px; border-inline-end: 1px solid var(--border); }
.bk:last-child { border-inline-end: 0; }
.bk b { font-size: 18px; font-weight: 600; line-height: 1.3; }
.bk span { font-size: var(--fs-xs); color: var(--text-muted); }
.wk-bar { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.wk-bar .bar-track { height: 8px; border-radius: 4px; }
.wk-pct { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }
.wk-toggle { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; min-height: 28px; }
.iss { margin-top: 8px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-sm); }
.iss-r { display: grid; grid-template-columns: 84px minmax(0, 1fr) 96px 92px 44px 64px; align-items: center; gap: 10px; min-height: 36px; padding: 4px 10px; border-bottom: 1px solid var(--border); }
.iss-r:last-child { border-bottom: 0; }
.iss-h { min-height: 28px; font-size: var(--fs-xs); color: var(--text-subtle); background: var(--bg); border-radius: var(--r-md) var(--r-md) 0 0; }
.iss-r .end { text-align: end; }
.iss-t { min-width: 0; }
.iss-a { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.st { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; background: var(--surface-2); color: var(--text-muted); }
.st-done { background: var(--ok-bg); color: var(--ok-fg); }
.st-doing { color: var(--text); }
.st-ext { background: none; border: 1px solid var(--border-strong); }
.unconf { margin-inline-start: 2px; color: var(--text-muted); font-weight: 600; cursor: help; }
.gl-link { font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; text-decoration: none; border-radius: var(--r-sm); }
.gl-link:hover { text-decoration: underline; }
.ppl { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ppl:first-child { padding-top: 0; }
.ppl:last-child { border-bottom: 0; padding-bottom: 0; }
.ppl .grow { flex: 1; min-width: 0; display: grid; }
.ppl-n { font-weight: 500; }
.ppl-m { font-size: var(--fs-xs); color: var(--text-muted); }
.ppl-share { display: grid; justify-items: end; gap: 3px; width: 92px; font-size: var(--fs-xs); color: var(--text-muted); }
.ppl-share .bar-track { width: 100%; flex: none; }
.burnup { display: block; width: 100%; height: auto; direction: ltr; overflow: visible; }
.bu-grid { stroke: var(--border); stroke-width: 1; }
.bu-base { stroke: var(--text-subtle); stroke-width: 1; stroke-dasharray: 3 3; }
.bu-ax { fill: var(--text-subtle); font-size: 9px; font-family: var(--font); }
.bu-area { fill: var(--ok-bg); }
.bu-done { fill: none; stroke: var(--ok-fg); stroke-width: 2; stroke-linejoin: round; }
.bu-scope { fill: none; stroke: var(--text); stroke-width: 1.5; stroke-linejoin: round; }
.bu-dot { fill: var(--ok-fg); }
.bu-note { fill: var(--text); font-size: 11px; font-weight: 600; font-family: var(--font); }
.bu-legend { display: flex; gap: 16px; margin-top: 8px; font-size: var(--fs-xs); color: var(--text-muted); }
.bu-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bu-legend i { display: inline-block; width: 14px; }
.lg-scope { height: 0; border-top: 1.5px solid var(--text); }
.lg-done { height: 8px; background: var(--ok-bg); border-top: 2px solid var(--ok-fg); }
.tl { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.tl-i { position: relative; display: grid; gap: 2px; padding-inline-start: 16px; padding-bottom: 12px; font-size: var(--fs-sm); }
.tl-i:last-child { padding-bottom: 0; }
.tl-i::before { content: ""; position: absolute; inset-inline-start: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.tl-i:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 3px; top: 16px; bottom: 0; width: 1px; background: var(--border); }
.tl-d { font-size: var(--fs-xs); color: var(--text-subtle); }
.tl-b { display: grid; }
.tl-b .subtle { font-size: var(--fs-xs); }
.empty-s { margin: 0; font-size: var(--fs-sm); }
.gd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.gd-actions > .subtle { margin-inline-end: 4px; }

/* ---------- Team ---------- */
.tm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
/* Dev-only "View as person" (topbar). Dashed = not product UI. */
/* Roles: one chip per role (a person holds several). */
.roles { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tp-id { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.lb-basis { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-subtle); }
.pp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* Self-marks: neutral, never status colors — self-approval is allowed and logged, not a warning. */
.tag-self { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.tag-self svg { width: 12px; height: 12px; }
.foot-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.foot-note svg { flex: none; width: 14px; height: 14px; }
/* Today · YOUR WORK */
.yw { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; }
.yw-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: var(--fs-sm); flex: 1 1 320px; }
.yw-line > span { display: inline-flex; align-items: center; gap: 5px; }
.yw-line svg { width: 14px; height: 14px; }
.yw-links { display: flex; gap: 14px; }
/* Settings (mock) */
.set-sec { max-width: 720px; }
.set-sec + .set-sec { margin-top: 16px; }
.set-sec > .set-help + .sk-list { margin-top: 8px; }
.set-tiers { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--text-muted); }
.set-tiers li { display: flex; align-items: center; gap: 10px; }
.set-row { display: flex; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.set-l { font-weight: 500; }
.set-help { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: var(--fs-xs); }
.set-help svg { width: 12px; height: 12px; }
.switch { flex: none; position: relative; width: 40px; height: 24px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface-2); transition: background var(--fast) var(--ease); }
.switch-k { position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); transition: inset-inline-start var(--fast) var(--ease); }
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"] .switch-k { inset-inline-start: 19px; background: var(--on-accent); }
.switch:disabled { opacity: .55; cursor: not-allowed; }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tm-tabs { display: flex; gap: 4px; margin: 12px 0 20px; border-bottom: 1px solid var(--border); }
.seg-l { align-self: center; padding-inline: 6px 4px; font-size: var(--fs-xs); color: var(--text-subtle); }
.tm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.tm-bar .sec-h { margin: 0; margin-inline-end: auto; }
.tm-bar .seg { height: 32px; }
/* Supply vs demand */
.sd .card-h { flex-wrap: wrap; }
.sd-hz { font-size: var(--fs-xs); color: var(--text-muted); }
.sd-grid { display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); align-items: center; gap: 12px 28px; }
.sd-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 0; }
.sd-nums dt { font-size: var(--fs-xs); color: var(--text-muted); }
.sd-nums dd { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.sd-nums dd b { font-size: 22px; font-weight: 600; color: var(--text); line-height: 1.3; }
.sd-nums small { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.sd-bars { display: grid; gap: 8px; direction: ltr; }
.sd-row { position: relative; height: 20px; border-radius: var(--r-sm); background: var(--surface-2); }
.sd-fill { position: absolute; inset-block: 0; left: 0; border-radius: var(--r-sm); }
.sd-demand { background: var(--border-strong); } /* demand is the reference, not a signal; the gap carries the color */
.sd-supply { background: var(--text-muted); border-radius: var(--r-sm) 0 0 var(--r-sm); }
.sd-gap { position: absolute; inset-block: 0; display: grid; place-items: center; background: var(--risk-bg); border: 1px dashed var(--risk-fg); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--risk-fg); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.sd-gap span { padding-inline: 4px; }
.sd-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.sd-short { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--risk-bg); color: var(--risk-fg); font-size: var(--fs-sm); font-weight: 600; margin-inline-end: auto; }
/* People rows */
.tl-cols, .tp { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, 2fr) 52px 200px; align-items: center; gap: 16px; padding: 0 16px; }
.tl-cols { height: 24px; font-size: var(--fs-xs); color: var(--text-subtle); }
.tl-cols .end, .tp-load { text-align: end; }
.tl-list { margin: 0; padding: 0; list-style: none; }
.tp { position: relative; min-height: 56px; padding-block: 10px; border-bottom: 1px solid var(--border); transition: background var(--fast) var(--ease); }
.tp:last-child { border-bottom: 0; }
.tp:has(.tp-link):hover { background: var(--surface-2); }
.tp-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tp-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 500; color: var(--text); text-align: start; border-radius: var(--r-sm); }
.tp .tp-link::after { content: ""; position: absolute; inset: 0; }
.tp .tp-link:focus-visible { outline: 0; }
.tp:has(.tp-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.tp-n { font-weight: 500; }
.tp-load { font-weight: 600; font-size: calc(var(--fs) + 1px); }
.tp-load.is-over, .pp-pct.is-over { color: var(--risk-fg); } /* over capacity = at risk (the pill beside it says so) */
.tp-flags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.tag-ic { display: inline-flex; align-items: center; gap: 4px; height: 22px; }
.tag-ic svg { width: 12px; height: 12px; }
.lb { display: grid; gap: 5px; min-width: 0; }
.lb-track { position: relative; display: flex; height: 8px; border-radius: 4px; background: var(--surface-2); direction: ltr; }
.lb-seg { height: 100%; border-right: 2px solid var(--surface); }
.lb-seg:first-child { border-radius: 4px 0 0 4px; }
.lb-seg:last-of-type { border-right: 0; border-radius: 0 4px 4px 0; }
.lb-seg:only-of-type { border-radius: 4px; }
.lb-100 { position: absolute; top: -3px; bottom: -3px; border-left: 1px solid var(--text-subtle); }
.lb-labels { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: var(--fs-xs); color: var(--text-muted); }
.lb-labels > span { display: inline-flex; align-items: center; gap: 5px; }
.lb-lg .lb-track { height: 10px; }
.tp-un { grid-template-columns: minmax(170px, 1fr) minmax(0, 2fr) auto; background: var(--bg); }
.tp-un-m { color: var(--text-muted); }
.avatar-empty { border-style: dashed; border-color: var(--border-strong); background: none; color: var(--text-muted); }
.pend-ai { height: 28px; border: 1px solid transparent; background: var(--ai-tint); color: var(--ai-fg); font-size: var(--fs-sm); padding: 0 10px; }
.pend-ai:hover { border-color: var(--border-strong); }
.tp-ext { grid-template-columns: minmax(170px, 1fr) minmax(0, 2fr); }
.tp-role { font-size: var(--fs-xs); }
.tp-ext-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-sm); }
.tp-ext-m .dot { color: var(--text-subtle); }
.ext-wait { display: inline-flex; align-items: center; gap: 6px; }
/* Capability */
.cap-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; font-size: var(--fs-sm); }
.cap-purpose { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: var(--fs-sm); }
.cap-purpose svg { width: 14px; height: 14px; flex: none; }
.bus { margin: 0 0 12px; }
/* Skill level chip: neutral only — Experienced is filled, Familiar is outlined. Never a status color. */
.lvl { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 500; border: 1px solid var(--border-strong); white-space: nowrap; }
.lvl-exp { background: var(--surface-2); color: var(--text); }
.lvl-fam { background: var(--surface); color: var(--text-muted); }
.tag-own { color: var(--text); border-color: var(--border-strong); }
.cap tfoot th, .cap tfoot td { border-bottom: 0; border-top: 1px solid var(--border-strong); background: var(--surface); }
.cap tfoot th { position: sticky; inset-inline-start: 0; z-index: 1; font-weight: 500; }
.cap tfoot .dd-btn { height: 28px; }
.own { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.own-d { display: block; margin-top: 2px; font-size: var(--fs-xs); }
.pc-h { margin: 12px 0 4px; font-size: var(--fs-sm); font-weight: 600; }
.pc-own { margin-inline-start: auto; font-size: var(--fs-sm); }
.pc-add { display: inline-block; margin-top: 8px; }
.pc-add .dd-btn { height: 28px; }
.sk-list { margin: 0 0 12px; padding: 0; list-style: none; }
.sk-row { display: flex; align-items: center; gap: 8px; min-height: 40px; border-bottom: 1px solid var(--border); }
.sk-row:last-child { border-bottom: 0; }
.sk-row.is-archived .grow > span:first-child { color: var(--text-muted); }
.sk-n { min-width: 64px; text-align: end; }
.sk-in { height: 32px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); font: inherit; min-width: 0; width: 100%; max-width: 280px; }
.sk-in:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sk-add { display: flex; gap: 8px; align-items: center; }
.cap-scroll { overflow-x: auto; }
.cap { width: 100%; min-width: 660px; border-collapse: collapse; font-size: var(--fs-sm); }
.cap th, .cap td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: start; white-space: nowrap; }
.cap thead th { height: 32px; padding-block: 0; background: var(--surface-2); font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); }
.cap tbody tr:last-child > * { border-bottom: 0; }
.cap tbody tr:hover > * { background: var(--surface-2); }
.cap tbody th { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface); font-weight: 500; }
.cap thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; }
.cap-who { display: flex; align-items: center; gap: 8px; }
/* Level: 5 squares, neutral only — capability is not a status. */
.ov { border: 0; background: none; padding: 0 3px; border-radius: var(--r-sm); color: var(--text-muted); font-size: 13px; line-height: 1; cursor: help; }
.ov:hover { color: var(--text); background: var(--surface-2); }
/* Person panel */
.pp .ph-top { gap: 10px; }
.panel:focus { outline: none; } /* drawers (Action, Person, chat): programmatic focus target on open (tabindex -1, not in the tab order) */
.pp-meta { font-size: var(--fs-sm); margin-top: -4px; }
.pp-load { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pp-pct { font-size: 24px; font-weight: 600; line-height: 1.2; }
.pp-lbl { font-size: var(--fs-xs); color: var(--text-muted); }
.pp-load .tp-flags { margin-inline-start: auto; align-self: center; }
.pp .panel-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.h3-next { margin-top: 14px !important; }
.sub-list .gl-link { margin-inline-start: auto; }
.psec-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.psec-h h3 { margin: 0; }
.wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; direction: ltr; }
.wk-d { display: grid; justify-items: center; align-content: start; gap: 3px; padding: 6px 4px 7px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-xs); text-align: center; }
.wk-n { color: var(--text-muted); }
.wk-date { font-weight: 500; }
.wk-h { display: flex; gap: 1px; width: 100%; height: 6px; direction: ltr; }
.wk-h i { flex: 1; border-radius: 1px; background: repeating-linear-gradient(135deg, var(--border-strong) 0 1px, var(--surface-2) 1px 3px); }
.wk-h i.a { background: var(--text-muted); }
.wk-t { font-weight: 500; }
.wk-weekend { background: var(--surface-2); border-color: transparent; color: var(--text-muted); }
.wk-weekend .wk-h { visibility: hidden; }
.wk-leave, .wk-absence { background: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, var(--surface) 4px 8px); border-style: dashed; border-color: var(--border-strong); }
.wk-d.is-today { box-shadow: inset 0 0 0 1px var(--text-muted); }
.abs-form { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); }
.abs-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.abs-f { display: grid; gap: 4px; }
.abs-l { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); }
.abs-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
[data-od-id="person-mark-absence"], [data-od-id="person-dispute"] { margin-top: 12px; }
.pc-list { margin: 0; padding: 0; list-style: none; }
.pc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 36px; padding: 2px 0; border-bottom: 1px solid var(--border); }
.pc:last-child { border-bottom: 0; }
.pc-a { width: 96px; color: var(--text); }
.pc-edit { margin-inline-start: auto; }
.pc-edit .dd-btn { height: 28px; }
.logged { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--text-muted); }
.logged svg { width: 12px; height: 12px; }
.dispute { display: grid; gap: 8px; margin-top: 12px; }
.focus-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.focus-in { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.focus-in input { width: 76px; height: 32px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); text-align: end; font-variant-numeric: tabular-nums; }
.focus-in input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.focus-hint { margin: 6px 0 0; font-size: var(--fs-xs); }

/* ---------- Copilot chat (chat.js) ---------- */
.i-ai { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; font-size: 14px; line-height: 1; }
.mobile-search { display: none; }
.chat { display: grid; grid-template-columns: 280px minmax(0, 1fr); height: calc(100dvh - 56px); }
.ch-hist { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 16px 12px; border-inline-end: 1px solid var(--border); }
.ch-hist-h { display: flex; align-items: center; gap: 8px; padding-inline: 4px; }
.ch-hist-h .btn { margin-inline-start: auto; }
.ch-h1 { margin: 0; font-size: 16px; font-weight: 600; }
.ch-search { display: flex; align-items: center; gap: 8px; height: 32px; padding-inline: 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-muted); }
.ch-search:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.ch-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: var(--fs-sm); color: var(--text); }
.ch-search input::placeholder, .cmp-in::placeholder { color: var(--text-subtle); }
.ch-list { flex: 1; min-height: 0; overflow-y: auto; }
.ch-group + .ch-group { margin-top: 12px; }
.ch-gh { padding: 4px 8px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
html[lang="en"] .ch-gh { text-transform: uppercase; letter-spacing: .06em; }
.ch-item { display: flex; align-items: flex-start; gap: 8px; width: 100%; min-height: 32px; padding: 6px 8px; border: 0; border-radius: var(--r-md); background: none; color: var(--text); text-align: start; line-height: 1.45; transition: background var(--fast) var(--ease); }
.ch-item:hover { background: var(--surface-2); }
.ch-item[aria-current="true"] { background: var(--accent-tint); color: var(--accent-text); font-weight: 500; }
.ch-item .tag { margin-top: 1px; }
.ch-t { flex: 1; min-width: 0; text-wrap: pretty; }
.ch-none { margin: 0; padding: 8px; font-size: var(--fs-sm); }
.ch-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ch-head { display: flex; align-items: center; gap: 8px; padding: 10px 24px; border-bottom: 1px solid var(--border); background: var(--bg); }
.ch-ht { flex: 1; min-width: 0; }
.ch-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; text-wrap: balance; }
.ch-title:focus { outline: none; }
.ch-priv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.ch-priv svg { width: 14px; height: 14px; }
.ch-back { display: none; }
.ch-hbtns { display: flex; gap: 2px; }
.ch-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.ch-msgs { max-width: 760px; margin-inline: auto; padding: 24px 24px 16px; display: grid; gap: 20px; }
.ch-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.msg { display: grid; gap: 6px; min-width: 0; }
.msg-me { justify-items: end; }
.msg-me .bubble { max-width: min(560px, 85%); padding: 8px 12px; border-radius: var(--r-lg); background: var(--surface-2); line-height: 1.55; text-wrap: pretty; }
.msg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-muted); }
.msg-who { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.msg-who .subtle { font-size: var(--fs-xs); }
.msg-bot .bubble { display: grid; gap: 12px; min-width: 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.adv p { margin: 0; line-height: 1.65; text-wrap: pretty; }
.adv-pts { margin: 6px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; line-height: 1.6; }
.adv-pts li::marker { color: var(--text-subtle); }
/* Evidence links: calm, underlined, never accent-filled. */
.ev { display: inline; padding: 0 2px; border: 0; border-radius: var(--r-sm); background: none; font: inherit; font-weight: 500; color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; cursor: pointer; }
.ev:hover { background: var(--surface-2); text-decoration-color: var(--text-muted); }
.ev-ref { font-family: var(--mono); font-size: 12px; }
.chart { margin: 0; display: grid; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); }
.chart figcaption { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.chart .bu-legend { margin-top: 0; }
.fcc { display: grid; gap: 4px; }
.fcc-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 28px; }
.fcc-l { font-size: var(--fs-sm); font-weight: 500; }
.fcc-t { position: relative; height: 22px; direction: ltr; }
.fcc-bar { position: absolute; top: 4px; bottom: 4px; background: var(--text-muted); border-radius: 2px 0 0 2px; }
.fcc-bar.late { background: var(--late-fg); border-radius: 0 2px 2px 0; }
.fcc-v { position: absolute; top: 50%; transform: translateY(-50%); margin-left: 6px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.fcc-t .mk-dl { top: -3px; bottom: -3px; }
.fcc-ax { min-height: 18px; }
.fcc-ax .fcc-t { height: 18px; }
.fcc-a { position: absolute; top: 0; font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.fcc-a-dl { transform: translateX(-50%); color: var(--text); font-weight: 500; }
.fcc-ax .fcc-t.stack { height: 36px; } .fcc-t.stack .fcc-a-dl { top: 18px; }
.lc { display: grid; gap: 6px; }
.lc-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; gap: 10px; min-height: 24px; font-size: var(--fs-sm); }
.lc-t { position: relative; height: 10px; border-radius: 3px; background: var(--surface-2); direction: ltr; }
.lc-bar { position: absolute; top: 0; bottom: 0; left: 0; background: var(--text-muted); border-radius: 3px 0 0 3px; }
.lc-bar.over { background: var(--risk-fg); border-radius: 0 3px 3px 0; }
.lc-cap { position: absolute; top: -4px; bottom: -4px; margin-left: -1px; border-left: 2px solid var(--text); }
.lc-v { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; justify-self: end; font-weight: 500; }
.lc-v.over { padding: 0 7px; border-radius: var(--r-pill); background: var(--risk-bg); color: var(--risk-fg); }
.lc-v svg { width: 12px; height: 12px; }
.lc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-xs); color: var(--text-muted); }
.lc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lc-sw { display: inline-block; width: 12px; height: 8px; border-radius: 2px; background: var(--text-muted); }
.lc-sw.over { background: var(--risk-fg); }
.lc-sw-cap { width: 0; height: 12px; border-radius: 0; border-left: 2px solid var(--text); background: none; }
.chat-sim { margin: 0; background: var(--surface); }
.blk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-muted); }
.blk-foot svg { width: 14px; height: 14px; }
.blk-foot .link-btn { font-size: var(--fs-xs); }
.acard-chat { grid-template-columns: minmax(0, 1fr); padding-inline: 14px; }
.acard-chat .acard-meta { flex-wrap: wrap; }
.acard-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; font-size: var(--fs-sm); }
.ch-empty { display: grid; justify-items: start; gap: 8px; padding: 40px 0 8px; }
.ch-empty h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.35; text-wrap: balance; }
.ch-empty p { margin: 0; max-width: 56ch; text-wrap: pretty; }
.sugg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sugg .chip { height: auto; min-height: 32px; padding: 5px 12px; border-radius: var(--r-lg); line-height: 1.4; text-align: start; }
.composer { width: 100%; max-width: 760px; margin-inline: auto; padding: 8px 24px 16px; display: grid; gap: 6px; background: var(--bg); }
.ctx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ctx-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding-inline: 8px 2px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-sm); font-weight: 500; }
.ctx-chip-s { height: 20px; padding-inline: 6px; font-size: var(--fs-xs); color: var(--text-muted); }
.ctx-x { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: var(--text-muted); }
.ctx-x:hover { background: var(--surface-2); color: var(--text); }
.ctx-x svg { width: 12px; height: 12px; }
.cmp-row { display: flex; align-items: flex-end; gap: 6px; padding: 6px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface); transition: border-color var(--fast) var(--ease); }
.cmp-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cmp-in { flex: 1; min-width: 0; min-height: 32px; max-height: 160px; padding: 5px 4px; border: 0; background: none; outline: none; resize: none; font: inherit; line-height: 1.5; color: var(--text); field-sizing: content; }
.cmp-in:focus-visible { outline: none; }
.cmp-send { width: 32px; padding: 0; flex: none; }
.ctx-add { flex: none; color: var(--text-muted); }
.ctx-add-l { margin-inline-start: 2px; }
.ctx-wrap .menu { top: auto; bottom: calc(100% + 8px); inset-inline-start: -6px; inset-inline-end: auto; max-height: 300px; overflow-y: auto; }
.menu-g { padding: 6px 10px 2px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.cmp-hint { padding-inline: 4px; font-size: var(--fs-xs); }
.chat-panel .ch-head { padding-block: 12px; padding-inline: 20px 12px; }
.chat-panel .ch-msgs { padding: 16px 20px; }
.chat-panel .composer { padding: 8px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.disc { display: grid; gap: 8px; }
.disc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.disc-t { color: var(--text); font-weight: 500; }

.tip.tip-side { padding: 4px 8px; font-weight: 500; white-space: nowrap; }
.delta { color: var(--text-muted); white-space: nowrap; }
.fcc-v .delta { font-weight: 500; }
.itable td.delta { font-weight: 500; }
.sim-as { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sim-as-l { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); margin-inline-end: 2px; }
.sim-as-dot { color: var(--text-subtle); }
.sim-as .dd-btn { height: 28px; padding-inline: 10px 8px; border-radius: var(--r-pill); color: var(--text); }
.sim-warn { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-sm); font-weight: 500; }
.dev-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); font-size: var(--fs-sm); }
.dev-note > svg { color: var(--text-muted); }
.dev-note .grow { flex: 1; min-width: 12em; line-height: 1.55; }
.lc-note { grid-column: 2 / -1; margin-top: -4px; font-size: var(--fs-xs); color: var(--text-muted); }
.lc-hint { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }

@keyframes fade { from { opacity: 0; } }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } }
@keyframes slide-in-rtl { from { transform: translateX(-24px); opacity: 0; } }
@keyframes slide-up { from { transform: translateY(32px); opacity: 0; } }
@keyframes rise { from { transform: translate(-50%, 8px); opacity: 0; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  /* Loading must still read as "working": the spinner breathes in place instead of rotating; skeletons stay static. */
  .spin { animation: breathe 1.6s ease-in-out infinite !important; }
}
@keyframes breathe { 50% { opacity: .35; } }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) and (min-width: 768px) { .app { --sb-w: 56px; } .app .nav-label, .app .brand-name { display: none; } .app .nav-item { justify-content: center; padding: 0; } .app .nav-badge { position: absolute; top: 1px; inset-inline-end: 1px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; font-size: 11px; background: var(--accent); color: var(--on-accent); } .sb-foot { display: none; } }
@media (max-width: 767px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar, .askbar { display: none; }
  .topbar { padding: 0 8px 0 12px; padding-inline: 12px 8px; gap: 4px; }
  .topbar .mobile-only { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
  .topbar .mobile-only > span:not(.env-chip) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 375px can't hold logo + title + STAGING + four 44px controls: the FA/EN toggle shows only the language you can switch to. */
  [data-od-id="lang-toggle"] button[aria-pressed="true"] { display: none; }
  .icon-btn { width: 44px; height: 44px; }
  /* Touch targets ≥44px (DESIGN.md controls rule) for every control family; min-height beats the per-screen
     32/36/40px heights set below and in styles-2.css. Inline links in text (.gr-link) stay text-sized. */
  .btn, .dd-btn, .pal-tab, .qchip, .is-fbtn { min-height: 44px; }
  .seg { height: auto; padding: 0; }
  .seg button { min-width: 44px; min-height: 42px; }
  /* Health pills that filter keep their 22px look; the hit area grows invisibly to 44px. */
  .pill-btn { position: relative; }
  .pill-btn::after { content: ""; position: absolute; inset: -11px 0; }
  .avatar-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; }
  /* Every route's content clears the fixed Ask button + bottom nav, and keyboard/anchor scrolling
     never parks a focused element underneath them. */
  html { scroll-padding-bottom: var(--chrome-b); }
  .main { padding-bottom: var(--chrome-b); }
  .page { padding: 20px 16px 0; }
  h1.count, .empty-line { font-size: 21px; }
  .acard { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  .acard-open { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; height: 36px; }
  .proj-head { display: none; }
  .proj { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n h" "b d"; gap: 6px 12px; padding: 10px 14px; }
  .proj .pname { grid-area: n; } .proj .pill { grid-area: h; justify-self: end; } .proj .bar { grid-area: b; } .proj .p85 { grid-area: d; }
  .row-btn { padding: 10px 14px; }
  .proj .mobile-label { display: inline; margin-inline-end: 4px; color: var(--text-subtle); }
  .acard-meta { flex-wrap: wrap; }
  .bottom-nav { position: fixed; z-index: 30; bottom: 0; inset-inline: 0; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--border); }
  .bn-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none; color: var(--text-muted); font-size: var(--fs-xs); min-height: 44px; }
  .bn-item svg { width: 20px; height: 20px; }
  .bn-item .i-ai { width: 20px; height: 20px; font-size: 17px; }
  .bn-item[aria-current="page"] { color: var(--accent-text); font-weight: 600; }
  .bn-item .nav-badge { position: absolute; top: 6px; inset-inline-start: calc(50% + 4px); margin: 0; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; font-size: 11px; background: var(--accent); color: var(--on-accent); }
  .ask-fab { position: fixed; z-index: 29; inset-inline: 12px; bottom: calc(68px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: var(--r-xl); background: var(--surface); color: var(--text-muted); box-shadow: var(--shadow-popover); text-align: start; }
  .ask-fab span { flex: 1; }
  .panel { width: 100%; border: 0; animation-name: slide-up; }
  [dir="rtl"] .panel { animation-name: slide-up; }
  /* Bottom sheet: height = the snap point (50% / 90%, set by sheet.js); L = full screen. */
  .sheet { top: auto; bottom: 0; height: calc(var(--snap, 90) * 1dvh); border-radius: var(--r-xl) var(--r-xl) 0 0; transition: height var(--base) var(--ease); }
  .sheet.dragging { transition: none; }
  .sheet-L { top: 0; height: 100dvh; border-radius: 0; }
  .sh-bar { position: relative; }
  .sheet:not(.sheet-L) .sh-handle { visibility: visible; min-height: 44px; }
  .as-page .panel-foot { bottom: var(--chrome-b); }
  .panel-head, .panel-body { padding-inline: 16px; }
  .panel-foot { padding-inline: 16px; }
  .panel-foot .btn { height: 40px; }
  .pal-wrap { padding: 0; }
  .pal { width: 100%; max-height: none; height: 100dvh; border-radius: 0; border: 0; }
  .toast { bottom: calc(var(--chrome-b) - 16px); }
  .panel-open .toast { bottom: 96px; }
  .kbd-hint { display: none !important; }
  /* Goals list: two-line rows */
  .h1 { font-size: 20px; }
  .gl-bar { margin: 12px 0 16px; }
  .gl-cols { display: none; }
  .gr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "p n o" "h f c"; gap: 8px 10px; padding: 10px 14px; }
  .gr-pri { grid-area: p; } .gr-name { grid-area: n; } .gr-owner { grid-area: o; } .gr-health { grid-area: h; } .gr-fc { grid-area: f; } .gr-pct { grid-area: c; }
  .rm-inner { min-width: 620px; }
  .rm-row { grid-template-columns: 150px minmax(0, 1fr); }
  .rm-lab { padding-inline: 12px 8px; }
  /* Goal detail — DOM order is the mobile order: header → forecast → blockers → progress → people → … */
  .gd-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 12px; }
  .gd-grid > * { grid-area: auto !important; }
  .gd-top { align-items: flex-start; }
  .gd-meta { gap: 8px 20px; }
  .card { padding: 12px 14px 14px; }
  .blk-btns { display: none; }
  .blk-more { display: inline-flex; }
  .bk { padding: 8px 10px; }
  .iss-r { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "k w l" "t t t" "a s s"; gap: 4px 10px; padding: 8px 10px; }
  .iss-h { display: none; }
  .iss-k { grid-area: k; } .iss-t { grid-area: t; } .iss-a { grid-area: a; } .iss-s { grid-area: s; justify-self: end; } .iss-w { grid-area: w; } .iss-l { grid-area: l; }
  .gl-link { display: inline-flex; align-items: center; min-height: 32px; }
  .gd-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .gd-actions > .subtle { grid-column: 1 / -1; }
  .gd-actions .btn { height: 44px; white-space: normal; line-height: 1.3; }
  /* Team: stacked rows, 44px targets, vertical week list (the hour bar stays LTR). */
  .dev.dev-va { padding-inline: 2px; }
  .dev-va .dd-btn { height: 40px; }
  .dev-va .dd-v { max-width: 9ch; }
  .yw-links .gl-link { min-height: 44px; }
  .switch { width: 48px; height: 28px; } .switch-k { top: 5px; } .switch[aria-checked="true"] .switch-k { inset-inline-start: 25px; }
  .switch::after { content: ""; position: absolute; inset: -9px -2px; } /* 44px hit area; the track keeps its shape */
  .tm-bar .seg button, .psec-h .seg button { min-height: 40px; }
  .tm-tabs .pal-tab { height: 44px; }
  .sd-grid { grid-template-columns: minmax(0, 1fr); }
  .sd-foot .btn { height: 44px; white-space: normal; text-align: start; }
  .tl-cols { display: none; }
  .tp { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "w l" "b b" "f f"; gap: 8px 12px; padding: 12px 14px; }
  .tp-who { grid-area: w; } .tp-load { grid-area: l; } .tp-bar { grid-area: b; } .tp-flags { grid-area: f; justify-content: flex-start; }
  .tp-flags:empty { display: none; }
  .tp-un { grid-template-areas: "w a" "m m"; }
  .tp-un .tp-who { grid-area: w; } .tp-un-m { grid-area: m; } .tp-un-a { grid-area: a; }
  .tp-un-a .btn { height: 36px; }
  .tp-ext { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .tp-ext > * { grid-area: auto !important; }
  .tp-who { flex-wrap: wrap; }
  .tp-link { min-height: 32px; }
  .chip { height: 36px; padding: 0 14px; }
  .sk-row { flex-wrap: wrap; padding: 6px 0; }
  .sk-row .btn, .sk-in { min-height: 44px; }
  .cap { min-width: 580px; }
  .wk { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  html[dir="rtl"] .wk { direction: rtl; }
  .wk-d { grid-template-columns: 76px 52px minmax(0, 1fr) auto; justify-items: start; align-items: center; gap: 10px; padding: 8px 10px; text-align: start; min-height: 44px; }
  .wk-h { height: 8px; }
  .abs-fields .dd-btn, .pc-edit .dd-btn { height: 44px; }
  .focus-in input { height: 44px; }
  /* Copilot: history list → thread (full screen). The page composer takes the Ask button's slot above the bottom nav,
     so --chrome-b (+ the composer's extra height) still clears it; the side panel is a full-screen sheet. */
  .mobile-search { display: inline-grid; }
  .chat { display: block; height: auto; }
  .chat.show-list .ch-thread, .chat.show-thread .ch-hist { display: none; }
  .ch-hist { padding: 16px; border: 0; }
  .ch-list { overflow: visible; }
  .ch-item { min-height: 44px; align-items: center; }
  .ch-back { display: inline-grid; margin-inline-start: -8px; }
  .chat .ch-head { position: sticky; top: 56px; z-index: 10; padding: 6px 12px; }
  .chat .ch-scroll { overflow: visible; }
  .chat .ch-msgs, .chat-panel .ch-msgs { padding: 16px; }
  .is-ask .ch-thread > .composer { position: fixed; z-index: 29; inset-inline: 0; bottom: calc(60px + env(safe-area-inset-bottom)); max-width: none; padding: 8px 12px; border-top: 1px solid var(--border); }
  .is-ask .main { padding-bottom: calc(var(--chrome-b) + 24px); }
  .is-ask.cmp-chips .main { padding-bottom: calc(var(--chrome-b) + 72px); }
  html:has(.is-ask) { scroll-padding-bottom: calc(var(--chrome-b) + 24px); }
  .cmp-hint, .ctx-add-l { display: none; }
  .ctx-add, .cmp-send { width: 44px; height: 44px; padding: 0; }
  .cmp-in { min-height: 44px; padding-block: 11px; }
  .ctx-chip { height: 40px; padding-inline: 12px 2px; }
  .ctx-x { width: 36px; height: 36px; }
  .sugg .chip { min-height: 44px; }
  .ch-empty { padding-top: 12px; }
  .fcc-row { grid-template-columns: 56px minmax(0, 1fr); }
  .lc-row { grid-template-columns: 48px minmax(0, 1fr) 60px; }
  .msg-me .bubble { max-width: 88%; }
  .ev { padding-block: 4px; }
  .sim-as .dd-btn { height: 40px; }
  .dev-note .btn { height: 40px; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .chat { grid-template-columns: 240px minmax(0, 1fr); }
  .gd-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .gd-grid > * { grid-area: auto !important; }
}