/* ============================================================
   Clarence — Shared UI Components
   Cross-surface styles for components that appear in more than
   one HTML file (clarence.html, clarence-mobile.html, viewer.html,
   future home.html, build-log.html, bench.html).

   Depends on tokens.css. Load tokens.css first.
   ============================================================ */


/* ============================================================
   WS-12 Phase 1b — Build Center redesign

   All styles below are scoped under #build so they only apply
   to the desktop Build Center screen in clarence.html. The home
   screen, mobile app, left/right trays, and drawing viewer keep
   their existing styles until their own redesign phases land.

   Existing class names are preserved where possible so the
   render JS doesn't have to be rewritten — they just get
   restyled to match the design.
   ============================================================ */

/* ---- Build screen canvas ---- */
#build {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}
#build .center {
  background: var(--bg);
}

/* ---- App bar (replaces dark .c-head) ---- */
#build .c-head {
  background: var(--bg);
  border-bottom: 1px solid var(--border-hairline);
  height: auto;
  min-height: 56px;
  padding: 12px 24px;
  align-items: center;
  gap: 24px;
}
#build .bc-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
  min-width: 0;
}
/* Cross-nav sits between bar-left (wordmark + crumb) and c-actions.
   margin-right: auto pushes c-actions to the bar's right edge while
   keeping cross-nav left-of-center for natural reading order. */
#build .c-head > .cross-nav { margin-right: auto; margin-left: 8px; }
#ask .ask-appbar > .cross-nav { margin-right: auto; margin-left: 8px; }
#build .c-head { gap: 12px; padding: 12px 16px; }
#build .c-head .c-actions { flex: 0 0 auto; }
#build .bc-wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-strong);
  position: relative;
  display: inline-block;
  padding: 4px 0;
  cursor: pointer;
  flex-shrink: 0;
}
#build .bc-wordmark::before {
  content: "";
  position: absolute;
  left: 0.6em;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--brand-500);
}
[data-theme="dark"] #build .bc-wordmark::before { background: var(--brand-400); }

#build .c-head .crumb {
  flex: 0 1 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  min-width: 0;
}
#build .c-head .crumb-item {
  color: var(--text-tertiary);
  cursor: default;
}
#build .c-head .crumb-item.cur {
  color: var(--text-strong);
  font-weight: 500;
}
#build .c-head .crumb-sep {
  color: var(--text-tertiary);
  opacity: 0.5;
  padding: 0 8px;
}

#build .c-head .c-actions { gap: 6px; }

/* App bar action buttons (Theme / DWG / Home) */
#build .c-head .theme-btn,
#build .c-head .ic-btn,
#build .c-head .home-btn {
  height: auto;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#build .c-head .theme-btn:hover,
#build .c-head .ic-btn:hover,
#build .c-head .home-btn:hover {
  background: var(--bg-raised);
  border-color: var(--border);
  color: var(--text);
}

/* ---- Center body — paper canvas with max-width column ---- */
#build .c-body {
  background: var(--bg);
  padding: 24px 32px 40px;
}
#build .c-body::-webkit-scrollbar { width: 6px; }
#build .c-body::-webkit-scrollbar-thumb { background: var(--border-hairline); border-radius: 3px; }
#build .bc-inner {
  max-width: 760px;
  margin: 0 auto;
  transition: max-width 0.25s ease;
}

/* ---- Step strip (replaces .part-head heading) ---- */
#build .part-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-hairline);
  padding-bottom: 10px;
  margin-bottom: 24px;
  gap: 16px;
}
#build .part-where {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
#build .part-where strong {
  color: var(--text-strong);
  font-weight: 500;
}
#build .part-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
/* Hide the old big subsection-number / loud title bits in build */
#build .part-big { display: none; }
#build .part-title { display: none; }

/* ---- Van's plans collapsed banner ---- */
#build .plans-text-block {
  display: block;
  margin: 0 0 24px;
  border: 1px solid var(--border-hairline);
  border-left: 3px solid var(--paper-300);
  border-radius: 4px;
  background: var(--bg-raised);
  overflow: hidden;
}
#build .plans-text-block:hover {
  border-left-color: var(--ink-400);
}
#build .ptb-toggle {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  background: transparent;
  cursor: pointer;
  transition: none;
}
#build .ptb-toggle:hover { background: transparent; }
#build .ptb-icon {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  width: 10px;
  text-align: center;
}
#build .ptb-toggle.open .ptb-icon { transform: rotate(90deg); }
#build .ptb-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  flex: none;
}
#build .ptb-lbl strong { color: var(--text-strong); font-weight: 500; }
#build .ptb-src {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-align: right;
}
#build .ptb-verb {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}
#build .plans-text-block .ptb-body {
  padding: 18px 22px;
  background: transparent;
  border-top: 1px solid var(--border-hairline);
}
#build .ptb-prose {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-strong);
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ---- Clarence Notes (paraphrase prose) ---- */
#build .commentary-block {
  display: block;
  margin: 0 0 36px;
  border: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
#build .cmnt-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
[data-theme="dark"] #build .cmnt-eyebrow { color: var(--brand-300); }
#build .cmnt-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-hairline);
}
#build .cmnt-body {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-strong);
  margin: 0;
  max-width: 60ch;
  text-wrap: pretty;
  padding: 0;
  background: transparent;
  border: 0;
}
#build .cmnt-body p { margin: 0; }
#build .cmnt-body p + p { margin-top: 12px; }

/* ---- Steps section header ---- */
#build .steps-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-hairline);
}
#build .steps-head h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--text-strong);
}
#build .steps-head .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ---- Step rows ---- */
#build .step-card {
  display: grid;
  grid-template-columns: 56px 1fr 36px;
  gap: 20px;
  padding: 22px 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--border-hairline);
  border-radius: 0;
  background: transparent;
  align-items: start;
  min-height: 0;
  cursor: pointer;
  transition: background 0.12s;
}
#build .step-card:hover {
  background: linear-gradient(180deg, transparent 0%, var(--bg-raised) 50%, transparent 100%);
  border-color: var(--border-hairline);
}
#build .step-card.is-warn,
#build .step-card.is-crit { border-left: 0 !important; }
#build .step-card.cur {
  background: transparent;
  border-color: var(--border-hairline);
}

/* Number badge — open-bordered drafting-ink box */
#build .step-card .step-badge {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--brand-700);
  border: 1px solid var(--brand-500);
  border-radius: 3px;
  width: 36px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--bg);
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
[data-theme="dark"] #build .step-card .step-badge {
  color: var(--brand-300);
  border-color: var(--brand-500);
}
#build .step-card.cur .step-badge {
  background: var(--bg);
  color: var(--brand-700);
  border-color: var(--brand-500);
}

/* Body — serif prose */
#build .step-card .step-body {
  min-width: 0;
}
#build .step-card .step-txt {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  text-wrap: pretty;
}
#build .step-card .step-txt strong { color: var(--text-strong); font-weight: 500; }
#build .step-card .step-txt .mono,
#build .step-card .step-txt .pref {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--paper-200);
  padding: 1px 6px;
  border-radius: 2px;
  color: var(--text-strong);
  border: 0;
  text-decoration: none;
  cursor: pointer;
}
[data-theme="dark"] #build .step-card .step-txt .mono,
[data-theme="dark"] #build .step-card .step-txt .pref {
  background: var(--paper-100);
}
#build .step-card .step-txt .pref:hover {
  background: var(--brand-100);
  color: var(--brand-700);
}

/* Drawing reference chips */
#build .step-card .step-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
#build .step-card .dwg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 5px 9px;
  text-decoration: none;
  cursor: pointer;
}
#build .step-card .dwg-chip::before { content: ""; display: none; }
#build .step-card .dwg-chip:hover {
  border-color: var(--brand-500);
  color: var(--brand-700);
  background: var(--bg-raised);
}
[data-theme="dark"] #build .step-card .dwg-chip:hover { color: var(--brand-300); }
#build .step-card .dwg-chip.role-primary,
#build .step-card .dwg-chip.role-interface,
#build .step-card .dwg-chip.role-overview,
#build .step-card .dwg-chip.role-hardware {
  color: var(--text);
  border-color: var(--border);
}

/* Inline alert (warning / caution / info) — lives INSIDE the step body */
#build .step-card .step-alert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg-raised);
  border-radius: 3px;
  border: 1px solid var(--border-hairline);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
#build .step-card .step-alert .badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  white-space: nowrap;
  align-self: start;
  margin-top: 1px;
}
#build .step-card .step-alert .badge.caution {
  background: var(--caution-100);
  color: var(--caution-700);
}
#build .step-card .step-alert .badge.warn {
  background: var(--warn-100);
  color: var(--warn-700);
}
#build .step-card .step-alert .badge.info {
  background: var(--info-100);
  color: var(--info-700);
}
[data-theme="dark"] #build .step-card .step-alert .badge.caution { color: var(--caution-600); }
[data-theme="dark"] #build .step-card .step-alert .badge.warn    { color: var(--warn-600); }
[data-theme="dark"] #build .step-card .step-alert .badge.info    { color: var(--info-600); }
#build .step-card .step-alert .body { color: var(--text); }

/* Hide the legacy sibling .step-warn outside step-card if any survives */
#build .step-warn {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  margin: 12px 0 0 76px;
  padding: 10px 12px;
  background: var(--bg-raised);
  border-radius: 3px;
  border: 1px solid var(--border-hairline);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  max-width: 700px;
}

/* Checkbox */
#build .step-card .step-chk {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--paper-300);
  border-radius: 4px;
  cursor: pointer;
  background: var(--bg);
  display: grid;
  place-items: center;
  transition: background 0.12s, border-color 0.12s;
  margin-top: 2px;
  font-size: 0;
  color: transparent;
}
#build .step-card .step-chk:hover { border-color: var(--ink-400); }
#build .step-card .step-chk.on {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: transparent;
}
#build .step-card .step-chk.on::after {
  content: "";
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--paper-50);
  border-bottom: 2px solid var(--paper-50);
  transform: rotate(-45deg) translate(1px, -2px);
}
[data-theme="dark"] #build .step-card .step-chk { border-color: var(--ink-300); }
[data-theme="dark"] #build .step-card .step-chk.on {
  background: var(--brand-500);
  border-color: var(--brand-500);
}

/* Done state — green badge + quiet strikethrough body */
#build .step-card.is-done .step-badge {
  color: var(--ok-700);
  border-color: var(--ok-200);
  background: var(--ok-50);
}
[data-theme="dark"] #build .step-card.is-done .step-badge {
  color: var(--ok-600);
  border-color: var(--ok-700);
  background: var(--ok-100);
}
#build .step-card.is-done .step-txt {
  color: var(--text-tertiary);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--paper-300);
}
#build .step-card.is-done .step-txt strong { color: var(--text-tertiary); }

/* ---- Footer pager ---- */
#build .c-foot {
  background: var(--bg);
  border-top: 1px solid var(--border-hairline);
  height: auto;
  min-height: 56px;
  padding: 14px 32px;
}
#build .c-foot .nav-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 4px;
  padding: 10px 16px;
  height: auto;
  gap: 6px;
}
#build .c-foot .nav-btn:hover {
  border-color: var(--text);
  background: var(--bg-raised);
  color: var(--text);
}
#build .c-foot .step-prog {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Left & right trays keep their existing visual treatment for now —
   their redesign lands in a later phase. They sit alongside the new
   center column intentionally; the contrast makes the redesign scope
   obvious during review. */


/* ============================================================
   WS-12 Phase 1c — Ask Clarence (full-page surface)

   Ask Clarence becomes its own screen (#ask) instead of a 350px
   right-pane tab. All styles scoped under #ask so they only
   affect this new surface. Streaming logic in clarence.html is
   unchanged; only DOM structure + visuals are new.
   ============================================================ */

#ask {
  display: none;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
#ask.active { display: flex; }

/* ---- App bar ---- */
#ask .ask-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--bg);
  flex-shrink: 0;
  gap: 24px;
}
#ask .ask-bar-left {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}
#ask .ask-wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-strong);
  position: relative;
  display: inline-block;
  padding: 4px 0;
  cursor: pointer;
  flex-shrink: 0;
}
#ask .ask-wordmark::before {
  content: "";
  position: absolute;
  left: 0.6em;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--brand-500);
}
[data-theme="dark"] #ask .ask-wordmark::before { background: var(--brand-400); }
#ask .ask-crumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
#ask .ask-crumbs .sep { margin: 0 8px; opacity: 0.5; }
#ask .ask-crumbs .here { color: var(--text-strong); font-weight: 500; }

#ask .ask-actions { display: flex; gap: 6px; align-items: center; }
#ask .ask-actions button {
  height: auto;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#ask .ask-actions button:hover { background: var(--bg-raised); }

/* ---- Scope banner ---- */
#ask .ask-scope {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 32px;
  background: var(--info-50);
  border-bottom: 1px solid var(--info-100);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--info-700);
  flex-shrink: 0;
}
[data-theme="dark"] #ask .ask-scope { color: var(--info-600); }
#ask .ask-scope .label {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#ask .ask-scope .label .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
#ask .ask-scope .where { color: var(--text-strong); font-weight: 500; }
#ask .ask-scope .where .sep { color: var(--text-tertiary); margin: 0 6px; font-weight: 400; }
#ask .ask-scope .ask-sec-picker-wrap {
  margin-left: auto;
  position: relative;
}
#ask .ask-scope .change {
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
#ask .ask-scope .change:hover { color: var(--text-strong); }
#ask .ask-sec-picker {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  z-index: 200;
  overflow: hidden;
  padding: 4px 0;
}
#ask .ask-sec-pick-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-hairline);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  text-transform: none;
}
#ask .ask-sec-pick-item:last-child { border-bottom: 0; }
#ask .ask-sec-pick-item:hover {
  background: var(--bg-raised);
  color: var(--text-strong);
}
#ask .ask-sec-pick-item.active {
  color: var(--brand-700);
  background: var(--brand-50);
}
[data-theme="dark"] #ask .ask-sec-pick-item.active {
  color: var(--brand-300);
  background: var(--brand-100);
}

/* ---- Thread ---- */
#ask .ask-thread-wrap {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
#ask .ask-thread-wrap::-webkit-scrollbar { width: 6px; }
#ask .ask-thread-wrap::-webkit-scrollbar-thumb {
  background: var(--border-hairline);
  border-radius: 3px;
}
#ask .ask-thread {
  max-width: 820px;
  margin: 0 auto;
  padding: 36px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ---- Intro card ---- */
#ask .ask-intro {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 24px 26px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: var(--bg-raised);
}
#ask .ask-intro .av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-700);
  color: var(--paper-50);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}
[data-theme="dark"] #ask .ask-intro .av { background: var(--brand-500); }
#ask .ask-intro h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--text-strong);
}
#ask .ask-intro p {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  text-wrap: pretty;
}
#ask .ask-intro p + p { margin-top: 8px; }
#ask .ask-intro .strong-where {
  color: var(--text-strong);
  font-weight: 500;
}

/* ---- User message ---- */
#ask .msg-user {
  align-self: flex-end;
  max-width: 70%;
  background: var(--brand-700);
  color: var(--paper-50);
  border-radius: 14px 14px 4px 14px;
  padding: 14px 18px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
}
[data-theme="dark"] #ask .msg-user { background: var(--brand-500); }
#ask .msg-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  align-self: flex-end;
  margin-top: -22px;
}

/* ---- Clarence message ---- */
#ask .msg-cl {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
}
#ask .msg-cl .av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-700);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}
[data-theme="dark"] #ask .msg-cl .av {
  color: var(--brand-300);
  background: var(--brand-100);
}
#ask .msg-cl .body {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  text-wrap: pretty;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
#ask .msg-cl .body p { margin: 0; }
#ask .msg-cl .body p + p { margin-top: 10px; }
#ask .msg-cl .body strong { color: var(--text-strong); font-weight: 500; }
#ask .msg-cl .body .num,
#ask .msg-cl .body .mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.92em;
  background: var(--paper-200);
  padding: 1px 6px;
  border-radius: 2px;
  color: var(--text-strong);
}
[data-theme="dark"] #ask .msg-cl .body .num,
[data-theme="dark"] #ask .msg-cl .body .mono { background: var(--paper-100); }
#ask .msg-cl .body hr {
  border: none;
  border-top: 1px solid var(--border-hairline);
  margin: 14px 0;
}

/* ---- Typing indicator (carries over from existing CSS, restyled) ---- */
#ask .msg-cl .body .ask-typing {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 20px;
}
#ask .msg-cl .body .ask-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-500);
  animation: askBounce 1.2s ease-in-out infinite;
}
#ask .msg-cl .body .ask-typing span:nth-child(2) { animation-delay: .2s; }
#ask .msg-cl .body .ask-typing span:nth-child(3) { animation-delay: .4s; }

