/* ============================================================
   Agent A — Dashboard  (base theme from the Shadow design)
   "Shadow Architect" dark violet. Sora + DM Sans.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ------------------------------------------------------------
   Peso-sign fix.  Renders the peso sign U+20B1 reliably. Some
   Android builds show it as a tofu box: the served Sora / DM Sans
   webfont subset omits the glyph and per-glyph fallback fails on
   the device. The two same-named font faces below (declared AFTER
   the Google import, so they win) embed a ~0.9KB base64 font
   (Noto Sans, peso glyph only) and route ONLY U+20B1 to it, for
   both HTML and SVG text. No device-font or network dependency;
   the digits still render in Sora.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Sora";
  font-weight: 100 900; font-style: normal; font-display: swap;
  src: url(data:font/woff2;base64,d09GMgABAAAAAANsABAAAAAABoAAAAMRAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhQbHhxABmA/U1RBVF4ARBEICoE8gTwLCgABNgIkAxAEIAWEeAcgDAcbYAXIBIKyqXunk0Z+meENBAFmvQnfIaIqFUMbVwHADkHzf029WoHd8xad0l9m24hKqAIoUie+RXbB2pVUjQDc0XwCCw94l0a43C66du87FDtqyOZyAcSGqr2osfGbUqbMaK4lwWlMzYmhSXhFs1GD104y6yXwEdzVSpaI9VhBrpQjRW2flCHGkyM6/0A6rFJZlZTqOdLVET3KDsl4Q48BA3pwFf0/Kv3/I1BOsQrEPoIhGSzb+Es6NgQCOxbAXylPQ06rqDSX/OY0p1kpBKLKnFQrOiCJIRAbFiRSdNyZGDslRXucqpgXj0DrLfLiqE726PxPqdUfRRZgV8T9UV0/9n+fsjzrevFskITJz3hGuFx4nYoAu8omqtoJul4Ag5pJJF6jlG5zszmsHmqyh9V9wqo7wxxoW3Ywf7u/tHb39duahmbRhEOEpYaGY9W9EWrJtl1iwc7h+lcP3x3ftqutIiffmc/fa86mXn5d+hR0sgs3j9DwLgWD3j+bFNe96MOQaSMKRoyyXlkbM/h619zSflGJx1+PehUa7OGQ+xZ173rLp1v0+gF/Tlru/Qv/2mWCV9k3u8Xyviv8ZP6td+nGV1Oulv3b9F9pH1XqvvQSQ3pvXY7gf5t+P9E+8sPeYSVHMl4okGVos1Qq4UMws252FCipuz04eA8m5Sb4Tgu9JAW+wpOUeApICwW0kYoYDpFWQllL2tCpJzwpoEgt/okujScFGjFke9wJhDtwNE3H9d8zmAbqmEQ9vTCZRC1VTKE/DTT3naplBFU4MalkBIagqlDE9ikTk0ZaKCGTTBqUlEE95YqvHpOGuJVpwSCDlqaCZsakgSGzrW4hncEYVNBKrQh49nAMmmkRUzikk0MGWWSTj2XQVWH6EOzfSunBAAbQg9LZxtQmzKDpsqvADJp3LV7R6ixyyEFnKJUYyhBO6UCaaaBa1EyBeTrRelLivYvXOz3p1DwVVI1WtjKZDKbcBZwppSY/S08LmetrNaminnQq+F4DgxrSmbI2Xe2Ja5L/v0hf5tpNDl75WeFaclStAQAA) format("woff2");
  unicode-range: U+20B1;
}
@font-face {
  font-family: "DM Sans";
  font-weight: 100 900; font-style: normal; font-display: swap;
  src: url(data:font/woff2;base64,d09GMgABAAAAAANsABAAAAAABoAAAAMRAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhQbHhxABmA/U1RBVF4ARBEICoE8gTwLCgABNgIkAxAEIAWEeAcgDAcbYAXIBIKyqXunk0Z+meENBAFmvQnfIaIqFUMbVwHADkHzf029WoHd8xad0l9m24hKqAIoUie+RXbB2pVUjQDc0XwCCw94l0a43C66du87FDtqyOZyAcSGqr2osfGbUqbMaK4lwWlMzYmhSXhFs1GD104y6yXwEdzVSpaI9VhBrpQjRW2flCHGkyM6/0A6rFJZlZTqOdLVET3KDsl4Q48BA3pwFf0/Kv3/I1BOsQrEPoIhGSzb+Es6NgQCOxbAXylPQ06rqDSX/OY0p1kpBKLKnFQrOiCJIRAbFiRSdNyZGDslRXucqpgXj0DrLfLiqE726PxPqdUfRRZgV8T9UV0/9n+fsjzrevFskITJz3hGuFx4nYoAu8omqtoJul4Ag5pJJF6jlG5zszmsHmqyh9V9wqo7wxxoW3Ywf7u/tHb39duahmbRhEOEpYaGY9W9EWrJtl1iwc7h+lcP3x3ftqutIiffmc/fa86mXn5d+hR0sgs3j9DwLgWD3j+bFNe96MOQaSMKRoyyXlkbM/h619zSflGJx1+PehUa7OGQ+xZ173rLp1v0+gF/Tlru/Qv/2mWCV9k3u8Xyviv8ZP6td+nGV1Oulv3b9F9pH1XqvvQSQ3pvXY7gf5t+P9E+8sPeYSVHMl4okGVos1Qq4UMws252FCipuz04eA8m5Sb4Tgu9JAW+wpOUeApICwW0kYoYDpFWQllL2tCpJzwpoEgt/okujScFGjFke9wJhDtwNE3H9d8zmAbqmEQ9vTCZRC1VTKE/DTT3naplBFU4MalkBIagqlDE9ikTk0ZaKCGTTBqUlEE95YqvHpOGuJVpwSCDlqaCZsakgSGzrW4hncEYVNBKrQh49nAMmmkRUzikk0MGWWSTj2XQVWH6EOzfSunBAAbQg9LZxtQmzKDpsqvADJp3LV7R6ixyyEFnKJUYyhBO6UCaaaBa1EyBeTrRelLivYvXOz3p1DwVVI1WtjKZDKbcBZwppSY/S08LmetrNaminnQq+F4DgxrSmbI2Xe2Ja5L/v0hf5tpNDl75WeFaclStAQAA) format("woff2");
  unicode-range: U+20B1;
}

:root {
  --bg:        hsl(252 43% 5%);
  --bg-2:      hsl(255 40% 7%);
  --card:      hsl(257 40% 10%);
  --card-2:    hsl(257 38% 13%);
  --card-3:    hsl(258 36% 16%);

  --primary:      hsl(263 84% 60%);  /* brand kit #7C3AED */
  --primary-600:  hsl(263 84% 52%);
  --primary-glow: hsl(275 90% 74%);  /* brand kit #B388F5 */
  --accent:       hsl(271 91% 65%);

  --destructive: hsl(0 72% 55%);
  --success:     hsl(152 66% 50%);
  --warning:     hsl(38 92% 58%);

  --text:    hsl(255 30% 97%);
  --dim:     hsl(258 22% 82%);
  --faint:   hsl(258 20% 66%);

  --border:    hsl(263 45% 40% / 0.20);
  --border-2:  hsl(263 45% 55% / 0.32);
  --track:     hsl(258 30% 18% / 0.7);

  --r:    14px;
  --r-sm: 10px;
  --r-lg: 18px;

  --font:    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --display: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --glow: 0 12px 40px -12px hsl(263 84% 40% / 0.55);
  --shadow: 0 1px 0 hsl(280 100% 80% / 0.05) inset, 0 16px 40px -24px hsl(252 80% 2% / 0.9);
  --body-grad:
    radial-gradient(1100px 620px at 70% -10%, hsl(271 80% 30% / 0.42), transparent 60%),
    radial-gradient(900px 500px at 105% 8%, hsl(280 90% 45% / 0.16), transparent 55%),
    radial-gradient(700px 500px at -8% 105%, hsl(263 70% 30% / 0.20), transparent 60%);
}

