/* WhatNext app styles. Colors, type, rules and spacing come from design/tokens.css.
   The only new values are the component column widths below, named once here. */
:root {
  --n7-cols: 80px minmax(0, 1fr) 48px 80px 56px 184px; /* rank item pri due hrs actions */
  --ol-cols: minmax(0, 1fr) 40px 64px 44px;            /* text pri due hrs */
  --facts-label-w: 112px;
  --log-date-w: 56px;
  --check: 18px;
  --menu-w: 260px;
  --n7-min-w: 760px;
  --fs-tiny: 11px;      /* badges, kind labels (mockup) */
  --fs-small: 13px;     /* fact labels, log dates (mockup) */
  --fs-container: 19px; /* milestone/project rows in the outline (mockup) */
  --hairline: 2px;
  --fs-card: 18px;      /* observation text (mockup) */
  /* Mobile (SPEC §8.2, design/mockups/Mobile*.dc.html) */
  --m-n7-cols: 36px minmax(0, 1fr) auto; /* rank item actions */
  --m-rank: 26px;
  --m-item: 15px;
  --m-input: 16px;      /* inputs at 16px+ keep iOS from zooming on focus */
  --m-capture-h: 69px;  /* capture bar: 44px field + padding + rule */
  --m-ol-cols: minmax(0, 1fr) 32px 40px; /* text pri hrs (due is in the detail) */
}

* { box-sizing: border-box; }
body { margin: 0; font: var(--wn-body); }
a { color: var(--wn-ink); text-decoration: none; }
a:hover { color: var(--wn-accent); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: var(--hairline) solid var(--wn-ink); outline-offset: var(--hairline); }

/* --- type ---------------------------------------------------------------------------- */
.label { font: var(--wn-label); letter-spacing: var(--wn-label-tracking); text-transform: uppercase; color: var(--wn-muted); }
.meta { font: var(--wn-meta); color: var(--wn-muted); }
.body { font: var(--wn-body); margin: 0; }
.item { font: var(--wn-item); }
.h2 { font: var(--wn-h2); letter-spacing: -0.02em; margin: 0; }
.display { font: var(--wn-display); letter-spacing: -0.05em; margin: 0; }
.display--tree { font-size: calc(var(--wn-s8) + var(--wn-s6)); }
.display--auth { font: var(--wn-h1-mobile); letter-spacing: -0.04em; }
.rank { font: var(--wn-rank); letter-spacing: -0.04em; }
.num { text-align: right; }
.is-accent { color: var(--wn-accent) !important; }
.is-muted { color: var(--wn-muted); }
.is-strong { font-weight: 700; }

/* --- shell --------------------------------------------------------------------------- */
.shell { display: flex; flex-wrap: wrap; align-items: stretch; min-height: 100vh; }
.nav {
  flex: 1 1 var(--wn-nav-w); padding: var(--wn-s7) var(--wn-s6);
  border-right: 1px solid var(--wn-ink);
  display: flex; flex-direction: column; gap: var(--wn-s8);
}
.brand { display: flex; align-items: center; gap: var(--wn-s3); }
.brand__mark { width: var(--wn-s5); height: var(--wn-s5); background: var(--wn-accent); display: block; }
.brand__name { font: var(--wn-h2); font-size: var(--wn-s5); letter-spacing: -0.02em; }
.nav__items { display: flex; flex-direction: column; }
.nav__item {
  display: flex; gap: var(--wn-s4); align-items: baseline; padding: var(--wn-s3) 0;
  border-top: 1px solid var(--wn-ink); font: var(--wn-item); font-size: var(--wn-s4); font-weight: 500;
}
.nav__item:last-child { border-bottom: 1px solid var(--wn-ink); }
.nav__item.is-active { border-top: var(--wn-rule-accent); color: var(--wn-accent); font-weight: 700; }
.nav__num { font: var(--wn-label); color: var(--wn-muted); }
.nav__item.is-active .nav__num { color: var(--wn-accent); }
.nav__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--wn-s1); font: var(--wn-meta); }
.nav__user { font-weight: 600; overflow-wrap: anywhere; }

#main {
  flex: 999 1 560px; min-width: 0; padding: var(--wn-main-pad);
  display: flex; flex-direction: column; gap: var(--wn-s7);
}

.sidebar {
  flex: 1 1 var(--wn-sidebar-w); max-width: 100%; background: var(--wn-panel);
  border-left: 1px solid var(--wn-ink); padding: var(--wn-s6) var(--wn-s5);
  display: flex; flex-direction: column; gap: var(--wn-s5);
}
.sidebar__head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: var(--wn-rule-strong); padding-bottom: var(--wn-s3); }
.sidebar__title { font: var(--wn-h2); font-size: var(--wn-s5); }
.sidebar__thread { display: flex; flex-direction: column; gap: var(--wn-s5); }
.sidebar__form { margin-top: auto; display: flex; flex-direction: column; gap: var(--wn-s2); }
.sidebar__form textarea { border: var(--wn-rule-strong); padding: var(--wn-s3); background: var(--wn-paper); resize: vertical; }
.sidebar__form .btn { align-self: flex-end; }

