/* Superstar. The surogate.ai look: white ground, near-black ink, hairlines, soft layered
   shadows and the Surogate sun for state (tokens.css). This file only names the few extra roles the app's
   screens use, in terms of those tokens, so a change to the palette is a change to tokens.css. */

:root {
  --font-serif: "Fraunces", Georgia, serif;   /* page titles, headings and the sign-in title only */
  --accent-ink: var(--state-ink);   /* amber as text: the fill colour fails 4.5:1 on white */
  --bg: var(--ground);
  --code: var(--panel);
  --accent: var(--state);
  --accent-soft: var(--state-soft);
  --ok: var(--state);
  --btn-bg: var(--state);           /* the accent on marks, rings and tracks; buttons themselves are components.css */
  --btn-fg: var(--on-state);
  --drop: 0px;                      /* no hard offsets: a press is the kit's scale(.97) */
  --lift: var(--shadow);
  --ease: cubic-bezier(0.2, 0, 0.38, 0.9);
}

/* ---------- base ---------- */
html, body { height: 100%; overflow: hidden; }
body { background: var(--bg); line-height: 1.55; }
h1 { font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
.hero-title { font-size: clamp(32px, 2.6vw + 18px, 46px); line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; }
.num, time, .count, dd { font-variant-numeric: tabular-nums; }
.kicker { display: block; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.lede { color: var(--text-2); font-size: 17px; line-height: 1.6; white-space: pre-wrap; }
.grow { flex: 1; }
:focus-visible { outline: 2px solid var(--btn-bg); outline-offset: 2px; }
::selection { background: var(--state-soft); }
.link { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.link:hover { text-decoration-color: currentColor; color: var(--text); }

/* ---------- buttons: the kit's three, plus a destructive solid ---------- */
.btn.danger-solid { background: var(--danger); color: #fff; }
.btn.bare { color: var(--text-2); }
.btn.bare:hover { background: var(--hover); color: var(--text); }
.btn.bare:active { transform: none; }
.btn.danger { color: var(--danger); }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px; background: var(--hover); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border); white-space: nowrap; }
.chip.accent { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }

.card { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--ground); border: 1px solid var(--border); border-radius: var(--radius-lg); }

.field { background: var(--ground); border-radius: var(--radius); }
.field:focus { border-color: var(--btn-bg); box-shadow: 0 0 0 3px var(--state-soft); }

/* ---------- shell ---------- */
.shell { background: var(--bg); }
.side { background: var(--panel); border-right: 1px solid var(--border); gap: 1px; }
.side .brand { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; margin: -4px 0 14px; border: 0; border-radius: var(--radius); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.side .brand:hover { background: var(--hover); }
.side .brand .brand-text { flex: 1; }
.side .brand .ic { flex: none; color: var(--text-2); }
.ws-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; flex: none; width: 30px; height: 30px; color: var(--text); }
.brand-mark img { width: 24px; height: auto; }
.brand-text { display: grid; min-width: 0; }
.brand-name { font-weight: 600; font-size: 15px; line-height: 1.2; letter-spacing: -0.01em; }
.side h3 { margin: var(--space-6) 10px 8px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.nav { cursor: pointer; border: 0; background: none; width: 100%; text-align: left; font-family: inherit; border-radius: var(--radius); color: var(--text-2); }
.nav:hover { background: var(--hover); color: var(--text); }
.nav[aria-current="page"] { background: var(--ground); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border); }
.nav.add { color: var(--muted); }
.nav .kind { font-size: 11px; font-weight: 600; color: var(--muted); }
.tally { font-size: 12px; color: var(--muted); }
.fresh-dot { flex: none; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--btn-bg); }
.count.fresh { box-shadow: none; background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; }

/* The rail: one spine, one dot per section. Hollow, half (some decided), full (all decided). */
.rail { position: relative; display: grid; gap: 1px; }
.rail .nav { position: relative; padding-left: 12px; }

.side .foot { display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.who { display: flex; min-width: 0; max-width: 100%; align-items: center; gap: var(--space-2); padding: 0 4px 0 6px; font-size: 14px; }
.who-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
kbd { font-family: var(--font-sans); font-weight: 600; background: var(--ground); }

.avatar { flex: none; background: var(--selected); color: var(--text); font-weight: 600; }
.avatar[data-role] { background: var(--who) center / cover no-repeat; color: transparent; }
.avatar.xs, .nav span.avatar.xs, .side .nav > span.avatar.xs { flex: none; width: 20px; height: 20px; font-size: 9px; }

.main { background: var(--bg); }
.top { background: var(--bg); border-bottom: 1px solid var(--border); font-weight: 600; font-size: 14px; }
.top .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-top { display: grid; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: default; }
.ws-top > span { overflow: hidden; text-overflow: ellipsis; }
.ws-top .ws-name { display: none; font-weight: 400; }
.top .menu-btn { display: none; }

/* Presence */
.presence { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 400; }
.faces { display: inline-flex; }
.faces .avatar { width: 26px; height: 26px; font-size: 10px; box-shadow: 0 0 0 2px var(--bg); }
.faces .avatar + .avatar { margin-left: -7px; }
.online-label { color: var(--text-2); }
.online-label::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ok); vertical-align: 0; }
.here { display: inline-flex; gap: 2px; }
.here:empty { display: none; }
.who-online { display: grid; gap: 1px; }
.who-online .nav { height: auto; min-height: var(--row-nav); padding: 6px 10px; }
.who-online .nav > span:last-child { display: grid; white-space: normal; }
.who-online .where { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.who-online .none { padding: 2px 10px; }
.typing { font-size: 12px; line-height: 17px; font-weight: 600; color: var(--state-ink); padding: 0 14px; }
.typing:empty { display: none; }

/* ---------- page frame ---------- */
.scroll { overflow: auto; min-height: 0; }
.page { max-width: 860px; margin: 0 auto; padding: var(--space-10) var(--space-6) var(--space-16); }
.enter { animation: viewin 260ms var(--ease) both; }
@keyframes viewin { from { opacity: 0; transform: translateY(6px); } }
.page > section { margin-top: var(--space-12); }
.banner { margin-bottom: var(--space-6); padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--border); border-left: 3px solid var(--warn); background: var(--ground); font-size: 14px; color: var(--text-2); }
.page-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.title-row { display: flex; align-items: flex-start; gap: var(--space-3); justify-content: space-between; }
.page-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); justify-content: space-between; margin-bottom: var(--space-4); }
.page-tools .seg { background: var(--hover); box-shadow: inset 0 0 0 1px var(--border); }
.page-tools .seg button[aria-pressed="true"] { background: var(--ground); color: var(--text); }
.section-title { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-3); }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.section-head .section-title { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filtered { padding: var(--space-6); }

/* ---------- home ---------- */
.hero { display: grid; gap: var(--space-3); }
.hero .lede { max-width: 60ch; }
.progress { display: grid; gap: var(--space-5); padding: var(--space-6); background: var(--ground); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.meter.big { font-size: 14px; font-weight: 600; }
.meter.big .meter-track { height: 8px; background: var(--hover); box-shadow: inset 0 0 0 1px var(--border); }
.meter.big .meter-track > i { background: var(--btn-bg); }
.meter.big .meter-value { color: var(--text); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--border); }
.stats div { display: flex; flex-direction: column-reverse; gap: 2px; padding: var(--space-4) var(--space-4) 0; }
.stats div:first-child { padding-left: 0; }
.stats div + div { border-left: 1px solid var(--border); }
.stats dt { font-size: 12px; line-height: 17px; color: var(--muted); }
.stats dd { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.next { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius); background: var(--code); border: 1px solid var(--border); border-left: 3px solid var(--btn-bg); }
.next > div { min-width: 0; }
.next-title { font-size: 18px; line-height: 1.35; font-weight: 600; margin: 2px 0; }
.all-done { color: var(--ok); font-weight: 600; }

.unitgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.unitcard { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px 19px; cursor: pointer; transition: border-color 200ms, transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.unitcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--border-strong); }
.unitcard[data-state="done"]::before { background: var(--btn-bg); }
.unitcard:hover { border-color: color-mix(in srgb, var(--btn-bg) 50%, var(--border)); transform: translateY(-2px); box-shadow: var(--lift); }
.unitcard:active { transform: translateY(0); transition-duration: 90ms; }
.unitcard.new-page { border-style: dashed; background: transparent; justify-content: center; color: var(--text-2); }
.unitcard.new-page::before { display: none; }
.unit-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.unit-num { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-ink); }
.unit-title { font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.unit-foot { display: grid; gap: 6px; margin-top: auto; padding-top: 4px; }
.mini { display: block; }
.mini i { display: block; height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--btn-bg) calc(var(--p) * 100%), var(--hover) 0); } /* deslop-ignore 06: hard-stop meter fill */