/* ---- Light theme overrides ---- */
html.light {
  --bg:        hsl(252 44% 95%);
  --bg-2:      hsl(252 40% 93%);
  --card:      hsl(0 0% 100%);
  --card-2:    hsl(250 44% 98%);
  --card-3:    hsl(250 34% 94%);
  --primary-glow: hsl(263 72% 50%);
  --text:    hsl(255 38% 13%);
  --dim:     hsl(258 20% 34%);
  --faint:   hsl(258 16% 46%);
  --border:    hsl(263 45% 42% / 0.18);
  --border-2:  hsl(263 45% 48% / 0.30);
  --track:     hsl(255 32% 89%);
  --glow: 0 14px 40px -14px hsl(263 84% 55% / 0.45);
  --shadow: 0 1px 0 hsl(0 0% 100% / 0.8) inset, 0 18px 42px -26px hsl(263 60% 38% / 0.42);
  --body-grad:
    radial-gradient(1100px 620px at 70% -10%, hsl(271 85% 80% / 0.42), transparent 60%),
    radial-gradient(900px 500px at 105% 8%, hsl(280 85% 80% / 0.26), transparent 55%),
    radial-gradient(700px 500px at -8% 105%, hsl(263 75% 80% / 0.30), transparent 60%);
}
html.light .glass { background: linear-gradient(180deg, hsl(0 0% 100% / 0.94), hsl(250 44% 99% / 0.94)); border-color: hsl(263 45% 60% / 0.22); }
html.light .kpi-card { background: linear-gradient(180deg, hsl(0 0% 100%), hsl(250 44% 98%)); }
html.light .pipe-stage, html.light .task, html.light .brief-card, html.light .sec-row,
html.light .qa-btn, html.light .chk { background: hsl(250 44% 98%); }