/* ---- Inline cite chip (DWG / AC / VAF) ---- */
#ask .msg-cl .body .cite {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  border-radius: 3px;
  padding: 0 6px;
  vertical-align: 1px;
  cursor: pointer;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}
#ask .msg-cl .body .cite:hover {
  border-color: var(--brand-500);
  color: var(--brand-700);
}
[data-theme="dark"] #ask .msg-cl .body .cite:hover { color: var(--brand-300); }
#ask .msg-cl .body .cite .k {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 9px;
  margin-right: 1px;
}
#ask .msg-cl .body .cite.dwg .k { color: var(--brand-700); }
#ask .msg-cl .body .cite.ac .k { color: var(--info-700); }
#ask .msg-cl .body .cite.vaf .k { color: var(--caution-700); }
[data-theme="dark"] #ask .msg-cl .body .cite.dwg .k { color: var(--brand-300); }
[data-theme="dark"] #ask .msg-cl .body .cite.ac .k { color: var(--info-600); }
[data-theme="dark"] #ask .msg-cl .body .cite.vaf .k { color: var(--caution-600); }
#ask .msg-cl .body .cite .arr { color: var(--text-tertiary); font-size: 9px; }

/* ---- Reference cards (drawing / AC 43.13 / VAF thread) ---- */
#ask .refs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
#ask .ref-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border-hairline);
  border-radius: 5px;
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
#ask .ref-card:hover {
  border-color: var(--brand-500);
  background: var(--bg-raised);
}
#ask .ref-card .thumb {
  width: 56px;
  height: 44px;
  border: 1px solid var(--paper-300);
  border-radius: 3px;
  background: var(--paper-100);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--brand-700);
  text-align: center;
  line-height: 1.1;
}
[data-theme="dark"] #ask .ref-card .thumb {
  background: #F1EEE6;
  border-color: #2A2622;
}
#ask .ref-card .thumb.ac {
  background: var(--info-50);
  border-color: var(--info-200);
  color: var(--info-700);
  font-size: 9px;
}
[data-theme="dark"] #ask .ref-card .thumb.ac {
  color: var(--info-600);
  border-color: var(--info-100);
}
#ask .ref-card .thumb.vaf {
  background: var(--caution-50);
  border-color: var(--caution-200);
  color: var(--caution-700);
  font-size: 9px;
}
[data-theme="dark"] #ask .ref-card .thumb.vaf {
  color: var(--caution-600);
  border-color: var(--caution-100);
}
#ask .ref-card .kind {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}
#ask .ref-card.dwg .kind { color: var(--brand-700); }
#ask .ref-card.ac .kind { color: var(--info-700); }
#ask .ref-card.vaf .kind { color: var(--caution-700); }
[data-theme="dark"] #ask .ref-card.dwg .kind { color: var(--brand-300); }
[data-theme="dark"] #ask .ref-card.ac .kind { color: var(--info-600); }
[data-theme="dark"] #ask .ref-card.vaf .kind { color: var(--caution-600); }
#ask .ref-card .title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-strong);
  margin-bottom: 2px;
}
#ask .ref-card .sub {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  text-wrap: pretty;
}
#ask .ref-card .meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  text-align: right;
  white-space: nowrap;
  padding-left: 8px;
}
#ask .ref-card .meta .open {
  display: block;
  margin-top: 4px;
  color: var(--text-secondary);
}

/* ---- Sources footer (under each Clarence reply) ---- */
#ask .sources {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
#ask .sources .lbl {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
#ask .sources .src { color: var(--text-secondary); }
#ask .sources .src strong {
  color: var(--text-strong);
  font-weight: 500;
  letter-spacing: 0;
}

/* ---- Composer ---- */
#ask .composer-wrap {
  border-top: 1px solid var(--border-hairline);
  background: var(--bg);
  flex-shrink: 0;
}
#ask .composer {
  max-width: 820px;
  margin: 0 auto;
  padding: 14px 32px 18px;
}
#ask .suggested {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
#ask .suggested .s-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  padding: 5px 12px;
  cursor: pointer;
}
#ask .suggested .s-chip:hover {
  color: var(--text-strong);
  border-color: var(--border-strong);
}
#ask .input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: stretch;
}
#ask .input-box {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  padding: 0 16px;
  min-height: 50px;
}
#ask .input-box:focus-within {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
#ask .input-box input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: 0;
  padding: 14px 0;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text);
  min-width: 0;
}
#ask .input-box input::placeholder { color: var(--text-tertiary); }
#ask .send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-700);
  color: var(--paper-50);
  border: 0;
  border-radius: 6px;
  padding: 0 18px;
  min-height: 50px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  height: auto;
  width: auto;
}
#ask .send:hover { background: var(--brand-800); }
#ask .send:disabled { opacity: 0.5; cursor: not-allowed; }
[data-theme="dark"] #ask .send { background: var(--brand-500); }
[data-theme="dark"] #ask .send:hover { background: var(--brand-400); }
#ask .send .arr { font-size: 16px; line-height: 1; }
#ask .composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  flex-wrap: wrap;
  gap: 8px;
}
#ask .composer-foot .gospel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#ask .composer-foot .gospel .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--caution-500);
}
#ask .composer-foot .meta { letter-spacing: 0.06em; }

/* ============================================================
   WS-12 Phase 2a — Mobile chrome foundation

   Scoped under [data-app="mobile"] so it only applies to
   clarence-mobile.html. Tab CONTENT (steps, search, board, ref,
   home, ask sheet) keeps its existing visual treatment until
   later phases. This pass only touches:
     - body canvas + base fonts
     - .topbar (sticky header)
     - .tabbar (bottom tab bar)

   The existing mobile CSS in clarence-mobile.html's inline
   <style> block lives at lower specificity (single-class
   selectors), so [data-app="mobile"] rules win cleanly.
   ============================================================ */

body[data-app="mobile"] {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}
body[data-app="mobile"] html { background: var(--bg); }

/* ---- Top bar ---- */
body[data-app="mobile"] .topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--border-hairline);
  color: var(--text);
}
body[data-app="mobile"] .topbar-back {
  color: var(--brand-700);
}
[data-theme="dark"] body[data-app="mobile"] .topbar-back {
  color: var(--brand-300);
}
body[data-app="mobile"] .topbar-section {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
body[data-app="mobile"] .topbar-section .sec-name {
  color: var(--brand-700);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px dotted var(--brand-300);
}
[data-theme="dark"] body[data-app="mobile"] .topbar-section .sec-name {
  color: var(--brand-300);
  border-bottom-color: var(--brand-500);
}
body[data-app="mobile"] .topbar-step {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
body[data-app="mobile"] .theme-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 10px;
}
body[data-app="mobile"] .theme-btn:active {
  background: var(--bg-raised);
}

/* ---- Bottom tab bar ---- */
body[data-app="mobile"] .tabbar {
  background: var(--bg);
  border-top: 1px solid var(--border-hairline);
}
body[data-app="mobile"] .tab {
  color: var(--text-tertiary);
  transition: color 0.15s;
}
body[data-app="mobile"] .tab.active {
  color: var(--brand-700);
}
[data-theme="dark"] body[data-app="mobile"] .tab.active {
  color: var(--brand-300);
}
/* Active tab gets a brand-tinted icon-circle background so it reads as
   a deliberate "selected" state without being heavy. Matches the design's
   "brand-700 fill on active icon" guidance from the README. */
body[data-app="mobile"] .tab.active svg {
  background: var(--brand-50);
  border-radius: 8px;
  padding: 3px;
  width: 28px;
  height: 28px;
  box-sizing: content-box;
}
[data-theme="dark"] body[data-app="mobile"] .tab.active svg {
  background: var(--brand-100);
}
body[data-app="mobile"] .tab-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ============================================================
   WS-12 Phase 2b — Mobile Steps panel content

   Restyles the Steps tab content (plans text block, Clarence
   Notes, step card, warn banner, drawing chips, part-number
   inline pills) to match the design system, mirroring what
   desktop got in Phase 1b. The existing HTML structure (one
   step at a time, plans + commentary above, chips below) is
   kept — only the visual treatment changes.

   Higher specificity than the mobile inline CSS ensures these
   rules win. Display-toggling rules from inline CSS
   (.cmnt-body / .ptb-body open/closed) are left alone so the
   accordion behaviour keeps working.
   ============================================================ */

/* ---- Plans text block — collapsed neutral inset ---- */
body[data-app="mobile"] .plans-text-block {
  border: 1px solid var(--border-hairline);
  border-left: 3px solid var(--paper-300);
  border-radius: 4px;
  background: var(--bg-raised);
  margin: 0 0 16px;
  overflow: hidden;
}
body[data-app="mobile"] .plans-text-block:active {
  border-left-color: var(--ink-400);
}
body[data-app="mobile"] .ptb-toggle {
  background: transparent;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
body[data-app="mobile"] .ptb-toggle:active { background: transparent; }
body[data-app="mobile"] .ptb-icon {
  color: var(--text-tertiary);
  font-size: 9px;
  font-weight: 500;
}
body[data-app="mobile"] .ptb-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-strong);
  font-weight: 500;
  flex: 1;
}
body[data-app="mobile"] .ptb-src {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}
body[data-app="mobile"] .ptb-body {
  border-top: 1px solid var(--border-hairline);
  background: transparent;
  padding: 14px 16px;
}
body[data-app="mobile"] .ptb-prose {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-strong);
  text-align: left;
}

/* ---- Clarence Notes — paraphrase prose, no card framing ---- */
body[data-app="mobile"] .commentary-block {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 0 18px;
  overflow: visible;
}
body[data-app="mobile"] .cmnt-toggle {
  background: transparent;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
body[data-app="mobile"] .cmnt-toggle:active { background: transparent; }
body[data-app="mobile"] .cmnt-icon {
  color: var(--brand-700);
  font-size: 9px;
}
[data-theme="dark"] body[data-app="mobile"] .cmnt-icon { color: var(--brand-300); }
body[data-app="mobile"] .cmnt-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-700);
  font-weight: 600;
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
[data-theme="dark"] body[data-app="mobile"] .cmnt-lbl { color: var(--brand-300); }
body[data-app="mobile"] .cmnt-lbl::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-hairline);
}
body[data-app="mobile"] .cmnt-body {
  background: transparent;
  border: 0;
  padding: 10px 0 0 0;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-strong);
}

/* ---- Step card — drafting-ink badge + serif prose + completion checkbox ---- */
body[data-app="mobile"] .step-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 16px 0 0;
  margin: 0 0 16px;
  display: grid;
  /* col 1: badge (auto) · col 2: content (1fr) · col 3: checkbox (auto) */
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: start;
  border-top: 1px solid var(--border-hairline);
}
body[data-app="mobile"] .step-card .step-badge {
  grid-column: 1;
  grid-row: 1;
  background: var(--bg);
  color: var(--brand-700);
  border: 1px solid var(--brand-500);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  margin: 2px 0 0;
}
[data-theme="dark"] body[data-app="mobile"] .step-card .step-badge {
  color: var(--brand-300);
}
/* Completion checkbox sits in column 3, row 1 (next to the badge) */
body[data-app="mobile"] .step-card .step-chk {
  grid-column: 3;
  grid-row: 1;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--paper-300);
  border-radius: 4px;
  background: var(--bg);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.12s, border-color 0.12s;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}
body[data-app="mobile"] .step-card .step-chk:active {
  border-color: var(--ink-400);
}
body[data-app="mobile"] .step-card .step-chk.on {
  background: var(--brand-700);
  border-color: var(--brand-700);
}
body[data-app="mobile"] .step-card .step-chk.on::after {
  content: "";
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--paper-50);
  border-bottom: 2px solid var(--paper-50);
  transform: rotate(-45deg) translate(1px, -2px);
}
[data-theme="dark"] body[data-app="mobile"] .step-card .step-chk {
  border-color: var(--ink-300);
}
[data-theme="dark"] body[data-app="mobile"] .step-card .step-chk.on {
  background: var(--brand-500);
  border-color: var(--brand-500);
}
/* Step body content (warn, text, chips) stacks in column 2, leaving
   col 1 for the badge and col 3 for the checkbox. The badge stays
   pinned to row 1 alongside the first body item. */
body[data-app="mobile"] .step-card > *:not(.step-badge):not(.step-chk) {
  grid-column: 2;
}

/* Done state — green badge + quiet strikethrough body */
body[data-app="mobile"] .step-card.is-done .step-badge {
  color: var(--ok-700);
  border-color: var(--ok-200);
  background: var(--ok-50);
}
[data-theme="dark"] body[data-app="mobile"] .step-card.is-done .step-badge {
  color: var(--ok-600);
  border-color: var(--ok-700);
  background: var(--ok-100);
}
body[data-app="mobile"] .step-card.is-done .step-text {
  color: var(--text-tertiary);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--paper-300);
}
body[data-app="mobile"] .step-card.is-done .step-text strong {
  color: var(--text-tertiary);
}

body[data-app="mobile"] .step-card .step-text {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
  text-wrap: pretty;
}
body[data-app="mobile"] .step-card .step-text strong {
  color: var(--text-strong);
  font-weight: 500;
}
body[data-app="mobile"] .step-card .step-text .pref {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--paper-200);
  padding: 1px 6px;
  border-radius: 2px;
  color: var(--text-strong);
  border: 0;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
}
[data-theme="dark"] body[data-app="mobile"] .step-card .step-text .pref {
  background: var(--paper-100);
}
body[data-app="mobile"] .step-card .step-text .pref:active {
  background: var(--brand-100);
  color: var(--brand-700);
}

/* ---- Warn banner → inline alert with caution/critical badge ---- */
body[data-app="mobile"] .warn-banner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--bg-raised);
  border: 1px solid var(--border-hairline);
  border-left: 1px solid var(--border-hairline);
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
body[data-app="mobile"] .warn-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  white-space: nowrap;
  align-self: start;
  margin-top: 1px;
  background: var(--info-100);
  color: var(--info-700);
}
body[data-app="mobile"] .warn-banner.warn .warn-badge,
body[data-app="mobile"] .warn-banner.crit .warn-badge {
  background: var(--caution-100);
  color: var(--caution-700);
}
[data-theme="dark"] body[data-app="mobile"] .warn-badge { color: var(--info-600); }
[data-theme="dark"] body[data-app="mobile"] .warn-banner.warn .warn-badge,
[data-theme="dark"] body[data-app="mobile"] .warn-banner.crit .warn-badge {
  color: var(--caution-600);
}
body[data-app="mobile"] .warn-body {
  color: var(--text);
}

/* ---- Drawing chips — flat outlined mono pills ---- */
body[data-app="mobile"] .step-card .dwg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
body[data-app="mobile"] .step-card .dwg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 6px 10px;
  cursor: pointer;
  min-height: auto;
}
body[data-app="mobile"] .step-card .dwg-chip:active {
  border-color: var(--brand-500);
  color: var(--brand-700);
  background: var(--bg-raised);
}
[data-theme="dark"] body[data-app="mobile"] .step-card .dwg-chip:active {
  color: var(--brand-300);
}
body[data-app="mobile"] .step-card .dwg-chip svg {
  width: 12px;
  height: 12px;
  opacity: 0.55;
  flex-shrink: 0;
}

/* ---- Step nav buttons (Prev/Next) restyled to mono ---- */
body[data-app="mobile"] .step-nav {
  padding: 16px 0 0;
}
body[data-app="mobile"] .step-nav-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 14px;
  height: auto;
  min-width: 48px;
}
body[data-app="mobile"] .step-nav-btn:active:not(:disabled) {
  background: var(--bg-raised);
  color: var(--brand-700);
  border-color: var(--brand-500);
}
[data-theme="dark"] body[data-app="mobile"] .step-nav-btn:active:not(:disabled) {
  color: var(--brand-300);
}
body[data-app="mobile"] .step-nav-btn:disabled {
  opacity: 0.3;
}

/* ============================================================
   WS-12 Phase 2c — Mobile Home tab

   First screen the builder sees on mobile. Restyles the
   wordmark, the section cards, and a few accents to match the
   paper-warm design system. Hero photo stays mostly as-is
   (it's user content, not chrome) — only the corners and
   border get a subtle tweak to fit the paper canvas.
   ============================================================ */

/* ---- Wordmark + subtitle ---- */
body[data-app="mobile"] .home-screen {
  padding: 28px 20px 36px;
}
body[data-app="mobile"] .home-logo {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 42px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-strong);
  position: relative;
  display: inline-block;
  padding: 4px 0;
  margin-bottom: 2px;
}
body[data-app="mobile"] .home-logo::before {
  content: "";
  position: absolute;
  left: 0.6em;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--brand-500);
}
[data-theme="dark"] body[data-app="mobile"] .home-logo::before {
  background: var(--brand-400);
}
body[data-app="mobile"] .home-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 28px;
  font-weight: 400;
}

