/* Linear's method: surface ladder + hairlines carry all hierarchy. No shadows anywhere.
   Every value reads from a custom property set by theme.js. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ground); color: var(--t1);
  font-family: var(--font-ui);
  font-size: 13px; line-height: 1.45;
  font-feature-settings: "cv01" 1, "ss03" 1;
  font-weight: 400;
  overflow-x: hidden;
}

/* THE GRAIN.
   -webkit-font-smoothing: antialiased was set globally. It turns off subpixel
   rendering, which is correct for light text on a dark ground and wrong for
   dark text on white: on macOS it thins every stem and the result reads as
   grainy, which is exactly what it looked like. So it is applied to the dark
   theme only, and light mode gets the subpixel rendering the platform is good
   at. text-rendering: optimizeLegibility went with it -- it changes kerning
   and ligature behaviour unpredictably and buys nothing here. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] button {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button, select { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--r-sm); }
.mono { font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: -.01em; }
.w510 { font-weight: 510; font-weight: 510; }

/* every inline svg must be sized or it renders at the SVG default and blows out the layout */
svg.ico, svg.chev, svg.glyph { flex: 0 0 auto; stroke-width: 1.6; display: block; }
svg.ico   { width: 15px; height: 15px; }
svg.chev  { width: 14px; height: 14px; }
svg.glyph { width: 22px; height: 22px; }
.sq svg.ico { width: 12px; height: 12px; }
.rt svg.chev { color: var(--t3); }

/* ── shell ───────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 232px minmax(0,1fr); min-height: 100vh; min-height: 100svh; }
.side {
  background: var(--s1); border-right: 1px solid var(--h1);
  display: flex; flex-direction: column; position: sticky; top: 0;
  height: 100vh; height: 100svh;
}

/* client switcher */
.switch { padding: 8px; border-bottom: 1px solid var(--h1); position: relative; }
.switch-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: var(--r); min-height: 38px; text-align: left;
}
.switch-btn:hover { background: var(--s3); }
.sq {
  width: 20px; height: 20px; border-radius: var(--r-sm); flex: 0 0 auto;
  background: var(--s4); border: 1px solid var(--h2); color: var(--t2);
  display: grid; place-items: center; font-size: 9.5px; letter-spacing: .02em;
  font-weight: 510;
}
.switch-btn .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 510; }
.switch-btn .chev { color: var(--t3); }
.menu {
  position: absolute; left: 8px; right: 8px; top: calc(100% - 2px); z-index: 60;
  background: var(--s2); border: 1px solid var(--h2); border-radius: var(--r-lg);
  padding: 4px; display: none;
}
.menu.on { display: block; }
.menu button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); min-height: 34px; text-align: left; }
.menu button:hover { background: var(--s4); }
.menu .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu .tick { color: var(--accent); }

/* nav */
.nav { padding: 8px 8px 4px; display: flex; flex-direction: column; gap: 1px; flex: 1; overflow-y: auto; }
.nav .grp { font-size: 10.5px; color: var(--t3); padding: 10px 8px 4px; letter-spacing: .02em; }
.nav a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); color: var(--t2); min-height: 30px; }
.nav a:hover { background: var(--s3); color: var(--t1); }
.nav a.on { background: var(--s3); color: var(--t1); font-weight: 510; }
.nav .ico { width: 15px; height: 15px; flex: 0 0 auto; stroke-width: 1.6; opacity: .85; }
.nav .ct { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--t3); }

.side-foot { padding: 8px; border-top: 1px solid var(--h1); }

/* ── main ────────────────────────────────────────────── */
.main { min-width: 0; display: flex; flex-direction: column; }
.top {
  display: flex; align-items: center; gap: 10px; min-height: 45px;
  padding: 0 clamp(12px, 2.5vw, 24px); border-bottom: 1px solid var(--h1);
  background: var(--ground); position: sticky; top: 0; z-index: 30;
}
.burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--r-sm); margin-left: -10px; }
.burger:hover { background: var(--s3); }
.crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
.crumb .sep { color: var(--t3); }
.crumb .up { color: var(--t3); }
.crumb .up:hover { color: var(--t1); }
.crumb .cur { font-weight: 510; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .right { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--t3); font-size: 12px; }

.wrap { padding: clamp(14px, 2.5vw, 26px); max-width: 1080px; width: 100%; }
.pagehead { margin-bottom: 18px; }
.pagehead h1 { margin: 0; font-size: 19px; letter-spacing: -.015em; font-weight: 590; }
.pagehead p { margin: 4px 0 0; color: var(--t2); font-size: 13px; }

/* ── section ─────────────────────────────────────────── */
/* NOTE: .sec is also the secondary-button modifier (.btn.sec). These header
   rules are scoped to div.sec so they can never land on a button again. That
   collision put a 24px top margin on every secondary button in the app. */
div.sec { display: flex; align-items: center; gap: 8px; margin: 24px 0 8px; }
div.sec:first-child { margin-top: 0; }
div.sec h2 { margin: 0; font-size: 12px; color: var(--t2); font-weight: 510; letter-spacing: .01em; }
div.sec .n { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--t3); }
/* A section header's action belongs on the right, always. Doing it here rather
   than by remembering a <span class="spacer"> in each of the twenty-eight
   headers is the difference between a rule and a habit: the first control in a
   header takes the gap, and everything after it rides along. */
div.sec > .more,
div.sec > button:first-of-type,
div.sec > .btn:first-of-type,
div.sec > .spacer + * { margin-left: auto; }
div.sec > .spacer { flex: 1; }
div.sec > button:not(:first-of-type),
div.sec > .btn:not(:first-of-type) { margin-left: 0; }
div.sec .more { font-size: 12px; color: var(--t3); }
div.sec .more:hover { color: var(--t1); }

/* ── panel: hairline box, no shadow ──────────────────── */
.panel { background: var(--s1); border: 1px solid var(--h1); border-radius: var(--r-lg); overflow: hidden; }
/* every number in the interface lines up in its column */
.n, .waited, .when, .cksum, .tday, .meter + .waited { font-variant-numeric: tabular-nums; }
.row {
  display: grid; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--h1); width: 100%; text-align: left;
}
.row:last-child { border-bottom: 0; }
.row { transition: background .1s ease; }
.row:hover { background: var(--s2); }
.row .ttl { display: block; font-weight: 510; letter-spacing: -.003em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The subtitle used to sit at 13px against a 13.5px title, so the eye had to
   read both to find out which was which. It is the second line now. */
.row .sub { display: block; color: var(--t3); font-size: 12.5px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row:hover .sub { color: var(--t2); }
.row .rt { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* Every row is its own grid container, so a trailing `auto` track resolves
   against that row's content and nothing lines up down the page. It is why
   "Urgent" sat at a different x on every line. Trailing columns are fixed and
   their contents right-aligned, so the columns are columns. */
.r-need  { grid-template-columns: 18px minmax(0,1fr) 216px; }
.r-proj  { grid-template-columns: minmax(0,1fr) 150px 118px 128px; }
.r-file  { grid-template-columns: 20px minmax(0,1fr) 106px 118px 128px; }
.r-cli   { grid-template-columns: 20px minmax(0,1fr) 106px 94px 128px; }
.r-need > :last-child, .r-proj > :last-child,
.r-file > :last-child, .r-cli > :last-child, .r-task > :last-child { justify-self: end; }

/* ── status: a dot and a word. no filled pills. ──────── */
.st { display: inline-flex; align-items: center; gap: 6px; color: var(--t2); font-size: 12.5px; white-space: nowrap; }
.st::before { content: ""; width: 5.5px; height: 5.5px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto; transform: translateY(-0.5px); }
.st.idle   { color: var(--idle); }
.st.accent { color: var(--accent); }
.st.wait   { color: var(--wait); }
.st.ok     { color: var(--ok); }

/* ── meter ───────────────────────────────────────────── */
.meter { height: 3px; border-radius: 999px; background: var(--s4); overflow: hidden; min-width: 60px; }
.meter i { display: block; height: 100%; background: var(--accent); }
.meter.ok i { background: var(--ok); }

/* ── buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--accent); color: var(--on-accent);
  border: 1px solid transparent;          /* same geometry as .btn.sec */
  border-radius: var(--r); padding: 5px 11px;
  font-size: 12.5px; line-height: 1; font-weight: 510;
  height: 32px; min-height: 32px; white-space: nowrap; vertical-align: middle;
}
.btn { transition: background .12s ease, border-color .12s ease, transform .06s ease; }
.btn:hover { background: var(--accent-h); }
.btn:active { transform: translateY(0.5px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.sec { background: var(--s3); color: var(--t1); border-color: var(--h1); }
.btn.sec:hover { background: var(--s4); border-color: var(--h2); }
.btn.sm { height: 27px; min-height: 27px; padding: 4px 10px; font-size: 12px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--accent); }
.btn.sec[disabled]:hover { background: var(--s3); }
.waited { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--t3); white-space: nowrap; }
.waited.late { color: var(--late); }

/* ── feed ────────────────────────────────────────────── */
.feed .ev { display: grid; grid-template-columns: 6px minmax(0,1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--h1); }
.feed .ev:last-child { border-bottom: 0; }
.feed .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--h3); transform: translateY(-2px); }
.feed .dot.client { background: var(--accent); }
.feed .txt { color: var(--t2); }
.feed .txt b { color: var(--t1); font-weight: 510; }
.feed .when { font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--t3); white-space: nowrap; }

.empty { padding: 26px 14px; text-align: center; color: var(--t3); font-size: 12.5px; }

/* ── mobile ──────────────────────────────────────────── */
.scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 50; }
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0,1fr); }
  .burger { display: flex; }
  .side { position: fixed; inset: 0 auto 0 0; width: min(84vw, 290px); z-index: 60; transform: translateX(-102%); transition: transform .2s ease; }
  .side.open { transform: none; }
  .scrim.on { display: block; }
  .r-proj { grid-template-columns: minmax(0,1fr) auto; }
  .r-file { grid-template-columns: 20px minmax(0,1fr) auto; }
  .r-cli  { grid-template-columns: 20px minmax(0,1fr) auto; }
  .r-proj .hide-sm, .r-file .hide-sm, .r-cli .hide-sm, .r-task .hide-sm { display: none; }
}
@media (max-width: 560px) {
  .r-need { grid-template-columns: 16px minmax(0,1fr); }
  .r-need .rt { grid-column: 2; }
}


/* ── brand ───────────────────────────────────────────── */
.brand {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px 11px; border-bottom: 1px solid var(--h1);
  color: var(--t1); min-height: 45px;
}
.brand:hover .brandname { color: var(--t1); }
.emblem { width: 13px; height: 19px; flex: 0 0 auto; display: block; }
.brandname { font-size: 13.5px; letter-spacing: -.008em; font-weight: 590; }

