/* Components. DRAFT for mockup review, 2026-11-04. Uses tokens only.
 * Breakpoints (the only raw numbers allowed outside tokens.css):
 *   phone   max-width 743px   bottom tab bar, iOS nav bar, drawers become sheets
 *   tablet  744px to 1023px   icon rail
 *   desktop min-width 1024px  labelled sidebar
 */

/* =========================================================== Shell */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100dvh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-3);
  background: var(--ground);
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

.switcher {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--row-h);
  padding: var(--s-2);
  border-radius: var(--r-md);
  transition: background var(--dur-1) var(--ease-std);
}
.switcher:hover { background: var(--fill-hover); }
.switcher .logo {
  width: var(--s-8);
  height: var(--s-8);
  border-radius: var(--r-md);
  background: var(--text);
  color: var(--surface);
  display: grid;
  place-items: center;
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  flex: none;
}
.switcher .name { display: block; font-weight: var(--fw-bold); line-height: var(--lh-14); }
.switcher .scope { display: block; color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); }
.switcher .icon { margin-left: auto; color: var(--text-2); }

.nav-group { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s-4); }
.nav-label {
  padding: 0 var(--s-3) var(--s-1);
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: var(--nav-row-h);
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
  transition: background var(--dur-1) var(--ease-std);
}
.nav-item:hover { background: var(--fill-hover); text-decoration: none; }
.nav-item .icon { width: var(--icon-nav); height: var(--icon-nav); color: var(--text-2); }
.nav-item[aria-current="page"] { background: var(--fill-active); font-weight: var(--fw-medium); }
.nav-item[aria-current="page"] .icon { color: var(--accent); }
.nav-item .count { margin-left: auto; background: none; color: var(--text-2); font-weight: var(--fw-regular); }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: var(--s-3); }

.main { min-width: 0; }

.page {
  max-width: calc(var(--content-max) + 2 * var(--s-10));
  margin: 0 auto;
  padding: var(--s-8) var(--s-10) var(--s-16);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.page-title {
  font-size: var(--fs-28);
  line-height: var(--lh-28);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.page-sub { margin-top: var(--s-1); color: var(--text-2); }
.page-sub strong { color: var(--text); font-weight: var(--fw-medium); }
.page-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); align-items: start; }

/* iPhone bars: hidden on desktop and tablet */
.navbar, .tabbar, .large-title { display: none; }

/* Tablet: icon rail */
@media (min-width: 744px) and (max-width: 1023px) {
  .app { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .sidebar { padding: var(--s-4) var(--s-2); align-items: center; }
  .switcher { justify-content: center; padding: var(--s-1); }
  .switcher .label-text, .switcher > .icon, .nav-label, .nav-item .label-text, .nav-item .count { display: none; }
  .nav-item { width: var(--s-12); justify-content: center; padding: 0; }
  .page { padding: var(--s-6) var(--s-6) var(--s-12); }
}

/* Phone: iOS nav bar + bottom tab bar, no sidebar */
@media (max-width: 743px) {
  .app { display: block; }
  .sidebar { display: none; }

  .navbar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    position: sticky;
    top: 0;
    z-index: var(--z-bars);
    height: calc(var(--navbar-h) + var(--safe-top));
    padding: var(--safe-top) calc(var(--s-4) + var(--safe-right)) 0 calc(var(--s-4) + var(--safe-left));
    background: var(--ground);
    border-bottom: 1px solid transparent;
    transition: background var(--dur-1) var(--ease-std), border-color var(--dur-1) var(--ease-std);
  }
  .navbar.is-scrolled {
    background: var(--bar-bg);
    -webkit-backdrop-filter: var(--bar-blur);
    backdrop-filter: var(--bar-blur);
    border-bottom-color: var(--bar-line);
  }
  .navbar-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--fs-17);
    font-weight: var(--fw-bold);
    opacity: 0;
    transition: opacity var(--dur-1) var(--ease-std);
    white-space: nowrap;
  }
  .navbar.is-scrolled .navbar-title { opacity: 1; }
  .navbar-end { margin-left: auto; display: flex; gap: var(--s-1); }

  .large-title {
    display: block;
    padding: var(--s-1) var(--s-4) var(--s-2);
    font-size: var(--fs-34);
    line-height: var(--lh-34);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-tight);
  }
  .page-head .page-title { display: none; }
  .page-head { padding: 0; }

  .page {
    padding: 0 calc(var(--s-4) + var(--safe-right)) calc(var(--tabbar-h) + var(--safe-bottom) + var(--s-8)) calc(var(--s-4) + var(--safe-left));
    gap: var(--s-6);
  }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }

  .tabbar {
    display: grid;
    /* Equal slots for however many items a portal has (two views plus More fill the bar, not its left half). */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-bars);
    height: calc(var(--tabbar-h) + var(--safe-bottom));
    padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
    background: var(--bar-bg);
    -webkit-backdrop-filter: var(--bar-blur);
    backdrop-filter: var(--bar-blur);
    border-top: 1px solid var(--bar-line);
  }
  .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--text-2);
    font-size: var(--fs-12);
    line-height: var(--lh-12);
    text-decoration: none;
    position: relative;
  }
  .tab:hover { text-decoration: none; }
  .tab .icon { width: var(--s-6); height: var(--s-6); }
  .tab[aria-current="page"] { color: var(--accent); }
  .tab .count { position: absolute; top: var(--s-1); left: calc(50% + var(--s-2)); }
}

