/* PressDeskOS screens. Every colour, font, and size token is in tokens.css, loaded first; this file uses only var(). */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.5 var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.2; margin: 0 0 .5rem; color: var(--ink); }
h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1rem; }
a { color: var(--grape-dark); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

/* Numbers: right-aligned, tabular figures */
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num, .money, .qty, .code-text, .sku, code, kbd { font-family: var(--font-mono); }
code, .sku, .code-text { font-size: .9em; }
.margin { color: var(--grape-dark); font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* Top bar */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 64px;
}
.brand { font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; color: var(--grape-dark); text-decoration: none; padding: 10px 0; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.nav a {
  display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 14px;
  border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 500;
}
.nav a:hover { background: var(--magnolia); }
.nav a.active { background: var(--grape); color: var(--surface); }
.whoami { display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px 0; }
.whoami-name { font-size: .9375rem; }
@media (max-width: 720px) {
  .nav { order: 3; flex-basis: 100%; padding-bottom: 8px; }
  .whoami { margin-left: auto; }
  .whoami-name { display: none; }
}

/* Page */
.page { max-width: 1280px; margin: 0 auto; padding: 24px 16px 48px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.page-head h1 { margin-bottom: .25rem; }
.page-head p { margin: 0; }
.narrow { max-width: 560px; }

/* Cards */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px;
}
.card + .card { margin-top: 16px; }
.card-link { display: block; text-decoration: none; color: inherit; min-height: 88px; }
.card-link:hover { border-color: var(--wisteria); }
.card-grape { background: var(--grape); border-color: var(--grape); color: var(--surface); }
.card-grape h2, .card-grape h3, .card-grape .muted { color: var(--surface); }
.card-grape .muted { opacity: .85; }
.card-selected { background: var(--magnolia); border-color: var(--wisteria); }
.card h2:first-child, .card h3:first-child { margin-top: 0; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--touch); padding: 0 18px; border-radius: var(--radius-sm);
  font: 600 .9375rem/1 var(--font-body); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background .12s, border-color .12s;
}
.btn:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; }
.btn-primary { background: var(--grape); color: var(--surface); }
.btn-primary:hover { background: var(--grape-dark); }
.btn-secondary { background: var(--surface); color: var(--grape-dark); border-color: var(--input-border); }
.btn-secondary:hover { background: var(--magnolia); border-color: var(--wisteria); }
.btn-danger { background: var(--surface); color: var(--ink); border-color: var(--input-border); }
.btn-danger:hover { background: var(--magnolia); border-color: var(--wisteria); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: .875rem; }
.btn-block { width: 100%; }
.btn[disabled] { background: var(--silver); border-color: var(--silver); color: var(--ink); cursor: default; }

/* Choice buttons: quantity breaks, colour modes */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
/* The pill is the label's own span; spans inside it (the price each, a note) are plain text. */
.choice > span {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); min-width: var(--touch);
  padding: 0 16px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--surface);
  font-weight: 500; font-variant-numeric: tabular-nums;
}
.choice input:checked + span { background: var(--wisteria); border-color: var(--grape); color: var(--ink); font-weight: 600; }
.choice input:focus-visible + span { outline: 3px solid var(--grape); outline-offset: 2px; }

/* Forms */
.stack > * + * { margin-top: 16px; }
.field { display: block; }
.field > span, .field-label { display: block; font-weight: 500; margin-bottom: 6px; font-size: .9375rem; }
.field .help { display: block; margin-top: 4px; font-size: .8125rem; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input[type=tel], input[type=url], select, textarea {
  width: 100%; min-height: var(--touch); padding: 10px 12px; border: 1px solid var(--input-border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: 400 1rem/1.3 var(--font-body);
}
input[type=number] { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--grape); outline-offset: 1px; border-color: var(--grape); }
input[aria-invalid=true], select[aria-invalid=true] { border-color: var(--act-text); }
.field-error { color: var(--act-text); font-size: .8125rem; margin-top: 4px; font-weight: 500; }
.check { display: flex; align-items: center; gap: 12px; min-height: var(--touch); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--grape); flex: none; }
.input-row { display: flex; gap: 8px; align-items: center; }
.input-row input { flex: 1 1 auto; }
.input-suffix { color: var(--muted); white-space: nowrap; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 24px; }
.form-actions .right { margin-left: auto; display: flex; gap: 12px; }
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* Tables */
.table-wrap { overflow-x: auto; position: relative; } /* positioned, so a visually hidden label inside stays inside */
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-weight: 600; font-size: .8125rem; color: var(--ink); text-transform: uppercase; letter-spacing: .02em; }
thead th { background: var(--magnolia); }
tbody tr:hover { background: var(--ground); }
tr.total td { font-weight: 600; border-top: 2px solid var(--input-border); border-bottom: none; }
td .detail { display: block; color: var(--muted); font-size: .8125rem; }
td.actions { white-space: nowrap; text-align: right; }
td.actions a { margin-left: 12px; }

/* Flags and flashes */
.flag {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--magnolia); color: var(--ink); font-weight: 600; font-size: .8125rem;
}
.flash { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-weight: 500; }
/* Success: Grape with white text. Information: Magnolia. Needs someone to act: Signal orange with Ink text. Void, lost, archived: Silver. */
.flash-ok { background: var(--done-bg); color: var(--done-ink, var(--surface)); }
.flash-error { background: var(--act-bg); color: var(--act-ink); }
.flash-ok a { color: var(--done-ink, var(--surface)); }
.flash-error a { color: var(--act-ink); }
.flash-info { background: var(--info-bg); color: var(--info-ink); border-left: 4px solid var(--grape); }
.flash-off { background: var(--silver); color: var(--ink); }
.tag-status, .tag-error, .tag-off { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 600; font-size: .8125rem; }
.tag-status { background: var(--magnolia); color: var(--ink); }
.tag-error { background: var(--act-bg); color: var(--act-ink); }
.tag-off { background: var(--silver); color: var(--ink); }
.empty { padding: 32px; text-align: center; color: var(--muted); }

/* Login */
.login-wrap { min-height: calc(100vh - 64px - 72px); display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 420px; padding: 32px; }
.login-card h1 { margin-bottom: .25rem; }