/* ── theme toggle, docs-site pattern ─────────────────── */
.theme-toggle {
  width: 28px; height: 28px; border: 1px solid var(--h2); border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--t3); background: none;
  transition: color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { color: var(--t1); border-color: var(--h3); }
[data-theme="dark"] .sun-icon  { display: block; }
[data-theme="dark"] .moon-icon { display: none; }
[data-theme="light"] .sun-icon,
:root:not([data-theme="dark"]) .sun-icon  { display: none; }
[data-theme="light"] .moon-icon,
:root:not([data-theme="dark"]) .moon-icon { display: block; }

/* ── switcher: agency entry sits inside the menu (GHL) ─ */
.menu .divide { height: 1px; background: var(--h1); margin: 4px 2px; }
.menu .head { font-size: 10.5px; color: var(--t3); padding: 6px 8px 3px; }
.sq.agency { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.switch-btn .ctx { font-size: 10.5px; color: var(--t3); display: block; margin-top: 1px; font-weight: 400; }
.switch-btn .nm { display: block; }

/* ── settings ────────────────────────────────────────── */
.foot-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--r-sm); color: var(--t2); min-height: 34px; text-align: left;
}
.foot-btn:hover { background: var(--s3); color: var(--t1); }
.foot-btn.on { background: var(--s3); color: var(--t1); }
.foot-btn .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot-btn .ico { width: 15px; height: 15px; opacity: .85; stroke-width: 1.6; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--h1); margin-bottom: 20px; }
.tabs button { padding: 7px 11px; font-size: 12.5px; color: var(--t3); border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 34px; }
.tabs button:hover { color: var(--t1); }
.tabs button.on { color: var(--t1); border-bottom-color: var(--accent); font-weight: 510; }

/* ── form primitives ──────────────────────────────────────────────────────
   Every modal in the app is built from these, so they are the only place worth
   fixing. Two faults ran through all of them: `textarea` had no rule at all,
   which is why every one of them rendered in the browser's default monospace,
   and the check list had no rule at all either, which is why it was native
   checkboxes at native size. Both looked like a design decision. Neither was
   one. */
.form { max-width: 460px; display: flex; flex-direction: column; gap: 15px; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld label { font-size: 12px; color: var(--t2); display: flex; align-items: center; gap: 8px; }
.fld label .lbl-rt { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; }
.fld .cksum { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--t3); }

.fld input, .fld select, .fld textarea {
  font: inherit; font-size: 13px; line-height: 1.5;
  background: var(--s2); border: 1px solid var(--h1); border-radius: var(--r);
  padding: 8px 11px; color: var(--t1); width: 100%;
  transition: border-color .12s ease, background .12s ease;
}
.fld input, .fld select { min-height: 34px; }
.fld textarea { resize: vertical; }
.fld input:hover, .fld select:hover, .fld textarea:hover { background: var(--s3); }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: none; border-color: var(--accent); background: var(--s3); }
.fld input::placeholder, .fld textarea::placeholder { color: var(--h2); }
.fld .hint { font-size: 12px; color: var(--t3); line-height: 1.5; }

/* a select that does not wear the operating system's chrome */
.selwrap { position: relative; display: block; }
.selwrap select { -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer; }
.selwrap .chev { position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; color: var(--t3); pointer-events: none; }

/* the check list: a dense list of options, not a stack of native boxes */
.checklist { border: 1px solid var(--h1); border-radius: var(--r); overflow: hidden; background: var(--s2); }
.checklist .ck { display: flex; align-items: center; gap: 9px; padding: 7px 11px;
  border-bottom: 1px solid var(--h1); cursor: pointer; font-size: 13px; color: var(--t2);
  transition: background .12s ease, color .12s ease; }
.checklist .ck:last-child { border-bottom: 0; }
.checklist .ck:hover { background: var(--s3); color: var(--t1); }
.checklist .ck.on { color: var(--t1); }
.checklist .ck input { position: absolute; opacity: 0; width: 0; height: 0; }
.checklist .ck .box { width: 15px; height: 15px; border-radius: 4px; flex: none;
  border: 1px solid var(--h2); background: var(--s1); display: grid; place-items: center;
  transition: background .12s ease, border-color .12s ease; }
.checklist .ck .box .glyph { width: 10px; height: 10px; color: var(--on-accent); opacity: 0; stroke-width: 3; }
.checklist .ck.on .box { background: var(--accent); border-color: var(--accent); }
.checklist .ck.on .box .glyph { opacity: 1; }
.checklist .ck input:focus-visible + .box { outline: 2px solid var(--accent); outline-offset: 2px; }
.checklist .ck-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.checklist .ck-s { font-size: 11.5px; color: var(--t3); }
.checklist .sq.xs { flex: none; }

/* one-click starters, so an empty box is never the only way in */
.presets { display: flex; flex-wrap: wrap; gap: 5px; }
.presets button { font-size: 11.5px; color: var(--t3); background: var(--s2);
  border: 1px solid var(--h1); border-radius: 20px; padding: 3px 10px; min-height: 24px;
  transition: color .12s ease, border-color .12s ease, background .12s ease; }
.presets button:hover { color: var(--t1); border-color: var(--h2); background: var(--s3); }
.presets button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.avatar-row { display: flex; align-items: center; gap: 14px; }
.avatar-lg {
  width: 56px; height: 56px; border-radius: var(--r-lg); flex: 0 0 auto;
  background: var(--s3); border: 1px solid var(--h2); color: var(--t2);
  display: grid; place-items: center; font-size: 17px; font-weight: 510;
  overflow: hidden; background-size: cover; background-position: center;
}
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; }

.divider { height: 1px; background: var(--h1); margin: 24px 0; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }


/* ── client preview banner: agency chrome a real client never receives ── */
.prevbar {
  display: flex; align-items: center; gap: 10px;
  padding: 7px clamp(12px, 2.5vw, 24px); min-height: 36px;
  background: var(--accent-bg); border-bottom: 1px solid var(--accent);
  color: var(--t1); font-size: 12.5px;
}
.prevbar .eye { color: var(--accent); }
.prevbar .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prevbar .txt b { font-weight: 510; }
.prevbar .exit {
  margin-left: auto; border: 1px solid var(--accent); color: var(--accent);
  border-radius: var(--r-sm); padding: 3px 9px; font-size: 12px; min-height: 26px; white-space: nowrap;
}
.prevbar .exit:hover { background: var(--accent); color: var(--on-accent); }
/* in preview the switcher is not hidden, it is not rendered at all */
.switch:empty { display: none; }

/* ── view switcher ───────────────────────────────────── */
.viewbar { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
/* Anything that follows a panel needs air. Without this the Attach a file bar
   sat welded to the bottom edge of the checklist, one hairline apart, while
   every other pair of controls on the page had eight pixels between them. */
.panel + .viewbar, .panel + .actions, .panel + .chips, .panel + .decide,
.panel + .filterbar, .panel + .tadd, .panel + p.detail-note { margin-top: 14px; }
.panel + .panel { margin-top: 10px; }
.seg { display: flex; gap: 1px; background: var(--s3); border: 1px solid var(--h1); border-radius: var(--r); padding: 2px; }
.seg button { padding: 3px 9px; border-radius: var(--r-sm); font-size: 12px; color: var(--t3); min-height: 26px; }
.seg button:hover { color: var(--t1); }
.seg button.on { background: var(--s1); color: var(--t1); font-weight: 510; }
.viewbar .spacer { flex: 1; }
.viewbar .cnt { font-variant-numeric: tabular-nums; font-size: 10.5px; color: var(--t3); }

/* ── grouped list ────────────────────────────────────── */
.grp-hdr {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 12px; background: var(--s2); border-bottom: 1px solid var(--h1);
  color: var(--t2); font-size: 12px; min-height: 32px; text-align: left;
}
.grp-hdr:hover { color: var(--t1); }
.grp-hdr .tw { transition: transform .15s ease; color: var(--t3); }
.grp-hdr.closed .tw { transform: rotate(-90deg); }
.grp-hdr .lbl { font-weight: 510; }
.grp-hdr .n { font-variant-numeric: tabular-nums; font-size: 10.5px; color: var(--t3); }
.grp-body.closed { display: none; }

/* ── priority ────────────────────────────────────────── */
.prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--t3); white-space: nowrap; }
.prio .bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.prio .bars i { width: 2.5px; border-radius: 1px; background: var(--h3); }
.prio .bars i:nth-child(1) { height: 4px; } .prio .bars i:nth-child(2) { height: 7px; } .prio .bars i:nth-child(3) { height: 10px; }
.prio.urgent .bars i { background: var(--late); }
.prio.normal .bars i:nth-child(-n+2) { background: var(--t3); }
.prio.low    .bars i:nth-child(1)    { background: var(--t3); }
/* COLOUR IS FOR ICONS, NOT FOR WORDS.
   Three coloured words on one row -- Urgent, Client, Due tomorrow -- is three
   things shouting and nothing being heard. The mark carries the colour and the
   word stays in ink, so the one genuinely wrong thing on a page is the only
   red on it. */
.prio.urgent { color: var(--t2); }

.r-task      { grid-template-columns: 18px minmax(0,1fr) 98px 72px 132px; }
.r-task.pickable { grid-template-columns: 18px 18px minmax(0,1fr) 98px 72px 132px; }
.r-task > .hide-sm { justify-self: start; }
.owner-tag { font-size: 12.5px; color: var(--t3); white-space: nowrap; }
.owner-tag.client { color: var(--t2); }

/* ── board ───────────────────────────────────────────── */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(228px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.bcol { background: var(--s2); border: 1px solid var(--h1); border-radius: var(--r-lg); display: flex; flex-direction: column; min-height: 120px; }
.bcol-hdr { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-bottom: 1px solid var(--h1); font-size: 12px; color: var(--t2); }
.bcol-hdr .n { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 10.5px; color: var(--t3); }
.bcol-body { padding: 7px; display: flex; flex-direction: column; gap: 6px; }
.bcard { background: var(--s1); border: 1px solid var(--h1); border-radius: var(--r); padding: 9px 10px; text-align: left; display: flex; flex-direction: column; gap: 7px; }
.bcard:hover { border-color: var(--h3); }
.bcard .ttl { font-size: 12.5px; line-height: 1.35; font-weight: 510; }
.bcard .meta { display: flex; align-items: center; gap: 8px; }
.bcard .meta .due { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--t3); }
.bcol-body:empty::after { content: "None"; color: var(--t3); font-size: 12px; padding: 8px 4px; }