/* --- page head ----------------------------------------------------------------------- */
.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--wn-s5); border-bottom: var(--wn-rule-heavy); padding-bottom: var(--wn-s5);
}
.page-head--stack { flex-direction: column; align-items: stretch; gap: var(--wn-s3); }
.page-head__title { display: flex; flex-direction: column; gap: var(--wn-s2); }
.page-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--wn-s4); }
.stats { display: flex; gap: var(--wn-s7); padding-bottom: var(--wn-s2); }
.stat { display: flex; flex-direction: column; gap: var(--wn-s1); }
.stat__num { font: var(--wn-rank); font-size: calc(var(--wn-s6) + var(--wn-s2)); font-weight: 700; }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--wn-s2); }
.crumbs a { color: var(--wn-muted); }
.crumbs__here { color: var(--wn-ink); }

/* --- controls ------------------------------------------------------------------------ */
.btn {
  border: 1px solid var(--wn-ink); background: var(--wn-paper); color: var(--wn-ink);
  font: var(--wn-meta); font-weight: 600; padding: 0 var(--wn-s4); min-height: var(--wn-touch);
  border-radius: var(--wn-radius);
}
.btn--quiet { border-color: var(--wn-rule); color: var(--wn-muted); font-weight: 500; }
.btn--primary { border-color: var(--wn-accent); background: var(--wn-accent); color: var(--wn-paper); font-weight: 700; }
.btn--ink { border-color: var(--wn-ink); background: var(--wn-ink); color: var(--wn-paper); font-weight: 700; }
.btn:disabled { opacity: 0.4; cursor: default; }
.link-btn {
  border: none; background: none; padding: var(--wn-s3) 0; font: var(--wn-meta); font-weight: 700;
  text-decoration: underline; text-underline-offset: var(--wn-s1); color: var(--wn-ink);
}
.link-btn--muted { color: var(--wn-muted); font-weight: 500; padding: 0; }
.link-btn--accent { color: var(--wn-accent); padding: 0; }
.chips, .filters { display: flex; flex-wrap: wrap; gap: var(--wn-s2); align-items: center; }
.filters .label { margin-right: var(--wn-s2); }
.chip {
  border: 1px solid var(--wn-ink); background: var(--wn-paper); font: var(--wn-meta); font-weight: 500;
  padding: var(--wn-s3) var(--wn-s4); min-height: var(--wn-touch); display: inline-flex; align-items: center;
}
.chip.is-on { background: var(--wn-ink); color: var(--wn-paper); font-weight: 600; }
.chip--static { min-height: 0; padding: var(--wn-s1) var(--wn-s3); }
.chip--faint { border-color: var(--wn-rule); }
.chip--ink { background: var(--wn-ink); color: var(--wn-paper); font-weight: 600; }
.badge { font: var(--wn-label); font-size: var(--fs-tiny); letter-spacing: 0.1em; text-transform: uppercase; padding: var(--hairline) var(--wn-s1); white-space: nowrap; }
.badge--muted { color: var(--wn-muted); padding: 0; }
.badge--outline { border: 1px solid var(--wn-ink); }
.badge--accent { background: var(--wn-accent); color: var(--wn-paper); }
.badge--ink { background: var(--wn-ink); color: var(--wn-paper); }
.notice { margin: 0 0 var(--wn-s4); padding: var(--wn-s3) var(--wn-s4); border-left: var(--wn-rule-accent); background: var(--wn-panel); font: var(--wn-meta); }
.notice--error { color: var(--wn-accent); font-weight: 600; }
.empty { font: var(--wn-item); font-weight: 500; color: var(--wn-muted); margin: 0; }
.empty a { text-decoration: underline; }
input:not([type=hidden]), select { border: 1px solid var(--wn-ink); background: var(--wn-paper); padding: var(--wn-s2) var(--wn-s3); min-height: var(--wn-touch); border-radius: var(--wn-radius); }

