/* Waslah dashboard. One token layer; base styles are the phone layout, wider screens layer on. */

:root {
  color-scheme: light dark;

  /* Neutrals carry the page; one accent. */
  --bg: #f6f5f1;
  --surface: #ffffff;
  --surface-2: #efede7;
  --ink: #1d1c1a;
  --ink-2: #55514a;
  --ink-3: #6b675f;
  --line: #e2dfd7;
  --line-strong: #c9c4b9;

  --accent: #0b6b4f;
  --accent-hover: #095a43;
  --accent-active: #074835;
  --accent-ink: #ffffff;
  --accent-soft: #e3f1ea;

  --danger: #b42318;
  --danger-hover: #951d14;
  --danger-soft: #fcebe9;
  --warn: #7a5000;
  --warn-soft: #fbf0d9;
  --ok: #0b6b4f;
  --ok-soft: #e3f1ea;
  --focus: #2457c5;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 0.9375rem;
  --t-lg: 1.0625rem;
  --t-xl: 1.375rem;
  --t-display: 2.375rem;
  --lh-tight: 1.15;
  --lh: 1.55;

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;

  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --hair: 1px;
  --ring: 0 0 0 3px color-mix(in srgb, var(--focus) 40%, transparent);
  --shadow-pop: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 16px rgb(0 0 0 / 0.06);

  --dur: 140ms;
  --dur-spin: 900ms;
  --r-pill: 999px;
  --outline: 2px;
  /* QR codes need dark modules on a light quiet zone in both themes. */
  --qr-bg: #ffffff;
  --qr-ink: #55514a;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --side-w: 15rem;
  --measure: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131311;
    --surface: #1b1a18;
    --surface-2: #24231f;
    --ink: #eceae4;
    --ink-2: #b8b3a9;
    --ink-3: #a29d92;
    --line: #2e2c28;
    --line-strong: #45423b;

    --accent: #3cbd8a;
    --accent-hover: #55cb9b;
    --accent-active: #2fa576;
    --accent-ink: #0b1f17;
    --accent-soft: #143328;

    --danger: #f2877b;
    --danger-hover: #f6a197;
    --danger-soft: #3a1b18;
    --warn: #e5b552;
    --warn-soft: #352912;
    --ok: #3cbd8a;
    --ok-soft: #143328;
    --focus: #8fb2ff;
    --shadow-pop: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 20px rgb(0 0 0 / 0.35);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--t-base) / var(--lh) var(--font);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--outline) solid var(--focus);
  outline-offset: var(--outline);
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
code, .mono, pre { font-family: var(--mono); font-size: 0.92em; }
.muted { color: var(--ink-3); }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

.icon { width: 1.05em; height: 1.05em; flex: none; }
.spin { animation: spin var(--dur-spin) linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; }
  * { transition: none !important; }
}

/* ---------------------------------------------------------------- shell */

.shell { min-height: 100vh; }

.side {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border-bottom: var(--hair) solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--ink);
  font-weight: 650;
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.nav {
  order: 3;
  flex: 1 0 100%;
  display: flex;
  gap: var(--s1);
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(var(--s4) * -1);
  padding: 0 var(--s4);
}
.nav::-webkit-scrollbar { display: none; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-link:hover { background: var(--surface-2); color: var(--ink); }
.nav-link:active { background: var(--line); }
.nav-link[aria-current="page"] { background: var(--accent-soft); color: var(--ink); }
.nav-link[aria-current="page"] .icon { color: var(--accent); }

.side-foot { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.who { display: none; }

.main {
  padding: var(--s5) var(--s4) var(--s8);
  max-width: var(--measure);
}

/* ---------------------------------------------------------------- page type */

.page-head { margin-bottom: var(--s6); }
.page-head-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s3) var(--s4); }
.eyebrow { color: var(--ink-3); font-size: var(--t-sm); font-weight: 500; margin-bottom: var(--s2); }
.display {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  font-weight: 650;
  letter-spacing: -0.025em;
  max-width: 22ch;
  text-wrap: balance;
}
.lede { margin-top: var(--s3); color: var(--ink-2); font-size: var(--t-lg); max-width: 60ch; }
.page-head > p:last-child:not(.lede):not(.eyebrow) { margin-top: var(--s5); }
.back {
  display: inline-flex; align-items: center; gap: var(--s1);
  margin-bottom: var(--s4); color: var(--ink-3); text-decoration: none; font-size: var(--t-sm);
}
.back:hover { color: var(--ink); }