/* ---- Hero photo ---- */
body[data-app="mobile"] .home-hero {
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  background: var(--bg-raised);
  margin-bottom: 24px;
}
body[data-app="mobile"] .home-hero-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: 0;
  color: #fff;
}
body[data-app="mobile"] .home-hero-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
}
body[data-app="mobile"] .home-hero-edit-hint {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
}

/* ---- Section cards ---- */
body[data-app="mobile"] .home-sections {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body[data-app="mobile"] .home-section-card {
  background: var(--bg);
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  margin: 0;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
body[data-app="mobile"] .home-section-card:active {
  border-color: var(--brand-500);
  background: var(--bg-raised);
}
body[data-app="mobile"] .home-section-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--brand-700);
  background: var(--bg);
  border: 1px solid var(--brand-500);
  border-radius: 3px;
  width: 44px;
  height: 32px;
  min-width: 0;
  display: grid;
  place-items: center;
  text-align: center;
}
[data-theme="dark"] body[data-app="mobile"] .home-section-num {
  color: var(--brand-300);
  border-color: var(--brand-500);
}
body[data-app="mobile"] .home-section-info {
  min-width: 0;
}
body[data-app="mobile"] .home-section-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 17px;
  color: var(--text-strong);
  margin-bottom: 2px;
  line-height: 1.3;
}
body[data-app="mobile"] .home-section-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}
body[data-app="mobile"] .home-section-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 4px;
  letter-spacing: 0.06em;
}

/* ============================================================
   WS-12 Phase 2d — Mobile subsection list page

   The "pick a subsection" landing shown between a home-screen
   section tap and the Steps tab. Closes the visual gap in the
   Home → Steps flow; same visual DNA as home-section-card +
   step-badge.

   Existing HTML structure (rendered by renderSubsectionPage in
   clarence-mobile.html) is unchanged — just restyled.
   ============================================================ */

body[data-app="mobile"] #panelSubsections {
  padding-top: 20px;
}

/* Header: section name + count */
body[data-app="mobile"] .subsec-header {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--text-strong);
  text-align: left;
  text-transform: none;
  margin: 0 0 4px;
}
body[data-app="mobile"] .subsec-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: left;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-hairline);
}

/* Card list */
body[data-app="mobile"] .subsec-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body[data-app="mobile"] .subsec-card {
  background: var(--bg);
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  transition: border-color 0.12s, background 0.12s;
  cursor: pointer;
}
body[data-app="mobile"] .subsec-card:active {
  border-color: var(--brand-500);
  background: var(--bg-raised);
}

/* Subsection number — open-bordered drafting-ink badge */
body[data-app="mobile"] .subsec-card-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--brand-700);
  background: var(--bg);
  border: 1px solid var(--brand-500);
  border-radius: 3px;
  width: 44px;
  height: 32px;
  min-width: 0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}
[data-theme="dark"] body[data-app="mobile"] .subsec-card-num {
  color: var(--brand-300);
}

/* Info column */
body[data-app="mobile"] .subsec-card-info {
  min-width: 0;
}
body[data-app="mobile"] .subsec-card-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.3;
  color: var(--text-strong);
  margin-bottom: 4px;
}
body[data-app="mobile"] .subsec-card-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
body[data-app="mobile"] .subsec-card-preview {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
  line-height: 1.4;
  /* allow up to 2 lines on the preview before truncation, instead of the
     existing one-line ellipsis — readable but still compact */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
}

/* ============================================================
   WS-12 Phase 2f — Mobile Ask Clarence FAB + bottom sheet

   Mirrors desktop Phase 1c on a constrained mobile sheet:
   paper canvas, serif body, inline cite chips, compact
   reference cards, brand-700 send button. The existing class
   names (.amsg-mobile.user / .amsg-mobile.ai / .amsg-body-mobile)
   are kept; only their visual treatment changes.
   ============================================================ */

/* ---- FAB ---- */
body[data-app="mobile"] .ask-fab {
  background: var(--brand-700);
  color: var(--paper-50);
  box-shadow: 0 4px 14px rgba(14, 19, 24, 0.18);
}
[data-theme="dark"] body[data-app="mobile"] .ask-fab {
  background: var(--brand-500);
  color: var(--paper-50);
}
body[data-app="mobile"] .ask-fab:active {
  box-shadow: 0 2px 8px rgba(14, 19, 24, 0.16);
}

/* ---- Sheet container ---- */
body[data-app="mobile"] .ask-sheet {
  background: var(--bg);
  border-top: 1px solid var(--border-hairline);
  color: var(--text);
}
body[data-app="mobile"] .ask-sheet-handle {
  background: var(--paper-300);
}

/* ---- Sheet header ---- */
body[data-app="mobile"] .ask-sheet-header {
  border-bottom: 1px solid var(--border-hairline);
  padding: 12px 16px 10px;
  gap: 12px;
}
body[data-app="mobile"] .ask-sheet-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text-strong);
  position: relative;
  padding: 2px 0 2px 8px;
}
body[data-app="mobile"] .ask-sheet-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--brand-500);
}
[data-theme="dark"] body[data-app="mobile"] .ask-sheet-title::before {
  background: var(--brand-400);
}
body[data-app="mobile"] .ask-sheet-loc {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 400;
}
body[data-app="mobile"] .ask-sheet-close {
  color: var(--text-tertiary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 18px;
  padding: 0;
  line-height: 1;
}
body[data-app="mobile"] .ask-sheet-close:active {
  background: var(--bg-raised);
  color: var(--text-strong);
}

/* ---- Messages area scroll container ---- */
body[data-app="mobile"] .ask-msgs-mobile {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--bg);
}

/* ---- Intro card ---- */
body[data-app="mobile"] .ask-intro-mobile {
  padding: 18px 18px;
  border: 1px dashed var(--border);
  border-radius: 5px;
  background: var(--bg-raised);
}
body[data-app="mobile"] .ask-intro-mobile h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-strong);
  margin: 0 0 6px;
}
body[data-app="mobile"] .ask-intro-mobile p {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}
body[data-app="mobile"] .ask-intro-mobile .strong-where {
  color: var(--text-strong);
  font-weight: 500;
}

/* ---- User message — brand-navy rounded bubble, right-aligned ---- */
body[data-app="mobile"] .amsg-mobile.user {
  align-self: flex-end;
  max-width: 78%;
}
body[data-app="mobile"] .amsg-mobile.user .amsg-body-mobile {
  background: var(--brand-700);
  color: var(--paper-50);
  border: 0;
  border-radius: 14px 14px 4px 14px;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
}
[data-theme="dark"] body[data-app="mobile"] .amsg-mobile.user .amsg-body-mobile {
  background: var(--brand-500);
}

/* Timestamp under the user message */
body[data-app="mobile"] .amsg-time-mobile {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-top: -8px;
}

/* ---- Clarence message — small mono eyebrow + serif body, no bubble ---- */
body[data-app="mobile"] .amsg-mobile.ai {
  align-self: stretch;
  max-width: 100%;
}
body[data-app="mobile"] .amsg-mobile.ai .mlbl-mobile {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-700);
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
[data-theme="dark"] body[data-app="mobile"] .amsg-mobile.ai .mlbl-mobile {
  color: var(--brand-300);
}
body[data-app="mobile"] .amsg-mobile.ai .mlbl-mobile::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-hairline);
}
body[data-app="mobile"] .amsg-mobile.ai .amsg-body-mobile {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
body[data-app="mobile"] .amsg-mobile.ai .amsg-body-mobile strong {
  color: var(--text-strong);
  font-weight: 500;
}
body[data-app="mobile"] .amsg-mobile.ai .amsg-body-mobile hr {
  border: none;
  border-top: 1px solid var(--border-hairline);
  margin: 12px 0;
}

/* ---- Typing indicator (mobile) ---- */
body[data-app="mobile"] .ask-typing-mobile span {
  background: var(--brand-500);
}

/* ---- Inline cite chips (.cite.dwg / .cite.vaf) inside Clarence body ---- */
body[data-app="mobile"] .amsg-mobile.ai .amsg-body-mobile .cite {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  border-radius: 3px;
  padding: 0 6px;
  vertical-align: 1px;
  cursor: pointer;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}
body[data-app="mobile"] .amsg-mobile.ai .amsg-body-mobile .cite:active {
  border-color: var(--brand-500);
  color: var(--brand-700);
}
[data-theme="dark"] body[data-app="mobile"] .amsg-mobile.ai .amsg-body-mobile .cite:active {
  color: var(--brand-300);
}
body[data-app="mobile"] .amsg-mobile.ai .amsg-body-mobile .cite .k {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 9px;
  margin-right: 1px;
}
body[data-app="mobile"] .amsg-mobile.ai .amsg-body-mobile .cite.dwg .k { color: var(--brand-700); }
body[data-app="mobile"] .amsg-mobile.ai .amsg-body-mobile .cite.vaf .k { color: var(--caution-700); }
[data-theme="dark"] body[data-app="mobile"] .amsg-mobile.ai .amsg-body-mobile .cite.dwg .k { color: var(--brand-300); }
[data-theme="dark"] body[data-app="mobile"] .amsg-mobile.ai .amsg-body-mobile .cite.vaf .k { color: var(--caution-600); }
body[data-app="mobile"] .amsg-mobile.ai .amsg-body-mobile .cite .arr {
  color: var(--text-tertiary);
  font-size: 9px;
}

/* ---- Reference cards under Clarence reply (compact mobile) ---- */
body[data-app="mobile"] .refs-mobile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
body[data-app="mobile"] .ref-card-mobile {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  background: var(--bg);
  text-decoration: none;
  color: inherit;
}
body[data-app="mobile"] .ref-card-mobile:active {
  border-color: var(--brand-500);
  background: var(--bg-raised);
}
body[data-app="mobile"] .ref-card-mobile .thumb {
  width: 44px;
  height: 36px;
  border: 1px solid var(--paper-300);
  border-radius: 3px;
  background: var(--paper-100);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--brand-700);
  text-align: center;
  line-height: 1.1;
}
[data-theme="dark"] body[data-app="mobile"] .ref-card-mobile .thumb {
  background: #F1EEE6;
  border-color: #2A2622;
}
body[data-app="mobile"] .ref-card-mobile .thumb.ac {
  background: var(--info-50);
  border-color: var(--info-200);
  color: var(--info-700);
  font-size: 9px;
}
[data-theme="dark"] body[data-app="mobile"] .ref-card-mobile .thumb.ac {
  color: var(--info-600);
}
body[data-app="mobile"] .ref-card-mobile .thumb.vaf {
  background: var(--caution-50);
  border-color: var(--caution-200);
  color: var(--caution-700);
}
[data-theme="dark"] body[data-app="mobile"] .ref-card-mobile .thumb.vaf {
  color: var(--caution-600);
}
body[data-app="mobile"] .ref-card-mobile .info { min-width: 0; }
body[data-app="mobile"] .ref-card-mobile .kind {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 1px;
}
body[data-app="mobile"] .ref-card-mobile.dwg .kind { color: var(--brand-700); }
body[data-app="mobile"] .ref-card-mobile.ac .kind  { color: var(--info-700); }
body[data-app="mobile"] .ref-card-mobile.vaf .kind { color: var(--caution-700); }
[data-theme="dark"] body[data-app="mobile"] .ref-card-mobile.dwg .kind { color: var(--brand-300); }
[data-theme="dark"] body[data-app="mobile"] .ref-card-mobile.ac .kind  { color: var(--info-600); }
[data-theme="dark"] body[data-app="mobile"] .ref-card-mobile.vaf .kind { color: var(--caution-600); }
body[data-app="mobile"] .ref-card-mobile .title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
  line-height: 1.3;
  /* clamp to one line — full title appears in the inline cite chip + the link target */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-app="mobile"] .ref-card-mobile .meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  text-align: right;
  white-space: nowrap;
  padding-left: 4px;
}

/* ---- Sources footer ---- */
body[data-app="mobile"] .sources-mobile {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
body[data-app="mobile"] .sources-mobile .lbl {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
body[data-app="mobile"] .sources-mobile .src { color: var(--text-secondary); }
body[data-app="mobile"] .sources-mobile .src strong {
  color: var(--text-strong);
  font-weight: 500;
  letter-spacing: 0;
}

/* ---- Composer ---- */
body[data-app="mobile"] .ask-input-row {
  padding: 10px 12px;
  border-top: 1px solid var(--border-hairline);
  background: var(--bg);
  display: flex;
  gap: 8px;
}
body[data-app="mobile"] .ask-in-mobile {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text);
  outline: none;
}
body[data-app="mobile"] .ask-in-mobile:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px var(--brand-100);
}
body[data-app="mobile"] .ask-in-mobile::placeholder {
  color: var(--text-tertiary);
}
body[data-app="mobile"] .ask-go-mobile {
  background: var(--brand-700);
  color: var(--paper-50);
  border: 0;
  border-radius: 6px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 18px;
  cursor: pointer;
}
body[data-app="mobile"] .ask-go-mobile:active {
  background: var(--brand-800);
}
[data-theme="dark"] body[data-app="mobile"] .ask-go-mobile {
  background: var(--brand-500);
}
[data-theme="dark"] body[data-app="mobile"] .ask-go-mobile:active {
  background: var(--brand-400);
}
body[data-app="mobile"] .ask-go-mobile:disabled {
  opacity: 0.5;
}

/* ---- Composer footer ---- */
body[data-app="mobile"] .ask-footer-mobile {
  padding: 8px 14px 12px;
  background: var(--bg);
  border-top: 1px solid var(--border-hairline);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  text-align: center;
  position: relative;
}
body[data-app="mobile"] .ask-footer-mobile::before {
  content: "● ";
  color: var(--caution-500);
  margin-right: 2px;
}

/* ============================================================
   WS-12 Phase 2e — Mobile Reference tab (Bench tools)

   Restyles the Reference panel content. Derived from
   clarence-scope/design/07_Reference_Mobile.html: serif
   "Bench tools" page header, paper-card tools, mono labels.
   Existing collapsible-card navigation model is preserved
   (taps expand inline rather than drilling into detail
   pages) — only the visual treatment changes.

   Calculator inputs flipped from type="number" to
   type="text" inputmode="decimal" in the HTML (per the
   design's known followup) so phones show the numeric
   keypad without browser stepper buttons. JS that reads
   .value via parseFloat continues to work unchanged.
   ============================================================ */

/* ---- Page header ---- */
body[data-app="mobile"] .ref-page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 0 12px;
  margin: 12px 0 18px;
  border-bottom: 1px solid var(--border-hairline);
  gap: 16px;
}
body[data-app="mobile"] .ref-page-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text-strong);
  margin: 0;
}
body[data-app="mobile"] .ref-page-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ---- Tool card ---- */
body[data-app="mobile"] .ref-card {
  background: var(--bg);
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color 0.12s, background 0.12s;
}
body[data-app="mobile"] .ref-card.ref-card-tap:active {
  border-color: var(--brand-500);
  background: var(--bg-raised);
}

body[data-app="mobile"] .ref-card-header {
  gap: 12px;
  padding: 0;
  background: transparent;
  align-items: center;
}
body[data-app="mobile"] .ref-card-header svg {
  width: 12px;
  height: 12px;
  color: var(--text-tertiary);
}
body[data-app="mobile"] .ref-card-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-strong);
  line-height: 1.3;
  flex: 1;
}

/* Expanded card body — give it some breathing room above the contents */
body[data-app="mobile"] .ref-card-body {
  padding-top: 16px;
  border-top: 1px solid var(--border-hairline);
  margin-top: 12px;
}
body[data-app="mobile"] .ref-card-body.open {
  display: block;
}

/* ---- Calculator inputs ---- */
body[data-app="mobile"] .calc-row {
  margin-bottom: 14px;
}
body[data-app="mobile"] .calc-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
  font-weight: 500;
}
body[data-app="mobile"] .calc-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 16px;
  font-family: var(--font-sans);
  outline: none;
  /* Remove native number-input spin buttons just in case some inputs
     still use type="number". -webkit on Safari, -moz on Firefox. */
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
}
body[data-app="mobile"] .calc-input::-webkit-outer-spin-button,
body[data-app="mobile"] .calc-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body[data-app="mobile"] .calc-input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px var(--brand-100);
}
body[data-app="mobile"] .calc-input::placeholder {
  color: var(--text-tertiary);
}
/* Selects keep their native appearance for the dropdown carat,
   but match the surface and border tokens. */
body[data-app="mobile"] select.calc-input {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}

