/* DeWoods additions on top of the shared theme. */

/* ---------- the Woods palette, mapped onto the shared theme tokens (theme.css keeps the layout; these win by order) ----------
   Dark: background #151A18, surface #202824, raised #2B3530, text #F2F3E9, secondary #B8C3B8; action #FF8A3D with dark ink,
   positive #A8D878, caution #F2C66D, critical #FF8D83. Light: background #F2F3EA, surface #FFFFFF, raised #E5EADF,
   text #17221B, secondary #4D5F52; action #A9430B with white ink, positive #356620, caution #775300, critical #A32922.
   --s3/--s4, borders, --dim, hovers and the soft tints are derived steps; the --wd-* tokens color the home page artwork. */
:root {
  --bg:#151A18; --s1:#202824; --s2:#2B3530; --s3:#354039; --s4:#3F4B44;
  --border:#3F4B44; --border-soft:#2B3530;
  --text:#F2F3E9; --muted:#B8C3B8; --dim:#8E9A8F;
  --accent:#FF8A3D; --accent-hover:#FFA061; --accent-ink:#1A120B; --accent-soft:rgba(255,138,61,.16);
  --glow:0 0 0 3px rgba(255,138,61,.38);
  --good:#A8D878; --good-soft:rgba(168,216,120,.16);
  --warn:#FF8D83; --warn-soft:rgba(255,141,131,.16);
  --review:#F2C66D; --review-soft:rgba(242,198,109,.16);
  --shadow:0 12px 32px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  --wd-band-top:#0D1311; --wd-far:#2C4839; --wd-mid:#2E5642; --wd-near:#16281F; --wd-trunk:#3A2D22; --wd-leaf:#5C8C68;
  --wd-glow:#FFA35C; --wd-glow-a:.24; --wd-shaft:#FFD9B5; --wd-shaft-a:.12; --wd-title-shadow:rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#F2F3EA; --s1:#FFFFFF; --s2:#E5EADF; --s3:#D9E0D2; --s4:#CCD5C5;
    --border:#C8D1C2; --border-soft:#DDE3D7;
    --text:#17221B; --muted:#4D5F52; --dim:#5E6E63;
    --accent:#A9430B; --accent-hover:#8F3708; --accent-ink:#FFFFFF; --accent-soft:rgba(169,67,11,.12);
    --glow:0 0 0 3px rgba(169,67,11,.3);
    --good:#356620; --good-soft:rgba(53,102,32,.12);
    --warn:#A32922; --warn-soft:rgba(163,41,34,.1);
    --review:#775300; --review-soft:rgba(119,83,0,.12);
    --shadow:0 12px 32px rgba(23,34,27,.14), 0 2px 6px rgba(23,34,27,.08);
    --wd-band-top:#D6E1CE; --wd-far:#C4D6BD; --wd-mid:#98B994; --wd-near:#5C8B66; --wd-trunk:#8A7052; --wd-leaf:#7FAA84;
    --wd-glow:#FFB27A; --wd-glow-a:.5; --wd-shaft:#FFF3E2; --wd-shaft-a:.7; --wd-title-shadow:rgba(255,255,255,.6);
  }
}

/* ---------- the home type scale and motion budget, on every page (identity pass, 2026-09-08) ----------
   body 16 px, secondary 14 px, section titles 20 px, table headers 13 px uppercase, tabular numerals on every number,
   state transitions at most 150 ms; reduced motion is instant. Dense table bodies stay 14 px; phone inputs are 16 px
   (below 900 px, further down). Financial surfaces are opaque. */
