/* Linear dark overlay. Loaded after style.css. Tokens copied from linear-app.html.
   Does not edit brand/. Kit variables are re-pointed in style.css :root. */

html.dpt-dark, body.dpt-dark, .dpt-dark {
  background: var(--page);
  color: var(--t1);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -.01em;
}
body {
  font-family: Inter, system-ui, sans-serif;
  background: var(--page);
  color: var(--t1);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
}
h2, .section-title, .cal-head h2, .mine-head h2 {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: none;
}

/* ---- shell: 244px sidebar + inset panel ---- */
.topbar {
  width: 244px;
  flex: none;
  height: 100vh;
  height: 100dvh;
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px;
  margin: 0;
  max-width: none;
  background: var(--page);
  color: var(--t1);
  flex-wrap: nowrap;
  overflow: hidden;
}
.brand {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  margin-bottom: 6px;
  flex: none;
}
.crest { height: 20px; width: 20px; object-fit: contain; border-radius: 4px; }
.ws-name { font-size: 13px; font-weight: 500; color: var(--t1); letter-spacing: -.01em; white-space: nowrap; }
.side-sp { flex: 1; min-height: 8px; }

.shell {
  flex: 1;
  min-width: 0;
  margin: 8px 8px 8px 0;
  background: var(--panel);
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hdr {
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.screen-id { flex: 1; min-width: 0; }
.screen-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: none;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.screen-sub {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t2);
  margin-top: 0;
}
main {
  flex: 1;
  min-height: 0;
  overflow: auto;
  max-width: none;
  margin: 0;
  padding: 8px 16px 16px;
}
.install-wrap { max-width: none; margin: 0; padding: 8px 16px 0; }

/* ---- nav: Linear sidebar items, never a bottom island ---- */
header.topbar nav.dp2-nav,
body > .topbar .dp2-nav {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  left: auto; right: auto; bottom: auto;
  width: auto;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 1px;
  padding: 0 !important;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  overflow: visible;
}
header.topbar nav.dp2-nav.has-fab { right: auto; }
header.topbar nav.dp2-nav a,
header.topbar nav.dp2-nav button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 32px;
  min-height: 32px;
  min-width: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--t2);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: none;
  white-space: nowrap;
}
header.topbar nav.dp2-nav button:hover {
  background: var(--panel);
  color: var(--t1);
  transform: none;
}
header.topbar nav.dp2-nav button.active {
  background: var(--panel);
  color: var(--t1);
}
.tab-ic { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; }

.sync {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  height: 32px;
  font-size: 12px;
  color: var(--t2);
}
.who {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  height: 32px;
  font-size: 12px;
  color: var(--t2);
}
.who label { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--t3); }
.who select {
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--page);
  color: var(--t1);
  font: 500 13px/20px Inter, system-ui, sans-serif;
}

#menu-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--t2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
#menu-btn:hover { color: var(--t1); border-color: var(--line2); background: var(--raised); }
#menu-btn.avatar-btn {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 10px;
  padding: 0;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0;
  background: var(--green-soft);
  border: 0;
  color: var(--green);
  box-shadow: none;
}
#menu-btn.avatar-btn:hover { border-color: transparent; }

.net-chip {
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  background: rgba(226,179,54,.14);
  color: var(--gold);
  border: 0;
}

/* 48px icon rail at 769–1023px. Labels stay clipped (not display:none) so the
   aria-hidden icon is not the button's accessible name. Phone (<=768) is a
   bottom tab bar further down; do not apply the rail there. */
@media (min-width: 769px) and (max-width: 1023px) {
  .topbar { width: 48px; padding: 8px 6px; }
  .brand { justify-content: center; padding: 0; }
  .ws-name { display: none; }
  /* Clip, don't display:none: the icon is aria-hidden, so the span is the button's name. */
  header.topbar nav.dp2-nav button span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .who { display: flex; width: 36px; padding: 0; overflow: hidden; }
  .who label { display: none; }
  .who select { width: 36px; padding: 0 2px; font-size: 10px; }
  header.topbar nav.dp2-nav button,
  header.topbar nav.dp2-nav .ws,
  .sync {
    justify-content: center;
    padding: 0;
  }
  header.topbar nav.dp2-nav button { position: relative; }
  .crest { margin: 0 auto; }
  .sync { padding: 0; height: 32px; justify-content: center; }
}