.section { margin-top: var(--s6); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s3); }
.section-title {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-lg); font-weight: 620; letter-spacing: -0.01em; margin-bottom: var(--s3);
}
.section-head .section-title { margin-bottom: 0; }
.link-quiet { color: var(--ink-2); font-size: var(--t-sm); }
.hint { color: var(--ink-3); font-size: var(--t-sm); margin-top: var(--s1); }
.empty {
  padding: var(--s5) var(--s4);
  border: var(--hair) dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--ink-2);
}

.panel {
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5) var(--s4);
}
.panel-key { border-color: var(--accent); background: var(--accent-soft); }
.panel-key p { margin-bottom: var(--s3); color: var(--ink-2); }
.panel > .hint:first-of-type { margin-bottom: var(--s4); }

.split { display: grid; gap: 0 var(--s5); }

.flash, .alert {
  display: flex; align-items: flex-start; gap: var(--s2);
  padding: var(--s3) var(--s4);
  border: var(--hair) solid var(--line);
  border-radius: var(--r);
  margin-bottom: var(--s4);
}
.flash .icon, .alert .icon { margin-top: 0.2em; }
.flash { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.flash .icon { color: var(--ok); }
.alert-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.alert-danger .icon { color: var(--danger); }
.alert-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.alert-warn .icon { color: var(--warn); }

/* ---------------------------------------------------------------- badges */

.badge {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 0.125rem var(--s2);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 550;
  white-space: nowrap;
  border: var(--hair) solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
}
.badge-ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.badge-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }

/* ---------------------------------------------------------------- rows */

.rows {
  list-style: none; padding: 0;
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.rows > li + li { border-top: var(--hair) solid var(--line); }
.rows-plain { border: 0; border-radius: 0; background: none; }
.row-link, .row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  color: var(--ink); text-decoration: none;
}
.rows-plain .row { padding-left: 0; padding-right: 0; flex-wrap: wrap; }
.row-link { transition: background var(--dur) var(--ease); }
.row-link:hover { background: var(--surface-2); color: var(--ink); }
.row-link:active { background: var(--line); }
.row-link:focus-visible { outline-offset: calc(var(--outline) * -1); }
.row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.row-title { font-weight: 560; }
.row-sub { color: var(--ink-3); font-size: var(--t-sm); overflow-wrap: anywhere; }
.row-arrow { color: var(--ink-3); display: none; }

/* ---------------------------------------------------------------- stats */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s5);
  padding: var(--s5) var(--s4);
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
}
.stat dt { color: var(--ink-3); font-size: var(--t-sm); }
.stat dd { font-size: var(--t-xl); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stat dd a { color: var(--danger); }
.stat-lead { grid-column: 1 / -1; }
.stat-lead dd { font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: -0.025em; }

/* ---------------------------------------------------------------- tables */

.table-wrap {
  position: relative; /* contains .sr-only headers so they cannot widen the page */
  overflow-x: auto;
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
}
.panel .table-wrap { border-radius: var(--r); margin-bottom: var(--s4); }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.table th {
  text-align: left; font-weight: 550; color: var(--ink-3);
  padding: var(--s2) var(--s3);
  border-bottom: var(--hair) solid var(--line);
  white-space: nowrap;
}
.table td { padding: var(--s3); border-bottom: var(--hair) solid var(--line); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.cell-text { min-width: 14rem; max-width: 32rem; overflow-wrap: anywhere; }
.cell-error { display: block; margin-top: var(--s1); color: var(--danger); font-size: var(--t-xs); max-width: 18rem; }

/* ---------------------------------------------------------------- filters */

.filters { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center;
  padding: var(--s1) var(--s3);
  min-height: 2rem;
  border: var(--hair) solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink-2); background: var(--surface);
  text-decoration: none; font-size: var(--t-sm); font-weight: 500;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover { background: var(--surface-2); color: var(--ink); }
.chip:active { background: var(--line); }
.chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); }