/* =========================================================== Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--control-h);
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  background: var(--fill);
  color: var(--text);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  flex: none;
  transition: background var(--dur-1) var(--ease-std), opacity var(--dur-1) var(--ease-std);
}
.btn:hover { background: var(--fill-active); }
.btn:active { opacity: 0.7; }
.btn .icon { color: currentColor; }

.btn-primary { background: var(--accent-fill); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-fill-hover); }

.btn-plain { background: none; color: var(--accent); padding: 0 var(--s-2); }
.btn-plain:hover { background: var(--fill-hover); }

.btn-destructive { background: none; color: var(--negative); }
.btn-destructive:hover { background: var(--negative-bg); }

.btn-icon { width: var(--control-h); padding: 0; background: var(--fill); border-radius: var(--r-full); color: var(--text-2); }
.btn-icon:hover { color: var(--text); }
.btn-icon.is-bare { background: none; color: var(--accent); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.btn-block { width: 100%; }

/* =========================================================== Segmented control */

.seg {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 2px;
  border-radius: var(--r-md);
  background: var(--fill);
  height: var(--control-h);
  flex: none;
}
.seg button {
  padding: 0 var(--s-3);
  border-radius: calc(var(--r-md) - 2px);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std);
}
.seg button[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow-control); }
:root[data-theme="dark"] .seg button[aria-pressed="true"] { background: var(--line-strong); }
@media (max-width: 743px) {
  .seg { height: var(--s-8); }
  .seg.is-fill { display: grid; width: 100%; }
}

/* =========================================================== Fields */

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field-label { font-weight: var(--fw-medium); }
.field-help { color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); }
.field-error { color: var(--negative); font-size: var(--fs-12); line-height: var(--lh-12); }

.input, .textarea, .select {
  width: 100%;
  min-height: var(--field-h);
  padding: 0 var(--s-3);
  border: 1px solid var(--field-line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--dur-1) var(--ease-std), box-shadow var(--dur-1) var(--ease-std);
}
.textarea { padding: var(--s-2) var(--s-3); min-height: calc(var(--field-h) * 3); resize: vertical; line-height: var(--lh-14); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { border-color: var(--accent); border-radius: var(--r-md); }
.input[aria-invalid="true"] { border-color: var(--negative); }
.select { appearance: none; padding-right: var(--s-8); background-image: none; }
.select-wrap { position: relative; }
.select-wrap .icon { position: absolute; right: var(--s-3); top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }

.search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--control-h);
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  background: var(--fill);
  color: var(--text-2);
}
.search input { border: 0; background: none; outline: none; width: 100%; color: var(--text); }
@media (max-width: 743px) {
  .input, .textarea, .select { font-size: var(--fs-17); } /* 17px keeps iOS from zooming on focus */
  /* The same guard for every text field a view styles itself: iOS zooms the whole page into any field under 16px. */
  :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="hidden"]), select, textarea) { font-size: var(--fs-17) !important; }
  .search { height: calc(var(--s-8) + var(--s-1)); }
  .search input { font-size: var(--fs-17); }
}