/* ---- Calculator result block ---- */
body[data-app="mobile"] .calc-result {
  text-align: center;
  padding: 16px;
  background: var(--bg-raised);
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  margin: 14px 0 10px;
}
body[data-app="mobile"] .calc-result-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brand-700);
}
[data-theme="dark"] body[data-app="mobile"] .calc-result-value {
  color: var(--brand-300);
}
body[data-app="mobile"] .calc-result-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 4px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Formula + citation under a calculator ---- */
body[data-app="mobile"] .calc-formula {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-raised);
  border-radius: 3px;
  border: 1px solid var(--border-hairline);
}
body[data-app="mobile"] .calc-citation {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  font-style: normal;
  text-transform: uppercase;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-hairline);
}

/* ---- Reference tables (e.g., squeezer gap) ---- */
body[data-app="mobile"] .ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 10px 0;
}
body[data-app="mobile"] .ref-table th {
  background: var(--bg-raised);
  color: var(--text-strong);
  padding: 10px 8px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--border);
}
body[data-app="mobile"] .ref-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border-hairline);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
}
body[data-app="mobile"] .ref-table tr:last-child td {
  border-bottom: none;
}

/* ---- Notes, rules, examples ---- */
body[data-app="mobile"] .ref-note {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--text);
  line-height: 1.55;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border-hairline);
  border-radius: 3px;
}
body[data-app="mobile"] .ref-note strong {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brand-700);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  display: inline-block;
  margin-right: 4px;
}
[data-theme="dark"] body[data-app="mobile"] .ref-note strong {
  color: var(--brand-300);
}
body[data-app="mobile"] .ref-rule {
  margin-bottom: 12px;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--text);
  line-height: 1.55;
}
body[data-app="mobile"] .ref-rule strong {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brand-700);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  display: inline-block;
  margin-right: 4px;
}
[data-theme="dark"] body[data-app="mobile"] .ref-rule strong {
  color: var(--brand-300);
}
body[data-app="mobile"] .ref-example {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--border-hairline);
  border-left: 3px solid var(--brand-500);
  padding: 10px 12px;
  border-radius: 3px;
  margin-top: 12px;
  letter-spacing: 0.02em;
  line-height: 1.55;
}
[data-theme="dark"] body[data-app="mobile"] .ref-example {
  border-left-color: var(--brand-400);
}

/* ---- Coming-soon placeholder cards (Bolt Torque, Drill Size) ---- */
body[data-app="mobile"] .ref-coming-soon {
  text-align: left;
  padding: 14px 0 0;
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
}
body[data-app="mobile"] .ref-coming-soon h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 4px;
}
body[data-app="mobile"] .ref-coming-soon p {
  margin: 0;
  color: var(--text-tertiary);
}

/* ============================================================
   WS-12 Phase 2g — Mobile Search + Board tabs

   Reskin only. The existing search-card / board-card render
   JS, the WebSocket-based Board connection flow, and the
   debounced search input handler all remain untouched.
   ============================================================ */

/* ============= SEARCH TAB ============= */

/* Rivet Legend button at the top of the search panel */
body[data-app="mobile"] .rivet-legend-btn {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
  min-height: 44px;
  gap: 8px;
}
body[data-app="mobile"] .rivet-legend-btn:active {
  background: var(--bg-raised);
  color: var(--brand-700);
  border-color: var(--brand-500);
}
[data-theme="dark"] body[data-app="mobile"] .rivet-legend-btn:active {
  color: var(--brand-300);
}
body[data-app="mobile"] .rivet-legend-btn svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

/* Search input — paper with brand focus glow */
body[data-app="mobile"] .search-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  outline: none;
  margin-bottom: 24px;
  -webkit-appearance: none;
  appearance: none;
}
body[data-app="mobile"] .search-input::placeholder {
  color: var(--text-tertiary);
}
body[data-app="mobile"] .search-input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px var(--brand-100);
}

/* Empty-state placeholder */
body[data-app="mobile"] .placeholder-msg {
  text-align: center;
  padding: 36px 20px;
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
}
body[data-app="mobile"] .placeholder-msg h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 28px;
  color: var(--text-strong);
  letter-spacing: -0.01em;
  text-transform: none;
  margin-bottom: 10px;
}
body[data-app="mobile"] .placeholder-msg p {
  font-family: var(--font-sans);
  color: var(--text-secondary);
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.55;
}

/* Search results list */
body[data-app="mobile"] .search-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body[data-app="mobile"] .search-card {
  background: var(--bg);
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  padding: 14px 16px;
}
body[data-app="mobile"] .search-card-type {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 4px;
  font-weight: 500;
}
body[data-app="mobile"] .search-card-title {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-700);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
[data-theme="dark"] body[data-app="mobile"] .search-card-title {
  color: var(--brand-300);
}
body[data-app="mobile"] .search-card-desc {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 6px;
}
body[data-app="mobile"] .search-card-meta {
  font-size: 13px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  line-height: 1.55;
  letter-spacing: 0.02em;
}
body[data-app="mobile"] .search-card-alt {
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
body[data-app="mobile"] .search-card-hw-detail {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-strong);
  margin-bottom: 6px;
  padding: 8px 12px;
  background: var(--bg-raised);
  border: 1px solid var(--border-hairline);
  border-radius: 3px;
  line-height: 1.55;
  letter-spacing: 0.02em;
}
body[data-app="mobile"] .search-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
body[data-app="mobile"] .search-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text);
  text-decoration: none;
  min-height: 36px;
}
body[data-app="mobile"] .search-card-link:active {
  border-color: var(--brand-500);
  color: var(--brand-700);
  background: var(--bg-raised);
}
[data-theme="dark"] body[data-app="mobile"] .search-card-link:active {
  color: var(--brand-300);
}
body[data-app="mobile"] .search-card-vendor {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  background: var(--brand-700);
  color: var(--paper-50);
  border: 0;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  min-height: 36px;
}
[data-theme="dark"] body[data-app="mobile"] .search-card-vendor {
  background: var(--brand-500);
}

/* ============= BOARD TAB ============= */

/* Hero (disconnected state — explains what the Board is) */
body[data-app="mobile"] .board-hero {
  text-align: center;
  padding: 20px 0 22px;
}
body[data-app="mobile"] .board-icon {
  color: var(--brand-700);
  margin-bottom: 12px;
  opacity: 0.85;
}
[data-theme="dark"] body[data-app="mobile"] .board-icon {
  color: var(--brand-300);
}
body[data-app="mobile"] .board-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  text-transform: none;
  margin-bottom: 8px;
  position: relative;
  display: inline-block;
  padding: 0 0 0 10px;
}
body[data-app="mobile"] .board-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--brand-500);
}
[data-theme="dark"] body[data-app="mobile"] .board-title::before {
  background: var(--brand-400);
}
body[data-app="mobile"] .board-desc {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 320px;
  margin: 0 auto;
  text-wrap: pretty;
}

/* Three-step "how to connect" list */
body[data-app="mobile"] .board-steps {
  margin: 8px 0 22px;
  padding: 0 4px;
}
body[data-app="mobile"] .board-step-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
body[data-app="mobile"] .board-step-num {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 26px;
  padding: 0 8px;
  background: var(--bg);
  color: var(--brand-700);
  border: 1px solid var(--brand-500);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 1px;
}
[data-theme="dark"] body[data-app="mobile"] .board-step-num {
  color: var(--brand-300);
}
body[data-app="mobile"] .board-step-text {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
}
body[data-app="mobile"] .board-step-text strong {
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  background: var(--paper-200);
  padding: 1px 6px;
  border-radius: 2px;
}
[data-theme="dark"] body[data-app="mobile"] .board-step-text strong {
  background: var(--paper-100);
}

/* Connect box (session-code entry) */
body[data-app="mobile"] .board-connect-box {
  background: var(--bg);
  border: 1px solid var(--border-hairline);
  border-radius: 5px;
  padding: 18px 16px 16px;
  text-align: center;
}
body[data-app="mobile"] .board-connect-box .calc-label {
  margin-bottom: 8px;
}
body[data-app="mobile"] .board-session-input-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 14px;
}
body[data-app="mobile"] .board-session-part {
  width: 110px;
  padding: 12px 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.16em;
  outline: none;
  min-height: 52px;
  -webkit-appearance: none;
  appearance: none;
}
body[data-app="mobile"] .board-session-part:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px var(--brand-100);
}
body[data-app="mobile"] .board-session-part::placeholder {
  color: var(--text-tertiary);
  font-weight: 400;
  letter-spacing: 0.1em;
}
body[data-app="mobile"] .board-session-word {
  text-transform: uppercase;
}
body[data-app="mobile"] .board-session-dash {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--text-tertiary);
  font-weight: 400;
}
body[data-app="mobile"] .board-connect-btn {
  width: 100%;
  padding: 12px;
  background: var(--brand-700);
  color: var(--paper-50);
  border: 0;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 8px;
  min-height: 48px;
}
body[data-app="mobile"] .board-connect-btn:active {
  background: var(--brand-800);
}
[data-theme="dark"] body[data-app="mobile"] .board-connect-btn {
  background: var(--brand-500);
}
[data-theme="dark"] body[data-app="mobile"] .board-connect-btn:active {
  background: var(--brand-400);
}
body[data-app="mobile"] .board-or {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 14px 0;
}
body[data-app="mobile"] .board-or::before,
body[data-app="mobile"] .board-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-hairline);
}
body[data-app="mobile"] .board-new-btn {
  width: 100%;
  padding: 12px;
  background: var(--bg);
  color: var(--brand-700);
  border: 1px solid var(--brand-500);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 48px;
}
body[data-app="mobile"] .board-new-btn:active {
  background: var(--bg-raised);
}
[data-theme="dark"] body[data-app="mobile"] .board-new-btn {
  color: var(--brand-300);
  border-color: var(--brand-500);
}

/* Connected state — status bar, current drawing, viewport */
body[data-app="mobile"] .board-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  margin-bottom: 12px;
}
body[data-app="mobile"] .board-status-dot {
  width: 8px;
  height: 8px;
  background: var(--ok-500);
  border-radius: 50%;
  flex-shrink: 0;
}
body[data-app="mobile"] .board-status-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ok-700);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  flex: 1;
}
[data-theme="dark"] body[data-app="mobile"] .board-status-text {
  color: var(--ok-600);
}
body[data-app="mobile"] .board-disconnect-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 3px;
  cursor: pointer;
}
body[data-app="mobile"] .board-disconnect-btn:active {
  border-color: var(--warn-500);
  color: var(--warn-700);
}
body[data-app="mobile"] .board-current {
  background: var(--bg);
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 12px;
  text-align: center;
}
body[data-app="mobile"] .board-current-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 4px;
}
body[data-app="mobile"] .board-current-drawing {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-700);
  letter-spacing: 0.02em;
}
[data-theme="dark"] body[data-app="mobile"] .board-current-drawing {
  color: var(--brand-300);
}
body[data-app="mobile"] .board-viewport {
  margin-bottom: 12px;
}
body[data-app="mobile"] .board-viewport canvas {
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
}
body[data-app="mobile"] .board-viewport-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  text-align: center;
  margin-top: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Section picker (chips at the bottom for browsing drawings by section) */
body[data-app="mobile"] .board-sec-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
}
body[data-app="mobile"] .board-sec-picker-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  width: 100%;
  margin-bottom: 2px;
}
body[data-app="mobile"] .board-sec-chip {
  padding: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text);
  cursor: pointer;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
body[data-app="mobile"] .board-sec-chip:active {
  border-color: var(--brand-500);
  background: var(--bg-raised);
}
body[data-app="mobile"] .board-sec-chip.active {
  background: var(--brand-700);
  color: var(--paper-50);
  border-color: var(--brand-700);
}
[data-theme="dark"] body[data-app="mobile"] .board-sec-chip.active {
  background: var(--brand-500);
  border-color: var(--brand-500);
}

/* "Ask" button in Build Center app bar — visually parallel to DWG / Home */
#build .c-actions .ask-btn {
  height: auto;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#build .c-actions .ask-btn:hover { background: var(--bg-raised); }

/* ============================================================
   WS-13 — Auth UI (sign-in / signed-in chip / profile modal)

   The .auth-slot is a placeholder element placed inside an app
   bar's actions area. clarence-auth.js fills it with one of:
     - empty (Clerk not configured)
     - .auth-signin-btn (signed out)
     - .auth-chip-wrap (signed in)

   The modal at .auth-modal-backdrop is appended to <body> on
   first open. Both the chip + modal are styled to match the
   paper-warm + drafting-ink + serif/mono system from WS-12.
   ============================================================ */

.auth-slot {
  display: inline-flex;
  align-items: center;
}

/* ---- Signed-out: paired "Sign in" + "Sign up" buttons ---- */
.auth-signed-out-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Default (used by anonymous-CTA in the home progress card) — filled */
.auth-signin-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-50);
  background: var(--brand-700);
  border: 1px solid var(--brand-700);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
}
.auth-signin-btn:hover { background: var(--brand-800); border-color: var(--brand-800); }
[data-theme="dark"] .auth-signin-btn { background: var(--brand-500); border-color: var(--brand-500); }
[data-theme="dark"] .auth-signin-btn:hover { background: var(--brand-400); border-color: var(--brand-400); }

/* Ghost variant used in the app-bar pairing — secondary visual weight,
   pairs with the filled signup button to make the primary action obvious. */
.auth-signin-btn--ghost {
  color: var(--text);
  background: transparent;
  border-color: var(--border);
}
.auth-signin-btn--ghost:hover {
  background: var(--bg-raised);
  border-color: var(--text);
  color: var(--text-strong);
}

.auth-signup-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-50);
  background: var(--brand-700);
  border: 1px solid var(--brand-700);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
}
.auth-signup-btn:hover { background: var(--brand-800); border-color: var(--brand-800); }
[data-theme="dark"] .auth-signup-btn { background: var(--brand-500); border-color: var(--brand-500); }
[data-theme="dark"] .auth-signup-btn:hover { background: var(--brand-400); border-color: var(--brand-400); }

/* Mobile compaction — the top bar is cramped. Shrink padding + font. */
body[data-app="mobile"] .auth-signed-out-actions { gap: 4px; }
body[data-app="mobile"] .auth-signin-btn--ghost,
body[data-app="mobile"] .auth-signup-btn {
  padding: 4px 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
}


/* ============================================================
   WS-12 Phase 1d — Build Center tray polish

   In Phase 1b the desktop Build Center's left + right trays
   were intentionally left in the original dark navy chrome —
   the visual contrast made the redesign scope obvious during
   review. Now that the center column + home are accepted, we
   port the trays to the same paper/mono/serif design system.

   CSS-only. The trays' existing HTML structure and JS (toggle
   collapse, section picker dropdown, step nav, drawing gallery,
   community threads) all work unchanged.
   ============================================================ */

/* ---- Left tray container ---- */
#build .left-tray {
  background: var(--bg);
  border-right: 1px solid var(--border-hairline);
  color: var(--text);
}

/* Tray top — just the collapse button now. The original "CLARENCE"
   in-tray wordmark is redundant with the main app bar wordmark and
   has been hidden. Click-to-go-home is covered by the app bar's
   Home button. */
#build .tray-top {
  padding: 11px 13px;
  border-bottom: 1px solid var(--border-hairline);
  justify-content: flex-end;
}
#build .tray-logo { display: none; }
#build .tray-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  height: 32px;
  width: 32px;
}
#build .tray-btn:hover {
  background: var(--bg-raised);
  border-color: var(--border);
  color: var(--text);
}

/* Section label / picker trigger */
#build .tray-section {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-700);
  padding: 10px 13px 6px;
  cursor: pointer;
}
[data-theme="dark"] #build .tray-section { color: var(--brand-300); }
#build .sec-picker {
  background: var(--bg-raised);
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  margin: 0 8px 6px;
  overflow: hidden;
}
#build .sec-picker-item {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-hairline);
  padding: 10px 13px;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}
#build .sec-picker-item:last-child { border-bottom: 0; }
#build .sec-picker-item:hover {
  background: var(--bg);
  color: var(--text-strong);
}
#build .sec-picker-item.active {
  color: var(--brand-700);
  background: var(--brand-50);
}
[data-theme="dark"] #build .sec-picker-item.active {
  color: var(--brand-300);
  background: var(--brand-100);
}

/* Tray nav (scrollable) */
#build .tray-nav {
  background: var(--bg);
}
#build .tray-nav::-webkit-scrollbar { width: 6px; }
#build .tray-nav::-webkit-scrollbar-thumb {
  background: var(--border-hairline);
  border-radius: 3px;
}

