:root {
  --tabbar-h: 64px;
  color-scheme: light;
  --paper: #f2f1ec;
  --card: #fffefb;
  --ink: #171717;
  --muted: #5c584f;
  --line: #ded8d1;
  --pine: #16211a;
  --pine-soft: #24322a;
  --pine-ink: #eef3ee;
  --leaf: #2f5c3a;
  --leaf-soft: #dff0e2;
  --amber: #8a5a12;
  --amber-soft: #f7ead7;
  --clay-soft: #f3e7e0;
  --radius: 22px;
  --tile: 14px;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button, input, textarea { font: inherit; }
p, h3, blockquote { text-wrap: pretty; }

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}

/* ============ gate ============ */
.gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--pine);
}

.gate-card {
  width: min(420px, 100%);
  background: var(--paper);
  border-radius: var(--radius);
  padding: 34px 30px;
  text-align: left;
}

.gate-card h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  margin: 4px 0 10px;
  letter-spacing: -0.01em;
}

.gate-sub { color: var(--muted); font-size: 14.5px; margin: 0 0 18px; }

.gate-row { display: flex; gap: 10px; }

.gate-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  background: var(--card);
}

.gate-row button {
  border: 0;
  border-radius: 12px;
  padding: 11px 22px;
  background: var(--pine);
  color: var(--pine-ink);
  font-weight: 600;
  cursor: pointer;
}

.gate-error { color: #a04b3a; font-size: 13.5px; margin: 12px 0 0; }

/* ============ shell ============ */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  padding: 16px;
  gap: 16px;
}

.sidebar {
  position: sticky;
  top: 16px;
  height: calc(100vh - 32px);
  padding: 20px 16px;
  background: var(--pine);
  color: var(--pine-ink);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.1;
  margin-bottom: 26px;
  padding: 4px 6px;
}

.brand-mark {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--pine-soft);
  color: var(--pine-ink);
  display: grid;
  place-items: center;
}

.brand-mark svg { width: 26px; height: 26px; }

.side-nav { display: flex; flex-direction: column; gap: 2px; }

.side-nav a {
  text-decoration: none;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--pine-ink);
  opacity: 0.78;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.side-nav a:hover { opacity: 1; background: var(--pine-soft); }
.side-nav a.is-current { opacity: 1; background: var(--pine-soft); font-weight: 600; }

.nav-count, .lead-count, .start-count {
  font-size: 11px;
  font-weight: 700;
  background: var(--amber);
  color: #fff;
  border-radius: 999px;
  padding: 1px 8px;
}

.side-foot {
  margin-top: auto;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.55;
  padding: 0 6px;
}

/* ============ workspace ============ */
.workspace { min-width: 0; padding: 10px 26px 140px; max-width: 780px; }

.workspace-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
}

.workspace-head .eyebrow { margin: 0; }

.head-tools { display: flex; align-items: center; gap: 10px; }

.clock-chip {
  font-size: 12px;
  font-weight: 600;
  background: var(--leaf-soft);
  color: var(--leaf);
  border-radius: 999px;
  padding: 5px 14px;
  white-space: nowrap;
}

.help-btn {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pine);
  color: var(--pine-ink);
  display: grid;
  place-items: center;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1;
}

.help-btn:hover { background: var(--pine-soft); }

/* ============ hero ============ */
.hero {
  background: var(--pine);
  color: var(--pine-ink);
  border-radius: var(--radius);
  padding: clamp(26px, 5vw, 44px) clamp(22px, 5vw, 40px);
  margin: 0 0 36px;
}

.hero-eyebrow { color: var(--pine-ink); opacity: 0.55; }

.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 6vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 6px 0 14px;
  text-wrap: balance;
}

.hero-sub {
  font-size: 15.5px;
  line-height: 1.65;
  opacity: 0.82;
  max-width: 52ch;
  margin: 0 0 18px;
}

.hero-cues { display: flex; gap: 10px; flex-wrap: wrap; }

.hero-cues a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pine-ink);
  text-decoration: none;
  border-radius: 999px;
  padding: 9px 18px;
  white-space: nowrap;
}

.hero-cues a:first-child { background: var(--leaf); border: 1px solid var(--leaf); }
.hero-cues a:first-child:hover { filter: brightness(1.12); }

.hero-cues a + a { background: transparent; border: 1px solid rgba(242, 239, 230, 0.6); }
.hero-cues a + a:hover { background: rgba(242, 239, 230, 0.14); }

.view { display: none; }
.view.is-active { display: block; }

.story-eyebrow { color: var(--leaf); }

.chapter-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 6vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  text-wrap: balance;
}

.story p {
  font-size: 16.5px;
  line-height: 1.7;
  max-width: 62ch;
  margin: 0 0 16px;
}

.story a { color: var(--leaf); text-decoration-color: rgba(88, 123, 82, 0.4); }

.section-eyebrow { margin: 34px 0 14px; }

.soft-note { color: var(--muted); font-size: 14px; max-width: 60ch; margin: 26px 0 0; }
.soft-note a { color: var(--leaf); }

/* ============ arrangement ============ */
.aspiration {
  font-family: var(--serif);
  font-size: clamp(21px, 3vw, 26px);
  line-height: 1.45;
  margin: 26px 0;
  padding: 22px 26px;
  background: var(--leaf-soft);
  border-radius: var(--radius);
  color: var(--ink);
  text-wrap: balance;
}

.callout {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--tile);
  padding: 16px 20px;
  font-size: 14.5px;
  max-width: 62ch;
  margin: 0 0 8px;
}

.callout--pending {
  background: var(--amber-soft);
  border-color: transparent;
  margin-top: 22px;
}

.callout--pending a { color: var(--amber); font-weight: 600; }

.role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.role-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--tile);
  padding: 18px 20px;
}

.role-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  margin: 2px 0 8px;
}

.role-card .eyebrow { color: var(--leaf); }
.role-body { font-size: 14px; margin: 0 0 10px; }

.role-how {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.chain-card {
  margin: 22px 0 8px;
  background: var(--pine);
  color: var(--pine-ink);
  border-radius: var(--radius);
  padding: 20px 24px;
}

.chain-card .eyebrow { color: var(--pine-ink); opacity: 0.6; }

.chain {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.chain-node {
  font-family: var(--serif);
  font-size: 20px;
  background: var(--pine-soft);
  border-radius: 999px;
  padding: 6px 18px;
}

.chain-arrow { opacity: 0.5; }
.chain-note { font-size: 14px; opacity: 0.9; margin: 6px 0 0; max-width: 52ch; }

.loop-svg {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 8px auto 6px;
  color: var(--pine-ink);
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--tile);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}

.stat span { font-size: 12px; color: var(--muted); line-height: 1.4; }

.date-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.date-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--tile);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.date-card strong { font-family: var(--serif); font-weight: 400; font-size: 21px; }
.date-card span { font-size: 12px; line-height: 1.4; }
.date-card em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--leaf); }
.date-card.is-past { opacity: 0.55; }
.date-card.is-past em { color: var(--muted); }

/* ============ timeline ============ */
.timeline { display: flex; flex-direction: column; }

.beat {
  padding: 20px 2px;
  border-bottom: 1px solid var(--line);
  max-width: 62ch;
}

.beat:last-child { border-bottom: 0; }

.beat-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.beat-n {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--muted);
}

.beat-when {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--leaf);
}

.beat h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 8px 0 6px; }
.beat p { font-size: 14.5px; color: var(--muted); margin: 0; }
.beat--done h3 { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--muted); }
.beat--done { opacity: 0.72; }

/* ============ tags ============ */
.tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.tag--money { background: var(--leaf-soft); color: var(--leaf); }
.tag--agreement { background: var(--amber-soft); color: var(--amber); }
.tag--logistics { background: var(--clay-soft); color: #8c5a45; }
.tag--expectations { background: #e8e4f2; color: #6b5e93; }
.tag--waiting { background: var(--amber-soft); color: var(--amber); }
.tag--done { background: var(--line); color: var(--muted); }
.tag--now { background: var(--leaf); color: #fff; }

/* ============ money ============ */
.money-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}

.money-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--tile);
  padding: 18px 20px;
}

.money-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14.5px;
}

.money-line strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.money-total { border-bottom: 0; }
.money-total strong { color: var(--leaf); }
.money-note { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }

/* ============ expectations ============ */
.expect-list { display: flex; flex-direction: column; gap: 12px; }

.expect {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--tile);
  padding: 16px 20px;
  max-width: 640px;
}

.expect--pending { background: var(--amber-soft); border-color: transparent; }

.expect-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.expect h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; margin: 0; }
.expect-source { font-size: 11px; color: var(--muted); white-space: nowrap; letter-spacing: 0.06em; text-transform: uppercase; }
.expect p { font-size: 14.5px; margin: 8px 0 0; }