/* Summary tiles */
.summary { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .summary { grid-template-columns: 1fr; } }
.summary .card { padding: 16px 20px; }
.summary .label { display: block; font-size: .8125rem; font-weight: 500; color: var(--muted); margin-bottom: 4px; }
.summary .value { display: block; font-family: var(--font-mono); font-weight: 700; font-size: 1.75rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.summary .sub { display: block; font-size: .8125rem; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.card-grape .label, .card-grape .sub { color: var(--surface); opacity: .85; }
.summary .value.margin { color: var(--grape-dark); }

/* Calculator */
.calc { display: grid; gap: 16px; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); align-items: start; }
@media (max-width: 960px) { .calc { grid-template-columns: minmax(0, 1fr); } }
.calc-options fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc-options legend { padding: 0; }
.calc-results > * + * { margin-top: 16px; }
.choice-custom span { padding-right: 8px; gap: 8px; }
.choice-custom input[type=number] { width: 96px; min-height: 32px; padding: 4px 8px; border-color: var(--input-border); }
.choice-custom input[type=number]:focus { box-shadow: none; }
.imposition { border-top: 1px solid var(--line); padding-top: 16px; }
.imposition-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 1rem; }
.imposition-summary strong { font-family: var(--font-mono); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.breakdown td:first-child { font-weight: 500; white-space: nowrap; }
.breakdown td:nth-child(2) { max-width: 320px; }
.our-work tr.total td { border-top: 2px solid var(--line); }
.our-work tr.locked td { background: var(--thistle); }
.our-work td:first-child { font-weight: 400; }
.our-work td:nth-child(2) { font-weight: 500; }
.market .input-row { max-width: 260px; }
.market .label { display: block; font-size: .8125rem; font-weight: 500; color: var(--muted); margin-bottom: 4px; }
.market .value { display: block; font-family: var(--font-mono); font-weight: 700; font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.market-result { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 16px; }
.market-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.market-note { margin: 12px 0 0; }
[aria-busy=true] { opacity: .6; transition: opacity .15s; }
.code { background: var(--magnolia); color: var(--grape-dark); font-family: var(--font-mono); padding: 12px 16px; border-radius: var(--radius-sm); font-size: .9375rem; overflow-x: auto; }

/* Forms in cards */
.form-card .form-grid + .form-actions { border-top: 1px solid var(--line); padding-top: 20px; }
.input-row .num { text-align: right; }

/* Tab strip under a page head */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: -8px 0 16px; border-bottom: 1px solid var(--line); }
.tabs a { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 16px; text-decoration: none; color: var(--muted); font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); background: var(--magnolia); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tabs a.active { color: var(--grape-dark); border-bottom-color: var(--grape); font-weight: 600; }

/* Related rows inside a form */
.related { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; }
.related h2 { font-size: 1.0625rem; }
.related-table td { vertical-align: middle; }
.related-table input[type=number], .related-table input[type=text], .related-table select { min-height: 40px; padding: 6px 10px; }

/* Market pricing */
.pricing td { vertical-align: middle; }
.pricing .flag { margin-left: 6px; }

/* Inventory */
td.variance { color: var(--ink); font-weight: 700; }

/* In house or trade comparison */
.compare-table tr.cheaper td { background: var(--magnolia); }
.compare-table tr.cheaper td:first-child { border-left: 3px solid var(--grape); }
.cheaper-tag { color: var(--grape-dark); font-weight: 600; font-size: .8125rem; white-space: nowrap; }
.breaks-table input[type=text], .breaks-table input[type=number], .breaks-table select { min-height: 40px; padding: 6px 10px; }

/* Inventory decisions and reversals */
.card-pending { border-color: var(--grape); }
.card-pending h2 { color: var(--ink); }
tr.reversed td { text-decoration: none; }
tr.reversed td:nth-child(4) { text-decoration: line-through; }
ul.plain { margin: 0; padding-left: 18px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0 0 16px; }
.facts div { display: flex; flex-direction: column; }
.facts dt { font-size: .8125rem; color: var(--muted); }
.facts dd { margin: 0; font-weight: 500; }

/* Section rows inside breakdown and related tables: a heading that spans the table */
tr.section th { background: var(--magnolia); color: var(--grape-dark); font-family: var(--font-head); font-weight: 600; font-size: .8125rem; text-align: left; padding: 8px 12px; }

/* Dashboard */
.dash-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.segmented { display: inline-flex; border: 1px solid var(--wisteria); border-radius: var(--radius-sm); overflow: hidden; }
.segmented a { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 16px; text-decoration: none; color: var(--grape-dark); font-weight: 500; }
.segmented a + a { border-left: 1px solid var(--wisteria); }
.segmented a.active { background: var(--grape); color: var(--surface); }
.dash-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; }
.dash-card .label { font-size: .8125rem; font-weight: 500; color: var(--muted); }
.dash-card .value { font-family: var(--font-mono); font-weight: 700; font-size: 1.75rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.dash-card .sub, .dash-target .sub { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.change-up { color: var(--grape-dark); font-weight: 600; }
.change-down { color: var(--ink); font-weight: 600; }
/* The dashboard's target bar: a filled pill with a pace mark. Not the order stage bar (.stage-progress). */
.progress { position: relative; height: 10px; border-radius: 999px; background: var(--thistle); overflow: visible; margin-top: 6px; }
.progress-fill { display: block; height: 100%; border-radius: 999px; background: var(--grape); max-width: 100%; }
.progress-pace { position: absolute; top: -4px; width: 2px; height: 18px; background: var(--grape-dark); transform: translateX(-1px); }
.dash-target-figure { font-family: var(--font-mono); font-size: 1.25rem; font-variant-numeric: tabular-nums; margin: 4px 0 0; }
.recovery-note { color: var(--grape-dark); }

/* Sidebar: five operation areas */
body.with-sidebar { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
body.with-sidebar .page { max-width: 1200px; width: 100%; margin: 0; }
.sidebar { background: var(--surface); border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar .brand { display: block; padding: 6px 12px 10px; }
.nav-area { margin-bottom: 8px; }
/* Areas fold: the heading bar is the summary of a details element, with a chevron, and the area's badges added up while it is closed. */
.nav-area > summary { display: block; min-height: 0; list-style: none; cursor: pointer; color: inherit; font-weight: inherit; } /* not the general details summary row */
.nav-area > summary::-webkit-details-marker { display: none; }
.nav-area > summary .nav-area-label { display: flex; align-items: center; gap: 8px; }
.nav-area > summary .nav-area-label > span:first-child { flex: 1; }
.nav-area > summary .nav-area-label::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-right: 2px; flex: none; }
.nav-area[open] > summary .nav-area-label::after { transform: rotate(45deg); margin-top: -4px; }
.nav-area[open] .nav-area-badge { display: none; }
.nav-area > summary:focus-visible { outline: 2px solid var(--grape); outline-offset: -2px; }
/* Each area's heading: a square Thistle bar from one edge of the sidebar to the other (through its 12px padding), 8px above and below the label. */
.nav-area-label { margin: 8px -12px 4px; padding: 8px 24px; background: var(--thistle); font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
/* The section holding the current page: its heading dark grape with white text, the rest of it, edge to edge, Magnolia. */
.nav-area.is-current .nav-area-label { background: var(--grape-dark); color: var(--surface); margin-bottom: 0; }
.nav-area.is-current { margin-bottom: 0; }
.nav-area.is-current ul { background: var(--magnolia); margin: 0 -12px; padding: 0 12px 16px 28px; } /* the heading meets the first row; the Magnolia runs on to the next heading */
.nav-area.is-current + .nav-area .nav-area-label { margin-top: 0; }
.nav-area ul { list-style: none; margin: 0; padding: 0 0 0 16px; }
/* Links are square rows from edge to edge of the sidebar, like the heading bars; the text stays where it was (12px sidebar + 16px indent + 12px). */
.nav-area a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--touch); margin: 0 -12px 0 -28px; padding: 0 24px 0 40px; text-decoration: none; color: var(--ink); font-weight: 500; }
.nav-area a:hover { background: var(--magnolia); }
.nav-area.is-current a:hover { background: var(--thistle); } /* on Magnolia, hover goes one step darker */
.nav-area a.active { background: var(--thistle); color: var(--ink); font-weight: 600; box-shadow: inset 4px 0 0 var(--grape); }
.nav-badge { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--grape); color: var(--surface); font-size: .8125rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.sidebar .whoami { margin-top: auto; flex-wrap: wrap; padding: 12px; border-top: 1px solid var(--line); }

/* Job stages: the eight-segment bar, flag pills, the pipeline card, the timeline.
   Its own class: .progress is the dashboard's sales-target bar (a filled pill), and sharing it drew that pill behind every stage bar. */
.stage-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.stagebar { display: inline-flex; gap: 3px; flex: none; }
.seg { width: 14px; height: 8px; border-radius: 2px; background: var(--magnolia); }
.seg-done, .seg-skipped { background: var(--grape); }
.seg-current { background: var(--wisteria); }
.seg-late { background: var(--signal); }
.stage-name { font-weight: 600; font-size: .875rem; white-space: nowrap; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 600; font-size: .8125rem; white-space: nowrap; }
/* Job flags: purple for information, Signal orange only for Late and Overdue, which need someone to act. */
.pill-rush, .pill-same_day { background: var(--grape); color: var(--surface); }
.pill-priority { background: var(--mauve); color: var(--ink); }
.pill-risk { background: var(--surface); color: var(--grape-dark); box-shadow: inset 0 0 0 2px var(--grape); }
.pill-late { background: var(--signal); color: var(--ink); }
.pill-customer { background: var(--magnolia); color: var(--grape-dark); }
.pill-supplier { background: var(--thistle); color: var(--ink); }
.pill-today { background: var(--thistle); color: var(--grape-deep); }
.pipeline { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.pipeline a, .pipeline span.tile { display: flex; flex-direction: column; gap: 4px; min-height: 76px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); background: var(--surface); }
.pipeline a:hover { background: var(--magnolia); }
.pipeline a.active { border-color: var(--grape); box-shadow: inset 0 0 0 1px var(--grape); background: var(--magnolia); }
.pipeline .tile-label { font-size: .8125rem; font-weight: 600; color: var(--muted); }
.pipeline .tile-count { font-family: var(--font-mono); font-weight: 700; font-size: 1.375rem; line-height: 1; font-variant-numeric: tabular-nums; }
.pipeline .tile-bar { height: 4px; border-radius: 2px; background: var(--magnolia); overflow: hidden; margin-top: auto; }
.pipeline .tile-bar span { display: block; height: 100%; background: var(--grape); }
.pipeline-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.pipeline-head h2 { margin: 0; }
.btn-pill { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 16px; border-radius: 999px; background: var(--magnolia); color: var(--grape-dark); font-weight: 600; text-decoration: none; }
.btn-pill:hover { background: var(--thistle); }
.job-desc { color: var(--muted); max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { .pipeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.summary-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .summary-2 { grid-template-columns: 1fr; } }
.confirm-box { margin-top: 20px; padding: 16px 20px; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--surface); }
.confirm-box h2 { margin-bottom: 8px; }
.confirm-box ul { margin: 0 0 12px; padding-left: 20px; }
.confirm-box li { margin: 4px 0; }
.confirm-box .field { max-width: 360px; }
.tag-incomplete { display: inline-block; padding: 1px 9px; border-radius: 999px; font-weight: 600; font-size: .8125rem; color: var(--ink); background: var(--surface); border: 1px dashed var(--ink); white-space: nowrap; }

/* Inquiries */
.search-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.search-row .field { flex: 1 1 280px; }
.search-row .btn { min-height: var(--touch); }
.search-row .add-count { flex: 0 0 120px; }
.pick-list { list-style: none; margin: 12px 0 0; padding: 0; }
.pick-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.pick-list .btn { min-height: var(--touch); }
.choice-row { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.choice-row legend { font-weight: 600; margin-bottom: 4px; padding: 0; }
.unanswered { display: inline-block; padding: 1px 9px; border-radius: 999px; font-weight: 600; font-size: .8125rem; color: var(--ink); background: var(--surface); border: 1px dotted var(--ink); }
.history { list-style: none; margin: 0; padding: 0; }
.history li { padding: 6px 0; border-top: 1px solid var(--line); }
details summary { cursor: pointer; min-height: var(--touch); display: flex; align-items: center; font-weight: 600; color: var(--grape-dark); }
.question-set { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px 16px; margin: 16px 0 0; }
.question-set legend { font-family: var(--font-head); font-weight: 600; padding: 0 6px; }
.question { padding: 8px 10px; border-radius: var(--radius-sm); border-left: 3px solid transparent; }
.question-open { border-left: 3px dotted var(--ink); background: var(--ground); }
.question select, .question input[type=text] { width: 100%; }
.field-label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: 4px; }
.estimate-box { margin: 8px 0 16px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--ground); }
.estimate-box form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; }
.estimate-box p { margin: 0; }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.custom-breakdown { margin-top: 16px; }
.custom-breakdown > summary { padding: 0 4px; }
.copies-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 12px; align-items: end; }
.copies-finish { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin: 8px 0 16px; }