/* Subsection header */
#build .part-grp { margin-bottom: 2px; }
#build .part-hdr {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 12px 13px;
  border-bottom: 1px solid var(--border-hairline);
}
#build .part-hdr:hover,
#build .part-hdr.open {
  color: var(--text-strong);
  background: var(--bg-raised);
}
#build .part-hdr.cur-part {
  color: var(--brand-700);
}
[data-theme="dark"] #build .part-hdr.cur-part { color: var(--brand-300); }
#build .part-hdr .chev {
  color: var(--text-tertiary);
  font-size: 9px;
}

/* Step nav rows */
#build .snav {
  padding: 11px 13px 11px 22px;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--border-hairline);
}
#build .snav:last-child { border-bottom: 0; }
#build .snav:hover { background: var(--bg-raised); }
#build .snav.cur {
  background: var(--brand-50);
  border-left-color: var(--brand-500);
}
[data-theme="dark"] #build .snav.cur {
  background: var(--brand-100);
  border-left-color: var(--brand-400);
}
#build .snav.crit {
  border-left-color: var(--caution-500) !important;
}

/* Step checkbox in the left tray — open-bordered drafting-ink box */
#build .snav .scheck {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--paper-300);
  border-radius: 3px;
  background: var(--bg);
  color: transparent;
  font-size: 0;
}
#build .snav .scheck:hover { border-color: var(--ink-400); }
#build .snav .scheck.on {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: transparent;
  position: relative;
}
[data-theme="dark"] #build .snav .scheck.on {
  background: var(--brand-500);
  border-color: var(--brand-500);
}
#build .snav .scheck.on::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--paper-50);
  border-bottom: 2px solid var(--paper-50);
  transform: rotate(-45deg) translate(1px, -1px);
}

/* Step number + step text within the snav row */
#build .snav .snum {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  width: 28px;
}
#build .snav.cur .snum {
  color: var(--brand-700);
}
[data-theme="dark"] #build .snav.cur .snum { color: var(--brand-300); }
#build .snav .stxt {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}
#build .snav.cur .stxt { color: var(--text-strong); font-weight: 500; }

/* ---- Right tray container ---- */
#build .right-tray {
  background: var(--bg);
  border-left: 1px solid var(--border-hairline);
  color: var(--text);
}

/* RT head + tabs */
#build .rt-head {
  border-bottom: 1px solid var(--border-hairline);
  padding: 0 14px;
  background: var(--bg);
}
#build .rt-tab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 12px;
  height: 50px;
}
#build .rt-tab:hover { color: var(--text); }
#build .rt-tab.on {
  color: var(--brand-700);
  border-bottom-color: var(--brand-500);
}
[data-theme="dark"] #build .rt-tab.on {
  color: var(--brand-300);
  border-bottom-color: var(--brand-400);
}
/* ---- Drawing gallery ---- */
#build .dwg-gal-head {
  border-bottom: 1px solid var(--border-hairline);
  padding: 10px 14px 9px;
  gap: 8px;
}
#build .dwg-gal-ctx {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
#build .rl-toggle {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 3px;
  padding: 4px 8px;
  cursor: pointer;
}
#build .rl-toggle:hover {
  background: var(--bg-raised);
  border-color: var(--brand-500);
  color: var(--brand-700);
}
[data-theme="dark"] #build .rl-toggle:hover { color: var(--brand-300); }

#build .dwg-gallery {
  padding: 12px;
}
#build .dwg-tile {
  background: var(--bg);
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  padding: 12px 14px 11px;
}
#build .dwg-tile:hover {
  border-color: var(--brand-500);
  background: var(--bg-raised);
  box-shadow: none;
}
#build .dwg-tile.active {
  border-color: var(--brand-500);
  background: var(--bg-raised);
  box-shadow: none;
}
#build .dwg-tile-id {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand-700);
}
[data-theme="dark"] #build .dwg-tile-id { color: var(--brand-300); }
#build .dwg-tile.active .dwg-tile-id {
  color: var(--brand-700);
}
[data-theme="dark"] #build .dwg-tile.active .dwg-tile-id { color: var(--brand-300); }
#build .dwg-tile-role {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--bg-raised);
  color: var(--text-tertiary);
  border: 1px solid var(--border-hairline);
}
#build .dwg-tile.role-primary .dwg-tile-role {
  background: var(--brand-50);
  color: var(--brand-700);
  border-color: var(--brand-200);
}
[data-theme="dark"] #build .dwg-tile.role-primary .dwg-tile-role {
  background: var(--brand-100);
  color: var(--brand-300);
}
#build .dwg-tile.role-interface .dwg-tile-role,
#build .dwg-tile.role-overview .dwg-tile-role,
#build .dwg-tile.role-hardware .dwg-tile-role {
  background: var(--caution-50);
  color: var(--caution-700);
  border-color: var(--caution-200);
}
[data-theme="dark"] #build .dwg-tile.role-interface .dwg-tile-role,
[data-theme="dark"] #build .dwg-tile.role-overview .dwg-tile-role,
[data-theme="dark"] #build .dwg-tile.role-hardware .dwg-tile-role {
  color: var(--caution-600);
}
#build .dwg-tile-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}
#build .dwg-tile-dot {
  background: var(--brand-700);
}
[data-theme="dark"] #build .dwg-tile-dot { background: var(--brand-300); }
#build .dwg-tile-views {
  padding: 6px 0 2px;
}
#build .dwg-view-link {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
}
#build .dwg-view-link:hover {
  color: var(--brand-700);
}
[data-theme="dark"] #build .dwg-view-link:hover { color: var(--brand-300); }

#build .dwg-guide {
  background: var(--brand-50);
  border-left: 2px solid var(--brand-500);
  border-radius: 0 4px 4px 0;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.6;
  padding: 10px 12px;
}
[data-theme="dark"] #build .dwg-guide {
  background: var(--brand-100);
  border-left-color: var(--brand-400);
}
#build .dwg-guide b {
  color: var(--brand-700);
  font-family: var(--font-mono);
  font-size: 0.92em;
}
[data-theme="dark"] #build .dwg-guide b { color: var(--brand-300); }

#build .dwg-gal-divider {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 12px 4px 6px;
  opacity: 1;
}

#build .dwg-gallery-empty {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.7;
}
#build .dwg-gallery-empty-icon {
  color: var(--text-tertiary);
  opacity: 0.4;
}

/* ---- Community panel ---- */
#build .comm-head {
  border-bottom: 1px solid var(--border-hairline);
  padding: 12px 14px 10px;
}
#build .comm-src {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
#build .comm-search {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 3px;
  padding: 6px 10px;
}
#build .comm-search:hover {
  background: var(--bg-raised);
  border-color: var(--brand-500);
  color: var(--brand-700);
}
[data-theme="dark"] #build .comm-search:hover { color: var(--brand-300); }

#build .comm-list { padding: 10px 0; }
#build .comm-section-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 8px 14px 4px;
  margin-top: 8px;
}
#build .comm-thread {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-hairline);
  color: var(--text);
}
#build .comm-thread:hover {
  background: var(--bg-raised);
}
#build .comm-thread-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
  margin-bottom: 4px;
}
#build .comm-thread-title::after {
  color: var(--text-tertiary);
  opacity: 0.7;
}
#build .comm-thread:hover .comm-thread-title::after { color: var(--brand-700); opacity: 1; }
[data-theme="dark"] #build .comm-thread:hover .comm-thread-title::after { color: var(--brand-300); }
#build .comm-thread-note {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}
#build .comm-more {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--brand-700);
  padding: 12px 14px;
  text-align: center;
}
[data-theme="dark"] #build .comm-more { color: var(--brand-300); }
#build .comm-more:hover { opacity: 0.7; }
#build .comm-empty {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  padding: 32px 14px;
  line-height: 1.8;
}

/* ---- Signed-in: avatar chip + dropdown ---- */
.auth-chip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.auth-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  max-width: 220px;
}
.auth-chip:hover { background: var(--bg-raised); border-color: var(--border); }
.auth-chip-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-700);
  color: var(--paper-50);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
[data-theme="dark"] .auth-chip-avatar { background: var(--brand-500); }
.auth-chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  color: var(--text-strong);
}

/* Mobile chip — slimmer, avatar only (label hidden by media query below) */
body[data-app="mobile"] .auth-chip { padding: 2px; border: 0; gap: 0; }
body[data-app="mobile"] .auth-chip-label { display: none; }
body[data-app="mobile"] .auth-chip-avatar { width: 28px; height: 28px; }

/* Dropdown menu */
.auth-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  z-index: 500;
  padding: 4px 0;
  overflow: hidden;
}
.auth-menu[hidden] { display: none; }
.auth-menu-head {
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--border-hairline);
}
.auth-menu-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 15px;
  color: var(--text-strong);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
  line-height: 1.2;
}
.auth-menu-name--placeholder {
  color: var(--text-tertiary);
  font-style: italic;
  font-weight: 400;
}
.auth-menu-email {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  word-break: break-all;
}
.auth-menu-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
}
.auth-menu-item:hover { background: var(--bg-raised); }
.auth-menu-item--danger { color: var(--warn-700); }
.auth-menu-item--danger:hover { background: var(--warn-50); color: var(--warn-700); }
[data-theme="dark"] .auth-menu-item--danger { color: var(--warn-600); }

/* ---- First-time / edit profile modal ---- */
.auth-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 19, 24, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.auth-modal-backdrop[hidden] { display: none; }
.auth-modal {
  background: var(--bg);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  padding: 28px 26px 22px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-3);
  color: var(--text);
}
.auth-modal-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-700);
  font-weight: 600;
  margin-bottom: 8px;
}
[data-theme="dark"] .auth-modal-eyebrow { color: var(--brand-300); }
.auth-modal-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-strong);
  margin: 0 0 8px;
}
.auth-modal-sub {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.auth-modal-form { display: flex; flex-direction: column; gap: 14px; }
.auth-modal-field { display: flex; flex-direction: column; gap: 6px; }
.auth-modal-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 500;
}
.auth-modal-field input {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 14px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.auth-modal-field input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px var(--brand-100);
}
.auth-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.auth-modal-primary {
  background: var(--brand-700);
  color: var(--paper-50);
  border: 1px solid var(--brand-700);
  border-radius: 4px;
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
}
.auth-modal-primary:hover { background: var(--brand-800); border-color: var(--brand-800); }
[data-theme="dark"] .auth-modal-primary { background: var(--brand-500); border-color: var(--brand-500); }
[data-theme="dark"] .auth-modal-primary:hover { background: var(--brand-400); border-color: var(--brand-400); }
.auth-modal-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.auth-modal-secondary:hover { background: var(--bg-raised); color: var(--text); }
.auth-modal-error {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--warn-700);
  background: var(--warn-50);
  border: 1px solid var(--warn-100);
  border-radius: 3px;
  padding: 8px 10px;
}
[data-theme="dark"] .auth-modal-error { color: var(--warn-600); }


/* ============================================================
   WS-12 Phase 3a — Desktop Home redesign

   Replaces the old dark navy hero+section-grid home with the
   "where am I, what's next" home from design 02. New shape:

     [ App bar — serif wordmark + nav tabs + theme + auth ]
     [ Slim 200px hero band (existing hero image, restyled) ]
     [ Page (1fr / 320px):                                  ]
     [   left:  Next-up card + Upcoming list                ]
     [   right: Progress card + Sections card + Jump card   ]
     [ Footnote                                              ]

   All scoped under #home so the rest of the app is untouched.
   ============================================================ */

/* CRITICAL: do NOT set display on the base #home selector — that breaks
   the .screen { display: none } default and leaves #home sitting on top
   of every other screen, intercepting clicks meant for #build / #ask.
   The .screen class handles show/hide via the .active modifier; we only
   override the display VALUE (flex → block) when active, plus set the
   home's own scroll container. */
#home {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}
#home.screen.active {
  display: block;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
#home::before { display: none; }  /* kill the legacy navy grid overlay */

/* ---- App bar ---- */
#home .home-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-hairline);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}
#home .home-appbar-left {
  display: flex;
  align-items: center;
  gap: 24px;
}
#home .home-wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-strong);
  position: relative;
  display: inline-block;
  padding: 4px 0;
}
#home .home-wordmark::before {
  content: "";
  position: absolute;
  left: 0.6em;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--brand-500);
}
[data-theme="dark"] #home .home-wordmark::before { background: var(--brand-400); }
#home .home-nav {
  display: flex;
  gap: 4px;
}
#home .home-nav-link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}
#home .home-nav-link:hover { color: var(--text-strong); }
#home .home-nav-link.is-on {
  color: var(--text-strong);
  background: var(--bg-raised);
}
#home .home-nav-link.is-soon { color: var(--text-tertiary); }
#home .home-nav-link.is-soon:hover { color: var(--text-secondary); }
#home .home-appbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
#home .home-appbar-right .theme-btn {
  height: auto;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
}
#home .home-appbar-right .theme-btn:hover { background: var(--bg-raised); }

/* ---- Hero band ---- */
#home .home-hero-band {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: linear-gradient(135deg, #0E1F33 0%, #1E3A5C 60%, #2A4D7A 100%);
  border-bottom: 1px solid var(--border-hairline);
  flex-shrink: 0;
}
#home .home-hero-img-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
#home .home-hero-img-wrap .hero-img {
  position: absolute;
  inset: 0;
  background-image: url('assets/hero-airplane.png');
  background-size: cover;
  background-position: center 45%;
  opacity: 0.85;
}
#home .home-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(14, 31, 51, 0.2) 0%,
    rgba(14, 31, 51, 0.4) 60%,
    rgba(14, 31, 51, 0.75) 100%);
}
#home .home-hero-stamp {
  position: absolute;
  left: 24px;
  bottom: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 250, 246, 0.65);
  line-height: 1.4;
}
#home .home-hero-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--paper-50);
  display: block;
  margin-bottom: 2px;
}
#home .home-hero-sub {
  display: block;
}
#home .home-hero-edit-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(251, 250, 246, 0.7);
  background: rgba(14, 19, 24, 0.4);
  border: 1px solid rgba(251, 250, 246, 0.2);
  border-radius: 3px;
  padding: 4px 10px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
#home .home-hero-edit-btn:hover {
  color: var(--paper-50);
  border-color: rgba(251, 250, 246, 0.4);
}

/* Hero edit panel — paper modal style, restyled from the legacy dark version */
#home .hero-edit-panel {
  position: absolute;
  inset: 0;
  background: rgba(14, 19, 24, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  z-index: 5;
}
#home .hero-edit-panel.active { display: flex; }
#home .hero-edit-panel label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(251, 250, 246, 0.6);
  width: 100%;
  max-width: 360px;
  margin-bottom: -4px;
}
#home .hero-edit-panel input[type="text"] {
  width: 100%;
  max-width: 360px;
  padding: 10px 14px;
  background: rgba(251, 250, 246, 0.08);
  border: 1px solid rgba(251, 250, 246, 0.18);
  border-radius: 4px;
  color: var(--paper-50);
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
}
#home .hero-edit-panel input[type="text"]:focus {
  border-color: var(--brand-300);
}
#home .hero-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
#home .hero-edit-actions button {
  padding: 8px 14px;
  border-radius: 3px;
  border: 1px solid rgba(251, 250, 246, 0.18);
  background: rgba(251, 250, 246, 0.08);
  color: rgba(251, 250, 246, 0.85);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
}
#home .hero-edit-actions button:hover { background: rgba(251, 250, 246, 0.15); }
#home .hero-edit-actions button.primary {
  background: var(--brand-500);
  color: var(--paper-50);
  border-color: var(--brand-500);
}

/* ---- Main page ---- */
#home .home-page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 48px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}

/* Section heads — drafting block style */
#home .home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-hairline);
  padding-bottom: 8px;
  margin-bottom: 20px;
}
#home .home-section-head h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--text-strong);
  margin: 0;
}
#home .home-section-head-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Next-up centerpiece card */
#home .home-next-card {
  background: var(--paper-50);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 32px;
  position: relative;
}
[data-theme="dark"] #home .home-next-card { background: var(--bg-raised); }
#home .home-next-breadcrumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
#home .home-next-breadcrumbs .sep { margin: 0 8px; opacity: 0.5; }
#home .home-next-step-id {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-700);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
[data-theme="dark"] #home .home-next-step-id { color: var(--brand-300); }
#home .home-next-step-id::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-hairline);
}
#home .home-next-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  margin: 0 0 14px;
  text-wrap: pretty;
}
#home .home-next-summary {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 60ch;
  margin: 0 0 22px;
}
#home .home-next-alert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  margin-bottom: 22px;
  padding: 12px 14px;
  border-radius: 3px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-raised);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