/* ---------- feed ---------- */
.feed { border-top: 0; background: var(--ground); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.feed .row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; padding: 12px 14px; }
.feed .row:last-child { border-bottom: 0; }
.feed .avatar { width: 26px; height: 26px; font-size: 11px; }
.feed-text { min-width: 0; line-height: 21px; padding-top: 2px; }
.feed .row-title { white-space: normal; font-weight: 600; }
.feed .what { color: var(--text-2); }
.feed .small { padding-top: 4px; white-space: nowrap; }
.feed .row[data-new] { background: var(--accent-soft); }

/* ---------- document: blocks ---------- */
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.blk { position: relative; scroll-margin-top: var(--space-4); }
.blk-tools { position: absolute; left: -60px; top: 2px; display: flex; gap: 2px; opacity: 0; transition: opacity 120ms; }
.blk:hover > .blk-tools, .blk:focus-within > .blk-tools { opacity: 1; }
.handle { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--radius); background: none; color: var(--muted); cursor: pointer; font: 600 16px/1 var(--font-sans); }
.handle:hover { background: var(--hover); color: var(--text); }

.ed { outline: none; border-radius: var(--radius-sm); white-space: pre-wrap; min-height: 1.55em; }
.ed:empty::before { content: attr(data-ph); color: var(--faint); pointer-events: none; }
.ed:focus { background: color-mix(in srgb, var(--ground) 70%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ground) 70%, transparent); }
.blk-text .ed { font-size: 17px; line-height: 1.65; color: var(--text); padding: 2px 0; }
.blk-heading { margin-top: var(--space-5); }
.blk-heading .ed { font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.blk-todo { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; }
.blk-todo .check { width: 20px; height: 20px; margin-top: 3px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); background: var(--ground); box-shadow: var(--shadow-sm); cursor: pointer; display: grid; place-items: center; color: #fff; font: 600 13px/1 var(--font-sans); transition: transform 70ms, box-shadow 70ms, background-color 120ms; }
.blk-todo .check[aria-checked="true"] { background: var(--ok); border-color: var(--ok); box-shadow: none; }
.blk-todo .ed { font-size: 17px; line-height: 1.65; }
.blk-todo[data-done] .ed { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.blk-callout { display: grid; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--border); border-left: 3px solid var(--btn-bg); background: var(--ground); }
.blk-callout .ed { font-size: 16px; line-height: 1.6; }
.blk-divider { padding: 12px 0; }
.blk-divider hr { border: 0; border-top: 1px solid var(--border-strong); margin: 0; }

/* Table: a real grid. Header cells name columns; every cell edits in place. */
.blk-table { display: grid; gap: 8px; margin: var(--space-2) 0; }
.blk-table .caption { font-weight: 600; font-size: 15px; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--ground); }
.tbl { border-collapse: collapse; width: 100%; min-width: max-content; font-size: 15px; }
.tbl th, .tbl td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0; min-width: 140px; max-width: 320px; vertical-align: top; text-align: left; }
.tbl th:last-child, .tbl td:last-child { border-right: 0; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th { background: var(--code); font-size: 14px; font-weight: 600; color: var(--text); }
.tbl .cell { padding: 8px 10px; min-height: 38px; }
.tbl .cell:focus { background: var(--state-soft); box-shadow: inset 0 0 0 2px var(--btn-bg); border-radius: 0; }
.tbl .rowtool { width: 34px; min-width: 34px; border-right: 1px solid var(--border); text-align: center; }
.tbl .rowtool button { visibility: hidden; }
.tbl tr:hover .rowtool button { visibility: visible; }
.tbl-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.x { border: 0; background: none; color: var(--muted); cursor: pointer; width: 26px; height: 26px; border-radius: var(--radius-sm); font: 600 15px/1 var(--font-sans); }
.x:hover { background: var(--hover); color: var(--danger); }

/* Block menu and "+ Add" */
.menu-pop { position: fixed; z-index: 45; width: 240px; max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; background: var(--ground); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: viewin 140ms var(--ease) both; }
.menu-pop button { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--radius); background: none; color: var(--text); font: 400 14px/1.3 var(--font-sans); text-align: left; cursor: pointer; }
.menu-pop button:hover { background: var(--hover); }
.menu-pop .glyph { display: grid; place-items: center; width: 22px; height: 22px; color: var(--text-2); font-weight: 600; font-size: 13px; }
.menu-pop .lbl { font-weight: 400; }
.menu-pop .sub { display: none; }
.menu-pop hr { border: 0; border-top: 1px solid var(--border); margin: 6px 4px; }
.menu-pop .danger { color: var(--danger); }
.menu-pop .on .lbl { font-weight: 600; }

/* ---------- decision points: one card each ---------- */
.item { position: relative; padding: 22px 24px 22px 27px; margin: 8px 0; background: var(--ground); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color 150ms, box-shadow 150ms; }
.item::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; border-radius: var(--radius-lg) 0 0 var(--radius-lg); background: transparent; transition: background-color 150ms; }
.item[data-status="ok"]::before { background: var(--ok); }
.item[data-status="change"]::before { background: var(--warn); }
.item[data-status="no"]::before { background: var(--danger); }
.blk[data-cur] > .item, .blk[data-cur] > .blk-text, .blk[data-cur] > .blk-todo { border-color: color-mix(in srgb, var(--btn-bg) 55%, var(--border)); box-shadow: 0 0 0 3px var(--state-soft); }
.item-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-2); align-items: start; }
.item-num { padding-top: 2px; font-size: 14px; font-weight: 600; color: var(--muted); }
.item h2 { font-size: 18px; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
.item-body { padding-left: 48px; display: grid; gap: var(--space-5); margin-top: var(--space-3); }
.new-mark { margin-left: 4px; vertical-align: 2px; }
.decision-line { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 2px; }
.status-word { font-weight: 600; }
.status-word::before { content: "● "; font-size: 9px; vertical-align: 1px; }
.status-word[data-s="ok"] { color: var(--ok); }
.status-word[data-s="change"] { color: var(--warn); }
.status-word[data-s="no"] { color: var(--danger); }
.status-word[data-s="no"]::before { content: "◆ "; }
.body { display: grid; gap: var(--space-2); color: var(--text-2); }
.body p, .compare p { white-space: pre-wrap; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compare > div { display: grid; align-content: start; gap: var(--space-2); padding: 14px 16px; border-radius: var(--radius); font-size: 15px; line-height: 1.55; min-width: 0; }
.compare h3 { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.side-now { background: var(--code); border: 1px solid var(--border); color: var(--text-2); }
.side-target { background: var(--ground); border: 1px solid var(--border); border-left: 3px solid var(--btn-bg); }
.side-target h3 { color: var(--accent-ink); }

.qs { list-style: none; counter-reset: q; margin: 0; padding: 0; display: grid; gap: 12px; }
.qs li { counter-increment: q; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; row-gap: 6px; }
.qs li::before { content: counter(q); grid-row: span 3; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; padding-top: 2px; }
.qs .q { color: var(--text); font-weight: 600; }
.opts { display: flex; flex-wrap: wrap; gap: 4px; }
.opt { padding: 0 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); font-size: 12px; line-height: 20px; color: var(--text-2); background: var(--ground); }
.branch { color: var(--text-2); font-size: 13px; line-height: 19px; padding-left: 10px; border-left: 2px solid var(--border-strong); }
.branch::before { content: "↳ "; color: var(--muted); }

/* Decision: three keys. The chosen one is pressed into the card and takes its colour. */
.decide { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; background: none; box-shadow: none; justify-self: start; }
.decide button {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border-radius: var(--radius); border: 1.5px solid var(--border-strong); background: var(--ground); color: var(--text-2);
  box-shadow: 0 var(--drop) 0 0 var(--border-strong); font: 600 14px/1 var(--font-sans); cursor: pointer;
  transition: transform 70ms, box-shadow 70ms, background-color 120ms, color 120ms, border-color 120ms;
}
.decide button:hover { background: var(--hover); color: var(--text); }
.decide button:active { transform: translateY(var(--drop)); box-shadow: none; }
.decide button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--faint); }
.decide button[aria-pressed="true"] { transform: translateY(var(--drop)); box-shadow: none; color: var(--c); border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--ground)); }
.decide button[aria-pressed="true"]::before { background: var(--c); box-shadow: none; }
.decide button[data-v="ok"] { --c: var(--ok); }
.decide button[data-v="change"] { --c: var(--warn); }
.decide button[data-v="no"] { --c: var(--danger); }
.decide button[data-v="no"][aria-pressed="true"]::before { border-radius: 1px; transform: rotate(45deg); }