/* Branding: the Quinprint logo, and PressDeskOS for staff */
.sidebar .brand { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.brand-logo { display: block; height: 30px; width: auto; }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; letter-spacing: .01em; color: var(--grape-dark); line-height: 1.2; }
.brand-version { font-family: var(--font-mono); font-size: .8125rem; color: var(--muted); }
.topbar-public .topbar-inner { min-height: 72px; }
.brand-logo-public { display: block; height: 34px; width: auto; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 20px; }
.login-logo { display: block; height: 96px; width: auto; }
.login-wrap { min-height: calc(100vh - 72px); }
.send-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 12px; }
.send-to-details { flex-basis: 100%; }
.send-to-details summary { min-height: var(--touch); font-size: .875rem; }
.email-tick { min-height: auto; gap: 8px; font-size: .875rem; flex-basis: 100%; }
.email-tick input { width: 18px; height: 18px; }
.send-to { display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); margin: 4px 0 8px; }
/* A send form that is also an action (1.1.0 fix): it wraps as a row, its full-width parts kept inside it. */
.send-form.action { flex-direction: row; }
.send-form > * { min-width: 0; max-width: 100%; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 12px; }
.filter-bar .field { flex: 1 1 160px; }
.filter-bar .filter-q { flex: 3 1 260px; }
.filter-actions { display: flex; align-items: center; gap: 8px; }
.filter-actions .btn { min-height: var(--touch); }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.pager .btn { min-height: var(--touch); }
.onboard .stack { display: flex; flex-direction: column; gap: 12px; }
.when-applies summary { min-height: var(--touch); }

/* The guided New inquiry */
.interview { display: flex; flex-direction: column; gap: 16px; }
.interview .step { border: 1px solid var(--line); margin: 0; }
.interview .step legend { font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem; display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.step-no { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grape); color: var(--surface); font-size: .875rem; }
.choice-col { border: 0; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 2px; }
.choice-col legend { font-weight: 600; margin-bottom: 4px; padding: 0; }
.product-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; margin-bottom: 12px; }
input[type=search]::-webkit-search-decoration { -webkit-appearance: none; }.adjust-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; margin-top: 8px; }
.adjust-row form { margin: 0; }
.adjust { flex: 1 1 100%; }
.adjust summary, .adjust-log summary { min-height: var(--touch); }
.adjust-form input.num { max-width: 110px; }

/* A margin shows no state until v1.0.2, except a price below its direct cost or below the trade floor, which needs someone to act. */
.band { display: inline-block; padding: 1px 9px; border-radius: 999px; font-weight: 600; font-size: .8125rem; white-space: nowrap; font-family: var(--font-body); }
.band-act { background: var(--act-bg); color: var(--act-ink); }

/* Boards: the sales pipeline and production (1.0.1). Stages darken as a deal or job moves on:
   Magnolia, Thistle, Mauve, Grape; lost and archived Silver. Column bodies are the stage tinted with Surface. */
/* The pipeline's sales target and filters (1.0.7): side by side on a wide screen, so the board keeps the height. */
.pipeline-top { display: grid; gap: 12px; margin-bottom: 12px; }
.pipeline-top > .card + .card { margin-top: 0; }
.pipeline-top .filter-bar { margin-bottom: 0; }
@media (min-width: 1100px) { .pipeline-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Start a conversation (1.0.7): a panel from the page header, over the board on its right. */
.start-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 45; width: min(440px, 100vw); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -8px 0 24px color-mix(in srgb, var(--ink) 12%, transparent); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.start-drawer[hidden] { display: none; }
.start-drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.start-drawer-head h2 { margin: 0; font-size: 1.125rem; }
.start-drawer-head p { margin: 2px 0 0; }
.start-results { display: flex; flex-direction: column; gap: 12px; }
.start-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); }
.start-tab { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch); padding: 0 12px; color: var(--ink); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.start-tab:hover { background: var(--magnolia); }
.start-tab[aria-selected="true"] { border-bottom-color: var(--grape); color: var(--grape-dark); }
.start-tab-count { font-family: var(--font-mono); font-size: .8125rem; font-weight: 500; color: var(--muted); }
.start-list { display: flex; flex-direction: column; gap: 8px; }
.start-list[hidden] { display: none; }
.inbound-count { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 14px; border-radius: 999px; background: var(--magnolia); color: var(--ink); font-size: .875rem; font-weight: 500; text-decoration: none; }
.inbound-count:hover { background: var(--thistle); }
.inbound-count.is-late { background: var(--signal); color: var(--ink); font-weight: 600; }
.start-item { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.start-item .btn { align-self: flex-start; }
.start-item-due { border-left: 4px solid var(--grape); }
.start-item-top { display: flex; justify-content: space-between; gap: 8px; }
.start-none { margin: 0; padding: 0 4px; }
.start-search { display: flex; gap: 8px; }
.start-search input { min-width: 0; }
.log-inbound summary { min-height: var(--touch); font-size: .875rem; }
.log-inbound form { padding: 8px 0 4px; }
.board-wrap { flex: 999 1 760px; min-width: 0; overflow-x: auto; padding-bottom: 8px; }
.board { display: flex; gap: 12px; align-items: flex-start; min-width: max-content; }
.board-col { width: 250px; flex: 0 0 250px; border-radius: var(--radius-sm); overflow: hidden; min-height: 420px; background: var(--ground); }
.board-col-head { padding: 12px 14px; }
.board-col-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.board-col-title h2 { margin: 0; font-size: .9375rem; color: inherit; }
.board-col-head .money { font-size: .8125rem; margin-top: 2px; }
.board-cards { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.board-empty { margin: 4px; }
.board-col.is-over { outline: 3px solid var(--grape); outline-offset: -3px; }
.stage-conversation .board-col-head { background: var(--thistle); color: var(--ink); }
.stage-conversation { background: color-mix(in srgb, var(--thistle) 35%, var(--surface)); }
.stage-estimate .board-col-head { background: var(--mauve); color: var(--ink); }
.stage-estimate { background: color-mix(in srgb, var(--mauve) 30%, var(--surface)); }
.stage-won .board-col-head { background: var(--grape); color: var(--surface); }
.stage-won { background: color-mix(in srgb, var(--grape) 14%, var(--surface)); }
.stage-lost .board-col-head { background: var(--silver); color: var(--ink); }
.stage-lost { background: color-mix(in srgb, var(--silver) 30%, var(--surface)); }
.deal-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.deal-card[draggable] { cursor: grab; }
.deal-card.is-dragging { opacity: .5; }
.deal-card:hover { border-color: var(--wisteria); }
.deal-card:target { box-shadow: 0 0 0 3px var(--grape); }
.deal-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.deal-ref { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); }
.deal-who { font-weight: 600; font-size: .875rem; color: var(--ink); text-decoration: none; }
.deal-who:hover { text-decoration: underline; }
.deal-what { font-size: .8125rem; }
.deal-foot { display: flex; justify-content: space-between; gap: 6px; font-size: .75rem; color: var(--muted); }
.deal-foot .money { color: var(--ink); white-space: nowrap; }
.deal-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.deal-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.deal-actions form { margin: 0; }
.move-menu summary { min-height: 32px; font-size: .8125rem; color: var(--grape-dark); }
.move-options { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.move-options form { margin: 0; }
.chip { display: inline-block; font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--magnolia); color: var(--ink); }
.chip-sent { background: var(--thistle); color: var(--ink); }
.chip-approved, .chip-won { background: var(--grape); color: var(--surface); }
.chip-declined, .chip-lost, .chip-expired { background: var(--silver); color: var(--ink); }
.chip-changes_requested { background: var(--signal); color: var(--ink); }
.filter-note { flex-basis: 100%; margin: 0; }
.lost-dialog { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; max-width: 420px; width: calc(100% - 32px); background: var(--surface); color: var(--ink); }
.lost-dialog::backdrop { background: color-mix(in srgb, var(--ink) 40%, transparent); }
@media (max-width: 900px) {
  /* A phone scrolls the board one column at a time. */
  .board-wrap { scroll-snap-type: x mandatory; }
  .board-col { scroll-snap-align: start; width: calc(100vw - 48px); flex-basis: calc(100vw - 48px); max-width: 320px; }
}

/* The production board in the Grape theme (1.0.6, docs/design/production_board.dc.html): every column Magnolia, the card's order colour on its top edge and number. */
.board-production .board-col { width: 220px; flex-basis: 220px; background: var(--magnolia); border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.board-production .board-col-head { background: none; padding: 2px 4px; color: var(--ink); }
.board-production .board-col-title h2 { font-size: .875rem; }
.board-production .board-col-title span { font-size: .8125rem; color: var(--muted); }
.board-production .board-cards { padding: 0; }
.board-production .line-card .deal-who { font-size: .875rem; line-height: 1.3; }
.board-production .line-card .pill { font-size: .75rem; font-weight: 500; padding: 2px 8px; }
.board-production .line-card .pill-customer { background: var(--magnolia); color: var(--muted); }
.production-filters .filter-pill { min-height: 40px; font-weight: 500; }
.production-filters .filter-pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.line-card { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--order-colour, var(--grape)); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; cursor: grab; }
.line-card.is-dragging { opacity: .5; }
.line-card.is-selected { box-shadow: 0 0 0 2px var(--order-colour, var(--grape)); }
.line-card:target { box-shadow: 0 0 0 3px var(--grape); }
.line-ref { font-family: var(--font-mono); font-size: .75rem; font-weight: 600; color: var(--order-colour, var(--grape-dark)); text-decoration: none; }
.line-ref:hover { text-decoration: underline; }
.board-production .deal-top { flex-wrap: wrap; row-gap: 4px; }
.board-production .line-ref { white-space: nowrap; }
.order-colour-1 { --order-colour: var(--order-1); }
.order-colour-2 { --order-colour: var(--order-2); }
.order-colour-3 { --order-colour: var(--order-3); }
.order-colour-4 { --order-colour: var(--order-4); }
.order-colour-5 { --order-colour: var(--order-5); }
.order-colour-6 { --order-colour: var(--order-6); }
.segmented-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-pill { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 14px; border-radius: 999px; border: 1px solid var(--input-border); background: var(--surface); color: var(--ink); font-weight: 500; text-decoration: none; }
.filter-pill:hover { border-color: var(--wisteria); background: var(--magnolia); }
.filter-pill[aria-pressed="true"] { background: var(--grape); border-color: var(--grape); color: var(--surface); }
.order-panel { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.order-panel .order-lines { flex: 999 1 640px; min-width: 0; border-top: 4px solid var(--order-colour, var(--grape)); }
.order-panel .order-next { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.order-panel .order-next form { margin: 0; }
.order-lines-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.order-lines-head h2 { margin: 2px 0 0; }
.order-lines-progress { text-align: right; }
.order-lines-count { font-size: 1.25rem; font-weight: 600; }
.lines-bar { height: 8px; border-radius: 999px; background: var(--magnolia); overflow: hidden; display: flex; margin: 14px 0; }
.lines-bar-out { background: var(--grape); }
.lines-bar-ready { background: var(--mauve); }
.lines-table td { vertical-align: top; }
.line-change summary { min-height: 32px; font-size: .875rem; }
.line-change form { min-width: 220px; padding: 8px 0; }
.btn-left { justify-content: flex-start; text-align: left; height: auto; min-height: var(--touch); padding: 10px 14px; line-height: 1.3; }
.pchip-awaiting_files, .pchip-proofing, .pchip-printing, .pchip-finishing, .pchip-packing, .pchip-with_supplier { background: var(--thistle); color: var(--grape-deep); }
.pchip-ready, .pchip-out { background: var(--grape); color: var(--surface); }
@media (max-width: 900px) {
  .board-production .board-col { width: calc(100vw - 48px); flex-basis: calc(100vw - 48px); max-width: 320px; }
  .order-lines-progress { text-align: left; }
}

/* The menu (1.0.1): PressDeskOS and the running version at the top of the sidebar. Below 900px wide the sidebar
   becomes a top bar with the menu button, the name and version, and the page's title; the button opens the menu
   as a panel over the page. */
.sidebar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 4px 12px 8px; }
.sidebar .sidebar-head .brand { padding: 0; }
.menu-close, .mobile-bar { display: none; }
.nav-area > summary { min-height: var(--touch); }
.menu-scrim[hidden] { display: none; }
@media (max-width: 899px) {
  body.with-sidebar { display: block; }
  .mobile-bar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 30; min-height: 56px; padding: 6px 16px 6px 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .menu-button { flex: none; width: var(--touch); height: var(--touch); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
  .menu-button:focus-visible, .menu-close:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; }
  .menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 1px; }
  .menu-icon { position: relative; }
  .menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
  .menu-icon::before { top: -6px; }
  .menu-icon::after { top: 6px; }
  .mobile-brand { display: flex; flex-direction: column; flex: none; text-decoration: none; line-height: 1.1; }
  .mobile-brand .brand-name { font-size: 1rem; }
  .mobile-brand .brand-version { font-size: .75rem; }
  .mobile-title { flex: 1 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; width: min(320px, 88vw); height: auto; transform: translateX(-105%); transition: transform .18s ease-out; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; }
  body.menu-open .sidebar { transform: none; box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--ink) 35%, transparent); }
  body.menu-open { overflow: hidden; }
  .menu-scrim { position: fixed; inset: 0; z-index: 40; background: transparent; }
  .menu-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--touch); height: var(--touch); border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
  .page { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }.sidebar .brand, .mobile-brand { min-height: var(--touch); justify-content: center; }