/* --- Next 7 -------------------------------------------------------------------------- */
.n7 { display: flex; flex-direction: column; }
.n7__scroll { overflow-x: auto; }
.n7__table { min-width: var(--n7-min-w); }
.n7__head, .n7__row { display: grid; grid-template-columns: var(--n7-cols); gap: var(--wn-s4); }
.n7__head { padding-bottom: var(--wn-s3); border-bottom: var(--wn-rule-strong); }
.n7__row { padding: var(--wn-s5) 0; border-bottom: var(--wn-rule-thin); align-items: start; }
.n7__row--last { border-bottom: var(--wn-rule-strong); }
.n7__item { display: flex; flex-direction: column; gap: var(--wn-s1); min-width: 0; }
.n7__item .item { overflow-wrap: anywhere; }
.crumb { font: var(--wn-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wn-muted); }
.n7__pri { font-weight: 700; padding-top: var(--wn-s1); }
.n7__pri.is-accent { font-weight: 800; }
.n7__due, .n7__hrs { font-weight: 500; padding-top: var(--wn-s1); }
.n7__due.is-accent { font-weight: 700; }
.n7__actions { display: flex; gap: var(--wn-s2); justify-content: flex-end; align-items: flex-start; }

.menu { position: relative; }
.menu > summary { list-style: none; display: inline-flex; align-items: center; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + var(--wn-s1)); z-index: 10; width: var(--menu-w);
  background: var(--wn-paper); border: var(--wn-rule-strong); padding: var(--wn-s3);
  display: flex; flex-direction: column; gap: var(--wn-s3);
}
.menu__group { display: flex; flex-direction: column; gap: var(--wn-s1); }
.menu__group + .menu__group { border-top: var(--wn-rule-thin); padding-top: var(--wn-s3); }
.menu__btn { border: none; background: none; text-align: left; padding: var(--wn-s2) 0; font: var(--wn-meta); font-weight: 600; min-height: var(--wn-touch); }
.menu__btn:hover { color: var(--wn-accent); }
.menu__inline { display: flex; gap: var(--wn-s2); align-items: center; }
.menu__inline input { flex: 1; min-width: 0; }

.waiting { margin-top: var(--wn-s4); }
.waiting__toggle {
  list-style: none; cursor: pointer; padding: var(--wn-s3) 0; display: flex; gap: var(--wn-s3); align-items: center;
  font: var(--wn-label); font-size: var(--wn-s4); letter-spacing: 0.08em; text-transform: uppercase;
}
.waiting__toggle::-webkit-details-marker { display: none; }
.waiting:not([open]) .waiting__toggle svg { transform: rotate(-90deg); }
.waiting__list { list-style: none; margin: 0; padding: 0; border-top: var(--wn-rule-strong); }
.waiting__row { display: flex; flex-wrap: wrap; gap: var(--wn-s3); align-items: center; padding: var(--wn-s3) 0; border-bottom: var(--wn-rule-thin); }
.waiting__row .n7__item { flex: 1 1 240px; }
.waiting__text { font: var(--wn-body); font-weight: 600; }

/* --- Tree / outliner ------------------------------------------------------------------ */
.tree-layout { display: flex; flex-wrap: wrap; gap: var(--wn-s6); align-items: flex-start; }
.outline { flex: 3 1 420px; min-width: 0; display: flex; flex-direction: column; }
.ol-head { display: grid; grid-template-columns: var(--ol-cols); gap: var(--wn-s3); padding-bottom: var(--wn-s2); border-bottom: var(--wn-rule-strong); }
.ol, .ol-children { list-style: none; margin: 0; padding: 0; }
.ol-children { padding-left: var(--wn-s6); }
.ol-item.is-collapsed > .ol-children { display: none; }
.ol-item.is-collapsed > .ol-row .ol-toggle svg { transform: rotate(-90deg); }
.ol-row {
  display: grid; grid-template-columns: var(--ol-cols); gap: var(--wn-s3); align-items: center;
  padding: var(--wn-s2) var(--wn-s2); margin: 0 calc(-1 * var(--wn-s2)); border-bottom: 1px solid var(--wn-rule-faint);
}
.ol-row--container { padding-top: var(--wn-s3); }
.ol-row--container .ol-text { font-weight: 700; font-size: var(--fs-container); }
.ol-item.is-selected > .ol-row { background: var(--wn-panel); outline: var(--wn-rule-strong); outline-offset: calc(-1 * var(--hairline)); }
.ol-main { display: flex; align-items: center; gap: var(--wn-s3); min-width: 0; }
.ol-toggle { border: none; background: none; padding: 0; width: var(--wn-s5); height: var(--wn-s5); display: flex; align-items: center; justify-content: center; flex: none; }
.ol-toggle--none { display: block; }
.ol-check {
  width: var(--check); height: var(--check); border: var(--wn-rule-strong); background: var(--wn-paper);
  padding: 0; display: flex; align-items: center; justify-content: center; color: transparent; flex: none;
}
.ol-check.is-done { background: var(--wn-ink); color: var(--wn-paper); }
.ol-dash { width: var(--wn-s3); height: var(--hairline); background: var(--wn-muted); display: block; flex: none; margin: 0 var(--wn-s1); }
.ol-kind { font: var(--wn-label); font-size: var(--fs-tiny); font-weight: 700; letter-spacing: var(--wn-label-tracking); text-transform: uppercase; color: var(--wn-accent); }
.ol-text { font: var(--wn-body); font-size: var(--wn-s4); font-weight: 500; outline: none; min-width: 0; flex: 1 1 0; overflow-wrap: anywhere; }
.ol-text:empty::before { content: "…"; color: var(--wn-muted); }
.ol-item.is-closed > .ol-row .ol-text { color: var(--wn-muted); text-decoration: line-through; }
.ol-item.is-note > .ol-row .ol-text { color: var(--wn-muted); font-weight: 400; }
.ol-pri { font: var(--wn-meta); color: var(--wn-muted); }
.ol-pri.is-own { color: var(--wn-ink); font-weight: 700; }
.ol-due, .ol-hrs { font: var(--wn-meta); }
.ol-due { color: var(--wn-muted); }
.ol-help { margin-top: var(--wn-s4); }
.ol-item.is-pending > .ol-row { opacity: 0.6; }