/* ── threads ─────────────────────────────────────────── */
.thread { display: flex; flex-direction: column; }
.msg { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--h1); }
.msg:last-child { border-bottom: 0; }
.msg.internal { background: var(--warn-soft, var(--s2)); }
.msg .ava { width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--s3); border: 1px solid var(--h2); color: var(--t2); display: grid; place-items: center; font-size: 10px; font-weight: 510; }
.msg .hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.msg .who { font-weight: 510; font-size: 12.5px; }
.msg .when { font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--t3); }
.msg .body { color: var(--t2); font-size: 13px; }
.msg .on { font-size: 11.5px; color: var(--t3); margin-bottom: 4px; }
.tagi { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--h2); color: var(--t3); }
.tagi.int { border-color: var(--wait); color: var(--wait); }

.composer { border-top: 1px solid var(--h1); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--s2); }
.composer textarea {
  width: 100%; min-height: 62px; resize: vertical; background: var(--s1);
  border: 1px solid var(--h2); border-radius: var(--r); padding: 8px 10px;
  color: var(--t1); font: inherit; font-size: 13px;
}
.composer textarea:focus { outline: none; border-color: var(--accent); }
.composer .foot { display: flex; align-items: center; gap: 10px; }
.composer .foot .hint { font-size: 12.5px; color: var(--t3); }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t2); cursor: pointer; }
.toggle input { accent-color: var(--accent); width: 14px; height: 14px; }

@media (max-width: 900px) { .r-task { grid-template-columns: 18px minmax(0,1fr) 116px; }
  .r-task.pickable { grid-template-columns: 18px 18px minmax(0,1fr) 116px; } }


/* ── state filter chips ──────────────────────────────── */
.chips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; min-height: 28px;
  border: 1px solid var(--h1); background: var(--s1); color: var(--t2); font-size: 12px;
}
.chip:hover { border-color: var(--h3); color: var(--t1); }
.chip.on { background: var(--s3); border-color: var(--h3); color: var(--t1); font-weight: 510; }
/* A chip wears the mark of the thing it filters to, so the control and its
   contents are recognisably the same object. The glyph carries the colour; the
   label stays in ink, which is the same rule the rows follow. */
.chip .glyph { width: 13px; height: 13px; color: var(--h3); flex: none; }
.chip.wait   .glyph { color: var(--wait); }
.chip.late   .glyph { color: var(--late); }
.chip.accent .glyph { color: var(--accent); }
.chip.ok     .glyph { color: var(--ok); }
.chip .n { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--t3); }
.chip.on .n { color: var(--t2); }
.chip .d { width: 6px; height: 6px; border-radius: 50%; }
.chip .d.idle { background: var(--idle); }   .chip .d.accent { background: var(--accent); }
.chip .d.wait   { background: var(--wait); }
.chip .d.ok   { background: var(--ok); }

/* ── row actions, revealed on hover ──────────────────── */
.row .acts { display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .12s ease; }
.row:hover .acts, .row .acts:focus-within { opacity: 1; }
.iconbtn {
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: var(--r-sm); color: var(--t3);
}
.iconbtn:hover { background: var(--s4); color: var(--t1); }
@media (hover: none) { .row .acts { opacity: 1; } }
.row.archived .ttl { color: var(--t3); text-decoration: line-through; text-decoration-color: var(--h3); }

/* ── modal ───────────────────────────────────────────── */
.ovl { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 80; display: grid; place-items: center; padding: 16px; }
.modal {
  background: var(--s1); border: 1px solid var(--h2); border-radius: var(--r-lg);
  width: min(100%, 460px); max-height: 88vh; overflow-y: auto;
}
.modal-hd { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--h1); }
.modal-hd h3 { margin: 0; font-size: 14px; font-weight: 590; }
.modal-hd .x { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--t3); }
.modal-hd .x:hover { background: var(--s3); color: var(--t1); }
.modal-bd { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
/* The form carries a 460px cap for a page. Inside a 460px modal with 16px of
   padding on each side, that cap is 32px wider than the space it is in, and
   every field ran off the right edge. */
.modal-bd .form { max-width: none; width: 100%; }
.modal-bd .form > *, .modal-bd .fld > * { min-width: 0; max-width: 100%; }
.modal-ft { padding: 12px 16px; border-top: 1px solid var(--h1); display: flex; gap: 8px; align-items: center; background: var(--s2); }
.modal-ft .hint { font-size: 11.5px; color: var(--t3); margin-left: auto; }
.radio-row { display: flex; gap: 6px; }
.radio-row label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px; border: 1px solid var(--h2); border-radius: var(--r);
  font-size: 12.5px; color: var(--t2); cursor: pointer; min-height: 34px;
}
.radio-row input { display: none; }
.radio-row input:checked + span { color: var(--t1); }
.radio-row label:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.drop {
  border: 1px dashed var(--h3); border-radius: var(--r); padding: 18px 12px;
  text-align: center; color: var(--t3); font-size: 12.5px; cursor: pointer;
}
.drop:hover { border-color: var(--accent); color: var(--t2); }
.drop.has { border-style: solid; border-color: var(--accent); color: var(--t1); }

/* ── task detail ─────────────────────────────────────── */
/* 232px could not hold a label column plus a select wide enough for a project
   name, so "Website rebuild" rendered as "Website rebuil". */
.detail { display: grid; grid-template-columns: minmax(0,1fr) 268px; gap: 26px; align-items: start; }
.detail-main { min-width: 0; }
.detail-side { display: flex; flex-direction: column; gap: 2px; }
/* ── the property rail ────────────────────────────────────────────────────
   A property is a mark, a name and a control. It used to be a name and a bare
   select, which is why the rail read as a stack of empty boxes: nothing said
   what any of them was for until the label had been read, and the control
   wore the operating system's chrome rather than the app's. */
.prop { display: grid; grid-template-columns: 15px 74px minmax(0,1fr); gap: 9px;
  align-items: center; padding: 5px 0; font-size: 13px; }
.prop > .glyph { width: 14px; height: 14px; color: var(--h3); }
.prop .k { color: var(--t2); font-size: 12.5px; }
.prop .v { color: var(--t1); min-width: 0; }
.prop .selwrap.sm { width: 100%; }
.prop .selwrap.sm select { width: 100%; max-width: none; }

/* the due date: reads as a date, opens the picker, never shows 08/26/2026 */
.propdatewrap { position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 10px; width: 100%; cursor: pointer;
  background: var(--s2); border: 1px solid var(--h1); border-radius: var(--r);
  transition: background .12s ease, border-color .12s ease; }
.propdatewrap:hover { background: var(--s3); }
.propdatewrap:focus-within { border-color: var(--accent); background: var(--s3); }
.propdatewrap .glyph { width: 13px; height: 13px; color: var(--h3); flex: none; }
.propdateface { font-size: 12.5px; color: var(--t1); white-space: nowrap; }
.propdatewrap .propdate { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: 0; padding: 0; }
.detail-note { color: var(--t2); font-size: 13.5px; line-height: 1.55; margin: 0 0 20px; }
.detail h1 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.015em; font-weight: 590; }
.approve-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 14px; background: var(--s2); border: 1px solid var(--h1); border-radius: var(--r-lg); margin-bottom: 20px; }
.approve-bar .lbl { font-size: 12.5px; color: var(--t2); margin-right: auto; }
.btn.ok { background: var(--ok); color: var(--on-accent); border-color: transparent; }
.btn.ok:hover { filter: brightness(1.08); }
.stamp { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ok); }
.stamp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── mentions ────────────────────────────────────────── */
.mention { color: var(--accent); background: var(--accent-bg); border-radius: 3px; padding: 0 3px; font-weight: 510; }
.mentionbar { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 11.5px; color: var(--t3); }
.mentionbar button {
  border: 1px solid var(--h2); border-radius: 999px; padding: 2px 8px;
  color: var(--t2); font-size: 11.5px; min-height: 24px;
}
.mentionbar button:hover { border-color: var(--accent); color: var(--accent); }

/* ── notifications ───────────────────────────────────── */
.bell { position: relative; width: 28px; height: 28px; border: 1px solid var(--h2); border-radius: var(--r-sm); display: grid; place-items: center; color: var(--t3); }
.bell:hover { color: var(--t1); border-color: var(--h3); }
.bell .dot { position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 9.5px; line-height: 15px; text-align: center; font-variant-numeric: tabular-nums; }
.notifs {
  position: fixed; top: 52px; right: clamp(12px, 2.5vw, 24px); z-index: 70;
  width: min(340px, calc(100vw - 24px)); max-height: 60vh; overflow-y: auto;
  background: var(--s1); border: 1px solid var(--h2); border-radius: var(--r-lg);
}
.notifs .hd { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-bottom: 1px solid var(--h1); font-size: 12px; color: var(--t2); position: sticky; top: 0; background: var(--s1); }
.notifs .hd .mark { margin-left: auto; font-size: 11.5px; color: var(--t3); min-height: 24px; }
.notifs .hd .mark:hover { color: var(--accent); }
.nrow { display: grid; grid-template-columns: 6px minmax(0,1fr); gap: 9px; padding: 10px 13px; border-bottom: 1px solid var(--h1); width: 100%; text-align: left; align-items: start; }
.nrow:last-child { border-bottom: 0; }
.nrow:hover { background: var(--s2); }
.nrow .un { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 5px; }
.nrow.read .un { background: transparent; }
.nrow .txt { font-size: 12.5px; color: var(--t2); }
.nrow .txt b { color: var(--t1); font-weight: 510; }
.nrow .when { font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--t3); margin-top: 3px; display: block; }

/* the in-app attention bar the client sees */
.attn { display: flex; align-items: center; gap: 10px; padding: 9px clamp(12px,2.5vw,24px); background: var(--accent-bg); border-bottom: 1px solid var(--accent); font-size: 12.5px; }
.attn .txt { min-width: 0; }
.attn .txt b { font-weight: 510; }
.attn .go { margin-left: auto; border: 1px solid var(--accent); color: var(--accent); border-radius: var(--r-sm); padding: 3px 9px; font-size: 12px; min-height: 26px; white-space: nowrap; }
.attn .go:hover { background: var(--accent); color: var(--on-accent); }