.sidebar .whoami .btn { min-height: var(--touch); }
.card-grape .margin, .card-grape a { color: var(--surface); }
tr.is-copied td { background: var(--magnolia); }

/* Files by product (1.0.2): one row per file being sent, each with its own progress. */
.upload-progress { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.upload-progress li { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 2px 12px; align-items: center; font-size: .875rem; }
.upload-progress .upload-name { overflow-wrap: anywhere; }
.upload-progress progress { width: 100%; height: 8px; accent-color: var(--grape); }
.upload-progress .upload-state { grid-column: 1 / -1; color: var(--muted); font-size: .8125rem; }
.upload-progress li.is-failed .upload-state { color: var(--signal-text); }
.upload-progress > a { justify-self: start; margin-top: 6px; }
.upload-section { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.upload-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.upload-section h3 { margin: 0 0 4px; font-size: 1rem; }
.proof-covers { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; border: 0; }
.proof-covers label { display: inline-flex; gap: 6px; align-items: center; }

/* The line calculator (1.0.2; one calculator everywhere in 1.0.3), to docs/design/line_calculator.dc.html:
   the orange bar when something is below cost, five tiles, the table with margin and price inputs, and beside it
   Target price, Discount, and Where the price goes. Changed rows are Magnolia; a row below cost has orange inputs. */
.line-calc { display: flex; flex-direction: column; gap: 20px; }
.calc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.calc-head h1 { margin: 0; }
.calc-crumb { font-size: .8125rem; color: var(--muted); margin: 0 0 6px; }
.calc-imposition { margin: 6px 0 0; font-family: var(--font-mono); font-size: .8125rem; color: var(--muted); }
.calc-quantities { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.calc-quantities a { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid var(--input-border); background: var(--surface); color: var(--ink); font-weight: 500; text-decoration: none; }
.calc-quantities a[aria-current] { background: var(--grape); border-color: var(--grape); color: var(--surface); font-weight: 600; }
.calc-quantities a.calc-add { border-style: dashed; border-color: var(--wisteria); background: transparent; color: var(--grape-dark); }
.calc-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--signal); color: var(--ink); }
.calc-notice[hidden] { display: none; }
.calc-notice-text { display: flex; align-items: center; gap: 12px; }
.calc-notice-text strong { display: block; font-size: 1rem; }
.calc-notice-text span { font-size: .875rem; }
.calc-notice-button { height: 40px; padding: 0 16px; border-radius: var(--radius-sm); border: 2px solid var(--ink); background: transparent; color: var(--ink); font: 600 .875rem var(--font-body); cursor: pointer; }
.calc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.calc-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.calc-tile .label { font-size: .8125rem; color: var(--muted); }
.calc-tile .value { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.calc-tile .sub { font-size: .8125rem; color: var(--muted); }
.calc-tile-price { background: var(--grape); border-color: var(--grape); color: var(--surface); }
.calc-tile-price .label, .calc-tile-price .sub { color: var(--magnolia); }
.calc-keeps { border: 2px solid var(--grape); }
.calc-keeps .label { font-weight: 600; color: var(--ink); }
.calc-keeps .value, .calc-keeps .sub { color: var(--grape-dark); }
.calc-keeps.is-negative { border-color: var(--signal); }
.calc-keeps.is-negative .value, .calc-keeps.is-negative .sub { color: var(--signal-text); }
.calc-body { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.calc-table-card { flex: 999 1 640px; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.calc-table-card .table-wrap { margin: 0; }
.calc-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.calc-table thead th { padding: 14px 12px; background: var(--magnolia); color: var(--muted); font-size: .8125rem; font-weight: 600; text-transform: none; letter-spacing: normal; border-bottom: 1px solid var(--line); }
.calc-table thead th:first-child { padding-left: 16px; }
.calc-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.calc-table td:first-child { padding: 12px 16px; }
.calc-col-margin { width: 130px; }
.calc-col-price { width: 150px; }
.calc-col-reset { width: 72px; text-align: right; padding-right: 16px; }
.calc-item { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; }
.calc-note { font-size: .8125rem; color: var(--muted); }
.calc-labour { text-align: right; font-size: .8125rem; color: var(--muted); }
.calc-cost, .calc-profit { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.calc-cost { color: var(--muted); }
.calc-input-wrap { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--muted); }
.calc-input { height: 40px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--input-border); border-radius: 6px; font: 500 .9375rem var(--font-mono); color: var(--ink); background: var(--surface); text-align: right; }
.calc-input-margin { width: 80px; }
.calc-input-price { width: 104px; }
/* A row's minutes or deliveries (1.1.11), under its note. */
.calc-amount { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; }
.calc-amount label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.calc-amount .calc-was { margin-top: 0; }
.calc-amount .calc-input-amount { width: 72px; height: 34px; flex: none; }
.calc-input-wide { flex: 1; min-width: 0; height: 44px; text-align: left; font-size: 1rem; }
.calc-input:disabled { background: var(--ground); color: var(--muted); }
.calc-was { margin-top: 4px; font-size: .75rem; color: var(--grape-dark); }
.calc-was[hidden] { display: none; }
.calc-reset { height: 36px; padding: 0 10px; border: 1px solid var(--input-border); border-radius: 6px; background: var(--surface); color: var(--grape-dark); font: 500 .8125rem var(--font-body); cursor: pointer; }
.calc-reset[hidden] { display: none; }
.calc-table .calc-row.is-changed td { background: var(--magnolia); }
.calc-table .is-below .calc-input { border-color: var(--signal); border-width: 2px; }
.calc-table .is-below .calc-profit { color: var(--signal-text); font-weight: 700; }
.calc-table .calc-total td { padding: 14px 12px; background: var(--ground); font-weight: 600; font-family: var(--font-mono); border-bottom: 0; }
.calc-table .calc-total td:first-child { padding-left: 16px; font-family: var(--font-body); }
.calc-save { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.calc-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.calc-panel { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.calc-panel h2 { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.calc-panel-text { margin: 0; font-size: .875rem; color: var(--muted); }
.calc-panel-row { display: flex; gap: 8px; align-items: center; color: var(--muted); }
.calc-panel-row select { width: auto; height: 44px; }
.calc-panel-label { width: 72px; font-size: .875rem; color: var(--muted); }
.calc-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-discount-form { display: flex; flex-direction: column; gap: 10px; }
.calc-discount-form p { margin: 0; }
.calc-target-msg { font-size: .875rem; font-weight: 600; color: var(--signal-text); }
.calc-target-msg[hidden] { display: none; }
.calc-goes { display: flex; justify-content: space-between; gap: 12px; font-size: .875rem; }
.calc-goes .mono { font-family: var(--font-mono); }
.calc-goes-total { font-weight: 600; border-top: 1px solid var(--line); padding-top: 10px; }
.calc-goes .is-negative { color: var(--signal-text); }
.tag-error[hidden] { display: none; }
.calc-request-actions { display: inline-flex; gap: 8px; margin-left: 8px; vertical-align: middle; }
.calc-request-actions form { display: inline; }
.calc-extras { margin-top: 16px; }

/* The product builder (1.0.2): steps down the side, the product's summary bar, and the margin grid. */
.builder { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .builder { grid-template-columns: minmax(0, 1fr); } }
.builder-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.builder-steps a, .builder-steps .builder-step-link, .builder-steps span:not(.builder-n) { display: flex; align-items: center; gap: 10px; min-height: var(--touch); padding: 0 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); }
.builder-steps li.is-current > span { background: var(--magnolia); font-weight: 600; color: var(--grape-dark); }
.builder-steps li.is-later > span { color: var(--muted); }
.builder-steps a:hover, .builder-steps .builder-step-link:hover { background: var(--magnolia); }
.builder-steps .builder-step-link { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.builder-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--wisteria); font-size: .8125rem; font-weight: 600; }
.builder-steps li.is-current .builder-n { background: var(--grape); border-color: var(--grape); color: var(--surface); }
.builder-steps li.is-done .builder-n { background: var(--thistle); border-color: var(--thistle); }
@media (max-width: 900px) { .builder-steps ol { grid-auto-flow: column; overflow-x: auto; } }
.builder-summary { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: .875rem; }
.builder-summary .mono, .builder-grid .mono { font-family: var(--font-mono); }
.builder-grid th[scope=row] { text-align: left; font-weight: 600; }
.builder-grid td.is-changed { background: var(--magnolia); }
.builder-grid .calc-input { width: 72px; min-height: 34px; padding: 4px 6px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); font-family: var(--font-mono); }
.builder-grid tfoot th, .builder-grid tfoot td { border-top: 1px solid var(--line); }

/* Discounts (1.0.2) */
.discount-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.discount-form .field { margin: 0; }
.discount-inputs { display: flex; flex-wrap: wrap; gap: 8px; }
.discount-inputs select { width: auto; }
.discount-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.money-was { text-decoration: line-through; color: var(--muted); }

/* Tighter lists (1.0.2): a search box, sortable headers, and on a phone the first two columns and the status. */
.list-search { display: block; width: min(320px, 100%); margin: 0 0 12px; }
table[data-list] th .sort-button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; }
table[data-list] th .sort-button:focus-visible { outline: 2px solid var(--grape); outline-offset: 2px; }
table[data-list] th[aria-sort=ascending] .sort-button::after { content: "\25B2"; font-size: .625rem; }
table[data-list] th[aria-sort=descending] .sort-button::after { content: "\25BC"; font-size: .625rem; }
@media (max-width: 640px) {
  table[data-list] th:nth-child(n+3):not(.col-status), table[data-list] td:nth-child(n+3):not(.col-status) { display: none; }
}

/* Less grey text (1.0.2): one tooltip, a small info button beside the label or heading. */
.tip-holder { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.tip-button { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 1px solid var(--wisteria); border-radius: 999px; background: var(--surface); color: var(--grape-dark); font: 600 .75rem/1 var(--font-body); cursor: pointer; }
.tip-button::before { content: "i"; font-style: italic; }
.tip-button:hover, .tip-button[aria-expanded=true] { background: var(--magnolia); }
.tip-button:focus-visible { outline: 2px solid var(--grape); outline-offset: 2px; }
.tip-box { position: absolute; z-index: 30; top: calc(100% + 6px); left: -8px; width: max-content; max-width: min(340px, 80vw); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); font-size: .8125rem; font-weight: 400; line-height: 1.45; text-transform: none; letter-spacing: normal; white-space: normal; }
.tip-box[hidden] { display: none; }
.tip[hidden] { display: none; } /* a help text once it is a tooltip, even inside a .field */

/* Phone fixes (1.0.2): long links wrap, marked tables stack, and order sections fold to a heading and summary. */
.card code, .flash code { overflow-wrap: anywhere; word-break: break-word; }
.phone-toggle { all: unset; cursor: default; }
.phone-summary { display: none; }
@media (max-width: 640px) {
  table[data-stack] thead { display: none; }
  table[data-stack], table[data-stack] tbody, table[data-stack] tr, table[data-stack] td { display: block; width: 100%; }
  table[data-stack] tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  table[data-stack] td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
  table[data-stack] td::before { content: attr(data-label); color: var(--muted); font-weight: 600; text-align: left; flex: 0 0 auto; }
  table[data-stack] td:not([data-label])::before, table[data-stack] td[data-label=""]::before { content: none; }
  table[data-stack] td:empty { display: none; }
  .phone-folded .phone-toggle { cursor: pointer; display: flex; justify-content: space-between; width: 100%; }
  .phone-folded .phone-toggle::after { content: "+"; font-weight: 700; color: var(--grape-dark); }
  .phone-folded.is-open .phone-toggle::after { content: "\2212"; }
  .phone-folded .phone-toggle:focus-visible { outline: 2px solid var(--grape); outline-offset: 2px; }
  .phone-folded:not(.is-open) > :not(h2):not(.phone-summary) { display: none; }
  .phone-folded:not(.is-open) .phone-summary { display: block; margin: 4px 0 0; color: var(--muted); font-size: .875rem; }
  .phone-folded:not(.is-open) { padding-bottom: 12px; }
}

/* The one modifier picker (1.1.6, partials/modifier-picker.php): one row each, the name with its tooltip on the left,
   its price or its group's dropdown on the right; the ones on when the screen opened first, then A to Z. */
.mod-picker { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.mod-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mod-row { display: flex; align-items: center; gap: 8px 12px; min-height: var(--touch); padding: 4px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.mod-row[hidden] { display: none; }
.mod-row .mod-name { flex: 1; min-width: 0; }
.mod-row input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--grape); flex: none; }
.mod-select select { width: 58%; flex: none; }
.mod-check { display: flex; align-items: center; gap: 8px; }
.mod-check .mod-name { flex: 1; min-width: 0; }
.mod-price, .mod-check .mod-price { font-family: var(--font-mono); font-size: .875rem; white-space: nowrap; }
.mod-picker .mod-member { padding-left: 24px; }
.mod-picker .input-override { max-width: 110px; }
.mod-picker .check { min-height: auto; }
@media (max-width: 640px) {
  .mod-select { flex-wrap: wrap; }
  .mod-select select { max-width: 100%; width: 100%; }
}

/* Sales targets (1.0.4): the team's bar, a sales user's own, and everyone's for an admin. Behind pace is Signal orange. */
.sales-target h2 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.progress.is-behind .progress-fill { background: var(--act-bg); }
.target-pace { margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.sales-target .sub { margin: 4px 0 0; }
.target-mine, .target-people { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.target-mine h3 { font-size: 1rem; margin: 0; }
.target-person + .target-person { margin-top: 12px; }
.target-person-head { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.targets-table tr.is-current td { background: var(--magnolia); font-weight: 600; }
.target-figure { font-size: 1.125rem; margin: 4px 0 0; }
.target-figure strong, .target-figure .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.share-input { width: 90px; min-width: 70px; text-align: right; }

/* Pays its way (1.0.4): one verdict under a line price, and its Market prices. Short is information, not a notice:
   only Below cost asks someone to act. */
.verdict { display: block; margin-top: 4px; font-size: .8125rem; font-weight: 600; }
.verdict.is-pays { color: var(--grape-dark); }
.verdict.is-short { color: var(--ink); }
.verdict a { margin-left: 4px; }
.verdict-market { display: block; }
.calc-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: .8125rem; font-weight: 600; }
.calc-verdict[hidden], .calc-keeps .sub[hidden] { display: none; }
.calc-verdict.is-short { background: var(--surface); color: var(--ink); border-radius: 8px; padding: 2px 8px; }
.calc-use { min-height: 32px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--surface); background: var(--surface); color: var(--grape-dark); font: inherit; font-weight: 700; cursor: pointer; }
.calc-verdict.is-short .calc-use { border-color: var(--grape); }
.calc-market { display: block; margin-top: 4px; }
.price-check-total td { border-top: 2px solid var(--line); font-size: 1rem; }
.price-check-working summary { cursor: pointer; color: var(--grape-dark); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.num.is-negative { color: var(--act-text); }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field > legend { display: block; font-weight: 500; margin-bottom: 6px; font-size: .9375rem; padding: 0; }

/* The job and order panels on the production board (1.0.8): from the right at full window height, 40% of the window
   wide (560px to 720px), the board staying visible and usable to their left. A panel scrolls on its own under its
   header (the number, stage, title, the card above and below, Open the job, Open the order, Close), pinned at the
   top. Kept tight: the Proof bar on one line, done and future steps one line each, the current step open, the job
   ticket folded at the bottom. On a phone it opens full screen. */
:root { --panel-w: clamp(560px, 40vw, 720px); }
.line-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: var(--panel-w); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-left: 2px solid var(--grape); box-shadow: -8px 0 24px rgba(6, 7, 14, .12); padding: 0; }
.line-panel[hidden] { display: none; }
.line-panel-head { position: sticky; top: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--line); padding: 14px 20px 12px; display: flex; justify-content: space-between; gap: 10px 12px; align-items: flex-start; flex-wrap: wrap; }
.line-panel-title { flex: 1 1 220px; min-width: 0; }
.line-panel-head h2 { margin: 2px 0; font-size: 1.125rem; }
.line-panel-ref { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.line-panel-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.panel-step-cards { display: inline-flex; gap: 4px; }
.panel-step-cards[hidden] { display: none; }
.btn-icon { min-width: 40px; padding-left: 0; padding-right: 0; justify-content: center; }
.line-panel-body { padding: 14px 20px 28px; display: flex; flex-direction: column; gap: 12px; }
.line-panel-others h3 { font-size: .9375rem; margin: 0 0 6px; }
.line-panel-others ul { margin: 0; }
.line-panel-others li { margin-bottom: 4px; }
.line-panel .job-steps { gap: 6px; }
.line-panel .job-proof-bar { padding: 8px 14px; gap: 6px 10px; }
.line-panel .job-proof-bar > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1 1 200px; }
.line-panel .job-proof-bar h2 { white-space: nowrap; font-size: .875rem; }
.line-panel .job-proof-bar p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.line-panel .job-proof-bar { flex-wrap: nowrap; }
.line-panel .job-proof-form { display: flex; align-items: center; flex: none; }
.line-panel .job-proof-form .consequence, .line-panel .job-step-skip .consequence { display: none; }
.line-panel .job-step { padding: 7px 14px; }
.line-panel .job-step.is-current { padding: 12px 14px; }
.line-panel .job-step-head { gap: 10px; }
.line-panel .job-step-head h2 { font-size: .9375rem; }
.line-panel .job-step-mark { width: 24px; height: 24px; flex-basis: 24px; font-size: .75rem; }
.line-panel .job-step-body { padding-left: 34px; }
.line-panel .job-step.is-skipped { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.line-panel .job-step.is-skipped .job-step-head { flex: 0 0 auto; }
.line-panel .job-step.is-skipped .job-step-status { display: none; }
.line-panel .job-step-skip { padding: 0; flex: 1 1 200px; }
.line-panel .notes { background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; }
.line-panel .notes h2 { font-size: .9375rem; }
.line-card.is-open { outline: 3px solid var(--grape); outline-offset: 2px; }
.line-panel h2[tabindex="-1"]:focus { outline: none; }
.link-button { background: none; border: 0; padding: 0; min-height: 32px; color: var(--grape-dark); text-decoration: underline; font: inherit; cursor: pointer; text-align: left; }
.panel-blocked { margin: 0; }
.panel-behind { margin: 0; padding: 8px 12px; background: var(--magnolia); border-left: 4px solid var(--grape); border-radius: 6px; }
.job-step.is-behind { border-color: var(--signal); }
.job-step.is-behind .job-step-status { color: var(--act-text); font-weight: 600; }
.job-item.is-flagged { background: var(--act-bg); color: var(--act-ink); border-radius: 6px; padding: 4px 8px; margin-left: -8px; }
.job-item.is-flagged .job-item-detail { color: var(--act-ink); }
.job-ticket.job-ticket-fold { border-top: 1px solid var(--line); padding: 4px 0 0; flex: none; }
.job-ticket-fold > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; gap: 8px; }
.job-ticket-fold > summary h3 { margin: 0; font-size: .9375rem; color: var(--grape-dark); }
.job-ticket-fold[open] > summary { margin-bottom: 8px; }
.order-board-panel .order-panel { flex-direction: column; align-items: stretch; gap: 12px; }
.order-board-panel .order-panel > .card { flex: none; margin: 0; }
.order-board-panel .order-lines { border-top-width: 4px; }
.order-board-panel .order-lines-head h3 { margin: 0; font-size: 1rem; }
.card-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.note-count { font-size: .75rem; font-weight: 500; color: var(--muted); background: var(--magnolia); border-radius: 999px; padding: 2px 8px; }
@media (max-width: 900px) {
  .line-panel { left: 0; width: auto; border-left: 0; box-shadow: none; }
  .line-panel-head { padding: 12px 16px 10px; }
  .line-panel-body { padding: 12px 16px 24px; }
}

/* Notes shared between service and production (1.0.8): on the order, the job, and the job panel. */
.notes h2 { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin: 0 0 8px; }
.notes-count { font-family: var(--font-mono); font-size: .75rem; font-weight: 600; background: var(--thistle); color: var(--ink); border-radius: 999px; padding: 1px 8px; }
.notes-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.note { border-left: 3px solid var(--thistle); padding: 2px 0 2px 10px; }
.note.is-order { border-left-color: var(--grape); }
.note-body { margin: 0; overflow-wrap: anywhere; }
.note-meta { margin: 2px 0 0; font-size: .8125rem; color: var(--muted); }
.notes-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.notes-form .field { margin: 0; }
.notes-form textarea { min-height: 56px; }
.notes-form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.notes-for { display: flex; align-items: center; gap: 8px; }
.notes-for > span { font-size: .875rem; }
.notes-add > summary { cursor: pointer; color: var(--grape-dark); font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.notes-add[open] > summary { margin-bottom: 6px; }
.job-notes { margin-bottom: 12px; }

/* Boards that fit the window (1.0.7), on a desk: the board fills the space below the page header and stops at the
   bottom of the window, so the page does not scroll and the board's sideways scrollbar is always on screen. Each
   column's cards scroll on their own under its pinned header. Columns share the width evenly, at least 260px each;
   only when they cannot all fit does the board scroll sideways. A job or order panel opens from the right (1.0.8) and
   the board narrows to its left. A phone is unchanged: one column at a time, swiped. */
@media (min-width: 900px) {
  body.with-sidebar .page.page-board { max-width: none; height: 100vh; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 12px; }
  .page-board > * { flex: none; }
  .page-board > .page-head { margin-bottom: 12px; }
  .page-board > .board-wrap { flex: 1 1 auto; min-height: 0; }
  .page-board .board-wrap { overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; scrollbar-color: var(--wisteria) transparent; }
  .page-board .board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); grid-template-rows: minmax(0, 1fr); height: 100%; min-width: 0; align-items: stretch; }
  .page-board .board-col, .page-board .board-production .board-col { width: auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
  .page-board .board-col-head { flex: none; }
  .page-board .board-cards { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .page-board .board-wrap.with-panel, .page-board:has(.board-wrap.with-panel) > .page-head { margin-right: calc(var(--panel-w) - 16px); }
  /* The production board (1.1.0): seven working columns share the width, at least 190px each, and Out the door is a
     narrow count at the end, so at 1920 x 1080 the board fits without scrolling sideways. */
  .page-board .board-production { grid-template-columns: repeat(7, minmax(190px, 1fr)) 112px; }
}
.board-out { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 4px; text-align: center; }
.board-out-count { font-family: var(--font-mono); font-weight: 700; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.board-out a { margin-top: 6px; }

/* Settings in tabs (1.0.4): tabs across the top on a desk, a dropdown of the same tabs on a phone. */
.settings-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 16px; }
.settings-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; color: var(--ink); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.settings-tabs a:hover { background: var(--magnolia); }
.settings-tabs a.active { border-bottom-color: var(--grape); color: var(--grape-dark); }
.settings-tab-select { display: none; }
.settings:not(.is-tabbed) .settings-tabs, .settings:not(.is-tabbed) .settings-tab-select { display: none; }
.settings.is-tabbed .settings-panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.settings-panel + .settings-panel { margin-top: 24px; }
.settings.is-tabbed .settings-panel + .settings-panel { margin-top: 0; }
@media (max-width: 640px) {
  .settings.is-tabbed .settings-tabs { display: none; }
  .settings.is-tabbed .settings-tab-select { display: block; margin-bottom: 16px; }
}


/* The job (1.0.6, docs/design/job_page.dc.html): its steps beside the job ticket. */
.step-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 600; background: var(--thistle); color: var(--grape-deep); white-space: nowrap; }
.step-chip-done { background: var(--grape); color: var(--surface); }
.job-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; }
.job-number { font-family: var(--font-mono); font-weight: 600; color: var(--grape-dark); font-size: .875rem; }
.page-split { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.page-split-main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.page-split-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.page-split-main > .card + .card, .page-split-side > .card + .card { margin-top: 0; }
.job-steps { display: flex; flex-direction: column; gap: 12px; }
.job-proof-bar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.job-proof-bar h2 { margin: 0; font-size: .9375rem; }
.job-proof-bar p { margin: 0; }
.job-proof-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.job-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 18px; }
.job-step.is-current { border: 2px solid var(--grape); }
.job-step.is-done, .job-step.is-skipped { background: var(--ground); }
.job-step-head { display: flex; align-items: center; gap: 12px; }
.job-step-head h2 { margin: 0; font-size: 1rem; }
.job-step.is-todo .job-step-head h2, .job-step.is-skipped .job-step-head h2 { color: var(--muted); font-weight: 500; }
.job-step-mark { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 700; border: 1px solid var(--silver); background: var(--surface); color: var(--muted); }
.job-step.is-done .job-step-mark { background: var(--grape); border-color: var(--grape); color: var(--surface); }
.job-step.is-current .job-step-mark { background: var(--magnolia); border: 2px solid var(--grape); color: var(--grape-deep); }
.job-step-status { margin-left: auto; font-size: .8125rem; color: var(--muted); text-align: right; }
.job-step-body { padding: 10px 0 0 40px; }
/* Look back (1.1.11): a done step opens to show what happened, read only. */
.job-look > summary { list-style: none; cursor: pointer; }
.job-look > summary::-webkit-details-marker { display: none; }
.job-look > summary .job-step-status::after { content: " ▾"; color: var(--grape-dark); }
.job-look[open] > summary .job-step-status::after { content: " ▴"; }
.job-look > summary:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; border-radius: 4px; }
.job-look-body { padding: 10px 0 2px 40px; display: flex; flex-direction: column; gap: 10px; }
.job-look-list { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.job-look-list > div { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); gap: 2px 12px; font-size: .875rem; }
.job-look-list dt { font-weight: 600; }
.job-look-list dd { margin: 0; overflow-wrap: anywhere; }
.job-look-list .is-approved dd { font-weight: 600; }
.job-look-history { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
.job-look-history .is-sent_back, .job-look-history .is-reprint { color: var(--ink); }
.job-sent-back { margin: 8px 0 0 40px; padding: 6px 10px; background: var(--magnolia); border-radius: var(--radius-sm); }
.line-panel .job-look-body, .line-panel .job-sent-back { margin-left: 0; padding-left: 34px; }
@media (max-width: 600px) { .job-look-list > div { grid-template-columns: 1fr; } .job-look-body { padding-left: 0; } .job-sent-back { margin-left: 0; } }
.job-step-skip { padding: 6px 0 0 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.job-step-skip p { margin: 0; }
.job-step-skip form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.job-step-form { display: flex; flex-direction: column; gap: 10px; }
.job-item { display: flex; align-items: flex-start; gap: 10px; min-height: 32px; cursor: pointer; }
.job-item input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--grape); flex: none; }
.job-item.is-locked { cursor: default; }
.job-item-label { font-weight: 500; }
.job-item-detail { display: block; font-size: .8125rem; color: var(--muted); }
.job-slip-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.job-slip-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2px 0 6px 30px; }
.job-slip-offer[hidden] { display: none; }
.job-input-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .875rem; }
.input-count { width: 90px; text-align: right; font-family: var(--font-mono); }
.job-inputs { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.job-inputs .span-2 { grid-column: 1 / -1; }
.job-goes { margin: 0; }
.job-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 4px; }
.job-step-actions .btn { min-height: var(--touch); }
.consequence { font-size: .875rem; color: var(--grape-deep); }
.job-tools { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.job-tools p { margin: 0; }
.job-tool-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.job-file-list li { margin-bottom: 6px; }
.job-more > summary { cursor: pointer; color: var(--grape-dark); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.job-more[open] > summary { margin-bottom: 8px; }
.inline-form { display: inline; }
.job-ticket { flex: 1 1 320px; min-width: 0; padding: 18px; }
.job-ticket.card + .card { margin-top: 0; }
.job-ticket h2 { font-size: 1.0625rem; margin-bottom: 12px; }
.job-facts { margin: 0; display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; font-size: .875rem; }
.job-facts dt { color: var(--muted); }
.job-facts dd { margin: 0; overflow-wrap: anywhere; }
.job-ticket-foot { font-size: .8125rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; margin: 12px 0 0; }
.job-ticket .job-more { margin-top: 12px; }
@media (max-width: 640px) {
  .job-step-body { padding-left: 0; }
  .job-inputs { grid-template-columns: 1fr; }
  .job-facts { grid-template-columns: 100px 1fr; }
}

/* The order for service (1.0.6, docs/design/order_page.dc.html). */
.plain-link { color: inherit; text-decoration: none; }
.plain-link:hover { text-decoration: underline; }
.bought td { vertical-align: top; }
.line-sub { display: block; font-size: .8125rem; color: var(--muted); }
.totals { margin: 12px 0 0; display: flex; flex-direction: column; gap: 4px; max-width: 420px; margin-left: auto; font-size: .9375rem; }
.totals > div { display: flex; justify-content: space-between; gap: 16px; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.totals-total { border-top: 1px solid var(--line); padding-top: 6px; font-weight: 600; }
.totals-total dt { color: var(--ink); }
.fact-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; }
.fact-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.fact-label { color: var(--muted); font-size: .8125rem; }
.fact-value { font-weight: 600; }
.fact-note { font-size: .8125rem; color: var(--muted); }
.fact-action { font-size: .875rem; }
.invoice-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.invoice-form h3 { margin-bottom: 12px; }
.billed-elsewhere { margin-top: 12px; }
.cost-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0; }
.order-history > summary { cursor: pointer; list-style: none; display: flex; align-items: center; min-height: var(--touch); }
.order-history > summary::-webkit-details-marker { display: none; }
.order-history > summary h2 { margin: 0; font-size: 1.0625rem; }
.order-history > summary::before { content: '\25B6'; font-size: .6875rem; margin-right: 10px; color: var(--ink); transition: transform .12s; }
.order-history[open] > summary::before { transform: rotate(90deg); }
.order-history[open] > summary { margin-bottom: 12px; }
.other-action { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.other-action:first-of-type { border-top: 0; padding-top: 0; }
.other-action > summary { list-style: none; }
.other-action > summary::-webkit-details-marker { display: none; }
.other-action[open] > summary { margin-bottom: 8px; }
.other-action .card { border: 0; padding: 0; margin-top: 0 !important; }
/* On a phone the two columns become one, the main column first, as in the mockups. */
@media (max-width: 720px) {
  .page-split { flex-direction: column; align-items: stretch; }
}
a.step-chip { text-decoration: none; }
a.step-chip:hover { background: var(--wisteria); }
.job-input-row .input-count, .job-step-form .input-count { width: 90px; flex: none; }
.job-tools code, .page-split code { overflow-wrap: anywhere; word-break: break-all; }
.other-action > summary { display: inline-flex; width: fit-content; }
.order-next { border: 2px solid var(--grape); }
/* A button with the line under it (1.0.6): what it sends, or what cannot be taken back. */
.action { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 280px; }
.action .consequence, .form-actions .consequence, .discount-actions .consequence { font-size: .8125rem; }
.form-actions .consequence { display: block; margin-top: 6px; text-align: right; }

/* AI estimates (1.1.0): the AI draft label, its card on the estimate, each line's basis with the fields to check in Wisteria, the request box, and the record. */
.tag-ai { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 600; font-size: .8125rem; background: var(--thistle); color: var(--grape-deep); vertical-align: middle; }
.ai-card { margin-top: 16px; border-left: 4px solid var(--mauve); }
.ai-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ai-card p { margin: 6px 0; }
.ai-card .action { margin-top: 8px; }
.ai-dropped { margin-top: 8px; }
.ai-dropped ul { margin: 6px 0 0; padding-left: 20px; }
.ai-line { margin: 6px 0 10px; padding: 8px 12px; background: var(--ground); border-radius: var(--radius-sm); }
.ai-line p { margin: 0 0 6px; }
.ai-line q { font-style: italic; }
.ai-fields { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ai-field { font-size: .8125rem; padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); max-width: 100%; overflow-wrap: anywhere; }
.ai-field-name { font-weight: 600; }
.ai-field-none { color: var(--muted); }
.ai-check { background: var(--wisteria); border-color: var(--wisteria); color: var(--ink); }
.ai-check .ai-field-none { color: var(--ink); }
.ai-key { display: inline-block; padding: 0 8px; border-radius: 999px; font-weight: 600; }
.ai-pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: .75rem; background: var(--ground); padding: 12px; border-radius: var(--radius-sm); max-height: 480px; overflow: auto; }
.summary .value.small-value { font-size: 1.125rem; overflow-wrap: anywhere; }

/* The estimate header's owner (1.1.1). */
.header-owner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: .875rem; }
.header-owner label { color: var(--muted); }
.header-owner select { min-height: 40px; width: auto; max-width: min(320px, 100%); }
.money-off { display: block; white-space: normal; max-width: 220px; margin-left: auto; }
.choice span.choice-price { display: block; text-align: left; padding: 10px 16px; line-height: 1.45; }
.choice .choice-price span { display: inline; min-height: 0; min-width: 0; padding: 0; border: 0; background: none; font-weight: inherit; }
@media (max-width: 900px) { .builder-steps { min-width: 0; max-width: 100%; } .builder-steps .builder-step-link { width: auto; white-space: nowrap; } }
/* A column never grows past the page on a phone (1.1.1: the order page ran 45px wide since 1.0.6). */
.page-split-main, .page-split-side, .page-split-main > *, .page-split-side > * { max-width: 100%; min-width: 0; }