/* ---------------------------------------------------------------- forms */

.stack { display: grid; gap: var(--s4); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 550; margin-bottom: var(--s2); padding: 0; }
.field { display: grid; gap: var(--s1); }
.field label { font-weight: 550; font-size: var(--t-sm); }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--s2) var(--s3);
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: var(--hair) solid var(--line-strong);
  border-radius: var(--r);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--ink-3); }
input:focus-visible, textarea:focus-visible { outline: none; border-color: var(--focus); box-shadow: var(--ring); }
input:disabled, textarea:disabled { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; }
input[aria-invalid="true"] { border-color: var(--danger); }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 0.8; }
textarea { resize: vertical; line-height: var(--lh); }
input.mono { font-family: var(--mono); }
.input-short { max-width: 9rem; }
input[type="checkbox"], input[type="radio"] { width: 1.1rem; height: 1.1rem; margin: 0.2em 0 0; accent-color: var(--accent); flex: none; }

.check { display: flex; align-items: flex-start; gap: var(--s2); cursor: pointer; }
.checks { display: grid; gap: var(--s2); }

.choices { display: grid; gap: var(--s2); }
.choice {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4);
  border: var(--hair) solid var(--line-strong);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.choice:hover { border-color: var(--ink-3); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice:has(input:focus-visible) { box-shadow: var(--ring); }
.choice-body { display: grid; gap: var(--s1); }
.choice-title { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 580; }
.choice-text { color: var(--ink-2); font-size: var(--t-sm); }

.inline-form { display: grid; gap: var(--s3); align-items: end; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 2.75rem;
  padding: var(--s2) var(--s4);
  font: inherit; font-weight: 560;
  color: var(--ink);
  background: var(--surface);
  border: var(--hair) solid var(--line-strong);
  border-radius: var(--r);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); color: var(--ink); }
.btn:active { background: var(--line); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; opacity: 0.75; }
.btn[aria-busy="true"] .icon { animation: spin var(--dur-spin) linear infinite; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn-primary:active { background: var(--accent-active); border-color: var(--accent-active); }

.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-hover); }
.btn-danger:active { background: color-mix(in srgb, var(--danger) 18%, transparent); }

.btn-quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--surface-2); border-color: transparent; }
.btn-sm { min-height: 2.25rem; padding: var(--s1) var(--s3); font-size: var(--t-sm); }
.btn-block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* ---------------------------------------------------------------- facts, code */

.facts { display: grid; gap: var(--s3); }
.facts > div { display: grid; gap: var(--s1); }
.facts dt { color: var(--ink-3); font-size: var(--t-sm); }
.facts dd { overflow-wrap: anywhere; }