:root { --dur: .15s; }
@media (prefers-reduced-motion: reduce) { :root { --dur: 0s; } }
body { font-size: 16px; line-height: 1.45; }
h1 { font-size: 28px; line-height: 1.15; letter-spacing: -.015em; }
h2 { font-size: 20px; }
h3 { font-size: 13px; }
.small, .secondary { font-size: 14px; } .tiny { font-size: 13px; }
.caps, .f > span, label.f { font-size: 12px; }
.pill { font-size: 13px; line-height: 20px; }
.tag, .st { font-size: 13px; }
.nav a { font-size: 14px; } .who { font-size: 14px; }
button, .btn { font-size: 14px; } button.small, .btn.small { font-size: 13px; }
input, select, textarea { font-size: 14px; }
table { font-size: 14px; }
th { font-size: 13px; }
.num, td.num, th.num, .money, .chip .v, .strip .k .v, .hero, .jobstrip .k .v, table.ladder td.num, .bar .num { font-variant-numeric: tabular-nums; }
.chip .v { font-size: 18px; } .chip .l { font-size: 11px; }
.card { background: var(--s1); }               /* numbers never sit on a translucent surface */
.login h1 { font-size: 28px; }
.login p.muted { font-size: 16px; }
.bar { font-size: 14px; grid-template-columns: 170px 1fr 120px; }
.bar .num { text-align: right; }
.toast { font-size: 14px; }
.msg { font-size: 14px; }
.tasklist li { font-size: 14px; }
.q { font-size: 14px; }
.approval .small { font-size: 14px; }
a.woods { color: var(--accent); text-decoration: none; border-bottom: 1px dashed var(--accent); }
a.woods:hover { border-bottom-style: solid; }
.bad { color: var(--warn); } .goodtxt { color: var(--good); } .warntxt { color: var(--review); }
.chip.bad { border-color: var(--warn); } .chip.bad .v { color: var(--warn); }
.joblayout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 32vw, 400px); gap: 14px; align-items: start; }
.jobmain { min-width: 0; }
/* view changes may fade, never slide; reduced motion makes it instant. No loops anywhere on this page. */
:root { --dur-view: 150ms; }
@media (prefers-reduced-motion: reduce) { :root { --dur-view: 0ms; } }
.jobmain, .chatpane { animation: viewin var(--dur-view) ease-out 1; }
@keyframes viewin { from { opacity: 0; } to { opacity: 1; } }
/* head: identity, the committed numbers, save and connection state as text; opaque so numbers never sit on anything moving */
.jobhead { grid-column: 1 / -1; background: var(--s1); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 10px 14px 8px; }
.namerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.namerow h1 { margin: 2px 0 0; min-width: 0; overflow-wrap: anywhere; }
.idline .pill { vertical-align: 1px; }
.viewswitch { display: none; }
.jobstrip { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.jobstrip .k .l { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; white-space: nowrap; }
.jobstrip .k .v { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.jobstrip .k .v .sub { font-size: 14px; font-weight: 500; color: var(--muted); }
.jobstrip .k.warntxt .v, .jobstrip .k.warntxt .v .sub { color: var(--review); }
.jobstrip .k.goodtxt .v { color: var(--good); } .jobstrip .k.goodtxt .v .sub { color: var(--muted); }
.jobstrip .k.bad .v, .jobstrip .k.bad .v .sub { color: var(--warn); }
.jobstrip .k.save .v { font-size: 14px; font-weight: 500; color: var(--muted); }
.jobstate { margin-top: 6px; color: var(--review); }
/* the draft: staged edits, their save state, and the buttons that move them (always by hand) */
.stagebar { margin-top: 8px; border-left: 3px solid var(--accent); background: var(--s2); padding: 8px 10px; border-radius: 6px; display: flex; flex-direction: column; gap: 6px; }
.stagebar.saving { border-left-color: var(--muted); }
.stagebar.unknown, .stagebar.conflict { border-left-color: var(--review); background: var(--review-soft); }
.stagebar .stagedlist { overflow-wrap: anywhere; }
.stagebar ul.changes { margin: 0; padding-left: 18px; }
/* pending edits are never color alone: a dashed border and the word "pending" next to the label */
label.f.pending > span::after, .f.pending > span::after { content: " · pending"; color: var(--review); text-transform: none; letter-spacing: 0; }
label.f.pending input, label.f.pending select, .f.pending .stack { border: 2px dashed var(--review); border-radius: 6px; transition: border-color var(--dur-view); }
table.lines tr.staged td, table.lines tr.newline td { background: var(--review-soft); }
table.lines tr.staged input, table.lines tr.staged select, table.lines tr.newline input, table.lines tr.newline select { border: 2px dashed var(--review); }
table.lines tr.deleting td, table.lines tr.deleting td input { text-decoration: line-through; color: var(--muted); }
table.lines tr.deleting td.cat, table.lines tr.deleting td.sum { border-left: 3px dashed var(--review); }
.actnote { color: var(--review); }
.factgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; margin-top: 8px; }
.factgrid .f input, .factgrid .f select { width: 100%; }
.f input[type=checkbox] { width: auto; }
table.ladder td { padding: 4px 8px; border-bottom: 1px solid var(--border-soft); }
table.ladder tr.m3 td { background: var(--s2); }
table.lines input, table.lines select { font-size: 14px; padding: 4px 6px; }
table.lines td.desc input { width: 100%; }
.w-qty { width: 60px; } .w-cost { width: 100px; } .w-amt { width: 108px; } .w-reason { width: 140px; } .w-label { width: 120px; } .w-note { min-width: 240px; }
/* 900 to 1100 px (a tablet, a narrow window): one column, Dewey below the work, so the cost table keeps every column readable */
@media (min-width: 900px) and (max-width: 1100px) {
  .joblayout { grid-template-columns: minmax(0, 1fr); }
  .chatpane { position: static; height: 70vh; }
}
@media (min-width: 900px) {
  table.lines { min-width: 820px; }
  table.lines td.desc { min-width: 180px; }
}
table.lines td.sum { display: none; }
table.lines tr.missing td { background: rgba(255, 138, 61, .06); }
table.lines tr.computed td { color: var(--muted); font-style: italic; }
table.lines tr.addrow td { border-top: 2px solid var(--border); padding-top: 8px; }
.approval { border-left: 3px solid var(--accent); padding: 6px 10px; margin: 6px 0; background: var(--s2); border-radius: 6px; }
.tasklist { margin: 0; padding-left: 0; list-style: none; } .tasklist li { padding: 5px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.chatpane { position: sticky; top: 58px; display: flex; flex-direction: column; height: calc(100vh - 76px); background: var(--s1); border: 1px solid var(--border-soft); border-radius: var(--r-lg); overflow: hidden; }
.chathead { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); }
.msgs { flex: 1; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 96%; border-radius: 10px; padding: 8px 10px; background: var(--s2); font-size: 14px; }
.msg.user { align-self: flex-end; background: var(--accent-soft); }
.msg.local { border-left: 3px solid var(--review); }
.chatstate { padding: 6px 4px; }
.chathead .small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewswitch .mark { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: 1px; }
.alpine-fail { margin: 16px 18px 0; padding: 12px 14px; border: 1px solid var(--review); border-left-width: 4px; border-radius: var(--r-lg); background: var(--s1); font-size: 16px; }
.msg .body ul { margin: 4px 0 4px 18px; }
.proposal { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.foot { border-top: 1px solid var(--border-soft); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.foot textarea { width: 100%; resize: vertical; font: inherit; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* ---------- phones and narrow tablets (below 900 px): one view at a time, Work or Dewey, with the head always on screen ---------- */
@media (max-width: 899px) {
  body { font-size: 16px; }
  .small { font-size: 14px; } .tiny { font-size: 13px; }
  .pill { font-size: 13px; line-height: 22px; padding: 2px 10px; }
  .f > span, label.f, .chip .l, th { font-size: 12px; }
  h1 { font-size: 18px; } h2 { font-size: 16px; }
  input, select, textarea { font-size: 16px; padding: 10px 10px; min-height: 44px; }
  select { padding-right: 26px; }
  input[type=checkbox], input[type=radio] { width: 24px; height: 24px; min-height: 0; padding: 0; }
  button, .btn { font-size: 16px; min-height: 44px; padding: 8px 14px; }
  button.small, .btn.small { font-size: 14px; min-height: 40px; padding: 6px 12px; }
  button.ghost.small { min-height: 36px; }
  .seg button { min-height: 38px; font-size: 14px; }
  .chip .v { font-size: 18px; }
  .msg { font-size: 16px; max-width: 100%; }
  .alpine-fail { margin: 10px 10px 0; font-size: 16px; }

  .page.jobpage { padding: 0 0 24px; }
  .joblayout { display: block; }
  .joblayout[data-view="chat"] { display: flex; flex-direction: column; height: calc(100vh - 44px); height: calc(100dvh - 44px); }
  .jobhead { position: sticky; top: 44px; z-index: 30; flex: none; border-radius: 0; border-width: 0 0 1px; padding: 8px 10px 6px; }
  .namerow h1 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .idline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .viewswitch { display: inline-flex; flex: none; background: var(--s2); border: 1px solid var(--border); border-radius: 10px; padding: 2px; gap: 2px; }
  .viewswitch button { min-height: 44px; min-width: 76px; padding: 6px 12px; border: none; background: transparent; color: var(--muted); font-size: 15px; font-weight: 600; border-radius: 8px; justify-content: center; }
  .viewswitch button.on { background: var(--s4); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
  /* the strip flows as text: label, value, note; two lines on a 390 px phone */
  .jobstrip { display: block; margin-top: 6px; padding-top: 6px; line-height: 1.35; }
  .jobstrip .k { display: inline; margin-right: 12px; }
  .jobstrip .k .l { display: inline; font-size: 11px; margin-right: 4px; }
  .jobstrip .k .v { display: inline; font-size: 16px; }
  .jobstrip .k .v .sub { display: inline; font-size: 13px; }
  .jobstrip .k.save { display: block; margin-top: 2px; }
  .jobstrip .k.save .v { font-size: 13px; }
  .jobstate { font-size: 14px; }
  .jobmain { padding: 10px 10px 0; }
  .joblayout[data-view="chat"] .jobmain { display: none; }
  .joblayout[data-view="work"] .chatpane { display: none; }
  .joblayout[data-view="chat"] .chatpane { position: static; flex: 1 1 auto; min-height: 0; height: auto; border-radius: 0; border-width: 0; }
  .chatpane .foot { padding: 8px 10px 10px; }
  .hide-m { display: none !important; }
  .factgrid { grid-template-columns: 1fr; }
  .pbrow select { width: auto; flex: 1 1 40%; }
  .pbrow button { flex: 1 1 45%; justify-content: center; }
  .card { padding: 12px 12px; }
  .chips .chip { flex: 1 1 40%; }

  /* cost lines: one card per line, tap the summary to open the editor; nothing scrolls sideways */
  table.lines, table.lines tbody { display: block; }
  table.lines thead { display: none; }
  table.lines tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 4px 0 12px; border-bottom: 1px solid var(--border); }
  table.lines tr.missing td { background: transparent; }
  table.lines tr.missing { background: rgba(255, 138, 61, .06); }
  table.lines td { display: block; padding: 0; border: 0; }
  table.lines td.sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; grid-column: 1 / -1; min-height: 44px; padding: 4px 0; cursor: pointer; }
  table.lines td.sum .cat { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  table.lines td.sum .val { font-variant-numeric: tabular-nums; white-space: nowrap; }
  table.lines td.sum .tw { color: var(--muted); }
  table.lines tr.closed td:not(.sum) { display: none; }
  table.lines td.cat { grid-column: 1 / -1; }
  table.lines tr:not(.addrow) td.cat { display: none; }
  table.lines td.desc { grid-column: 1 / -1; }
  table.lines td.act { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
  table.lines td.act button { min-width: 44px; justify-content: center; }
  .chatpane .foot .row { justify-content: flex-end; }
  .stagebar .row { flex-direction: column; align-items: stretch; }
  .stagebar .row button { width: 100%; justify-content: center; }
  .chatpane .foot .row button.primary { flex: 1 1 auto; justify-content: center; }
  .chatpane .foot textarea { min-height: 64px; }
  table.lines td[data-l]::before { content: attr(data-l); display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
  table.lines input, table.lines select { width: 100%; font-size: 16px; padding: 10px; min-height: 44px; }
  table.lines .w-reason { margin-top: 6px; }
  table.lines tr.computed { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; }
  table.lines tr.computed td:empty { display: none; }
  table.lines tr.addrow { border-top: 2px solid var(--border); border-bottom: 0; }
  table.lines tr.addrow td { padding-top: 0; }
  .w-note { min-width: 0; width: 100%; }
}
/* a phone with the keyboard up: keep the numbers, drop the notes under them so the composer keeps its room */
@media (max-width: 899px) and (max-height: 520px) {
  .jobstrip .k .v .sub, .jobhead > .small:not(.idline):not(.jobstate) { display: none; }
}
.pbtable td.num, .pbtable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.bars { display: flex; flex-direction: column; gap: 4px; }
.bar { display: grid; grid-template-columns: 160px 1fr 110px; gap: 8px; align-items: center; font-size: 12px; }
.bar .track { height: 10px; background: var(--s3); border-radius: 5px; overflow: hidden; } .bar .fill { height: 100%; background: var(--accent); }

.prov { margin-top: 2px; overflow-wrap: anywhere; }
tr.conflictrow td { background: var(--warn-soft); }

/* ---------------------------------------------------------------- Pricebook rework (task 3.1) and Catalog (task 3.2), 2026-09-10 */
.pb-head { justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.pb-controls { gap: 8px; flex-wrap: wrap; align-items: center; min-width: 0; max-width: 100%; }
.tabs { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--line, #cfd6d3); border-radius: 8px; overflow: hidden; }
.tabs button { border: 0; border-radius: 0; background: transparent; padding: 6px 10px; cursor: pointer; }
.tabs button.on { background: var(--accent, #2f6f5e); color: #fff; }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.pb-grid input { width: 100%; max-width: 130px; box-sizing: border-box; }
.pb-grid td.actions { white-space: nowrap; }
.pb-grid tr.editing td { background: var(--soft, rgba(47,111,94,.08)); }
.pb-grid tr.detail td { background: var(--soft, rgba(47,111,94,.05)); border-top: 0; }
.pb-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pb-detail label { display: inline-block; margin-right: 8px; }
.pb-detail label input { width: 160px; }
.pill.small { font-size: .75em; }
@media (max-width: 899px) {
  .pb-grid thead { display: none; }
  .pb-grid, .pb-grid tbody, .pb-grid tr, .pb-grid td { display: block; width: 100%; box-sizing: border-box; }
  .pb-grid tbody { margin-bottom: 8px; }
  .pb-grid tr { margin-bottom: 0; }
  .pb-grid tr { border: 1px solid var(--line, #cfd6d3); border-radius: 10px; margin-bottom: 8px; padding: 6px 8px; }
  .pb-grid tr.detail { margin-top: -10px; border-top: 0; border-radius: 0 0 10px 10px; }
  .pb-grid td { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; border: 0; text-align: left; }
  .pb-grid td.num { text-align: right; }
  .pb-grid td[data-label]::before { content: attr(data-label); color: var(--muted, #667); font-size: .85em; flex: 0 0 auto; }
  .pb-grid td[data-label=""]::before { content: none; }
  .pb-grid td:first-child { flex-direction: column; align-items: flex-start; }
  .pb-grid input { max-width: 55%; }
  .pb-detail { grid-template-columns: 1fr; }
}
.cat-layout { display: grid; grid-template-columns: 240px 1fr; gap: 12px; align-items: start; }
.cat-filters .facet { margin: 4px 0; }
.cat-filters .facet label { display: block; padding: 1px 0 1px 8px; }
.cat-filters summary { cursor: pointer; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cat-card { padding: 10px; }
.cat-prices { display: flex; gap: 14px; flex-wrap: wrap; font-size: 1.05em; }
.cat-prices b { font-size: 1.1em; }
.cat-img { height: 90px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.cat-img img { max-height: 90px; max-width: 100%; }
@media (max-width: 899px) { .cat-layout { grid-template-columns: 1fr; } .cat-grid { grid-template-columns: 1fr; } }

.pb-used { margin-top: 4px; }
.pb-mapgrid input { max-width: 120px; }
@media (max-width: 899px) { .pb-mapgrid thead { display: none; } .pb-mapgrid, .pb-mapgrid tbody, .pb-mapgrid tr, .pb-mapgrid td { display: block; width: 100%; } .pb-mapgrid td { display: flex; justify-content: space-between; gap: 8px; border: 0; padding: 2px 0; } .pb-mapgrid td[data-label]::before { content: attr(data-label); color: var(--muted, #667); } .pb-mapgrid td[data-label=""]::before { content: none; } .pb-mapgrid tr { border-top: 1px solid var(--line, #cfd6d3); padding: 4px 0; } }

/* ---------- field capture (Task 2.3): the missing list as chips, photos, push to talk ---------- */
.vchips { gap: 6px; }
.vchip { font-size: 12px; line-height: 20px; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: var(--s2); }
.vchip.have { border-color: var(--good); color: var(--good); background: var(--good-soft); }
.vchip.missing { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.capture label.f.missing > span { color: var(--warn); }
.capture textarea { width: 100%; resize: vertical; font: inherit; }
.ptt { border-radius: 999px; padding: 8px 16px; border: 2px solid var(--accent); background: var(--s2); color: inherit; font: inherit; touch-action: none; user-select: none; }
.ptt.on { background: var(--accent); color: var(--accent-ink); }
.photogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 8px; }
.photo { margin: 0; background: var(--s2); border-radius: 8px; overflow: hidden; }
.photo img { display: block; width: 100%; height: 110px; object-fit: cover; }
.photo .ph-wait { height: 110px; display: flex; align-items: center; justify-content: center; color: var(--muted); border: 1px dashed var(--border); }
.photo figcaption { padding: 4px 6px; overflow-wrap: anywhere; }
label.btn { display: inline-flex; align-items: center; cursor: pointer; }
label.btn.disabled { opacity: .5; pointer-events: none; }
.queuecard { border-left: 3px solid var(--review); }
@media (max-width: 899px) { .ptt { width: 100%; padding: 14px; font-size: 16px; } .capture .row button, .capture label.btn { width: 100%; justify-content: center; } }

/* Long status explanations must wrap inside the page on a phone. */
.row > .pill { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }

/* Keep the account controls reachable when the desktop navigation needs another row.
   The phone header keeps its existing single-row horizontal navigation. */
@media screen and (min-width: 900px) {
  .topbar { height: auto; min-height: 44px; flex-wrap: wrap; }
  .topbar .nav { flex-wrap: wrap; }
}
@media screen and (min-width: 900px) and (max-width: 1040px) {
  .topbar { padding-top: 6px; padding-bottom: 6px; row-gap: 6px; }
  .topbar .nav { order: 1; flex: 0 0 100%; }
}

/* ---------- thread page (phase 6.6): focus line, task-state panel, four visibly distinct states ----------
   The four states are never color alone: each carries its own label text, its own icon glyph and its own
   border style (solid / dashed / dotted / double), so a person who cannot see color still reads which is
   which. "Saved" is reachable only through m.applied coming back true from the server -- nothing here
   ever paints that class from a client-side guess. */
.threadlayout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 32vw, 420px); gap: 14px; align-items: start; }
.threadmain { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.focusline { grid-column: 1 / -1; background: var(--s1); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 10px 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.focusline .crumb { font-weight: 650; }
.focusline .crumb:not(:last-child)::after { content: " \2192"; color: var(--muted); font-weight: 400; margin-left: 8px; }
.focusline .objective { color: var(--muted); }
.focusline .noFocus { color: var(--dim); font-style: italic; }
.statepanel { position: sticky; top: 58px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 76px); overflow-y: auto; }
.statepanel h3 { margin: 0 0 6px; }
.factcard { border-radius: 10px; padding: 8px 10px; background: var(--s2); border: 1px solid var(--border-soft); margin-bottom: 6px; }
.factcard:last-child { margin-bottom: 0; }
.factcard .fclabel { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 650; }
.factcard .fcicon { display: inline-block; width: 1.1em; text-align: center; }
.factcard .fcbody { margin-top: 4px; }
.factcard .fcsource { color: var(--dim); }
/* existing information: what was already true before this conversation touched it */
.factcard.existing { border-style: solid; border-color: var(--border); }
.factcard.existing .fclabel { color: var(--muted); }
/* suggested: Dewey named it, nobody chose or applied it yet */
.factcard.suggested { border-style: dashed; border-width: 2px; border-color: var(--review); background: var(--review-soft); }
.factcard.suggested .fclabel { color: var(--review); }
/* pending: chosen, staged for Apply, still nothing written */
.factcard.pending { border-style: dotted; border-width: 2px; border-color: var(--accent); background: var(--accent-soft); }
.factcard.pending .fclabel { color: var(--accent); }
/* saved: the server confirmed a successful Apply -- never rendered from a client guess */
.factcard.saved { border-style: double; border-width: 3px; border-color: var(--good); background: var(--good-soft); }
.factcard.saved .fclabel { color: var(--good); }
.conflictcard { border-radius: 10px; padding: 8px 10px; background: var(--warn-soft); border: 2px solid var(--warn); margin-bottom: 8px; }
.conflictcard .fclabel { color: var(--warn); font-weight: 650; }
.conflictcard .oldnew { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-top: 2px; }
.conflictcard .oldnew .old { text-decoration: line-through; color: var(--dim); }
.conflictcard .oldnew .arrow { color: var(--muted); }
.receipt { border-radius: 10px; padding: 8px 10px; background: var(--good-soft); border: 3px double var(--good); margin-top: 6px; }
.receipt .fclabel { color: var(--good); font-weight: 650; }
.receipt ul { margin: 4px 0 0 18px; }
.receipt .kept { color: var(--muted); }
.emptypanel { color: var(--dim); font-style: italic; }
@media (min-width: 900px) and (max-width: 1100px) {
  .threadlayout { grid-template-columns: minmax(0, 1fr); }
  .statepanel { position: static; height: auto; max-height: none; }
}
/* mobile: same panel, moved below the chat as an expandable card instead of a fixed side rail --
   this is the only difference the acceptance text calls for between desktop and phone. */
@media (max-width: 899px) {
  .threadlayout { display: flex; flex-direction: column; }
  .statepanel { position: static; max-height: none; order: 2; }
  .threadmain { order: 1; }
  .statepanel .panelbody[hidden] { display: none; }
}