/* Switch (iOS style). Markup: <input type="checkbox" role="switch" class="switch"> */
.switch {
  appearance: none;
  position: relative;
  width: var(--switch-w);
  height: var(--switch-h);
  border-radius: var(--r-full);
  background: var(--fill-active);
  flex: none;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-std);
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: var(--switch-knob);
  height: var(--switch-knob);
  border-radius: var(--r-full);
  background: var(--on-accent);
  box-shadow: var(--shadow-control);
  transition: transform var(--dur-2) var(--ease-out);
}
.switch:checked { background: var(--switch-on); }
.switch:checked::after { transform: translateX(var(--switch-travel)); }
.switch:focus-visible { border-radius: var(--r-full); }

/* =========================================================== Cards */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  min-width: 0;
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--s-12) ;
  padding: var(--s-4) var(--s-5) 0;
}
.card-title { font-size: var(--fs-17); line-height: var(--lh-17); font-weight: var(--fw-bold); }
.card-title .count-text { color: var(--text-2); font-weight: var(--fw-regular); margin-left: var(--s-1); }
.card-meta { color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); }
.card-body { padding: var(--s-4) var(--s-5) var(--s-5); }
.card-foot { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); }
@media (max-width: 743px) {
  .card-head { padding: var(--s-4) var(--s-4) 0; }
  .card-body { padding: var(--s-3) var(--s-4) var(--s-4); }
}

/* =========================================================== KPI strip (one card, divided) */

.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.kpis.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-5) var(--s-4);
  text-align: left;
  border-right: 1px solid var(--line);
  transition: background var(--dur-1) var(--ease-std);
}
.kpi:last-child { border-right: 0; }
button.kpi:hover { background: var(--fill-hover); }
.kpi[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
}
.kpi-label { color: var(--text-2); }
.kpi-value {
  font-size: var(--fs-28);
  line-height: var(--lh-28);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
}
.kpi-value .unit { font-size: var(--fs-17); color: var(--text-2); font-weight: var(--fw-regular); letter-spacing: 0; margin-left: 2px; }
.kpi-delta { color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); }
.kpi-delta b { font-weight: var(--fw-medium); }
.kpi-delta .is-good { color: var(--positive); }
.kpi-delta .is-bad { color: var(--negative); }

@media (max-width: 743px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
  .kpi:nth-child(2n) { border-right: 0; }
  .kpi:nth-last-child(-n + 2) { border-bottom: 0; }
  .kpi-label { font-size: var(--fs-14); line-height: var(--lh-14); }
  .kpi-value { font-size: var(--fs-22); line-height: var(--lh-22); }
}

/* =========================================================== Chart frame */

.chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5) 0;
}
.readout { min-height: calc(var(--lh-14) + var(--lh-12)); }
.readout-value { font-weight: var(--fw-medium); }
.readout-sub { color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); }
.legend { display: flex; gap: var(--s-4); color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.legend .swatch { width: var(--s-3); height: 2px; border-radius: 1px; background: var(--chart-1); }
.legend .swatch.is-muted { background: var(--chart-muted); }
.legend .swatch.is-dot { width: var(--dot); height: var(--dot); border-radius: var(--r-full); }
.legend .swatch.is-mark { width: 1px; height: var(--s-3); background: var(--chart-mark); }
.chart { position: relative; padding: var(--s-2) var(--s-5) var(--s-4); touch-action: pan-y; }
.chart svg { width: 100%; overflow: visible; }
.chart text { fill: var(--text-2); font-size: var(--fs-12); font-family: var(--font); }
@media (max-width: 743px) {
  .chart-head { padding: var(--s-3) var(--s-4) 0; }
  .chart { padding: var(--s-2) var(--s-4) var(--s-3); }
}

/* =========================================================== Lists (rows) */

.list { display: flex; flex-direction: column; }
.row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--row-h);
  padding: var(--s-2) var(--s-5);
  width: 100%;
  text-align: left;
  color: var(--text);
  text-decoration: none;
  position: relative;
  transition: background var(--dur-1) var(--ease-std);
}
.row + .row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: var(--row-rule-inset, var(--s-5));
  border-top: 1px solid var(--line);
}
.row.has-media { --row-rule-inset: calc(var(--s-5) + var(--s-8) + var(--s-3)); }
a.row:hover, button.row:hover { background: var(--fill-hover); text-decoration: none; }
a.row:active, button.row:active { background: var(--fill-active); }
.row.is-two-line { min-height: var(--row-h-2); }
.row-main { flex: 1; min-width: 0; }
.row-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-title.is-strong { font-weight: var(--fw-medium); }
.row-sub { display: block; color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); white-space: nowrap; flex: none; text-align: right; }
.row-meta.is-late { color: var(--negative); }
.row-value { font-weight: var(--fw-medium); white-space: nowrap; flex: none; text-align: right; }
.row-chevron { color: var(--text-2); width: var(--s-4); height: var(--s-4); flex: none; }
.row .unread {
  width: var(--s-2);
  height: var(--s-2);
  border-radius: var(--r-full);
  background: var(--accent);
  flex: none;
}
@media (max-width: 743px) {
  .row { padding: var(--s-2) var(--s-4); }
  .row + .row::before { left: var(--row-rule-inset, var(--s-4)); }
  .row.has-media { --row-rule-inset: calc(var(--s-4) + var(--s-10) + var(--s-3)); }
  .row-sub, .row-meta { font-size: var(--fs-14); line-height: var(--lh-14); }
}

/* Bar list: the row carries a thin proportional bar (ranked sources) */
.barlist .row { flex-wrap: wrap; row-gap: var(--s-1); }
.barlist .row + .row::before { display: none; }
.barlist .row { min-height: 0; padding-top: var(--s-2); padding-bottom: var(--s-2); }
.barlist .bar { flex-basis: 100%; height: var(--bar-h); border-radius: 2px; overflow: hidden; }
.barlist .bar i { display: block; height: 100%; background: var(--chart-muted); border-radius: 2px; }
.barlist .row:first-child .bar i { background: var(--chart-1); }

/* Grouped inset list (Settings, iOS style) */
.group-title {
  padding: 0 var(--s-4) var(--s-2);
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
}
.group {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
}
.group .row { padding-left: var(--s-4); padding-right: var(--s-4); }
.group .row + .row::before { left: var(--s-4); }
.group-foot { padding: var(--s-2) var(--s-4) 0; color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); }
@media (max-width: 743px) {
  .group { border: 0; }
  .group-title { font-size: var(--fs-14); line-height: var(--lh-14); }
  .group-foot { font-size: var(--fs-14); line-height: var(--lh-14); }
}

/* =========================================================== Table (desktop) */

.table { width: 100%; border-collapse: collapse; }
.table th {
  height: var(--s-10);
  padding: 0 var(--s-5);
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  font-weight: var(--fw-regular);
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td {
  height: var(--row-h);
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--line);
}
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; }
.table th[aria-sort] button { display: inline-flex; align-items: center; gap: var(--s-1); color: inherit; }
.table th[aria-sort="none"] .icon { visibility: hidden; }
.table tbody tr { transition: background var(--dur-1) var(--ease-std); cursor: pointer; }
.table tbody tr:hover { background: var(--fill-hover); }
.table .cell-strong { font-weight: var(--fw-medium); }
.table .cell-sub { display: block; color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); }
.dash { color: var(--text-2); }
@media (max-width: 743px) {
  .table-wrap { display: none; } /* tables become .list rows on the phone */
}
.list-phone { display: none; }
@media (max-width: 743px) { .list-phone { display: flex; } }

/* =========================================================== Pills, counts, avatars */