.detail-col { flex: 2 1 300px; min-width: 0; }
.detail { display: flex; flex-direction: column; gap: var(--wn-s5); border-top: var(--wn-rule-strong); border-top-width: var(--wn-s1); padding-top: var(--wn-s4); }
.detail__title { display: flex; flex-direction: column; gap: var(--wn-s1); }
.detail__block { display: flex; flex-direction: column; gap: var(--wn-s2); }
.detail__loghead { padding-bottom: var(--wn-s2); border-bottom: 1px solid var(--wn-ink); }
.facts { margin: 0; display: grid; grid-template-columns: var(--facts-label-w) minmax(0, 1fr); border-top: 1px solid var(--wn-ink); }
.facts dt, .facts dd { padding: var(--wn-s2) 0; border-bottom: 1px solid var(--wn-rule-faint); margin: 0; }
.facts dt { font: var(--wn-meta); font-size: var(--fs-small); color: var(--wn-muted); }
.facts dd a { text-decoration: underline; text-underline-offset: var(--wn-s1); }
.facts select { min-height: 0; padding: var(--wn-s1) var(--wn-s2); }
.log-form { display: flex; gap: var(--wn-s2); }
.log-form input { flex: 1; min-width: 0; }
.log-row { display: grid; grid-template-columns: var(--log-date-w) minmax(0, 1fr); gap: var(--wn-s3); padding: var(--wn-s3) 0; border-bottom: 1px solid var(--wn-rule-faint); }
.log-row__date { font: var(--wn-meta); font-size: var(--fs-small); font-weight: 600; }
.log-row__body { font: var(--wn-meta); }

/* --- auth ----------------------------------------------------------------------------- */
.auth { max-width: 420px; margin: 0 auto; padding: var(--wn-s7) var(--wn-s4); display: flex; flex-direction: column; gap: var(--wn-s5); }
.auth__form { display: flex; flex-direction: column; gap: var(--wn-s2); border-top: var(--wn-rule-heavy); padding-top: var(--wn-s5); }
.auth__form .btn { margin-top: var(--wn-s4); }
.auth a { text-decoration: underline; }