/* ============ still open ============ */
.open-list { display: flex; flex-direction: column; gap: 12px; }

.open-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--tile);
  padding: 16px 20px;
  max-width: 640px;
}

.open-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.open-item h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; margin: 0; }
.open-item p { font-size: 15px; color: var(--ink); line-height: 1.6; margin: 8px 0 0; }

/* ============ agreement ============ */
.draft-banner {
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--tile);
  padding: 12px 18px;
  margin: 0 0 20px;
}

.agree-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.agree-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--tile);
  padding: 15px 18px;
}

.agree-card .eyebrow { color: var(--leaf); }
.agree-card p:not(.eyebrow) { font-size: 13.5px; margin: 0; }
.agree-card a { color: var(--amber); font-weight: 600; }

/* ============ reference ============ */
.contact-list { display: flex; flex-direction: column; gap: 10px; }

.contact {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--tile);
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 6px 16px;
  align-items: baseline;
  max-width: 640px;
}

.contact strong { font-family: var(--serif); font-weight: 400; font-size: 18px; }
.contact span { font-size: 14px; color: var(--ink); }
.contact em { font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--leaf); white-space: nowrap; }

.doc-list { display: flex; flex-direction: column; gap: 10px; }

.doc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--tile);
  padding: 14px 18px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 640px;
}

.doc:hover { border-color: var(--leaf); }
.doc strong { font-size: 14.5px; }
.doc span { font-size: 12.5px; color: var(--muted); }

.ref-notes p {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.65;
  max-width: 62ch;
  margin: 0 0 12px;
}

/* ============ ask ============ */
.ask-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  max-width: 640px;
}

.ask-form textarea {
  width: 100%;
  border: 0;
  resize: vertical;
  background: transparent;
  outline: none;
  font-size: 15px;
  min-height: 64px;
}

.ask-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.ask-hint { font-size: 12.5px; color: var(--muted); }

.ask-actions button {
  border: 0;
  border-radius: 999px;
  padding: 9px 26px;
  background: var(--pine);
  color: var(--pine-ink);
  font-weight: 600;
  cursor: pointer;
}

.asked-item {
  background: var(--leaf-soft);
  border-radius: var(--tile);
  padding: 12px 16px;
  margin-bottom: 10px;
  max-width: 640px;
}

.asked-item p { margin: 0; font-size: 14.5px; }
.asked-item em { font-style: normal; font-size: 12px; color: var(--muted); }

.answer-list .empty-note { color: var(--muted); font-size: 14px; max-width: 56ch; }

.answer {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--tile);
  padding: 16px 20px;
  margin-bottom: 12px;
  max-width: 640px;
}

.answer h3 { font-family: var(--serif); font-weight: 400; font-size: 20px; margin: 0 0 8px; }
.answer p { font-size: 14.5px; margin: 0 0 8px; }
.answer em { font-style: normal; font-size: 12px; color: var(--muted); }

/* ============ bottom tab bar ============ */
.tab-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--pine);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  justify-content: space-around;
  align-items: flex-start;
}

.tab-bar a {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: var(--pine-ink);
  opacity: 0.55;
  padding: 2px 0;
}

.tab-bar a.is-current { opacity: 1; }

.tab-bar svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tab-bar span {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.tab-bar a.is-current span { font-weight: 700; }

.tab-badge {
  position: absolute;
  top: -3px;
  right: calc(50% - 20px);
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  background: var(--amber);
  color: #fff;
  border-radius: 999px;
  padding: 1px 5px;
  line-height: 1.3;
}

/* ============ mobile ============ */
@media (max-width: 900px) {
  .app-shell {
    /* minmax(0,1fr), not 1fr — a bare 1fr track takes its minimum from
       min-content, so one wide child stretches the whole page past the
       viewport and everything gets clipped on the right. */
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    gap: 0;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 10;
    height: auto;
    min-width: 0;
    border-radius: 0;
    padding: 10px 16px;
    flex-direction: row;
    align-items: center;
  }

  .brand { margin-bottom: 0; font-size: 16px; }
  .brand br { display: none; }
  .brand-mark { width: 32px; height: 32px; border-radius: 9px; }
  .brand-mark svg { width: 21px; height: 21px; }

  .side-nav, .side-foot { display: none; }

  .tab-bar { display: flex; }

  .workspace { padding: 18px 18px calc(160px + env(safe-area-inset-bottom, 0px)); }
  .workspace-head { padding: 2px 0 14px; margin-bottom: 22px; flex-wrap: wrap; }

  .role-grid, .stat-strip, .date-strip, .money-cards, .agree-grid { grid-template-columns: 1fr 1fr; }
  .role-grid, .money-cards, .agree-grid { grid-template-columns: 1fr; }

  .contact { grid-template-columns: 1fr; gap: 2px; }
  .contact em { white-space: normal; }
}

@media (max-width: 480px) {
  .stat-strip, .date-strip { grid-template-columns: 1fr 1fr; }
  .chain-node { font-size: 17px; padding: 5px 14px; }
}

/* ============ hero photo ============ */
.hero--photo {
  background:
    linear-gradient(100deg, rgba(14, 16, 12, 0.86) 0%, rgba(16, 20, 14, 0.62) 48%, rgba(20, 26, 16, 0.34) 100%),
    url("assets/hero.jpg") center 42% / cover no-repeat;
}

.hero--photo .hero-title,
.hero--photo .hero-sub,
.hero--photo .hero-eyebrow { text-shadow: 0 1px 14px rgba(10, 10, 9, 0.55); }

.hero--photo .hero-sub { opacity: 0.92; }

/* ============ fix-the-record ============ */
.fix-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(35, 32, 26, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.modal {
  width: min(460px, 100%);
  background: var(--paper);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
}

.modal h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  margin: 2px 0 8px;
}

.modal-body { font-size: 14px; color: var(--muted); margin: 0 0 14px; }

.modal textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--tile);
  background: var(--card);
  padding: 12px 14px;
  resize: vertical;
  min-height: 90px;
  outline: none;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.btn-ghost {
  border: 1px solid var(--line);
  background: none;
  border-radius: 999px;
  padding: 9px 20px;
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
}

.btn-solid {
  border: 0;
  background: var(--pine);
  color: var(--pine-ink);
  border-radius: 999px;
  padding: 9px 22px;
  cursor: pointer;
  font-weight: 600;
}

/* ============ still-open filters ============ */
.filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

