/* COLOURS: every colour here is a var(--token) from static/tokens.css (generated by
   dev/palettes.py; dark by default, light by device, <html data-theme> overrides).
   base.html links tokens.css before this file. */
* { box-sizing: border-box; }
/* the hidden attribute always wins: the browser's own [hidden] rule loses to ANY author
   display rule (.btn is inline-block), which left hidden buttons on screen */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 var(--font-ui);      /* Barlow runs a size small: 16px reads as the old 15px */
  /* a full-height column: on a short page the footer rests at the window bottom */
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: "Cascadia Code", Consolas, monospace; color: var(--ink-2); }
/* THE TYPEFACE (tokens.css carries the @font-face rules): Barlow everywhere, controls
   included (a browser gives them its own face otherwise); Barlow Condensed for the
   headlines, the brand and the big numbers. */
button, input, select, textarea { font-family: inherit; }
h1, h2, .topbar .brand, .balance { font-family: var(--font-display); letter-spacing: .01em; }

.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--chrome);
  flex-wrap: wrap; row-gap: 8px;     /* out of room: whole items wrap, words never break */
}
.topbar .brand { font-weight: 700; font-size: 20px; letter-spacing: .09em; line-height: 1.2; white-space: nowrap; }
.topbar nav a { white-space: nowrap; }
.topbar nav { display: flex; gap: 16px; }
.burger { display: none; margin: 0; padding: 0; width: 46px; height: 46px; border-radius: 9px;
  background: transparent; border: 1px solid var(--line); position: relative; flex: none; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px;
  background: var(--ink); transition: transform .18s ease, opacity .12s ease; }
.burger span:nth-child(1) { top: 15px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 29px; }
.topbar.open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topbar.open .burger span:nth-child(2) { opacity: 0; }
.topbar.open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .burger span { transition: none; } }
.topbar .tag { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }

main { max-width: 920px; width: 100%; flex: 1 0 auto; margin: 0 auto; padding: 0 22px; }
/* a flex item's margins stop collapsing with its children's (.auth-card and .legal bring
   their own), which would push every page down.  These two empty blocks carry main's old
   28px top margin and the 34px gap to the footer INSIDE it, where they still collapse
   with the first/last child exactly as before. */
main::before { content: ""; display: block; margin-top: 28px; }
main::after { content: ""; display: block; margin-bottom: 34px; }
.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 22px 26px; margin-bottom: 22px;
}
h1 { font-size: 29px; line-height: 1.15; margin: 0 0 4px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

.field { display: block; margin: 14px 0; }
.field > span { display: block; font-size: 14px; color: var(--muted); margin-bottom: 5px; }
.field input { width: 100%; }
.field.narrow { max-width: 240px; }
input[type=text], input[type=email], input[type=password] {
  background: var(--field); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); padding: 9px 11px; font-size: 15px;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus { outline: none; border-color: var(--accent); }

select {
  appearance: none; background-color: var(--field); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); padding: 9px 36px 9px 11px; font: inherit; font-size: 15px; cursor: pointer;
  /* the chevron is two gradients, so it takes its colour from the theme */
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 17px center, right 11px center; background-size: 6px 6px; background-repeat: no-repeat;
}
select:focus { outline: none; border-color: var(--accent); }
fieldset { border: 1px solid var(--line); border-radius: 10px; margin: 16px 0; padding: 12px 16px; }
legend { color: var(--muted); font-size: 13px; padding: 0 6px; }
fieldset.paid { border-color: var(--amber-line); background: var(--amber-soft); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.chk.wide { align-items: baseline; margin: 3px 0; }
.chk.wide span { font-size: 13px; color: var(--muted); }
.chk.wide b { color: var(--ink); font-weight: 600; }

button {
  background: var(--btn); color: var(--on-btn); border: 0; border-radius: 9px;
  padding: 10px 20px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 8px;
}
button:disabled { opacity: .6; cursor: default; }

.error { color: var(--red-text); margin-top: 12px; white-space: pre-wrap; }

.statusrow { display: flex; align-items: center; gap: 14px; margin: 8px 0 14px; }
.badge { padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.badge.running { background: var(--accent-soft); color: var(--accent); }
.badge.done { background: var(--green-soft); color: var(--green); }
.badge.failed { background: var(--red-soft); color: var(--red-text); }

.log {
  background: var(--sunken); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; max-height: 62vh; overflow: auto; white-space: pre-wrap;
  font-family: "Cascadia Code", Consolas, monospace; font-size: 12.5px; color: var(--ink-2);
}

.filter, input.filter {
  width: 100%; max-width: 360px; margin: 6px 0 16px;
  background: var(--field); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); padding: 8px 11px;
}
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tbl code { white-space: nowrap; }     /* an APN never breaks at its hyphens */
.tbl th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.tbl tr:hover td { background: var(--hover); }

/* Projects list (owner, 2026-09-28): the actions ran onto a second line and a column of
   all-caps addresses was hard to scan. The actions never wrap; the street sits on its own
   line with the city/state/ZIP under it, so the eye has one short line per row to read. */
.tbl-proj .pj-acts { white-space: nowrap; text-align: right; }
.tbl-proj .pj-acts a { margin-left: 14px; }
.tbl-proj .pj-acts a:first-child { margin-left: 0; }
.tbl-proj .pj-acts .pj-open { color: var(--accent); border-color: var(--accent); vertical-align: 1px; }
.tbl-proj .pj-acts .pj-open:hover { background: var(--accent-soft); filter: none; }
.tbl-proj .pj-addr { line-height: 1.35; }
.tbl-proj .pj-loc { display: block; color: var(--muted); font-size: 12.5px; letter-spacing: .2px; }
.tbl-proj td { vertical-align: top; }
@media (max-width: 760px) {                 /* the row is already stacked; let the actions wrap again */
  .tbl-proj .pj-acts { white-space: normal; text-align: left; }
  .tbl-proj .pj-acts a:first-child { margin-left: 0; }
}
.badge:not(.running):not(.done):not(.failed) { background: var(--hover); color: var(--muted); }

.actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.btn {
  display: inline-block; background: var(--btn); color: var(--on-btn); border-radius: 9px;
  padding: 9px 16px; font-weight: 600; font-size: 14px;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }

.artifacts { list-style: none; padding: 0; margin: 8px 0 0; }
.artifacts li { padding: 7px 0; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.artifacts li.miss { opacity: .5; }
.artifacts .miss-tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
h2 { font-size: 21px; font-weight: 600; line-height: 1.2; margin: 0 0 6px; }

textarea {
  width: 100%; background: var(--field); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); padding: 9px 11px; font-size: 14px; font-family: inherit; resize: vertical;
}
textarea:focus, input[type=text]:focus { outline: none; border-color: var(--accent); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }

/* Project-specific sub-navigation (below the top bar, on parcel-scoped pages) */
.subnav { display: flex; align-items: center; gap: 18px; padding: 8px 24px;
  background: var(--field); border-bottom: 1px solid var(--line); font-size: 14px; }
.subnav-id { color: var(--muted); font-weight: 600; margin-right: 6px; }
.subnav a { color: var(--ink); text-decoration: none; padding: 3px 10px; border-radius: 6px; }
.subnav a:hover { background: var(--hover); }
.subnav a.here { background: var(--hover); color: var(--accent); }
/* New Job: the first-time "Start here" button — points at the Help video walkthrough */
.btn.starthere { display: block; width: 100%; box-sizing: border-box; text-align: center;
  margin: 6px 0 16px; padding: 14px 18px; font-size: 17px; font-weight: 700;
  background: var(--amber-hot); border-color: var(--amber-hot); color: #14180f; }
.btn.starthere:hover { background: var(--amber-hot); border-color: var(--amber-hot); }

/* Help: the video walkthrough — four play cards in order, two per row */
.vid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; margin-top: 12px; }
@media (max-width: 900px) { .vid-grid { grid-template-columns: 1fr; } }
.vidcard { position: relative; display: block; padding-top: 42%; background: var(--sunken);
  border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink);
  overflow: hidden; transition: border-color .15s, background .15s; }
