/* Field app, rethemed to the shop app's perfected design system —
 * same palette, topbar, heading rhythm, card spacing, single 880px column. */
:root {
  --ink:#14181D; --graphite:#1C2128; --panel:#20252C; --line:#2C333C;
  --copper:#B5662F; --copper-br:#C2703D; --steel:#8A9199; --paper:#F5F3EF;
  --green:#2f6b45; --green-t:#a9e8bf; --amber-t:#E8D9C7; --red:#7a3a34; --red-t:#e6b6ac;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --disp:'Space Grotesk', -apple-system, sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--ink); color:var(--paper); font-family:var(--disp); }

/* ---- topbar: identical bones to the shop app ---- */
.topbar { display:flex; align-items:center; column-gap:14px; row-gap:2px; flex-wrap:wrap;
  max-width:880px; margin:0 auto; padding:18px 22px; border-bottom:1px solid var(--line); }
.lockup { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--paper); }
.lockup svg { margin-left:-13px; }
.word { font-family:var(--disp); font-weight:600; font-size:34px; letter-spacing:-.02em; color:var(--paper); }
.fieldtag { font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--copper-br);
  border:1px solid var(--copper); border-radius:5px; padding:2px 7px; align-self:center;
  position:relative; top:3px; }
.topbar-tag { font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--steel); white-space:nowrap; align-self:center; position:relative; top:8px; }
.hamburger { display:flex; flex-direction:column; justify-content:center; gap:5px; margin-left:auto;
  width:42px; height:42px; padding:10px; cursor:pointer; border-radius:8px; }
.hamburger:hover { background:var(--graphite); }
.hamburger span { display:block; height:2px; width:22px; background:var(--paper); border-radius:2px; }

/* ---- right drawer, toggled by the hidden #menu-toggle checkbox (same as shop) ---- */
.menu-toggle { position:absolute; opacity:0; pointer-events:none; }
.scrim { position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; visibility:hidden;
  transition:opacity .2s; z-index:40; }
.drawer { position:fixed; top:0; right:0; height:100vh; width:288px; max-width:84vw;
  background:var(--graphite); border-left:1px solid var(--line);
  padding:18px 16px; display:flex; flex-direction:column; gap:18px;
  transform:translateX(100%); transition:transform .22s ease; z-index:50;
  overflow-y:auto; overflow-x:hidden; }
#menu-toggle:checked ~ .scrim { opacity:1; visibility:visible; }
#menu-toggle:checked ~ .drawer { transform:translateX(0); }
.drawer-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.drawer-x { cursor:pointer; font-size:20px; line-height:1; color:var(--steel); padding:4px 8px;
  border-radius:6px; flex-shrink:0; display:inline-flex; align-items:center; }
.drawer-x:hover { background:var(--ink); color:var(--paper); }
.drawer-account { font-family:var(--disp); font-weight:600; font-size:20px; line-height:1;
  color:var(--paper); text-decoration:none; padding-left:2px; }
.nav { display:flex; flex-direction:column; gap:2px; }
.navlink { display:block; padding:8px 10px; border-radius:8px; color:var(--paper);
  font-size:14px; font-weight:500; text-decoration:none; }
.navlink:hover { background:var(--ink); }
.navlink.active { background:var(--ink); color:var(--copper-br); }
.side-h { font-size:10.5px; font-weight:700; color:var(--steel);
  text-transform:uppercase; letter-spacing:.07em; margin:0 0 8px 2px; }
.side-foot { margin-top:auto; padding-top:14px; border-top:1px solid var(--line); }
.side-foot .powered { font-size:12px; color:var(--steel); margin-bottom:10px; }
.side-foot .powered b { color:var(--paper); }

/* ---- page heading row: h1 left, connection chip right ---- */
.page-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.page-head .conn { flex-shrink:0; position:relative; top:-2px; }
.conn { font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:20px; border:1px solid var(--line); color:var(--steel); white-space:nowrap; }
.conn.online { color:var(--green-t); border-color:var(--green); }
.conn.offline { color:var(--red-t); border-color:var(--red); }
.conn.pending { color:var(--copper-br); border-color:var(--copper); }
.ghostbtn { background:transparent; color:var(--steel); border:1px solid var(--line);
  padding:7px 13px; border-radius:8px; font-size:13px; font-family:var(--disp); cursor:pointer; }