/* --- Goals ----------------------------------------------------------------------------- */
:root {
  --weights-cols: minmax(0, 1fr) 88px minmax(120px, 2fr) 56px 120px; /* title weight bar share status */
  --bar-h: 20px;
}
.goals { display: flex; flex-direction: column; gap: var(--wn-s7); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--wn-s3); margin-bottom: var(--wn-s4); }
.weights__head, .weights__row { display: grid; grid-template-columns: var(--weights-cols); gap: var(--wn-s4); align-items: center; }
.weights__head { padding-bottom: var(--wn-s2); border-bottom: var(--wn-rule-strong); }
.weights__row { padding: var(--wn-s3) 0; border-bottom: var(--wn-rule-thin); }
.weights__title { font: var(--wn-item); font-size: var(--wn-s4); }
.weights__input { width: 100%; text-align: right; }
.weights__share { font-weight: 700; text-align: right; }
.weights__foot { display: flex; justify-content: flex-end; padding-top: var(--wn-s4); }
.bar { position: relative; height: var(--bar-h); background: var(--wn-rule-faint); display: block; }
.bar__fill { position: absolute; inset: 0 auto 0 0; background: var(--wn-ink); display: block; }
.goal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--wn-s6); }
.goal-card { border-top: var(--wn-rule-strong); padding-top: var(--wn-s4); display: flex; flex-direction: column; gap: var(--wn-s3); min-width: 0; }
.goal-card--gap { border-top: var(--wn-rule-accent); }
.goal-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--wn-s3); }
.goal-card__weight { font: var(--wn-rank); font-size: var(--wn-s6); }
.coverage { margin: 0; font: var(--wn-meta); }
.coverage--gap { color: var(--wn-accent); font-weight: 600; display: flex; flex-wrap: wrap; gap: var(--wn-s2); align-items: center; }
.links { display: flex; flex-direction: column; }
.links__head { padding-bottom: var(--wn-s2); border-bottom: 1px solid var(--wn-ink); }
.links__row { display: flex; gap: var(--wn-s3); align-items: center; padding: var(--wn-s2) 0; border-bottom: 1px solid var(--wn-rule-faint); }
.links__name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.links__row select { min-height: 0; padding: var(--wn-s1) var(--wn-s2); }
.links__add { display: flex; flex-wrap: wrap; gap: var(--wn-s2); padding-top: var(--wn-s3); }
.links__add select:first-child { flex: 1 1 200px; min-width: 0; }
.goal-card__edit > summary { list-style: none; cursor: pointer; }
.goal-card__edit > summary::-webkit-details-marker { display: none; }
.stack-form { display: flex; flex-direction: column; gap: var(--wn-s2); padding-top: var(--wn-s3); }
.stack-form .btn { align-self: flex-start; margin-top: var(--wn-s2); }
.new-goal { display: flex; flex-direction: column; gap: var(--wn-s3); }
.new-goal__form { display: flex; flex-wrap: wrap; gap: var(--wn-s2); }
.new-goal__form input[name=title] { flex: 1 1 260px; }
.new-goal__form input[name=weight] { width: 96px; }
.inactive { display: flex; flex-direction: column; }
.inactive > .label { padding-bottom: var(--wn-s2); border-bottom: var(--wn-rule-strong); margin: 0; }
.inactive__row { display: flex; flex-wrap: wrap; gap: var(--wn-s3); align-items: center; padding: var(--wn-s3) 0; border-bottom: var(--wn-rule-thin); }
.inactive__title { font-weight: 600; flex: 1 1 200px; color: var(--wn-muted); }