.pill {
  display: inline-flex;
  align-items: center;
  height: var(--s-5);
  padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  flex: none;
  background: var(--fill);
  color: var(--text-2);
}
.pill-positive { background: var(--positive-bg); color: var(--positive-ink); }
.pill-negative { background: var(--negative-bg); color: var(--negative-ink); }
.pill-warning { background: var(--warning-bg); color: var(--warning-ink); }
.pill-accent { background: var(--accent-soft); color: var(--accent); }

.count {
  min-width: var(--s-5);
  height: var(--s-5);
  padding: 0 calc(var(--s-2) - 2px);
  border-radius: var(--r-full);
  background: var(--negative-fill);
  color: var(--on-accent);
  font-size: var(--fs-12);
  line-height: var(--s-5);
  font-weight: var(--fw-medium);
  text-align: center;
  flex: none;
}

.avatar {
  width: var(--s-8);
  height: var(--s-8);
  border-radius: var(--r-full);
  background: var(--fill);
  color: var(--text-2);
  display: grid;
  place-items: center;
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  flex: none;
}
@media (max-width: 743px) { .avatar { width: var(--s-10); height: var(--s-10); font-size: var(--fs-14); } }

/* =========================================================== Key-value list (inside drawers) */

.kv { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.kv dt, .kv dd { padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.kv dt { color: var(--text-2); }
.kv dd { text-align: right; overflow-wrap: anywhere; }
.kv dt:first-of-type, .kv dt:first-of-type + dd { border-top: 0; }

/* =========================================================== Notice (inline, never a ground) */

.notice {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--fill-hover);
  color: var(--text-2);
}
.notice .icon { color: var(--text-2); }
.notice .btn { margin-left: auto; }

/* =========================================================== Drawer
 * One component, two shapes: a right-hand panel on desktop and tablet, a bottom sheet on the phone.
 * Markup: <dialog class="drawer"><div class="drawer-panel">…</div></dialog>, opened with showModal().
 * The page never opens popovers or centred modals: details, forms, filters and confirmations all
 * open here. A second level pushes inside the same drawer (back chevron), never a second drawer. */

.drawer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
}
.drawer::backdrop { background: var(--scrim); opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
.drawer.is-open::backdrop { opacity: 1; }
.drawer-panel {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  bottom: var(--s-2);
  width: min(var(--drawer-w), calc(100% - var(--s-4)));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-float);
  transform: translateX(calc(100% + var(--s-4)));
  transition: transform var(--dur-3) var(--ease-out);
  overflow: hidden;
}
.drawer.is-wide .drawer-panel { width: min(var(--drawer-w-wide), calc(100% - var(--s-4))); }
.drawer.is-lg .drawer-panel { width: min(var(--drawer-w-lg), calc(100% - var(--s-4))); }
.drawer.is-xl .drawer-panel { width: min(var(--drawer-w-xl), calc(100% - var(--s-4))); }
/* Editors in lg/xl drawers: a main column and a side column, one column below 1024px. */
.drawer-columns { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-6); align-items: start; }
.drawer-columns > * { min-width: 0; }
@media (max-width: 1023px) { .drawer-columns { grid-template-columns: minmax(0, 1fr); } }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-grabber { display: none; }
.drawer-page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.drawer-page[hidden] { display: none; }
.drawer-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: calc(var(--s-12) + var(--s-4));
  padding: var(--s-4) var(--s-4) var(--s-3) var(--s-6);
}
.drawer-title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-22);
  line-height: var(--lh-22);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.drawer-sub { display: block; color: var(--text-2); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-regular); letter-spacing: 0; margin-top: 2px; }
.drawer-back { margin-left: calc(-1 * var(--s-3)); }
/* The close button always sits at the far right, whether the title is a bare heading or wrapped with a subtitle. */
.drawer-head > :not(button):not(.btn):not(.drawer-grabber) { flex: 1 1 auto; min-width: 0; }
.drawer-head > button, .drawer-head > .btn { flex: none; }
.drawer-head .drawer-close { margin-left: auto; }
.drawer-body { flex: 1; overflow-y: auto; padding: 0 var(--s-6) var(--s-6); overscroll-behavior: contain; }
.drawer-section + .drawer-section { margin-top: var(--s-6); }
.drawer-section-title { font-size: var(--fs-14); font-weight: var(--fw-bold); margin-bottom: var(--s-2); }
.drawer-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: flex-end;
  padding: var(--s-3) var(--s-6) calc(var(--s-3) + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
/* Footer order: destructive and secondary actions at the start, the one primary action last on the right. */
.drawer-foot .btn-destructive, .drawer-foot .foot-start { margin-right: auto; }
.drawer-foot .btn-destructive + .foot-start, .drawer-foot .foot-start + .foot-start { margin-right: 0; }
.drawer-foot .btn { white-space: nowrap; }
.drawer .message {
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--fill-hover);
  white-space: pre-line;
}