.ghostbtn:hover { color:var(--paper); border-color:var(--steel); }

/* ---- main column: shop app geometry ---- */
.wrap { max-width:880px; margin:0 auto; padding:28px 22px 80px; }
h1 { font-size:25px; margin:-2px 0 6px; font-weight:600; letter-spacing:-.01em; line-height:1.25; }
.sub { color:var(--steel); font-size:15px; margin:0 0 22px; }

/* multi-select chips + GPS + fixed spine chips */
.multirow { display:flex; flex-wrap:wrap; gap:5px; margin:1px 0 2px; }
.multichip { display:inline-block; padding:5px 11px; border:1px solid var(--line); border-radius:16px;
  font-size:12.5px; font-weight:400; color:var(--steel); cursor:pointer; user-select:none;
  /* a chip is a value, not a field label — reset the inherited <label> typography */
  text-transform:none; letter-spacing:normal; margin:0; }
.multichip.on { color:var(--copper-br); border-color:var(--copper); background:#241f16; }
.gpsbtn { background:transparent; color:var(--steel); border:1px solid var(--line); border-radius:8px;
  padding:8px 10px; font-size:12px; cursor:pointer; white-space:nowrap; }
.gpsbtn:hover { color:var(--paper); border-color:var(--steel); }
.nodechip.fixed { opacity:.85; border-style:dashed; }

/* verdict banner: 4-position A-D scale + severity/urgency split (OUTPUT_SPEC) */
.vscale { display:flex; gap:4px; margin:2px 0 8px; }
.vseg { flex:1; text-align:center; font-family:var(--mono); font-size:11px; padding:5px 0;
  border-radius:6px; border:1px solid var(--line); color:var(--steel); opacity:.55; }
.vseg.active { opacity:1; font-weight:700; color:var(--paper); }
.vseg.zA, .vseg.zB { background:#16241b; border-color:var(--green); }
.vseg.zC { background:#241f16; border-color:var(--copper); }
.vseg.zD { background:#241614; border-color:var(--red); }
.vband { font-size:13.5px; margin:0 0 8px; line-height:1.5; }
.vband .basis { display:block; font-family:var(--mono); font-size:10px; color:var(--steel);
  letter-spacing:.04em; margin-top:2px; }
.urgency { font-size:12.5px; color:var(--steel); margin:0 0 10px; }
.urgency b { color:var(--copper-br); letter-spacing:.03em; }
.why.basis { font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; }
.reclabel { font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.06em;
  padding:2px 7px; border-radius:10px; border:1px solid var(--line); margin-right:6px; }
.reclabel.mandatory { color:var(--red-t); border-color:var(--red); }
.reclabel.important { color:var(--copper-br); border-color:var(--copper); }
.reclabel.verification, .reclabel.monitor { color:var(--amber-t); }
.reclabel.no-repair { color:var(--green-t); border-color:var(--green); }

.card { background:var(--graphite); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; margin-bottom:16px; }
.card.intake { padding:16px 16px 14px; margin-top:8px; margin-bottom:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.28); }
.sec { font-size:13px; font-weight:700; color:var(--paper); margin-bottom:10px;
  text-transform:uppercase; letter-spacing:.05em; }
/* sub-group header inside a card — the shop has no equivalent level, so it is
   built from the shop's own .sec vocabulary (sans, bold, uppercase, .05em) one
   step down in size and in steel rather than paper */
.subsec { font-size:11px; font-weight:700; color:var(--steel); text-transform:uppercase;
  letter-spacing:.05em; margin:13px 0 4px; }
.muted { color:var(--steel); font-size:13px; }

/* form typography: identical to the shop intake (sans labels, not mono) */
label { display:block; font-size:11px; font-weight:600; color:var(--steel);
  margin:12px 0 5px; text-transform:uppercase; letter-spacing:.05em; }
.hint { font-size:10.5px; color:var(--steel); margin-top:2px; line-height:1.35; }
.safety { font-size:11px; color:var(--copper-br); margin-top:3px; }
input[type=text], input[type=number], textarea, select { width:100%; padding:10px 11px; font-size:14px;
  background:var(--ink); color:var(--paper); border:1px solid var(--line); border-radius:8px; font-family:inherit; }
input::placeholder, textarea::placeholder { color:#5C636C; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--steel); }
textarea { min-height:66px; resize:vertical; }
/* two-up field pairs — the shop intake's _np_pair rhythm.
   Top-aligned (not end-aligned like the shop) because our fields carry hints of
   uneven length; aligning labels reads cleaner than aligning inputs. */
.row { display:flex; gap:10px; align-items:flex-start; }
.row > div { flex:1; min-width:0; }
/* intake cards: ONE compact scale shared by every card the form renders — the
   field form carries several times the shop's field count, so it runs tighter
   than the shop intake by design (typography/casing still match the shop). */
.card.intake label { font-size:12px; margin:11px 0 4px; }
.card.intake input[type=text], .card.intake input[type=number],
.card.intake textarea, .card.intake select { font-size:14px; padding:8px 11px; }
/* first control after a card title or a sub-group header sits tight — matches the
   shop's `.intake label:first-of-type`, extended to reach into paired rows
   (adjacent-sibling, because .sec/.subsec are divs and break :first-of-type) */
.card.intake .sec + label, .card.intake .sec + .row label,
.card.intake .subsec + label, .card.intake .subsec + .row label { margin-top:2px; }
.card.intake textarea { min-height:76px; }
.reading { display:flex; gap:7px; }
.reading input { flex:1 1 auto; min-width:0; }
.reading select { flex:0 0 auto; width:auto; }

/* generate — byte-identical to the shop's submit button (which sits OUTSIDE the
   intake cards, so it takes the base button scale, not the .intake one) */
.genbtn { background:var(--copper); color:#fff; border:0; padding:11px 20px; font-size:14px;
  border-radius:8px; cursor:pointer; font-weight:600; margin-top:16px;
  font-family:var(--disp); letter-spacing:.01em; }
.genbtn:hover { background:var(--copper-br); }

/* ---- train builder ---- */
.slotrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:5px 0;
  border-bottom:1px dashed var(--line); }
.slotrow:last-child { border-bottom:0; }
.slotname { font-size:11px; font-weight:700; color:var(--steel); text-transform:uppercase;
  letter-spacing:.05em; width:110px; flex-shrink:0; }
.nodechip { display:inline-flex; align-items:center; gap:7px; background:var(--ink);
  border:1px solid var(--copper); color:var(--paper); border-radius:20px; padding:4px 11px; font-size:12.5px; }
.nodechip button { background:none; border:0; color:var(--steel); cursor:pointer; font-size:14px; padding:0; }
.nodechip button:hover { color:var(--red-t); }
.addsel { width:auto !important; font-size:12.5px; padding:6px 8px; color:var(--steel); }

/* ---- report head (Prediction Report bones) ---- */
.report-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:4px 0 6px; }
.ticketno { font-size:15px; color:var(--steel); margin-top:2px; }
.report-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* ---- options (clickable tiles at the top) ---- */
.options { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0 12px; }
@media (max-width:760px) { .options { grid-template-columns:1fr; } }
.opt { background:var(--graphite); border:1px solid var(--line); border-radius:10px; padding:12px;
  cursor:pointer; transition:border-color .12s; }
.opt:hover { border-color:var(--steel); }
.opt.open { border-color:var(--copper-br); }
.opt.recommended { border-color:var(--green); background:#16241c; }
.opt.recommended.open { box-shadow:0 0 0 1px var(--green); }
.opt .olab { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--steel); margin-bottom:6px; }
.opt.recommended .olab { color:var(--green-t); }
.opt .oval { font-family:var(--mono); font-size:17px; font-weight:600; }
.opt .onote { font-size:11.5px; color:var(--steel); margin-top:5px; line-height:1.4; }
.opt-more { font-family:var(--mono); font-size:10px; color:var(--steel); margin-top:8px; }
.opt.open .opt-more { color:var(--copper-br); }
/* option detail sections render as plain report cards, Prediction Report style */
.optdetail .subsec:first-child { margin-top:0; }
.decision { font-size:13.5px; line-height:1.5; background:var(--ink); border-left:3px solid var(--copper);
  border-radius:8px; padding:10px 13px; margin-bottom:16px; }

/* ---- severity + culprits + callouts ---- */
.zone { display:inline-flex; align-items:center; gap:10px; border-radius:10px; padding:9px 14px;
  font-family:var(--mono); font-weight:600; margin:0 0 10px; border:1px solid var(--line); width:100%; }
.zone b { font-size:19px; }
.zone small { font-family:var(--disp); font-weight:400; opacity:.85; font-size:12.5px; }
.zone.zA, .zone.zB { background:#16241c; border-color:var(--green); color:var(--green-t); }
.zone.zC { background:#241f16; border-color:var(--copper); color:var(--amber-t); }
.zone.zD { background:#241614; border-color:var(--red); color:var(--red-t); }
.zone.zN { background:var(--graphite); color:var(--steel); }
.execline { font-size:14.5px; line-height:1.55; color:var(--paper); }

.culprit { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--line); }
.culprit:last-child { border-bottom:0; }
.culprit b { font-size:14px; font-weight:600; }
.culprit .why { font-size:12px; color:var(--steel); margin-top:2px; }
.pct { font-family:var(--mono); font-size:12px; color:var(--copper-br); flex-shrink:0; }

.callout { border-radius:10px; padding:11px 14px; margin:0 0 12px; font-size:13px; line-height:1.5; }
.callout.honest { background:#241f16; border:1px solid var(--copper); color:var(--amber-t); }
.callout.abstain { background:#1d2026; border:1px solid var(--line); color:var(--paper); }
.callout .tag { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; display:block; margin-bottom:4px; color:var(--copper-br); }

.horizon { font-size:13.5px; margin:0 0 14px; }
.horizon b { font-family:var(--mono); color:var(--copper-br); text-transform:uppercase; font-size:12.5px; }
.origin { font-size:12.5px; color:var(--steel); margin:0 0 12px; }
.origin b { color:var(--paper); }
.banner { font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--steel);
  text-transform:uppercase; margin:0 0 10px; }

/* ---- shop config + line items ---- */
.rates { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
@media (max-width:760px) { .rates { grid-template-columns:repeat(2,1fr); } }
.rates label { margin-top:0; font-size:9.5px; }
.rates input { font-family:var(--mono); font-size:13px; padding:7px 8px; }
.drawer .rates, .drawer-rates { grid-template-columns:1fr 1fr; }
.drawer-rates input { width:100%; background:var(--ink); border:1px solid var(--line);
  border-radius:8px; color:var(--paper); }
details.lines { margin-top:10px; }
details.lines summary { cursor:pointer; font-size:12px; color:var(--steel); list-style:none; }
details.lines summary::before { content:"▸ "; }
details.lines[open] summary::before { content:"▾ "; }
.line-item { display:flex; justify-content:space-between; gap:10px; font-size:12.5px;
  padding:6px 0; border-bottom:1px dashed var(--line); }
.line-item:last-child { border-bottom:0; }
.line-item .lm { font-family:var(--mono); flex-shrink:0; }
.conf-mark { font-family:var(--mono); font-size:9px; color:var(--copper-br); border:1px solid var(--copper);
  border-radius:4px; padding:1px 4px; margin-left:6px; text-transform:uppercase; vertical-align:middle; }
.flags { margin-top:10px; font-size:11.5px; color:var(--steel); line-height:1.55; }
.notes { font-size:11.5px; color:var(--steel); margin-top:10px; line-height:1.5; }
.savedline { font-family:var(--mono); font-size:10.5px; color:var(--steel); margin-top:6px; }

/* ---- option detail rows ---- */
.dline { font-size:13px; line-height:1.55; padding:3px 0; }
.matrow { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:6px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.matrow:last-child { border-bottom:0; }
.matright { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.lm { font-family:var(--mono); font-size:12px; color:var(--paper); flex-shrink:0; }
.plikely { font-family:var(--mono); font-size:9.5px; font-weight:600; padding:2px 7px; border-radius:12px; white-space:nowrap; }
.plikely.lk-hi { background:#16241c; color:#9fe6b8; }
.plikely.lk-mid { background:#241f16; color:var(--copper-br); }
.plikely.lk-lo { background:#241614; color:#e0a08f; }
.orderbadge { font-family:var(--mono); font-size:8.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; background:#241f16; color:var(--copper-br); border:1px solid var(--copper);
  padding:2px 7px; border-radius:12px; white-space:nowrap; }

/* ---- photos ---- */
.photorow { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.photobtn { display:inline-block; border:1px dashed var(--line); color:var(--steel); border-radius:8px;
  text-transform:none; letter-spacing:normal; font-weight:400; margin:0;
  padding:8px 12px; font-size:12.5px; cursor:pointer; }
.photobtn:hover { color:var(--paper); border-color:var(--steel); }
.thumbrow { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.thumbbox { position:relative; width:86px; height:86px; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.thumbbox img { width:100%; height:100%; object-fit:cover; display:block; }
.imgchip { position:absolute; bottom:4px; left:4px; font-family:var(--mono); font-size:8.5px;
  padding:2px 6px; border-radius:8px; background:rgba(0,0,0,.65); color:var(--steel); }
.imgchip.done { color:var(--green-t); }
.imgchip.failed { color:var(--red-t); }
.imgchip.uploading, .imgchip.queued { color:var(--copper-br); }

.sheetbtn { width:100%; background:var(--copper); color:#fff; border:0; padding:13px; font-size:15px;
  font-weight:600; border-radius:10px; cursor:pointer; margin:4px 0 10px; font-family:var(--disp); }
.sheetbtn:hover { background:var(--copper-br); }
.sheetbtn:disabled { opacity:.5; cursor:default; }

/* ---- thinking overlay (the shop app's reasoning screen) ---- */
.thinking { display:none; position:fixed; inset:0; background:rgba(10,12,15,.93);
  z-index:200; align-items:center; justify-content:center; }
.think-card { text-align:center; max-width:440px; padding:0 24px; }
.spinner { width:46px; height:46px; margin:0 auto 20px; border:3px solid var(--line);
  border-top-color:var(--copper-br); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.think-title { font-size:18px; font-weight:600; margin-bottom:10px; color:var(--paper); }
.think-step { font-family:var(--mono); font-size:14px; color:var(--copper-br); min-height:20px; }
.cancelbtn { margin-top:22px; background:transparent; border:1px solid var(--line);
  color:var(--steel); padding:9px 22px; border-radius:8px; cursor:pointer;
  font-size:14px; font-family:var(--disp); }
.cancelbtn:hover { border-color:var(--steel); color:var(--paper); }

@media (max-width: 760px) {
  .word { font-size:30px; }
  .topbar { padding:16px 18px; }
  .lockup { order:1; }
  .hamburger { order:2; }
  .topbar-tag { order:3; flex-basis:100%; white-space:normal; top:0;
    font-size:10px; letter-spacing:.1em; line-height:1.35; }
  .wrap { padding:22px 18px 60px; }
  h1 { font-size:21px; }
  /* field labels are longer than the shop's ("Primary symptom (operator's words)"),
     so two-up pairs stack rather than truncate their controls */
  .row { flex-direction:column; gap:0; }
  .card.intake .subsec + .row label { margin-top:2px; }
}

/* required-companion card (Q-ARCH-06): the cause fix, not an upsell */
.card.required { border-color:var(--copper); }
.card.required .sec { color:var(--copper-br); }