.vidcard:hover { border-color: var(--accent); background: #0e1320; }
.vidcard .play { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--accent);
  color: var(--accent); font-size: 26px; line-height: 60px; text-align: center;
  padding-left: 5px; box-sizing: border-box; }
.vidcard .cap { position: absolute; left: 14px; right: 14px; bottom: 12px; font-size: 14px; }
.vidcard .cap b { color: var(--accent); margin-right: 8px; }

/* the property page's Source-documents dialog entries are links */
a.dm-item { display: block; text-decoration: none; color: var(--ink); }
/* the Source-documents button pops (user direction 2026-08-26): filled amber */
.btn.srcdocs { background: var(--amber-hot); border-color: var(--amber-hot); color: #14180f;
  font-weight: 700; }
.btn.srcdocs:hover { background: var(--amber-hot); border-color: var(--amber-hot); }

/* Deliverables: three color-segmented sections (user 2026-08-26) — green
   headers; each block carries its own tint + left accent so Proposal /
   Documents / Compiled Property Map read as distinct sections. */
.dsec { border-left: 4px solid; border-radius: 0 10px 10px 0; padding: 10px 16px 14px;
  margin: 14px 0; }
.dsec .deliv-sub:first-child { margin-top: 2px; }
.dsec-prop { border-color: #2fbf71; background: rgba(47, 191, 113, .055); }
.dsec-docs { border-color: #5b9dff; background: rgba(91, 157, 255, .055); }
.dsec-docs .deliv-sub { color: #5b9dff; }
.dsec-map  { border-color: #00d0ff; background: rgba(0, 208, 255, .055); }
.dsec-map .deliv-sub { color: #00d0ff; }

/* Deliverables: the conspicuous project-zip button — THE goal of the page */
.btn.zipbig { display: block; width: 100%; box-sizing: border-box; text-align: center;
  margin-top: 22px; padding: 15px 18px; font-size: 17px; font-weight: 700;
  letter-spacing: .02em; }

/* the run page's digital elapsed clock (2026-08-26) */
.clock { font-family: Consolas, 'Courier New', monospace; font-variant-numeric: tabular-nums;
  font-size: 16px; letter-spacing: .08em; color: var(--accent);
  background: var(--sunken); border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px; }

/* live-run indicator (2026-08-26): amber pulse while a job runs — on the project
   bar AND the Projects-list rows */
a.runlive { color: var(--amber-hot); border: 1px solid color-mix(in srgb, var(--amber-hot) 45%, transparent); border-radius: 6px;
  font-size: 12.5px; font-weight: 600; padding: 2px 9px; white-space: nowrap;
  text-decoration: none; margin-left: 8px;
  animation: runlive-pulse 1.6s ease-in-out infinite; }
a.runlive:hover { background: color-mix(in srgb, var(--amber-hot) 12%, transparent); }
@keyframes runlive-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { a.runlive { animation: none; } }

/* Parcel hub: first-phase hero thumbnails (larger tiles than the data grid) */
.thumbs.hero .thumb { width: 240px; }
.thumbs.hero .thumb img { width: 240px; height: 170px; }
.thumbs.hero .thumb.noimg .ph-kind { width: 240px; height: 170px; }

/* Parcel hub: supplementary-data upload grid */
.upload-grid { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0; }
.upload-grid .up-form { flex: 1 1 280px; }
.upload-grid fieldset { height: 100%; }

/* Run page: stage progress display */
.progress-outer { height: 10px; background: var(--field); border: 1px solid var(--line);
  border-radius: 6px; margin: 12px 0 14px; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--accent); transition: width .6s; }
.stages { list-style: none; margin: 0 0 10px; padding: 0; }
.stages li { padding: 5px 2px; font-size: 14px; color: var(--faint);
  border-bottom: 1px solid var(--line); }
.stages li:last-child { border-bottom: none; }
.stages li.active { color: var(--ink); font-weight: 600; }
.stages li.done { color: var(--green-ink); }
.stages li.failed { color: var(--red-text); font-weight: 600; }
.stages li.na { color: var(--faint); font-style: italic; }
.stages .st-ico { display: inline-block; width: 20px; text-align: center; }
.stages li.active .st-ico { animation: spin 1.6s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.done-panel { margin: 14px 0; padding: 12px 14px; background: var(--green-panel);
  border: 1px solid var(--green-line); border-radius: 8px; }
.techlog { margin-top: 14px; }
.techlog .log { max-height: 320px; }

/* Proposal: considerations pick-list + generic scope menu */
.consid-grp { margin: 10px 0 2px; text-transform: uppercase; letter-spacing: .04em;
  font-size: 11px !important; color: var(--accent); }
.consid-line span { white-space: pre-line; }
.scope-row { margin: 2px 0; }
.scope-row .scope-detail { width: calc(100% - 34px); margin: 2px 0 6px 26px;
  font-size: 13px; padding: 6px 9px; }

/* New Job: form + coverage sidebar */
.newjob-grid { display: grid; grid-template-columns: 1fr 268px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .newjob-grid { grid-template-columns: 1fr; } }
.coverage h2 { font-size: 18px; margin: 0 0 8px; }
.coverage h3 { font-size: 13px; margin: 14px 0 4px; color: var(--accent); }
.coverage ul { list-style: none; margin: 6px 0 10px; padding: 0; }
.coverage li { padding: 4px 2px; font-size: 13px; border-bottom: 1px solid var(--line); }
.coverage li:last-child { border-bottom: none; }
.cov-tag { font-size: 11px; color: #8b93a3; }
.courses { margin: 8px 0 0; padding-left: 20px; font-size: 13px; color: var(--ink-2); }
.courses li { padding: 2px 0; }

.figbox { background:var(--sunken); border:1px solid var(--line); border-radius:10px; padding:10px; min-height:280px; display:flex; align-items:center; justify-content:center; }
svg.figure { width: 100%; height: auto; }
svg.figure .course { fill:none; stroke:#6cd0ff; stroke-width:2; }
svg.figure .course.arc { stroke:#c792ea; }
svg.figure .closure { stroke:#f0506e; stroke-width:1.5; stroke-dasharray:5 4; }
svg.figure .pob { fill:#3fb950; }
svg.figure .pob-label { fill:#3fb950; font:11px monospace; }

.closure { font-weight:700; margin-bottom:8px; min-height:20px; }
.closure.good { color: var(--green); }
.closure.warn { color: var(--amber); }
.closure.bad  { color: var(--red); }

.banner { background:var(--amber-soft); border:1px solid var(--amber-line); color:var(--amber-ink); border-radius:8px; padding:10px 14px; margin:10px 0; font-size:14px; }

/* folder pickers + in-app directory browser modal */
.folderpick { display:flex; gap:10px; align-items:center; }
.folderpick input[type=text] { flex:1; }
.filelist { margin-top:8px; font-size:13px; color:var(--muted); }

.modal { position:fixed; inset:0; background:var(--scrim); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal[hidden] { display:none; }
.modal-box { background:var(--panel); border:1px solid var(--line); border-radius:12px; width:min(640px,93vw); max-height:88vh; display:flex; flex-direction:column; padding:18px 20px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.modal-head .x { background:transparent; color:var(--muted); font-size:22px; line-height:1; padding:0 6px; margin:0; }
.modal-head .x:hover { color:var(--ink); }
.modal-path { background:var(--sunken); border:1px solid var(--line); border-radius:8px; padding:6px 10px; margin-bottom:8px; overflow:auto; white-space:nowrap; }
.modal-list { overflow:auto; max-height:42vh; border:1px solid var(--line); border-radius:8px; }
.dm-item { padding:7px 12px; cursor:pointer; border-bottom:1px solid var(--line); font-size:14px; }
.dm-item:last-child { border-bottom:0; }
.dm-item:hover { background:var(--hover); }
.dm-up { color:var(--accent); }
.modal-files { max-height:24vh; overflow:auto; display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.modal-actions { display:flex; gap:10px; margin-top:14px; }

/* Deliverables: maps & imagery thumbnails + section sub-headings */
.deliv-sub { font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:#2fbf71;
  margin:16px 0 8px; }
.deliv-sub:first-of-type { margin-top:2px; }
.thumbs { display:flex; flex-wrap:wrap; gap:12px; }
.thumb { display:flex; flex-direction:column; align-items:center; gap:5px; width:150px;
  text-decoration:none; }
.thumb img { width:150px; height:110px; object-fit:cover; background:#fff;
  border:1px solid var(--line); border-radius:8px; }
.thumb:hover img { border-color:var(--accent); }
.thumb span { font-size:12.5px; color:var(--ink); text-align:center; line-height:1.3; }
/* placeholder tile when a PDF/DXF can't be rendered (too large / failed) */
.thumb .ph-kind { display:none; }
.thumb.noimg img { display:none; }
.thumb.noimg .ph-kind { display:flex; align-items:center; justify-content:center;
  width:150px; height:110px; border:1px dashed var(--line); border-radius:8px;
  background:var(--field); color:var(--muted); font-size:13px; font-weight:700; letter-spacing:1.5px; }

/* Property page DATA rows (Plan X): thumbnail + label + the surveyor's note beside it */
.drows li.drow { align-items:flex-start; gap:14px; padding:10px 0; }
.drow .thumb { width:110px; flex:0 0 110px; }
.drow .thumb img, .drow .thumb.noimg .ph-kind { width:110px; height:80px; }
.drow-body { flex:1 1 320px; min-width:0; }
.drow-label { font-weight:600; }
.drow.lead .drow-label { font-weight:700; font-size:15px; }
.note-preview { white-space:pre-line; margin-top:4px; }
.note-panel { margin:8px 0 2px; }
.btn.small { padding:5px 11px; font-size:13px; }

/* Proposal: labeled client/owner fields (two-column) */
.client-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.client-grid .full { grid-column:1 / -1; }
.csz { display:grid; grid-template-columns:2fr 1fr 1fr; gap:0 12px; }
@media (max-width:640px){ .client-grid { grid-template-columns:1fr; } }

/* Accumulating file lists on New Job (email threads / documents) */
.filelist { margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.fl-item { display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--field); border:1px solid var(--line); border-radius:7px; padding:5px 10px; font-size:13.5px; }
.fl-x { background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; padding:2px 6px; border-radius:5px; }
.fl-x:hover { color:var(--red); background:#2a1720; }

/* Breadcrumb bar on parcel sub-pages (intake / dictate / scope / proposal) */
.crumbs { color:var(--muted); font-size:13px; margin:0 0 14px; }
.crumbs a { color:var(--accent); }
.crumbs .sep { margin:0 7px; opacity:.55; }
.crumbs .here { color:var(--ink); font-weight:600; }

/* site-wide contact footer */
.appfooter { max-width: 1060px; width: 100%; margin: 0 auto 18px; padding: 14px 22px 0;
  border-top: 1px solid var(--line); text-align: center;
  font-size: 13px; color: var(--muted); }
.appfooter { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; text-align: left; }
.appfooter a { color: var(--accent); text-decoration: none; }
.appfooter a:hover { text-decoration: underline; }

/* (the New Job run-type cards were retired 2026-08-25 — ONE run) */

/* New Job: RFP-first intake (Plan S) — the analyze row + confirm card */
.rfp-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:8px 0; }
.rfp-row input[type=file] { flex:1 1 260px; font-size:13px; color:var(--muted); }
.rfp-row input[type=text] { flex:1 1 260px; }
.rfp-card { margin-top:14px; padding:16px 18px; border:1px solid var(--accent);
  border-left:4px solid var(--accent); border-radius:10px; background:#101726; }
.rfp-head { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.rfp-badge { font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:3px 8px; }
.rfp-badge.ai { color:#7fe0a0; border-color:#2b5a3c; }
.rfp-warn { color:var(--amber); font-size:14px; margin:8px 0; }
.rfp-sec { margin:6px 0; font-size:14.5px; }
.rfp-k { display:inline-block; min-width:74px; font-size:11px; letter-spacing:.12em;
  color:var(--muted); }
.rfp-parcel { margin:12px 0 4px; padding:10px 12px; background:var(--field);
  border:1px solid var(--line); border-radius:8px; font-size:15px; }
.chip { display:inline-block; background:var(--field); border:1px solid var(--line);
  border-radius:14px; padding:2px 10px; font-size:13px; margin:2px 2px; }

/* New Job: accept an APN that has no situs address on record */
.accept-panel { margin-top:14px; padding:14px 16px; border:1px solid var(--amber);
  border-left:4px solid var(--amber); border-radius:8px; background:#241f12; }
.accept-panel .ap-head { margin:0 0 4px; }
.accept-panel .field { margin-top:10px; }
.accept-panel .btn { margin-top:6px; }

/* Help page: how-to-use guide */
.panel h2 { font-size:21px; margin:0 0 10px; }
.panel.warn { border-left:4px solid var(--amber); }
.panel.warn h2 { color:var(--amber); }
.panel.attention { border:1px solid #2b4a7a; border-left:5px solid var(--accent);
  background:#0d1526; box-shadow:0 0 0 1px rgba(91,157,255,.08), 0 2px 14px rgba(91,157,255,.07); }
.panel.attention h2 { color:var(--accent); }
.badge.todo { background:var(--amber-soft); color:var(--amber); }
.badge.stopped { background:var(--amber-soft); color:var(--amber); }
.btn.stop { color:var(--red-text); border-color:var(--red-line); margin-left:auto; }
.btn.stop:hover { background:var(--red-soft); }
.help-tbl { border-collapse:collapse; width:100%; margin-top:6px; font-size:13.5px; }
.help-tbl th, .help-tbl td { border:1px solid var(--line); padding:7px 10px; text-align:left; vertical-align:top; }
.help-tbl th { background:var(--chrome); color:var(--muted); font-weight:600; }

/* Scope page: auto-read client-email facts (free deterministic extraction) */
.email-scrape { background:#0d1526; border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:8px; padding:10px 14px; margin:6px 0 12px; }
.email-scrape .es-head { font-weight:600; font-size:13px; margin-bottom:5px; }
.email-scrape .es-list { margin:0; padding-left:18px; }
.email-scrape .es-list li { padding:2px 0; font-size:13.5px; color:var(--ink); }

/* Proposal considerations: explicit used / not-used marks (2026-08-16) —
   checked = green check (goes in the proposal), unchecked = red x (not used). */
.consid-line input.consid { position:absolute; opacity:0; pointer-events:none; }
.consid-line { position:relative; cursor:pointer; }
.consid-line .consid-mark { display:inline-block; min-width:1.25em; text-align:center;
  font-weight:700; font-size:14px; }
.consid-line input.consid:checked ~ .consid-mark::before { content:"\2713"; color:var(--green); }
.consid-line input.consid:not(:checked) ~ .consid-mark::before { content:"\2717"; color:var(--red); }
.consid-line input.consid:focus-visible ~ .consid-mark { outline:2px solid var(--accent);
  outline-offset:2px; border-radius:4px; }
.mark-ok { color:var(--green); } .mark-no { color:var(--red); }
#derived-deliv li { list-style:none; }

/* Data-section disclaimer (2026-08-16): as-found / no-warranty / verify-before-use. */
.disclaimer { background:#151312; border:1px solid #3a3020; border-left:4px solid var(--amber);
  border-radius:8px; padding:10px 14px; margin:6px 0 14px; color:var(--muted);
  line-height:1.55; }
.disclaimer b { color:var(--ink); }

/* Responsible-charge button + disclaimer modal (2026-08-16). */
.btn.red { background: var(--red); color: var(--on-red); }
.btn.red:hover { filter: brightness(1.08); }
.rc-overlay { position: fixed; inset: 0; background: var(--scrim); z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.rc-overlay[hidden] { display: none; }
.rc-box { max-width: 640px; background: var(--panel); border: 1px solid var(--line);
  border-left: 5px solid var(--red); border-radius: 12px; padding: 22px 26px;
  box-shadow: 0 18px 50px var(--shadow); }
.rc-box h2 { margin-top: 0; color: var(--red-text); }
.rc-box p { color: var(--muted); line-height: 1.6; }
.rc-box p b { color: var(--ink); }

/* mail fallbacks (Plan U): webmail-compose + copy links beside contact/email actions */
.mail-alt { color: var(--muted); font-size: 12px; margin-left: 6px; }
.mail-alt a { color: var(--muted); text-decoration: underline; }
.mail-alt a:hover { color: var(--accent); }

/* ---- auth pages (Plan AB.1): centered card, provider buttons, divider ---- */
.auth-card { max-width: 420px; margin: 48px auto; text-align: center; }
.auth-card h1 { font-size: 32px; margin: 6px 0 14px; }
.auth-card form { text-align: left; }
.auth-card .field { margin: 12px 0; }
.btn.wide { display: block; width: 100%; text-align: center; margin-top: 14px; }
.oauth-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; }
.oauth-btn { display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--chrome);
  color: var(--ink); font-weight: 600; text-decoration: none; }
.oauth-btn:hover { border-color: var(--accent); text-decoration: none; }
.oauth-btn svg { width: 18px; height: 18px; flex: none; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 18px 0 4px; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.auth-foot { color: var(--muted); font-size: 13.5px; margin: 16px 0 0; }
/* .field > .field-row, not .field-row: it has to outrank `.field > span { display: block }` */
.field > .field-row { display: flex; justify-content: space-between; align-items: baseline; }
.field-row a { font-size: 12.5px; }

/* ---- legal pages (terms / privacy): readable prose column ---- */
.legal { max-width: 760px; margin: 28px auto; line-height: 1.65; }
.legal h1 { font-size: 32px; margin: 0 0 4px; }
.legal h2 { font-size: 20px; margin: 22px 0 6px; color: var(--ink); }
.legal p { margin: 8px 0; }
.legal ul { padding-left: 20px; margin: 8px 0; }
.legal li { margin: 4px 0; }

.credits-pill { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap;
  background: var(--chrome); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.credits-pill:hover { border-color: var(--accent); text-decoration: none; }
.credits-pill.zero { color: var(--red-text); border-color: var(--red-line); }

.balance { font-size: 36px; font-weight: 700; margin: 6px 0 4px; }
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 4px; }
.pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 8px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--chrome); }
.pack input { position: absolute; opacity: 0; inset: 0; }
.pack b { font-size: 22px; }
.pack span { color: var(--muted); font-size: 13px; }
.pack:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* ---- phones: two tidy rows up top, the parcel bar on its own line, stacked project
   cards, tighter gutters.  640px is where the one-row bar stops fitting; nothing above
   it is touched. ---- */
@media (max-width: 640px) {
  .burger { display: block; }
  /* the top bar is ONE row -- brand, credits, hamburger.  Its links, the running-job pill and
     the account fold away and open as full-width, touch-sized rows (base.html toggles .open) */
  .topbar { column-gap: 12px; row-gap: 0; padding: 8px 16px; }
  .credits-pill { margin-left: auto; }
  .topbar:not(:has(.credits-pill)) .burger { margin-left: auto; }
  .topbar nav, .topbar .profile, .topbar a.runlive { display: none; }
  .topbar.open nav { display: flex; flex-direction: column; gap: 0; order: 5; flex: 1 1 100%;
    margin-top: 8px; border-top: 1px solid var(--line); }
  .topbar.open nav a { padding: 13px 2px; border-bottom: 1px solid var(--line); }
  .topbar.open a.runlive { display: block; order: 6; flex: 1 1 100%; margin: 10px 0 0; padding: 11px 12px; }
  /* the account: no dropdown inside a menu -- Settings and Sign out are simply two more rows */
  .topbar.open .profile { display: block; order: 7; flex: 1 1 100%; margin: 0; }
  .topbar.open .profile summary { display: none; }
  .topbar.open .profile-menu { position: static; border: 0; box-shadow: none; padding: 0; min-width: 0; background: none; }
  .topbar.open .profile-menu a { padding: 13px 2px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .topbar.open .profile-menu a:last-child { border-bottom: 0; }

  .subnav { flex-wrap: wrap; gap: 4px 6px; padding: 8px 16px; }
  .subnav-id { flex: 1 1 100%; min-width: 0; margin: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .subnav a.runlive { margin-left: 0; }

  main { padding: 0 14px; }
  .queryrow { flex-direction: column; }
  .queryrow .btn { justify-content: center; }
  .statusrow { flex-wrap: wrap; }
  main::before { margin-top: 18px; }
  .panel { padding: 18px 16px; }

  /* Projects: each row becomes a card -- APN, address, then its links */
  .tbl:has(tr.row) thead { display: none; }
  .tbl tr.row { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .tbl tr.row td { display: block; border: 0; padding: 2px 0; }
  .tbl tr.row td:last-child { padding-top: 6px; }
  .tbl tr.row td:last-child a { margin: 0 14px 0 0; }

  .appfooter .mail-alt { display: block; margin: 4px 0 0; }
  .appfooter .mail-alt .sep { display: none; }
  .appfooter .mail-alt a { white-space: nowrap; }
}

/* ICONS: one sprite per page (templates/_icons.html), drawn in the text's own colour */
.ico { width: 1.15em; height: 1.15em; vertical-align: -.2em; fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.stages .st-ico .ico { width: 16px; height: 16px; vertical-align: -3px; }
.credits-pill .ico { margin-right: 2px; }

/* THE PERSON: one button in the top bar; behind it, Settings and Sign out */
.profile { position: relative; margin-left: auto; font-size: 13.5px; }
.profile summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); max-width: 260px; }
.profile summary::-webkit-details-marker { display: none; }
.profile summary:hover, .profile[open] summary { border-color: var(--accent); }
.profile .pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile[open] summary .ico:last-child { transform: rotate(180deg); }
.profile-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 190px;
  display: flex; flex-direction: column; padding: 6px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 12px 30px var(--shadow); }
.profile-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 7px;
  color: var(--ink); text-decoration: none; white-space: nowrap; }
.profile-menu a:hover { background: var(--hover); text-decoration: none; }

/* SETTINGS: one readable column of cards -- profile, account type, password, credits, appearance */
.settings { max-width: 640px; margin: 0 auto; }
.settings > h1 { margin: 0 0 16px; font-size: 32px; }
.settings .panel { margin-bottom: 16px; }
.settings .panel h2 { margin: 0 0 12px; }
.set-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0; }
.set-row .field { margin: 0; flex: 1 1 220px; }
.set-row .field select { width: 100%; }
.set-row .balance { margin: 0; line-height: 1; }
.set-row button { margin-top: 0; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--field); }
.seg button { margin: 0; border-radius: 0; background: transparent; color: var(--ink); font-weight: 500;
  padding: 9px 16px; border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); font-weight: 700; }

/* ---- PAGE POLISH (owner-approved 2026-09-20) ---- */
/* New Job: ONE address line with Verify beside it; the verified parcel reads as a confirmation */
.panel h1 + .sub { margin: 0 0 14px; }
.queryrow { display: flex; gap: 10px; align-items: stretch; }
.queryrow input { flex: 1 1 auto; min-width: 0; font-size: 16px; padding: 12px 14px; }
.queryrow .btn { margin: 0; white-space: nowrap; display: inline-flex; align-items: center; }
#job-form .field { margin-bottom: 6px; }
#verify-status { min-height: 1.4em; margin: 8px 0 0; }
.panel.inner.confirm { margin: 16px 0 0; border-left: 3px solid var(--accent); }
.confirm h2 { font-size: 25px; margin: 0 0 12px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, max-content)); gap: 6px 36px; margin: 0 0 14px; }
.facts dt { font-size: 12.5px; color: var(--muted); } .facts dd { margin: 0; font-weight: 600; }
.prepared { margin: 0 0 4px; } .prepared .field { margin: 0; max-width: 320px; } .prepared select { width: 100%; }

/* Run page: status, clock and the run's one control share a row; a finished run ends on ONE button */
.statusrow .stop, .statusrow .rerun { margin: 0 0 0 auto; }
.statusrow #rerun-status { margin-left: auto; }
.statusrow #rerun-status + .stop { margin-left: 0; }
.done-panel { background: none; border: 0; padding: 0; margin: 18px 0 6px; }
.done-panel .actions { margin-top: 8px; }
.done-panel .actions .btn:first-child { flex: 1 1 100%; text-align: center; padding: 14px 18px; font-size: 16px; }

/* Credits: the balance and the way to add more are one card */
.credits-card .two-col { align-items: start; }
.credits-card h1 { margin-bottom: 0; }
#add-credits { border-left: 1px solid var(--line); padding-left: 26px; }
@media (max-width: 820px) { #add-credits { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px; } }

/* Admin: a table this wide gets a wider page, never spills its card, and one menu per row */
main:has(.admin-users) { max-width: 1320px; }
.tbl-scroll { overflow-x: auto; }
#users-tbl td, #users-tbl th { white-space: nowrap; }
#users-tbl td:nth-child(2), #users-tbl td:nth-child(9) { white-space: normal; }
.rowmenu { position: relative; display: inline-block; }
.rowmenu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rowmenu summary::-webkit-details-marker { display: none; }
.rowmenu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column;
  gap: 4px; padding: 6px; min-width: 170px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 12px 30px var(--shadow); }
.rowmenu-list .btn { margin: 0; text-align: left; border: 0; white-space: nowrap; }
.rowmenu-list .btn:hover { background: var(--hover); }
.tbl-scroll:has(.rowmenu[open]) { overflow: visible; }      /* the open menu may leave the scroll box */

/* ONE red action at a time: once the verified card is up, "Accept & run" leads and Verify
   steps back to a secondary button */
section:has(#card:not([hidden])) #verify-btn { background: transparent; color: var(--ink);
  border: 1px solid var(--line); }

a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- TOUCH.  A finger needs ~44px; a mouse does not, so desktop density is untouched.
   (pointer: coarse) is the device's own answer to "is the main pointer a finger?" ---- */
@media (pointer: coarse) {
  button, .btn { padding-top: 12px; padding-bottom: 12px; }
  button { min-height: 46px; }            /* a <button> centres its own label; its line box is shorter than a link's */
  .btn.small { padding-top: 11px; padding-bottom: 11px; }
  input[type=text], input[type=email], input[type=password], input[type=number], input.filter, select, textarea { min-height: 46px; }
  input[type=file] { padding: 10px 0; }
  .burger { width: 46px; height: 46px; padding: 0; }
  .topbar .brand, .topbar nav a, .topbar .tag a, .profile-menu a, .subnav a, .appfooter a, .tbl td a, .auth-foot a,
  .field-row a, .crumbs a { display: inline-block; padding-top: 12px; padding-bottom: 12px; }
  /* the smaller-type links need a little more to reach 44 */
  .topbar .tag a, .appfooter a { padding-top: 14px; padding-bottom: 14px; }
  .credits-pill, a.runlive, .profile summary { display: inline-flex; align-items: center; min-height: 44px; }
  .seg button { min-height: 46px; }
  .topbar { padding-top: 4px; padding-bottom: 4px; }
  .subnav { padding-top: 2px; padding-bottom: 2px; }
  .appfooter { padding-top: 6px; }
  .pack { min-height: 64px; }
  main summary { padding: 13px 0; cursor: pointer; }
}

/* ---- the address picker on New Job: what a refused address could mean ---- */
.picker { margin: 4px 0 14px; }
.picker p { margin: 0 0 8px; }
.picker ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; margin: 0;
  padding: 10px 14px; text-align: left; font-size: 15px; font-weight: 500; background: var(--field); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; }
.pick:hover { border-color: var(--accent); background: var(--hover); }
.pick code { white-space: nowrap; color: var(--accent); }
.pick span { min-width: 0; overflow-wrap: anywhere; }
.pick small { color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) { .pick { grid-template-columns: auto minmax(0, 1fr); } .pick small { grid-column: 2; } }

/* ---- THE PACKAGE SCREEN (templates/package.html + static/package.js): the viewer on the
   left, the package's files by data source on the right -- the Reference Screen's own
   arrangement (map left, list right); on a phone the viewer leads and the list follows ---- */
main:has(.pkgview) { max-width: 1680px; }
main:has(.pkgview)::before { margin-top: 14px; }      /* a viewer page: the window's height goes to the document */
.pkgview { display: flex; flex-direction: column; gap: 12px; }
.pk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.pk-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 18px; min-width: 0; }
.pk-head h1 { margin: 0; font-size: 26px; min-width: 0; overflow-wrap: anywhere; }      /* the address: it may wrap on a phone */
.pk-sub code { font-size: 17px; color: var(--accent); white-space: nowrap; }
.pk-sub { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.pk-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pk-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
/* package.js sizes the panes to the window exactly (the header may wrap); this is the no-script height */
.pk-panes { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto minmax(0, 1fr); gap: 12px 16px;
  height: calc(100vh - 142px); height: calc(100dvh - 142px); min-height: 420px; }
/* the viewer keeps the whole height on the left; the right column is the summary over the list */
.pk-viewer { grid-column: 1; grid-row: 1 / span 2; }
.pk-list { grid-column: 2; grid-row: 2; }
.pk-panes:not(:has(.pk-summary)) .pk-list { grid-row: 1 / span 2; }
/* THE PROPERTY SUMMARY (owner, 2026-10-01): the Property Report's own facts, compact */
.pk-summary { grid-column: 2; grid-row: 1; min-height: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.pk-summary > summary { cursor: pointer; padding: 9px 14px; font-size: 15px; font-weight: 600; color: var(--accent); }
.pk-summary[open] > summary { border-bottom: 1px solid var(--line); }
.pk-facts { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.35; }
.pk-summary[open] .pk-facts { display: block; max-height: min(46vh, 400px); overflow-y: auto; }
.pk-facts tbody { display: table; width: 100%; }
.pk-facts th { width: 96px; padding: 5px 8px 5px 14px; text-align: left; vertical-align: top; font-weight: 500;
  color: var(--muted); }
.pk-facts td { padding: 5px 14px 5px 4px; vertical-align: top; overflow-wrap: anywhere; color: var(--ink); }
.pk-facts tr + tr th, .pk-facts tr + tr td { border-top: 1px solid var(--line); }
.pk-facts td.muted, .pk-facts td .muted { color: var(--muted); }
.pk-flags { list-style: none; margin: 0; padding: 0; }
.pk-flags li { display: inline; }
.pk-flags li + li::before { content: " · "; color: var(--muted); }
.pk-rec + .pk-rec { margin-top: 4px; }
.pk-facts-note { margin: 0; padding: 7px 14px 9px; border-top: 1px solid var(--line); font-size: 12px; }
.pk-viewer { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
/* THE TOOLBAR (owner, 2026-10-01): previous / next + the file's name on the left; ONE group on the
   right that never wraps --  [zoom -] [zoom +] [Fit v] | [Layers] | [Download] [More v] [Expand].
   From 1200px each control is an icon and its label; from there down to a phone the icon alone,
   on a 40px target (its title and aria-label name it); on a phone the group has a row of its
   own, in the same order.  package.js shows the view's own tools for a drawing or a model only. */
.pk-bar { display: flex; align-items: center; gap: 10px; padding: 7px 12px; min-height: 48px; border-bottom: 1px solid var(--line); }
.pk-name { flex: 1 1 0; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-step { display: flex; flex: none; gap: 4px; }
.pk-tools { display: flex; flex: none; align-items: center; flex-wrap: nowrap; }
.pk-grp { display: flex; align-items: center; gap: 4px; }
.pk-grp:not([hidden]) ~ .pk-grp:not([hidden]) { margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--line); }   /* the thin separators */
.pk-tool { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; box-sizing: border-box;
  margin: 0; padding: 5px 10px; min-height: 30px; font-size: 13px; font-weight: 600; line-height: 1.2; background: transparent;
  color: var(--ink); border: 1px solid var(--line); border-radius: 7px; white-space: nowrap; text-decoration: none; cursor: pointer; }
.pk-tool:hover { border-color: var(--accent); text-decoration: none; }
.pk-tool .ico { flex: none; width: 16px; height: 16px; vertical-align: 0; }
.pk-ico { padding: 5px 7px; }
#pk-prev .ico { transform: rotate(90deg); }  #pk-next .ico { transform: rotate(-90deg); }
.when-off, .when-on, .pk-when-lbl { display: inline-flex; align-items: center; gap: 5px; }
.pk-when-ico { display: none; }                            /* More: its dots stand in for the label on a narrow bar */
.pk-when-lbl .ico { width: 13px; height: 13px; }
#pk-expand .when-on, #pk-expand[aria-pressed="true"] .when-off { display: none; }
#pk-expand[aria-pressed="true"] .when-on { display: inline-flex; }
.pk-tool[aria-expanded="true"], .pk-layers-toggle.on { border-color: var(--accent); color: var(--accent); }
/* FIT is one control: the button fits the parcel, the caret beside it opens the menu */
.pk-split { position: relative; display: inline-flex; }
.pk-split > #pk-fit { border-radius: 7px 0 0 7px; }
.pk-split > .pk-caret { margin-left: -1px; padding: 5px 4px; border-radius: 0 7px 7px 0; }
.pk-split.solo > #pk-fit { border-radius: 7px; }           /* one way to fit (the 3D model): no caret */
.pk-split > .pk-tool:hover, .pk-split > .pk-tool:focus-visible, .pk-split > .pk-tool[aria-expanded="true"] { z-index: 1; }
.pk-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: flex; flex-direction: column; min-width: 184px;
  padding: 5px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 10px 28px var(--shadow); }
.pk-pop-end { left: auto; right: 0; }
.pk-item { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; margin: 0; padding: 8px 10px; min-height: 36px;
  font-size: 14px; font-weight: 500; line-height: 1.2; text-align: left; white-space: nowrap; background: transparent; color: var(--ink);
  border: 0; border-radius: 6px; text-decoration: none; cursor: pointer; }
.pk-item:hover, .pk-item:focus-visible { background: var(--hover); text-decoration: none; }
.pk-item .ico { flex: none; width: 16px; height: 16px; vertical-align: 0; }
@media (max-width: 1199px) {
  /* ICON ONLY: the label is clipped, not removed -- it is still the control's name */
  .pk-tool .pk-lbl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pk-when-ico { display: inline-flex; }  .pk-when-lbl { display: none; }
  .pk-bar .pk-tool { min-width: 40px; min-height: 40px; padding: 0 8px; }
  .pk-tool .ico { width: 18px; height: 18px; }
  .pk-item { min-height: 40px; }
}
/* EXPANDED: the viewer is the window (Esc or the same button returns) */
.pk-viewer.pk-max { position: fixed; inset: 0; z-index: 2000; border: 0; border-radius: 0; }
html.pk-noscroll { overflow: hidden; }
.pk-stage { flex: 1; min-height: 0; position: relative; overflow: auto; background: var(--sunken); }
.pk-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.pk-pages { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px; }
.pk-pages img { display: block; max-width: 100%; height: auto; background: #fff; box-shadow: 0 1px 6px var(--shadow); }
.pk-image { height: 100%; display: flex; align-items: center; justify-content: center; padding: 12px; cursor: zoom-in; }
.pk-image img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; }
.pk-image.full { height: auto; display: block; cursor: zoom-out; }
.pk-image.full img { max-width: none; max-height: none; }
.pk-text { margin: 0; padding: 16px 18px; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 13px/1.55 "Cascadia Code", Consolas, monospace; color: var(--ink-2); }
.pk-links, .pk-note { padding: 18px 20px; max-width: 920px; }
.pk-links td a { overflow-wrap: anywhere; }
.pk-note p { margin: 0 0 14px; max-width: 62ch; }
.pk-empty { padding: 48px 20px; text-align: center; }
/* the CAD view is model space: dark in either theme, as the drawing opens in CAD */
.pk-cad { position: absolute; inset: 0; display: flex; background: #0b1320; }   /* the canvas paints its own theme-aware model space */
.pk-cad-main { position: relative; flex: 1 1 auto; min-width: 0; }                  /* the drawing: what the drawer leaves */
.pk-cad canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; outline: none; }
.pk-cad canvas.grabbing { cursor: grabbing; }
.pk-cad canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.pk-cad-status { position: absolute; left: 0; right: 0; top: 45%; margin: 0; padding: 0 20px; text-align: center; color: #c8d2e0; }
.pk-layers { position: absolute; top: 10px; right: 10px; width: 264px; font-size: 13px; color: #e9f0fa;
  background: rgba(11, 19, 32, .93); border: 1px solid #2a3a55; border-radius: 9px; }
.pk-layer-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 8px; }
.pk-layer-tools button { margin: 0; padding: 3px 10px; font-size: 12.5px; font-weight: 600; background: transparent; color: #e9f0fa;
  border: 1px solid #2a3a55; border-radius: 6px; min-height: 0; }
.pk-layer-tools button:hover { border-color: #6fb3ff; }
/* the layer panel in LIGHT mode (the canvas paints its own light model space; the panel's chrome follows here) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .pk-layer-tools button { color: #243447; border-color: #c3cedb; }
  :root:not([data-theme="dark"]) .pk-layers label:hover { background: rgba(0, 0, 0, .05); }
  :root:not([data-theme="dark"]) .pk-layers .sw { border-color: rgba(0, 0, 0, .2); }
}
:root[data-theme="light"] .pk-layer-tools button { color: #243447; border-color: #c3cedb; }
:root[data-theme="light"] .pk-layers label:hover { background: rgba(0, 0, 0, .05); }
:root[data-theme="light"] .pk-layers .sw { border-color: rgba(0, 0, 0, .2); }
.pk-layers ul { list-style: none; margin: 0; padding: 0 6px 8px; max-height: min(52vh, 430px); overflow-y: auto; }
.pk-layers label { display: grid; grid-template-columns: auto 12px minmax(0, 1fr) auto; align-items: center; gap: 7px;
  padding: 3px 6px; border-radius: 5px; cursor: pointer; }
.pk-layers label:hover { background: rgba(255, 255, 255, .07); }
.pk-layers .sw { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .25); }
.pk-layers .ln { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-layers .lc { color: #8fa3bd; font-size: 12.5px; font-variant-numeric: tabular-nums; }
/* THE LAYERS DRAWER (owner, 2026-10-01): the layer list of the CAD view AND of the 3D view (one
   drawer: package.js layersDrawer) is a column of its own beside the drawing -- never over it --
   on a desktop and a tablet; on a phone, where a column would leave no drawing, it slides over
   the right of the drawing.  package.js opens it on a desktop, keeps it closed at 1024px and
   below, and remembers the choice in this browser. */
.pk-cad .pk-layers.pk-drawer, .pk-model .pk-layers.pk-drawer { position: relative; top: auto; right: auto; flex: none; width: 280px; min-height: 0;
  display: flex; flex-direction: column; border-width: 0 0 0 1px; border-radius: 0; }
.pk-cad .pk-layers.pk-drawer[hidden], .pk-model .pk-layers.pk-drawer[hidden] { display: none; }
.pk-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 6px 12px; font-weight: 600; }
.pk-drawer-close { margin: 0; min-height: 0; padding: 0 9px; font-size: 20px; line-height: 28px; font-weight: 400;
  background: transparent; color: inherit; border: 1px solid transparent; border-radius: 6px; }
.pk-drawer-close:hover { border-color: #6fb3ff; }
.pk-cad .pk-drawer ul, .pk-model .pk-drawer ul { flex: 1 1 auto; max-height: none; min-height: 0; }
@media (max-width: 1024px) { .pk-cad .pk-layers.pk-drawer, .pk-model .pk-layers.pk-drawer { width: 240px; } }
@media (max-width: 760px) {
  .pk-cad .pk-layers.pk-drawer, .pk-model .pk-layers.pk-drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; width: min(280px, 86%);
    box-shadow: -6px 0 18px rgba(0, 0, 0, .28); }
}
/* the 3D massing view fills the stage as the CAD view does: the model, its caveat under it, and
   THE LAYERS DRAWER beside them -- package.js sizes the renderer to what the drawer leaves */
.pk-model { position: absolute; inset: 0; display: flex; }
.pk-model-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pk-model-view { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.pk-model canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.pk-model-note { flex: none; margin: 0; padding: 6px 12px; }
.pk-list { min-height: 0; overflow-y: auto; padding: 4px 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.pk-list h2 { font-size: 17px; margin: 14px 8px 6px; padding-bottom: 5px; color: var(--accent); border-bottom: 1px solid var(--line); }   /* "Start here" */
.pk-list ul { list-style: none; margin: 0; padding: 0; }
.pk-file { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; margin: 0;
  padding: 7px 8px; text-align: left; font-size: 14px; font-weight: 500; line-height: 1.3; background: transparent; color: var(--ink);
  border: 1px solid transparent; border-radius: 8px; }
.pk-file:hover { background: var(--hover); }
.pk-file[aria-current] { background: var(--accent-soft); border-color: var(--accent); }
.pk-kind { padding: 2px 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-align: center; color: var(--muted);
  border: 1px solid var(--line); border-radius: 5px; }
.pk-kind.k-cad { color: var(--accent); border-color: var(--accent); }
.pk-fname { min-width: 0; overflow-wrap: anywhere; }
.pk-meta { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.pk-file.is-none .pk-fname { color: var(--muted); }
/* THE LIST BY CATEGORY (owner, 2026-10-01): under "Start here", one folding section per data
   source -- its name, how many files, a chevron -- then "Notes & indexes" */
.pk-start { padding-bottom: 8px; }
.pk-cat { border-top: 1px solid var(--line); }
.pk-cat > summary { display: flex; align-items: center; gap: 8px; margin: 2px 0; padding: 9px 8px; font-size: 15px; font-weight: 600;
  color: var(--ink); cursor: pointer; list-style: none; border-radius: 8px; }
.pk-cat > summary::-webkit-details-marker { display: none; }
.pk-cat > summary:hover { color: var(--accent); background: var(--hover); }
.pk-cat-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pk-cat > summary .ico { flex: none; width: 18px; height: 18px; color: var(--muted); transform: rotate(-90deg); }   /* folded: it points at the name */
.pk-cat[open] > summary .ico { transform: none; }
.pk-cat[open] { padding-bottom: 8px; }
.pk-cat h3 { margin: 8px 8px 2px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }   /* the notes: the folder each sits in */
.pk-count { flex: none; padding: 1px 8px; font-size: 12.5px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; font-variant-numeric: tabular-nums; }
.pk-support-note { margin: 14px 8px 2px; line-height: 1.45; }
@media (max-width: 760px) {
  .pk-panes { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .pk-summary[open] .pk-facts { max-height: none; }
  .pk-stage { flex: none; height: 62vh; }
  .pk-list { overflow: visible; }
  .pk-actions { width: 100%; }
  .pk-actions .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
  /* the bar: previous / next + the name, then the ONE group on a row of its own -- same order */
  .pk-bar { flex-wrap: wrap; row-gap: 6px; padding: 8px; }
  .pk-tools { flex: 1 1 100%; justify-content: flex-end; }
  .pk-grp { gap: 2px; }
  .pk-grp:not([hidden]) ~ .pk-grp:not([hidden]) { margin-left: 5px; padding-left: 5px; }
  .pk-viewer.pk-max .pk-stage { height: auto; flex: 1; }
}
/* AN UPRIGHT TABLET, or a desktop window pulled narrow (761-1023px): beside a 360px list the viewer
   had no room for its own bar.  The viewer takes the page's width; the summary and the list sit
   side by side under it, and the page scrolls (package.js stops sizing the panes to the window). */
@media (min-width: 761px) and (max-width: 1023px) {
  .pk-panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; height: auto; min-height: 0; }
  .pk-viewer { grid-column: 1 / -1; grid-row: 1; }
  .pk-stage { flex: none; height: 62vh; }
  .pk-viewer.pk-max .pk-stage { height: auto; flex: 1; }
  .pk-summary { grid-column: 1; grid-row: 2; align-self: start; }
  .pk-summary[open] .pk-facts { max-height: none; }
  .pk-list { grid-column: 2; grid-row: 2; align-self: start; overflow: visible; }
  .pk-panes:not(:has(.pk-summary)) .pk-list { grid-column: 1 / -1; grid-row: 2; }
}
@media (pointer: coarse) {
  .pk-bar .pk-tool { min-width: 44px; min-height: 44px; padding: 0 12px; }
  .pk-bar .pk-zoom { display: none; }         /* a finger pinches; the bar keeps to one row */
  .pk-item { min-height: 44px; }
  .pk-cat > summary { min-height: 44px; }
  .pk-layers label { min-height: 42px; padding: 4px 6px; }      /* the whole row is the target */
  .pk-layers input { width: 20px; height: 20px; }
  .pk-layer-tools button { min-height: 40px; padding: 0 14px; }
}

/* THE FIRST-VISIT HINT on New Job (owner, 2026-10-01): three steps, dismissible */
.fv-hint { position: relative; margin: 4px 0 18px; padding: 12px 44px 12px 14px; background: var(--hover);
  border: 1px solid var(--line); border-radius: 10px; }
.fv-hint[hidden] { display: none; }
.fv-hint ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.fv-hint li { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.fv-hint li + li::before { content: "\2192"; color: var(--muted); margin-right: 2px; }
.fv-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12.5px;
  font-weight: 700; color: var(--accent); border: 1.5px solid var(--accent); }
.fv-x { position: absolute; top: 6px; right: 6px; margin: 0; min-height: 0; width: 32px; height: 32px; padding: 0;
  font-size: 20px; line-height: 1; font-weight: 400; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 7px; }
.fv-x:hover { color: var(--ink); border-color: var(--line); }
@media (max-width: 640px) {
  .fv-hint ol { flex-direction: column; align-items: flex-start; }
  .fv-hint li + li::before { content: none; }
}
@media (pointer: coarse) { .fv-x { width: 44px; height: 44px; top: 2px; right: 2px; } }