/* Notes */
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.note { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); }
.note-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.note-author { font-weight: 600; color: var(--who, var(--text)); }
.note-acts { display: inline-flex; gap: var(--space-2); }
.note .text { white-space: pre-wrap; margin-top: 2px; color: var(--text); }
.files { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.thumb img { display: block; width: 132px; height: 96px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }
.file { display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 10px 0 6px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--ground); color: var(--text); text-decoration: none; font-size: 14px; max-width: 100%; }
.file:hover { background: var(--hover); }
.file-ext { padding: 2px 5px; border-radius: var(--radius-sm); background: var(--hover); font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--text-2); }

.compose { display: grid; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--bg); transition: border-color 150ms, box-shadow 150ms; }
.compose:focus-within { border-color: var(--btn-bg); box-shadow: 0 0 0 3px var(--state-soft); background: var(--ground); }
.compose textarea.field { border: 0; box-shadow: none; background: transparent; min-height: 46px; padding: 12px 14px 4px; }
.compose textarea.field:focus { box-shadow: none; }
.compose-bar { display: flex; align-items: center; gap: var(--space-2); padding: 4px 6px 6px; }
.compose input[type=file] { display: none; }
.compose .btn.secondary { height: 32px; padding: 0 12px; font-size: 13px; }
.picked { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hint { display: inline-flex; gap: 2px; }

.edit { display: grid; gap: var(--space-4); }
.edit .label .field { margin-top: 6px; font-weight: 400; }
.edit .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--space-10); }
.pager-btn { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--ground); color: var(--text); font: 600 15px/1.35 var(--font-sans); text-align: left; cursor: pointer; transition: border-color 200ms, transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.pager-btn .small { font-weight: 400; }
.pager-btn:hover { border-color: color-mix(in srgb, var(--btn-bg) 50%, var(--border)); transform: translateY(-2px); box-shadow: var(--lift); }
.pager-btn.next { text-align: right; grid-column: 2; }

/* ---------- canvas ---------- */
.canvas-view { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.canvas-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.canvas-bar h1 { font-size: 18px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-bar .hint-line { font-size: 12px; color: var(--muted); }
.board-scroll { overflow: auto; min-height: 0; touch-action: pan-x pan-y; background-color: var(--bg); background-image: radial-gradient(var(--border-strong) 1px, transparent 1.2px); background-size: 24px 24px; } /* deslop-ignore 06: the dot grid of a drawing board, not a gradient surface */
.board { position: relative; width: 3200px; height: 2200px; }
.board svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.board svg path { fill: none; stroke: var(--text-2); stroke-width: 1.75; }
.board svg path.hit { stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.board svg path.hit:hover + path { stroke: var(--danger); }
.ccard { position: absolute; width: 220px; padding: 12px 14px 10px; background: var(--ground); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); touch-action: none; cursor: grab; user-select: none; transition: box-shadow 120ms, border-color 120ms; }
.ccard::before { content: ""; position: absolute; left: 12px; right: 12px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--tone, transparent); }
.ccard[data-tone="accent"] { --tone: var(--btn-bg); }
.ccard[data-tone="ok"] { --tone: var(--ok); }
.ccard[data-tone="warn"] { --tone: var(--warn); }
.ccard[data-tone="no"] { --tone: var(--danger); }
.ccard.dragging { cursor: grabbing; box-shadow: var(--lift); border-color: var(--btn-bg); z-index: 5; }
.ccard.linking { border-color: var(--btn-bg); box-shadow: 0 0 0 3px var(--state-soft); }
.ccard .ed { cursor: text; user-select: text; }
.ccard .c-title { font-weight: 600; font-size: 15px; line-height: 1.35; }
.ccard .c-body { font-size: 14px; line-height: 1.5; color: var(--text-2); margin-top: 4px; }
.ccard .c-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--muted); }
.ccard .c-foot button { border: 0; background: none; color: var(--muted); font: 600 16px/1 var(--font-sans); cursor: pointer; width: 26px; height: 22px; border-radius: var(--radius-sm); }
.ccard .c-foot button:hover { background: var(--hover); color: var(--text); }
.link-banner { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: var(--radius-lg); background: var(--solid); color: var(--on-solid); font-weight: 600; font-size: 14px; box-shadow: var(--shadow-lg); }
.link-banner .btn { color: var(--on-solid); height: 30px; }