/* ---- type: overlines vs sentence case ---- */
.section-title,
.done-fold > summary,
.kpi-title,
.kt-h,
.ui-empty h3,
.boot-fail h2,
.install-h,
.allclear .ac-head,
.herostate,
.cal-head h2,
.mine-head h2,
.season-card .sc-head h3,
.rw-m {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -.01em;
}
.section-title {
  font-size: 12px;
  line-height: 16px;
  color: var(--t2);
  letter-spacing: 0;
  margin: 16px 16px 0;
  height: 28px;
  font-weight: 500;
}
.done-fold > summary {
  font-size: 13px;
  line-height: 16px;
  color: var(--t2);
  letter-spacing: 0;
  min-height: 36px;
  height: 36px;
  font-weight: 500;
}
.kpi-title { font-size: 16px; line-height: 24px; color: var(--t1); }
.screen-title, .ui-empty h3, .boot-fail h2 { font-size: 16px; line-height: 24px; }
.herostate { font-size: 16px; line-height: 24px; }

/* 11px overlines — the only uppercase allowed */
.dow,
table.all th,
.ss-lbl,
.herolabel,
.q-label,
.pin-label,
.ms-group .ms-due-l,
.kt-kind,
.who label {
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--t3);
}

.kpi-label,
.goal .g-cad,
.rock-group,
.ms-phase,
.ms-cell .ms-ph,
.more-fields > summary,
.pj-status,
.kpi-chip,
.sc-count,
.stripe-stale,
.ms-late-chip,
.cal-carried,
.day.today .dnum::after {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* ---- buttons: 36px mouse / 44px coarse, r 6, sentence case, inset highlight ---- */
.btn,
.dp2-btn,
.dp3-btn,
.iconbtn,
.cal-nav,
.pchip,
.dg-opt,
.wb-more,
.dp2-sec,
.wb-link,
.toast-undo,
.ms-add,
.ms-done,
.ms-clear,
.install-go,
.wbtease .t-open,
.more-views button,
.rv-tease .t-open,
.hub-act,
.pj-revive,
.acct-out,
.acct-act,
.jumpview {
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--t1);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.dp3-btn--sm {
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
}
.btn:hover,
.dp2-btn:hover,
.dp3-btn:hover,
.iconbtn:hover,
.cal-nav:hover,
.pchip:hover,
.dg-opt:hover,
.wb-more:hover,
.dp2-sec:hover,
.wb-link:hover,
.more-views button:hover,
.wbtease .t-open:hover {
  transform: none;
  background: var(--raised);
  border-color: var(--line2);
  color: var(--t1);
}
.btn.primary,
.dp3-btn--primary,
.dp3-btn--gold,
.pin-gate .btn.primary,
.wbtease .t-open,
.rv-tease .t-open,
.install-go,
.dp2-btn.install-go {
  background: var(--gold);
  border-color: var(--gold-edge);
  color: var(--gold-ink);
}
.btn.primary:hover,
.dp3-btn--primary:hover,
.dp3-btn--gold:hover,
.pin-gate .btn.primary:hover,
.wbtease .t-open:hover,
.install-go:hover {
  background: #D4A62F;
  color: var(--gold-ink);
  border-color: var(--gold-edge);
}
.btn.ghost,
.dp3-btn--ghost,
.dp2-btn {
  background: transparent;
  border-color: var(--line);
  color: var(--t1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.btn.quiet,
.dp3-btn--ghost.acct-out {
  border-color: transparent;
  box-shadow: none;
  color: var(--t2);
}
.iconbtn {
  width: 36px;
  min-width: 36px;
  padding: 0;
}
.mclose {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  top: 6px;
  right: 8px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--t3);
}
.install-close {
  width: 36px;
  height: 36px;
  border-radius: 6px;
}

#fab {
  position: fixed;
  top: 18px;
  right: 24px;
  bottom: auto;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--gold-edge);
  background: var(--gold);
  color: var(--gold-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  z-index: 50;
}
#fab:hover { background: #D4A62F; transform: none; }

/* Mouse chassis is 36px (32px on small / segments). Coarse and phone are a 44px
   floor: grow the control, and keep the 44px overlay for anything that cannot.
   Inputs/selects cannot host ::before, so they grow to 44px. Never size below 44
   inside this block. */
@media (pointer: coarse), (max-width: 768px) {
  .btn, .dp2-btn, .dp3-btn, .dp3-btn--sm, .iconbtn, .cal-nav, .pchip, .dg-opt, .wb-more, .dp2-sec,
  .wb-link, .toast-undo, .ms-add, .ms-done, .ms-clear, .more-views button,
  .kpi-tbtn, .kpi-src .btn, .kt-acts .btn, .kpi-note .btn,
  .season-card .sc-edit, #pe-tasks .iconbtn,
  .pin-gate .btn.primary,
  .install-go, .hub-act, .pj-revive, .acct-out, .acct-act, .jumpview,
  .more-fields > summary, .stale-strip .stale-x {
    position: relative;
    height: 44px;
    min-height: 44px;
  }
  .iconbtn, .mclose, .install-close, #fab, #menu-btn:not(.avatar-btn),
  #pe-tasks .iconbtn, .stale-strip .stale-x {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .btn::before, .dp2-btn::before, .dp3-btn::before, .iconbtn::before, .cal-nav::before,
  .pchip::before, .dg-opt::before, .wb-more::before, .dp2-sec::before,
  .wb-link::before, .toast-undo::before, .ms-add::before, .ms-done::before,
  .ms-clear::before, .more-views button::before, .kpi-tbtn::before,
  .kpi-src .btn::before, .kt-acts .btn::before, .kpi-note .btn::before,
  .season-card .sc-edit::before, #pe-tasks .iconbtn::before,
  .pin-gate .btn.primary::before,
  .mclose::before, #fab::before, #menu-btn:not(.avatar-btn)::before,
  .install-close::before, .install-go::before, .hub-act::before,
  .pj-revive::before, .acct-out::before, .acct-act::before, .jumpview::before,
  .more-fields > summary::before, .stale-strip .stale-x::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  .check:not(.ro)::after {
    width: 44px;
    height: 44px;
  }
}
@media (pointer: coarse), (max-width: 768px) {
  .who select, .filters input, .filters select, .wb-head input,
  .modal input:not([type="checkbox"]):not([type="radio"]), .modal select,
  .hub-cap input, .hub-cap select, .pin-gate input {
    min-height: 44px;
    height: 44px;
    min-width: 44px;
  }
}

/* ---- chips 18×4, segments 6/4 ---- */
.chip, .pill, .kpi-chip, .pj-status, .ms-late-chip, .sc-count, .stripe-stale,
.section-title .count, .done-fold > summary .count, .net-chip {
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pj-status { border-radius: 4px; }
.pchip {
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 6px;
}
.pchip.on, .dg-opt.on, .more-views button.is-here {
  background: var(--raised);
  border-color: var(--line2);
  color: var(--t1);
}
.more-views.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
  background: var(--page);
  max-width: none;
}
.more-views.seg button {
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 4px;
  border: 0;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 13px;
  color: var(--t2);
}
.more-views.seg button.is-here {
  background: var(--raised);
  color: var(--t1);
  box-shadow: none;
  border: 0;
}
.more-views.seg button.is-here:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--t1);
}