@media (max-width: 780px) { .detail { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .detail-side { padding-top: 14px; border-top: 1px solid var(--h1); } }

/* ── project update: the thing a client opens the portal to read ── */
.update { background: var(--s1); border: 1px solid var(--h1); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 16px; }
.update .hd { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; flex-wrap: wrap; }
.update .hd .who { font-size: 12px; color: var(--t3); margin-left: auto; }
.update .body { color: var(--t2); font-size: 13.5px; line-height: 1.55; }
.update .proj { font-size: 12px; color: var(--t3); }
.health { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.health::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.health.ok { color: var(--ok); } .health.wait { color: var(--wait); } .health.late { color: var(--late); }

/* ── checklist ───────────────────────────────────────── */
.check { display: flex; flex-direction: column; }
.check-item { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 9px; align-items: start; padding: 7px 14px; border-bottom: 1px solid var(--h1); width: 100%; text-align: left; font-size: 13px; }
.check-item:last-child { border-bottom: 0; }
.check-item:hover { background: var(--s2); }
.check-item .bx { width: 15px; height: 15px; border: 1px solid var(--h3); border-radius: 3px; display: grid; place-items: center; margin-top: 1px; }
.check-item.on .bx { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.check-item.on .bx svg { width: 10px; height: 10px; }
.check-item:not(.on) .bx svg { display: none; }
/* text-decoration propagates to in-flow descendants and a descendant cannot
   switch it off, so the strike goes on the title itself. Striking the
   description as well makes the one thing explaining a finished item
   unreadable at exactly the moment someone is checking it was done right. */
.check-item.on .lbl .ctext { color: var(--t3); text-decoration: line-through; text-decoration-color: var(--h3); }
.check-meter { font-variant-numeric: tabular-nums; font-size: 10.5px; color: var(--t3); }

/* ── versions ────────────────────────────────────────── */
.vrow { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; align-items: baseline; padding: 9px 14px; border-bottom: 1px solid var(--h1); }
.vrow:last-child { border-bottom: 0; }
.vrow .vn { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--t2); }
.vrow.cur .vn { color: var(--accent); }
.vrow .note { color: var(--t2); font-size: 12.5px; }
.vrow .meta { font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--t3); white-space: nowrap; }

/* ── request triage ──────────────────────────────────── */
/* A row that navigates without being a button. The link covers the row, so a
   click anywhere follows it; anything interactive inside sits above it. This
   is the only shape that lets a row hold both a destination and its own
   controls, because a button may not contain a button. */
.rowlink { position: relative; }
.ttl.stretch { color: inherit; text-decoration: none; }
.ttl.stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rowlink:focus-within { background: var(--s2); }
.ttl.stretch:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
.rowlink .rt, .rowlink .triage, .rowlink .st { position: relative; z-index: 1; }

/* Four identically outlined buttons made every request look like a form to be
   filled in rather than a decision to be made. No border at rest; the two that
   are real decisions take a colour on hover, the two that defer stay quiet. */
.triage { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.triage button { border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 3px 9px; font-size: 11.5px; color: var(--t3); min-height: 26px;
  transition: background .12s ease, color .12s ease, border-color .12s ease; }
.triage button:hover      { background: var(--s3); color: var(--t1); }
.triage button.yes:hover  { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.triage button.no:hover   { color: var(--late); border-color: color-mix(in srgb, var(--late) 40%, transparent); }
.triage button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.row:hover .triage button { color: var(--t2); }

/* The decision strip on a request. One line: where it stands, then what you
   can do about it, with the affirmative action last and nearest the thumb. */
.decide { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 14px; margin: 18px 0; border: 1px solid var(--h1);
  border-radius: var(--r-md); background: var(--s2); }
.decide.open { border-color: var(--h2); }
.decide .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t3); flex: none; }
.decide .dot.ok { background: var(--ok); } .decide .dot.wait { background: var(--wait); }
.decide .dot.late { background: var(--late); } .decide .dot.accent { background: var(--accent); }
.decide .dot.idle { background: var(--l3); }
.decide .lbl { font-size: 13px; color: var(--t2); flex: 1; min-width: 140px; }
.decide.open .lbl { color: var(--t1); }
.decide .acts { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.tri { border: 1px solid transparent; border-radius: var(--r-sm); padding: 5px 11px;
  font-size: 12.5px; color: var(--t3); min-height: 30px;
  transition: background .12s ease, color .12s ease, border-color .12s ease; }
.tri:hover { background: var(--s4); color: var(--t1); }
.tri.no:hover { color: var(--late); border-color: color-mix(in srgb, var(--late) 40%, transparent); }
.tri.yes { color: var(--t1); background: var(--s4); border-color: var(--h2); }
.tri.yes:hover { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.tri:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .tri, .triage button { transition: none; } }

/* ── search ──────────────────────────────────────────── */
.searchwrap { position: relative; display: inline-flex; align-items: center; width: min(100%, 268px); }
.searchwrap .glyph { position: absolute; left: 9px; width: 13px; height: 13px;
  color: var(--t3); pointer-events: none; transition: color .12s ease; }
.searchwrap:focus-within .glyph { color: var(--accent); }
.search {
  font: inherit; background: var(--s2); border: 1px solid var(--h1); border-radius: var(--r);
  padding: 5px 10px 5px 29px; color: var(--t1); font-size: 12.5px; min-height: 30px;
  width: 100%; transition: border-color .12s ease, background .12s ease;
}
.search::placeholder { color: var(--h2); }
.search:hover { background: var(--s3); }
.search:focus { outline: none; border-color: var(--accent); background: var(--s3); }

/* ── loading skeleton ────────────────────────────────── */
.sk { display: block; background: var(--s3); border-radius: var(--r-sm); position: relative; overflow: hidden; }
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--s4), transparent);
  animation: sk 1.1s ease-in-out infinite;
}
@keyframes sk { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.sk-h1 { height: 20px; width: 220px; margin-bottom: 8px; }
.sk-p  { height: 13px; width: 320px; max-width: 70%; }
.sk-t  { height: 13px; width: 240px; max-width: 60%; margin-bottom: 6px; }
.sk-s  { height: 11px; width: 150px; max-width: 40%; }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }

/* checklist rows carry actions now, so they need the three-column grid */
.check-item { grid-template-columns: 16px minmax(0,1fr) auto; }
/* Fully invisible until hover means the only way to discover that an item can
   be edited is to move the mouse over it and notice. Quiet at rest is enough. */
.check-item .acts { opacity: .32; transition: opacity .12s ease, color .12s ease; }
.check-item:hover .acts, .check-item .acts:focus-within { opacity: 1; }
.check-item .acts .iconbtn:hover { color: var(--t1); background: var(--s3); }
.check-item .acts .iconbtn[data-delcheck]:hover { color: var(--late); }
@media (hover: none) { .check-item .acts { opacity: 1; } }
div.sec .more { background: none; border: 0; padding: 0 2px; }

/* ── file preview ────────────────────────────────────── */
.preview { border: 1px solid var(--h1); border-radius: var(--r-lg); background: var(--s2); overflow: hidden; margin-bottom: 4px; }
.preview.link, .preview.none { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.preview.link .glyph, .preview.none .glyph { color: var(--t3); flex: 0 0 auto; }
.preview .pv-t { font-weight: 510; font-size: 13.5px; }
.preview .pv-s { color: var(--t2); font-size: 12.5px; margin-top: 3px; }
.preview.link .btn, .preview.none .btn { margin-left: auto; white-space: nowrap; }
.preview.img { padding: 0; background: var(--s3); display: grid; place-items: center; }
.preview.img img { max-width: 100%; max-height: 460px; display: block; }
.preview.pdf object { width: 100%; height: min(60vh, 560px); display: block; border: 0; }
.pv-none { padding: 24px; text-align: center; color: var(--t2); font-size: 13px; display: grid; gap: 10px; justify-items: center; }


/* ── due dates: legible, and overdue actually says so ──────────────── */
.due-chip { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--t2); white-space: nowrap; }
.due-chip.soon { color: var(--t2); }
.due-chip.soon .glyph, .due-chip.soon .ico { color: var(--wait); }
.due-chip.over { color: var(--late); font-weight: 510; }
.due-chip.over::before { content: "!"; font-family: var(--font-ui); font-size: 11px;
  width: 14px; height: 14px; border-radius: 50%; border: 1px solid currentColor;
  display: grid; place-items: center; line-height: 1; }

/* ── touch and imprecise pointers get real targets ─────────────────── */
@media (pointer: coarse) {
  .btn, .chip, .seg button, .iconbtn, .theme-toggle, .bell,
  .nav a, .foot-btn, .tabs button, .grp-hdr, .triage button,
  .prevbar .exit, .attn .go, .mentionbar button { min-height: 44px; }
  .iconbtn, .theme-toggle, .bell { min-width: 44px; }
  .row .acts, .check-item .acts { opacity: 1; }
}

/* ── honour a system request for more contrast ─────────────────────── */
@media (prefers-contrast: more) {
  :root { --h1: var(--h3); --t2: var(--t1); --t3: var(--t2); }
  .row, .vrow, .msg, .feed .ev { border-bottom-width: 1px; }
  .btn, .chip, .search, .prop select, .composer textarea { border-width: 2px; }
  :focus-visible { outline-width: 3px; }
}

/* ── reader preference: three steps, set in Settings ───────────────── */
:root[data-text="large"]   body,
:root[data-text="large"]  .wrap { font-size: 15.5px; }
:root[data-text="largest"] body,
:root[data-text="largest"] .wrap { font-size: 17px; }
:root[data-text="large"]   .waited, :root[data-text="large"]   .due-chip,
:root[data-text="large"]   .row .sub, :root[data-text="large"]   .st,
:root[data-text="large"]   .prio, :root[data-text="large"]   .owner-tag { font-size: 13.5px; }
:root[data-text="largest"] .waited, :root[data-text="largest"] .due-chip,
:root[data-text="largest"] .row .sub, :root[data-text="largest"] .st,
:root[data-text="largest"] .prio, :root[data-text="largest"] .owner-tag { font-size: 15px; }
:root[data-text="large"]   .pagehead h1 { font-size: 21px; }
:root[data-text="largest"] .pagehead h1 { font-size: 23px; }
:root[data-text="large"] .btn, :root[data-text="largest"] .btn { height: 38px; min-height: 38px; font-size: 14px; }

/* ── focus, always visible, never clipped ──────────────────────────── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.row:focus-visible, .check-item:focus-visible { outline-offset: -2px; }

/* ── since-you-last-looked marker ─────────────────────── */
.since { display: flex; align-items: center; gap: 10px; padding: 10px 0 6px; color: var(--t3); font-size: 12.5px; }
.since::before, .since::after { content: ""; height: 1px; background: var(--h2); flex: 1; }
.since span { white-space: nowrap; }