/* ---------- dialogs ---------- */
.dlg { padding: 0; border: 1px solid var(--border); width: min(520px, calc(100vw - 32px)); max-height: min(86dvh, 720px); border-radius: var(--radius-lg); background: var(--ground); color: var(--text); box-shadow: var(--shadow-lg); }
.dlg::backdrop { background: var(--scrim); }
.dlg[open] { animation: dlgin 200ms var(--ease) both; }
@keyframes dlgin { from { opacity: 0; transform: translateY(6px) scale(0.99); } }
.dlg-body { display: grid; gap: var(--space-4); padding: var(--space-6); }
.dlg-body h2 { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; }
.dlg-text { color: var(--text-2); }
.dlg .label .field { margin-top: 6px; font-weight: 400; }
.dlg textarea.field { min-height: 140px; max-height: 50dvh; }
.dlg-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.checks { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; }
.checks label { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.choice label { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius); border: 1.5px solid var(--border-strong); background: var(--ground); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 70ms, box-shadow 70ms, border-color 120ms; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label:has(input:checked) { border-color: var(--btn-bg); box-shadow: none; background: var(--accent-soft); }
.choice label:has(input:focus-visible) { outline: 2px solid var(--btn-bg); outline-offset: 2px; }
.choice b { font-size: 15px; }
.choice span { font-size: 13px; color: var(--muted); }
.dlg-lb { width: min(1100px, calc(100vw - 32px)); max-height: 92dvh; overflow: hidden; }
.lb { display: grid; grid-template-rows: minmax(0, 1fr) auto; max-height: 92dvh; }
.lb img { display: block; width: 100%; max-height: calc(92dvh - 56px); object-fit: contain; background: var(--bg); }
.lb-bar { display: flex; align-items: center; gap: var(--space-2); padding: 8px 8px 8px 16px; border-top: 1px solid var(--border); }
.lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.lb-bar form { margin: 0; }

.toast { background: var(--solid); color: var(--on-solid); font-weight: 600; }

@media (pointer: coarse) {
  .desk { display: none; }
  .desk-only { display: none; }
  .blk-tools { opacity: 1; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: none; }
  .side { display: none; }
  .shell[data-menu] .side { display: flex; position: fixed; inset: 0 14% 0 0; z-index: 41; flex-direction: column; box-shadow: var(--shadow-lg); padding-top: max(16px, env(safe-area-inset-top)); animation: drawer 200ms var(--ease) both; }
  .shell[data-menu] .side .nav { flex-direction: row; justify-content: flex-start; gap: var(--space-3); height: var(--tap); font-size: 15px; }
  .side h3 { display: block; }
  .top .menu-btn { display: inline-flex; margin-left: -8px; }
  .ws-top { cursor: pointer; line-height: 1.2; }
  .ws-top .ws-name { display: block; font-size: 12px; color: var(--text-2); }
  .main { grid-template-rows: calc(52px + env(safe-area-inset-top)) minmax(0, 1fr); }
  .top { padding-top: env(safe-area-inset-top); }
  .online-label { display: none; }
  .desk-only { display: none; }
  .page { padding: var(--space-6) 12px var(--space-12); }
  .blk { padding-left: 30px; }
  .blk.has-card { padding-left: 0; }
  .blk.has-card > .blk-tools { left: auto; right: 6px; top: 8px; z-index: 2; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats div:nth-child(3) { padding-left: 0; border-left: 0; }
  .stats div:nth-child(n + 3) { border-top: 1px solid var(--border); margin-top: var(--space-4); }
  .progress { padding: var(--space-5) var(--space-4); }
  .next { flex-direction: column; align-items: stretch; }
  .next .btn { width: 100%; }
  .unitgrid { grid-template-columns: 1fr; }
  .item { padding: 18px 16px 18px 19px; }
  .item-head { grid-template-columns: 34px minmax(0, 1fr) auto; padding-right: 26px; }
  .item-body { padding-left: 0; }
  .compare, .edit .two { grid-template-columns: 1fr; }
  .decide { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .decide button { justify-content: center; height: var(--tap); padding: 0 6px; white-space: nowrap; }
  .page-tools { flex-direction: column; align-items: stretch; }
  .page-tools .seg button { flex: 1; padding: 0 6px; }
  .pager { grid-template-columns: 1fr; }
  .pager-btn.next { grid-column: 1; }
  .choice { grid-template-columns: 1fr; }
  .canvas-bar .hint-line { display: none; }
  .menu-pop { left: 8px !important; right: 8px; width: auto; top: auto !important; bottom: max(8px, env(safe-area-inset-bottom)); max-height: 70dvh; overflow: auto; }
  .dlg:not(.dlg-lb) { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-width: 1px 0 0; max-height: 92dvh; }
  .dlg:not(.dlg-lb)[open] { animation: sheet 220ms var(--ease) both; }
  .dlg-body { padding: var(--space-5) var(--space-4) max(var(--space-5), env(safe-area-inset-bottom)); }
  .dlg-body::before { content: ""; justify-self: center; width: 36px; height: 4px; margin-top: -8px; border-radius: 999px; background: var(--border-strong); }
  .dlg-actions { flex-direction: column-reverse; }
  .dlg-actions .btn { height: var(--tap); width: 100%; }
}
@keyframes drawer { from { transform: translateX(-12px); opacity: 0; } }
@keyframes sheet { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .enter, .dlg[open], .shell[data-menu] .side, .menu-pop { animation: none !important; }
  .unitcard:hover, .pager-btn:hover { transform: none; }
}

.scroll:has(.canvas-view) { overflow: hidden; }

/* ---------- documents, in the manner of an editor page: white sheet, serif titles, quiet chrome ---------- */
.scroll:has(.page.doc) { background: var(--ground); }
.page.doc { max-width: 720px; padding-top: var(--space-12); padding-bottom: 140px; }
.page.doc[data-wide] { max-width: 1100px; }
.doc-title { font-family: var(--font-serif); font-weight: 600; font-size: 40px; line-height: 1.15; letter-spacing: -0.015em; }
.page.doc .page-head { margin-bottom: var(--space-6); }
.meta-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 var(--space-4); }
.mchip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--hover); color: var(--text-2); font-size: 13px; line-height: 20px; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mchip .ic { width: 14px; height: 14px; }
.page.doc .items { gap: 2px; }
.page.doc .blk-heading { margin-top: var(--space-8); }
.page.doc .blk-heading .ed { font-family: var(--font-serif); font-weight: 600; font-size: 28px; letter-spacing: -0.01em; }
.blk-sub { margin-top: var(--space-5); }
.blk-sub .ed { font-family: var(--font-serif); font-weight: 600; font-size: 21px; line-height: 1.3; }
.blk-li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; }
.blk-li .ed { font-size: 17px; line-height: 1.65; }
.li-mark { color: var(--text-2); text-align: right; padding-right: 9px; font-size: 16px; }
.blk-quote { margin: 4px 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--text); }
.blk-quote .ed { font-size: 18px; line-height: 1.6; }
.blk-toggle { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; }
.blk-toggle .tg { width: 24px; height: 26px; border: 0; background: none; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-2); font-size: 13px; transition: transform 150ms var(--ease); }
.blk-toggle .tg:hover { background: var(--hover); }
.blk-toggle[data-open] .tg { transform: rotate(90deg); }
.blk-toggle > .ed { font-size: 17px; line-height: 1.6; font-weight: 600; padding-top: 1px; }
.tg-body { grid-column: 2; padding: 4px 0 8px; }
.tg-body .ed { font-size: 16px; line-height: 1.65; color: var(--text-2); }
.blk-image { margin: var(--space-3) 0; width: var(--w); max-width: 100%; }
.blk-image img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.blk-image figcaption .ed { font-size: 14px; color: var(--muted); padding-top: 6px; }
.blk-file { display: grid; gap: 6px; margin: var(--space-2) 0; }
.blk-file .doc { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; background: var(--ground); }
.blk-file .doc:hover { background: var(--hover); }
.blk-file .doc > span:last-child { display: grid; min-width: 0; }
.blk-file .doc b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blk-file .doc-cap { font-size: 14px; color: var(--muted); }
.blk-file .pdf { width: 100%; height: 560px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--code); }
.blk-drop { display: grid; gap: 2px; place-items: center; text-align: center; padding: 26px 16px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--code); cursor: pointer; color: var(--text-2); }
.blk-drop:hover { border-color: var(--btn-bg); color: var(--text); }
.blk-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.page[data-dropping] { outline: 2px dashed var(--btn-bg); outline-offset: -8px; border-radius: var(--radius-lg); }
.handle.plus { font-size: 18px; font-weight: 400; }
.handle[data-act="block-menu"] { cursor: grab; touch-action: none; }
.blk.lifting { opacity: 0.4; }
.drop-line { position: fixed; z-index: 50; height: 3px; border-radius: 2px; background: var(--btn-bg); pointer-events: none; }
.add-line { display: block; width: 100%; margin-top: var(--space-3); padding: 10px 0; border: 0; background: none; text-align: left; color: var(--faint); font: 400 15px/1.4 var(--font-sans); cursor: text; }
.add-line:hover { color: var(--muted); }
.dock { position: sticky; bottom: 18px; z-index: 30; display: flex; align-items: center; gap: 2px; width: max-content; margin: var(--space-6) auto 0; padding: 4px; background: var(--ground); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.dock button { display: grid; place-items: center; width: 36px; height: 34px; border: 0; border-radius: var(--radius); background: none; color: var(--text-2); cursor: pointer; }
.dock button:hover { background: var(--hover); color: var(--text); }
.dock-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.menu-h { padding: 4px 10px; }
.dlg-search { width: min(620px, calc(100vw - 32px)); }
.search .results { list-style: none; margin: 10px 0 0; padding: 0; max-height: 55vh; overflow-y: auto; display: grid; gap: 2px; }
.search .results button { display: grid; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius); background: none; text-align: left; color: var(--text); font: 400 15px/1.35 var(--font-sans); cursor: pointer; }
.search .results button:hover, .search .results button[aria-selected] { background: var(--hover); }
.search .snip { color: var(--muted); }
@media (pointer: coarse) { .handle[data-act="block-menu"] { touch-action: auto; } .page.doc .blk-tools { opacity: 0.45; } }
@media (max-width: 760px) {
  .page.doc { padding-top: var(--space-6); }
  .doc-title { font-size: 30px; }
  .blk-tools { left: -2px; }
  .handle.plus { display: none; }
  .blk-file .pdf { height: 420px; }
  .dock { bottom: max(12px, env(safe-area-inset-bottom)); }
}
.dock button[data-k="more"] .ic { stroke-width: 3; }
.page.doc.report { max-width: 920px; }
.blk-image > a { display: block; max-height: 640px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); overscroll-behavior: contain; }
.blk-image > a img { border: 0; border-radius: 0; }
.toc { display: none; }
@media (min-width: 1440px) {
  .toc { position: fixed; top: 96px; right: 24px; width: 220px; max-height: calc(100vh - 140px); overflow-y: auto; display: grid; gap: 1px; z-index: 5; }
  .toc .small { padding: 0 8px 6px; color: var(--muted); }
  .toc button { border: 0; background: none; text-align: left; padding: 4px 8px; border-radius: var(--radius-sm); color: var(--text-2); font: 400 13px/1.35 var(--font-sans); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .toc button.sub { padding-left: 20px; color: var(--muted); }
  .toc button:hover { background: var(--hover); color: var(--text); }
}
.blk-file .media { width: 100%; max-height: 480px; border-radius: var(--radius); background: var(--code); }
.note-media { display: block; width: min(100%, 420px); max-height: 320px; border-radius: var(--radius); }
.save-state { color: var(--muted); font-weight: 400; white-space: nowrap; }
.save-state[data-s="busy"] { color: var(--text-2); }
.save-state[data-s="err"] { color: var(--danger); font-weight: 600; }

/* ---------- people: mentions, assignment, inbox ---------- */
/* Each person's --who is set per role by app.js (signedIn), from the list the server sends. */
[data-role] { --who: var(--text-2); }
:root[data-theme="dark"] .mention, :root[data-theme="dark"] .assignee, :root[data-theme="dark"] .note[data-role] .note-author { color: color-mix(in srgb, var(--who) 50%, white); }
.mention { color: var(--who); font-weight: 600; background: color-mix(in srgb, var(--who) 12%, transparent); border-radius: var(--radius-sm); padding: 0 3px; }
.assignee { justify-self: start; display: inline-flex; align-items: center; margin: 2px 0 4px 26px; padding: 1px 8px; border: 0; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--who) 12%, transparent); color: var(--who); font: 600 12px/20px var(--font-sans); cursor: pointer; }
.blk[data-type="text"] > .assignee, .blk[data-type="heading"] > .assignee, .blk[data-type="sub"] > .assignee, .blk[data-type="callout"] > .assignee, .blk[data-type="quote"] > .assignee, .blk.has-card > .assignee, .blk[data-type="table"] > .assignee, .blk[data-type="image"] > .assignee, .blk[data-type="file"] > .assignee { margin-left: 0; }
.blk.has-card > .assignee { margin-top: -2px; }
.mention-pop { width: 220px; }
.mention-pop button[aria-selected="true"] { background: var(--hover); }
.feed .inbox-row { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.feed .inbox-row[data-unread] { background: var(--accent-soft); }
.feed .inbox-row[data-unread] .what { color: var(--text); font-weight: 600; }
.feed .inbox-row[data-unread] .row-title::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--accent); }
.feed .row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ib-acts { display: inline-flex; gap: 2px; margin-top: -3px; }
.ib-act { width: 30px; height: 30px; padding: 0; justify-content: center; color: var(--text-2); }
.ib-act:hover { color: var(--text); }
.page.inbox .page-tools { flex-wrap: wrap; gap: var(--space-2); }
.page.inbox .page-tools .btn .ic { margin-right: 4px; }
.ws-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed.grouped .day { padding: 10px 16px 4px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: capitalize; list-style: none; background: var(--code); border-bottom: 1px solid var(--border); }