/* ---- rows 36px, one line, hover = raised ---- */
.task, .pj-card, .ms-row, .rock, .rv-row, .wb-row.task {
  min-height: 36px;
  height: 36px;
  padding: 0 16px;
  margin: 0;
  gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: background .1s;
}
.task:hover, .pj-card:hover, .ms-row:hover, .rock:hover, .rv-row:hover {
  background: var(--raised);
  border-color: transparent;
  transform: none;
}
.task.leaving { transform: none; opacity: 0; }
.tname, .pj-name, .rv-name, .ms-ev {
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -.01em;
}
button.tmain {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  padding: 0;
}
.tname {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.tmeta, .pj-meta, .rv-meta {
  margin: 0 0 0 auto;
  font-size: 12px;
  line-height: 16px;
  color: var(--t2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.tmeta.tm-row { display: flex; overflow: hidden; }
.tm-row .tmeta-in { margin-left: 0; flex-wrap: nowrap; }
.check {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 6px;
  border: 1px solid var(--line2);
}
.check:not(.ro)::after { width: 36px; height: 36px; border-radius: 6px; }
.check svg { width: 10px; height: 10px; transform: none; }
.task.done .check, .check.on {
  background: var(--green);
  border-color: var(--green);
  color: var(--page);
}

.pj-card { height: auto; min-height: 36px; padding: 8px 16px; }
.pj-bar, .pj-bar i, .bar-track, .bar-fill, .kpi-bar, .kpi-fill, .vs-row .t, .vs-row .t i {
  border-radius: 4px;
}

/* ---- fields ---- */
.filters select, .filters input, .modal input, .modal textarea, .modal select,
.wb-head input, .hub-cap input, .hub-cap select, .hub-cap textarea,
:is(.modal, .hub-cap) :is(input, select) {
  height: 36px;
  min-height: 36px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--page);
  color: var(--t1);
  font: 400 13px/20px Inter, system-ui, sans-serif;
  padding: 0 12px;
  box-shadow: none;
}
.modal textarea, .hub-cap textarea { height: auto; min-height: 70px; padding: 8px; }
.pin-gate input {
  height: 36px;
  min-height: 36px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--page);
  font-size: 16px;
}
.modal input:focus-visible,
.modal select:focus-visible,
.modal textarea:focus-visible,
.filters input:focus-visible,
.filters select:focus-visible,
.who select:focus-visible,
.wb-head input:focus-visible,
.pin-gate input:focus-visible {
  outline: none;
  border-color: var(--line2);
  box-shadow: inset 0 0 0 1px var(--line2);
}
button:focus-visible,
.btn:focus-visible,
.dp2-btn:focus-visible,
.dp3-btn:focus-visible,
a:focus-visible,
summary:focus-visible,
#fab:focus-visible,
#menu-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--line2);
}
.btn.primary:focus-visible,
#fab:focus-visible,
.dp3-btn--gold:focus-visible {
  box-shadow: inset 0 0 0 1px var(--gold-ink);
}