/* ── viewer surfaces ─────────────────────────────────── */
.preview.frame iframe { width: 100%; height: min(58vh, 520px); border: 0; display: block; background: #fff; }
.preview.media video { width: 100%; max-height: 480px; display: block; background: #000; }
.preview.audio { padding: 18px; }
.preview.audio audio { width: 100%; display: block; }
.preview.text pre {
  margin: 0; padding: 16px 18px; overflow: auto; max-height: 460px;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--t1);
  white-space: pre-wrap; word-break: break-word;
}
.preview.table .tw { overflow: auto; max-height: 460px; }
.preview.table table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.preview.table th, .preview.table td {
  border-bottom: 1px solid var(--h1); border-right: 1px solid var(--h1);
  padding: 7px 10px; text-align: left; white-space: nowrap;
}
.preview.table th { background: var(--s3); position: sticky; top: 0; font-weight: 510; }
.preview.table td { color: var(--t2); }
.pv-foot { padding: 8px 14px; border-top: 1px solid var(--h1); color: var(--t3); font-size: 12px; background: var(--s3); }

/* ── page header: title and its primary actions on one line ──────────── */
.ph-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ph-row h1 { margin: 0; flex: 1 1 auto; min-width: 0; }
.ph-row .btn { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.ph-row .btn .ico { width: 14px; height: 14px; }
@media (max-width: 560px) {
  .ph-row { gap: 8px; }
  .ph-row h1 { flex: 1 1 100%; }
}
.viewbar { gap: 8px; }

.callsum { padding: 4px 16px 14px; }
.callsum p { margin: 12px 0 0; color: var(--t2); font-size: 13.5px; line-height: 1.6; }
.callsum p:first-child { margin-top: 12px; }

/* ── call cards: the summary is the content, not a teaser ────────────── */
.callcard { background: var(--s1); border: 1px solid var(--h1); border-radius: var(--r-lg); margin-bottom: 12px; overflow: hidden; }
.cc-hd { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--h1); }
.cc-t { flex: 1; min-width: 0; }
.cc-t .ttl { font-weight: 510; font-size: 14px; }
.cc-t .sub { color: var(--t2); font-size: 12.5px; margin-top: 2px; }
.cc-body { padding: 2px 16px 12px; }
.cc-body p { margin: 12px 0 0; color: var(--t2); font-size: 13.5px; line-height: 1.6; }
.cc-ft { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--h1); background: var(--s2); }
.lnk { color: var(--accent); font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; }
.lnk:hover { color: var(--accent-h); }
.aside { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; color: var(--t2); font-size: 12.5px; line-height: 1.5; }
.aside .ico { color: var(--t3); margin-top: 1px; }

/* ── filter bar ──────────────────────────────────────── */
.filterbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filterbar .searchwrap { width: min(100%, 280px); flex: 1 1 180px; }
.filterbar .search { width: 100%; }
/* the compact select used in a filter bar: same shape as everything else, no
   operating-system chrome, and narrow enough that six fit on one line */
.selwrap.sm { display: inline-flex; align-items: center; flex: 0 0 auto; }
.selwrap.sm select { min-height: 32px; height: 32px; padding: 0 26px 0 10px; font-size: 12.5px;
  background: var(--s2); border: 1px solid var(--h1); border-radius: var(--r); color: var(--t1);
  -webkit-appearance: none; appearance: none; width: auto; max-width: 168px;
  transition: border-color .12s ease, background .12s ease; }
.selwrap.sm select:hover { background: var(--s3); }
.selwrap.sm select:focus { outline: none; border-color: var(--accent); background: var(--s3); }
.selwrap.sm .chev { right: 8px; width: 12px; height: 12px; }
.rangesel, .datein {
  appearance: none; background: var(--s2); border: 1px solid var(--h2); border-radius: var(--r);
  padding: 6px 10px; color: var(--t1); font-size: 12.5px; min-height: 32px;
}
.rangesel { padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--t2) 50%),
                    linear-gradient(135deg, var(--t2) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; }
.rangesel:hover, .datein:hover { border-color: var(--h3); }
.rangesel:focus, .datein:focus { outline: none; border-color: var(--accent); }
.filterbar .to { color: var(--t3); font-size: 12.5px; }
.clearf { color: var(--t2); font-size: 12.5px; padding: 0 6px; min-height: 32px; text-decoration: underline; text-underline-offset: 2px; }
.clearf:hover { color: var(--t1); }
.filterbar .cnt { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--t3); }
@media (max-width: 560px) { .filterbar .search { flex: 1 1 100%; width: 100%; } }

/* ── switcher: scrolls, and filters once the list gets long ──────────── */
.menu { max-height: min(60vh, 420px); overflow-y: auto; }
.menu-find { padding: 6px; border-bottom: 1px solid var(--h1); position: sticky; top: 0; background: var(--s2); z-index: 1; }
.menu-find input {
  width: 100%; background: var(--s3); border: 1px solid var(--h2); border-radius: var(--r-sm);
  padding: 6px 9px; color: var(--t1); font-size: 12.5px; min-height: 32px;
}
.menu-find input:focus { outline: none; border-color: var(--accent); }
.menu-none { padding: 12px 10px; color: var(--t3); font-size: 12.5px; text-align: center; }

/* ── logos slot into the same square initials used ───── */
.sq.haslogo { background-size: cover; background-position: center; background-color: var(--s3); }
.avatar-lg[style*="background-image"] { background-size: cover; background-position: center; }

/* ── board cards say where they live ─────────────────── */
.bc-where { color: var(--t3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── roster sort control ─────────────────────────────── */
.sortlbl { color: var(--t3); font-size: 12.5px; margin-right: 2px; }
.chips .spacer { flex: 1; }

/* a decision the client has to live with should read like one */
.row .sub.reason { color: var(--t2); white-space: normal; }
.row .sub.reason.firm { color: var(--t1); border-left: 2px solid var(--h3); padding-left: 8px; }

/* ── client record ───────────────────────────────────── */
.k2 { color: var(--t2); font-size: 12.5px; }
.row .sub.also { color: var(--t2); margin-top: 4px; white-space: normal; }
.ph-row .avatar-lg { width: 40px; height: 40px; font-size: 13px; flex: 0 0 auto; }
.ph-row .st { flex: 0 0 auto; }


/* ══════════════════════════════════════════════════════════════════════
   OVERFLOW GUARDS.
   A `1fr` track is minmax(auto, 1fr), and `auto` will not shrink below the
   content's min-content width. With white-space: nowrap that is the entire
   string, so one long sublabel pushes the whole right-hand column off the
   screen. Every flexible track above is minmax(0,1fr); these rules cover the
   children, which need the same permission to shrink.
   ══════════════════════════════════════════════════════════════════════ */
.row > *, .feed .ev > *, .msg > *, .vrow > *, .prop > *, .nrow > *,
.check-item > *, .callcard *, .cc-hd > *, .detail-main > *, .detail-side > * { min-width: 0; }

.row, .feed .ev, .msg, .vrow, .nrow, .check-item { max-width: 100%; }

/* the right-hand cluster never grows past what is left for it */
.row .rt, .feed .ev .when, .vrow .meta { min-width: 0; max-width: 100%; flex-shrink: 0; }

/* anything that must not wrap must therefore be allowed to truncate */
.row .ttl, .row .sub, .cc-t .ttl, .cc-t .sub, .msg .who, .prop .v,
.switch-btn .nm, .foot-btn .nm, .menu .nm, .nav a span:not(.ct),
.crumb .cur, .bcard .ttl, .bc-where, .pv-t {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}

/* long unbroken strings, urls and pasted text break rather than overflow */
.detail-note, .callsum p, .cc-body p, .msg .body, .update .body,
.row .sub.reason, .pv-s, .fld .hint, .empty, .aside {
  overflow-wrap: anywhere; word-break: break-word; min-width: 0;
}

/* the shell itself can never be pushed wider than the viewport */
.main, .wrap { min-width: 0; max-width: 100%; }
.wrap { overflow-x: clip; }
.panel { max-width: 100%; }

/* wide content scrolls inside its own box instead of the page */
.preview.table .tw, .preview.text pre, .board { max-width: 100%; }

/* ── client brand in the rail ─────────────────────────── */
.brand.hasclient { align-items: center; gap: 10px; padding: 10px 14px; }
.brandlogo {
  width: 26px; height: 26px; border-radius: var(--r-sm); flex: 0 0 auto;
  background-size: cover; background-position: center;
  background-color: var(--s3); border: 1px solid var(--h2);
  display: grid; place-items: center; font-size: 10px;
  font-weight: 510; color: var(--t2);
}
.brandstack { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.brand.hasclient .brandname { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brandby { display: flex; align-items: center; gap: 4px; color: var(--t3); font-size: 10.5px; }
.brandby .emblem.sm { width: 7px; height: 10px; }
.chip[disabled] { opacity: .45; cursor: not-allowed; }
.chip.ghost { border-style: dashed; }
.row.archived .ttl { text-decoration: line-through; text-decoration-color: var(--h3); color: var(--t2); }
.wrapfilters { gap: 6px; }
.wrapfilters .rangesel { flex: 0 1 auto; max-width: 100%; }


/* The reader text-size setting has to move the PROSE, not just the chrome.
   Scaling headings while leaving descriptions, updates, call summaries and
   comments at 13px helps nobody, and those are what an older client opens. */
:root[data-text="large"] .detail-note, :root[data-text="large"] .update .body,
:root[data-text="large"] .msg .body, :root[data-text="large"] .callsum p,
:root[data-text="large"] .cc-body p, :root[data-text="large"] .row .sub.reason { font-size: 15px; }
:root[data-text="largest"] .detail-note, :root[data-text="largest"] .update .body,
:root[data-text="largest"] .msg .body, :root[data-text="largest"] .callsum p,
:root[data-text="largest"] .cc-body p, :root[data-text="largest"] .row .sub.reason { font-size: 16.5px; }

/* ── Today: one row per item, action inline, no scope change ─────────── */
.linkttl {
  display: block; text-align: left; padding: 0; background: none; border: 0;
  font: inherit; color: var(--t1); font-weight: 510;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.linkttl:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.r-today .rt { gap: 10px; }
@media (max-width: 640px) {
  .r-today .rt { flex-wrap: wrap; justify-content: flex-end; }
}
.propdate {
  background: var(--s2); border: 1px solid var(--h2); border-radius: var(--r);
  padding: 6px 9px; color: var(--t1); font-size: 13px; min-height: 34px; width: 100%;
}
.propdate:hover { border-color: var(--h3); }
.propdate:focus { outline: none; border-color: var(--accent); }


/* ══════════════════════════════════════════════════════════════════════
   CONTROL ALIGNMENT.
   Every clickable box shares one geometry: inline-flex, centred both ways,
   a border on all variants (transparent where invisible), and the same
   min-height. Mixed borders across variants was why a primary and a
   secondary button sat at different heights on the same row.
   ══════════════════════════════════════════════════════════════════════ */
.chip, .seg button, .triage button, .clearf, .prevbar .exit, .attn .go,
.mentionbar button, .theme-toggle, .bell, .foot-btn, .tabs button,
.iconbtn, .grp-hdr, .switch-btn, .menu button, .linkttl {
  display: inline-flex; align-items: center; box-sizing: border-box;
}
.chip, .triage button, .clearf, .prevbar .exit, .attn .go, .mentionbar button {
  border: 1px solid transparent; line-height: 1.2;
}
.chip { border-color: var(--h1); }
.triage button, .prevbar .exit, .attn .go, .mentionbar button { border-color: var(--h2); }
.linkttl { display: block; }

/* any row that mixes text and controls centres them */
.approve-bar, .viewbar, .filterbar, .chips, .actions, .modal-ft,
.cc-ft, .row .rt, .composer .foot, .ph-row, div.sec, .side-foot, .top .right {
  align-items: center;
}
/* the label pushes the controls right without dragging their baseline */
.approve-bar .lbl { align-self: center; }

/* a view modifier, not a state. Sits with list/board, never with the states. */
.toggle.vt { gap: 7px; padding: 0 4px; min-height: 32px; white-space: nowrap; color: var(--t2); }
.toggle.vt input:disabled + span { color: var(--t3); }
.toggle.vt:has(input:disabled) { cursor: not-allowed; }
.row.archived .ttl::after {
  content: "tidied away"; margin-left: 8px; font-variant-numeric: tabular-nums;
  font-size: 10px; letter-spacing: .04em; color: var(--t3);
  text-decoration: none; display: inline-block; vertical-align: middle;
}

/* Page headers mix an avatar, a title, a status chip and buttons. Grouping the
   actions gives them one alignment context of their own, so they line up with
   each other rather than each aligning to a row of unequal things. */
.ph-actions { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
.ph-actions .btn { margin: 0; }
.ph-row { row-gap: 10px; }
@media (max-width: 640px) { .ph-actions { width: 100%; } .ph-actions .btn { flex: 1 1 auto; } }

/* a target inside a sentence, clickable without looking like a button */
.linkinline {
  display: inline; padding: 0; border: 0; background: none; font: inherit;
  color: var(--t1); text-decoration: underline; text-decoration-color: var(--h3);
  text-underline-offset: 2px; cursor: pointer;
}
.linkinline:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ── dashboard: numbers, not charts ──────────────────── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 8px; }
.tile { background: var(--s1); border: 1px solid var(--h1); border-radius: var(--r-lg); padding: 14px 16px; }
.tile-n { font-size: 28px; line-height: 1.1; font-weight: 590; letter-spacing: -.02em; color: var(--t1); }
.tile-n.ok { color: var(--ok); } .tile-n.wait { color: var(--wait); } .tile-n.late { color: var(--late); }
.tile-l { margin-top: 6px; font-size: 13px; font-weight: 510; color: var(--t1); }
.tile-s { margin-top: 2px; font-size: 12px; color: var(--t3); }

table.dash { border-collapse: collapse; width: 100%; font-size: 13px; }
table.dash th, table.dash td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--h1); white-space: nowrap; }
table.dash th { background: var(--s2); color: var(--t2); font-size: 12px; font-weight: 510; position: sticky; top: 0; }
table.dash td { color: var(--t2); }
/* display:flex on a <td> takes the cell out of the table layout: it stops
   being a table-cell, sizes itself, and leaves a block of the wrong width
   behind the client name. The flexbox belongs to a span inside it. */
table.dash td.who { color: var(--t1); font-weight: 510; }
table.dash td.who > span.cell { display: flex; align-items: center; gap: 9px; }
table.dash .num { text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; }
table.dash .num.wait { color: var(--wait); } table.dash .num.late, table.dash td.late { color: var(--late); }
table.dash tbody tr { cursor: pointer; }
table.dash tbody tr:hover td { background: var(--s2); }
.panel .tw { overflow-x: auto; max-width: 100%; }

/* ── actions: pick who, pick what, run once ──────────── */
.pick { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.6fr); gap: 18px; align-items: start; }
.pickrow { display: grid; grid-template-columns: 16px 20px minmax(0,1fr) auto; gap: 10px;
  align-items: center; padding: 9px 13px; border-bottom: 1px solid var(--h1); cursor: pointer; }
.pickrow.act { grid-template-columns: 16px minmax(0,1fr) auto; }
.pickrow:last-child { border-bottom: 0; }
.pickrow:hover { background: var(--s2); }
.pickrow input { accent-color: var(--accent); width: 15px; height: 15px; }
.pickrow .ttl { font-weight: 510; }
.pickrow .sub { display: block; color: var(--t2); font-size: 12.5px; margin-top: 2px; }
.runbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 16px 0 4px; padding: 12px 14px; background: var(--s2);
  border: 1px solid var(--h1); border-radius: var(--r-lg); }
.runbar .txt { font-size: 13px; color: var(--t2); }
.runbar .txt b { color: var(--t1); font-weight: 590; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 780px) { .pick { grid-template-columns: minmax(0,1fr); } }
/* modal footer: every child on the same line, whatever it is */
.modal-ft > * { align-self: center; }
.modal-ft .btn { height: 34px; min-height: 34px; }

/* ── the inbox line: one row, six columns, no wasted height ──────────── */
/* ── the inbox row ────────────────────────────────────────────────────────
   The row reads left to right as WHAT, then WHO, then WHEN, then the one
   thing you can do about it. Before this the client sat immediately after the
   title, so the eye read "Team bios and headshots Harbor & Vale" as a single
   run-on phrase while sixty per cent of the row sat empty. Everything after
   the title is a right-hand column now, and the columns line up down the page.

   Nothing here is monospaced. A duration and a date are prose, not code, and
   setting them in a mono face was most of what read as technical and grainy. */
.panel.inbox { background: var(--s1); padding: 0; }
/* The client column was `auto`, and every row is its own grid container, so it
   resolved against that row's own pill and the pills landed at four different
   x positions down the page. Same fault as the task rows, missed here. */
.ibx { display: grid; align-items: center;
  /* The action column has to fit the widest action, which is the three-button
     triage group. At 104px they wrapped inside a fixed-height row and printed
     on top of each other. */
  grid-template-columns: 18px minmax(0,1fr) 196px 72px 172px;
  gap: 14px; padding: 0 16px; height: 48px; position: relative;
  transition: background .1s ease; }
/* a hairline that starts after the icon, so the list has separation without
   turning into a table with a visible grid */
.ibx + .ibx::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0;
  height: 1px; background: var(--h1); }