.fchip {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.fchip .n { font-size: 11px; opacity: 0.7; margin-left: 4px; }

.fchip.is-on {
  background: var(--pine);
  border-color: var(--pine);
  color: var(--pine-ink);
}

/* ============ ask answers ============ */
.ask-answer {
  background: var(--leaf-soft);
  border-radius: var(--tile);
  padding: 16px 20px;
  margin: 14px 0 4px;
  max-width: 640px;
}

.ask-answer .eyebrow { color: var(--leaf); }
.ask-answer p { font-size: 14.5px; margin: 4px 0 12px; }

.ask-answer .aa-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.aa-go {
  display: inline-block;
  background: var(--pine);
  color: var(--pine-ink);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.aa-quiet {
  background: none;
  border: 0;
  padding: 8px 6px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ask-answer--stuck { background: var(--amber-soft); }
.ask-answer--stuck .eyebrow { color: var(--amber); }

/* ============ accessibility ============ */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 2px;
  border-radius: 4px;
}

.beyond-note { font-size: 14px; color: var(--muted); margin: 18px 0 0; }

.modal-alt { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.modal-alt .fix-link { color: var(--leaf); font-size: 13px; }
.modal-status { margin: 12px 0 0; font-size: 13.5px; font-weight: 600; color: var(--leaf); }

/* hero cues stay side by side on mobile */
@media (max-width: 900px) {
  .hero-cues { flex-wrap: nowrap; }
  .hero-cues a {
    flex: 1;
    text-align: center;
    font-size: 12.5px;
    padding: 9px 8px;
  }
}

/* keyboard open: get the tab bar out of the way of the field being typed in */
body.is-typing .tab-bar { display: none !important; }
body.is-typing .workspace { padding-bottom: 24px; }

/* ============ mobile header + hero cue fixes ============ */
@media (max-width: 900px) {
  .workspace-head {
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: 4px 0 14px;
  }

  .workspace-head .eyebrow {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 10px;
    letter-spacing: 0.1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .head-tools { flex: none; gap: 8px; }

  .clock-chip {
    font-size: 11px;
    padding: 5px 11px;
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 380px) {
  .hero-cues a { font-size: 11.5px; padding: 8px 6px; }
  .hero-cues { gap: 8px; }
}

/* ============ UK26-specific ============ */

/* the acid accent works as a background, never as text on paper */
.hero-cues a:first-child { background: var(--acid, #a8dfae); border-color: var(--acid, #a8dfae); color: #171717; }
.hero-cues a:first-child:hover { filter: brightness(1.06); }

.clock-chip { background: #a8dfae; color: #171717; }
.nav-count { background: #a8dfae; color: #171717; }
.lead-count { background: #a8dfae; color: #171717; }
.start-count { background: #a8dfae; color: #171717; }
.tag--now { background: #a8dfae; color: #171717; }


/* money */
.big-figure {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: 2px 0 16px;
}

.money-card--proof { background: var(--leaf-soft); border-color: transparent; }

.bars { display: flex; flex-direction: column; gap: 12px; }

.bar-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 4px 12px;
  align-items: center;
  font-size: 12.5px;
}

.bar-k { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px; color: var(--muted); }
.bar { height: 9px; border-radius: 5px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; background: #a8dfae; border-radius: 5px; }
.bar-v { font-family: var(--serif); font-size: 17px; font-variant-numeric: tabular-nums; }
.bar-note { grid-column: 2 / -1; font-size: 11.5px; color: var(--muted); margin-top: -2px; }

/* pet sequence diagram */
.seq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 10px; }

.seq-node {
  background: var(--pine-soft);
  border-radius: 12px;
  padding: 9px 14px;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.seq-node b { font-family: var(--serif); font-weight: 400; font-size: 16px; }
.seq-node em { font-style: normal; font-size: 10px; opacity: .65; letter-spacing: .04em; }
.seq-node--open { background: #a8dfae; color: #171717; }
.seq-node--open em { opacity: .75; }
.seq-arrow { opacity: .45; }

.how-line, .risk-line { font-size: 13.5px; margin: 8px 0 0; }
.how-line { color: var(--ink); }
.risk-line { color: var(--muted); }

/* sources */
.doc-src {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--leaf);
  margin-bottom: 3px;
}

/* still-open tags in UK26 tones */
.tag--pets { background: #a8dfae; color: #171717; }
.tag--money { background: var(--leaf-soft); color: var(--leaf); }
.tag--visa { background: #e7e2f5; color: #55499a; }
.tag--logistics { background: var(--amber-soft); color: var(--amber); }

@media (max-width: 900px) {
  .bar-row { grid-template-columns: 68px 1fr auto; }
  .big-figure { font-size: 38px; }
}

/* tab-bar count sits on the icon, not below the label */
.tab-bar a { position: relative; }
.tab-bar .tab-count {
  position: absolute;
  top: 2px;
  left: 50%;
  margin-left: 4px;
  font-size: 9.5px;
  padding: 0 5px;
  line-height: 15px;
  min-width: 15px;
  text-align: center;
}

/* ============ stat strip — subtly multi-toned ============ */
.stat--go   { background: #e2f4e4; border-color: #e2f0a8; }
.stat--wait { background: #fdf2d9; border-color: #f0e0b4; }
.stat--open { background: #eae6f7; border-color: #d9d2ee; }
.stat--warn { background: #fbe6de; border-color: #f2d0c2; }
.stat strong { font-size: 22px; }

/* ============ in flight ============ */
.inflight-list { display: flex; flex-direction: column; gap: 12px; }

.inflight {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--tile);
  padding: 16px 20px;
  max-width: 640px;
}

.inflight:hover { border-color: var(--ink); }
.inflight-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.inflight h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; margin: 0; }
.inflight p { font-size: 14.5px; margin: 8px 0 0; color: var(--muted); }

.state-pill {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.state-pill--waiting { background: #fdf2d9; color: #8a5a12; }
.state-pill--active  { background: #a8dfae; color: #171717; }
.state-pill--todo    { background: var(--line); color: var(--muted); }

/* ============ route ============ */
.route-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.route-node {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 14px; display: flex; flex-direction: column; line-height: 1.25;
}
.route-node b { font-family: var(--serif); font-weight: 400; font-size: 16px; }
.route-node em { font-style: normal; font-size: 10px; color: var(--muted); letter-spacing: .04em; }
.route-node--start, .route-node--end { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.route-node--start em, .route-node--end em { color: rgba(244,241,234,.7); }
.route-node--ferry { background: #a8dfae; border-color: #a8dfae; }
.route-arrow { opacity: .4; }

/* ============ one-line status ============ */
.state-line {
  font-family: var(--serif); font-size: 26px; line-height: 1.25;
  margin: 0 0 22px; max-width: 640px; text-wrap: balance;
}

/* ============ the instrument ============
   Totals that re-run when you turn a variable. */
.instrument {
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius); padding: 22px 24px 20px;
  max-width: 680px; margin-bottom: 22px;
}

.inst-totals { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 18px; }
.inst-big { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.inst-label {
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #a8dfae;
}
.inst-big strong {
  font-family: var(--serif); font-weight: 400; font-size: 34px;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.inst-big em { font-style: normal; font-size: 11.5px; opacity: .6; }
.inst-big--soft .inst-label { color: #f5d98a; }
.inst-big--open .inst-label { color: #f0b9a4; }

.inst-bar {
  display: flex; height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(244,241,234,.12); margin-bottom: 10px;
}
.seg { display: block; height: 100%; }
.seg--paid { background: #9fd47f; }
.seg--booked { background: #a8dfae; }
.seg--quoted { background: #8fc6e0; }
.seg--estimate { background: #f0c579; }
.seg--unknown {
  background: repeating-linear-gradient(135deg, rgba(244,241,234,.3) 0 4px, transparent 4px 8px);
}

.inst-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.leg { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.leg b { font-weight: 700; }
.leg span { opacity: .6; font-variant-numeric: tabular-nums; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot--paid { background: #9fd47f; }
.dot--booked { background: #a8dfae; }
.dot--quoted { background: #8fc6e0; }
.dot--estimate { background: #f0c579; }
.dot--unknown { background: rgba(244,241,234,.4); }

.inst-vars {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  border-top: 1px solid rgba(244,241,234,.14); padding-top: 16px;
}
@media (max-width: 560px) { .inst-vars { grid-template-columns: 1fr; } }

.varc { display: flex; flex-direction: column; gap: 6px; }
.varc-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; }
.varc-head b { font-weight: 600; opacity: .75; }
.varc-val { font-family: var(--serif); font-size: 18px; font-variant-numeric: tabular-nums; }
.varc input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%;
  /* a tall input with the 3px track drawn centered in it: the hit area
     fits a work glove without the padding/background-clip trick, which
     left the thumbs floating with no visible track */
  height: 28px;
  background: linear-gradient(rgba(244,241,234,.25), rgba(244,241,234,.25)) no-repeat center / 100% 3px;
  border-radius: 999px; outline: none;
  /* the whole gesture belongs to the slider — without this, dragging the
     thumb left reads as Safari's back-swipe and yanks him off the page */
  touch-action: none;
}
.varc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: #a8dfae; cursor: pointer; border: 0;
}
.varc input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: #a8dfae; cursor: pointer; border: 0;
}

/* ============ ledger — itemised, expandable ============ */
.ledger { display: flex; flex-direction: column; max-width: 680px; gap: 8px; }

.led {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--tile); overflow: hidden;
}
.led.is-new { border-color: #c8d97a; box-shadow: 0 0 0 3px #f6ffd6; }

.led-head {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 14px 16px; background: none; border: 0; cursor: pointer; text-align: left;
}
.led-head:hover { background: #faf8f3; }
.led-left { min-width: 0; }
.led-left strong { display: block; font-size: 15px; font-weight: 600; }
.led-note { display: block; font-size: 12.5px; color: var(--muted); }
.led-right { text-align: right; flex: none; display: flex; align-items: center; gap: 10px; }
.led-v { font-family: var(--serif); font-size: 22px; font-variant-numeric: tabular-nums; }
.led--unknown .led-v { color: var(--muted); }
.led-caret { font-size: 15px; color: var(--muted); width: 12px; }

.led-body { display: none; border-top: 1px solid var(--line); background: #faf8f3; }
.led.is-open .led-body { display: block; }

.item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
}
.item:last-child { border-bottom: 0; }
.item-left { min-width: 0; }
.item-left b { font-size: 13.5px; font-weight: 600; }
.item-left span { display: block; font-size: 11.5px; color: var(--muted); }
.item-right { text-align: right; flex: none; }
.item-v { font-size: 14.5px; font-variant-numeric: tabular-nums; font-weight: 600; }
.item-conv { display: block; font-style: normal; font-size: 10.5px; color: var(--muted); }
.item--sum { background: #f2efe8; }
.item--unknown .item-v { color: var(--muted); }

/* ============ change log ============ */
.changelog { display: flex; flex-direction: column; gap: 6px; max-width: 680px; margin-bottom: 22px; }
.clog { display: flex; gap: 11px; align-items: flex-start; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.clog:last-child { border-bottom: 0; }
.clog-mark { flex: none; width: 16px; font-weight: 800; color: var(--muted); }
.clog--approved .clog-mark { color: #35621f; }
.clog--declined .clog-mark { color: #9c4426; }
.clog--pending .clog-mark { color: #8a5a12; }
.clog-body strong { display: block; font-size: 13.5px; font-weight: 600; }
.clog-body span { font-size: 11.5px; color: var(--muted); }

.conf {
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 9px; display: inline-block; margin-top: 3px;
}
.conf--paid { background: #dff3d4; color: #35621f; }
.conf--booked { background: #a8dfae; color: #171717; }
.conf--quoted { background: #e2f0f7; color: #1f5670; }
.conf--estimate { background: #fdf2d9; color: #8a5a12; }
.conf--unknown { background: var(--line); color: var(--muted); }

.proof-card {
  background: #e2f4e4; border-radius: var(--tile); padding: 18px 22px;
  margin-top: 22px; max-width: 640px;
}
.proof-card p:not(.eyebrow) { font-size: 14.5px; margin: 0; }

/* ============ needs-detail chip ============ */
.needs {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; background: #fbe6de; color: #9c4426;
  border-radius: 999px; padding: 2px 8px; vertical-align: 1px;
}

/* ============ pet sequence states ============ */
.seq-node--done { background: var(--pine-soft); }
.seq-node--booked, .seq-node--scheduled { background: #a8dfae; color: #171717; }
.seq-node--booked em, .seq-node--scheduled em { opacity: .75; }
.expect--done { opacity: .8; }
.expect--booked, .expect--scheduled { background: #fffdf0; border-color: #e8e2b8; }

/* ============ documents ============ */
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .doc-grid { grid-template-columns: 1fr; } }

.doc-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--tile);
  padding: 14px 18px; display: flex; flex-direction: column; gap: 3px;
}
.doc-card--have { background: #f7fdec; border-color: #e2f0a8; }
.doc-status { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.doc-card--have .doc-status { color: #35621f; }
.doc-card strong { font-size: 14.5px; }
.doc-note { font-size: 12.5px; color: var(--muted); }

/* ============ housing ============ */
.crit-list { display: flex; flex-direction: column; max-width: 640px; }
.crit {
  display: grid; grid-template-columns: 160px 1fr; gap: 6px 18px;
  padding: 13px 2px; border-bottom: 1px solid var(--line); align-items: baseline;
}
.crit:last-child { border-bottom: 0; }
.crit strong { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.crit span { font-size: 15px; }
.crit--done strong { color: #35621f; }
.crit--waiting strong { color: #8a5a12; }
@media (max-width: 600px) { .crit { grid-template-columns: 1fr; gap: 2px; } }

.outreach-list { display: flex; flex-direction: column; gap: 12px; }
.outreach {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--tile);
  padding: 15px 18px; max-width: 640px;
}
.outreach--todo { background: transparent; border-style: dashed; }
.outreach-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.outreach strong { font-size: 15px; }
.outreach p { font-size: 13.5px; color: var(--muted); margin: 7px 0 0; }

/* ============ wiki ============ */
.wiki-search {
  width: 100%; max-width: 640px; border: 1px solid var(--line); border-radius: 999px;
  padding: 13px 20px; background: var(--card); font-size: 15px; outline: none; margin-bottom: 20px;
}
.wiki-search:focus { border-color: var(--ink); }

.wiki-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .wiki-list { grid-template-columns: 1fr; } }

.wiki-item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--tile);
  padding: 15px 18px; text-decoration: none; color: inherit; display: block;
}
a.wiki-item:hover { border-color: var(--ink); }
.wiki-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.wiki-item strong { font-family: var(--serif); font-weight: 400; font-size: 19px; }
.wiki-item p { font-size: 13px; color: var(--muted); margin: 6px 0 0; line-height: 1.55; }
.wiki-go { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--leaf); margin-top: 9px; }

.wiki-type {
  font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.wiki-type--person { background: #eae6f7; color: #55499a; }
.wiki-type--dog { background: #a8dfae; color: #171717; }
.wiki-type--place { background: #e2f0f7; color: #1f5670; }
.wiki-type--doc { background: #fdf2d9; color: #8a5a12; }
.wiki-type--org { background: #dff3d4; color: #35621f; }
.wiki-type--term { background: var(--line); color: var(--muted); }
.wiki-type--money { background: #e2f4e4; color: #4a5a10; }

/* beat links */
.beat-link {
  display: inline-block; font-size: 12.5px; font-weight: 700;
  color: var(--leaf); text-decoration: none; margin-top: 10px;
}
.beat-link:hover { text-decoration: underline; }

/* ============ dog stack cards ============
   Photo, what's in hand, what isn't. Every row that has a file links
   straight to it; every row that doesn't offers to take one. */
.dog-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; max-width: 760px; }
@media (max-width: 760px) { .dog-stack { grid-template-columns: 1fr; } }

.dogcard {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--tile); overflow: hidden; display: flex; flex-direction: column;
}
.dogcard-top { display: flex; gap: 14px; padding: 14px; align-items: center; border-bottom: 1px solid var(--line); }
.dogcard-top img {
  width: 74px; height: 74px; border-radius: 12px; object-fit: cover; flex: none;
}
.dogcard-id { min-width: 0; flex: 1; }
.dogcard-id strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; }
.dogcard-count { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 7px; }
.dogcard-meter { height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.dogcard-meter i { display: block; height: 100%; background: #9fd47f; }

.drow-list { display: flex; flex-direction: column; }
.drow {
  display: flex; gap: 10px; align-items: center;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
}
.drow:last-child { border-bottom: 0; }
.drow.is-new { background: #f6ffd6; }
.drow-mark { flex: none; width: 14px; font-weight: 800; font-size: 13px; color: var(--muted); }
.drow--have .drow-mark { color: #35621f; }
.drow-body { flex: 1; min-width: 0; }
.drow-body strong { display: block; font-size: 13px; font-weight: 600; }
.drow-body span { display: block; font-size: 11px; color: var(--muted); }
.drow--pending .drow-body strong { color: var(--muted); font-weight: 500; }

.drow-file, .drow-attach {
  flex: none; font-size: 10.5px; font-weight: 700; text-decoration: none;
  border-radius: 999px; padding: 4px 10px; cursor: pointer; border: 0;
}
.drow-file { background: #a8dfae; color: #171717; }
.drow-attach { background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
.drow-attach:hover { background: var(--line); color: var(--ink); }

.doc-who { font-size: 11px; color: var(--leaf); font-weight: 700; }
.doc-open, .doc-attach {
  align-self: flex-start; font-size: 10.5px; font-weight: 700; text-decoration: none;
  border-radius: 999px; padding: 4px 10px; margin-top: 6px; cursor: pointer; border: 0;
}
.doc-open { background: #a8dfae; color: #171717; }
.doc-attach { background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
.doc-attach:hover { background: var(--line); color: var(--ink); }

/* ============ proposed changes, shown where they'd land ============ */
.patch-slot:empty { display: none; }
.patch-slot { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; max-width: 680px; }

.patch {
  background: #fffdf0; border: 1px solid #e8ddb0; border-radius: var(--tile);
  padding: 14px 16px; max-width: 680px;
}
.patch-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; flex-wrap: wrap; }
.patch-flag {
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: #8a5a12; color: #fffdf0; border-radius: 999px; padding: 2px 9px;
}
.patch-meta { font-size: 11px; color: var(--muted); }
.patch-say { font-size: 14.5px; margin: 0 0 9px; font-weight: 500; }
.patch-value { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.pv {
  font-size: 11px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 8px; padding: 3px 8px; color: var(--muted);
}
.pv b { color: var(--ink); font-weight: 700; margin-right: 4px; }
.patch-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.patch-yes, .patch-no {
  border: 0; border-radius: 999px; padding: 7px 15px;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.patch-yes { background: var(--ink); color: var(--paper); }
.patch-no { background: none; color: var(--muted); border: 1px solid var(--line); }
.patch-no:hover { color: #9c4426; border-color: #e2b8a8; }
.patch-go {
  font-size: 12px; font-weight: 700; text-decoration: none;
  background: #a8dfae; color: #171717; border-radius: 999px; padding: 6px 13px;
}
.patch-dropped { font-size: 12px; color: var(--muted); }

/* something that arrived by patch, once approved */
.is-new { position: relative; }
.beat.is-new, .open-item.is-new, .wiki-item.is-new, .inflight.is-new,
.date-card.is-new, .crit.is-new, .outreach.is-new, .doc-card.is-new {
  box-shadow: 0 0 0 2px #dff0a0;
}

/* ============ approvals ============ */
.review-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; max-width: 680px; }
.patch--compact { background: var(--card); border-color: var(--line); }

.review-history { display: flex; flex-direction: column; max-width: 680px; }
.hist { display: flex; gap: 12px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.hist:last-child { border-bottom: 0; }
.hist-mark { flex: none; width: 16px; font-weight: 800; }
.hist--approved .hist-mark { color: #35621f; }
.hist--declined .hist-mark { color: #9c4426; opacity: .6; }
.hist--declined .hist-body { opacity: .55; }
.hist-body { flex: 1; min-width: 0; }
.hist-body strong { display: block; font-size: 13.5px; font-weight: 600; }
.hist-body span { font-size: 11.5px; color: var(--muted); }
.hist-go { text-decoration: none; color: var(--muted); font-size: 16px; }

/* ============ the shelf ============ */
.shelf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 760px; margin-bottom: 10px; }
@media (max-width: 700px) { .shelf { grid-template-columns: 1fr; } }

.shelf-item {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--tile); padding: 13px 15px;
}
.shelf-item:hover { border-color: var(--ink); }
.shelf-kind {
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.shelf-item--file .shelf-kind { color: #35621f; }
.shelf-item strong { font-size: 14px; }
.shelf-note { font-size: 11.5px; color: var(--muted); }

.shelf-add {
  background: none; border: 1px dashed var(--line); border-radius: var(--tile);
  padding: 12px 16px; width: 100%; max-width: 760px; cursor: pointer;
  color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 26px;
}
.shelf-add:hover { border-color: var(--ink); color: var(--ink); }

/* ============ who's holding the phone ============ */
.who-row { display: flex; gap: 10px; }
.who-btn {
  flex: 1; border: 1px solid var(--line); border-radius: 14px; padding: 16px;
  background: var(--card); cursor: pointer;
  font-family: var(--serif); font-size: 24px;
}
.who-btn:hover { background: #a8dfae; border-color: #a8dfae; }

.pending-chip {
  background: #8a5a12; color: #fffdf0; text-decoration: none;
  font-size: 11px; font-weight: 800; border-radius: 999px; padding: 4px 11px;
  white-space: nowrap;
}

/* ============ THE BAR ============
   Always along the bottom. It ducks and dims while you scroll and comes
   back when you stop. Messages stack upward out of it and dissolve into
   the page rather than hitting a hard edge. Click in and the page behind
   recedes; the history is already there.

   Lifted from the Strangeland patch build, in this page's palette. */

#bar {
  position: fixed;
  left: 264px; right: 0; bottom: 0;
  z-index: 40;
  padding: 26px 24px calc(18px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--paper) 58%, rgba(244, 241, 234, 0));
  transition: transform .3s ease, opacity .3s ease,
              padding-bottom .3s ease, background .32s ease;
  pointer-events: none;
}

/* Once the page behind goes dark, a pale gradient reads as a slab sitting
   on top of it. The wash deepens with the scrim instead, so the bottom of
   the screen darkens into the rail rather than glowing against it. */
body.chatting #bar {
  background: linear-gradient(to top, rgba(23,23,23,.62) 42%, rgba(23,23,23,0));
}
#bar > * { max-width: 620px; margin: 0 auto; pointer-events: auto; }

/* Out of the way while you're reading, back the moment you stop. It slides
   down *behind* the tab bar rather than onto it, and drops its wash so the
   page isn't read through a half-transparent slab on the way past. */
body.ducked #bar {
  transform: translateY(16px);
  opacity: .5;
  background: linear-gradient(to top, rgba(244, 241, 234, 0) 58%, rgba(244, 241, 234, 0));
}
body.ducked #stack { opacity: 0; pointer-events: none; transition: opacity .25s ease; }

/* The tabs sit above the bar, so nothing can ever overlap them — the bar
   tucks under on the way down. During a conversation they slide off the
   bottom entirely: left in place they show through the wash as a seam. */
.tab-bar { z-index: 50; transition: transform .3s ease, opacity .3s ease; }
body.chatting .tab-bar { transform: translateY(100%); opacity: 0; pointer-events: none; }

/* the stack: newest at the bottom, older ones dissolving upward */
#stack {
  display: flex; flex-direction: column; gap: 8px;
  padding: 30px 2px 12px;
  max-height: 56vh; overflow-y: auto;
  scrollbar-width: none; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.25) 8%, #000 26%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.25) 8%, #000 26%, #000 100%);
}
#stack::-webkit-scrollbar { display: none; }
#stack:empty { display: none; }

.msg {
  border-radius: 15px; padding: 12px 15px;
  font-size: 14px; line-height: 1.5; max-width: 86%;
  animation: rise .34s cubic-bezier(.2,.8,.24,1) both;
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.msg.mine {
  align-self: flex-end;
  background: rgba(23,23,23,.94); color: var(--paper);
  border: 1px solid rgba(23,23,23,.5);
  box-shadow: 0 8px 26px rgba(23,23,23,.22);
}
.msg.theirs {
  align-self: flex-start;
  background: rgba(255,254,251,.9); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(23,23,23,.14);
}
.msg.wide { max-width: 100%; align-self: stretch; }

/* what a turn actually did to the page, listed under what it said */
.msg .did {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(23,23,23,.12);
  font-size: 11.5px; letter-spacing: .02em; color: var(--muted);
}
.msg .did span { display: block; padding: 1.5px 0; }
.msg .did span::before { content: "› "; color: var(--leaf); font-weight: 700; }
.msg.mine .did { border-top-color: rgba(244,241,234,.2); color: rgba(244,241,234,.6); }

.msg-go {
  display: inline-block; margin-top: 9px;
  font-size: 12px; font-weight: 700; text-decoration: none;
  background: #a8dfae; color: #171717; border-radius: 999px; padding: 5px 12px;
}
.msg-file {
  display: inline-block; background: rgba(244,241,234,.16);
  border-radius: 8px; padding: 3px 9px; font-size: 12.5px;
}

/* a proposal, decided without leaving the bar */
.msg.ask { background: rgba(255,253,240,.94); border-color: #e8ddb0; }
.msg.ask .ask-flag {
  display: inline-block; font-size: 9.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--amber); color: #fffdf0;
  border-radius: 999px; padding: 2px 9px; margin-bottom: 8px;
}
.msg.ask .ask-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 11px; }
.msg.ask.is-done { background: rgba(255,254,251,.9); border-color: var(--line); }

#thinking { display: flex; gap: 5px; padding: 0 8px 10px; }
#thinking span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted); animation: blink 1.1s infinite;
}
#thinking span:nth-child(2) { animation-delay: .18s; }
#thinking span:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .22; } 30% { opacity: .9; } }

/* the rail */
.bar-row {
  display: flex; align-items: center; gap: 7px; padding: 7px 8px;
  background: rgba(23,23,23,.86);
  -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(244,241,234,.16);
  border-radius: 26px;
  box-shadow: 0 12px 36px rgba(23,23,23,.3);
}

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid transparent; border-radius: 18px;
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
/* round controls in a rounded rail — a 999px pill around a 36px circle
   reads as two shapes fighting */
.pill.ghost {
  width: 36px; height: 36px; padding: 0; flex: none;
  justify-content: center; font-size: 15px; line-height: 1;
  background: rgba(244,241,234,.1); color: var(--paper);
  border-color: rgba(244,241,234,.18);
}
.pill.ghost:hover { background: rgba(244,241,234,.2); }
.pill--count { font-size: 12px; font-weight: 800; background: var(--amber); border-color: transparent; }

#say {
  flex: 1; min-width: 0;
  border: none; background: transparent; box-shadow: none; outline: none;
  padding: 9px 6px; color: var(--paper);
  font-size: 16px; /* under 16px, iOS zooms the page on focus */
}
#say::placeholder { color: rgba(244,241,234,.5); }

#send {
  flex: none; padding: 9px 16px;
  background: #a8dfae; color: #171717; border-color: transparent;
}
#send .dot { width: 7px; height: 7px; border-radius: 50%; background: #171717; }
#send:disabled { background: rgba(244,241,234,.2); color: var(--paper); }
#send:disabled .dot { background: currentColor; }

.bar-attach { display: flex; flex-wrap: wrap; gap: 7px; padding: 9px 4px 0; }
.attach-chip {
  display: flex; align-items: center; gap: 7px;
  background: rgba(23,23,23,.86); color: var(--paper);
  border: 1px solid rgba(244,241,234,.18);
  border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 12px;
}
.attach-x { border: 0; background: none; cursor: pointer; color: inherit; opacity: .6; font-size: 15px; line-height: 1; padding: 0 3px; }

/* the page recedes while the bar holds focus */
#scrim {
  position: fixed; inset: 0; z-index: 30;
  opacity: 0; pointer-events: none;
  background: rgba(23,23,23,.28);
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  transition: opacity .32s ease, backdrop-filter .32s ease, -webkit-backdrop-filter .32s ease;
}
body.chatting #scrim {
  opacity: 1; pointer-events: auto;
  background: rgba(23,23,23,.42);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
}
body.chatting { overflow: hidden; }

@media (max-width: 900px) {
  #bar {
    left: 0;
    /* The wash runs to the very bottom of the screen. Ending it at the top
       of the tab bar is what put a hard horizontal cut under the rail —
       the rail is held above the tabs by padding instead. */
    bottom: 0;
    padding: 24px 14px calc(var(--tabbar-h, 64px) + 12px + env(safe-area-inset-bottom, 0px));
  }
  /* the tabs have receded, so the rail settles into the space they left */
  body.chatting #bar {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  #stack { max-height: 52vh; }
}


/* ============ gate ============ */
.gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--ink);
}

.gate-card {
  width: min(400px, 100%);
  background: var(--paper);
  border-radius: var(--radius);
  padding: 34px 30px;
}

.gate-card h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  margin: 4px 0 10px;
  letter-spacing: -0.01em;
}

.gate-sub { color: var(--muted); font-size: 14.5px; margin: 0 0 18px; }
.gate-row { display: flex; gap: 10px; }

.gate-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  background: var(--card);
}

.gate-row button {
  border: 0;
  border-radius: 12px;
  padding: 11px 22px;
  background: #a8dfae;
  color: #171717;
  font-weight: 700;
  cursor: pointer;
}

.gate-error { color: #a04b3a; font-size: 13.5px; margin: 12px 0 0; }

/* ============ notes between the two of you ============ */
.note-list:empty { display: none; }
.note-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; max-width: 680px; }

.note {
  background: var(--leaf-soft);
  border-radius: var(--tile);
  padding: 18px 22px;
}
.note.is-new { box-shadow: 0 0 0 2px #dff0a0; }
.note-to {
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--leaf); margin: 0 0 6px;
}
.note-body {
  font-family: var(--serif); font-size: 21px; line-height: 1.35;
  margin: 0 0 8px; text-wrap: pretty;
}
.note-from { font-size: 12.5px; color: var(--muted); margin: 0; }

/* ============ dev: the edge of what it can do ============ */
.bolt-btn {
  position: relative; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card);
  display: grid; place-items: center; text-decoration: none; color: var(--muted);
}
.bolt-btn:hover { border-color: var(--ink); color: var(--ink); }
.bolt-btn svg { width: 15px; height: 15px; fill: currentColor; }
.bolt-count {
  position: absolute; top: -5px; right: -5px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px; background: var(--amber); color: #fffdf0;
  font-size: 9.5px; font-weight: 800; line-height: 15px; text-align: center;
}

.wish-list { display: flex; flex-direction: column; gap: 12px; max-width: 680px; margin-bottom: 8px; }

.wish {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--tile); padding: 16px 18px;
}
.wish--done { opacity: .6; }
.wish--dropped { opacity: .42; }
.wish--building { border-color: #e8ddb0; background: #fffdf0; }

.wish-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; flex-wrap: wrap; }
.wish-state {
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 9px;
  background: var(--line); color: var(--muted);
}
.wish-state--open { background: var(--amber); color: #fffdf0; }
.wish-state--building { background: #a8dfae; color: #171717; }
.wish-state--done { background: #dff3d4; color: #35621f; }
.wish-meta { font-size: 11px; color: var(--muted); }

.wish h3 { font-size: 16px; font-weight: 600; margin: 0 0 9px; }
.wish-line { font-size: 13.5px; line-height: 1.55; margin: 0 0 7px; color: var(--muted); }
.wish-line b { color: var(--ink); font-weight: 700; }
.wish-where {
  display: inline-block; font-size: 11px; color: var(--leaf);
  background: var(--leaf-soft); border-radius: 999px; padding: 3px 10px; margin-bottom: 4px;
}

.wish-acts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.wish-btn {
  border: 1px solid var(--line); background: none; color: var(--muted);
  border-radius: 999px; padding: 5px 13px;
  font-size: 11.5px; font-weight: 700; cursor: pointer; text-transform: lowercase;
}
.wish-btn:hover { border-color: var(--ink); color: var(--ink); }
.wish-btn--go { border-color: #b8d48a; color: #35621f; }
.wish-btn--copy { margin-left: auto; text-transform: none; }

.can-list { display: flex; flex-direction: column; max-width: 680px; }
.can {
  display: grid; grid-template-columns: 160px 1fr; gap: 14px;
  padding: 9px 2px; border-bottom: 1px solid var(--line); align-items: baseline;
}
.can:last-child { border-bottom: 0; }
.can code {
  font-size: 11.5px; color: var(--leaf);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.can span { font-size: 13.5px; color: var(--muted); }
@media (max-width: 600px) { .can { grid-template-columns: 1fr; gap: 1px; } }

/* a wish, announced in the bar */
.msg.wish-msg { background: rgba(255,253,240,.94); border-color: #e8ddb0; }
.wish-flag {
  display: inline-block; font-size: 9.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--amber); color: #fffdf0;
  border-radius: 999px; padding: 2px 9px; margin-bottom: 8px;
}

/* ============================================================
   MOSS — components that UK26 didn't have.

   Everything above this line is the ported shell. Everything below
   is the business: the runway meter, the lead cards, the estimate
   lines, the client cards and the book.
   ============================================================ */

/* ---------- the runway meter ----------
   The one number that decides when notice gets handed in. It sits
   above everything else on Week because it is the reason the rest
   of the page exists. */
.runway { margin: 4px 0 26px; }

.runway-card {
  background: var(--pine);
  color: var(--pine-ink);
  border-radius: var(--radius);
  padding: 24px 24px 26px;
}

.runway-card .eyebrow { color: rgba(238,243,238,.62); }

.runway-big {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 12vw, 72px);
  line-height: 1;
  margin: 6px 0 10px;
  letter-spacing: -0.02em;
}

.runway-big strong { font-weight: 400; }
.runway-big span { font-size: .42em; color: rgba(238,243,238,.55); }

.runway-sub { margin: 0 0 16px; font-size: 14.5px; color: rgba(238,243,238,.82); max-width: 52ch; }

.runway-meter {
  height: 10px;
  border-radius: 99px;
  background: rgba(238,243,238,.14);
  overflow: hidden;
}

.runway-meter i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: #a8dfae;
  transition: width .4s cubic-bezier(.2,.7,.3,1);
}

.runway-hint {
  margin: 14px 0 0;
  font-size: 13px;
  color: rgba(238,243,238,.6);
  max-width: 56ch;
}

.runway-hint b { color: #a8dfae; font-weight: 600; }

.runway-card--unset .runway-big { color: rgba(238,243,238,.35); }

/* ---------- leads ----------
   Note the absence: there is no reply field, no draft, no "suggested
   response" anywhere in here. The buttons record what Bran did. They
   never do it for him. */
.lead-list, .lead-strip { display: grid; gap: 12px; margin-bottom: 24px; }

@media (min-width: 780px) {
  .lead-strip { grid-template-columns: 1fr 1fr; }
}

.lead {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--tile);
  padding: 16px 18px;
}


.lead--answered, .lead--won, .lead--dead { opacity: .62; }

.lead-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.lead-score {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  letter-spacing: .02em;
}

.lead-score--hot  { background: #a8dfae; color: #16211a; }
.lead-score--warm { background: var(--leaf-soft); color: var(--leaf); }

.lead-src { font-size: 12px; color: var(--muted); }

.lead h3 {
  margin: 0 0 6px;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.35;
}

.lead-why { margin: 0 0 12px; font-size: 13px; color: var(--muted); }

.lead-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.lead-open {
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--leaf);
  margin-right: auto;
}

.lead-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 99px;
  padding: 5px 13px;
  font-size: 12.5px;
  cursor: pointer;
}

.lead-btn:hover { border-color: var(--ink); color: var(--ink); }
.lead-btn--go { background: #a8dfae; border-color: #a8dfae; color: #16211a; font-weight: 600; }

.lead-done {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 99px;
  background: var(--line);
  color: var(--muted);
}

.lead-done--won { background: #a8dfae; color: #16211a; }

/* the response formula — his, kept next to the leads so it's in front
   of him at the moment he's about to type something lazy */
.formula-card {
  background: var(--leaf-soft);
  border-radius: var(--tile);
  padding: 20px 22px;
  margin-top: 28px;
}

.formula-card .eyebrow { color: var(--leaf); }
.formula-card ol { margin: 10px 0 12px; padding-left: 20px; }
.formula-card li { margin-bottom: 6px; font-size: 14.5px; }
.formula-card .soft-note { margin: 0; }

/* ---------- job + lead state colours ----------
   paid and booked are money. quoted and lead are not. The palette
   says so before you read a word of it. */
.seg--lead { background: #cfc9c0; }
.dot--lead { background: #cfc9c0; }
.conf--lead { background: var(--line); color: var(--muted); }

.led-prose {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
}

.inflight-when {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------- estimates ---------- */
.est-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.instrument--est { margin-bottom: 26px; }

.est-lines { display: grid; gap: 2px; margin-bottom: 16px; }

.estline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 14px 18px;
}

.estline:first-child { border-radius: var(--tile) var(--tile) 0 0; }
.estline:last-child { border-radius: 0 0 var(--tile) var(--tile); }
.estline + .estline { border-top: none; }

.estline-kind {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.estline--labor .estline-kind { background: var(--leaf-soft); color: var(--leaf); }
.estline--material .estline-kind { background: #e2f0f7; color: #1f5670; }
.estline--transport .estline-kind { background: var(--amber-soft); color: var(--amber); }

/* min-width:0 so a long line name can wrap instead of forcing the row
   wider than its container — the same automatic-minimum trap that blew
   out the UK26 mobile grid. */
.estline-left { flex: 1; min-width: 0; }
.estline-left strong { display: block; font-size: 15px; font-weight: 600; }
/* Direct child only. The needs-detail chip is also a <span>, and a
   descendant selector here beat `.needs` on specificity and stretched the
   pill across the whole row. */
.estline-left > span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }

.estline-right { text-align: right; white-space: nowrap; }
.estline-v { display: block; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }


/* the answer to the client who counts mulch bags, written down before
   he is standing in a driveway having that conversation */
.margin-card {
  background: var(--amber-soft);
  border-radius: var(--tile);
  padding: 20px 22px;
  margin-top: 26px;
}

.margin-card:empty { display: none; }
.margin-card .eyebrow { color: var(--amber); }
.margin-card p { font-size: 14.5px; margin: 0 0 10px; max-width: 62ch; }
.margin-card .soft-note { margin: 0; }

/* ---------- clients ---------- */
.client-list { display: grid; gap: 14px; }

@media (min-width: 860px) {
  .client-list { grid-template-columns: 1fr 1fr; }
}

.clientcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--tile);
  padding: 18px 20px;
}

.clientcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.clientcard-head h3 { margin: 0; font-size: 18px; font-weight: 600; }

.clientcard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--muted);
}

.clientcard p { font-size: 14px; margin: 0 0 12px; }

.clientcard-jobs { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 6px; }

.cj { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.cj b { font-weight: 600; }
.cj span { color: var(--muted); }
.cj em { margin-left: auto; font-style: normal; }

/* ---------- the book ---------- */
.qa-list { display: grid; gap: 12px; margin-bottom: 28px; }

.qa {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--tile);
  padding: 16px 18px;
}

.qa-head { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.qa-head h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.qa p { margin: 0 0 8px; font-size: 14px; }
.qa-src { font-size: 12px; color: var(--muted); }

.mat-list { display: grid; gap: 2px; margin-bottom: 28px; }

.mat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 12px 18px;
}

.mat:first-child { border-radius: var(--tile) var(--tile) 0 0; }
.mat:last-child { border-radius: 0 0 var(--tile) var(--tile); }
.mat + .mat { border-top: none; }

.mat-left strong { display: block; font-size: 14.5px; font-weight: 600; }
.mat-left span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

.mat-right { text-align: right; white-space: nowrap; }
.mat-cost { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mat-charge { display: block; margin-top: 2px; font-size: 11.5px; color: var(--leaf); }

/* ---------- tags for this business ---------- */
.tag--system  { background: #e5e9f2; color: #4a5a7a; }
.tag--leads   { background: var(--leaf-soft); color: var(--leaf); }
.tag--clients { background: var(--clay-soft); color: #8c5a45; }
.tag--craft   { background: var(--amber-soft); color: var(--amber); }
.tag--consult { background: var(--leaf); color: #fff; }

/* the unanswered-lead badge, same treatment as the open count */
.lead-count:empty { display: none; }

/* ---------- the opening ----------
   Deliberately not a wizard. No step counter forcing a path, no modal, no
   "you're 40% complete!". A list of questions he can answer in any order,
   leave, and come back to. The progress bar is information, not pressure. */
.start-meter {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 30px;
}

.start-bar {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}

.start-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--leaf);
  transition: width .4s cubic-bezier(.2,.7,.3,1);
}

.start-count-line { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

.q-list { display: grid; gap: 12px; margin-bottom: 30px; }

.q {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--tile);
  padding: 18px 20px;
}

.q--answered { background: var(--leaf-soft); border-color: transparent; }
.q--unsure   { background: var(--amber-soft); border-color: transparent; }
.q--skipped  { opacity: .58; }

.q-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.q-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.q-mark {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
}

.q-mark--yes    { background: var(--leaf); color: #fff; }
.q-mark--unsure { background: var(--amber); color: #fff; }
.q-mark--skip   { background: var(--line); color: var(--muted); }

/* the consequence, not an encouragement */
.q-why {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--muted);
  max-width: 60ch;
  line-height: 1.55;
}

.q-said {
  margin: 0 0 14px;
  font-size: 13.5px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(0,0,0,.05);
  color: var(--ink);
}

.q-acts { display: flex; flex-wrap: wrap; gap: 8px; }

.q-btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 99px;
  padding: 7px 16px;
  font-size: 13.5px;
  cursor: pointer;
}

.q-btn:hover { border-color: var(--ink); }
.q-btn--go { background: var(--pine); border-color: var(--pine); color: var(--pine-ink); font-weight: 600; }
.q-btn--go:hover { filter: brightness(1.3); }
.q-btn--quiet { border-color: transparent; background: transparent; color: var(--muted); }
.q-btn--quiet:hover { color: var(--ink); border-color: var(--line); }

/* the question, handed to the bar rather than answered in a field */
/* The base flag style is scoped to .msg.ask, and a handed-over question
   isn't one of those — it's a question, not a proposal. Full style here. */
.ask-flag--q {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--leaf);
  color: #fff;
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: 8px;
}

.start-chip {
  background: var(--pine);
  color: var(--pine-ink);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 99px;
  text-decoration: none;
  white-space: nowrap;
}

.start-count:empty { display: none; }

.qa-empty { color: var(--muted); font-style: italic; }

/* ---------- the intro cards ----------
   Horizontal scroll-snap rather than a JS gesture handler. Native swipe
   momentum on a phone, and the scroll position IS the state, so the dots
   can't get out of step with what's on screen. */
.intro {
  position: relative;
  margin: 4px 0 26px;
  /* The sliver of the next card showing at the right edge. This is the
     whole reason the thing reads as swipeable — an edge-to-edge card is
     just a card. */
  --peek: 42px;
  --inset: 22px;
}

.intro-track {
  display: flex;
  /* flex-basis resolves against the flex container's own width, which is
     the visible box. `grid-auto-columns: minmax(0,100%)` does not — with
     seven auto columns inside an overflow-x container the percentage
     resolved against the whole scrollable row and every card came out a
     seventh of the width. */
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* No padding-right here. flex-basis:% resolves against the content box,
     so padding on the track and --peek on the card both subtract it and
     the card came out 42px narrower than intended. The peek comes from
     the card being narrower than its container, once. */
}

.intro-track::-webkit-scrollbar { display: none; }
.intro-track:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }

.intro-card {
  flex: 0 0 calc(100% - var(--peek));
  min-width: 0;
  scroll-snap-align: start;
  border-radius: var(--radius);
  padding: 24px var(--inset) 74px;   /* bottom reserves room for the nav */
  /* A floor, not a target. At 300 this was taller than the tallest card's
     own content, so every card got slack on top of the slack the flex
     stretch already gives the short ones. */
  min-height: 232px;
  display: flex;
  flex-direction: column;
}

/* eyebrow left, position counter right, everything else pushed to the
   baseline by .intro-fill */
.intro-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.intro-top .eyebrow { margin: 0; }
.intro-fill { flex: 1; min-height: 20px; }

.intro-n {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .02em;
  white-space: nowrap;
}

.intro-n b { font-weight: 400; }
.intro-n i { font-style: normal; opacity: .45; }

.intro-card h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 8.8vw, 40px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  text-wrap: balance;
}

.intro-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.58;
  max-width: 42ch;
}

.intro-cue {
  align-self: flex-start;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.intro-cue:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- tones ----------
   Five, cycled to make a rhythm you feel while thumbing through:
   dark, light, loud, mid, warm, dark, light. Set per card in
   bos/business/intro.md so the order can be reshuffled without code. */
.intro-card--pine { background: var(--pine); color: var(--pine-ink); }
.intro-card--pine .eyebrow,
.intro-card--pine .intro-n { color: #a8dfae; }
.intro-card--pine .intro-body { color: rgba(238,243,238,.84); }
.intro-card--pine .intro-cue { color: #a8dfae; }

.intro-card--leaf { background: var(--leaf); color: #f2f8f3; }
.intro-card--leaf .eyebrow,
.intro-card--leaf .intro-n { color: #bde5c4; }
.intro-card--leaf .intro-body { color: rgba(242,248,243,.88); }
.intro-card--leaf .intro-cue { color: #dff0e2; }

.intro-card--acid { background: #a8dfae; color: #16211a; }
.intro-card--acid .eyebrow,
.intro-card--acid .intro-n { color: #2f5c3a; }
.intro-card--acid .intro-body { color: rgba(22,33,26,.82); }
.intro-card--acid .intro-cue { color: #16211a; }

.intro-card--mist { background: var(--leaf-soft); color: var(--ink); }
.intro-card--mist .eyebrow,
.intro-card--mist .intro-n { color: var(--leaf); }
.intro-card--mist .intro-body { color: rgba(23,23,23,.76); }
.intro-card--mist .intro-cue { color: var(--leaf); }

.intro-card--sand { background: var(--amber-soft); color: var(--ink); }
.intro-card--sand .eyebrow,
.intro-card--sand .intro-n { color: var(--amber); }
.intro-card--sand .intro-body { color: rgba(23,23,23,.76); }
.intro-card--sand .intro-cue { color: var(--amber); }

/* ---------- the controls, inset into the card ----------
   Absolutely positioned over the card rather than sitting under the whole
   module, so they read as belonging to the thing they move. Dots left,
   arrows paired on the right where a thumb already is. */
.intro-nav {
  position: absolute;
  left: var(--inset);
  right: calc(var(--peek) + var(--inset));
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

.intro-nav > * { pointer-events: auto; }

.intro-dots { display: flex; gap: 7px; margin-right: auto; align-items: center; }

.intro-dot {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  cursor: pointer;
  transition: background .2s, width .2s;
}

.intro-dot.is-on { width: 22px; }

.intro-arrow {
  width: 36px; height: 36px;
  flex: none;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 99px;
  border: 1px solid transparent;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: opacity .15s, background .15s;
}

.intro-arrow:disabled { opacity: .28; cursor: default; }

/* light controls over the dark cards */
.intro-nav--pine .intro-dot,
.intro-nav--leaf .intro-dot { background: rgba(238,243,238,.3); }
.intro-nav--pine .intro-dot.is-on,
.intro-nav--leaf .intro-dot.is-on { background: #a8dfae; }
.intro-nav--pine .intro-arrow,
.intro-nav--leaf .intro-arrow {
  background: rgba(238,243,238,.1);
  border-color: rgba(238,243,238,.22);
  color: #eef3ee;
}
.intro-nav--pine .intro-arrow:hover:not(:disabled),
.intro-nav--leaf .intro-arrow:hover:not(:disabled) { background: rgba(238,243,238,.2); }

/* dark controls over the light ones */
.intro-nav--acid .intro-dot,
.intro-nav--mist .intro-dot,
.intro-nav--sand .intro-dot { background: rgba(22,33,26,.22); }
.intro-nav--acid .intro-dot.is-on,
.intro-nav--mist .intro-dot.is-on,
.intro-nav--sand .intro-dot.is-on { background: #16211a; }
.intro-nav--acid .intro-arrow,
.intro-nav--mist .intro-arrow,
.intro-nav--sand .intro-arrow {
  background: rgba(22,33,26,.07);
  border-color: rgba(22,33,26,.16);
  color: #16211a;
}
.intro-nav--acid .intro-arrow:hover:not(:disabled),
.intro-nav--mist .intro-arrow:hover:not(:disabled),
.intro-nav--sand .intro-arrow:hover:not(:disabled) { background: rgba(22,33,26,.14); }

@media (min-width: 760px) {
  .intro { --peek: 78px; --inset: 30px; }
  .intro-card { min-height: 212px; padding-top: 28px; }
}

/* ---------- who you are ---------- */
.who-btn {
  flex: none;
  min-width: 32px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.who-btn:hover { border-color: var(--ink); }

.who-pick {
  flex: 1;
  padding: 14px 18px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 99px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.who-pick:hover { border-color: var(--ink); }
.who-pick.is-current { background: var(--pine); border-color: var(--pine); color: var(--pine-ink); }

.who-cancel {
  display: block;
  margin: 16px auto 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.who-cancel:hover { color: var(--ink); }

/* ---------- estimate picker ----------
   Rows, not chips. An estimate is named for a client and a place, which
   wraps to two lines inside a pill and drags the status chip along with
   it. A row also has somewhere to put the number. */
.est-picker { display: grid; gap: 2px; margin-bottom: 22px; }

.est-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 13px 16px;
  cursor: pointer;
  color: var(--ink);
}

.est-tab:first-child { border-radius: var(--tile) var(--tile) 0 0; }
.est-tab:last-child { border-radius: 0 0 var(--tile) var(--tile); }
.est-tab + .est-tab { border-top: none; }
.est-tab:hover { border-color: var(--ink); }

.est-tab.is-on { background: var(--pine); border-color: var(--pine); color: var(--pine-ink); }
.est-tab.is-on + .est-tab { border-top: none; }

.est-tab-left { flex: 1; min-width: 0; }
.est-tab-left b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.est-tab-left span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.est-tab.is-on .est-tab-left span { color: rgba(238,243,238,.6); }

.est-tab-v {
  flex: none;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- talking instead of typing ---------- */
.pill--mic {
  width: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: none;
}

.pill--mic svg {
  width: 19px; height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.bar-rec {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rec-x, .rec-ok {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 99px;
  border: 0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.rec-x { background: rgba(255,255,255,.12); color: #eef3ee; }
.rec-x:hover { background: rgba(255,255,255,.2); }
.rec-ok { background: #a8dfae; color: #16211a; font-weight: 700; }
.rec-ok:hover { filter: brightness(1.06); }

.rec-wave {
  flex: 1;
  min-width: 0;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
}

.rec-wave i {
  display: block;
  width: 3px;
  height: 4px;
  border-radius: 99px;
  background: rgba(238,243,238,.45);
  transition: height .07s linear;
}

/* Live mode: heights come straight off the analyser, every frame, so
   the bars ARE the mic level. The keyframe loop below only exists for the
   fallback (no getUserMedia) and only while words are arriving. */
.rec-wave.is-live i { background: #a8dfae; }

.rec-wave.is-fallback.is-talking i { animation: rec-bar .8s ease-in-out infinite; background: #a8dfae; }
.rec-wave.is-fallback.is-talking i:nth-child(3n)   { animation-duration: .62s; }
.rec-wave.is-fallback.is-talking i:nth-child(3n+1) { animation-duration: .94s; }
.rec-wave.is-fallback.is-talking i:nth-child(4n)   { animation-delay: .18s; }
.rec-wave.is-fallback.is-talking i:nth-child(5n)   { animation-delay: .34s; }

@keyframes rec-bar {
  0%, 100% { height: 5px; }
  50%      { height: 22px; }
}

.rec-time {
  flex: none;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: rgba(238,243,238,.66);
}

@media (prefers-reduced-motion: reduce) {
  .rec-wave.is-fallback.is-talking i { animation: none; height: 14px; }
}

/* ---------- the week header ----------
   A greeting and the day's facts, nothing to press. */
.wk-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 6px 0 30px;
  flex-wrap: wrap;
}

.wk-greet h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 9vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 2px 0 8px;
}

.wk-sub { margin: 0; font-size: 14px; color: var(--muted); }

.wk-live { display: flex; gap: 22px; }

.wkl strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.wkl span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }

/* ---------- what it hunts for ---------- */
.hunt-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.hunt {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 99px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 13px;
}

.hunt b { font-weight: 600; }
.hunt i { font-style: normal; font-size: 11px; color: var(--muted); }

.hunt--avoid { background: #fbe6de; border-color: transparent; }
.hunt--avoid b { color: #9c4426; }
.hunt--avoid i { color: rgba(156,68,38,.7); }

.hunt--area { background: var(--leaf-soft); border-color: transparent; }
.hunt--area b, .hunt--area i { color: var(--leaf); }