#home .home-next-alert .badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  white-space: nowrap;
  align-self: start;
  margin-top: 1px;
}
#home .home-next-alert .badge.caution { background: var(--caution-100); color: var(--caution-700); }
#home .home-next-alert .badge.warn    { background: var(--warn-100);    color: var(--warn-700);    }
#home .home-next-alert .badge.info    { background: var(--info-100);    color: var(--info-700);    }
[data-theme="dark"] #home .home-next-alert .badge.caution { color: var(--caution-600); }
[data-theme="dark"] #home .home-next-alert .badge.warn    { color: var(--warn-600); }
[data-theme="dark"] #home .home-next-alert .badge.info    { color: var(--info-600); }
#home .home-next-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--border-hairline);
  flex-wrap: wrap;
}
#home .home-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
}
#home .home-btn.primary {
  background: var(--brand-700);
  color: var(--paper-50);
  border-color: var(--brand-700);
}
#home .home-btn.primary:hover { background: var(--brand-800); border-color: var(--brand-800); }
[data-theme="dark"] #home .home-btn.primary { background: var(--brand-500); border-color: var(--brand-500); }
[data-theme="dark"] #home .home-btn.primary:hover { background: var(--brand-400); border-color: var(--brand-400); }
#home .home-btn.ghost { border-color: var(--border); color: var(--text); }
#home .home-btn.ghost:hover { border-color: var(--text); background: var(--bg-raised); }
#home .home-btn.bare { color: var(--text-secondary); padding: 11px 4px; }
#home .home-btn.bare:hover { color: var(--text-strong); }
#home .home-next-spacer { flex: 1; }

/* Upcoming list */
#home .home-upcoming { margin-top: 40px; }
#home .home-upcoming-list {
  display: grid;
  border-top: 1px solid var(--border-hairline);
}
#home .home-upcoming-row {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  gap: 24px;
  align-items: baseline;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border-hairline);
  cursor: pointer;
}
#home .home-upcoming-row:hover { background: var(--bg-raised); }
#home .home-upcoming-row .id {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
#home .home-upcoming-row .name {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.3;
  color: var(--text-strong);
}
#home .home-upcoming-row .name .sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}
#home .home-upcoming-row .flag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
}
#home .home-upcoming-row .flag.caution { background: var(--caution-100); color: var(--caution-700); }
#home .home-upcoming-row .flag.warn    { background: var(--warn-100);    color: var(--warn-700);    }
#home .home-upcoming-row .flag.info    { background: var(--info-100);    color: var(--info-700);    }
[data-theme="dark"] #home .home-upcoming-row .flag.caution { color: var(--caution-600); }
[data-theme="dark"] #home .home-upcoming-row .flag.warn    { color: var(--warn-600); }
[data-theme="dark"] #home .home-upcoming-row .flag.info    { color: var(--info-600); }
#home .home-upcoming-row .flag.empty { color: transparent; }
#home .home-upcoming-empty {
  padding: 28px 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Right column */
#home .home-side-col > * + * { margin-top: 24px; }
#home .home-progress-card,
#home .home-sections-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-hairline);
  border-radius: 5px;
  padding: 20px;
}
#home .home-card-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
#home .home-pct {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text-strong);
}
#home .home-pct .of {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-left: 8px;
}
#home .home-progress-bar {
  height: 4px;
  background: var(--paper-200);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 14px;
}
#home .home-progress-bar > span {
  display: block;
  height: 100%;
  background: var(--brand-700);
  transition: width 0.3s ease;
}
[data-theme="dark"] #home .home-progress-bar > span { background: var(--brand-500); }
#home .home-progress-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-top: 12px;
}
#home .home-progress-anon-cta {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 10px;
}
#home .home-progress-anon-cta .auth-signin-btn {
  margin-top: 8px;
}

#home .home-sections-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-hairline);
  cursor: pointer;
}
#home .home-sections-row:last-child { border-bottom: 0; }
#home .home-sections-row:hover { background: var(--bg); }
#home .home-sections-name {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
}
#home .home-sections-name.is-done {
  color: var(--text-tertiary);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--paper-300);
}
#home .home-sections-name.is-now {
  color: var(--text-strong);
  font-weight: 500;
}
#home .home-sections-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}
#home .home-sections-pill.is-done { color: var(--ok-700); }
#home .home-sections-pill.is-now  { color: var(--brand-700); }
[data-theme="dark"] #home .home-sections-pill.is-done { color: var(--ok-600); }
[data-theme="dark"] #home .home-sections-pill.is-now  { color: var(--brand-300); }

/* Jump card */
#home .home-jump-card {
  border: 1px solid var(--border-hairline);
  border-radius: 5px;
  padding: 4px;
  background: var(--bg);
}
#home .home-jump-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  border-radius: 3px;
  cursor: pointer;
}
#home .home-jump-link:hover { background: var(--bg-raised); color: var(--text-strong); }
#home .home-jump-link + .home-jump-link { border-top: 1px solid var(--border-hairline); }
#home .home-jump-link .arrow {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

/* Footnote */
#home .home-footnote {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 18px 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  border-top: 1px solid var(--border-hairline);
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
}

/* Responsive — collapse to single column under ~1000px */
@media (max-width: 1000px) {
  #home .home-page { grid-template-columns: 1fr; }
  #home .home-upcoming-row { grid-template-columns: 60px 1fr auto; }
  #home .home-upcoming-row .flag { display: none; }
  #home .home-next-title { font-size: 26px; }
}

/* ============================================================
   Cross-screen nav — shared between #build .c-head and
   #ask .ask-appbar so the Build Log (and future surfaces) are
   reachable from anywhere. Visually matches #home .home-nav.
   Scoped narrowly so it doesn't bleed into other layouts.
   ============================================================ */
.cross-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.cross-nav-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  padding: 5px 8px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.cross-nav-link:hover { color: var(--text-strong); }
.cross-nav-link.is-on {
  color: var(--text-strong);
  background: var(--bg-raised);
}
.cross-nav-link.is-soon { color: var(--text-tertiary); }
.cross-nav-link.is-soon:hover { color: var(--text-secondary); }

/* In Build Center the left + right trays squeeze the center bar; the
   per-section crumb is redundant with the part-head inside c-body, so
   hide it whenever the cross-nav is present and let nav own the chrome. */
#build .c-head .bc-bar-left .crumb,
#ask .ask-bar-left .ask-crumbs { display: none; }

/* Final fallback — allow wrap if any future surface still overflows. */
@media (max-width: 1280px) {
  #build .c-head, #ask .ask-appbar { flex-wrap: wrap; row-gap: 6px; }
  #build .bc-bar-left, #ask .ask-bar-left { flex-wrap: wrap; row-gap: 6px; }
}

/* Truly narrow viewports — hide the cross-nav, the per-screen Home /
   Back-to-build buttons remain on the right. */
@media (max-width: 720px) {
  .cross-nav { display: none; }
}

/* ============================================================
   WS-12 Phase 3b — Build Log Desktop
   Scoped under #log so class names can't collide with other
   surfaces. Ported from clarence-scope/design/08_Build_Log_Desktop.html.
   ============================================================ */

#log {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}
#log.screen.active {
  display: block;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---- App bar (matches Home's pattern) ---- */
#log .log-appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-hairline);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
#log .log-appbar-left { display: flex; align-items: center; gap: 28px; }
/* Wordmark — exact match for the canonical .brand pattern in
   clarence-scope/design/02_Home_Desktop.html. The stripe at
   `left: 0.6em` sits inside the wordmark's bounding box, threading
   between the C and the l — evoking the ASME centerline ℄ symbol
   that anchors the Clarence brand identity. NO padding-left; that
   pushes the stripe out to the left of the C ("displaced vertical
   line · Clarence" instead of the threaded centerline). */
#log .log-wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-strong);
  position: relative;
  display: inline-block;
  padding: 4px 0;
  cursor: pointer;
  user-select: none;
}
#log .log-wordmark::before {
  content: "";
  position: absolute;
  left: 0.6em;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--brand-500);
}
[data-theme="dark"] #log .log-wordmark::before { background: var(--brand-400); }

#log .log-nav { display: flex; gap: 4px; }
#log .log-nav-link {
  background: transparent; border: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 8px 12px;
  border-radius: 3px;
  cursor: pointer;
}
#log .log-nav-link:hover { color: var(--text-strong); }
#log .log-nav-link.is-on {
  color: var(--text-strong);
  background: var(--bg-raised);
}
#log .log-nav-link.is-soon { color: var(--text-tertiary); }
#log .log-nav-link.is-soon:hover { color: var(--text-secondary); }
#log .log-appbar-right { display: flex; align-items: center; gap: 10px; }
#log .theme-btn {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: none; border: 1px solid var(--border-hairline);
  color: var(--text-secondary);
  padding: 7px 12px; border-radius: 4px;
  cursor: pointer;
}
#log .theme-btn:hover { background: var(--bg-raised); color: var(--text-strong); }

/* ---- Masthead ---- */
#log .log-masthead {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 36px 56px 24px;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--bg);
}
#log .log-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}
#log .log-eyebrow .sep { width: 24px; height: 1px; background: var(--border); }
#log .log-masthead-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px;
}
#log .log-masthead h1 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 44px; line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--text-strong);
  margin: 0;
}
#log .log-masthead h1 em {
  font-style: italic; font-weight: 400;
  color: var(--text-secondary);
}
#log .log-actions { display: flex; gap: 10px; flex-shrink: 0; }
#log .log-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: var(--text-strong);
  cursor: pointer;
  text-decoration: none;
}
#log .log-btn:hover { background: var(--paper-100); }
#log .log-btn.primary {
  background: var(--brand-700); color: var(--paper-50);
  border-color: var(--brand-700);
}
#log .log-btn.primary:hover { background: var(--brand-600); }
#log .log-btn .gly { font-family: var(--font-mono); font-size: 13px; }

/* Stat strip */
#log .log-stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 28px;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
#log .log-stat {
  padding: 16px 0 16px 24px;
  border-right: 1px solid var(--border-hairline);
  display: flex; flex-direction: column; gap: 4px;
}
/* First column has no divider on its left, so it doesn't need the inset —
   let it align flush with the masthead's left edge. */
#log .log-stat:first-child { padding-left: 0; }
#log .log-stat:last-child { border-right: 0; }
#log .log-stat .eye {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-tertiary);
}
#log .log-stat .val {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 28px; line-height: 1;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
#log .log-stat .val .u {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-tertiary);
  margin-left: 6px; font-weight: 400; letter-spacing: 0.06em;
}
#log .log-stat .delta {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

/* ---- Year wall (heatmap) ---- */
#log .log-year-wall {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 28px 56px 32px;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--paper-100);
}
#log .log-yw-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
#log .log-yw-head h2 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 16px; color: var(--text-strong);
  margin: 0;
  display: flex; align-items: baseline; gap: 12px;
}
#log .log-yw-head h2 .meta {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--text-tertiary);
  font-weight: 400; text-transform: uppercase;
}
#log .log-legend {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-tertiary);
}
#log .log-legend .scale { display: inline-flex; gap: 2px; }
#log .log-legend .scale i {
  width: 11px; height: 11px; display: block;
  border: 1px solid var(--paper-300);
  background: var(--paper-50);
}
#log .log-legend .scale i.l1 { background: var(--brand-100); border-color: var(--brand-200); }
#log .log-legend .scale i.l2 { background: var(--brand-300); border-color: var(--brand-400); }
#log .log-legend .scale i.l3 { background: var(--brand-500); border-color: var(--brand-600); }
#log .log-legend .scale i.l4 { background: var(--brand-700); border-color: var(--brand-800); }

#log .log-heatmap { display: flex; flex-direction: column; gap: 12px; }
#log .log-hm-months {
  display: grid;
  grid-template-columns: 28px repeat(52, 1fr);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-tertiary);
}
#log .log-hm-months span:first-child { grid-column: 1; }
#log .log-hm-grid {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
}
#log .log-hm-daylabels {
  display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px;
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-tertiary);
  align-self: stretch;
}
#log .log-hm-daylabels span { display: grid; align-items: center; }
#log .log-hm-weeks {
  display: grid;
  grid-template-columns: repeat(52, 1fr);
  gap: 3px;
}
#log .log-hm-week {
  display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px;
}
#log .log-hm-cell {
  aspect-ratio: 1;
  background: var(--paper-50);
  border: 1px solid var(--paper-300);
}
#log .log-hm-cell.l1 { background: var(--brand-100); border-color: var(--brand-200); }
#log .log-hm-cell.l2 { background: var(--brand-300); border-color: var(--brand-400); }
#log .log-hm-cell.l3 { background: var(--brand-500); border-color: var(--brand-600); }
#log .log-hm-cell.l4 { background: var(--brand-700); border-color: var(--brand-800); }
#log .log-hm-cell.today { outline: 2px solid var(--caution-500); outline-offset: 1px; }

/* ---- Body grid (feed + aside) ---- */
#log .log-body {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}
#log .log-feed-wrap {
  padding: 32px 24px 96px 56px;
  /* Sticky .log-compose lives inside this wrapper. Sticky positioning
     only works while the containing block remains in view, so on short
     feeds (e.g. 1 entry) the compose stub would unstick the moment the
     wrapper's bottom edge scrolled past. Anchoring the wrapper to at
     least the viewport height keeps the sticky window open across the
     full visible scroll, no matter how short the entry list is. */
  min-height: 100vh;
  /* `min-width: 0` (via minmax(0, 1fr) on the grid track above) lets
     the feed column shrink to fit; otherwise grid items default to
     min-width: auto = min-content, which lets wide photo grids push
     past the column boundary into the right-rail column. */
  min-width: 0;
}
#log .log-side {
  position: sticky; top: 0;
  padding: 32px 32px 96px 16px;
  align-self: start;
}

/* Compose stub */
#log .log-compose {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 16px; align-items: center;
  padding: 18px 22px;
  background: var(--paper-100);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  margin-bottom: 32px;
}
#log .log-compose-avatar {
  width: 40px; height: 40px;
  background: var(--brand-700); color: var(--paper-50);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-serif); font-weight: 500;
  font-size: 16px;
}
#log .log-compose-prompt {
  font-family: var(--font-serif); font-style: italic;
  font-size: 16px; color: var(--text-secondary);
}
#log .log-compose-prompt strong {
  color: var(--text-strong); font-style: normal; font-weight: 500;
}

/* Feed common */
#log .log-feed { display: flex; flex-direction: column; }

/* Entry — base */
#log .entry {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 32px;
  padding: 28px 0 32px;
  border-bottom: 1px solid var(--border-hairline);
  min-width: 0;
}
#log .entry .gutter {
  padding-top: 4px;
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-end;
  text-align: right;
}
#log .entry .gutter .dow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-tertiary);
}
#log .entry .gutter .date {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 32px; line-height: 1;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
#log .entry .gutter .month {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 500;
}
#log .entry .gutter .hours {
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text);
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
}
#log .entry .gutter .hours .v {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 20px; color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
#log .entry .gutter .hours .u {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-tertiary);
}

#log .entry .body { padding-top: 2px; position: relative; min-width: 0; }
#log .entry .tags {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
#log .entry .tags .step {
  color: var(--brand-700);
  border: 1px solid var(--brand-200);
  background: var(--brand-50);
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 500;
}
#log .entry .tags .pill {
  border: 1px solid var(--border-hairline);
  padding: 3px 8px;
  border-radius: 3px;
}
#log .entry .tags .pill.caution {
  color: var(--caution-700);
  background: var(--caution-50);
  border-color: var(--caution-100);
}
#log .entry .tags .pill.ok {
  color: var(--ok-700);
  background: var(--ok-50);
  border-color: var(--ok-100);
}
#log .entry .tags .pill.info {
  color: var(--info-700);
  background: var(--info-50);
  border-color: var(--info-100);
}
#log .entry .pin {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--caution-600);
}
#log .entry h3 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 26px; line-height: 1.18;
  color: var(--text-strong);
  letter-spacing: -0.012em;
  margin: 0 0 14px;
  text-wrap: pretty;
}
#log .entry .prose {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 17px; line-height: 1.6;
  color: var(--text);
  text-wrap: pretty;
}
#log .entry .prose p { margin: 0 0 12px; }
#log .entry .prose p:last-child { margin-bottom: 0; }
#log .entry .prose strong { font-weight: 500; color: var(--text-strong); }
#log .entry .prose em { font-style: italic; color: var(--text-secondary); }

/* Photo grid — design 08 §"Photo grid". Bug-fix 2026-05-14:
   renderLogEntry emits .log-photos / .log-photo but no CSS was ever
   ported, so photos on existing entries rendered as zero-height
   divs and looked missing. */
#log .entry .log-photos {
  display: grid; gap: 6px;
  margin-top: 16px;
  min-width: 0;
}
#log .entry .log-photos.g1 { grid-template-columns: minmax(0, 1fr); }
#log .entry .log-photos.g2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
#log .entry .log-photos.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#log .entry .log-photos.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#log .entry .log-photo {
  aspect-ratio: 4/3;
  background-color: var(--paper-200);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--paper-300);
  border-radius: 2px;
  min-width: 0;
  overflow: hidden;
}