.ibx:hover, .ibx:focus-within { background: var(--s2); }
.ibx:hover::before, .ibx:hover + .ibx::before { background: transparent; }

.ibx-i { display: grid; place-items: center; width: 18px; height: 18px; color: var(--h3); }
.ibx-i .glyph { width: 14px; height: 14px; }
.ibx.wait   .ibx-i { color: var(--wait); }
.ibx.late   .ibx-i { color: var(--late); }
.ibx.accent .ibx-i { color: var(--accent); }
.ibx.ok     .ibx-i { color: var(--ok); }

.ibx-t { min-width: 0; display: flex; align-items: center; }
.ibx-l { font-size: 13.5px; color: var(--t1); text-decoration: none; font-weight: 450;
  letter-spacing: -.004em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibx-l[href]::after { content: ""; position: absolute; inset: 0; }
.ibx-l[href]:hover { color: var(--accent); }
.ibx-l[href]:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 5px; }

.ibx-c { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  color: var(--t2); font-size: 12px; text-decoration: none; min-width: 0; max-width: 100%; justify-self: end;
  height: 24px; padding: 0 10px 0 4px; border: 1px solid var(--h1); border-radius: 12px;
  background: var(--s2); transition: background .12s ease, border-color .12s ease, color .12s ease; }
.ibx-c span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibx-c .sq { width: 16px; height: 16px; font-size: 8.5px; border-radius: 4px; flex: none; }
.ibx-c:hover { background: var(--s3); border-color: var(--h2); color: var(--t1); }
.ibx-c:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.ibx-m { font-size: 12px; color: var(--t3); text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.ibx-m.late { color: var(--late); }
/* These were dimmed at rest so twelve buttons would stop competing with twelve
   titles. At 60% they read as disabled instead of quiet, which is worse than
   loud: a control nobody believes they can press. They are full strength, and
   the quieting is done by the button's own styling. */
.ibx-a { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px;
  justify-content: flex-end; min-width: 0; flex-wrap: nowrap; }
/* Never wrap inside a row of fixed height: there is nowhere for a second line
   to go, so it lands on the first one. */
.ibx-a .triage { flex-wrap: nowrap; }
.ibx-a .btn.sec { background: transparent; border-color: var(--h1); color: var(--t2); }
.ibx:hover .ibx-a .btn.sec { background: var(--s1); border-color: var(--h2); color: var(--t1); }
.ibx-a .btn.sec:hover { background: var(--s3); border-color: var(--h2); color: var(--t1); }
.ibx-a .triage button { color: var(--t2); }
.ibx:hover .ibx-a .triage button { color: var(--t1); }

/* the group header: a quiet bar with the kind and its count */
.ibx-h { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 16px;
  background: var(--s2); border-top: 1px solid var(--h1); border-bottom: 1px solid var(--h1);
  font-size: 12px; font-weight: 510; color: var(--t2); }
.ibx-h:first-child { border-top: 0; }
.ibx-h .glyph { width: 13px; height: 13px; color: var(--h3); }
.ibx-h .n { margin-left: auto; font-size: 11.5px; color: var(--t3); font-variant-numeric: tabular-nums; }
.ibx-h.wait   .glyph { color: var(--wait); }
.ibx-h.late   .glyph { color: var(--late); }
.ibx-h.accent .glyph { color: var(--accent); }
.ibx-h + .ibx::before { display: none; }

@media (prefers-reduced-motion: reduce) { .ibx, .ibx-c, .ibx-a { transition: none; } }
@media (max-width: 980px) { .ibx { grid-template-columns: 18px minmax(0,1fr) 72px 172px; } .ibx-c { display: none; } }
@media (max-width: 700px) { .ibx { grid-template-columns: 18px minmax(0,1fr) 172px; } .ibx-m { display: none; } }

/* tiles are links now, and say only what drives a decision */
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 12px 14px; text-align: left; width: 100%; }
.tile[data-tile] { cursor: pointer; }
.tile[data-tile]:hover { border-color: var(--h3); background: var(--s2); }
.tile-n { font-size: 26px; }
.tile-l { font-size: 12.5px; color: var(--t2); font-weight: 510; }
div.sec { margin: 18px 0 6px; }
table.dash th, table.dash td { padding: 6px 10px; }
/* a tile at zero is not a problem, so it stops asking for attention */
.tile.clear { opacity: .55; }
.tile.clear .tile-n { color: var(--t3); font-weight: 400; }
.tile[disabled] { cursor: default; }