/* ---- dialogs ---- */
.overlay {
  background: rgba(0,0,0,.55);
  padding: 96px 18px 18px;
  place-items: start center;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.modal {
  width: min(480px, 100%);
  background: var(--panel);
  border-radius: 8px;
  border: 0;
  box-shadow: 0 0 0 1px var(--line2), 0 16px 48px rgba(0,0,0,.5);
}
.modal h2 {
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: none;
}
.modal.kt-sheet { width: min(640px, 100%); }
.mact {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- tables, calendar, cards ---- */
table.all {
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}
table.all th {
  height: 28px;
  padding: 0 16px;
  background: transparent;
  border-bottom: 1px solid var(--line);
}
table.all td { padding: 8px 16px; height: 36px; }
table.all tr:hover td { background: var(--raised); }
.day {
  border-radius: 6px;
  background: var(--page);
  border-color: var(--line);
}
.wd { border-radius: 6px; background: var(--page); }
.tile, .goal, .chartcard, .kpi-card, .ss-cell, .wk-hero, .rev-hero,
.install-card, .season-card, .ms-group, .kpi-note, .allclear {
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
}
.allclear {
  background: var(--green-soft);
  color: var(--green);
  box-shadow: none;
}
.tile .big, .ss-num, .kpi-num, .rev-hero .revnum, .ringwrap .ringnum,
.ms-due, .ms-cell b, .pj-prog span, .kt-val, .vs-row b, .wd .n, .acct-id b {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.acct-disc {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 9px;
  font-weight: 500;
  background: var(--green-soft);
  border: 0;
  color: var(--green);
}
button.acct-row { min-height: 36px; padding: 8px; border-radius: 6px; }
button.acct-row:hover { background: var(--raised); }
button.acct-row:focus-visible { box-shadow: inset 0 0 0 1px var(--line2); }

.toast {
  background: var(--raised);
  color: var(--t1);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
}
#toast-root { bottom: 16px; }

.stale-strip { border-radius: 8px; width: auto; margin: 8px 16px 0; }

.pin-gate { color: var(--t1); }

/* Kit class overrides that still leak through */
.dp3-btn { min-height: 36px; border-radius: 6px; font-weight: 500; text-transform: none; }
.dp3-chip, .dp3-badge, .dp3-scorechip { border-radius: 4px; min-height: 18px; }
.dp3-seg { border-radius: 6px; padding: 2px; }
.dp3-seg > * { min-height: 32px; border-radius: 4px; }
.dp-enter { animation: none; }

@media (min-width: 769px) {
  .topbar {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    position: sticky;
    width: 244px;
    height: 100vh;
    height: 100dvh;
    padding: 8px;
    background: var(--page);
  }
  header.topbar nav.dp2-nav {
    grid-column: auto;
    grid-row: auto;
    position: static;
    width: auto;
    background: transparent;
    border: 0;
    gap: 1px;
    padding: 0;
  }
  header.topbar nav.dp2-nav button {
    min-width: 0;
    min-height: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
  }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .topbar { width: 48px; padding: 8px 6px; }
}

body.gated .shell { margin: 8px; }
body.gated .topbar { display: flex; }

/* Phone tier (<=768): the rail leaves the layout. Content is full width. Nav is a
   bottom tab bar. Five destinations already, so no More sheet. */
@media (max-width: 768px) {
  body {
    flex-direction: column;
    align-items: stretch;
  }
  .topbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    position: sticky;
    top: 0;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    overflow: visible;
    grid-template-columns: none;
  }
  .brand {
    justify-content: flex-start;
    padding: 0 8px;
    margin-bottom: 0;
    height: 32px;
  }
  .ws-name { display: block; }
  .crest { margin: 0; }
  .side-sp { min-height: 0; }
  .sync {
    width: auto;
    height: 32px;
    padding: 0 8px;
    justify-content: flex-end;
  }
  .who {
    width: auto;
    padding: 0 8px;
    overflow: visible;
  }
  .shell {
    flex: 1;
    width: 100%;
    min-width: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  body.gated .shell { margin: 0; border-radius: 0; box-shadow: none; }
  .hdr { padding: 0 16px; }
  .install-wrap { padding: 8px 16px 0; }
  main {
    padding: 8px 16px calc(56px + env(safe-area-inset-bottom));
    margin: 0;
  }

  /* Pull the nav out of the header column and pin it as a tab bar. The base
     header.topbar nav.dp2-nav rule uses !important on position/inset/chrome. */
  header.topbar nav.dp2-nav,
  header.topbar nav.dp2-nav.has-fab,
  body > .topbar .dp2-nav {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: calc(48px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    gap: 0;
    padding: 0 0 env(safe-area-inset-bottom) !important;
    margin: 0;
    background: var(--dp4-tabbar, #0A0A0B) !important;
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 50;
    overflow: visible;
  }
  header.topbar nav.dp2-nav a,
  header.topbar nav.dp2-nav button {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 48px;
    padding: 6px 2px;
    border-radius: 0;
    background: transparent;
    color: var(--t2);
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
  }
  header.topbar nav.dp2-nav button:hover {
    background: transparent;
    color: var(--t1);
  }
  header.topbar nav.dp2-nav button.active {
    background: transparent;
    color: var(--t1);
  }
  header.topbar nav.dp2-nav button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--line2);
  }
  /* Undo the rail clip so the 11px caps label is visible again. */
  header.topbar nav.dp2-nav button span {
    position: static;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: auto;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #fab { top: 18px; right: 16px; bottom: auto; }
  #toast-root { bottom: calc(56px + env(safe-area-inset-bottom)); }
}

.num, .kpi-num, .ss-num, .tile .big, table.all td, .tmeta, .pj-prog span {
  font-variant-numeric: tabular-nums;
}

.pin-gate .btn.primary { min-height: 36px; height: 36px; border-radius: 6px; }
.ms-group > summary { min-height: 36px; padding: 0 16px; }
button.acct-row { min-height: 36px; }
.more-fields > summary { min-height: 36px; text-transform: none; letter-spacing: 0; font-size: 13px; }

/* Last word: 36px/32px restatements above must not beat the 44px coarse/phone floor. */
@media (pointer: coarse), (max-width: 768px) {
  .btn, .dp2-btn, .dp3-btn, .dp3-btn--sm, .iconbtn, .cal-nav, .pchip, .dg-opt, .wb-more, .dp2-sec,
  .wb-link, .toast-undo, .ms-add, .ms-done, .ms-clear, .more-views button, .more-views.seg button,
  .kpi-tbtn, .kpi-src .btn, .kt-acts .btn, .kpi-note .btn,
  .season-card .sc-edit, #pe-tasks .iconbtn, .pin-gate .btn.primary,
  .install-go, .hub-act, .pj-revive, .acct-out, .acct-act, .jumpview,
  .more-fields > summary, .stale-strip .stale-x, .dp3-seg > *,
  .done-fold > summary {
    height: 44px;
    min-height: 44px;
  }
  .iconbtn, .mclose, .install-close, #fab, #menu-btn:not(.avatar-btn),
  #pe-tasks .iconbtn, .stale-strip .stale-x {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .who select, .filters input, .filters select, .wb-head input,
  .modal input:not([type="checkbox"]):not([type="radio"]), .modal select,
  .hub-cap input, .hub-cap select, .pin-gate input,
  :is(.modal, .hub-cap) :is(input, select) {
    min-height: 44px;
    height: 44px;
  }
}