/* ---- Light theme: contrast + floating-purple polish ---- */
html.light .prio.normal { color: hsl(258 28% 38%); background: hsl(258 44% 93%); border-color: hsl(258 44% 84%); }
html.light .act-tag { background: hsl(258 46% 94%); color: hsl(258 30% 40%); }
html.light .cat-mini .ctrack, html.light .budget-track, html.light .funnel,
html.light .io-bar, html.light .heat-cell { background: hsl(255 34% 90%); }
html.light .stage-pill { color: hsl(263 60% 46%); background: hsl(263 60% 94%); border-color: hsl(263 55% 82%); }
html.light .bcard .bk-plat { color: hsl(263 60% 46%); background: hsl(263 60% 94%); }
html.light .exp-tabs { background: hsl(250 44% 96%); }
html.light .side-user, html.light .nav-item .soon { border-color: hsl(263 45% 60% / 0.24); }
/* light theme: keep gradient buttons/controls gradient (the .qa-btn/.chk light bg above outranks .primary/.on) */
html.light .qa-btn.primary { color: #fff; background: linear-gradient(100deg, var(--primary), var(--accent)); border-color: transparent; }
html.light .chk.on { color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); border-color: transparent; }

/* ---- Light theme: the states the block above missed ----
   Everything here hardcodes a DARK hsl() in widgets.css instead of a var, so it stayed dark
   when the theme flipped. Found by auditing every literal background under 30% lightness
   against the html.light selectors that exist, not by looking at screens one at a time.
   The pattern in every case was the same: the BASE selector got a light override, its
   :hover did not, so the element went dark the moment the cursor touched it. */