/* ── remix bar: try a register, the original is always one click back ─── */
.remix { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.remix .lbl { color: var(--t3); font-size: 12px; margin-right: 2px; }
.remix button {
  display: inline-flex; align-items: center; height: 26px; padding: 0 9px;
  border: 1px solid var(--h2); border-radius: 999px;
  color: var(--t2); font-size: 12px; background: var(--s2);
}
.remix button:hover { border-color: var(--accent); color: var(--accent); }
.remix button.undo { border-style: dashed; margin-left: auto; }
.remix button.undo + .edit { margin-left: 4px; }
table.dash tfoot td { border-top: 1px solid var(--h2); border-bottom: 0;
  color: var(--t1); font-weight: 510; background: var(--s2); }
table.dash tfoot { position: sticky; bottom: 0; }

/* ── multi-select field ──────────────────────────────── */
.fld label .allnone {
  float: right; border: 0; background: none; padding: 0;
  color: var(--t3); font-size: 12px; text-decoration: underline; text-underline-offset: 2px;
}
.fld label .allnone:hover { color: var(--accent); }
.checklist {
  border: 1px solid var(--h2); border-radius: var(--r);
  max-height: 168px; overflow-y: auto; background: var(--s2);
}
.ck { display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  border-bottom: 1px solid var(--h1); cursor: pointer; font-size: 13px; }
.ck:last-child { border-bottom: 0; }
.ck:hover { background: var(--s3); }
.ck input { accent-color: var(--accent); width: 15px; height: 15px; flex: 0 0 auto; }

/* ── template editor ──────────────────────────────────────────────────────
   The first pass was a form and read as dated. The second stripped so much
   chrome it became grey text on grey, with no way to see the shape of the
   plan. This one gives the plan a shape: a phase is a card with a day range on
   it, the day runs down a rail on the left so the sequence is readable at a
   glance, and every step that is not in our hands carries a stripe. Colour
   does the work that four identical outlines could not. */
.tplhead h1 { margin: 0; }
.tname { font: inherit; color: var(--t1); background: none; border: 0; padding: 1px 6px;
  margin-left: -6px; width: 100%; max-width: 520px; border-radius: 5px;
  transition: background .12s ease, box-shadow .12s ease; }
.tname:hover { background: var(--s2); }
.tname:focus { outline: none; background: var(--s3); box-shadow: inset 0 0 0 1px var(--accent); }

.tmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.tmeta > span + span::before { content: ""; display: inline-block; width: 3px; height: 3px;
  border-radius: 50%; background: var(--h2); vertical-align: middle; margin-right: 14px; }
.tmeta .cli-n { color: var(--wait); }

.tbrief { width: 100%; background: var(--s1); color: var(--t1); border: 1px solid var(--h1);
  border-radius: var(--r-md); padding: 10px 12px; font: inherit; line-height: 1.55;
  resize: vertical; transition: border-color .12s ease, background .12s ease; }
.tbrief:hover { background: var(--s2); }
.tbrief:focus { outline: none; border-color: var(--accent); }
.tbriefnote { font-size: 12px; color: var(--t3); margin: 7px 0 0; }
.tbriefnote code { font-size: 11px; }

/* the legend, so the two colours are named once rather than guessed at */
.tkey { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--t3); }
.tkey i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.tkey i + * { margin-right: 4px; }
.tkey i.ag, .tpc-split i.ag, .tpill.own .swatch { background: var(--h2); }
.tkey i.cl, .tpc-split i.cl { background: var(--wait); }

/* ── a phase is a card ── */
.tlist { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.tpc { border: 1px solid var(--h1); border-radius: var(--r-lg); background: var(--s1);
  overflow: hidden; transition: border-color .14s ease; }
.tpc:focus-within { border-color: var(--h2); }
.tpc-h { display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 10px;
  background: var(--s3); border-bottom: 1px solid var(--h1); }
.tpc-name { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--t1); background: none; border: 0; padding: 3px 6px; margin-left: -6px;
  width: 14ch; border-radius: 4px; transition: background .12s ease; }
.tpc-name:hover { background: var(--s4); }
.tpc-name:focus { outline: none; background: var(--s4); box-shadow: inset 0 0 0 1px var(--accent); }
.tpc-meta { font-size: 11.5px; color: var(--t3); font-variant-numeric: tabular-nums; flex: 1; }
.tpc-split { display: flex; width: 74px; height: 4px; border-radius: 2px; overflow: hidden; gap: 1px; flex: none; }
.tpc-split i { display: block; }
.tpc-b { padding: 2px 0; }

/* ── a step is a row with a day rail ── */
.tstep { display: grid; align-items: center; gap: 8px;
  grid-template-columns: 20px 40px minmax(0,1fr) auto auto 26px;
  padding: 5px 8px 5px 0; position: relative;
  border-bottom: 1px solid var(--h1);
  transition: background .12s ease, transform .18s cubic-bezier(.2,.8,.2,1); }
.tpc-b > .tstep:last-of-type { border-bottom: 0; }
.tstep::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: transparent; transition: background .12s ease; }
.tstep.cli::before { background: var(--wait); }
.tstep.int { background: repeating-linear-gradient(135deg,
  transparent 0 6px, color-mix(in srgb, var(--h1) 45%, transparent) 6px 7px); }
.tstep:hover { background: var(--s2); }
.tstep.int:hover { background: var(--s2); }
.tstep:focus-within { background: var(--s2); }
.tstep.drag { opacity: .35; }
.tstep.over { box-shadow: inset 0 2px 0 var(--accent); }
@keyframes tland { from { background: var(--accent-bg); } to { background: transparent; } }
.tstep.landed { animation: tland .55s ease-out; }
@keyframes tnew { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.tstep.fresh { animation: tnew .2s ease-out; }

/* the day rail: a boxed, tabular number so the sequence reads straight down */
.tdaycell { display: flex; justify-self: stretch; }
.tday { width: 100%; text-align: center; font: inherit; font-size: 11.5px;
  background: var(--s2); border: 1px solid var(--h1); border-radius: 4px;
  padding: 3px 2px; color: var(--t2); font-variant-numeric: tabular-nums;
  transition: border-color .12s ease, color .12s ease, background .12s ease; }
.tstep:hover .tday { background: var(--s3); }
.tday:focus { outline: none; border-color: var(--accent); color: var(--t1); background: var(--s3); }
.tday::placeholder { color: var(--h2); }

.tmain { min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 2px 0; }
.ttitle, .tnote { font: inherit; background: none; border: 1px solid transparent;
  padding: 3px 6px; margin-left: -6px; color: var(--t1); border-radius: 5px;
  min-width: 0; width: 100%; transition: background .12s ease, border-color .12s ease; }
/* A description on every step, without eighteen of them doubling the height of
   the plan. It is there when it says something, and it appears the moment the
   row is touched, so it is discoverable without being permanent. */
.tnote { font-size: 12px; color: var(--t2); display: none; }
.tstep.noted .tnote,
.tstep:hover .tnote,
.tstep:focus-within .tnote { display: block; }
.tstep:not(.noted):not(:focus-within) .tnote { color: var(--t3); }
.tstep.int .ttitle { color: var(--t2); }
.ttitle:hover, .tnote:hover { background: var(--s3); }
.ttitle:focus, .tnote:focus { outline: none; background: var(--s3); border-color: var(--accent); }
.ttitle::placeholder, .tnote::placeholder { color: var(--h2); }

/* pills: a real select underneath, a legible control on top */
.tpill { position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 25px; padding: 0 9px; border-radius: 5px;
  border: 1px solid var(--h1); background: var(--s2);
  font-size: 12px; color: var(--t2); white-space: nowrap; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease; }
.tpill:hover { background: var(--s4); border-color: var(--h2); color: var(--t1); }
.tpill:focus-within { border-color: var(--accent); color: var(--t1); }
.tpill select { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; border: 0; }
.tpill b { font-weight: 450; }
.tpill .swatch { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.tpill.own.cli .swatch { background: var(--wait); }
.tpill.own.cli { color: var(--t1); }
.tpill.ask { background: color-mix(in srgb, var(--wait) 13%, var(--s2));
  border-color: color-mix(in srgb, var(--wait) 34%, var(--h1)); }
.tpill.ask b { color: var(--wait); }
.tpill.ask:hover { background: color-mix(in srgb, var(--wait) 20%, var(--s2)); }
.tpill.int-t input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.tpill.int-t { background: transparent; border-style: dashed; }
.tpill.int-t b { color: var(--t3); }
.tpill.int-t.on { background: var(--s3); border-style: solid; }
.tpill.int-t.on b { color: var(--t1); }

/* the handle is always visible: a row you cannot tell is draggable is a row
   nobody drags. It is quiet until the pointer is on the step. */
.thandle, .tdel { display: grid; place-items: center; width: 20px; height: 24px;
  background: none; border: 0; border-radius: 4px; padding: 0;
  transition: color .12s ease, background .12s ease, opacity .12s ease; }
.thandle { color: var(--h1); cursor: grab; }
.thandle:active { cursor: grabbing; }
.tstep:hover .thandle { color: var(--h2); }
.thandle:hover { color: var(--t1); background: var(--s3); }
.tdel { width: 26px; color: var(--h1); opacity: 0; }
.tstep:hover .tdel, .tdel:focus-visible { opacity: 1; color: var(--h2); }
.tdel:hover { color: var(--late); background: var(--s3); }
.thandle:focus-visible, .tdel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--t1); opacity: 1; }
.thandle .glyph, .tdel .glyph { width: 13px; height: 13px; }

.tadd { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  background: none; border: 0; color: var(--t3); font: inherit; font-size: 12px;
  padding: 8px 8px 8px 28px; cursor: pointer;
  transition: color .12s ease, background .12s ease; }
.tadd .glyph { width: 12px; height: 12px; }
.tadd:hover { color: var(--t1); background: var(--s2); }
.tadd:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; color: var(--t1); }
.tadd.big { margin-top: 4px; padding: 12px 8px; justify-content: center;
  border: 1px dashed var(--h1); border-radius: var(--r-lg); }
.tadd.big:hover { border-color: var(--h2); background: var(--s1); }

#toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(10px);
  background: var(--s4); color: var(--t1); border: 1px solid var(--h2); border-radius: 7px;
  padding: 9px 16px; font-size: 13px; opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.2,1); z-index: 90; }
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .tstep, .tpill, .ttitle, .tnote, .tday, .tpc, #toast { transition: none; }
  .tstep.landed, .tstep.fresh { animation: none; }
}
@media (max-width: 860px) {
  .tstep { grid-template-columns: 20px 40px minmax(0,1fr) 26px; row-gap: 4px; padding-bottom: 8px; }
  .tstep > .tpill { grid-column: 3 / 4; justify-self: start; }
  .tpc-split { display: none; }
}

/* the register bar's escape hatch: the words are editable and should say so */
.remix .edit { margin-left: auto; font-size: 11.5px; color: var(--t3); text-decoration: none; }
.remix .edit:hover { color: var(--accent); text-decoration: underline; }

/* a checklist item's own description, so an item can mean something more than
   its title without the title having to carry the whole sentence */
/* Striking through a description as well as its title makes the one thing
   that explains a finished item unreadable at exactly the moment someone is
   checking whether it was done properly. */
.check-item .lbl .cnote { display: block; font-size: 12px; color: var(--t3);
  margin-top: 3px; white-space: normal; line-height: 1.55; text-decoration: none; }