/* --- Agent sidebar ----------------------------------------------------------------------- */
.sidebar { position: sticky; top: 0; height: 100vh; min-height: 0; }
.sidebar__thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column-reverse; }
#thread-list { display: flex; flex-direction: column; gap: var(--wn-s4); padding-bottom: var(--wn-s2); }
.agent-user { display: flex; flex-direction: column; gap: var(--wn-s1); }
.agent-user p { margin: 0; font: var(--wn-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-turn { display: flex; flex-direction: column; gap: var(--wn-s3); }
.agent-reply { font: var(--wn-body); overflow-wrap: anywhere; }
.agent-reply:empty { display: none; }
.agent-reply.is-live { white-space: pre-wrap; }
.agent-reply p { margin: 0 0 var(--wn-s2); }
.agent-reply p:last-child { margin-bottom: 0; }
.agent-reply ul, .agent-reply ol { margin: 0 0 var(--wn-s2); padding-left: var(--wn-s5); }
.agent-reply code { font-size: var(--fs-small); background: var(--wn-paper); padding: 0 var(--wn-s1); }
.agent-note { margin: 0; }
.chip-card {
  background: var(--wn-paper); border: var(--wn-rule-thin); padding: var(--wn-s3) var(--wn-s4);
  display: flex; justify-content: space-between; align-items: center; gap: var(--wn-s3);
}
.chip-card__body { display: flex; flex-direction: column; gap: var(--wn-s1); min-width: 0; }
.chip-card__text { font: var(--wn-meta); overflow-wrap: anywhere; }
.chip-card.is-retracted .chip-card__text { text-decoration: line-through; color: var(--wn-muted); }
.cs-card { background: var(--wn-paper); border: var(--wn-rule-strong); display: flex; flex-direction: column; }
.cs-card form { display: contents; }
.cs-card__head { display: flex; justify-content: space-between; gap: var(--wn-s2); padding: var(--wn-s3) var(--wn-s4); border-bottom: 1px solid var(--wn-ink); }
.cs-card__why { margin: 0; padding: var(--wn-s2) var(--wn-s4) 0; }
.cs-card .notice { margin: var(--wn-s2) var(--wn-s4) 0; }
.cs-card__line { display: flex; flex-direction: column; gap: var(--wn-s1); padding: var(--wn-s3) var(--wn-s4); border-bottom: var(--wn-rule-thin); }
.cs-card__title { font: var(--wn-meta); font-weight: 600; overflow-wrap: anywhere; }
.cs-card__detail { font: var(--wn-meta); font-size: var(--fs-small); color: var(--wn-muted); }
.cs-card__detail strong { color: var(--wn-ink); }
.cs-card__conflict { padding: 0 var(--wn-s4) var(--wn-s2); }
.cs-card__conflict ul { margin: var(--wn-s2) 0 0; padding-left: var(--wn-s5); }
.cs-card__actions { display: flex; border-top: 1px solid var(--wn-ink); }
.cs-card__actions:empty { display: none; }
.cs-btn { flex: 1; border: none; background: var(--wn-paper); font: var(--wn-meta); font-weight: 600; min-height: var(--wn-touch); }
.cs-btn + .cs-btn { border-left: 1px solid var(--wn-ink); }
.cs-btn--primary { background: var(--wn-accent); color: var(--wn-paper); font-weight: 700; }
.cs-card--rejected, .cs-card--stale, .cs-card--reverted { border-color: var(--wn-rule); }
.cs-card--rejected .cs-card__title, .cs-card--reverted .cs-card__title { color: var(--wn-muted); }
.mini-outline { margin: var(--wn-s2) 0 0; padding-left: var(--wn-s5); display: flex; flex-direction: column; gap: var(--wn-s1); }
.mini-outline li { font: var(--wn-meta); }
.mini-outline li > * { vertical-align: middle; }
.mini-outline input { min-height: 0; padding: var(--wn-s1) var(--wn-s2); font: var(--wn-meta); }
.mini-outline input:not(.mini-outline__est) { width: calc(100% - 64px); }
.mini-outline__est { width: 52px; text-align: right; margin-left: var(--wn-s1); }
.thread-empty:not(:only-child) { display: none; }

/* Closing over open work (SPEC §2.2): an inline three-way prompt, not a modal. */
.confirm {
  position: static; display: block; width: auto; max-width: none; margin: 0 0 var(--wn-s4);
  padding: var(--wn-s4); border: none; border-left: var(--wn-rule-accent); border-radius: var(--wn-radius);
  background: var(--wn-panel); color: var(--wn-ink);
}
.confirm:not([open]) { display: none; }
.confirm__title { margin: 0 0 var(--wn-s2); font: var(--wn-body); font-weight: 700; }
.confirm__list { margin: 0 0 var(--wn-s3); padding-left: var(--wn-s5); font: var(--wn-meta); }
.confirm__list .is-muted { color: var(--wn-muted); list-style: none; }
.confirm__actions { display: flex; flex-wrap: wrap; gap: var(--wn-s2); margin-bottom: var(--wn-s2); }
.confirm--modal {
  position: fixed; inset: 0; margin: auto; height: fit-content;
  width: min(28rem, calc(100% - 2 * var(--wn-s4)));
  border: var(--wn-rule-strong); border-left: var(--wn-rule-accent); background: var(--wn-paper);
}
.confirm--modal::backdrop { background: color-mix(in srgb, var(--wn-ink) 30%, transparent); }


/* --- Mobile (SPEC §8.2): Next 7 + capture + chat; a read-only tree ------------------- */
.tabs, .n7__compact, .n7__more-narrow { display: none; }

@media (max-width: 720px) {
  .shell { display: block; min-height: 0; }
  #main {
    padding: var(--wn-s5) var(--wn-s4) calc(var(--wn-s8) + var(--wn-s5));
    gap: var(--wn-s5);
  }
  body:has(#next7) #main { padding-bottom: calc(var(--wn-s8) + var(--m-capture-h) + var(--wn-s5)); }
  body.is-chat #main { display: none; }

  /* Bottom tab bar: the nav, reduced to Next / Tree / Chat. */
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 0; gap: 0;
    border: none; border-top: var(--wn-rule-strong); background: var(--wn-paper);
  }
  .brand, .nav__items, .nav__foot { display: none; }
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tab {
    display: flex; align-items: center; justify-content: center; height: var(--wn-s8);
    border: none; border-left: 1px solid var(--wn-ink); background: var(--wn-paper);
    font: var(--wn-item); font-size: var(--m-item); font-weight: 600; color: var(--wn-ink);
  }
  .tab:first-child { border-left: none; }
  .tab.is-active, body.is-chat .tab--chat { background: var(--wn-ink); color: var(--wn-paper); font-weight: 800; }
  body.is-chat .tab.is-active:not(.tab--chat) { background: var(--wn-paper); color: var(--wn-ink); font-weight: 600; }

  /* Page heads */
  .display, .display--tree { font: var(--wn-h1-mobile); letter-spacing: -0.05em; overflow-wrap: anywhere; }
  .page-head { gap: var(--wn-s3); padding-bottom: var(--wn-s3); }
  .stats { display: none; }

  /* Next 7: rank · item + compact meta · done square (+ more) */
  .n7__table { min-width: 0; }
  .n7__head, .n7__pri, .n7__due, .n7__hrs, .n7__reason, .n7__item .crumb { display: none; }
  .n7__row { grid-template-columns: var(--m-n7-cols); gap: var(--wn-s3); padding: var(--wn-s3) 0; align-items: center; }
  .n7__row .rank { font-size: var(--m-rank); }
  .n7__item .item { font-size: var(--m-item); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .n7__compact { display: block; font-size: var(--fs-small); }
  .n7__actions { gap: var(--wn-s1); align-items: center; }
  .n7__done { width: var(--wn-touch); padding: 0; border-width: var(--hairline); }
  .n7__done-label, .n7__more-wide { display: none; }
  .n7__more-narrow { display: inline; }
  .n7__actions .menu > summary { width: var(--wn-touch); padding: 0; justify-content: center; }
  .menu__panel { width: min(var(--menu-w), calc(100vw - 2 * var(--wn-s4))); }

  /* Quick capture: the agent form alone, above the tabs, on the Next page. */
  .sidebar {
    display: none; position: fixed; left: 0; right: 0; top: auto; bottom: var(--wn-s8); z-index: 20;
    height: auto; max-width: none; padding: var(--wn-s3) var(--wn-s4);
    border: none; border-top: 1px solid var(--wn-ink); background: var(--wn-paper);
  }
  body:has(#next7) .sidebar { display: flex; }
  .sidebar__head, .sidebar__thread { display: none; }
  .sidebar__form { flex-direction: row; align-items: stretch; margin: 0; }
  .sidebar__form .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sidebar__form textarea {
    flex: 1; min-width: 0; height: var(--wn-touch); min-height: var(--wn-touch); resize: none;
    padding: var(--wn-s2) var(--wn-s3); font-size: var(--m-input); border-width: var(--hairline);
  }
  .sidebar__form textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sidebar__form .btn { align-self: stretch; }

  /* Chat: the same thread, full screen. */
  body.is-chat .sidebar { display: flex; top: 0; border-top: none; padding: var(--wn-s5) var(--wn-s4) var(--wn-s3); background: var(--wn-panel); }
  body.is-chat .sidebar__head, body.is-chat .sidebar__thread { display: flex; }
  body.is-chat .sidebar__form { border-top: 1px solid var(--wn-ink); padding-top: var(--wn-s3); }

  /* Tree: a read-only browser (no editing hints; the detail stacks below). */
  .ol-help, #ol-first { display: none; }
  .ol-children { padding-left: var(--wn-s4); }
  .ol-head, .ol-row { grid-template-columns: var(--m-ol-cols); }
  .ol-head > :nth-child(3), .ol-due { display: none; }
  .tree-layout { gap: var(--wn-s5); }
  .confirm--modal { width: calc(100% - 2 * var(--wn-s4)); }
}

.offline { max-width: 32rem; padding: var(--wn-s7) var(--wn-s4); display: flex; flex-direction: column; gap: var(--wn-s5); align-items: flex-start; }

/* --- Strategic cards (SPEC §5.2; design/mockups/Main.dc.html "Observations") ------------ */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--wn-s5); margin-bottom: var(--wn-s6); }
.card { border-top: var(--wn-rule-accent); padding-top: var(--wn-s4); display: flex; flex-direction: column; gap: var(--wn-s2); }
.card__label { font: var(--wn-label); letter-spacing: var(--wn-label-tracking); text-transform: uppercase; color: var(--wn-accent); font-weight: 700; overflow-wrap: anywhere; }
.card__text { margin: 0; font: var(--wn-body); font-size: var(--fs-card); line-height: 1.35; font-weight: 500; }
.card__suggestion { margin: 0; font: var(--wn-meta); font-style: italic; }
.card__actions { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--wn-s4); }
.card__actions form { display: flex; column-gap: var(--wn-s4); }
.card__actions .link-btn--muted { padding: var(--wn-s3) 0; }
.card__picker { left: 0; right: auto; }
.card__picker select, .card__picker input { min-height: var(--wn-touch); }
.cards__more { grid-column: 1 / -1; margin: 0; }