#log .entry .meta-footer {
  margin-top: 16px;
  display: flex; flex-wrap: wrap; gap: 18px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
#log .entry .meta-footer .item {
  display: inline-flex; gap: 6px; align-items: center;
}
#log .entry .meta-footer .item .k { color: var(--text-tertiary); }
#log .entry .meta-footer .item .v { color: var(--text-secondary); }

/* Special entry types */
#log .entry.stuck { background: var(--caution-50); }
#log .entry.stuck .body { position: relative; }
#log .entry.stuck .stuck-rail {
  position: absolute; left: -16px; top: 6px; bottom: 6px;
  width: 3px; background: var(--caution-500);
}

#log .entry.milestone {
  grid-template-columns: 1fr;
  padding: 36px 32px;
  margin: 12px 0;
  background: var(--brand-700);
  color: var(--paper-50);
  border-radius: 4px;
  border: 0;
  position: relative;
}
#log .entry.milestone::before, #log .entry.milestone::after {
  content: ""; position: absolute; left: 32px; right: 32px;
  height: 1px; background: rgba(255,255,255,0.2);
}
#log .entry.milestone::before { top: 18px; }
#log .entry.milestone::after { bottom: 18px; }
#log .entry.milestone .marker {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  text-align: center;
  margin-bottom: 12px;
}
#log .entry.milestone h2 {
  font-family: var(--font-serif); font-weight: 500;
  font-style: italic;
  font-size: 36px; line-height: 1.1;
  text-align: center;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
#log .entry.milestone .ledger {
  text-align: center;
  display: flex; justify-content: center; gap: 28px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
#log .entry.milestone .ledger b {
  font-family: var(--font-serif); font-style: normal; font-weight: 500;
  font-size: 16px; color: var(--paper-50);
  letter-spacing: 0; text-transform: none; margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

#log .entry.chapter {
  grid-template-columns: 1fr;
  padding: 56px 0 48px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
  background: linear-gradient(180deg, var(--paper-100) 0%, var(--paper-50) 100%);
  margin: 8px 0;
}
#log .entry.chapter .marker {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}
#log .entry.chapter h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 52px; line-height: 1;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
#log .entry.chapter h2 .sym {
  color: var(--brand-700); font-style: italic;
  font-weight: 400;
  margin-right: 8px;
}
#log .entry.chapter .sub {
  font-family: var(--font-serif); font-style: italic;
  font-size: 17px; color: var(--text-secondary);
  margin-bottom: 22px;
}
#log .entry.chapter .ledger {
  display: inline-flex; gap: 28px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-tertiary);
}
#log .entry.chapter .ledger b {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 16px; color: var(--text-strong);
  letter-spacing: 0;
  text-transform: none;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* Empty + signed-out states */
#log .log-empty {
  text-align: center;
  padding: 64px 32px 80px;
  color: var(--text-secondary);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}
#log .log-empty h3 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 28px;
  color: var(--text-strong);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
#log .log-empty p { margin: 0 auto 14px; max-width: 460px; }
#log .log-empty .log-empty-cta {
  margin-top: 22px;
  display: inline-flex; gap: 10px;
}

/* Tail */
#log .log-tail {
  padding: 36px 0 16px;
  text-align: center;
  font-family: var(--font-serif); font-style: italic;
  color: var(--text-tertiary);
  font-size: 14px;
}
#log .log-tail .sep {
  display: inline-block; width: 36px; height: 1px;
  background: var(--border);
  vertical-align: middle;
  margin: 0 16px;
}

/* ---- Aside ---- */
#log .log-side h3 {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 14px;
  font-weight: 500;
}
#log .log-card {
  background: var(--paper-100);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  padding: 18px 18px 16px;
  margin-bottom: 22px;
}
#log .log-card-id {
  background: var(--brand-700);
  color: var(--paper-50);
  border: 0;
}
#log .log-card-id h3 { color: rgba(255,255,255,0.65); }
#log .log-card-id .reg {
  font-family: var(--font-serif); font-weight: 400; font-style: italic;
  font-size: 26px; line-height: 1;
  margin: 4px 0 14px;
}
#log .log-card-id .kit {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.75);
  display: flex; flex-direction: column; gap: 4px;
}
#log .log-card-id .kit .row {
  display: flex; justify-content: space-between; gap: 12px;
}
#log .log-card-id .kit .row .k {
  color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 10px;
}

#log .log-focus {
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--font-sans);
}
#log .log-focus .step-no {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--brand-700);
  letter-spacing: 0.14em;
}
#log .log-focus .step-title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 18px; color: var(--text-strong);
  line-height: 1.25;
  text-wrap: pretty;
}
#log .log-focus .progress {
  height: 4px; background: var(--paper-300);
  border-radius: 2px; margin-top: 4px; overflow: hidden;
}
#log .log-focus .progress span {
  display: block; height: 100%; background: var(--brand-700);
}
#log .log-focus .progress-meta {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: 4px;
}

#log .log-timeline {
  display: flex; flex-direction: column; gap: 12px;
}
#log .log-timeline .row {
  display: grid; grid-template-columns: 18px 1fr auto;
  gap: 12px; align-items: center;
}
#log .log-timeline .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-700);
  margin-left: 5px;
  position: relative;
}
#log .log-timeline .dot.done { background: var(--ok-600); }
#log .log-timeline .dot.pending {
  background: var(--paper-300);
  border: 1px solid var(--border);
}
#log .log-timeline .row + .row .dot::before {
  content: ""; position: absolute; left: 50%; top: -16px;
  width: 1px; height: 12px;
  background: var(--border-hairline);
  transform: translateX(-50%);
}
#log .log-timeline .lbl {
  font-family: var(--font-sans); font-size: 14px;
  color: var(--text);
}
#log .log-timeline .when {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
}

#log .log-filters {
  display: flex; flex-direction: column;
  font-family: var(--font-sans); font-size: 14px;
  gap: 1px;
}
#log .log-filters .row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  width: 100%;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background-color 0.12s;
}
#log .log-filters .row:hover { background: var(--bg-raised); }
#log .log-filters .row.is-active {
  background: var(--brand-50);
  color: var(--brand-700);
}
#log .log-filters .row.is-active .lbl { color: var(--brand-700); font-weight: 500; }
#log .log-filters .row.is-active .ct { color: var(--brand-700); }
#log .log-filters .row .lbl { color: var(--text); }
#log .log-filters .row .ct {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
}

/* ---- Pull-quote card ---- */
#log .log-card-pull {
  background: transparent;
  border: 0;
  padding: 0;
}
#log .log-pull {
  font-family: var(--font-serif); font-style: italic;
  font-size: 16px; line-height: 1.45;
  color: var(--text);
  border-left: 2px solid var(--brand-700);
  padding: 4px 0 4px 14px;
  margin-bottom: 6px;
  text-wrap: pretty;
}
#log .log-pull-attr {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  padding-left: 16px;
}

/* ---- Timeline empty state ---- */
#log .log-timeline-empty {
  font-family: var(--font-serif); font-style: italic;
  font-size: 13.5px;
  color: var(--text-tertiary);
  line-height: 1.5;
  padding: 4px 0;
}

/* ---- Search bar (above feed) ---- */
#log .log-search {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--paper-100);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  margin-bottom: 18px;
}
#log .log-search[hidden] { display: none; }
#log .log-search-gly {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text-tertiary);
}
#log .log-search input[type="search"] {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-strong);
  outline: none;
  padding: 4px 0;
}
#log .log-search input[type="search"]::-webkit-search-cancel-button { display: none; }
#log .log-search-close {
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  color: var(--text-tertiary);
  font-family: var(--font-mono); font-size: 12px;
  cursor: pointer;
}
#log .log-search-close:hover {
  background: var(--bg);
  color: var(--text-strong);
}

/* ---- Filter banner (active filter explainer) ---- */
#log .log-filter-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 6px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-700);
}
#log .log-filter-banner[hidden] { display: none; }
#log .log-filter-banner-label { flex: 1; }
#log .log-filter-banner-clear {
  background: transparent;
  border: 1px solid var(--brand-200);
  color: var(--brand-700);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}
#log .log-filter-banner-clear:hover {
  background: var(--brand-100);
}

/* ---- Sticky compose stub ----
   Compose sticks just under the app bar (which is also sticky at top:0
   with its own ~73px height) when the user scrolls past the heatmap, so
   "Write tonight's entry" stays one click away. */
#log .log-compose {
  position: sticky;
  top: 76px;
  z-index: 5;
}

/* ---- Compose / Edit modal (Phase 3b-ii) ---- */
.log-compose-modal {
  position: fixed; inset: 0;
  z-index: 1050;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 56px 24px 56px;
  overflow-y: auto;
}
.log-compose-modal[hidden] { display: none; }
.log-compose-modal .lcm-backdrop {
  position: fixed; inset: 0;
  background: rgba(14,19,24,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.log-compose-modal .lcm-card {
  position: relative;
  width: 100%;
  max-width: 680px;
  background: var(--bg);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(14,19,24,0.18);
  padding: 28px 32px 24px;
  margin-bottom: 56px;
}
.log-compose-modal .lcm-head {
  position: relative;
  margin-bottom: 22px;
  padding-right: 36px;
}
.log-compose-modal .lcm-eyebrow {
  display: block;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.log-compose-modal .lcm-title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 26px; line-height: 1.15;
  color: var(--text-strong);
  letter-spacing: -0.01em;
  margin: 0;
}
.log-compose-modal .lcm-close {
  position: absolute; top: -4px; right: -4px;
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  font-size: 18px;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: 4px;
}
.log-compose-modal .lcm-close:hover {
  background: var(--bg-raised);
  color: var(--text-strong);
}

.log-compose-modal .lcm-form {
  display: flex; flex-direction: column; gap: 14px;
}
.log-compose-modal .lcm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.log-compose-modal .lcm-field {
  display: flex; flex-direction: column; gap: 4px;
}
.log-compose-modal .lcm-label {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 500;
}
.log-compose-modal .lcm-hint {
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-tertiary);
  font-weight: 400;
  margin-left: 6px;
}
.log-compose-modal input[type="text"],
.log-compose-modal input[type="date"],
.log-compose-modal input[type="number"],
.log-compose-modal select,
.log-compose-modal textarea {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-strong);
  background: var(--bg);
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  padding: 8px 10px;
  width: 100%;
}
.log-compose-modal textarea {
  resize: vertical;
  line-height: 1.5;
  font-family: var(--font-serif);
  font-size: 15px;
}
.log-compose-modal input:focus,
.log-compose-modal select:focus,
.log-compose-modal textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px var(--brand-100);
}

.log-compose-modal .lcm-types {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.log-compose-modal .lcm-type {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary);
  padding: 6px 10px;
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  cursor: pointer;
  background: var(--bg);
  user-select: none;
}
.log-compose-modal .lcm-type input { appearance: none; -webkit-appearance: none; width: 0; height: 0; margin: 0; }
.log-compose-modal .lcm-type:has(input:checked) {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: var(--paper-50);
}

.log-compose-modal .lcm-more {
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  padding: 0 12px;
}
.log-compose-modal .lcm-more > summary {
  cursor: pointer;
  padding: 10px 0;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-secondary);
  list-style: none;
  user-select: none;
  display: flex; align-items: center; justify-content: space-between;
}
.log-compose-modal .lcm-more > summary::-webkit-details-marker { display: none; }
.log-compose-modal .lcm-more > summary::after {
  content: "▾";
  font-size: 10px;
  color: var(--text-tertiary);
  transition: transform 0.15s;
}
.log-compose-modal .lcm-more[open] > summary::after { transform: rotate(180deg); }
.log-compose-modal .lcm-more > div,
.log-compose-modal .lcm-more > label {
  margin-bottom: 10px;
}
.log-compose-modal .lcm-more > :last-child { margin-bottom: 12px; }

/* Photo uploader inside the compose modal */
.log-compose-modal .lcm-photo-uploader {
  display: flex; flex-direction: column; gap: 10px;
}
.log-compose-modal .lcm-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
}
.log-compose-modal .lcm-photo-grid[hidden] { display: none; }
.log-compose-modal .lcm-photo-thumb {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--paper-200) center/cover no-repeat;
  border: 1px solid var(--border-hairline);
  border-radius: 3px;
  overflow: hidden;
}
.log-compose-modal .lcm-photo-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: rgba(14,19,24,0.7);
  color: var(--paper-50);
  border: 0;
  border-radius: 50%;
  font-family: var(--font-mono); font-size: 11px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.log-compose-modal .lcm-photo-remove:hover {
  background: rgba(14,19,24,0.92);
}
.log-compose-modal .lcm-photo-drop {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  min-height: 132px;
  padding: 20px 22px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  background: var(--paper-100);
  color: var(--text-secondary);
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}
.log-compose-modal .lcm-photo-drop:hover {
  background: var(--paper-200);
  border-color: var(--text-tertiary);
}
.log-compose-modal .lcm-photo-drop.is-dragover {
  background: var(--brand-50);
  border-color: var(--brand-500);
  border-style: solid;
}
.log-compose-modal .lcm-photo-drop input[type="file"] {
  position: absolute; inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
}
.log-compose-modal .lcm-photo-icon {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.log-compose-modal .lcm-photo-prompt {
  flex: 1;
  min-width: 0;
}
.log-compose-modal .lcm-photo-browse {
  color: var(--brand-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.log-compose-modal .lcm-photo-progress {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-700);
}
.log-compose-modal .lcm-photo-error {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--caution-700);
  background: var(--caution-50);
  border: 1px solid var(--caution-100);
  padding: 6px 10px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

.log-compose-modal .lcm-error {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--caution-700);
  background: var(--caution-50);
  border: 1px solid var(--caution-100);
  padding: 8px 12px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.log-compose-modal .lcm-actions {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border-hairline);
}
.log-compose-modal .lcm-spacer { flex: 1; }
.log-compose-modal .lcm-delete {
  color: var(--caution-700);
  border-color: var(--caution-100);
  background: var(--caution-50);
}
.log-compose-modal .lcm-delete:hover {
  background: var(--caution-100);
}

@media (max-width: 600px) {
  .log-compose-modal { padding: 24px 12px 56px; }
  .log-compose-modal .lcm-card { padding: 20px 18px 18px; }
  .log-compose-modal .lcm-row { grid-template-columns: 1fr; }
}

/* ---- Entry hover actions (inline edit + delete) ---- */
#log .entry { position: relative; }
#log .entry .entry-actions {
  position: absolute;
  top: 24px;
  right: 0;
  display: flex; gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
#log .entry:hover .entry-actions {
  opacity: 1;
  pointer-events: auto;
}
#log .entry .entry-action-btn {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--bg);
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 0;
}
#log .entry .entry-action-btn:hover {
  background: var(--paper-100);
  color: var(--text-strong);
  border-color: var(--border);
}
#log .entry .entry-action-btn.danger:hover {
  background: var(--caution-50);
  color: var(--caution-700);
  border-color: var(--caution-100);
}
/* Milestone entry has dark bg — invert action button colors */
#log .entry.milestone .entry-action-btn {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.75);
}
#log .entry.milestone .entry-action-btn:hover {
  background: rgba(255,255,255,0.18);
  color: var(--paper-50);
}

/* Responsive — collapse aside under ~1100px */
@media (max-width: 1100px) {
  #log .log-body { grid-template-columns: 1fr; }
  #log .log-side {
    position: static;
    padding: 0 56px 96px;
  }
  #log .log-feed-wrap { padding-right: 56px; }
}
@media (max-width: 720px) {
  #log .log-masthead { padding: 24px 24px 18px; }
  #log .log-masthead h1 { font-size: 32px; }
  #log .log-masthead-row { flex-direction: column; align-items: flex-start; }
  #log .log-stat-strip { grid-template-columns: repeat(2, 1fr); }
  #log .log-stat:nth-child(2) { border-right: 0; }
  #log .log-year-wall { padding: 22px 24px 26px; }
  #log .log-feed-wrap { padding: 24px 24px 64px; }
  #log .log-side { padding: 0 24px 64px; }
  #log .entry { grid-template-columns: 88px 1fr; gap: 18px; }
  #log .entry .gutter .date { font-size: 24px; }
  #log .entry h3 { font-size: 21px; }
}

/* ============================================================
   WS-12 Phase 3c-i — Plans Viewer
   Standalone #plans surface with 3-pane frame: left TOC,
   center stage (drawing canvas placeholder for 3c-i), right
   rail (annotation tabs stubbed for 3c-i). Sourced from design
   04_Plans_Viewer_Desktop.html.
   ============================================================ */