.check-item.on .lbl .cnote { color: var(--t3); }

/* the reminder schedule: when it fires, in a column of its own */
.rsched .rs-when b { display: block; font-weight: 510; color: var(--t1); font-size: 13px; }
.rsched .rs-when .sub { color: var(--t3); font-size: 11.5px; margin-top: 1px; }

/* "never" for a recap that was never written is a fact, not a failure. It was
   painted in the same red as an overdue date. */
table.dash td.quiet { color: var(--t3); }

/* ── a call note ──────────────────────────────────────────────────────────
   A real Granola note is a structured document: headed sections, a claim per
   bullet, and the detail nested under it. The demo carried three sentences of
   prose, which is not what a call note looks like and not what one is for. */
.callsum { padding: 4px 18px 18px; max-width: 68ch; }
.callsum h3 { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--t3); margin: 20px 0 8px; }
.callsum h3:first-child { margin-top: 14px; }
.callsum ul { margin: 0; padding-left: 18px; list-style: none; }
.callsum li { position: relative; color: var(--t1); font-size: 13.5px; line-height: 1.6; margin-bottom: 7px; }
.callsum li::before { content: ""; position: absolute; left: -13px; top: 9px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--h3); }
.callsum li ul { margin: 6px 0 2px; padding-left: 16px; }
.callsum li li { color: var(--t2); font-size: 12.5px; margin-bottom: 4px; }
.callsum li li::before { width: 3px; height: 3px; top: 8px; background: var(--h2); }
.callsum p { color: var(--t1); line-height: 1.65; margin: 0 0 12px; }

/* next steps: the half of a call note that is actually work */
.nstep .nstep-o { display: grid; place-items: center; width: 18px; height: 18px; color: var(--h3); }
.nstep .nstep-o .glyph { width: 13px; height: 13px; }
.nstep .nstep-o.client { color: var(--wait); }
.nstep .owner-tag { justify-self: start; }

/* the client's business switcher, once the brand block above it owns the name */
.switch-btn.quiet { color: var(--t3); }
.switch-btn.quiet:hover { color: var(--t1); }
.switch-btn.quiet .glyph { width: 14px; height: 14px; flex: none; }
.switch-btn.quiet .nm { font-size: 12.5px; font-weight: 450; }
.switch-btn.quiet .ctx { font-size: 11.5px; color: var(--t3); font-variant-numeric: tabular-nums; }

/* ── identity colour ──────────────────────────────────────────────────────
   Greg: "it's kind of all black and grayscale, which makes it harder to pay
   attention to." The answer is not to colour the words back in -- that was
   the version where three things shouted on every row -- but to give the
   thing an identity worth recognising. A client keeps one hue wherever it
   appears, so a list of fourteen clients is scannable by colour before it is
   read, and the colour still means something. */
.sq.i1 { background: var(--i1-bg); border-color: color-mix(in srgb, var(--i1) 34%, transparent); color: var(--i1); }
.sq.i2 { background: var(--i2-bg); border-color: color-mix(in srgb, var(--i2) 34%, transparent); color: var(--i2); }
.sq.i3 { background: var(--i3-bg); border-color: color-mix(in srgb, var(--i3) 34%, transparent); color: var(--i3); }
.sq.i4 { background: var(--i4-bg); border-color: color-mix(in srgb, var(--i4) 34%, transparent); color: var(--i4); }
.sq.i5 { background: var(--i5-bg); border-color: color-mix(in srgb, var(--i5) 34%, transparent); color: var(--i5); }
.sq.i6 { background: var(--i6-bg); border-color: color-mix(in srgb, var(--i6) 34%, transparent); color: var(--i6); }
.sq.i7 { background: var(--i7-bg); border-color: color-mix(in srgb, var(--i7) 34%, transparent); color: var(--i7); }
.sq.i8 { background: var(--i8-bg); border-color: color-mix(in srgb, var(--i8) 34%, transparent); color: var(--i8); }

/* a state is a shape as well as a colour, so it survives a colour-blind
   reader, a greyscale print and a screenshot */
.st.ico::before { display: none; }
.st.ico .stico { width: 14px; height: 14px; flex: none; }
.st.ico.bare { gap: 0; }
.st.ico.bare .stico { width: 15px; height: 15px; }
.r-task > .st.ico.bare, .r-need > .st.ico.bare { justify-self: center; }

/* a checklist a client can read but not change: the state is information, the
   box is not a control, and it should not pretend to be one */
.check-item.fixed { cursor: default; }
.check-item.fixed:hover { background: transparent; }
.check-item.fixed .bx { border-style: dashed; }
.check-item.fixed.on .bx { border-style: solid; }

/* ── editing in the list ──────────────────────────────────────────────────
   A list you can only read is half a list. These put a real control in the
   row for the agency: the face is what was always there, and an invisible
   select sits on top of it, so the row looks unchanged until you touch it and
   the keyboard gets a proper control rather than a click handler. A client's
   markup has no control in it at all -- the guard is the markup, not a
   permission check somewhere in a handler. */
/* The negative side margin let the control bleed out of a fixed-width column.
   It grows upwards and downwards, where there is room, and not sideways. */
.inl { position: relative; display: inline-flex; align-items: center; min-height: 26px;
  max-width: 100%; border-radius: var(--r-sm); padding: 2px 4px; margin: -2px 0; cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease; }
.inl:hover { background: var(--s3); box-shadow: inset 0 0 0 1px var(--h1); }
.inl:focus-within { background: var(--s3); box-shadow: inset 0 0 0 1px var(--accent); }
.inl > select, .inl > input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  border: 0; padding: 0; margin: 0; cursor: pointer; }
.inl.st-inl { padding: 3px; margin: -3px; }
.due-chip.none { color: var(--h2); }
.inl:hover .due-chip.none { color: var(--t2); }
.row:hover .inl { background: var(--s3); }
@media (prefers-reduced-motion: reduce) { .inl { transition: none; } }

/* ── selecting several, and changing them together ────────────────────────
   The bar only exists while something is selected, so the page is unchanged
   until it is wanted. Selection lives in state rather than in the DOM, which
   is what lets it survive the re-render each change causes. */
.pick { position: relative; display: grid; place-items: center; width: 18px; height: 26px; cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pick .box { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--h2);
  background: var(--s1); display: grid; place-items: center;
  opacity: .35; transition: opacity .12s ease, background .12s ease, border-color .12s ease; }
.pick .box .glyph { width: 9px; height: 9px; color: var(--on-accent); opacity: 0; stroke-width: 3; }
.row:hover .pick .box, .pick input:focus-visible + .box { opacity: 1; }
.pick input:checked + .box { opacity: 1; background: var(--accent); border-color: var(--accent); }
.pick input:checked + .box .glyph { opacity: 1; }
.pick input:focus-visible + .box { outline: 2px solid var(--accent); outline-offset: 2px; }
.row.picked { background: var(--accent-bg); }
.row.picked:hover { background: var(--accent-bg); }

.bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 12px; border-radius: var(--r-md);
  background: var(--s2); border: 1px solid var(--h2); }
.bulkbar .cnt { font-size: 12.5px; color: var(--t1); font-weight: 510;
  font-variant-numeric: tabular-nums; }
.bulkbar .spacer { flex: 1; }
.bulkbar .btn.sec.danger:hover { color: var(--late); border-color: color-mix(in srgb, var(--late) 45%, transparent); }
.bulkbar #bkDue { width: 132px; padding: 0 10px; }

/* Controls small enough that an imprecise pointer misses them. Each of these
   was under 22px in one direction; the pointer target grows without the
   drawn control changing size. */
div.sec .more { min-height: 24px; padding: 3px 6px; }
.tpc-name { min-height: 24px; }
.thandle { width: 24px; }
.tstep { grid-template-columns: 24px 40px minmax(0,1fr) auto auto 26px; }
.inl > select, .inl > input { min-width: 24px; min-height: 24px; }
.st-inl { min-width: 24px; margin-left: -3px; }

/* .linkttl is a title styled as a link. It behaves like one in running text,
   so it gets the same treatment: the row around it is the target. */
.linkttl { min-height: 22px; display: inline-flex; align-items: center; }
/* A select inside a rail sits over a 34px control; the select itself has to
   fill it or the pointer target is only the text line. */
.prop .selwrap.sm select, .fld select { min-height: 32px; }
.aside .lnk, .callcard .lnk { min-height: 22px; display: inline-flex; align-items: center; }

/* The internal-note toggle: a 14px native box whose label was shorter than the
   pointer target it needs. */
.toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; cursor: pointer; }
.toggle input { width: 15px; height: 15px; accent-color: var(--accent); }
/* A rail select is 32px tall; without a height the select inside the wrapper
   collapses to its text line and only that line is clickable. */
.detail-side .selwrap.sm select, .detail-side select { min-height: 32px; height: 32px; }
.tplhead .lk, .pagehead .lk { min-height: 22px; display: inline-flex; align-items: center; }

/* a compact chip set that lives in a section header rather than on its own row */
.chips.tight { margin-bottom: 0; gap: 3px; }
.chip.sm { min-height: 24px; padding: 2px 8px; font-size: 11.5px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

/* a paused schedule looked identical to a running one */
.ibx.paused { opacity: .55; }
.ibx.paused .ibx-l { color: var(--t2); }
.ibx.paused .ibx-i { color: var(--h3); }

/* ── the front door ──────────────────────────────────────────────────────
   One card, centred, in the portal's own tokens. The form IS the product's
   first impression, so it is not allowed to look like a developer stub. */
.authwrap { min-height: 100vh; display: grid; place-items: center;
  background: var(--ground); padding: 24px; }
.authcard { width: min(400px, 92vw); background: var(--s1);
  border: 1px solid var(--h1); border-radius: 10px; padding: 36px 32px;
  display: flex; flex-direction: column; gap: 10px; }
.authcard .emblem { width: 30px; height: auto; color: var(--t1); margin-bottom: 8px; }
.authcard h1 { margin: 0; font-size: 17px; font-weight: 590; letter-spacing: -.01em; color: var(--t1); }
.authcard p { margin: 0 0 6px; font-size: 13px; line-height: 1.6; color: var(--t2); }
.authcard p b { color: var(--t1); font-weight: 510; }
.authform { display: flex; flex-direction: column; gap: 10px; }
.authform input { font: inherit; font-size: 14px; background: var(--s2);
  border: 1px solid var(--h1); border-radius: 6px; padding: 10px 12px; color: var(--t1); }
.authform input:focus { outline: none; border-color: var(--accent); background: var(--s3); }
.authform .btn { justify-content: center; min-height: 38px; font-size: 13.5px; }
.autherr { color: var(--late); font-size: 12.5px; min-height: 1em; margin: 0; }