@media (max-width: 720px) {
  /* Strategic cards: compact, so the 7 stays above the fold. */
  .cards { gap: var(--wn-s3); margin-bottom: var(--wn-s4); }
  .card { padding-top: var(--wn-s2); gap: 0; }
  .card__text { font-size: var(--m-item); }
  .card > .meta { display: none; }
  .card__actions, .card__actions form { column-gap: var(--wn-s3); }
}

/* --- Review (SPEC §5.2; design/mockups/Review.dc.html) ---------------------------------- */
.review__weeks { display: flex; gap: var(--wn-s4); }
.review__weeks a { color: var(--wn-muted); }
.review__note { display: flex; flex-direction: column; gap: var(--wn-s2); border-left: var(--wn-rule-accent); padding-left: var(--wn-s4); }
.review__para { margin: 0; font: var(--wn-body); font-size: var(--fs-card); line-height: 1.45; max-width: 68ch; }
.review__hours { display: flex; flex-direction: column; gap: var(--wn-s3); }
.review__hours-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--wn-s3); border-bottom: var(--wn-rule-strong); padding-bottom: var(--wn-s3); }
.review__legend { display: flex; gap: var(--wn-s4); }
.swatch { display: inline-block; width: var(--wn-s3); height: var(--wn-s3); margin-right: var(--wn-s1); vertical-align: middle; }
.swatch--ink { background: var(--wn-ink); }
.swatch--weight { border: var(--hairline) solid var(--wn-accent); }
.review__goal { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) 6rem; gap: var(--wn-s4); align-items: center; }
.review__goal-name { font-weight: 600; overflow-wrap: anywhere; }
.review__goal-num { text-align: right; }
.bar__mark { position: absolute; top: calc(-1 * var(--wn-s1)); bottom: calc(-1 * var(--wn-s1)); width: var(--hairline); background: var(--wn-accent); }
.review__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--wn-s6); align-items: start; }
.review__projects, .review__cards { display: flex; flex-direction: column; gap: var(--wn-s2); }
.review__row { display: grid; grid-template-columns: minmax(0, 1fr) 3rem 3rem 4.5rem; gap: var(--wn-s3); padding: var(--wn-s2) 0; border-bottom: var(--wn-rule-thin); }
.review__row--head { border-bottom: var(--wn-rule-strong); }
.review__row--stale { grid-template-columns: minmax(0, 1fr) 5rem; }
.review__stale-head { margin-top: var(--wn-s5); }
.review__card { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--wn-s3); }
.review__sev { font: var(--wn-rank); font-size: var(--wn-s5); padding-top: var(--wn-s4); text-align: left; }