@media (max-width: 743px) {
  .drawer-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(100% - var(--safe-top) - var(--s-3));
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    transform: translateY(100%);
  }
  .drawer.is-medium .drawer-panel { height: 56%; }
  .drawer.is-wide .drawer-panel, .drawer.is-lg .drawer-panel, .drawer.is-xl .drawer-panel { width: 100%; }
  .drawer.is-open .drawer-panel { transform: translateY(var(--drag, 0px)); }
  .drawer.is-dragging .drawer-panel { transition: none; }
  .drawer-grabber {
    display: block;
    width: var(--grabber-w);
    height: var(--grabber-h);
    margin: var(--s-2) auto 0;
    border-radius: var(--r-full);
    background: var(--line-strong);
    flex: none;
  }
  .drawer-head { padding: var(--s-2) var(--s-4) var(--s-2) var(--s-5); min-height: var(--s-12); }
  .drawer-body { padding: 0 var(--s-5) var(--s-6); }
  .drawer-foot { padding: var(--s-3) var(--s-5) calc(var(--s-3) + var(--safe-bottom)); }
  /* Phone: the primary action full width on top, the rest two per row under it. */
  .drawer-foot .btn { flex: 1 1 calc(50% - var(--s-1)); margin-right: 0; }
  .drawer-foot .btn-primary { flex-basis: 100%; order: -1; }
}

/* =========================================================== States */

.state {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  color: var(--text-2);
}
.state .icon { color: var(--text-2); }
.state.is-error .icon { color: var(--negative); }
.state .btn { margin-left: auto; }

.skeleton {
  display: block;
  height: var(--sk-h, var(--lh-14));
  width: var(--sk-w, 100%);
  border-radius: var(--r-xs);
  background: var(--fill);
}

/* =========================================================== Toast (status only; above the tab bar on phone) */

.toast {
  position: fixed;
  left: var(--toast-x, 50%);
  bottom: var(--s-6);
  z-index: var(--z-toast);
  transform: translate(-50%, calc(100% + var(--s-8)));
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-full);
  background: var(--text);
  color: var(--surface);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-float);
  transition: transform var(--dur-3) var(--ease-out);
  white-space: nowrap;
}
.toast.is-shown { transform: translate(-50%, 0); }
/* As a popover the toast drops the browser's popover box (centred, bordered, scrolling) and keeps its own. */
.toast[popover] { inset: auto; left: var(--toast-x, 50%); bottom: var(--s-6); margin: 0; border: 0; overflow: visible; width: auto; height: auto; }
@media (max-width: 743px) {
  .toast, .toast[popover] { bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--s-3)); }
}

/* =========================================================== Small shared pieces (moved in from the mockups) */

.hide-phone { }
@media (max-width: 743px) { .hide-phone { display: none; } }
.page-body { display: flex; flex-direction: column; gap: var(--s-6); }

.logo-sm {
  width: var(--s-8);
  height: var(--s-8);
  border-radius: var(--r-md);
  background: var(--text);
  color: var(--surface);
  display: grid;
  place-items: center;
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  flex: none;
}
.btn-icon.is-logo { background: none; width: auto; height: auto; }

.row-title.is-destructive { color: var(--negative); }
.btn-destructive-fill { background: var(--negative-fill); color: var(--on-accent); }
.btn-destructive-fill:hover { background: var(--negative-fill); filter: brightness(0.92); }
.unread.is-read { visibility: hidden; }
.pos { color: var(--positive); }
.neg { color: var(--text-2); }
.count.is-quiet { background: none; color: var(--text-2); font-weight: var(--fw-regular); }
.nav-alert { margin-left: auto; width: var(--s-2); height: var(--s-2); border-radius: var(--r-full); background: var(--negative); flex: none; }