/* Guillotine programs (1.1.2). */
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cut-list { margin: 0; padding-left: 1.5em; }
.cut-list li { white-space: nowrap; }
.cut-turn { font-weight: 600; }
.programs-table td { vertical-align: top; }
.job-cutting { margin: 10px 0 0; padding: 10px 12px; background: var(--ground); border-radius: var(--radius-sm); }
.job-cutting h3 { font-size: .9375rem; margin: 0 0 4px; }
.job-cutting p { margin: 0 0 6px; }
.job-cutting .cut-list { margin-bottom: 6px; }
.job-cutting form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; }
.job-cutting form .field { min-width: 0; }
/* Send back (1.1.11): under the steps, each step it can go back to with what it does again. */
.job-send-back { padding: 4px 2px 0; }
.job-send-back form { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.job-send-back .field { width: 100%; max-width: 560px; }
.back-options { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 560px; }
.back-options legend { padding: 0; margin-bottom: 4px; }
.back-option { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.back-option input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--grape); flex: none; }
.back-option > span { display: flex; flex-direction: column; gap: 2px; }
.back-option:has(input:checked) { border-color: var(--grape); background: var(--magnolia); }
.back-option:has(input:focus-visible) { outline: 3px solid var(--grape); outline-offset: 2px; }

/* Modifier fit (1.1.2): a group is one choice in the builder. */
.related-table tr.section .group-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: 600; }
.related-table tr.section .group-choice select { width: auto; max-width: 100%; min-height: 36px; font-weight: 400; }
.applies-to { display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* Materials (1.1.2): Active, Inactive, or All; a stock's status changed on the list. */
.list-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.list-filter a { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: .875rem; }
.list-filter a.active { background: var(--grape); border-color: var(--grape); color: var(--surface); }
.status-toggle { display: inline; margin: 0; }
.status-toggle .btn { min-width: 84px; }
.stock-kind { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-bottom: 10px; }
.stock-kind .field { min-width: 0; }
.stock-kind p { margin: 0; flex-basis: 100%; }
.price-stock { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-bottom: 10px; }
.price-stock .field { min-width: 0; max-width: 100%; }
.price-stock select { max-width: min(420px, 100%); }
.price-stock p { margin: 0; flex-basis: 100%; }

/* Layout exceptions (1.1.2): the builder's layout line on Size and stock. */
.layout-check { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.layout-check p { margin: 0 0 6px; }
.layout-check p:last-child { margin-bottom: 0; }
.job-batches { margin: 8px 0 0; }
.btn[hidden], .stock-kind [hidden] { display: none; }

/* The one way to start an estimate (1.1.6, estimates/start.php): the choice first, two options side by side
   (stacked on a phone), then the header; Cancel is a quiet link. */
.start-choice { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.start-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.start-option { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--input-border); border-radius: 12px; background: var(--surface); cursor: pointer; }
.start-option input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--grape); flex: none; }
.start-option > span { display: flex; flex-direction: column; gap: 4px; }
.start-option:has(input:checked) { border-color: var(--grape); background: var(--magnolia); }
.start-option:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.start-option:has(input:focus-visible) { outline: 3px solid var(--grape); outline-offset: 2px; }
.start-form [data-start-paste] { margin-bottom: 16px; }
.start-form [data-start-paste][hidden], .mod-picker [hidden] { display: none; }
.start-form .start-choice { margin-bottom: 20px; }
.start-form textarea { width: 100%; }
.quiet-link { color: var(--grape-dark); font-weight: 600; padding: 0 8px; align-self: center; }
@media (max-width: 640px) {
  .start-options { grid-template-columns: 1fr; }
}