html.light .qa-btn:hover { background: hsl(263 60% 94%); border-color: hsl(263 45% 62% / 0.45); }
html.light .qa-btn:disabled:hover { background: hsl(250 44% 98%); border-color: var(--border); }
html.light .task:hover { background: hsl(250 40% 95%); }
html.light .act:hover { background: hsl(258 46% 95%); }
html.light .x-btn { background: hsl(250 34% 92%); }
html.light .x-btn:hover { background: hsl(250 34% 87%); }
/* Application cards: never had a light rule at all, so the whole Applications list stayed
   on a dark card with dark text on it. */
html.light .app-card { background: hsl(250 44% 98%); }
/* The three red "needs attention" surfaces. A 0.16 alpha dark red over a white card reads
   as grey-brown, not as an alert. */
html.light .app-card.due-today { background: hsl(0 78% 97%); border-color: hsl(0 84% 58% / 0.45); }
html.light .kpi-card.alert { background: hsl(0 78% 97%); }
html.light .statmini.alert { background: hsl(0 78% 97%); }
/* The follow-up banner already flips, but its icon did not: a pale pink glyph on the pale
   pink banner is invisible in light mode. */
html.light .fu-banner .fb-ico { background: hsl(0 84% 58% / 0.16); color: hsl(0 72% 45%); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100%; }
body {
  background: var(--body-grad) var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
#root { min-height: 100%; }
button { font-family: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
.tnum { font-variant-numeric: tabular-nums; }
.mono-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.13em; color: var(--faint); font-weight: 600; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: hsl(263 40% 50% / 0.28); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   SHELL: sidebar + main
   ============================================================ */
.app { min-height: 100vh; display: grid; grid-template-columns: 244px 1fr; }

/* ---- sidebar ---- */
.side {
  display: flex; flex-direction: column; padding: 20px 16px;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, hsl(258 40% 9% / 0.6), hsl(252 45% 5% / 0.4));
  position: sticky; top: 0; height: 100vh;
}
html.light .side { background: linear-gradient(180deg, hsl(250 40% 96% / 0.9), hsl(250 40% 98% / 0.7)); }
.side-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 18px; }
.side-logo {
  width: 40px; height: 40px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; flex: none;
  box-shadow: 0 8px 22px -8px hsl(280 100% 70% / 0.7);
}
.side-logo img { width: 100%; height: 100%; display: block; }
.side-brand b { font-family: var(--display); font-size: 16px; font-weight: 700; line-height: 1; display: block; }
.side-brand span { font-size: 10px; letter-spacing: 0.18em; color: var(--faint); font-weight: 600; }

.nav-group { margin-top: 14px; }
.nav-group > .mono-label { padding: 0 10px 8px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--r-sm); color: var(--dim); font-size: 14px; font-weight: 500;
  margin-bottom: 2px; transition: 0.15s; position: relative;
}
.nav-item:hover { background: hsl(263 40% 30% / 0.18); color: var(--text); }
.nav-item.on {
  background: linear-gradient(100deg, var(--primary), var(--accent));
  color: white; font-weight: 600; box-shadow: var(--glow);
}
.nav-item.on svg { color: white; }
.nav-item svg { color: var(--faint); flex: none; }
.nav-item .soon { margin-left: auto; font-size: 9px; letter-spacing: 0.1em; color: var(--faint);
  border: 1px solid var(--border); padding: 1px 6px; border-radius: 99px; }
.nav-item .navcount { margin-left: auto; font-size: 10px; font-weight: 700; color: white;
  background: var(--destructive); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center; }

.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 9px; padding-top: 14px; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r);
  border: 1px solid var(--border); }
.side-user .av { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; color: white; background: linear-gradient(145deg, var(--primary), var(--accent)); }
.side-user .t { flex: 1; min-width: 0; }
.side-user .t b { display: block; font-size: 13px; }
.side-user .t span { font-size: 11px; color: var(--faint); }
.side-user .out { color: var(--faint); padding: 6px; border-radius: 8px; }
.side-user .out:hover { color: var(--destructive); background: hsl(0 84% 62% / 0.12); }