/* Numbered steps (how they found you, add to Home Screen) */
.steps .step-n {
  width: var(--s-6);
  height: var(--s-6);
  border-radius: var(--r-full);
  background: var(--fill);
  display: grid;
  place-items: center;
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  flex: none;
}

/* Settings-style page: grouped lists in one column */
.settings { display: flex; flex-direction: column; gap: var(--s-8); max-width: var(--settings-max); }
.settings .row .seg { width: 100%; }

/* A problem worth one line on Overview: the negative pair, calm, never a banner */
.notice.is-negative { background: var(--negative-bg); color: var(--negative-ink); text-decoration: none; }
.notice.is-negative .icon { color: var(--negative); }
.notice.is-negative strong { font-weight: var(--fw-medium); }
.notice.is-negative .btn-plain { color: var(--negative-ink); margin-left: auto; }
a.notice:hover { text-decoration: none; }

/* Rows that lead with a grey icon (More list) */
.row.has-icon .row-icon { width: var(--s-8); height: var(--s-8); border-radius: var(--r-md); background: var(--fill); color: var(--text-2); display: grid; place-items: center; flex: none; }
.row.has-icon { --row-rule-inset: calc(var(--s-4) + var(--s-8) + var(--s-3)); }

/* Stat row inside a card body: label over value */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--stat-min), 1fr)); gap: var(--s-4); }
.stat-label { color: var(--text-2); }
.stat-value { font-size: var(--fs-22); line-height: var(--lh-22); font-weight: var(--fw-medium); letter-spacing: var(--tracking-tight); margin-top: var(--s-1); }
.stat-value.dash { color: var(--text-2); }
.stat-note { color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); margin-top: var(--s-1); }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); align-items: start; }
@media (max-width: 1023px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 743px) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* Bar widths as classes: no inline styles under a strict CSP */
.bar i.w-0 { width: 0; } .bar i.w-5 { width: 5%; } .bar i.w-10 { width: 10%; } .bar i.w-15 { width: 15%; }
.bar i.w-20 { width: 20%; } .bar i.w-25 { width: 25%; } .bar i.w-30 { width: 30%; } .bar i.w-35 { width: 35%; }
.bar i.w-40 { width: 40%; } .bar i.w-45 { width: 45%; } .bar i.w-50 { width: 50%; } .bar i.w-55 { width: 55%; }
.bar i.w-60 { width: 60%; } .bar i.w-65 { width: 65%; } .bar i.w-70 { width: 70%; } .bar i.w-75 { width: 75%; }
.bar i.w-80 { width: 80%; } .bar i.w-85 { width: 85%; } .bar i.w-90 { width: 90%; } .bar i.w-95 { width: 95%; }
.bar i.w-100 { width: 100%; }

/* Section row under the title for areas with several sections (iPhone) */
.subnav { display: none; }
@media (max-width: 743px) {
  .subnav:not([hidden]) {
    display: flex;
    gap: var(--s-2);
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 var(--s-4) var(--s-4);
    margin-top: calc(-1 * var(--s-1));
  }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: var(--s-8);
    padding: 0 var(--s-4);
    border-radius: var(--r-full);
    background: var(--fill);
    color: var(--text);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    text-decoration: none;
  }
  .subnav a[aria-current="page"] { background: var(--text); color: var(--surface); }
}

/* The sidebar holds every section: tighten group spacing a little */
.sidebar .nav-group { margin-top: var(--s-3); }

/* A warning worth one line (reviewer notes, pending states): the warning pair, calm */
.notice.is-warning { background: var(--warning-bg); color: var(--warning-ink); }
.notice.is-warning .icon { color: var(--warning); }
.notice.is-warning strong { font-weight: var(--fw-medium); }

/* A count beside a drawer section title */
.drawer-section-title .count-text { color: var(--text-2); font-weight: var(--fw-regular); margin-left: var(--s-1); }

