/* Icecreek Desk.
   Layout: a fixed sidebar (obligations, projects, you) beside one working canvas.
   Monochrome: ink is the action colour; colour is reserved for state (late, due, filed).
   Inter for reading, Geist Mono for labels and figures.
   Choreography: phone (<600) one column, drawer nav, content first;
   tablet (600-1179) icon rail, report and comments switch in place;
   desktop (1180-1679) rail or full sidebar, report beside comments;
   wide (1680+) extra rail and two-up pages; ultrawide (2400+) three-up. */

:root {
  --frame: #e8e8e6;
  --canvas: #ffffff;
  --side: #f5f5f4;
  --card: #ffffff;
  --well: #f5f5f4;
  --ink: #111111;
  --ink-2: #3b3b3b;
  --muted: #6e6e6c;
  --faint: #a3a3a0;
  --line: #e7e7e5;
  --line-2: #d6d6d3;
  --act: #161616;
  --act-ink: #ffffff;
  --dot-off: #efefed;
  --dot-mid: #cfcfcc;
  --focus: #5b5b58;

  --late: #c8321f;
  --late-bg: #fdf0ee;
  --due: #b86e00;
  --due-bg: #fdf5e6;
  --due-soft: #e3b35c;
  --ok: #18804a;
  --ok-bg: #ecf7f0;
  --run: #2b5fc7;
  --run-bg: #eef3fd;

  --shadow: 0 1px 2px rgba(17, 17, 17, 0.05);
  --pop: 0 12px 32px rgba(17, 17, 17, 0.14);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r: 12px;
  --r-sm: 8px;
  --side-w: 264px;
  --rail-w: 76px;
  --gutter: 40px;
  --head-gap: 32px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --frame: #0a0a0a;
    --canvas: #111111;
    --side: #0d0d0d;
    --card: #161616;
    --well: #1c1c1c;
    --ink: #ededec;
    --ink-2: #cfcfcd;
    --muted: #9a9a97;
    --faint: #6a6a67;
    --line: #262626;
    --line-2: #343433;
    --act: #ededec;
    --act-ink: #111111;
    --dot-off: #1f1f1f;
    --dot-mid: #4a4a48;
    --focus: #bdbdba;
    --late: #ff7b67;
    --late-bg: #341612;
    --due: #f2b04a;
    --due-bg: #31230b;
    --due-soft: #8a6a2a;
    --due-soft: #8a6a2a;
    --ok: #5fd08f;
    --ok-bg: #0f2b1c;
    --run: #86a9ff;
    --run-bg: #16213b;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --pop: 0 12px 32px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --frame: #0a0a0a;
  --canvas: #111111;
  --side: #0d0d0d;
  --card: #161616;
  --well: #1c1c1c;
  --ink: #ededec;
  --ink-2: #cfcfcd;
  --muted: #9a9a97;
  --faint: #6a6a67;
  --line: #262626;
  --line-2: #343433;
  --act: #ededec;
  --act-ink: #111111;
  --dot-off: #1f1f1f;
  --dot-mid: #4a4a48;
  --focus: #bdbdba;
  --late: #ff7b67;
  --late-bg: #341612;
  --due: #f2b04a;
  --due-bg: #31230b;
  --ok: #5fd08f;
  --ok-bg: #0f2b1c;
  --run: #86a9ff;
  --run-bg: #16213b;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --pop: 0 12px 32px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
#app {
  height: 100%;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 15px / 1.55 var(--sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
[hidden] {
  display: none !important;
}
img {
  max-width: 100%;
}
a {
  color: inherit;
}
h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}
p {
  margin: 0;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}
.mono,
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.label {
  font: 500 12px / 1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.muted {
  color: var(--muted);
}
.stack {
  display: grid;
  gap: 16px;
}

/* ── Buttons & fields ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font: 500 14px / 1 var(--sans);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow);
}
.btn:hover {
  background: var(--well);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-dark {
  background: var(--act);
  border-color: var(--act);
  color: var(--act-ink);
}
.btn-dark:hover {
  background: var(--act);
  opacity: 0.88;
}
.btn-ghost {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--ink-2);
}
.btn-ghost:hover {
  background: var(--well);
}
.btn-sm {
  height: 32px;
  padding: 0 11px;
  font-size: 13.5px;
}
.btn-block {
  width: 100%;
}
.kbd {
  font: 500 11px / 1 var(--mono);
  padding: 3px 5px;
  border: 1px solid currentColor;
  border-radius: 4px;
  opacity: 0.6;
}
.field {
  display: grid;
  gap: 7px;
}
.field label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
}
.input,
.textarea,
.select {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font: 15px / 1.5 var(--sans);
  padding: 9px 12px;
}
.textarea {
  resize: vertical;
  min-height: 96px;
}
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--ink-2);
  box-shadow: 0 0 0 3px var(--well);
}
.hint {
  font-size: 13px;
  color: var(--muted);
}
.error-text {
  font-size: 13.5px;
  color: var(--late);
}

/* ── Status pills (outlined, with a dot, as in a ledger) ──────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--card);
  font: 500 13px / 1 var(--sans);
  color: var(--ink-2);
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
}
.pill-late {
  color: var(--late);
  border-color: color-mix(in srgb, var(--late) 30%, var(--line-2));
}
.pill-late::before {
  background: var(--late);
}
.pill-due::before {
  background: var(--due);
}
.pill-ok {
  color: var(--ok);
}
.pill-ok::before {
  background: var(--ok);
}
.pill-run {
  color: var(--run);
}
.pill-run::before {
  background: var(--run);
  animation: pulse 1.6s ease-in-out infinite;
}
.pill-quiet {
  color: var(--faint);
}
@keyframes pulse {
  50% {
    opacity: 0.25;
  }
}
.ref {
  font: 500 13px / 1 var(--mono);
  color: var(--muted);
}
.proj-tag {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--well);
  font: 500 12.5px / 1 var(--mono);
  color: var(--ink-2);
}

/* ── App frame: sidebar + canvas ──────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  min-height: 100%;
}
.side {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  background: var(--side);
  border-right: 1px solid var(--line);
  overflow-y: auto;
}
.workspace {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--shadow);
  text-decoration: none;
}
.workspace .mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 30px;
  line-height: 1;
  flex: none;
}
.workspace .ws-text {
  display: grid;
  min-width: 0;
}
.workspace .ws-kicker {
  font-size: 12.5px;
  color: var(--muted);
}
.workspace .ws-logo {
  display: block;
  color: var(--ink);
}
.workspace .ws-logo svg {
  display: block;
  height: 14px;
  width: auto;
  margin-top: 3px;
}
.workspace .ws-name {
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-group {
  display: grid;
  gap: 2px;
}
.nav-title {
  font-size: 13px;
  color: var(--muted);
  padding: 0 10px 6px;
}
.nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 15px;
}
.nav a:hover {
  background: var(--well);
}
.nav a[aria-current="page"] {
  background: var(--card);
  border-color: var(--line-2);
  color: var(--ink);
  font-weight: 500;
  box-shadow: var(--shadow);
}
.nav svg {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav .count {
  margin-left: auto;
  font: 500 12px / 1 var(--mono);
  color: var(--muted);
}
.nav .count.alarm {
  color: var(--late);
}
.side-rule {
  border: 0;
  border-top: 1px solid var(--line-2);
  margin: 0 4px;
}
.side-spacer {
  flex: 1;
}
.runner-line {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--muted);
}
.runner-line .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
  flex: none;
}
.runner-line.on .dot {
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-bg);
}
.me {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--card);
  text-decoration: none;
  box-shadow: var(--shadow);
}
.me .who {
  display: grid;
  min-width: 0;
}
.me .who b {
  font-weight: 600;
  font-size: 14.5px;
}
.me .who span {
  font-size: 12.5px;
  color: var(--muted);
}
.avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--well);
  border: 1px solid var(--line-2);
  font: 600 13px / 1 var(--mono);
  color: var(--ink-2);
  flex: none;
}

.canvas {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.crumbbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 64px;
  padding-left: var(--gutter);
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--muted);
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  background: var(--canvas);
  z-index: 10;
}
.crumbbar a {
  text-decoration: none;
  color: var(--muted);
}
.crumbbar a:hover {
  color: var(--ink);
}
.crumbbar .here {
  color: var(--ink);
  font-weight: 500;
}
.crumbbar .sep {
  color: var(--faint);
}
.crumbbar .menu-btn {
  display: none;
}
.content {
  padding-block: 44px 96px;
  padding-left: var(--gutter);
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  max-width: 1600px;
  width: 100%;
  margin-inline: auto;
}
.content-narrow {
  max-width: 980px;
}
.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 24px;
  flex-wrap: wrap;
  margin-bottom: var(--head-gap);
}
.head h1 {
  font: 600 32px / 1.15 var(--sans);
  letter-spacing: -0.022em;
}
.head .sub {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15.5px;
}
.meta-row {
  display: flex;
  align-items: center;
  gap: 8px 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--muted);
}
.meta-row .late {
  color: var(--late);
  font-weight: 500;
}
.meta-row .dotsep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--faint);
}
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Cards ────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.well {
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: calc(var(--r) + 4px);
  padding: 6px;
  display: grid;
  gap: 6px;
  min-width: 0;
}
.well > * {
  min-width: 0;
}
.well-head .seg {
  max-width: 100%;
  overflow-x: auto;
}
.well-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 8px;
  flex-wrap: wrap;
}
.pad {
  padding: 20px 22px;
}

/* Stat cards: label, big figure, mini bars, footer line */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}
.stats.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stat {
  display: grid;
  gap: 0;
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: calc(var(--r) + 4px);
  padding: 5px;
}
.stat-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  min-height: 112px;
}
.stat-top .label {
  grid-column: 1 / -1;
}
.stat-fig {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.stat-fig .big {
  font: 600 30px / 1.1 var(--mono);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-fig .big.alarm {
  color: var(--late);
}
.stat-fig .unit {
  font-size: 14px;
  color: var(--muted);
}
.stat-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 13px 6px;
  font-size: 13px;
  color: var(--muted);
}
.stat-foot .up {
  color: var(--ok);
  font-family: var(--mono);
}
.stat-foot .down {
  color: var(--late);
  font-family: var(--mono);
}
.spark {
  display: block;
  height: 44px;
  width: auto;
}

/* ── Table (obligations) ──────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
}
table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.grid th {
  text-align: left;
  font: 500 12px / 1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  background: var(--card);
  white-space: nowrap;
}
.grid td {
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.grid tr:last-child td {
  border-bottom: 0;
}
.grid tbody tr:hover td {
  background: color-mix(in srgb, var(--well) 60%, transparent);
}
.grid .t-title {
  font-weight: 500;
  color: var(--ink);
}
.grid .t-meta {
  overflow-wrap: anywhere;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.grid .t-date {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.grid .t-rel {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.grid .t-rel.late {
  color: var(--late);
  font-weight: 500;
}
.grid .t-act {
  text-align: right;
  white-space: nowrap;
}
.grid tr.filed td {
  color: var(--muted);
}
.grid tr.filed .t-title {
  color: var(--ink-2);
}
.seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 10px;
  background: var(--well);
  border: 1px solid var(--line);
}
.seg button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: 500 14px / 1 var(--sans);
  padding: 8px 13px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.seg button[aria-pressed="true"] {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: var(--shadow);
}
.seg .n {
  font: 500 12px / 1 var(--mono);
  margin-left: 5px;
  color: var(--faint);
}
.empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--muted);
}

/* ── Project page: big chart + side list ──────────────────────────── */
/* Same three columns and gap as the stat cards above, so both rows line up:
   the chart takes the first two, the obligations list the third. */
.board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.board > :first-child {
  grid-column: span 2;
}
.chart-card {
  padding: 18px 22px 20px;
}
.chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.chart-head .total {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.chart-head .total b {
  font: 600 28px / 1.1 var(--mono);
  font-variant-numeric: tabular-nums;
}
.legend {
  display: flex;
  gap: 16px;
  font: 500 12px / 1 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.legend span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  margin-right: 7px;
  vertical-align: 1px;
}
.legend .est::before {
  background: var(--dot-mid);
}
.legend .ref::before {
  width: 12px;
  height: 0;
  border-top: 1px dashed var(--late);
  border-radius: 0;
  background: none;
}
.chart {
  width: 100%;
  height: auto;
  display: block;
}
.chart text {
  font-family: var(--mono);
  font-size: 11.5px;
  fill: var(--muted);
}
.chart .axis-now {
  fill: var(--ink);
  font-weight: 600;
}
.source-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}
.mini-list {
  display: grid;
}
.mini-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.mini-row:last-child {
  border-bottom: 0;
}
.mini-row:hover {
  background: var(--well);
}
.mini-row .t {
  font-weight: 500;
  font-size: 14.5px;
}
.mini-row .m {
  font-size: 13px;
  color: var(--muted);
  font-family: var(--mono);
}

/* ── Notices ──────────────────────────────────────────────────────── */
.notice {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--card);
  font-size: 14.5px;
}
.notice.warn {
  background: var(--due-bg);
  border-color: color-mix(in srgb, var(--due) 30%, var(--line));
}
.notice.bad {
  background: var(--late-bg);
  border-color: color-mix(in srgb, var(--late) 30%, var(--line));
}
.notice.good {
  background: var(--ok-bg);
  border-color: color-mix(in srgb, var(--ok) 30%, var(--line));
}
.notice.run {
  background: var(--run-bg);
  border-color: color-mix(in srgb, var(--run) 30%, var(--line));
}
.notice b {
  font-weight: 600;
}
.path {
  font: 13px / 1.5 var(--mono);
  overflow-wrap: anywhere;
}