/* ---- main ---- */
.main { min-width: 0; display: flex; flex-direction: column; padding: 22px 26px 40px; gap: 16px; }
.head { display: flex; align-items: flex-start; gap: 16px; }
.head h1 { font-family: var(--display); font-size: 27px; font-weight: 700; letter-spacing: -0.02em; }
.head .sub { color: var(--dim); font-size: 13.5px; margin-top: 3px; }
.head-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.date-chip { text-align: right; }
.date-chip b { font-family: var(--display); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--success); font-weight: 600;
  border: 1px solid hsl(152 70% 48% / 0.3); background: hsl(152 70% 48% / 0.1); padding: 4px 9px; border-radius: 99px; }
.live .pulse { width: 7px; height: 7px; border-radius: 99px; background: var(--success); box-shadow: 0 0 0 0 hsl(152 70% 48% / 0.6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 hsl(152 70% 48% / 0.5); } 70% { box-shadow: 0 0 0 7px hsl(152 70% 48% / 0); } }

.icon-btn { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center;
  border: 1px solid var(--border-2); color: var(--dim); background: hsl(258 36% 16% / 0.5); transition: 0.15s; }
.icon-btn:hover { color: var(--text); border-color: var(--accent); }
.icon-btn.sfx-on { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 0 12px hsl(271 91% 65% / 0.25); }
html.light .icon-btn { background: hsl(250 40% 98%); }
.qa-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; border: 1px solid var(--border-2); color: var(--text); background: hsl(258 36% 16% / 0.6); transition: 0.15s; }
.qa-btn:hover { border-color: var(--accent); background: hsl(263 50% 24% / 0.5); }
.qa-btn.primary { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; color: white; background: linear-gradient(100deg, var(--primary), var(--accent)); border-color: transparent; box-shadow: var(--glow); }
.qa-btn.primary:hover { filter: brightness(1.08); }
/* Selected state for a small group of buttons acting as a toggle (channel picker). */
.qa-btn.on { border-color: var(--accent); background: hsl(263 60% 30% / 0.75); color: #fff; }
.qa-btn:disabled { opacity: .4; cursor: not-allowed; }
.qa-btn:disabled:hover { border-color: var(--border-2); background: hsl(258 36% 16% / 0.6); }

/* ---- glass card ---- */
.glass {
  background: linear-gradient(180deg, hsl(258 40% 14% / 0.55), hsl(257 42% 9% / 0.65));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  display: flex; flex-direction: column; min-height: 0;
}

.card-head { display: flex; align-items: center; gap: 10px; padding: 15px 18px 0; }
.card-head h2 { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.card-head .ch-sub { font-size: 12px; color: var(--faint); }
.card-head .ch-ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  background: hsl(263 60% 50% / 0.16); color: var(--accent); flex: none; }
.card-head .ch-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.link-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--dim);
  padding: 6px 11px; border-radius: var(--r-sm); border: 1px solid var(--border); transition: 0.15s; }
.link-btn:hover { color: var(--text); border-color: var(--border-2); }
.card-body { padding: 14px 18px 16px; min-height: 0; }

/* ---- loading / page states ---- */
/* Pinned to the viewport so it is dead-center on desktop and on phones
   (100vh under a mobile URL bar pushed the card off-center). */
.boot { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; }
@keyframes spin { to { transform: rotate(360deg); } }
.boot-card { display: flex; flex-direction: column; align-items: center; gap: 15px; animation: bootIn 0.5s ease; }
@keyframes bootIn { from { opacity: 0; transform: translateY(10px); } }
/* The Shadow figure, not the logo. Same 16 KB webp that index.html's boot overlay
   and the portfolio's Shadow section use, so every surface shows the same face.
   mix-blend-mode: screen drops the near-black background out, so there is no image
   rectangle and no seam against the boot background. */
.boot-figure { position: relative; width: 156px; aspect-ratio: 1122 / 1402;
  mix-blend-mode: screen; animation: bootBreathe 7s ease-in-out infinite; }