/* Five or more segments do not fit a phone: let the control scroll sideways */
@media (max-width: 743px) {
  .page-actions:has(.seg-scroll) { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  .seg.seg-scroll { display: flex; width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .seg.seg-scroll::-webkit-scrollbar { display: none; }
  .seg.seg-scroll button { flex: none; }
}

/* ---------------------------------------------------------------- combobox (searchable picker, UI.combobox) */
.combobox { position: relative; min-width: 0; }
.combobox-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); height: auto; min-height: var(--field-h); padding: var(--s-1) var(--s-2); cursor: text; }
.combobox-field:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.combobox.is-disabled .combobox-field { opacity: 0.5; cursor: default; }
.combobox-chips { display: contents; }
.combobox-input { flex: 1 1 calc(var(--s-16) * 2); min-width: calc(var(--s-16) * 2); height: calc(var(--field-h) - var(--s-2)); padding: 0 var(--s-1); border: 0; background: none; color: var(--text); font: inherit; outline: none; box-shadow: none; }
.combobox-input::-webkit-search-cancel-button { display: none; }
.combobox-input:focus-visible { box-shadow: none; }
.combobox-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: calc(var(--s-6) + var(--s-1)); padding: 0 2px 0 var(--s-2); border-radius: var(--r-full); background: var(--accent-soft); color: var(--text); font-size: var(--fs-12); line-height: var(--lh-12); }
.combobox-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combobox-chip button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--s-6); height: var(--s-6); padding: 0; border: 0; border-radius: var(--r-full); background: none; color: var(--text-2); cursor: pointer; }
.combobox-chip button:hover { background: var(--fill-hover); color: var(--text); }
.combobox-chip svg { width: var(--s-3); height: var(--s-3); }
.combobox-list { position: absolute; left: 0; right: 0; top: calc(100% + var(--s-1)); z-index: var(--z-sticky); max-height: calc(var(--row-h) * 7); margin: 0; padding: var(--s-1); overflow-y: auto; overscroll-behavior: contain; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-float); }
.combobox-list[hidden] { display: none; }
.combobox-option { display: flex; align-items: center; gap: var(--s-2); min-height: var(--row-h); padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2); border-radius: var(--r-md); cursor: pointer; }
.combobox-option.is-active { background: var(--fill-hover); }
.combobox-check { display: inline-flex; flex: none; width: var(--s-4); color: var(--accent); visibility: hidden; }
.combobox-check svg { width: var(--s-4); height: var(--s-4); }
.combobox-option[aria-selected="true"] .combobox-check { visibility: visible; }
.combobox-option-text { display: flex; flex-direction: column; min-width: 0; }
.combobox-option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combobox-option-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); }
.combobox-note { padding: var(--s-2) var(--s-3); color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); }
/* Phone: the list opens in place under the field (no floating layer over the keyboard or the sheet). */
@media (max-width: 743px) {
  .combobox-list { position: static; margin-top: var(--s-1); max-height: calc(var(--row-h) * 5); box-shadow: none; }
  .combobox-input { font-size: var(--fs-17); line-height: var(--lh-17); }
}
.combobox.opens-up .combobox-list { top: auto; bottom: calc(100% + var(--s-1)); }

/* Confirmations ("Discard changes?", "Delete this date?"): a compact alert in the middle of the window, not a
   full-height drawer for one sentence. The phone keeps its short bottom sheet (data-detent="medium"). */
@media (min-width: 744px) {
  .drawer.is-alert .drawer-panel {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(var(--login-max), calc(100% - var(--s-8)));
    max-height: calc(100% - var(--s-16));
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
  }
  .drawer.is-alert.is-open .drawer-panel { transform: translate(-50%, -50%); opacity: 1; }
  .drawer.is-alert .drawer-body { flex: none; }
}
/* On the phone a confirmation is a bottom sheet as tall as its words and buttons, not half the screen. */
@media (max-width: 743px) {
  .drawer.is-alert .drawer-panel, .drawer.is-alert.is-medium .drawer-panel { height: auto; max-height: calc(100% - var(--safe-top) - var(--s-3)); }
  .drawer.is-alert .drawer-body { flex: none; }
}