/* CSSVS Intelligence Platform: the brand's charcoal, red and greys; Aptos, square edges. */
:root {
  --charcoal: #231f20; --red: #de2726; --red-on-dark: #ff6b68; --ink: #262626; --muted: #4d4e50;
  --rule: #d0d0d0; --rule-strong: #a6a6a6; --panel: #f4f4f5; --band: #f2f2f2; --nav-hover: #2e2a2b;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* a field a page hides stays hidden whatever its display */
body { margin: 0; background: #ffffff; color: var(--ink);
  font-family: Aptos, Calibri, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: 16px; }
a { color: var(--charcoal); }
a:hover { color: var(--red); }
.shell { display: flex; flex-wrap: wrap; min-height: 100vh; }

nav.side { flex: 1 1 260px; max-width: 290px; background: var(--charcoal); color: #fff; padding: 28px 0;
  display: flex; flex-direction: column; gap: 28px; }
.brand { padding: 0 24px; }
/* The CSSVS / DRC switch at the top of the side bar: one platform, two companies. */
.switch { display: flex; margin: 0 24px; border: 1px solid #4a4e4f; }
.switch a { flex: 1; padding: 6px 0; text-align: center; font-size: 14px; font-weight: 700; letter-spacing: 1px;
  color: #d4d5d7; text-decoration: none; }
.switch a:hover { color: #fff; background: var(--nav-hover); }
.switch a.on { background: #fff; color: var(--charcoal); }
/* The companies' own logo files (design systems, Nov 9), shown as supplied: never redrawn or recoloured. */
.brand .logo img { display: block; max-width: 100%; height: auto; }
.brand .sub { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #d4d5d7; margin-top: 4px; }
.navgroup { display: flex; flex-direction: column; }
.navgroup .label { padding: 0 24px 8px; font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--red-on-dark); }
.navgroup a { padding: 10px 24px 10px 27px; color: #e6e6e7; text-decoration: none; }
.navgroup a:hover { background: var(--nav-hover); color: #fff; }
.navgroup a.on { padding-left: 24px; background: var(--nav-hover); border-left: 3px solid var(--red); color: #fff; font-weight: 700; }
.navgroup span.soon { padding: 10px 24px 10px 27px; color: #b3b4b7; }
.navgroup span.soon small { font-size: 13px; letter-spacing: 1px; margin-left: 6px; }
.who { margin-top: auto; padding: 16px 24px 0; border-top: 1px solid #4a4e4f; font-size: 15px; color: #e6e6e7; }
.who small { color: #d4d5d7; display: block; margin-top: 4px; }

main { flex: 999 1 560px; min-width: 0; padding: 28px 40px 48px; display: flex; flex-direction: column; gap: 24px; }
.kicker { font-size: 14px; font-weight: 700; letter-spacing: 3px; color: var(--red); text-transform: uppercase; }
h1 { margin: 4px 0 0; font-family: "Aptos Display", Aptos, Calibri, sans-serif; font-size: 32px; color: var(--charcoal); }
h2 { margin: 0 0 10px; font-size: 17px; letter-spacing: 0.5px; color: var(--charcoal); text-transform: uppercase;
  border-bottom: 1px solid #bfbfbf; padding-bottom: 8px; }
.crumbs { font-size: 15px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.head .sub { font-size: 17px; color: var(--muted); }
.row { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.col { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.wide { flex: 999 1 760px; }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border: 1px solid var(--charcoal);
  background: #fff; color: var(--charcoal); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; border-radius: 0; }
.btn.dark { background: var(--charcoal); color: #fff; }
.btn:hover { border-color: var(--red); color: var(--red); }
.btn.dark:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn:disabled { opacity: 0.5; cursor: default; }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule); }
.tile { padding: 18px 20px; border-right: 1px solid var(--rule); }
.tile:last-child { border-right: 0; }
.tile .k { font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--muted); }
.tile .v { font-size: 34px; font-weight: 700; color: var(--charcoal); margin-top: 6px; }
.tile .n { font-size: 15px; color: var(--muted); }
.tile.alert .k, .tile.alert .v { color: var(--red); }

table.grid { width: 100%; border-collapse: collapse; font-size: 15px; }
table.grid th { background: var(--charcoal); color: #fff; text-align: left; padding: 10px 12px; font-weight: 700; }
table.grid td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.grid tbody tr:nth-child(even) td { background: var(--band); }
table.grid .num { text-align: right; }
table.grid td .muted, .muted { color: var(--muted); }
table.facts { width: 100%; border-collapse: collapse; font-size: 15px; }
table.facts th { text-align: left; padding: 8px 12px; background: var(--panel); width: 42%; border-bottom: 1px solid var(--rule); font-weight: 700; }
table.facts td { padding: 8px 12px; border-bottom: 1px solid var(--rule); }
.scroll { overflow-x: auto; }
.pill { display: inline-block; padding: 3px 8px; background: var(--panel); font-weight: 700; font-size: 14px; }
.pill.dark { background: var(--charcoal); color: #fff; }
.pill.red { background: var(--red); color: #fff; }

ul.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
ul.checks li { padding: 10px 12px; background: var(--panel); }
ul.checks li.pass { background: #fff; border: 1px solid var(--rule); }
.lvl { font-weight: 700; }
.lvl.fail { color: var(--red); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--rule); font-size: 15px; }
.steps li { padding: 12px 14px; border-right: 1px solid var(--rule); }
.steps li:last-child { border-right: 0; }
.steps li b { display: block; color: var(--charcoal); }
.steps li span { color: var(--muted); }
.steps li.now { background: var(--charcoal); }
.steps li.now b, .steps li.now span { color: #fff; }

.verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; background: var(--charcoal); color: #fff; padding: 14px 18px; }
.verdict .k { font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--red-on-dark); }
.verdict .v { font-size: 22px; font-weight: 700; }
.verdict .n { font-size: 15px; color: #e6e6e7; }

form.stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 760px; }
form.stack .full { grid-column: 1 / -1; }
label.f { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
label.f input, label.f select, textarea.code { height: 38px; border: 1px solid var(--rule-strong); border-radius: 0; font: inherit;
  font-size: 16px; color: var(--ink); font-weight: 400; letter-spacing: 0; padding: 0 10px; text-transform: none; background: #fff; }
textarea.code { height: 460px; width: 100%; padding: 10px 12px; font-family: Consolas, "Cascadia Mono", monospace; font-size: 15px; line-height: 1.45; }
h2.formhead { margin: 14px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--rule-strong); }
label.f textarea { border: 1px solid var(--rule-strong); border-radius: 0; font: inherit; font-size: 16px; color: var(--ink); font-weight: 400;
  letter-spacing: 0; padding: 8px 10px; text-transform: none; background: #fff; resize: vertical; }
label.f.bad input, label.f.bad select, label.f.bad textarea { border-color: var(--red); }
label.f .msg { color: var(--red); letter-spacing: 0; text-transform: none; font-weight: 400; }
.pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pics figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pics img, .pics .nopic { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--rule); }
.pics .nopic { display: flex; align-items: center; justify-content: center; background: var(--panel); color: var(--muted); font-size: 15px; }
.pics figcaption { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.pics input[type=file] { font-size: 14px; max-width: 100%; }
.inline-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.inline-form label.f input { width: 150px; max-width: 100%; }
.inline-form label.f input.long { width: 300px; }

.note { padding: 12px 14px; background: var(--panel); font-size: 15px; }
.note.err { background: #fbebeb; border-left: 3px solid var(--red); }
.note.ok { background: #e5f4e4; }
ul.matches { margin: 8px 0 0; padding-left: 18px; }
fieldset.choices { border: 1px solid var(--rule-strong); padding: 12px 16px; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
fieldset.choices legend { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 0 6px; }
fieldset.choices p { margin: 0; font-size: 15px; }
fieldset.choices label { display: flex; gap: 8px; align-items: baseline; }
.progress { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--charcoal); font-size: 16px; }
.spinner { width: 16px; height: 16px; border: 2px solid var(--rule); border-top-color: var(--red); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
details summary { cursor: pointer; font-weight: 700; color: var(--charcoal); }
footer.foot { font-size: 13px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 10px; margin-top: auto; }

@media (max-width: 760px) {
  main { padding: 20px 16px 32px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  form.stack { grid-template-columns: 1fr; }
  .pics { grid-template-columns: 1fr; }
}

/* The step rail job page and three-step New job (Nov 6 redesign, approved as drawn): 15 px text, sentence-case
   labels, an 8 px grid, one dark button per screen. Used by the DRC ICI and insurance pages so far. */
:root { --ok: #2f7d32; --okbg: #e5f4e4; --amber: #a86400; --amberbg: #fdf1dc; --bad: #c4201f; --badbg: #fbebeb; }
.jobhead { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: flex-start; }
.jobhead .sub { font-size: 17px; color: var(--muted); margin-top: 4px; }
.chip { font-size: 15px; font-weight: 700; padding: 6px 12px; white-space: nowrap; text-decoration: none; }
.chip.warn { background: var(--amberbg); color: var(--amber); }
.stepped { display: grid; grid-template-columns: 250px minmax(0, 1fr); border: 1px solid var(--rule); font-size: 17px; }
ol.rail { list-style: none; margin: 0; padding: 16px 0; border-right: 1px solid var(--rule); position: sticky; top: 0; align-self: start; }
ol.rail a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 10px 20px;
  color: var(--muted); text-decoration: none; border-left: 3px solid transparent; }
ol.rail a:hover { background: var(--panel); color: var(--charcoal); }
ol.rail .n { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule);
  font-size: 15px; font-weight: 700; grid-row: span 2; }
ol.rail small { font-size: 14px; color: var(--muted); }
ol.rail li.done a { color: var(--ink); } ol.rail li.done .n { background: var(--okbg); color: var(--ok); border-color: transparent; }
ol.rail li.part .n { background: var(--amberbg); color: var(--amber); border-color: transparent; }
ol.rail li.now a { background: var(--panel); color: var(--charcoal); border-left-color: var(--red); }
ol.rail li.now .n { background: var(--charcoal); color: #fff; border-color: transparent; }
.stage { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stagehead h2 { border: 0; padding: 0; margin: 0; text-transform: none; letter-spacing: 0; font-family: "Aptos Display", Aptos, Calibri, sans-serif; font-size: 24px; }
.stagehead p, .lede { margin: 2px 0 0; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.card { border: 1px solid var(--rule); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.card small { color: var(--muted); font-size: 15px; } .card b { font-size: 22px; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.groups { display: flex; flex-direction: column; gap: 10px; }
details.grp { border: 1px solid var(--rule); }
details.grp[open] { border-color: var(--charcoal); }
details.grp > summary { list-style: none; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; gap: 4px 14px;
  align-items: baseline; padding: 14px 16px; font-weight: 400; }
details.grp > summary::-webkit-details-marker { display: none; }
details.grp > summary .t { font-weight: 700; color: var(--charcoal); }
details.grp > summary .c { color: var(--muted); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.grp > summary em { font-style: normal; font-size: 15px; font-weight: 700; color: var(--amber); }
details.grp.done > summary em { color: var(--ok); } details.grp.off > summary em { color: var(--muted); }
details.grp > form, details.grp > p, details.grp > .scroll { margin: 0 16px 16px; }
.grpform, .textform, .wform { display: flex; flex-direction: column; gap: 16px; }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
label.fld { display: flex; flex-direction: column; gap: 5px; font-size: 15px; color: var(--muted); min-width: 0; }
label.fld.fullrow { grid-column: 1 / -1; }
label.fld i { font-style: normal; font-size: 13px; color: var(--muted); }
label.fld i.empty { color: var(--amber); }
label.fld.need > span { color: var(--ink); font-weight: 700; } label.fld.need i { color: var(--bad); }
label.fld.need input, label.fld.need select { border-color: var(--bad); }
label.fld input, label.fld select, label.fld textarea, table.edit input { border: 1px solid var(--rule-strong); border-radius: 0; font: inherit;
  font-size: 17px; color: var(--ink); padding: 8px 10px; background: #fff; min-width: 0; width: 100%; }
label.fld textarea { resize: vertical; line-height: 1.45; }
label.fld small { font-size: 14px; }
details.more > summary { font-weight: 400; color: var(--muted); font-size: 16px; }
details.more > summary::before { content: "▸ "; } details.more[open] > summary::before { content: "▾ "; }
details.more[open] > .fields, details.more[open] > .pair { margin-top: 12px; }
.hint { margin: 0; font-size: 15px; color: var(--muted); }
table.edit { border-collapse: collapse; font-size: 16px; min-width: 100%; }
table.edit th { text-align: left; font-size: 14px; font-weight: 700; color: var(--muted); padding: 6px 4px; white-space: nowrap; border-bottom: 1px solid var(--rule); }
table.edit td { padding: 4px; }
table.edit input { font-size: 16px; padding: 6px 8px; min-width: 70px; } table.edit input.txt { min-width: 170px; } table.edit input.num { text-align: right; }
.m-list { display: flex; flex-direction: column; gap: 8px; }
.m-row { padding: 12px 14px; display: flex; gap: 12px; align-items: baseline; }
.m-row i { font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; min-width: 60px; }
.m-row.warn { background: var(--amberbg); } .m-row.warn i { color: var(--amber); }
.m-row.bad { background: var(--badbg); } .m-row.bad i { color: var(--bad); }
.m-row.ok { border: 1px solid var(--rule); } .m-row.ok i { color: var(--ok); }
.m-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.textform h3 { margin: 8px 0 0; font-size: 18px; color: var(--charcoal); }
.buttons.sticky { position: sticky; bottom: 0; background: #fff; padding: 12px 0; border-top: 1px solid var(--rule); }
.files { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
a.file { border: 1px solid var(--rule); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
a.file:hover { border-color: var(--red); } a.file small { color: var(--muted); font-size: 15px; } a.file b { overflow-wrap: anywhere; }
details.moreopts { border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 8px; font-size: 16px; }
details.moreopts > summary { color: var(--muted); font-weight: 400; } details.moreopts[open] > summary { margin-bottom: 10px; }
.wizard { max-width: 680px; display: flex; flex-direction: column; gap: 20px; font-size: 17px; }
ol.wiz { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; border: 1px solid var(--rule); }
ol.wiz li { flex: 1 1 150px; padding: 10px 14px; color: var(--muted); border-right: 1px solid var(--rule); font-weight: 700; font-size: 16px; display: flex; gap: 8px; align-items: center; }
ol.wiz li:last-child { border-right: 0; }
ol.wiz li span { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid currentColor; font-size: 14px; }
ol.wiz li.done { color: var(--ok); } ol.wiz li.now { background: var(--charcoal); color: #fff; }
fieldset.box { border: 1px solid var(--rule); padding: 16px; margin: 0; display: flex; flex-direction: column; gap: 14px; }
fieldset.box legend { font-weight: 700; color: var(--charcoal); padding: 0 6px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.seg { display: flex; flex-direction: column; gap: 10px; } .seg label { display: flex; gap: 8px; align-items: baseline; }
.cards.pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
label.pickcard { border: 1px solid var(--rule-strong); padding: 14px 16px 14px 42px; position: relative; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
label.pickcard input { position: absolute; left: 16px; top: 17px; }
label.pickcard:has(input:checked) { border-color: var(--charcoal); box-shadow: inset 0 0 0 1px var(--charcoal); background: var(--panel); }
label.pickcard small { color: var(--muted); font-size: 15px; }
@media (max-width: 1100px) { .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .stepped { grid-template-columns: minmax(0, 1fr); }
  ol.rail { position: static; border-right: 0; border-bottom: 1px solid var(--rule); padding: 6px 0; display: flex; flex-wrap: wrap; }
  ol.rail li { flex: 1 1 140px; } ol.rail a { padding: 8px 12px; } ol.rail small { display: none; }
  .stage { padding: 18px 16px; } .fields, .pair, .cards.pick { grid-template-columns: minmax(0, 1fr); }
}
.stepped [hidden], .wizard [hidden] { display: none !important; }
details.more > summary { list-style: none; } details.more > summary::-webkit-details-marker { display: none; }
table.edit input.mid { min-width: 120px; }
.claude { border: 1px solid var(--rule); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
form.runform { display: inline-flex; } .m-row form.runform, .m-row .inline-form { margin-top: 8px; } .m-row > span { min-width: 0; }
.cards.pick.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 860px) { .cards.pick.three { grid-template-columns: minmax(0, 1fr); } }
.cards.pick.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 860px) { .cards.pick.two { grid-template-columns: minmax(0, 1fr); } }
.checklist { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; }
.checklist label { display: flex; gap: 10px; align-items: flex-start; }
.checklist input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.checklist small { display: block; color: var(--muted); }

/* A field Claude filled or the platform looked up, until the appraiser saves its group (autofill) */
.fld small.filled { color: #8a5a00; background: #fff4dc; padding: 2px 6px; align-self: flex-start; }
.fld:has(small.filled) input, .fld:has(small.filled) textarea, .fld:has(small.filled) select { border-color: #d9a640; background: #fffbf2; }
td.looked input, td.looked select { border-color: #d9a640; background: #fffbf2; }  /* a cost form figure looked up (title: its page) */
.looked-notes { margin: 4px 0 0 18px; color: #8a5a00; }

/* Archive, at the foot of More options on the job pages */
.archive { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--rule); }

/* Phones and tablets (tested at 375 and 768 px): the side menu folds behind a menu button in a top bar, tap targets
   are at least 44 px, and below 600 px each table row stacks as a card labelled by its column headings (app.js). */
.topbar { display: none; }
@media (max-width: 860px) {
  .shell { flex-direction: column; flex-wrap: nowrap; }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 20;
    min-height: 56px; padding-left: 16px; background: var(--charcoal); color: #fff; }
  .topbar .brand { padding: 0; color: #fff; text-decoration: none; }
  .topbar .logo img { display: block; }
  .menubtn { height: 56px; min-width: 88px; padding: 0 16px; border: 0; border-left: 1px solid #4a4e4f; background: transparent;
    color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
  body.menu-open .menubtn { background: var(--nav-hover); }
  nav.side { display: none; flex: none; max-width: none; padding: 16px 0 20px; gap: 16px; }
  body.menu-open nav.side { display: flex; }
  nav.side > .brand { display: none; }
  .navgroup a, .navgroup span.soon { min-height: 44px; display: flex; align-items: center; }
  .btn { min-height: 44px; }
  ol.rail a { min-height: 44px; }
  label.fld input, label.fld select, label.f input, label.f select { min-height: 44px; }
  details.more > summary, details.moreopts > summary { padding: 12px 0; }
  .seg label, fieldset.choices label { min-height: 44px; align-items: center; }
  .crumbs a, table.grid td a, .m-row a { display: inline-block; padding: 14px 0; margin: -14px 0; }
  .topbar .brand { min-height: 44px; display: flex; align-items: center; }
  .chip { min-height: 44px; display: inline-flex; align-items: center; }
  input[type=file] { min-height: 44px; }
  .buttons input[type=text] { min-height: 44px; max-width: 100%; }
  main code, .m-row span { overflow-wrap: anywhere; }
  .scroll > table.grid { min-width: 0 !important; }
  table.edit.stacks, table.edit.stacks tbody, table.edit.stacks td { display: block; width: 100%; min-width: 0; }
  table.edit.stacks thead { display: none; }
  table.edit.stacks tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 12px;
    border: 1px solid var(--rule); margin-bottom: 10px; padding: 10px 12px; }
  table.edit.stacks td { display: flex; flex-direction: column; gap: 4px; padding: 0; }
  table.edit.stacks td:has(input.txt) { grid-column: 1 / -1; }
  table.edit.stacks input, table.edit.stacks select { min-width: 0; min-height: 44px; }
  .scroll:has(> table.edit.stacks) { overflow: visible; }
}
@media (max-width: 600px) {
  main { padding: 16px 16px 32px; gap: 20px; }
  h1 { font-size: 26px; overflow-wrap: anywhere; }
  .jobhead .chip { white-space: normal; }
  ol.rail li { flex-basis: 45%; }
  .inline-form label.f { flex: 1 1 100%; } .inline-form label.f input, .inline-form label.f input.long { width: 100%; }
  .inline-form .btn, .buttons .btn { flex: 1 1 auto; }
  .cards.pick, .tiles, .steps { grid-template-columns: minmax(0, 1fr); } .tile { border-right: 0; border-bottom: 1px solid var(--rule); }
  table.stacks, table.stacks tbody, table.stacks tfoot, table.stacks tr, table.stacks td, table.stacks th { display: block; width: 100%; }
  table.stacks { min-width: 0 !important; } table.stacks thead { display: none; }
  table.stacks tr { border: 1px solid var(--rule); margin-bottom: 10px; padding: 6px 0; }
  table.grid.stacks td { border: 0; padding: 6px 12px; text-align: left; } table.grid.stacks tbody tr:nth-child(even) td { background: none; }
  table.grid.stacks td[data-label] { position: relative; padding-left: calc(40% + 12px); min-height: 30px; }
  table.grid.stacks td[data-label]::before { content: attr(data-label); position: absolute; left: 12px; top: 8px; width: 38%;
    font-size: 14px; font-weight: 700; color: var(--muted); }
  table.grid.stacks td:empty { display: none; }
  .scroll:has(> table.stacks) { overflow: visible; }
  .m-row { flex-direction: column; gap: 4px; }
  .stage { padding: 16px 12px; } details.grp > form, details.grp > p, details.grp > .scroll { margin: 0 12px 12px; }
  details.grp > summary { padding: 12px; } table.edit.stacks tr { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); padding: 10px; }
  details.grp > summary { grid-template-columns: minmax(0, 1fr) auto; } details.grp > summary .c { grid-column: 1 / -1; grid-row: 2; }
}
.addrow { margin-top: 10px; }
/* The person's sign-out and the owners' link (cssvs.web.signin) */
.who form { margin: 0; }
.whoact { display: block; margin-top: 10px; background: none; border: 0; padding: 0; font: inherit; font-size: 15px; color: #fff; text-decoration: underline; cursor: pointer; min-height: 0; }
.whoact:hover { color: #e6e6e7; }
.sess td small { display: block; color: var(--muted); }
.sess .me { font-size: 14px; color: var(--muted); }
.tablewrap { overflow-x: auto; }
/* The front door */
.door { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--panel); }
.door-band { background: var(--charcoal); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 48px; border-right: 6px solid var(--red); }
.door-band .marks { display: flex; gap: 28px; align-items: center; }
.door-band h1 { font-size: 36px; line-height: 1.15; margin: 0 0 12px; color: #fff; }
.door-band p { color: #d5d6d8; max-width: 30em; margin: 0; }
.door-band small { color: #d4d5d7; }
.door-main { display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: #fff; }
.door-card { width: 100%; max-width: 380px; }
.door-card h2 { margin: 0 0 8px; font-size: 24px; }
.door-card .btn { width: 100%; justify-content: center; margin: 20px 0 14px; min-height: 48px; font-size: 18px; }
.door-card .ms { display: inline-block; width: 18px; height: 18px; margin-right: 10px; vertical-align: -3px;
  background: linear-gradient(to right, #f25022 50%, #7fba00 50%) top / 100% 50% no-repeat, linear-gradient(to right, #00a4ef 50%, #ffb900 50%) bottom / 100% 50% no-repeat; }
@media (max-width: 760px) {
  .door { grid-template-columns: minmax(0, 1fr); }
  .door-band { padding: 28px 16px; border-right: 0; border-bottom: 6px solid var(--red); gap: 24px; }
  .door-band h1 { font-size: 28px; }
  .door-main { padding: 32px 16px; align-items: flex-start; }
}
/* New job: several properties in one report */
.btn.linkish { background: none; border: 0; padding: 4px 0; color: var(--muted); text-decoration: underline; min-height: 0; }
#treatment .seg label small { display: block; margin-left: 24px; }