@media (max-width: 720px) {
  .review__goal { grid-template-columns: minmax(0, 1fr) 5rem; }
  .review__goal .bar { grid-column: 1 / -1; grid-row: 2; }
}

/* --- Suggestions in the 7 (SPEC §3.5) ---------------------------------------------------- */
.n7__row--suggestion { background: var(--wn-panel); padding-left: var(--wn-s3); padding-right: var(--wn-s3); }
.sg-edit { display: none; grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--wn-s3); align-items: end; padding-top: var(--wn-s3); border-top: var(--wn-rule-thin); }
.n7__row.is-editing .sg-edit { display: grid; }
.sg-edit label { display: flex; flex-direction: column; gap: var(--wn-s1); min-width: 0; }
.sg-edit__title { grid-column: 1 / -1; }
.sg-edit input, .sg-edit select { min-height: var(--wn-touch); width: 100%; border: 1px solid var(--wn-ink); padding: 0 var(--wn-s2); background: var(--wn-paper); }
.sg-edit__go { display: flex; }

/* --- Settings and the sync line ---------------------------------------------------------- */
.settings__section { display: flex; flex-direction: column; gap: var(--wn-s3); max-width: 40rem; }
.settings__form { display: flex; flex-direction: column; gap: var(--wn-s2); }
.settings__form input { min-height: var(--wn-touch); border: var(--wn-rule-strong); padding: 0 var(--wn-s3); }
.settings__form .btn, .settings__actions .btn { align-self: flex-start; }
.settings__actions { display: flex; gap: var(--wn-s3); }
.nav__settings { color: var(--wn-muted); text-decoration: underline; text-underline-offset: var(--wn-s1); }
.nav__settings.is-active { color: var(--wn-accent); }
.syncline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wn-s3); margin: 0 0 var(--wn-s3); }
.syncline__notice { color: var(--wn-ink); }

/* --- Docs attached to a node (SPEC §7.1) -------------------------------------------------- */
.docs__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--wn-s3); padding: var(--wn-s2) 0; border-bottom: 1px solid var(--wn-rule-faint); }
.docs__name { font: var(--wn-meta); min-width: 0; overflow-wrap: anywhere; }
.docs__name a { text-decoration: underline; text-underline-offset: var(--wn-s1); }
.docs__attach { align-self: flex-start; }

/* --- Paused projects/areas (SPEC §2.1) ---------------------------------------------------- */
.ol-item.is-paused > .ol-children, .ol-item.is-paused > .ol-row .ol-text { color: var(--wn-muted); }

/* --- First-login welcome (SPEC §10) ------------------------------------------------------- */
.welcome { display: flex; flex-direction: column; gap: var(--wn-s6); max-width: 40rem; }
.welcome__intro { margin: 0; }
.welcome__ok { font: var(--wn-meta); color: var(--wn-ink); font-weight: 600; margin: 0; }
.welcome__ok::before { content: "✓ "; color: var(--wn-accent); }
.welcome__done .btn { align-self: flex-start; }
.welcome__done input { min-height: var(--wn-touch); border: var(--wn-rule-strong); padding: 0 var(--wn-s3); }