.boot-figure img { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
/* The aura is its own layer on a DIFFERENT period to the breathe. Two
   incommensurate cycles never visibly line up, so it reads as something alive
   rather than as a blinking indicator lamp. */
.boot-glow { position: absolute; inset: -22%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 40%, hsl(266 85% 62% / 0.34), transparent 68%);
  animation: bootAura 4.6s ease-in-out infinite; }
@keyframes bootBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.015); }
}
@keyframes bootAura { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.boot-name { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: 0.01em; }
/* Nobody should be forced to watch slow motion. Reveal still happens, motion stops. */
@media (prefers-reduced-motion: reduce) {
  .boot-figure, .boot-glow, .boot-card { animation: none; }
  .boot-glow { opacity: 0.75; }
}
/* Own class, not .msg - that one is the chat bubble in widgets.css (max-width: 84%
   + padding), which was wrapping the boot line in two and knocking it off-center. */
.boot-msg { color: var(--dim); font-size: 12.5px; line-height: 1.5; max-width: 260px; }
.main { animation: mainIn 0.4s ease; }
@keyframes mainIn { from { opacity: 0; transform: translateY(6px); } }
.page-pad { padding: 4px 0; }
.page-title { font-family: var(--display); font-size: 20px; font-weight: 700; margin-bottom: 2px; }
.page-sub { color: var(--dim); font-size: 13px; margin-bottom: 14px; }

/* ============================================================
   MOBILE — off-canvas sidebar, hamburger, responsive shell
   (base: hidden on desktop; the media queries below turn them on)
   ============================================================ */
.head-titles { min-width: 0; }
.menu-btn { display: none; }
.side-close { display: none; }
.side-scrim { display: none; }

@media (max-width: 860px) {
  .app { display: block; min-height: 100vh; }

  /* sidebar becomes a slide-in drawer */
  .side {
    position: fixed; left: 0; top: 0; height: 100vh; width: 270px; max-width: 84vw;
    z-index: 70; overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(.2,.7,.3,1);
    border-right: 1px solid var(--border-2);
    box-shadow: 24px 0 60px -28px hsl(252 80% 2% / 0.9);
  }
  .side.open { transform: translateX(0); }
  .side-scrim {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: hsl(252 60% 3% / 0.55); backdrop-filter: blur(2px); animation: fade 0.18s ease;
  }
  .side-close {
    display: grid; place-items: center; margin-left: auto; flex: none;
    width: 34px; height: 34px; border-radius: 9px; color: var(--dim);
    background: hsl(258 30% 20% / 0.5);
  }
  html.light .side-close { background: hsl(250 30% 92%); }
  .side-close:hover { color: var(--text); }

  /* hamburger in the header */
  .menu-btn {
    display: grid; place-items: center; flex: none; width: 40px; height: 40px;
    border-radius: var(--r-sm); border: 1px solid var(--border-2); color: var(--text);
    background: hsl(258 36% 16% / 0.5);
  }
  html.light .menu-btn { background: #fff; }
  .menu-btn:hover { border-color: var(--accent); }

  /* main goes full width */
  .main { padding: 16px 14px 92px; gap: 14px; }
  .head { flex-wrap: wrap; align-items: center; gap: 11px; }
  .head-titles { flex: 1 1 auto; }
  .head h1 { font-size: 21px; }
  .head .sub { font-size: 12.5px; margin-top: 2px; }
  .head-right { margin-left: auto; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .date-chip { display: none; }
  .qa-btn, .qa-btn.primary { padding: 8px 11px; font-size: 12px; }
  .icon-btn { width: 36px; height: 36px; }
}

@media (max-width: 480px) {
  .main { padding: 13px 11px 92px; }
  .head h1 { font-size: 19px; }
  .head .sub { font-size: 12px; }
  .card-body { padding: 13px 14px 15px; }
  .card-head { padding: 14px 15px 0; }
}