/* Sidebar sections: heading with its own menu; archived pages fold away at the bottom */
.sec-head { display: flex; align-items: center; gap: 4px; margin: var(--space-6) 4px 8px 10px; }
.sec-head h3 { flex: 1; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-btn { flex: none; display: grid; place-items: center; width: 26px; height: 22px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity 120ms; }
.sec-head:hover .sec-btn, .sec-btn:focus-visible { opacity: 1; }
.sec-btn:hover { background: var(--panel); color: var(--text); }
@media (pointer: coarse) { .sec-btn { opacity: 1; } }
.side .none { margin: 0 10px 4px; }
.arch { margin-top: var(--space-4); }
.arch summary { padding: 6px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.arch .nav { opacity: 0.75; }
.title-acts { display: inline-flex; gap: 2px; flex: none; }
/* The outline sits in the right margin; wider pages only leave that margin on wider screens. */
@media (max-width: 1679px) { .toc:has(+ .page.doc.report) { display: none; } }
@media (max-width: 1859px) { .toc:has(+ .page.doc[data-wide]) { display: none; } }
@media (min-width: 761px) { .side { overflow-x: hidden; } }
.side .brand .brand-name.ws-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- inline formatting ---------- */
.ed b { font-weight: 600; }
.ed code { font: 0.88em/1 var(--font-mono); padding: 2px 5px; border-radius: 4px; background: var(--hover); box-shadow: inset 0 0 0 1px var(--border); }
.ed a { color: var(--state-ink); text-decoration: underline; text-decoration-color: var(--state-soft); text-underline-offset: 3px; cursor: pointer; }
.ed a:hover { text-decoration-color: currentColor; }
.sel-bar { position: fixed; z-index: 46; display: flex; gap: 2px; padding: 3px; border-radius: var(--radius); background: var(--ground); box-shadow: var(--shadow-lg); }
.sel-bar[hidden] { display: none; }
.sel-bar button { height: 28px; min-width: 30px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-2); font: var(--weight-strong) 13px/1 var(--font-sans); cursor: pointer; }
.sel-bar button:hover { background: var(--hover); color: var(--text); }

/* ---------- nesting, page links, typed tables, board ---------- */
.blk { margin-left: calc(var(--indent, 0) * 26px); }
.blk-page { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; margin-left: -8px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: var(--weight-strong) 16px/1.5 var(--font-sans); text-align: left; cursor: pointer; }
.blk-page span { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.blk-page:hover { background: var(--hover); }
.blk-page.gone { color: var(--muted); cursor: default; }
.tbl .th { display: flex; align-items: center; }
.tbl .th .cell { flex: 1; min-width: 0; }
.col-type { flex: none; width: 26px; height: 26px; margin-right: 4px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--faint); cursor: pointer; }
.col-type:hover { background: var(--hover); color: var(--text); }
.cell-in { width: 100%; min-height: 38px; padding: 0 10px; border: 0; background: none; color: var(--text); font: inherit; color-scheme: inherit; }
.cell-in:focus { outline: none; background: var(--state-soft); box-shadow: inset 0 0 0 2px var(--state); }
select.cell-in[data-role]:not([data-role=""]) { color: var(--who); font-weight: var(--weight-strong); }
.blk-todo .check.cell-check, .cell-check { display: grid; place-items: center; width: 20px; height: 20px; margin: 9px 10px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); background: var(--ground); color: #fff; font: 600 13px/1 var(--font-sans); cursor: pointer; }
.cell-check[aria-checked="true"] { background: var(--state); border-color: var(--state); }
.kanban { display: flex; gap: var(--space-3); overflow-x: auto; align-items: flex-start; max-width: 100%; padding-bottom: 4px; }
.klane { flex: 1 0 190px; max-width: 280px; display: grid; align-content: start; gap: 8px; min-height: 96px; padding: 10px; border-radius: var(--radius); background: var(--panel); box-shadow: inset 0 0 0 1px var(--border); }
.lane-h { font-size: var(--step-row); font-weight: var(--weight-title); }
.bcard { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--ground); box-shadow: var(--shadow); font-size: var(--step-row); cursor: grab; }
.bcard b { font-weight: var(--weight-strong); }
.blk-table { min-width: 0; }

/* ================= the clean pass =================
   Quieter chrome and a database look for tables: view tabs, option pills, tinted lanes. Later rules win, so
   this block is the place to change how the app feels; the sections above say where things sit. */

/* Sidebar: small plain labels, compact rows, the current row is a soft fill with no outline */
.side h3 { margin: var(--space-5) 10px 4px; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.side .nav { min-height: 30px; height: 30px; padding-top: 0; padding-bottom: 0; font-size: 14px; border-radius: var(--radius-sm); }
.nav[aria-current="page"] { background: var(--selected); font-weight: 500; box-shadow: none; }
.side .brand { margin-bottom: 8px; }
.brand-name { font-size: 14px; }
.side .foot { border-top: 0; }
.nav.child { padding-left: calc(12px + var(--depth, 1) * 16px); }
.top { border-bottom: 0; font-weight: 500; color: var(--text-2); }
.kicker { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* Pages: a larger title, lighter chips, a breadcrumb back to the parent */
.doc-title { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.mchip { background: none; padding: 2px 0; margin-right: 10px; color: var(--muted); }
.crumb { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--space-3); padding: 2px 6px; margin-left: -6px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); font: 14px/1.5 var(--font-sans); cursor: pointer; }
.crumb:hover { background: var(--hover); color: var(--text); }
.blk-text .ed, .blk-todo .ed, .blk-li .ed { font-size: 16px; line-height: 1.6; }
.unitcard { padding: 14px 16px; }
.unitcard::before { display: none; }
.unit-num { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }

/* Option colours: one hue per value, used as a pill, a dot and a lane tint */
[data-tone="gray"] { --tone: #8d8d8a; } [data-tone="brown"] { --tone: #a27763; } [data-tone="orange"] { --tone: #d9730d; }
[data-tone="yellow"] { --tone: #cb912f; } [data-tone="green"] { --tone: #448361; } [data-tone="blue"] { --tone: #337ea9; }
[data-tone="purple"] { --tone: #9065b0; } [data-tone="pink"] { --tone: #c14c8a; } [data-tone="red"] { --tone: #d44c47; }
.opt { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 1px 9px 1px 7px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--tone, var(--faint)) 20%, var(--ground)); color: var(--text); font-size: 14px; line-height: 22px; white-space: nowrap; }
.opt::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--faint)); }
select.cell-in[data-tone] { width: auto; min-height: 24px; height: 24px; margin: 7px 8px; padding: 0 6px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--tone) 20%, var(--ground)); font-size: 14px; }