/* Start a conversation: an Inbound entry's two actions side by side (1.3.10). */
.start-item-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
button.btn-pill { border: 0; cursor: pointer; font: inherit; }

/* The estimate in four numbered steps (1.3.20): Design, Lines, Discount and notes, Send. A line is one row that opens to its detail. */
.est-step { margin-top: 16px; }
.est-design { flex-wrap: wrap; gap: 8px 16px; }
.est-line { border-top: 1px solid var(--line); }
.est-line:first-of-type { border-top: 0; }
.est-line > summary { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 10px 0; color: var(--ink); font-weight: 400; min-height: var(--touch); list-style: none; }
.est-line > summary::-webkit-details-marker { display: none; }
.est-line > summary:hover .est-line-name { color: var(--grape-dark); }
.est-line-n { font-family: var(--font-mono); font-weight: 600; color: var(--grape-dark); }
.est-line-name { font-weight: 600; }
.est-line-desc { display: block; font-weight: 400; }
.est-line-qty { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; font-family: var(--font-mono); font-size: .875rem; font-variant-numeric: tabular-nums; }
.est-line-chosen { font-weight: 700; color: var(--grape-dark); }
.est-line[open] > summary { border-bottom: 1px dashed var(--line); }
.est-line-body { padding: 12px 0 16px 2.75rem; }
.est-line-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 12px; }
.est-line-more > summary { list-style: none; }
.est-line-more > summary::-webkit-details-marker { display: none; }
.est-line-more[open] { flex-basis: 100%; order: 1; }
.est-line-more form { margin-top: 8px; max-width: 420px; }
.est-drift { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.est-add { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); max-width: 420px; }
.est-add select { flex: 1 1 auto; }
.est-notes { margin-top: 12px; }
.est-todo { margin: 4px 0 12px; padding-left: 20px; }
.est-send { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; }
.est-more { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 4px; }
.est-more-body { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; padding: 8px 0; }
.est-history { margin-top: 16px; }
.est-history > summary { min-height: var(--touch); }
.pre-line { white-space: pre-line; }
.input-money { max-width: 110px; }
@media (max-width: 640px) {
  .est-line > summary { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .est-line-qty { grid-column: 2; justify-content: flex-start; }
  .est-line-body { padding-left: 0; }
}

/* The configurator on an estimate line (1.3.20): the product picked, then its steps. */
.fieldset-plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.est-product h2 { margin-bottom: 2px; }
.pick-product .input-row { margin-bottom: 16px; }
.pick-group { margin-top: 12px; }
.pick-group[hidden], .pick-list li[hidden] { display: none; }
.pick-group h2 { font-size: .9375rem; color: var(--muted); margin-bottom: 4px; }
.pick-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 16px; }
.pick-list a { display: inline-flex; align-items: center; min-height: var(--touch); font-weight: 600; }
.configurator .steps { list-style: none; padding-left: 0; margin: 0; } /* the headings carry the numbers */

/* The approval page's files question (1.3.42): only what happens next for the answer chosen. Without :has() every panel shows. */
@supports selector(:has(*)) {
  .files-panel { display: none; }
  .card:has(select[name="files"] option[value="uploading"]:checked) .files-panel-uploading,
  .card:has(select[name="files"] option[value="with_us"]:checked) .files-panel-with_us,
  .card:has(select[name="files"] option[value="later"]:checked) .files-panel-later { display: block; }
}
/* One quantity on the approval page (1.3.42): stated, not a choice. */
.single-choice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }

/* Email on inquiries (1.3.53): a message's text as written, and an inquiry's conversation. */
.email-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 32rem; overflow: auto; font-size: 0.95rem; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: 4px 0; }
.conversation { list-style: none; margin: 0 0 16px; padding: 0; }
.conversation > li { padding: 10px 12px; border-left: 3px solid var(--line); margin-bottom: 8px; }
.conversation > li.is-out { border-left-color: var(--grape); }
.conversation .email-text { max-height: 18rem; }