.copy {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s1) var(--s1) var(--s3);
  background: var(--surface-2);
  border: var(--hair) solid var(--line);
  border-radius: var(--r);
  margin-bottom: var(--s3);
}
.copy-value { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.code {
  margin: 0 0 var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border: var(--hair) solid var(--line);
  border-radius: var(--r);
  overflow-x: auto;
  font-size: var(--t-sm);
  line-height: 1.6;
  white-space: pre;
}
.details { margin-top: var(--s5); }
.details summary { cursor: pointer; color: var(--ink-2); font-weight: 550; }
.details[open] summary { margin-bottom: var(--s3); }
.details p { color: var(--ink-2); margin-bottom: var(--s3); font-size: var(--t-sm); }

/* ---------------------------------------------------------------- campaigns */

.progress {
  display: block;
  width: 100%;
  height: var(--s2);
  margin-top: var(--s2);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
  appearance: none;
}
.progress::-webkit-progress-bar { background: var(--surface-2); border-radius: var(--r-pill); }
.progress::-webkit-progress-value { background: var(--accent); border-radius: var(--r-pill); }
.progress::-moz-progress-bar { background: var(--accent); border-radius: var(--r-pill); }
.progress-lg { height: var(--s3); margin: 0 0 var(--s4); }
.stats-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.actions-bar { margin: var(--s5) 0 0; }
.actions-bar form { display: contents; }
.details-panel {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-radius: var(--r);
}
.details-panel summary { display: flex; align-items: center; gap: var(--s2); }
.details-panel[open] summary { margin-bottom: var(--s4); }
.panel .details-panel { background: var(--surface-2); margin-bottom: var(--s4); }
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.range .input-short { max-width: 6rem; }
.preview { margin-top: var(--s5); padding-top: var(--s4); border-top: var(--hair) solid var(--line); }
.preview-to { color: var(--ink-3); font-size: var(--t-sm); margin-bottom: var(--s2); }
.bubble {
  max-width: 34ch;
  padding: var(--s2) var(--s3);
  background: var(--accent-soft);
  border: var(--hair) solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--r-lg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- connect */

.connect { display: grid; gap: var(--s5); }
.steps { padding-left: 1.25rem; display: grid; gap: var(--s2); color: var(--ink-2); margin-bottom: var(--s3); }
.steps strong { color: var(--ink); font-weight: 600; }
.qr-box {
  display: grid; place-items: center;
  min-height: 16rem;
  padding: var(--s4);
  background: var(--qr-bg);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
}
.qr-box img { width: 15rem; height: 15rem; image-rendering: pixelated; }
.qr-wait, .qr-start { display: grid; justify-items: center; gap: var(--s3); color: var(--qr-ink); text-align: center; }
.qr-start .muted { color: var(--qr-ink); }
.qr-wait .icon { width: 1.75rem; height: 1.75rem; }

/* ---------------------------------------------------------------- plain (auth/error) */

.plain { display: grid; min-height: 100vh; }
.plain-main {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  padding: var(--s7) var(--s4);
}
.plain-main .brand { margin-bottom: var(--s7); }
.plain-title { font-size: var(--t-display); line-height: var(--lh-tight); font-weight: 650; letter-spacing: -0.025em; }
.plain-lede { color: var(--ink-2); margin: var(--s2) 0 var(--s5); }
.plain-main .eyebrow + .plain-title { margin-bottom: var(--s3); }
.plain-main > p:last-child { margin-top: var(--s5); }
.plain-foot { margin-top: var(--s5); color: var(--ink-2); }

/* ---------------------------------------------------------------- wider screens */

@media (min-width: 40rem) {
  .main { padding: var(--s6) var(--s5) var(--s8); }
  .panel { padding: var(--s5); }
  .stats { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); align-items: end; padding: var(--s5); }
  .stat-lead { grid-column: auto; }
  .stats-compact { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .row-arrow { display: block; }
  .facts > div { grid-template-columns: 12rem 1fr; align-items: baseline; }
  .facts .copy { margin-bottom: 0; }
  .inline-form { grid-template-columns: minmax(0, 20rem) auto; justify-content: start; }
  .connect { grid-template-columns: 1fr auto; align-items: center; }
  .qr-box { width: 18rem; }
  .filters { grid-auto-flow: row; }
  .plain-main { padding-top: var(--s8); }
}

@media (min-width: 60rem) {
  :root { --t-display: 2.75rem; }
  .shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .side {
    position: sticky; top: 0; height: 100vh;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    gap: var(--s5);
    padding: var(--s5) var(--s3);
    border-bottom: 0;
    border-right: var(--hair) solid var(--line);
  }
  .brand { padding: 0 var(--s3); }
  .nav { order: 0; flex: 1 1 auto; flex-direction: column; overflow: visible; margin: 0; padding: 0; }
  .side-foot {
    margin-left: 0; flex-direction: column; align-items: stretch; gap: var(--s2);
    padding-top: var(--s4); border-top: var(--hair) solid var(--line);
  }
  .side-foot .btn { justify-content: flex-start; }
  .who { display: grid; padding: 0 var(--s3); min-width: 0; }
  .who-account { font-weight: 560; font-size: var(--t-sm); }
  .who-email { color: var(--ink-3); font-size: var(--t-xs); overflow-wrap: anywhere; }
  .main { padding: var(--s7) var(--s7) var(--s8); }
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split > .section { margin-top: var(--s6); }
}