/* Tables as databases: tabs for the views on the left, tools on the right, a quiet grid below */
.tbl-head { display: flex; align-items: center; gap: 2px; margin: 6px 0 8px; flex-wrap: wrap; }
.vtab { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--muted); font: 500 14px/1 var(--font-sans); cursor: pointer; }
.vtab:hover { background: var(--hover); color: var(--text); }
.vtab[aria-pressed="true"] { background: var(--selected); color: var(--text); }
.vtab .ic { width: 16px; height: 16px; }
.tbl-head .tool { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); font: 500 13px/1 var(--font-sans); cursor: pointer; }
.tbl-head .tool:hover { background: var(--hover); color: var(--text); }
.tbl-head .tool[data-on] { color: var(--state-ink); }
.tbl-head .new { height: 30px; padding: 0 12px; margin-left: 6px; border: 0; border-radius: var(--radius-sm); background: var(--state); color: var(--on-state); font: 500 14px/1 var(--font-sans); cursor: pointer; }
.tbl-head .new:hover { filter: brightness(1.08); }
.blk-table .caption { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.tbl-wrap { border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; background: none; }
.tbl th { background: none; font-size: 13px; font-weight: 500; color: var(--muted); }
.tbl th .cell { color: var(--muted); }
.tbl .rowtool { border-right: 0; }
.tbl-add { display: block; width: 100%; padding: 8px 10px; border: 0; background: none; color: var(--muted); font: 14px/1.4 var(--font-sans); text-align: left; cursor: pointer; }
.tbl-add:hover { background: var(--hover); color: var(--text); }

/* Board: a tinted lane per option, a pill and a count on top, white cards, a new-card row at the bottom */
.kanban { gap: 10px; }
.klane { flex: 1 0 220px; max-width: 300px; padding: 8px; border-radius: var(--radius-lg); box-shadow: none; background: color-mix(in srgb, var(--tone, var(--faint)) 7%, var(--ground)); }
.lane-h { display: flex; align-items: center; gap: 8px; padding: 2px 2px 4px; font-weight: 500; }
.lane-h .small { color: color-mix(in srgb, var(--tone, var(--muted)) 70%, var(--text)); font-size: 14px; }
.bcard { padding: 10px 12px; border-radius: var(--radius); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent), 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent); font-size: 15px; }
.bcard:hover { background: var(--panel); }
.bcard b { font-weight: 500; }
.bcard .opt { justify-self: start; font-size: 12px; line-height: 20px; }
.lane-add { padding: 8px 10px; border: 0; border-radius: var(--radius); background: none; color: color-mix(in srgb, var(--tone, var(--muted)) 60%, var(--muted)); font: 14px/1.4 var(--font-sans); text-align: left; cursor: pointer; }
.lane-add:hover { background: color-mix(in srgb, var(--tone, var(--faint)) 12%, var(--ground)); }

/* Comments under a block, the count that opens them, who is typing where */
.cmt-count { display: inline-flex; align-items: center; gap: 5px; justify-self: start; margin: 2px 0 4px; padding: 1px 8px; border: 0; border-radius: var(--radius-pill); background: var(--hover); color: var(--text-2); font: 500 12px/20px var(--font-sans); cursor: pointer; }
.cmt-count:hover { background: var(--selected); color: var(--text); }
.cmt { display: grid; gap: var(--space-3); margin: 6px 0 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--panel); box-shadow: inset 0 0 0 1px var(--border); }
.blk-who { position: absolute; right: -28px; top: 4px; box-shadow: 0 0 0 2px var(--ground); }

/* History and the undo in a toast */
.hist { display: grid; gap: var(--space-2); max-height: 60dvh; overflow: auto; }
.hist h3 { margin-top: var(--space-3); font-size: 13px; font-weight: 500; color: var(--muted); }
.hist-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 8px 10px; border-radius: var(--radius-sm); }
.hist-row:hover { background: var(--hover); }
.hist-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.45; }
.toast-act { margin-left: 12px; padding: 2px 8px; border: 0; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--on-solid) 16%, transparent); color: inherit; font: inherit; cursor: pointer; }
.side .sec-head h3 { margin: 0; }
.side .sec-head { margin: var(--space-5) 4px 4px 10px; }

/* Page icons, the emoji picker, the calendar */
.pic { margin-right: 6px; font-style: normal; }
.side .nav .pic { flex: none; width: 17px; margin-right: -4px; text-align: center; font-size: 15px; }
.rail .nav { padding-left: 10px; }
.doc-icon { display: block; width: 56px; height: 56px; margin: 0 0 6px -8px; border: 0; border-radius: var(--radius); background: none; font-size: 40px; line-height: 56px; text-align: center; cursor: pointer; color: var(--faint); }
.doc-icon:hover { background: var(--hover); }
.emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.emoji-grid button { height: 34px; border: 0; border-radius: var(--radius-sm); background: none; font-size: 20px; cursor: pointer; }
.emoji-grid button:hover { background: var(--hover); }
.cal-bar { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; font-size: 15px; }
.cal-bar .tool { height: 28px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); font: 500 13px/1 var(--font-sans); cursor: pointer; }
.cal-bar .tool:hover { background: var(--hover); color: var(--text); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.cal-w { padding: 4px 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.cday { display: grid; align-content: start; gap: 3px; min-height: 88px; padding: 4px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cday.out { background: var(--panel); color: var(--faint); }
.cday-h { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; font-size: 13px; color: var(--muted); }
.cday.today .cday-h span { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; background: var(--state); color: var(--on-state); font-weight: 500; }
.cday-add { visibility: hidden; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; }
.cday:hover .cday-add { visibility: visible; }
.cchip { padding: 2px 8px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--tone, var(--faint)) 18%, var(--ground)); font-size: 13px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: grab; }

/* Sidebar icons, the favourite star, the timeline */
.side .nav .ic { flex: none; width: 17px; height: 17px; margin-right: -4px; color: var(--muted); }
.side .nav > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.star .ic { width: 17px; height: 17px; }
.star[aria-pressed="true"] { color: var(--warn); }
.star[aria-pressed="true"] .ic path { fill: currentColor; }
.tl { display: grid; gap: 4px; overflow-x: auto; padding-bottom: 6px; border-top: 1px solid var(--border); }
.tl-row { display: grid; grid-template-columns: repeat(var(--days), 34px); width: max-content; }
.tl-days { border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.tl-days span { padding: 4px 0; text-align: center; font-size: 12px; color: var(--muted); }
.tl-days .today { color: var(--state-ink); font-weight: 600; }
.tl-bar { padding: 3px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--tone, var(--faint)) 22%, var(--ground)); font-size: 13px; line-height: 20px; white-space: nowrap; }   /* a one-day bar lets its name run on to the right */

/* The new-page choices: a compact list of options, one selected */
.dlg .choice { grid-template-columns: 1fr 1fr; gap: 8px; }
.dlg .choice label { padding: 10px 12px; box-shadow: none; border-width: 1px; }
.dlg .choice label b { font-weight: 500; font-size: 14px; }
.dlg .choice label span { font-size: 12px; line-height: 1.35; color: var(--muted); }
.dlg .choice input { position: absolute; opacity: 0; pointer-events: none; }
.dlg .choice label:has(input:checked) { border-color: var(--state); background: var(--state-soft); box-shadow: 0 0 0 1px var(--state); }
.page.home .sec-head h3, .page.home h3 { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .doc-title { font-size: 30px; }
  .doc-icon { width: 44px; height: 44px; margin-left: -4px; font-size: 32px; line-height: 44px; }
  .page.doc .page-head { padding-left: 30px; }           /* the title starts where the blocks do, right of the handle gutter */
  .title-acts .btn { padding: 0 8px; }
  /* Views on one row, the table's tools on the next: nothing hides off the edge. */
  .tbl-head { flex-wrap: wrap; row-gap: 4px; }
  .tbl-head > * { flex: none; }
  .tbl-head .vtab { padding: 0 8px; }
  .tbl-head .vtab:not([aria-pressed="true"]) { font-size: 0; gap: 0; }   /* icons, with the open view still named */
  .tbl-head .grow { flex: 1 0 100%; height: 0; }
  .tbl-head .tool { font-size: 0; gap: 0; width: 32px; justify-content: center; }   /* icon only */
  .kanban { margin-right: -12px; padding-right: 12px; scroll-snap-type: x proximity; }
  .klane { flex: 0 0 78vw; max-width: 78vw; scroll-snap-align: start; }
  .cal-w { padding: 4px 2px; text-align: center; font-size: 11px; }
  .cday { min-height: 64px; padding: 2px; }
  .cday-h { padding: 0 2px; font-size: 12px; }
  .cday-add { display: none; }
  .cchip { padding: 1px 4px; font-size: 11px; line-height: 16px; }
  .dlg .choice { grid-template-columns: 1fr; }
  .cmt { padding: 10px; }
  .blk-who { right: 2px; }
}