/* ── Start ────────────────────────────────────────────────────────── */
.start-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  margin: 0;
}
.fact {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.fact dt {
  order: -1;
}
.fact dd {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.steps {
  list-style: none;
  margin: 0;
  padding: 22px 24px;
  display: grid;
  gap: 18px;
  counter-reset: s;
}
.steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: first baseline;
  counter-increment: s;
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font: 500 12.5px / 1.4 var(--mono);
  color: var(--muted);
}
.steps strong {
  display: block;
  font-weight: 600;
}
.steps span {
  font-size: 14px;
  color: var(--muted);
}

/* ── Draft review ─────────────────────────────────────────────────── */
.versions {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 16px;
}
.versions button {
  display: grid;
  gap: 2px;
  text-align: left;
  min-width: 92px;
  border: 1px solid var(--line-2);
  background: var(--card);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  cursor: pointer;
  color: var(--muted);
  font: 12.5px / 1.2 var(--sans);
}
.versions button b {
  font: 600 14px / 1.2 var(--mono);
  color: var(--ink);
}
.versions button[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 16px;
  align-items: start;
}
.sheets {
  display: grid;
  gap: 20px;
  justify-items: center;
  padding: 20px;
  min-width: 0;
}
.sheet {
  position: relative;
  width: min(100%, 780px);
  aspect-ratio: 210 / 297;
  background: #fff;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px var(--line-2),
    0 6px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin: 0;
}
.sheet img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sheet-tab {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
}
.sheet-no {
  font: 500 12px / 1 var(--mono);
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(17, 17, 17, 0.78);
  color: #fff;
}
.pin-btn {
  opacity: 0;
  border: 0;
  border-radius: 6px;
  padding: 6px 9px;
  background: #111;
  color: #fff;
  font: 500 12.5px / 1 var(--sans);
  cursor: pointer;
}
.sheet:hover .pin-btn,
.pin-btn:focus-visible {
  opacity: 1;
}
.sheet-flag {
  position: absolute;
  top: 10px;
  left: 10px;
  font: 500 12px / 1 var(--sans);
  padding: 6px 9px;
  border-radius: 6px;
  background: #fdf5e6;
  color: #8a5200;
}
.panel {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.tabs {
  display: flex;
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid var(--line);
}
.tabs button {
  flex: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  background: none;
  border-radius: 8px;
  padding: 9px 8px;
  font: 500 14px / 1 var(--sans);
  color: var(--muted);
  cursor: pointer;
}
.tabs button[aria-selected="true"] {
  background: var(--well);
  color: var(--ink);
  border-color: var(--line);
}
.tabs .n {
  font: 500 12px / 1 var(--mono);
  margin-left: 4px;
}
.composer {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}
.composer-row {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.composer .select {
  width: auto;
  padding: 7px 10px;
  font-size: 14px;
}
.panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.note {
  display: grid;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--card);
}
.note.unsent {
  border-color: var(--ink);
}
.note-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.note-top .who {
  color: var(--ink);
  font-weight: 600;
}
.note-top .grow {
  flex: 1;
}
.page-link {
  font: 500 12px / 1 var(--mono);
  padding: 5px 7px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
}
.page-link:hover {
  border-color: var(--ink);
}
.note-body {
  font-size: 15px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.answer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding-top: 9px;
  border-top: 1px dashed var(--line-2);
  font-size: 14px;
  color: var(--ink-2);
}
.del {
  justify-self: start;
  border: 0;
  background: none;
  padding: 0;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.del:hover {
  color: var(--late);
}
.prose {
  display: grid;
  gap: 9px;
  font-size: 15px;
}
.prose h4 {
  margin: 6px 0 0;
  font: 500 12px / 1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.prose ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.prose code {
  font: 13px var(--mono);
  background: var(--well);
  padding: 1px 5px;
  border-radius: 4px;
}
.track {
  list-style: none;
  margin: 0;
  padding: 0;
}
.track li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.track li:last-child {
  border-bottom: 0;
}
.track .mark {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
}
.track li.done {
  color: var(--ink-2);
}
.track li.done .mark {
  background: var(--ink);
  border-color: var(--ink);
}
.track li.now {
  color: var(--ink);
  font-weight: 600;
}
.track li.now .mark {
  border-color: var(--run);
  animation: pulse 1.6s ease-in-out infinite;
}
.track time {
  font: 12.5px var(--mono);
  color: var(--muted);
  font-weight: 400;
}
.ticker {
  font: 13.5px / 1.5 var(--mono);
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  overflow-wrap: anywhere;
}
.confirm {
  display: grid;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--ink);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--pop);
}
.confirm h3 {
  font: 600 18px / 1.3 var(--sans);
}
.blank {
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 64px 24px;
  text-align: center;
  color: var(--muted);
}

/* ── Login ────────────────────────────────────────────────────────── */
/* Same grammar as the signed-in Desk: canvas, a head (title + sub), then a
   well with a mono label row around a card. One calm column, centred. */
.login {
  min-height: 100%;
  display: grid;
  place-items: center;
  background: var(--canvas);
  padding-top: max(40px, env(safe-area-inset-top, 0px));
  padding-bottom: max(32px, env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.login-col {
  width: 100%;
  max-width: 420px;
  display: grid;
  gap: 36px;
}
.login-brand {
  display: inline-flex;
  justify-self: start;
  color: var(--ink);
  text-decoration: none;
}
.login-brand svg {
  display: block;
  height: 15px;
  width: auto;
}
.login-body {
  display: grid;
  gap: 24px;
  animation: rise-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.login-head {
  display: grid;
  gap: 10px;
}
.login-head h1 {
  font: 600 32px / 1.15 var(--sans);
  letter-spacing: -0.022em;
}
.login-sub {
  color: var(--muted);
  font-size: 15.5px;
}
.login-email {
  color: var(--ink);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.login-well-head {
  padding: 8px 12px 6px;
}
.login-step {
  font-size: 13px;
  color: var(--muted);
}
.login-card {
  padding: 20px;
}
.login-form {
  display: grid;
  gap: 16px;
}
.login-input {
  height: 44px;
}
.login-input[aria-invalid="true"] {
  border-color: var(--late);
}
.login-btn {
  height: 44px;
  font-size: 15px;
}
.login-error {
  margin-top: -4px;
}
.login-alt {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: -6px -10px -8px;
  flex-wrap: wrap;
}
.login-link {
  height: 44px;
  padding: 0 10px;
  color: var(--muted);
  font-size: 14px;
}
.login-link:hover {
  color: var(--ink);
}
.login-link:disabled {
  opacity: 1;
  color: var(--faint);
  background: transparent;
}
.login-note:empty {
  display: none;
}
.login-note {
  color: var(--ok);
  margin-top: -6px;
}

/* The code: one real input (paste, autofill, one-time-code) under six cells. */
.login-code {
  position: relative;
}
.login-cells {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.login-cell {
  display: grid;
  place-items: center;
  height: 56px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--card);
  font: 600 24px / 1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition:
    border-color 0.12s,
    box-shadow 0.12s,
    background 0.12s;
}
.login-cell.is-filled {
  background: var(--well);
}
.login-cell.is-active {
  border-color: var(--ink-2);
  box-shadow: 0 0 0 3px var(--well);
}
.login-cell.is-active:not(.is-filled)::after {
  content: "";
  width: 1.5px;
  height: 24px;
  background: var(--ink);
  animation: login-caret 1s steps(1) infinite;
}
@keyframes login-caret {
  50% {
    opacity: 0;
  }
}
.login-code.is-invalid .login-cell {
  border-color: var(--late);
}
.login-code-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px; /* no iOS zoom on focus */
  letter-spacing: 0;
  outline: none;
  opacity: 0.01;
  cursor: text;
}
.login-code-input:focus-visible {
  outline: none;
}
.login-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.login-foot-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--faint);
}
@media (max-width: 767px) {
  .login {
    place-items: start center;
    padding-top: max(28px, env(safe-area-inset-top, 0px));
  }
  .login-col {
    gap: 28px;
  }
  .login-head h1 {
    font-size: 26px;
  }
  .login-card {
    padding: 16px;
  }
  .login-cells {
    gap: 6px;
  }
  .login-cell {
    height: 52px;
    font-size: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .login-body {
    animation: none;
  }
  .login-cell.is-active:not(.is-filled)::after {
    animation: none;
  }
}

/* ── Profile ──────────────────────────────────────────────────────── */
.kv {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  margin: 0;
}
.kv dt,
.kv dd {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.kv dt {
  color: var(--muted);
  font-size: 14px;
}
.kv dd {
  font-weight: 500;
  overflow-wrap: anywhere;
}
.kv dt:last-of-type,
.kv dd:last-of-type {
  border-bottom: 0;
}

/* ── Toasts & skeletons ───────────────────────────────────────────── */
#toasts {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 8px;
  z-index: 50;
}
.toast {
  background: var(--act);
  color: var(--act-ink);
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14.5px;
  box-shadow: var(--pop);
  max-width: min(420px, calc(100vw - 32px));
}
.toast.bad {
  background: var(--late);
  color: #fff;
}
.skeleton {
  border-radius: 10px;
  background: linear-gradient(90deg, var(--well), var(--line), var(--well));
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

/* ── Responsive: see the choreography blocks at the end ── */

/* ── Sidebar: collapse toggle and icon rail ───────────────────────── */
.brand-top {
  display: block;
  padding: 10px 10px 2px;
  color: var(--ink);
}
.brand-top svg {
  display: block;
  height: 16px;
  width: auto;
}
.side-foot {
  display: flex;
  padding: 0 4px;
}
.nav a,
.me {
  overflow: hidden;
}
.side-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.side-head .workspace {
  flex: 1;
  min-width: 0;
}
.side-toggle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.side-toggle:hover {
  background: var(--card);
  border-color: var(--line-2);
  color: var(--ink);
}
.side-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav a .txt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Icon rail, chosen on desktop. Everything animates: the column narrows while
   labels fade, the toggle flips; opening plays the same in reverse. */
.app {
  transition: grid-template-columns 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.side {
  overflow-x: hidden;
  transition: padding 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.side-foot {
  justify-content: flex-end;
  transition: padding 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.side-toggle svg {
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.brand-top,
.nav-title {
  max-height: 44px;
  overflow: hidden;
  transition:
    opacity 0.2s 0.1s,
    max-height 0.32s,
    padding 0.32s;
}
.nav a,
.me {
  transition:
    padding 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    gap 0.32s,
    background 0.15s,
    border-color 0.15s;
}
.nav a .txt,
.me .who {
  max-width: 180px;
  transition:
    opacity 0.2s 0.12s,
    max-width 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav .count {
  transition: opacity 0.2s 0.12s;
}
.rail-mode .app {
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
}
.rail-mode .side {
  padding-inline: 12px;
}
.rail-mode .brand-top,
.rail-mode .nav-title {
  opacity: 0;
  max-height: 0;
  padding-block: 0;
  transition:
    opacity 0.12s,
    max-height 0.32s,
    padding 0.32s;
}
.rail-mode .side-foot {
  padding-right: 10px;
}
.rail-mode .side-toggle svg {
  transform: rotate(180deg);
}
.rail-mode .nav a .txt,
.rail-mode .me .who {
  opacity: 0;
  max-width: 0;
  transition:
    opacity 0.12s,
    max-width 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rail-mode .nav a {
  position: relative;
  gap: 0;
  padding-left: 17px;
}
.rail-mode .nav .count {
  position: absolute;
  top: 5px;
  right: 6px;
  margin: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--well);
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  font-size: 10px;
  animation: badge-in 0.25s 0.2s both;
}
.rail-mode .nav .count.alarm {
  background: var(--late);
  border-color: var(--late);
  color: #fff;
}
@keyframes badge-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
.rail-mode .nav-group {
  gap: 6px;
}
.rail-mode .me {
  gap: 0;
  padding: 6px 7px;
  border-color: transparent;
  background: none;
  box-shadow: none;
}

/* ── Review panel ─────────────────────────────────────────────────── */
.rv {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.rv-head {
  display: grid;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
}
.rv-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.rv-title h2 {
  font: 600 18px / 1.2 var(--sans);
  letter-spacing: -0.01em;
}
.rv .seg {
  display: flex;
}
.rv .seg button {
  flex: 1;
}
.compose {
  display: grid;
  gap: 0;
  margin: 16px 18px 4px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
  position: relative;
}
.compose:focus-within {
  border-color: var(--ink-2);
}
.compose textarea {
  border: 0;
  background: transparent;
  resize: none;
  min-height: 92px;
  padding: 14px 16px 6px;
  font: 15.5px / 1.5 var(--sans);
  color: var(--ink);
  border-radius: 12px 12px 0 0;
}
.compose textarea:focus {
  outline: none;
}
.compose-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 10px 14px;
}
.compose-foot .grow {
  flex: 1;
}
.compose-tip {
  font-size: 12.5px;
  color: var(--faint);
}
.pin-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 4px 0 9px;
  border-radius: 7px;
  background: var(--well);
  border: 1px solid var(--line-2);
  font: 500 12.5px / 1 var(--mono);
}
.pin-chip button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.pin-chip button:hover {
  background: var(--line);
  color: var(--ink);
}
.mention-pop {
  position: absolute;
  left: 12px;
  top: 100%;
  margin-top: 6px;
  z-index: 20;
  width: 240px;
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--pop);
  display: grid;
  gap: 2px;
}
.mention-pop button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border: 0;
  border-radius: 7px;
  background: none;
  text-align: left;
  font: 14px / 1.2 var(--sans);
  color: var(--ink);
  cursor: pointer;
}
.mention-pop button[aria-selected="true"],
.mention-pop button:hover {
  background: var(--well);
}
.mention-pop small {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.mention {
  font-weight: 600;
  color: var(--ink);
  background: var(--well);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  padding: 0 4px;
}
.mention.claude {
  color: var(--run);
  background: var(--run-bg);
  border-color: color-mix(in srgb, var(--run) 25%, var(--line));
}
.thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 18px 20px;
  display: grid;
  gap: 4px;
  align-content: start;
}
.thread-label {
  padding: 14px 0 6px;
}
.cmt {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.cmt:last-child {
  border-bottom: 0;
}
.cmt .avatar {
  width: 34px;
  height: 34px;
  font-size: 12px;
}
.cmt-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.cmt-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.cmt-top b {
  color: var(--ink);
  font-weight: 600;
  font-size: 14.5px;
}
.cmt-top .grow {
  flex: 1;
}
.cmt-body {
  font-size: 15.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cmt-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-2);
}
.cmt-status .pill {
  flex: none;
}
.cmt.unsent .cmt-body {
  color: var(--ink);
}
.tag-draft {
  font: 500 11px / 1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 6px;
  border-radius: 5px;
  border: 1px dashed var(--ink-2);
  color: var(--ink-2);
}
.list-num {
  list-style: none;
  margin: 0;
  padding: 6px 18px 20px;
  counter-reset: n;
  display: grid;
}
.list-num li {
  counter-increment: n;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.5;
}
.list-num li:last-child {
  border-bottom: 0;
}
.list-num li::before {
  content: counter(n, decimal-leading-zero);
  font: 500 12.5px / 22px var(--mono);
  color: var(--muted);
}
.list-num h4 {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  font: 500 12px / 1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.list-num li.section {
  counter-increment: none;
  border-bottom: 0;
  padding-bottom: 0;
}
.list-num li.section::before {
  content: none;
}
.list-num code {
  font: 13px var(--mono);
  background: var(--well);
  padding: 1px 5px;
  border-radius: 4px;
}

.only-sm {
  display: none;
}

/* Narrow draft layout: one view at a time, actions pinned to the bottom. */
.view-switch {
  display: none;
}
.action-bar {
  display: none;
}

/* Wide obligations: register plus a rail of what needs attention. */
.ob-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.ob-rail {
  display: none;
}
.charts-3 {
  display: none;
}
.dl-group {
  display: inline-flex;
}

/* ── Motion: sliding segmented thumb, chart fill ──────────────────── */
.seg.has-thumb {
  position: relative;
  isolation: isolate;
}
.seg-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  z-index: -1;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
  transition:
    transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.seg.has-thumb button[aria-pressed="true"] {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.seg.has-thumb button {
  transition: color 0.2s;
}
.chart .cell-on {
  animation: cell-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: var(--d, 0ms);
  transform-box: fill-box;
  transform-origin: center bottom;
}
@keyframes cell-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.6);
  }
}
.chart-swap {
  animation: chart-swap 0.3s ease-out both;
}
@keyframes chart-swap {
  from {
    opacity: 0.4;
  }
}

/* ── Choreography ─────────────────────────────────────────────────── */

@media (hover: none) {
  .pin-btn {
    opacity: 1;
  }
}

/* Wide: extra rails, two-up pages, all three charts at once. */
@media (min-width: 1680px) {
  :root {
    --gutter: 56px;
    --head-gap: 40px;
  }
  .content {
    max-width: 2200px;
  }
  .ob-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
  .ob-rail {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 88px;
  }
  .review {
    grid-template-columns: minmax(0, 1fr) 460px;
  }
  .sheets.multi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
  }
  .sheets.multi .sheet {
    width: 100%;
  }
  .board.has-3 .chart-tabs {
    display: none;
  }
  .board.has-3 .charts-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .board.has-3 .chart-single {
    display: none;
  }
}

/* Ultrawide: three pages side by side, wider review panel. */
@media (min-width: 2400px) {
  :root {
    --gutter: 64px;
  }
  .content {
    max-width: 2480px;
  }
  .review {
    grid-template-columns: minmax(0, 1fr) 520px;
  }
  .sheets.multi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Desktop: the review sits beside the report. */
@media (min-width: 1180px) {
  .review .rv {
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 104px);
  }
}

/* Tablet and below: icon rail, report and comments switch in place. */
@media (max-width: 1179px) {
  :root {
    --gutter: 28px;
    --head-gap: 26px;
  }
  .app {
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
  }
  .side {
    padding-inline: 12px;
  }
  .side-head {
    flex-direction: column;
  }
  .side-toggle {
    display: none;
  }
  .brand-top {
    display: none;
  }
  .workspace .ws-text,
  .nav-title,
  .nav a .txt,
  .me .who,
  .runner-line .rl-text {
    display: none;
  }
  .nav a {
    justify-content: center;
    position: relative;
    padding: 0;
  }
  .nav .count {
    position: absolute;
    top: 5px;
    right: 6px;
    margin: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--well);
    border: 1px solid var(--line-2);
    display: grid;
    place-items: center;
    font-size: 10px;
  }
  .nav .count.alarm {
    background: var(--late);
    border-color: var(--late);
    color: #fff;
  }
  .runner-line {
    justify-content: center;
    padding: 0;
  }
  .me {
    justify-content: center;
    padding: 6px;
    border-color: transparent;
    background: none;
    box-shadow: none;
  }
  .board,
  .review {
    grid-template-columns: minmax(0, 1fr);
  }
  .board > :first-child {
    grid-column: auto;
  }
  .stats,
  .stats.five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .view-switch {
    display: flex;
    position: sticky;
    top: 72px;
    z-index: 5;
    margin-bottom: 16px;
    box-shadow: 0 6px 16px rgba(17, 17, 17, 0.06);
  }
  .view-switch button {
    flex: 1;
  }
  .review[data-view="report"] .rv,
  .review:not([data-view="report"]) .pages-well {
    display: none;
  }
  .rv .rv-head .seg {
    display: none;
  }
  .rv {
    min-height: 60vh;
  }
  .head .actions.desk-only {
    display: none;
  }
  .action-bar {
    display: flex;
    gap: 10px;
    position: sticky;
    bottom: 0;
    z-index: 15;
    margin: 20px calc(-1 * var(--gutter)) -96px;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--canvas) 92%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
  }
  .action-bar .btn {
    flex: 1;
    height: 44px;
  }
  .start-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phone: drawer navigation, register as cards, everything one column. */
@media (max-width: 767px) {
  :root {
    --gutter: 18px;
    --head-gap: 22px;
  }
  /* A collapsed sidebar (rail-mode, remembered per browser) must not keep its two-column
     grid here: the side is a drawer, so the content would land in the 76px rail column. */
  .app,
  .rail-mode .app {
    grid-template-columns: minmax(0, 1fr);
  }
  .rail-mode .side {
    padding-inline: max(16px, env(safe-area-inset-left, 0px)) 16px;
  }
  .side {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(300px, 86vw);
    z-index: 40;
    transform: translateX(-102%);
    transition: transform 0.2s;
    box-shadow: var(--pop);
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px
      calc(16px + env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
  }
  .side .side-head {
    flex-direction: row;
  }
  .side .brand-top {
    display: block;
  }
  .side .workspace {
    display: flex;
    justify-content: flex-start;
    padding: 10px 12px;
    border-color: var(--line-2);
    background: var(--card);
  }
  .side .workspace .ws-text,
  .side .nav-title,
  .side .nav a .txt,
  .side .me .who,
  .side .runner-line .rl-text {
    display: revert;
  }
  .side .nav a {
    justify-content: flex-start;
    padding: 0 10px;
  }
  .side .nav .count {
    position: static;
    margin-left: auto;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 12px;
  }
  .side .nav .count.alarm {
    background: none;
    color: var(--late);
  }
  .side .runner-line {
    justify-content: flex-start;
    padding: 0 10px;
  }
  .side .me {
    justify-content: flex-start;
    padding: 10px 12px;
    border-color: var(--line-2);
    background: var(--card);
  }
  .app.nav-open .side {
    transform: none;
  }
  .scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 35;
  }
  .crumbbar {
    height: 56px;
  }
  .crumbbar .menu-btn {
    display: inline-flex;
  }
  .crumb-path {
    overflow: hidden;
    white-space: nowrap;
  }
  .content {
    padding-block: 26px 96px;
  }
  .head h1 {
    font-size: 26px;
  }
  .view-switch {
    top: 64px;
    overflow-x: auto;
  }
  .view-switch button {
    flex: 1 0 auto;
    padding: 8px 10px;
    font-size: 13.5px;
  }
  .stats {
    gap: 10px;
  }
  .stats.three,
  .stats.five {
    grid-template-columns: minmax(0, 1fr);
  }
  .stats:not(.three) .spark {
    display: none;
  }
  .stat-top {
    min-height: 0;
    padding: 14px;
  }
  .stat-fig .big {
    font-size: 26px;
  }
  .facts,
  .kv {
    grid-template-columns: minmax(0, 1fr);
  }
  .kv dt {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .sheets {
    padding: 10px;
  }
  /* Register rows become cards */
  .grid thead {
    display: none;
  }
  .grid,
  .grid tbody {
    display: block;
  }
  .grid tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title act"
      "due due"
      "status status";
    gap: 6px 12px;
    padding: 16px;
    border-bottom: 1px solid var(--line);
  }
  .grid tr:last-child {
    border-bottom: 0;
  }
  .grid td {
    padding: 0;
    border: 0;
  }
  .grid td.c-due {
    grid-area: due;
    display: flex;
    gap: 10px;
    align-items: baseline;
  }
  .grid td.c-title {
    grid-area: title;
  }
  .grid td.c-act {
    grid-area: act;
  }
  .grid td.c-status {
    grid-area: status;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .grid td.c-proj,
  .grid td.c-draft:empty {
    display: none;
  }
  .grid td.c-draft {
    display: none;
  }
  .only-sm {
    display: inline-flex;
  }
  .grid tbody tr:hover td {
    background: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Clickable rows ───────────────────────────────────────────────── */
.mini-row {
  cursor: pointer;
  transition: background 0.15s ease;
}
.mini-row > .pill {
  justify-self: end;
  align-self: start;
}
.mini-row .go {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: center;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.mini-row .go::after {
  content: " →";
}
.mini-row:hover .go,
.mini-row:focus-visible .go {
  opacity: 1;
  transform: none;
}
@media (hover: none) {
  .mini-row .go {
    opacity: 1;
    transform: none;
    color: var(--muted);
  }
}
tr.row-link {
  cursor: pointer;
}
tr.row-link:hover > td {
  background: var(--well);
}
.well-tools {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Reader: one report, whole screen ─────────────────────────────── */
:root {
  --reader-bg: #2a2a29;
  --reader-bar: #1d1d1c;
  --reader-ink: #f2f2f0;
  --reader-muted: #a8a8a4;
}
.reader {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--reader-bg);
  color: var(--reader-ink);
  z-index: 50;
  animation: reader-in 0.22s ease both;
}
@keyframes reader-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
}
.reader-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    10px max(16px, env(safe-area-inset-left, 0px));
  background: var(--reader-bar);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  min-width: 0;
}
.reader-title {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.reader-title b {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reader-title span {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--reader-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reader-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.reader-count {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--reader-muted);
  min-width: 56px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.reader .btn {
  background: transparent;
  color: var(--reader-ink);
  border-color: rgba(255, 255, 255, 0.18);
}
.reader .btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.reader .btn-dark {
  background: var(--reader-ink);
  color: #111;
  border-color: var(--reader-ink);
}
.reader .btn-dark:hover {
  background: #fff;
}
.reader .seg {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
}
.reader .seg button {
  color: var(--reader-muted);
}
.reader .seg button[aria-pressed="true"] {
  color: #111;
}
.reader .seg-thumb {
  background: var(--reader-ink);
  border-color: var(--reader-ink);
}
.reader-body {
  overflow: auto;
  overscroll-behavior: contain;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 20px;
  padding: 28px max(16px, env(safe-area-inset-right, 0px))
    calc(48px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  outline: none;
}
.reader-body.center {
  align-content: center;
}
.reader-sheet {
  margin: 0;
  width: min(100%, 980px);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  border-radius: 2px;
}
.reader-sheet img {
  display: block;
  width: 100%;
  height: auto;
}
.reader-sheet.skeleton {
  aspect-ratio: 210 / 297;
  background: rgba(255, 255, 255, 0.06);
}
.fit-page .reader-sheet {
  width: auto;
  max-width: 100%;
}
.fit-page .reader-sheet img {
  width: auto;
  max-width: 100%;
  max-height: calc(100dvh - 130px);
}
.reader-note {
  max-width: 460px;
  text-align: center;
  display: grid;
  gap: 8px;
  font-size: 15px;
  line-height: 1.5;
}
.reader-note p {
  margin: 0;
  color: var(--reader-muted);
}
.reader .only-wide {
  display: contents;
}
@media (max-width: 767px) {
  .reader-bar {
    gap: 10px;
  }
  .reader .only-wide {
    display: none;
  }
  /* The status stays as its coloured dot, with the name kept for screen readers. */
  .reader .reader-tools .pill {
    width: 22px;
    height: 22px;
    padding: 0;
    justify-content: center;
    gap: 0;
    font-size: 0;
    border-color: transparent;
    background: transparent;
  }
  .reader .reader-tools .pill::before {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent);
  }
  .reader-body {
    gap: 12px;
    padding-top: 12px;
  }
  .reader-sheet {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  }
}
@media (min-width: 2400px) {
  .reader-sheet {
    width: min(100%, 1280px);
  }
}

/* ── Feedback: every action answers ───────────────────────────────── */
.btn.is-busy {
  pointer-events: none;
  gap: 8px;
}
.btn.is-busy::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
.btn.is-busy:disabled {
  opacity: 1;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.btn.bump {
  animation: bump 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes bump {
  40% {
    transform: scale(1.06);
    box-shadow: 0 0 0 4px var(--well);
  }
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toast-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.toast.out {
  animation: toast-out 0.26s ease both;
}
.toast-ico {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  flex-shrink: 0;
}
.toast.bad .toast-ico {
  background: rgba(255, 255, 255, 0.22);
}
.toast-ico svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.toast-ico path {
  stroke-dasharray: 20;
  animation: draw 0.4s 0.15s ease-out both;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}
@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes draw {
  from {
    stroke-dashoffset: 20;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* A comment lands: slides in and glows once. */
.cmt.fresh {
  animation:
    cmt-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    glow 2s ease-out both;
  border-radius: 10px;
}
@keyframes cmt-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@keyframes glow {
  from {
    background: var(--run-bg);
    box-shadow: 0 0 0 8px var(--run-bg);
  }
  to {
    background: transparent;
    box-shadow: 0 0 0 8px transparent;
  }
}
/* Comments just handed to Claude: their status arrives one after another. */
.cmt.just-sent .cmt-status {
  animation: cmt-in 0.45s calc(var(--i, 0) * 110ms + 150ms) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Status pill changes: a quick pop. */
.pill-morph {
  animation: pill-pop 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes pill-pop {
  0% {
    transform: scale(0.85);
    opacity: 0.3;
  }
  60% {
    transform: scale(1.06);
  }
}

/* Update or filing in flight: four steps that fill. */
.progress-card {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--card);
  padding: 18px 20px 16px;
  display: grid;
  gap: 14px;
  animation: cmt-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.steps-h {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.steps-h li {
  display: grid;
  gap: 8px;
  position: relative;
  color: var(--muted);
  font-size: 13.5px;
}
.steps-h li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 14px;
  right: 0;
  height: 2px;
  background: var(--line-2);
}
.steps-h li:last-child::before {
  display: none;
}
.steps-h li.done::before {
  background: var(--ink);
  transform-origin: left;
  animation: fill-line 0.5s calc(var(--i) * 160ms) ease-out both;
}
.steps-h .mark {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--line-2);
}
.steps-h li.done .mark {
  background: var(--ink);
  border-color: var(--ink);
}
.steps-h li.now .mark {
  border-color: var(--run);
  animation: pulse 1.6s ease-in-out infinite;
}
.steps-h li.done,
.steps-h li.now {
  color: var(--ink);
}
.steps-h li.now .lbl {
  font-weight: 600;
}
@keyframes fill-line {
  from {
    transform: scaleX(0);
  }
}
.progress-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--muted);
}

/* Filed: a drawn check and the way out. */
.celebrate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border-radius: var(--r);
  background: var(--ok-bg);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
  animation: cmt-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.celebrate-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.celebrate-text b {
  font-size: 17px;
}
.celebrate-text > span {
  font-size: 14px;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
/* Filed: the kDrive copy, a quiet row under the filed notice. */
.kcopy {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 6px 16px;
  align-items: start;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  font-size: 14px;
}
.kcopy > .label {
  padding-top: 3px;
}
.kcopy-body {
  display: grid;
  gap: 10px;
  min-width: 0;
  color: var(--ink-2);
}
.kcopy-body > .path {
  font-size: 12.5px;
}
.kcopy-todo {
  margin: 0;
  overflow-wrap: anywhere;
}
.kcopy-todo .path {
  color: var(--ink);
}
.kcopy-open {
  justify-self: start;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kcopy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kcopy-actions:empty {
  display: none;
}
.kcopy-link {
  display: flex;
  gap: 8px;
  max-width: 560px;
}
.kcopy-link .input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 4px 10px;
  font-size: 14px;
}
.kcopy-link .btn {
  flex: none;
}
@media (max-width: 640px) {
  .kcopy {
    grid-template-columns: minmax(0, 1fr);
  }
  .kcopy-link {
    flex-direction: column;
    max-width: none;
  }
  .kcopy-link .input {
    height: 40px;
    font-size: 16px;
  }
}
.check-draw svg {
  display: block;
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--ok);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.check-draw circle {
  stroke-dasharray: 151;
  animation: ring 0.6s ease-out both;
}
.check-draw path {
  stroke-dasharray: 36;
  animation: tick 0.35s 0.5s ease-out both;
}
@keyframes ring {
  from {
    stroke-dashoffset: 151;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes tick {
  from {
    stroke-dashoffset: 36;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Start draft: the form gives way to a confirmation. */
form.sent {
  position: relative;
}
form.sent > :not(.sent-over) {
  opacity: 0.12;
  filter: blur(1px);
  transition:
    opacity 0.3s ease,
    filter 0.3s ease;
}
.sent-over {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
  animation: cmt-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.sent-over .check-draw svg {
  width: 56px;
  height: 56px;
}
.sent-over b {
  font-size: 18px;
}
.sent-over > span:last-child {
  color: var(--muted);
  font-size: 14px;
}

/* Version history: the latest four, older ones behind a chevron. */
.versions button {
  white-space: nowrap;
}
.versions.open {
  flex-wrap: wrap;
  overflow: visible;
}
.versions .more {
  border-style: dashed;
  color: var(--muted);
  position: relative;
  padding-right: 32px;
}
.versions .more b {
  color: var(--ink-2);
}
.versions .more .chev {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
  transition: transform 0.25s ease;
}
.versions .more.open .chev {
  transform: translateY(-50%) rotate(135deg);
}
.versions .more:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.versions button.older {
  background: var(--well);
  animation: ver-in 0.32s calc(var(--i) * 40ms) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes ver-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
}
@media (max-width: 767px) {
  .steps-h {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .steps-h li {
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }
  .steps-h li::before {
    display: none;
  }
  .celebrate {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .celebrate .actions {
    grid-column: 1 / -1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn.bump,
  .cmt.fresh,
  .cmt.just-sent .cmt-status,
  .pill-morph,
  .progress-card,
  .celebrate,
  .versions button.older,
  .toast {
    animation: none;
  }
}

/* Versions: the one being written, and a new one waiting to be opened. */
.versions .ver-next,
.versions .ver-new {
  display: grid;
  gap: 2px;
  min-width: 112px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font: 12.5px / 1.2 var(--sans);
  white-space: nowrap;
  text-align: left;
}
.versions .ver-next {
  border: 1px dashed var(--run);
  color: var(--run);
  background: linear-gradient(90deg, var(--run-bg), var(--card), var(--run-bg));
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
.versions .ver-next b {
  font: 600 14px / 1.2 var(--mono);
}
.versions .ver-new {
  border: 1px solid var(--ink);
  background: var(--act);
  color: var(--act-ink);
  cursor: pointer;
  animation:
    ver-pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    ver-ring 2s 0.5s ease-out infinite;
}
.versions .ver-new b {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 14px / 1.2 var(--mono);
  color: inherit;
}
.versions .ver-new em {
  font: 600 10.5px / 1 var(--mono);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--ok);
  color: #fff;
}
.versions .ver-new span {
  opacity: 0.75;
}
.versions .ver-new:hover {
  transform: translateY(-1px);
}
@keyframes ver-pop {
  from {
    opacity: 0;
    transform: scale(0.9) translateX(-6px);
  }
}
@keyframes ver-ring {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink) 35%, transparent);
  }
  100% {
    box-shadow: 0 0 0 10px transparent;
  }
}
.pages-well.swap-in {
  animation: cmt-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .versions .ver-new,
  .versions .ver-next {
    animation: none;
  }
}

.mini-list.swap-in > * {
  animation: cmt-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.board .mini-list {
  max-height: min(72vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.board .well-head .seg {
  flex-shrink: 0;
}

/* Reader: Word and Excel originals, read only. */
.reader-body.is-file {
  justify-items: stretch;
}
.reader .docx-holder {
  width: 100%;
  display: grid;
  justify-items: center;
}
.reader .docx-holder .docx-wrapper {
  background: transparent;
  padding: 0;
  gap: 20px;
}
.reader .docx-holder .docx-wrapper > section.docx {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  margin-bottom: 20px;
  max-width: 100%;
}
.reader .xl {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  max-width: 1600px;
  justify-self: center;
  height: calc(100dvh - 130px);
  background: #fff;
  color: #111;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.reader .xl-grid {
  overflow: auto;
  min-height: 0;
  background: #fff;
  overscroll-behavior: contain;
}
.reader .xl-sheet {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  font:
    13px / 1.25 "Aptos",
    "Calibri",
    "Inter",
    system-ui,
    sans-serif;
  color: #1f1f1f;
}
.reader .xl-sheet td {
  height: 21px;
  padding: 0 5px;
  border-right: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: bottom;
  background: #fff;
}
.reader .xl-sheet td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Text that runs on over empty neighbours, as in Excel. */
.reader .xl-sheet td.spill {
  overflow: visible;
  position: relative;
  z-index: 1;
}
.reader .xl-sheet td.merged {
  white-space: normal;
  vertical-align: middle;
}
.reader .xl-sheet th {
  font: 500 12px / 1 var(--sans);
  color: #6b6b68;
  background: #f3f3f1;
  border-right: 1px solid #d9d9d6;
  border-bottom: 1px solid #d9d9d6;
  user-select: none;
}
.reader .xl-sheet thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 24px;
  text-align: center;
}
.reader .xl-sheet th.xl-row {
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: center;
  padding: 0 4px;
}
.reader .xl-sheet th.xl-corner {
  left: 0;
  z-index: 4;
}
.reader .xl-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 6px 8px;
  border-top: 1px solid #e3e3e0;
  background: #f4f4f2;
}
.reader .xl-tabs button {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: 6px;
  font: 500 13px var(--sans);
  color: #555;
  cursor: pointer;
  white-space: nowrap;
}
.reader .xl-tabs button[aria-selected="true"] {
  background: #fff;
  color: #111;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Reader actions: icon and label; on phones, icon-only tap targets. */
.reader-tools .act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.reader-tools .act svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .reader .reader-tools .act {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 12px;
  }
  .reader .reader-tools .act .lbl {
    display: none;
  }
  .reader .reader-tools .act svg {
    width: 20px;
    height: 20px;
  }
  .reader .reader-count {
    display: none;
  }
}

/* Chart source: date | company | kDrive link. The working reference is in the title. */
.source-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.source-line > * + *::before {
  content: "|";
  margin: 0 10px;
  color: var(--line-2);
}
.source-line a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.source-line a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Dataroom: Ask, Files, kDrive file reader (preview only until the API exists) ── */

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.head-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.project-body.tab-in > * {
  animation: rise-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Document search: one row per document, names first, then documents that mention it. */
.ds {
  margin-bottom: 28px;
}
.ds-card {
  padding: 18px 20px 16px;
  display: grid;
  gap: 12px;
}
.ds-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ds-scope {
  font: 500 12px / 1.2 var(--mono);
  color: var(--faint);
}
.ds-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 5px 5px 5px 14px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--canvas);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.ds-form:focus-within {
  border-color: var(--ink-2);
  box-shadow: 0 0 0 4px var(--well);
}
.ds-ico svg,
.ds-go svg,
.files-find svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ds-ico {
  display: inline-grid;
  color: var(--muted);
}
.ds-input {
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: 17px / 1.4 var(--sans);
  height: 44px;
  min-width: 0;
  width: 100%;
}
.ds-input::placeholder {
  color: var(--faint);
}
.ds-input::-webkit-search-cancel-button {
  cursor: pointer;
}
.ds-go {
  height: 44px;
  padding: 0 16px;
  border-radius: 9px;
}
.ds-go.is-busy {
  opacity: 0.7;
}
.ds-chips {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ds-try {
  font: 500 12px / 1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  flex-shrink: 0;
}
.ds-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ds-chip {
  min-height: 34px;
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 6px 13px;
  font: 500 13.5px / 1.2 var(--sans);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}
.ds-chip:hover {
  background: var(--well);
  border-color: var(--ink-2);
}
.ds-chip:active {
  transform: scale(0.97);
}
.ds-out {
  display: grid;
  gap: 10px;
  transition: opacity 0.15s ease;
}
.ds-out:empty {
  display: none;
}
.ds-out.is-busy {
  opacity: 0.55;
}
.ds-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 0;
  font-size: 14px;
  color: var(--muted);
}
.ds-spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.7s linear infinite;
}
.ds-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px 0 14px;
  font-size: 14px;
  color: var(--muted);
}
.ds-sum b {
  color: var(--ink);
  font-weight: 600;
}
.ds-results {
  display: grid;
  gap: 18px;
}
.ds-sec {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.ds-sec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}
.ds-count {
  font: 500 11.5px / 1 var(--mono);
  color: var(--faint);
}
.ds-list {
  min-width: 0;
  overflow: hidden;
}
.ds-list.rise > .ds-row,
.ds-empty.rise {
  animation: rise-in 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.ds-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  min-height: 56px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}
.ds-row:last-child {
  border-bottom: 0;
}
a.ds-row:hover {
  background: var(--well);
}
a.ds-row:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.ds-row.no-link {
  cursor: default;
}
.ds-row.no-link .ficon {
  opacity: 0.55;
}
.ds-row.is-skel {
  display: block;
  min-height: 0;
}
.ds-row.is-skel .skeleton {
  display: block;
  height: 34px;
  border-radius: 8px;
}
.ds-txt {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.ds-name {
  font-size: 14.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ds-path {
  font: 12px / 1.4 var(--mono);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-snip {
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ds-row mark {
  background: var(--due-bg);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.ds-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font: 12px / 1.4 var(--mono);
  color: var(--muted);
}
.ds-meta:empty {
  display: none;
}
.ds-meta .warn {
  color: var(--due);
}
.ds-date-m {
  display: none;
}
.ds-date {
  font: 12.5px / 1.4 var(--mono);
  color: var(--muted);
  white-space: nowrap;
  padding-top: 1px;
}
.ds-partial,
.ds-note {
  padding: 0 14px;
  font-size: 13px;
  color: var(--muted);
}
.ds-empty {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  padding: 26px 18px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}
.ds-empty p {
  color: var(--muted);
  font-size: 14px;
}

/* File type marks: a document outline with its kind, or a folder. */
.ficon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--ink-2);
}
.ficon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.ficon b {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 3px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--canvas);
  font: 600 8.5px / 1 var(--mono);
  letter-spacing: 0.03em;
}
.ficon-other b {
  background: var(--card);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.ficon-folder svg {
  fill: var(--well);
  stroke: var(--muted);
}

/* Files tab */
.files-bar {
  align-items: center;
}
.fcrumbs {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 1 1 260px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  font-size: 14.5px;
}
.fcrumbs::-webkit-scrollbar {
  display: none;
}
/* Long paths scroll sideways (kept at the current folder) instead of squeezing names. */
.fcrumbs > * {
  flex-shrink: 0;
}
.fcrumbs button {
  border: 0;
  background: none;
  font: inherit;
  color: var(--muted);
  padding: 5px 7px;
  border-radius: 7px;
  cursor: pointer;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fcrumbs button:hover {
  color: var(--ink);
  background: var(--card);
}
.fcrumbs .here {
  color: var(--ink);
  font-weight: 600;
  padding: 5px 7px;
}
.fcrumbs .sep {
  color: var(--faint);
}
.files-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.files-find {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--muted);
}
.files-find svg {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.files-search {
  width: 240px;
  height: 38px;
  padding-left: 34px;
  font-size: 14.5px;
}
.files-card {
  min-width: 0;
}
.files-head,
.frow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 88px;
  gap: 16px;
  align-items: center;
  padding: 9px 18px;
}
.files-head {
  position: sticky;
  top: 64px;
  z-index: 5;
  padding-block: 11px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r) var(--r) 0 0;
  font: 500 11.5px / 1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.files-head .on {
  color: var(--ink);
}
.files-head .on::after {
  content: " ↓";
}
.files-head .c-size,
.frow .c-size {
  text-align: right;
}
.frow {
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}
.frow:last-child {
  border-bottom: 0;
  border-radius: 0 0 var(--r) var(--r);
}
a.frow:hover {
  background: var(--well);
}
.frow .c-name {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.fname {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.fname b {
  font-size: 14.5px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.frow.is-folder .fname b {
  font-weight: 600;
}
.fpath {
  font: 12px / 1.4 var(--mono);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.fmeta {
  display: none;
}
.frow .c-date,
.frow .c-size {
  font: 13px / 1.2 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
.frow.is-skel {
  display: block;
  padding: 14px 18px;
}
.frow.is-skel .skeleton {
  display: block;
  height: 22px;
}
.files-list.swap-in > .frow {
  animation: rise-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 14ms);
}
.files-empty {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  padding: 48px 18px;
}
.files-empty p {
  color: var(--muted);
  font-size: 14px;
  max-width: 420px;
}
.files-foot {
  padding: 2px 14px 8px;
  font: 12.5px / 1.3 var(--mono);
  color: var(--faint);
}
.files-foot:empty {
  display: none;
}

/* kDrive file reader: PDF pages drawn to canvas, other files as a card. */
/* Block flow, not grid: grid rows ignore the pages' aspect-ratio heights and overlap them. */
.reader-body.is-pdf {
  display: block;
}
.reader-body.is-pdf > .pdf-page {
  margin: 0 auto 20px;
}
.pdf-page {
  position: relative;
  overflow: hidden;
}
.pdf-page canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.pdf-page:not(.drawn) {
  background: linear-gradient(90deg, #fff, #f1f1ef, #fff);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.pdf-page.drawn canvas {
  animation: rise-in 0.3s ease both;
}
.file-card {
  justify-items: center;
  padding: 28px 24px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.file-card b {
  overflow-wrap: anywhere;
}
.file-card-ext {
  display: inline-grid;
  place-items: center;
  min-width: 56px;
  height: 64px;
  padding: 0 10px;
  margin-bottom: 6px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font: 600 13px / 1 var(--mono);
  letter-spacing: 0.06em;
}
.file-card-acts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}

@media (max-width: 767px) {
  .head-tools {
    width: 100%;
  }
  .head-tools .tab-seg {
    flex: 1;
  }
  .head-tools .tab-seg button {
    flex: 1;
  }
  .head .head-all {
    display: none;
  }
  .ds {
    margin-bottom: 18px;
  }
  .ds-card {
    padding: 14px;
  }
  .ds-form {
    padding-left: 12px;
    gap: 8px;
  }
  .ds-input {
    font-size: 16px;
  }
  .ds-go {
    width: 44px;
    padding: 0;
  }
  .ds-go .lbl {
    display: none;
  }
  .ds-chips {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .ds-chip {
    min-height: 44px;
  }
  .ds-row {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 12px 14px;
  }
  .ds-date {
    display: none;
  }
  .ds-date-m {
    display: inline;
  }
  .files-tools {
    width: 100%;
  }
  .files-find {
    flex: 1;
  }
  .files-search {
    width: 100%;
  }
  /* Rows become cards. */
  .files-card {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .files-head {
    display: none;
  }
  .files-list {
    display: grid;
    gap: 6px;
  }
  .frow,
  .frow:last-child {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    box-shadow: var(--shadow);
  }
  .frow .c-date,
  .frow .c-size {
    display: none;
  }
  .fmeta {
    display: block;
    font: 12px / 1.4 var(--mono);
    color: var(--muted);
  }
}

/* ── Switch (Profile: email notifications) ───────────────────────── */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}
.switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 40px;
  height: 24px;
  margin: 0;
  border-radius: 999px;
  background: var(--line-2);
  cursor: pointer;
  transition: background 0.15s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
  transition: transform 0.15s;
}
.switch:checked {
  background: var(--act);
}
.switch:checked::after {
  background: var(--act-ink);
  transform: translateX(16px);
}
.switch:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.switch:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ── Landing dashboard: Alsdorf operations (Entrix and Voltfang) ──── */
.dash {
  margin-bottom: 36px;
}
.dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.dash-sub {
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
}
.dash-stats {
  margin-bottom: 18px;
}
.dash > .well {
  margin-bottom: 18px;
}
/* (i) on a tile foot: the extra lines open as a small card on hover or focus. */
.stat-foot .info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--muted);
  vertical-align: middle;
  position: relative;
  top: -1px;
  cursor: help;
  outline: none;
}
.stat-foot .info i {
  font: 600 10px / 1 var(--mono);
  font-style: normal;
}
.stat-foot .info:hover,
.stat-foot .info:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
}
.stat-foot .tip {
  display: none;
  position: absolute;
  left: 0;
  top: 22px;
  z-index: 6;
  width: max-content;
  max-width: 240px;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
  flex-direction: column;
  gap: 4px;
}
.stat-foot .info:hover .tip,
.stat-foot .info:focus .tip,
.stat-foot .info:focus-within .tip {
  display: flex;
}
.stat:last-child .stat-foot .tip {
  left: auto;
  right: 0;
}
.dash-stats .stat-foot {
  flex-direction: column;
  gap: 2px;
}
/* Tiles in one row line up: the card keeps its content height (the foot takes the
   rest), the label row is always two lines tall, and the figure sits on its own
   line above the unit. Hovering a sparkline bar swaps the figure to that month. */
.dash-stats .stat {
  grid-template-rows: auto 1fr;
}
/* Tiles in one band share their two rows (card, foot) via subgrid, so the tallest label or
   foot sizes the band for every tile; the figure and sparkline sit at the card's bottom. */
@supports (grid-template-rows: subgrid) {
  .dash-stats .stat {
    grid-template-rows: subgrid;
    grid-row: span 2;
    row-gap: 0;
  }
}
.dash-stats .stat-top {
  grid-template-rows: auto 1fr;
  align-content: stretch;
  align-items: end;
}
.dash-stats .stat-top .label {
  min-height: calc(2 * 1.2em);
  align-self: start;
}
.dash-stats .stat-fig {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.dash-stats .stat-fig .unit {
  white-space: nowrap;
  min-height: 1.3em;
}
.dash-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.legend .open::before {
  width: 10px;
  height: 10px;
  border: 1px dashed var(--faint);
  border-radius: 2px;
  background: none;
}
/* Service-month dashboard (migration-v61): five money tiles, eight-stream legend. */
.stats.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* The eight-stream legend takes its own row under the title: short names, one line. */
.legend.wrap {
  flex: 1 0 100%;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: flex-start;
  padding-top: 2px;
}
.legend .sw-trading::before {
  background: var(--ink);
}
.legend .sw-fcr::before {
  background: var(--faint);
}
.legend .sw-afrr_capacity::before {
  background: var(--dot-mid);
}
.legend .sw-afrr_energy::before {
  background: var(--line-2);
}
.legend .sw-fees::before {
  background: var(--due);
}
.legend .sw-exchange::before {
  background: var(--due-soft);
}
.legend .sw-grid::before {
  background: var(--run);
}
.legend .sw-other::before {
  background: var(--late);
}
.dash-charts.one {
  grid-template-columns: minmax(0, 1fr);
}
.dash-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-window {
  display: flex;
  align-items: center;
  gap: 8px;
}
.seg.seg-sm button {
  font-size: 13px;
  padding: 6px 11px;
}
.seg button[aria-pressed="true"] {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: var(--shadow);
}
.select.select-sm {
  width: auto;
  font-size: 13px;
  padding: 6px 28px 6px 10px;
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 10px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.chart .cell-dim {
  opacity: 0.32;
}
.spark .spark-hit:hover + rect {
  fill: var(--ink);
}
.chart .net-dot {
  animation: dot-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes dot-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chart .net-dot {
    animation: none;
  }
}
.chart .bar-total {
  fill: var(--ink);
  font-weight: 600;
}
.chart .axis-open {
  fill: var(--faint);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.chart .bar-on {
  animation: bar-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes bar-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1179px) {
  .dash-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-charts {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .dash-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Tablets: the three Voltfang tiles need 240px each; the big chart scrolls sideways on a
   phone instead of shrinking to a thumbnail. Declared after .stats.* so they win. */
@media (max-width: 899px) {
  .stats.five,
  .stats.three.dash-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .stats.five,
  .stats.three.dash-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 767px) {
  .chart-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: -6px;
    padding-inline: 6px;
  }
  .chart-scroll .chart {
    min-width: 760px;
  }
}
/* Chart hover: the hovered month stays, the rest step back; a legend entry focuses its
   stream; the breakdown card floats inside the chart card. */
.card.chart-card {
  position: relative;
}
.chart .month {
  transition: opacity 0.16s ease;
}
.chart.has-hover .month:not(.hot) {
  opacity: 0.28;
}
.chart .month.hot .cell-dim {
  opacity: 1;
}
.chart .month.hot .axis-month {
  fill: var(--ink);
  font-weight: 600;
}
.chart .month-hit {
  cursor: crosshair;
}
.chart .cell-on,
.chart .net-dot,
.chart .bar-total {
  transition: opacity 0.16s ease;
}
.chart[data-stream] .cell-on,
.chart[data-stream] .net-dot,
.chart[data-stream] .bar-total {
  opacity: 0.12;
}
.chart[data-stream="trading"] .s-trading,
.chart[data-stream="fcr"] .s-fcr,
.chart[data-stream="afrr_capacity"] .s-afrr_capacity,
.chart[data-stream="afrr_energy"] .s-afrr_energy,
.chart[data-stream="fees"] .s-fees,
.chart[data-stream="exchange"] .s-exchange,
.chart[data-stream="grid"] .s-grid,
.chart[data-stream="other"] .s-other {
  opacity: 1;
}
/* Availability overlay: a line on the right-hand axis over the squares. */
.chart .ov-line {
  fill: none;
  stroke: var(--ok);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart .ov-dot {
  fill: var(--card);
  stroke: var(--ok);
  stroke-width: 2.5;
}
.chart .ov-ref {
  stroke: var(--late);
  stroke-width: 1;
  stroke-dasharray: 4 5;
  opacity: 0.8;
}
.chart .axis-right {
  fill: var(--ok);
}
.chart .overlay {
  transition: opacity 0.16s ease;
}
.chart[data-stream]:not([data-stream="avail"]) .overlay {
  opacity: 0.18;
}
.chart[data-stream="avail"] .cell-on,
.chart[data-stream="avail"] .net-dot,
.chart[data-stream="avail"] .bar-total {
  opacity: 0.12;
}
.legend .sw-avail::before {
  width: 12px;
  height: 0;
  border-top: 2.5px solid var(--ok);
  border-radius: 0;
  background: none;
}
.chart-tip .tip-row .sw.sw-line {
  background: none;
  border-top: 2.5px solid var(--ok);
  height: 0;
  border-radius: 0;
}
.legend.wrap span {
  cursor: default;
  border-radius: 999px;
  padding: 2px 6px;
  margin: -2px -6px;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
.legend.wrap span:hover,
.legend.wrap span:focus-visible {
  background: var(--card);
  color: var(--ink);
  outline: none;
}
.chart-tip {
  position: absolute;
  z-index: 7;
  min-width: 200px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--pop, var(--shadow));
  font-size: 13px;
  pointer-events: none;
  animation: tip-in 0.14s ease both;
}
@keyframes tip-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.chart-tip .tip-head {
  font: 500 11px / 1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.chart-tip .tip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  color: var(--muted);
}
.chart-tip .tip-row b {
  margin-left: auto;
  font: 500 13px / 1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.chart-tip .tip-row.neg b {
  color: var(--due);
}
.chart-tip .tip-row .sw {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: none;
}
.chart-tip .tip-net {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.chart-tip .tip-net b {
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .chart-tip {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chart .bar-on {
    animation: none;
  }
}