#plans.screen.active {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  overflow: hidden;
}

/* ---- App bar ---- */
#plans .plans-appbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--bg);
  flex: 0 0 auto;
  gap: 16px;
}
#plans .plans-appbar-left { display: flex; align-items: center; gap: 24px; min-width: 0; }
#plans .plans-wordmark {
  font-family: var(--font-serif); font-weight: 600;
  font-size: 24px; letter-spacing: -0.02em; line-height: 1;
  color: var(--text-strong);
  position: relative; display: inline-block;
  padding: 4px 0;
  cursor: pointer;
  flex: 0 0 auto;
}
#plans .plans-wordmark::before {
  content: ""; position: absolute;
  left: 0.6em; top: -2px; bottom: -2px;
  width: 2px; background: var(--brand-500);
}
[data-theme="dark"] #plans .plans-wordmark::before { background: var(--brand-400); }
#plans .plans-crumbs {
  font-family: var(--font-sans); font-size: 13px;
  color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
#plans .plans-crumbs .sec {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary);
}
#plans .plans-crumbs .sep { opacity: 0.5; }
#plans .plans-crumbs .here { color: var(--text-strong); font-weight: 500; }

#plans .plans-appbar-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#plans .plans-appbar-right .theme-btn,
#plans .plans-appbar-right .plans-btn {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text);
  background: transparent; border: 1px solid var(--border);
  border-radius: 4px; padding: 6px 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
#plans .plans-appbar-right .plans-btn:hover,
#plans .plans-appbar-right .theme-btn:hover { background: var(--bg-raised); }
#plans .plans-appbar-right .plans-btn .gly { opacity: 0.7; font-size: 13px; line-height: 1; }
#plans .plans-appbar-right .plans-btn.is-soon { opacity: 0.55; cursor: default; }

/* ---- Cross-screen nav (reuse style from build/ask/log) ---- */
#plans .cross-nav {
  display: flex; gap: 4px; align-items: center;
  margin: 0 auto;
}
#plans .cross-nav-link {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent; border: 0;
  padding: 6px 10px; cursor: pointer;
  border-radius: 3px;
}
#plans .cross-nav-link:hover { color: var(--text); background: var(--bg-raised); }
#plans .cross-nav-link.is-on {
  color: var(--text-strong);
  background: var(--bg-raised);
}
#plans .cross-nav-link.is-soon { opacity: 0.5; cursor: default; }
#plans .cross-nav-link.is-soon:hover { background: transparent; color: var(--text-secondary); }

/* ---- 3-pane frame ---- */
#plans .plans-frame {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 340px;
  flex: 1 1 auto;
  min-height: 0;
}

/* ---- Left: TOC ---- */
#plans .plans-toc {
  border-right: 1px solid var(--border-hairline);
  background: var(--bg);
  overflow-y: auto;
  padding: 20px 20px 32px;
  min-width: 0;
}
#plans .toc-eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between;
}
#plans .toc-eyebrow .count { color: var(--text-tertiary); }
#plans .toc-search {
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px;
  background: var(--bg-raised);
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  margin-bottom: 18px;
  transition: border-color 120ms ease, background 120ms ease;
}
#plans .toc-search:focus-within {
  border-color: var(--brand-500);
  background: var(--bg);
}
#plans .toc-search input[type="search"] {
  flex: 1; min-width: 0;
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; outline: 0;
  font-family: var(--font-sans); font-size: 13px;
  color: var(--text-strong);
  padding: 9px 0;
}
#plans .toc-search input[type="search"]::placeholder {
  color: var(--text-tertiary);
  font-family: var(--font-sans);
}
#plans .toc-search input[type="search"]::-webkit-search-cancel-button { display: none; }
#plans .toc-search-clear {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0;
  color: var(--text-tertiary);
  font-size: 14px; line-height: 1;
  padding: 2px 4px; cursor: pointer;
  visibility: hidden;
  flex-shrink: 0;
}
#plans .toc-search input[type="search"]:not(:placeholder-shown) + .toc-search-clear { visibility: visible; }
#plans .toc-search-clear:hover { color: var(--text); }
#plans .toc-tree { display: flex; flex-direction: column; gap: 2px; }
#plans .toc-node {
  display: grid; grid-template-columns: 14px 1fr auto;
  gap: 10px; align-items: center;
  padding: 8px 8px;
  border-radius: 3px;
  font-family: var(--font-serif); font-size: 15px; font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-strong);
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: left;
}
#plans .toc-node:hover { background: var(--bg-raised); }
#plans .toc-node .chev { color: var(--text-secondary); font-size: 10px; transition: transform 120ms ease; }
#plans .toc-node.collapsed .chev { transform: rotate(-90deg); }
#plans .toc-node .num { color: var(--text-tertiary); font-size: 10px; }
#plans .toc-child { padding-left: 22px; display: flex; flex-direction: column; gap: 0; margin-bottom: 12px; }
#plans .toc-child.collapsed { display: none; }
#plans .toc-leaf {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 10px; align-items: center;
  padding: 7px 8px 7px 10px;
  border-radius: 3px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  border: 0;
  border-left: 2px solid transparent;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  width: 100%; min-width: 0;
  text-align: left;
  font: inherit;
  font-family: var(--font-mono);
}
#plans .toc-leaf:hover { background: var(--bg-raised); color: var(--text); }
#plans .toc-leaf .id { color: var(--text-tertiary); letter-spacing: 0.02em; flex: 0 0 auto; }
#plans .toc-leaf .name {
  font-family: var(--font-sans); font-size: 13px;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
#plans .toc-leaf .status {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--paper-300);
  flex: 0 0 auto;
}
#plans .toc-leaf .status.ready { background: var(--ok-500); }
#plans .toc-leaf .status.active { background: var(--brand-500); }
#plans .toc-leaf.on {
  background: var(--bg-raised);
  border-left-color: var(--brand-500);
  color: var(--text-strong);
}
#plans .toc-leaf.on .id { color: var(--brand-700); }
[data-theme="dark"] #plans .toc-leaf.on .id { color: var(--brand-300); }

#plans .toc-empty {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-tertiary);
  padding: 8px 10px;
  font-style: italic;
}

/* ---- Center: stage ---- */
#plans .plans-stage {
  background: var(--bg-sunken);
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  overflow: hidden;
}
#plans .stage-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-hairline);
  flex: 0 0 auto;
}
#plans .stage-toolbar .group {
  display: flex; align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
#plans .stage-toolbar .group .seg {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg);
  border: 0; padding: 6px 10px;
  cursor: not-allowed;
  opacity: 0.55;
}
#plans .stage-toolbar .group .seg + .seg { border-left: 1px solid var(--border); }
#plans .stage-toolbar .group .seg.on { color: var(--text-strong); background: var(--bg-raised); opacity: 1; cursor: default; }
#plans .stage-toolbar .spacer { flex: 1; }
#plans .stage-toolbar .sheet-pick {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 4px;
  padding: 6px 10px;
  cursor: default;
}
#plans .stage-toolbar .sheet-pick.has-pick { color: var(--text); }
#plans .stage-toolbar .sheet-pick .id { font-weight: 500; color: var(--text-strong); }
#plans .stage-toolbar .sheet-pick .of { color: var(--text-tertiary); }
#plans .stage-area {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  background:
    linear-gradient(var(--paper-200) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--paper-200) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bg-sunken);
  display: grid; place-items: center;
  padding: 32px;
  min-height: 0;
}
[data-theme="dark"] #plans .stage-area {
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bg-sunken);
}

#plans .stage-empty {
  font-family: var(--font-sans); font-size: 14px;
  color: var(--text-tertiary);
  text-align: center;
  max-width: 380px;
  line-height: 1.6;
}
#plans .stage-empty .glyph {
  display: block;
  font-size: 32px; line-height: 1;
  color: var(--text-tertiary);
  opacity: 0.4;
  margin-bottom: 14px;
}
#plans .stage-empty strong {
  display: block;
  font-family: var(--font-serif); font-weight: 500;
  font-size: 22px; letter-spacing: -0.005em;
  color: var(--text);
  text-transform: none;
  margin-bottom: 10px;
}

/* ---- 3c-ii-a: real drawing sheet rendered into the stage ---- */
#plans .plans-sheet-wrap {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
#plans .plans-sheet {
  position: relative;
  background: var(--paper-50);
  border: 1px solid var(--paper-300);
  box-shadow: var(--shadow-2);
  width: min(100%, 1100px);
  max-height: 100%;
  aspect-ratio: 1.5;
  overflow: hidden;
  border-radius: 1px;
}
[data-theme="dark"] #plans .plans-sheet {
  background: #F1EEE6;
  border-color: #2A2622;
}
#plans .plans-sheet-stage {
  position: absolute; inset: 0;
  transform-origin: 0 0;
  transition: transform 80ms ease-out;
  /* Drag-pan disables the transition mid-gesture via .panning. */
}
#plans .plans-sheet.panning .plans-sheet-stage { transition: none; }
#plans .plans-sheet { cursor: grab; }
#plans .plans-sheet.panning { cursor: grabbing; }
#plans .plans-sheet-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: opacity 200ms ease-out;
  user-select: none; -webkit-user-drag: none;
  /* Pass clicks through to the polygon SVG layered above. Matches the
     Build Center modal pattern (.dwg-modal-canvas img). Without this the
     image silently absorbs every click despite the SVG being on top in DOM
     order — Chrome's compositor hit-test treats the painted PNG as the
     winning surface unless we explicitly opt it out. */
  pointer-events: none;
}
#plans .plans-sheet[data-loading] .plans-sheet-img { opacity: 0; }
#plans .plans-sheet-skeleton {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--paper-400);
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.08em;
  pointer-events: none;
}
#plans .plans-sheet[data-loading] .plans-sheet-skeleton { display: flex; }
#plans .plans-sheet-skel-id {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 28px; letter-spacing: -0.005em;
  color: var(--paper-500);
  text-transform: none;
}
[data-theme="dark"] #plans .plans-sheet-skel-id { color: rgba(20,40,63,0.45); }
[data-theme="dark"] #plans .plans-sheet-skeleton { color: rgba(20,40,63,0.5); }
#plans .plans-sheet[data-loading="err"] .plans-sheet-skel-hint::after {
  content: " — couldn’t load.";
  color: var(--caution-700);
}
#plans .plans-sheet-poly {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
#plans .plans-sheet-poly .poly-hit-group { pointer-events: all; cursor: pointer; }
#plans .plans-sheet-poly .poly-region {
  fill: rgba(0,180,160,0); stroke: rgba(0,180,160,0);
  transition: fill 120ms ease, stroke 120ms ease;
}
/* No hover highlight — Chris's preference (2026-05-14). Polygons stay
   invisible; click discovery is via the cursor:pointer change on the
   .poly-hit-group, not via a paint cue. */
/* Stage hint — quiet preamble copy on the left of the toolbar */
#plans .stage-toolbar .stage-hint {
  font-family: var(--font-sans); font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.4;
  max-width: 460px;
  margin-right: 8px;
}
#plans .stage-toolbar .stage-hint[hidden] { display: none; }

/* Primary CTA — "Open Drawing ↗" routes to viewer.html in a new tab */
#plans .stage-toolbar .open-dwg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper-50);
  background: var(--brand-700);
  border: 1px solid var(--brand-700);
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
  margin-left: 6px;
}
#plans .stage-toolbar .open-dwg-btn:hover {
  background: var(--brand-600); border-color: var(--brand-600);
}
[data-theme="dark"] #plans .stage-toolbar .open-dwg-btn {
  background: var(--brand-500); border-color: var(--brand-500);
}
[data-theme="dark"] #plans .stage-toolbar .open-dwg-btn:hover {
  background: var(--brand-400); border-color: var(--brand-400);
}
#plans .stage-toolbar .open-dwg-btn .gly { font-family: var(--font-sans); font-size: 12px; opacity: 0.9; }
#plans .stage-toolbar .fit-btn {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  margin-left: 6px;
}
#plans .stage-toolbar .fit-btn:hover { background: var(--bg-raised); }
#plans .plans-crumbs span:not(.sec):not(.sep):not(.here) {
  color: var(--text-secondary);
}

#plans .stage-card {
  background: var(--bg);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-2);
  color: var(--text);
  width: min(720px, 100%);
  padding: 36px 40px;
  text-align: left;
  border-radius: 2px;
}
#plans .stage-card .eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 12px;
  display: flex; gap: 14px; align-items: center;
}
#plans .stage-card .eyebrow .sep { opacity: 0.45; }
#plans .stage-card h2 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 28px; letter-spacing: -0.01em; line-height: 1.2;
  margin: 0 0 6px;
  color: var(--text-strong);
}
#plans .stage-card .dwg-id {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 22px;
}
#plans .stage-card .synopsis {
  font-family: var(--font-serif); font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 24px;
  text-wrap: pretty;
}
#plans .stage-card .stub-note {
  font-family: var(--font-sans); font-size: 13px;
  color: var(--text-secondary);
  padding: 12px 14px;
  background: var(--bg-raised);
  border: 1px dashed var(--border);
  border-radius: 3px;
  line-height: 1.55;
  text-wrap: pretty;
}
#plans .stage-card .stub-note strong { color: var(--text); font-weight: 500; }
#plans .stage-card .stub-actions {
  margin-top: 22px;
  display: flex; gap: 8px;
}
#plans .stage-card .stub-btn {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px 12px;
  cursor: pointer;
}
#plans .stage-card .stub-btn:hover { background: var(--bg-raised); }
#plans .stage-card .stub-btn.primary {
  background: var(--brand-700); color: var(--paper-50); border-color: var(--brand-700);
}
#plans .stage-card .stub-btn.primary:hover { background: var(--brand-600); border-color: var(--brand-600); }
[data-theme="dark"] #plans .stage-card .stub-btn.primary {
  background: var(--brand-500); color: var(--paper-50); border-color: var(--brand-500);
}

/* ---- Right: rail ---- */
#plans .plans-rail {
  border-left: 1px solid var(--border-hairline);
  background: var(--bg);
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  overflow: hidden;
}
#plans .rail-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-hairline);
  flex: 0 0 auto;
}
#plans .rail-tab {
  flex: 1;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  padding: 14px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
#plans .rail-tab:hover { color: var(--text); }
#plans .rail-tab.on { color: var(--text-strong); border-bottom-color: var(--brand-500); }
#plans .rail-tab .count {
  display: inline-block;
  font-size: 9px; letter-spacing: 0.06em;
  margin-left: 5px;
  padding: 1px 5px; border-radius: 999px;
  background: var(--bg-raised); color: var(--text-tertiary);
}
#plans .rail-tab.on .count { background: var(--brand-100); color: var(--brand-700); }
[data-theme="dark"] #plans .rail-tab.on .count { color: var(--brand-300); }
#plans .rail-tab.is-soon { opacity: 0.45; cursor: default; }
#plans .rail-tab.is-soon:hover { color: var(--text-tertiary); }
#plans .rail-body {
  padding: 18px 20px 28px;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
#plans .rail-empty {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  text-align: center;
  padding: 48px 12px;
  line-height: 1.6;
}
#plans .rail-empty .glyph {
  display: block;
  font-size: 22px; opacity: 0.4;
  margin-bottom: 10px;
}

#plans .rail-meta-block { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border-hairline); }
#plans .rail-meta-block:last-child { border-bottom: 0; padding-bottom: 0; }
#plans .rail-meta-eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
#plans .rail-meta-block h3 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 18px; letter-spacing: -0.005em; line-height: 1.3;
  margin: 0 0 8px;
  color: var(--text-strong);
}
#plans .rail-meta-block p {
  font-family: var(--font-serif); font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}
#plans .rail-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin-top: 4px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
#plans .rail-stats .kv strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 18px; letter-spacing: -0.005em;
  color: var(--text-strong);
  margin-top: 2px;
  font-weight: 500;
}

/* ---- Responsive: collapse rails below 1280px ---- */
@media (max-width: 1280px) {
  #plans .plans-frame { grid-template-columns: 240px minmax(0, 1fr) 300px; }
}
@media (max-width: 1100px) {
  #plans .plans-frame { grid-template-columns: 220px minmax(0, 1fr); }
  #plans .plans-rail { display: none; }
}
@media (max-width: 820px) {
  #plans .plans-appbar { padding: 10px 16px; gap: 8px; flex-wrap: wrap; }
  #plans .plans-crumbs { display: none; }
  #plans .cross-nav { margin: 0; }
  #plans .plans-frame { grid-template-columns: minmax(0, 1fr); }
  #plans .plans-toc { display: none; }
  #plans .stage-card { padding: 24px 22px; }
  #plans .stage-card h2 { font-size: 22px; }
}