/* Code, artifacts, the list view, a lighter callout */
.blk-code { padding: 12px 14px; border-radius: var(--radius); background: var(--panel); box-shadow: inset 0 0 0 1px var(--border); overflow-x: auto; }
.blk-code .ed { font: 13.5px/1.6 var(--font-mono), ui-monospace, Menlo, monospace; white-space: pre; tab-size: 2; min-height: 1.6em; }
.blk-code .ed:focus { background: none; box-shadow: none; }
.blk-embed { display: grid; gap: 6px; }
.embed-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.embed-frame { width: 100%; height: 420px; border: 0; border-radius: var(--radius); background: #fff; box-shadow: 0 0 0 1px var(--border); resize: vertical; }
.dlist { border-top: 1px solid var(--border); }
.drow { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.drow:hover { background: var(--hover); }
.drow .cell { flex: 1; min-width: 0; font-weight: 500; font-size: 15px; }
.dbits { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.blk-callout { grid-template-columns: auto minmax(0, 1fr); gap: 10px; border: 0; border-left: 0; background: var(--panel); box-shadow: inset 0 0 0 1px var(--border); }
.blk-callout::before { content: "💡"; font-size: 18px; line-height: 1.5; }

/* A page that holds a board, calendar or timeline gets room for it */
.page.doc:has(.kanban), .page.doc:has(.cal), .page.doc:has(.tl), .page.doc:has(.tbl-wrap) { max-width: none; padding-inline: clamp(var(--space-6), 6vw, 96px); }
.toc:has(+ .page.doc :is(.kanban, .cal, .tl, .tbl-wrap)) { display: none; }
/* Text keeps a readable measure; only the data blocks take the whole width. */
.page.doc:is(:has(.kanban), :has(.cal), :has(.tl), :has(.tbl-wrap)) .blk:not([data-type="table"], [data-type="image"], [data-type="embed"], [data-type="chart"]) { max-width: 760px; }
@media (min-width: 761px) { .page.doc .klane { max-width: none; } }

.section-title { font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.unit-title .pic { margin-right: 8px; }

/* ---------- tabs across the top, the quick row in the sidebar ---------- */
.top { background: var(--panel); padding-left: 8px; gap: 8px; }
.tabs { display: flex; align-items: flex-end; align-self: stretch; gap: 2px; flex: 1; min-width: 0; padding-top: 6px; overflow: hidden; }
.tab-nav, .tab-add { flex: none; align-self: center; width: 28px; height: 28px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.tab-nav:hover, .tab-add:hover { background: var(--hover); color: var(--text); }
.tab { display: flex; align-items: center; gap: 8px; flex: 0 1 200px; min-width: 60px; height: 100%; padding: 0 6px 0 12px; border-radius: var(--radius) var(--radius) 0 0; color: var(--text-2); font-size: 14px; font-weight: 500; cursor: pointer; }
.tab > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab .ic { flex: none; width: 16px; height: 16px; color: var(--muted); }
.tab .pic { margin: 0; }
.tab:hover { background: var(--hover); }
.tab[aria-selected="true"] { background: var(--ground); color: var(--text); }
.tab-x { flex: none; width: 20px; height: 20px; border: 0; border-radius: 5px; background: none; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; visibility: hidden; }
.tab:hover .tab-x, .tab[aria-selected="true"] .tab-x { visibility: visible; }
.tab-x:hover { background: var(--selected); color: var(--text); }
.top .title.ws-top { display: none; }
.quick { display: flex; align-items: center; gap: 2px; margin-bottom: 4px; }
.quick .nav.home { flex: 0 1 auto; width: auto; padding-right: 12px; border-radius: var(--radius-pill); font-weight: 500; }
.quick .nav.home > span { flex: none; }
.qbtn { position: relative; display: grid; place-items: center; flex: none; width: 32px; height: 30px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; }
.qbtn:hover, .qbtn[aria-current="page"] { background: var(--selected); color: var(--text); }
.qbtn .ic { width: 18px; height: 18px; }
.qbtn .badge-slot { position: absolute; top: -3px; right: -4px; transform: scale(.8); }
.qbtn[data-act="search"] { margin-left: auto; }
@media (max-width: 760px) {
  .tabs { display: none; }
  .top .title.ws-top { display: grid; }
  .top { background: var(--bg); padding-left: var(--space-4); }
  .qbtn { width: 44px; height: 40px; }
  .quick .nav.home { height: 40px; }
}
/* Sign-in: one card, one action. */
.signin { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-4); background: var(--panel); }
.signin-card { width: min(380px, 100%); display: grid; gap: var(--space-4); padding: var(--space-8) var(--space-6); background: var(--ground); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.signin-mark { width: 40px; height: auto; }
.signin-title { font-family: var(--font-serif); font-size: var(--step-title); line-height: var(--lh-title); font-weight: var(--weight-title); letter-spacing: var(--tr-title); }
.signin-error { min-height: var(--lh-small); font-size: var(--step-small); color: var(--danger); }
.signin-error:empty { display: none; }
.signin-help { color: var(--muted); }
.signin .label .field { margin-top: 6px; }

/* People (admin) */
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.people-row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--row-list); }
.people-row.is-off { opacity: 0.55; }
.people-name { flex: 1; display: grid; font-weight: var(--weight-strong); }
.people-name .small { color: var(--muted); font-weight: var(--weight-body); }

/* A row's own page: its other cells as a quiet two-column list under the title. */
.props { display: grid; gap: 2px; margin: var(--space-4) 0 0; padding: var(--space-3) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.prop { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; align-items: center; gap: var(--space-3); min-height: 34px; }
.prop dt { color: var(--muted); font-size: var(--step-row); }
.prop dd { margin: 0; min-width: 0; }
@media (max-width: 640px) { .prop { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 6px; } }
.prop .cell-in, .prop .ed.cell { width: 100%; min-height: 30px; padding: 4px 8px; border-radius: var(--radius-sm); }
.prop .ed.cell:hover, .prop .cell-in:hover { background: var(--hover); }
.bcard { position: relative; }
.bcard .row-open { position: absolute; top: 6px; right: 6px; }
.row-open { padding: 2px 8px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); font: 500 12px/18px var(--font-sans); cursor: pointer; opacity: 0; transition: opacity var(--motion); }
.bcard:hover .row-open, .drow:hover .row-open, .row-open:focus-visible { opacity: 1; }
.row-open:hover { background: var(--hover); color: var(--text); }
.drow .row-open { margin-left: auto; flex: none; }
@media (hover: none) { .row-open { opacity: 1; } }

/* Email: a draft on the page that a person sends from their own mailbox. */
.blk-email { border: 1px solid var(--border); border-radius: var(--radius); background: var(--ground); overflow: hidden; margin: 6px 0; }
.em-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.em-k { font-size: 13px; color: var(--muted); }
.em-to { width: 100%; border: 0; background: none; font: inherit; color: var(--text); padding: 0; outline: none; }
.em-subj, .em-row .ed { font-weight: 600; }
.em-body { padding: 12px 14px; min-height: 96px; }
.em-text { white-space: pre-wrap; }
.em-body .ed { line-height: 1.6; }
.em-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--border); background: var(--panel); }
.em-foot .small { margin-right: auto; color: var(--muted); }
.blk-email[data-sent] .em-foot .small { margin-right: 0; }
.blk-post { border: 1px solid var(--border); border-radius: var(--radius); background: var(--ground); overflow: hidden; margin: 6px 0; }
.po-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.po-head select { field-sizing: content; border: 0; background: none; font: inherit; font-size: 13px; color: var(--text); padding: 4px; border-radius: var(--radius-sm); cursor: pointer; }
.po-head select:hover:not(:disabled) { background: var(--hover); }
.po-head select:disabled { cursor: default; appearance: none; }
.po-head .po-sender { font-weight: var(--weight-strong); color: var(--who); }
.po-why { flex: 1 1 200px; min-width: 0; font-size: 13px; color: var(--muted); }
.po-body { padding: 12px 14px; min-height: 72px; }
.po-body .ed { line-height: 1.6; white-space: pre-wrap; }
.po-check { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 0 14px 10px; font-size: 13px; color: var(--muted); }
.po-check:empty { display: none; }
.po-count { font-variant-numeric: tabular-nums; }
.po-count[data-over] { color: var(--danger); }
.po-tells { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.po-k { color: var(--text); }
.po-tell { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; border-bottom: 1px dotted var(--border-strong); }
.po-tell:hover { color: var(--text); }
.po-foot { display: flex; align-items: center; gap: 4px; padding: 8px 10px 8px 14px; border-top: 1px solid var(--border); background: var(--panel); }

/* Email with a row's contact, under its fields. */
.mail { margin: var(--space-4) 0 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.mail-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 14px; background: var(--panel); font-size: var(--step-row); color: var(--text-2); border-bottom: 1px solid var(--border); }
.mail-msg + .mail-msg { border-top: 1px solid var(--border); }
.mail-sum { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr) auto; gap: 12px; align-items: baseline; width: 100%; padding: 9px 14px; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.mail-sum:hover { background: var(--hover); }
.mail-from { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-sum .small { color: var(--muted); }
.mail-text { padding: 4px 14px 12px; white-space: pre-wrap; line-height: 1.6; max-height: 420px; overflow: auto; }
.mail-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--border); background: var(--panel); }
.mail-act .small { color: var(--muted); }
@media (max-width: 640px) { .mail-sum { grid-template-columns: 1fr auto; } .mail-subj { grid-column: 1 / -1; grid-row: 2; } }

/* Chart: a table's rows counted or summed by one column. One series, so one colour; values are written, not guessed. */
.blk-chart { margin: 6px 0; padding: 12px 14px 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.chart-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.chart-h figcaption { min-width: 0; }
.chart-h .small { color: var(--muted); }
.bars { display: grid; gap: 2px; }
.bar-row { display: grid; grid-template-columns: minmax(80px, 30%) minmax(0, 1fr); align-items: center; gap: 12px; min-height: 28px; border-radius: var(--radius-sm); }
.bar-row:hover { background: var(--hover); }
.bar-k { font-size: var(--step-row); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 4px; }
.bar-track { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bar { display: block; width: var(--w); min-width: 2px; height: 16px; background: var(--state); border-radius: 0 4px 4px 0; }
.bar-v { font-size: var(--step-row); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (forced-colors: active) { .bar { background: CanvasText; } }
.meet { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 9px 14px; }
.meet + .meet { border-top: 1px solid var(--border); }
.meet-when { font-variant-numeric: tabular-nums; color: var(--text-2); font-size: var(--step-row); }
.meet-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meet .small { color: var(--muted); }
.meet[data-next] .meet-when { color: var(--text); font-weight: 600; }
@media (max-width: 640px) { .meet { grid-template-columns: 1fr auto; } .meet-title { grid-column: 1 / -1; grid-row: 2; } }
.nl-preview { max-height: 180px; overflow: auto; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); font: 13px/1.5 var(--font-sans); white-space: pre-wrap; }
/* Long text (a lead's message) shows three lines in a table; it opens in full while you edit it, and on the row's page. */
.tbl tbody .ed.cell:not(:focus) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; padding-bottom: 0; border-bottom: 8px solid transparent; }

/* An agent run, in place of its hand-off comment: what it is doing now, then what it did. Status is a glyph and a word;
   the state colour is spent only on a run that is going. */
.run { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); margin-top: 2px; }
.run-all, .run-trail { min-width: 0; overflow: hidden; }
.run-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); margin: 0; }
.run-glyph { width: 1ch; text-align: center; color: var(--text-2); }
.run[data-s="live"] .run-glyph, .live-dot { color: var(--state); }
.run[data-s="failed"] .run-glyph { color: var(--danger); }
.run-now b { font-weight: 600; }
.run-detail { min-width: 0; color: var(--text-2); overflow-wrap: anywhere; }
.run-line { display: inline-flex; align-items: baseline; gap: var(--space-2); max-width: 100%; margin-left: var(--space-2); padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.run-line:hover { color: var(--text); }
.run-line[data-s="live"] .run-glyph { color: var(--state); }
.run-trail { margin: 0; padding-left: calc(1ch + var(--space-2)); list-style: none; color: var(--muted); }
.run-trail li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-all summary { cursor: pointer; color: var(--text-2); width: max-content; }
.run-all[open] .run-trail { margin-top: var(--space-1); }
.run-acts { display: flex; flex-wrap: wrap; gap: var(--space-3); color: var(--text-2); }
.run-acts:empty { display: none; }
.run-acts a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }

/* An agent in the team list: the row goes to where it works, and Ask sits beside it. */
.mate { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
/* Two lines a row (name, then where or what it is doing), so the sidebar's one-line row height doesn't hold here. */
.side .who-online .nav { height: auto; padding-top: 4px; padding-bottom: 4px; }
.side .who-online .nav > span:last-child { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mate-ask { margin-right: var(--space-2); }

/* A post's schedule, media and the Publishing page. */
.po-state { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.po-state[data-bad] { color: var(--danger); font-weight: var(--weight-strong); }
.po-hold { color: var(--warn); }
.po-hold::before { content: "· "; color: var(--muted); }
.po-error { margin: 0 14px 10px; font-size: 13px; color: var(--text-2); }
.po-media { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 14px 12px; }
.po-add { margin-left: -8px; }
.po-file { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); }
.po-file img, .po-file .file-ext { width: 40px; height: 40px; flex: none; object-fit: cover; border-radius: calc(var(--radius-sm) - 2px); }
.po-file .file-ext { display: grid; place-items: center; background: var(--hover); font-size: 11px; text-transform: uppercase; color: var(--muted); }
.po-file .small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.pub .section-title { margin-top: var(--space-5); }
.pub-list { display: flex; flex-direction: column; margin-bottom: var(--space-3); }
.pub-row { display: grid; grid-template-columns: 150px 150px 1fr; gap: 4px 12px; align-items: baseline; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.pub-row:hover { background: var(--hover); }
.pub-when { font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.pub-acct { color: var(--muted); }
.pub-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-err { grid-column: 1 / -1; color: var(--danger); }
.pub-acct-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.pub-acct-row > :first-child { flex: 1 1 240px; }
@media (max-width: 640px) {
  .pub-row { grid-template-columns: auto 1fr; }
  .pub-acct { text-align: right; }
  .pub-text { grid-column: 1 / -1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
.pub-acct-row b { font-weight: var(--weight-strong); }
.pub-meta { display: block; color: var(--muted); }
.pub-status { color: var(--text-2); }
.pub-status[data-hold] { color: var(--warn); }
.po-foot [data-act="post-more"] { color: var(--text); padding-inline: 6px; }
.po-foot [data-act="post-more"] .ic { width: 20px; height: 20px; stroke-width: 2.6; }

/* Sidebar: the workspace, who you are and the quick buttons stay put; only the pages scroll under them. */
.side { overflow: hidden; padding-bottom: 0; }
.side-top { flex: none; display: grid; gap: 2px; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -12px; padding: 0 12px 16px; scrollbar-width: thin; scrollbar-gutter: stable; }
.side .who { display: flex; align-items: center; gap: 2px; padding: 0; margin-bottom: var(--space-1); }
.who-me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 6px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: 500 14px/1.4 var(--font-sans); cursor: pointer; text-align: left; }
.who-me:hover { background: var(--hover); }
.who-me .avatar { width: 22px; height: 22px; font-size: 9px; }
.who-me .who-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.who-me .ic { flex: none; width: 16px; height: 16px; color: var(--muted); }
.who-theme { flex: none; width: 32px; padding: 0; color: var(--text-2); }
.who-theme .ic { width: 17px; height: 17px; }
.people-more .ic { color: var(--text-2); }

/* A tab's label keeps room for g, p and y. */
.tab > span { line-height: 1.5; padding-block: 1px; }

/* People: one tidy line each; the role is a picker, everything else is in the row's menu. */
.dlg-wide { width: min(640px, calc(100vw - 32px)); }
.people { gap: 0; }
.people-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 32px; gap: var(--space-3); padding: 8px 0; border-bottom: 1px solid var(--border); }
.people-row:last-child { border-bottom: 0; }
.people-row .avatar { width: 28px; height: 28px; }
.people-name { min-width: 0; gap: 1px; }
.people-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-role { justify-self: end; }
select.people-role { height: 30px; padding: 0 26px 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background-color: var(--ground); color: var(--text); font: 14px var(--font-sans); }
span.people-role { padding-right: 10px; color: var(--muted); }
.people-more { width: 32px; padding: 0; justify-self: end; }

/* Board cards: the name, a line of labels, then the text, quieter and cut to two lines. Click opens the row. */
.kanban .klane { gap: 10px; }
.bcard { display: grid; gap: 8px; padding: 12px 14px; cursor: pointer; }
.bcard:focus-visible { outline: 2px solid var(--state, #f59e0b); outline-offset: 2px; }
.btitle { font-weight: 600; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.bmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.bmeta .opt { font-size: 12px; line-height: 20px; }
.bmeta-who { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-2); }
.bmeta-who .avatar { width: 18px; height: 18px; }
.bmeta-date { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.btext { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* A row opened from a card. */
.peek-title { width: 100%; border: 0; background: none; color: var(--text); font: 600 22px/1.3 var(--font-sans); padding: 2px 0 var(--space-3); outline: none; }
.peek-grid { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); gap: 10px 16px; margin: 0 0 var(--space-4); align-items: center; }
.peek-grid dt { font-size: 13px; color: var(--muted); }
.peek-grid dd { margin: 0; min-width: 0; }
.peek-grid .field { width: 100%; }
.peek-grid textarea.field { resize: vertical; line-height: 1.5; }
.peek-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
@media (max-width: 760px) {
  .peek-grid { grid-template-columns: 1fr; gap: 4px; }
  .peek-grid dd { margin-bottom: 8px; }
  .people-row { grid-template-columns: auto minmax(0, 1fr) 32px; }
  .people-role { grid-column: 2; justify-self: start; }
}
.peek .dlg-actions { position: sticky; bottom: calc(-1 * var(--space-6)); margin-bottom: calc(-1 * var(--space-6)); padding: 12px 0 var(--space-6); background: var(--ground); border-top: 1px solid var(--border); }