/* THE KIT - what the client's app changes about HQ's look. Overrides only:
   styles.css (HQ's) is loaded first and does the heavy lifting, so a change to
   HQ's colours is a change here too. Nothing in this file is under 12px and
   nothing you can tap is under 44px - a roofer is holding the phone in one hand.
   21 Sep 2026 (plan/kit-redesign.html, step 6): HQ's five sizes and five gaps and nothing else -
   --sp-1..5, --text-sm/base/md/lg/xl plus --text-meta (the grey line), --radius. The numbers left
   in px are the 44px tap minimum, the 16px iPhone no-zoom rule, and a few hairlines. */

/* ---------- THE SIX STATUS COLOURS (21 Sep 2026, James's monday.com screenshot) ----------
   Defined once, used by the bar under the heading, the legend (the filter) and the solid block on every
   row. Each carries its own letter colour, checked at 4.5:1 or better: white on blue #1D5FD1 (5.8), ink on
   amber #F2B33D (11.1), white on the darker amber #8F5B00 (5.8), white on green #1E7F4F (5.1), white on
   grey #6B6B6B (5.3), white on red #B42318 (6.6). A shop has one more (21 Sep 2026): Consulted in the brand's
   deep blue #0F407B (white on it 10.4) between Contacted and Price sent, because a consultation done and a
   price sent are two stages for a shop. */
:root {
  --st-new: #1D5FD1;    --st-new-fg: #FFFFFF;     /* New / Lead */
  --st-called: #F2B33D; --st-called-fg: #09090B;  /* Rung / Contacted, and Waiting on Follow-ups */
  --st-consulted: #0F407B; --st-consulted-fg: #FFFFFF;  /* Consulted (a shop) */
  --st-priced: #8F5B00; --st-priced-fg: #FFFFFF;  /* Price sent */
  --st-won: #1E7F4F;    --st-won-fg: #FFFFFF;     /* Won */
  --st-closed: #6B6B6B; --st-closed-fg: #FFFFFF;  /* Closed / Lost, and Parked on Follow-ups */
  --st-stuck: #B42318;  --st-stuck-fg: #FFFFFF;   /* Stuck: open, nothing done for a week */
}
.st-new { --st: var(--st-new); --st-fg: var(--st-new-fg); }
.st-called { --st: var(--st-called); --st-fg: var(--st-called-fg); }
.st-consulted { --st: var(--st-consulted); --st-fg: var(--st-consulted-fg); }
.st-priced { --st: var(--st-priced); --st-fg: var(--st-priced-fg); }
.st-won { --st: var(--st-won); --st-fg: var(--st-won-fg); }
.st-closed { --st: var(--st-closed); --st-fg: var(--st-closed-fg); }
.st-stuck { --st: var(--st-stuck); --st-fg: var(--st-stuck-fg); }

/* ---------- the sidebar says whose business this is ---------- */
.brand { padding-bottom: var(--sp-2); }
.kit-biz {
  color: rgba(248, 243, 237, .82);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: 1.25;
  padding: 0 var(--sp-3) var(--sp-3);
  overflow-wrap: anywhere;
}
.kit-biz .kit-biz-sub {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  color: rgba(248, 243, 237, .5);
  margin-top: var(--sp-1);
}

/* ---------- buttons: HQ's shape, one radius (999px goes) ---------- */
.btn { border-radius: var(--radius); }
a.btn { text-decoration: none; }
.btn-danger { background: var(--red); color: #fff; border: 1px solid transparent; }
.btn-danger:hover { background: #9A1D13; }

/* ---------- the heading row (Spaces h1): the title, one line, the ONE button on the right ---------- */
.kit-h1 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.kit-h1 h1 { font-size: var(--text-xl); margin: 0 0 var(--sp-1); }
.kit-h1 .subtitle { margin: 0; }
.kit-h1-right { flex-shrink: 0; }
.kit-h1 > div:first-child { flex: 1 1 200px; min-width: 0; }
.kit-h1-right .kit-menu > summary.btn { width: 44px; }

/* ---------- "Where everything stands": the bar and its legend, which is the filter ----------
   One bar split by count (the monday progress bar), the legend under it with a coloured dot and the
   count in every item. The picked item is a solid of its own colour; the plain All / Open items wear
   the brand teal when picked. Every item is a 44px button. ⛔ SUPERSEDED: the five .chip filters. */
.kit-stand { margin: 0 0 var(--sp-3); }
.kit-stand-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.kit-stand-title { font-size: var(--text-base); font-weight: 600; color: var(--fg); }
.kit-stand-total { font-size: var(--text-meta); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.kit-stand-bar { display: flex; height: 14px; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); gap: 2px; }
.kit-stand-seg { flex: 0 1 0; min-width: 6px; background: var(--st); }
.kit-stand-seg.none { flex: 1 1 auto; background: var(--surface-2); }
.kit-stand-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.kit-stand-item {
  height: 44px;
  padding: 0 var(--sp-3);
  font: inherit; font-size: var(--text-base); font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--fg-2);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  cursor: pointer;
}
.kit-stand-item .n { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--fg); }
.kit-stand-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--st); flex: none; }
.kit-stand-item:hover { border-color: var(--st, var(--accent)); }
.kit-stand-item.on { background: var(--st, var(--accent)); border-color: transparent; color: var(--st-fg, var(--on-accent)); }
.kit-stand-item.on .n { color: inherit; }
.kit-stand-item.on .kit-stand-dot { background: var(--st-fg); }
.kit-stand-item.plain.on { --st: var(--accent); --st-fg: var(--on-accent); }
.kit-stand-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the Open and All items sit apart from the six colours */
.kit-stand-item:not(.plain) + .kit-stand-item.plain { margin-left: var(--sp-2); }
/* The shop's Orders filter still wears HQ's .chip, brought up to the Kit's shape: 44px, the one radius. */
.filters { margin: 0 0 var(--sp-2); }
.chip { height: 44px; padding: 0 var(--sp-3); font-size: var(--text-base); font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: var(--radius); gap: var(--sp-2); }
.chip .n { font-variant-numeric: tabular-nums; opacity: .6; font-size: var(--text-meta); }
.chip.on .n { opacity: .75; }

/* ---------- the search, with the downloads behind its dots ---------- */
.kit-tools { display: flex; gap: var(--sp-2); align-items: center; margin: 0 0 var(--sp-3); }
.kit-search { display: flex; gap: var(--sp-2); align-items: center; flex: 1 1 auto; max-width: 520px; }
.kit-search input[type="search"] {
  flex: 1 1 auto;
  min-height: 44px;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--fg);
  padding: var(--sp-2) var(--sp-3);
  font-size: 16px;   /* 18 Sep 2026: under 16px an iPhone zooms the page the moment they tap in */
  -webkit-appearance: none;
  appearance: none;
}
.kit-search input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.kit-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }   /* Clear is the one button */
.kit-search .kit-search-clear { min-height: 44px; flex: 0 0 auto; }
.kit-search .kit-search-clear.hidden { display: none; }
/* the shop screens' find boxes (p18) share the same box */
.kit-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); }

/* ---------- anything you type into is thumb-sized ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="number"], select, textarea {
  min-height: 44px;
  width: 100%;
  max-width: 520px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--fg);
  padding: var(--sp-2) var(--sp-3);
  font-size: 16px;   /* 18 Sep 2026: 15px made every iPhone zoom in on focus */
  font-family: var(--font-body);
  line-height: 1.4;
}
textarea { min-height: 110px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---------- one question per line, on the Settings screen ---------- */
.kit-form { max-width: 560px; }
.kit-field { display: block; margin: 0 0 var(--sp-3); }
.kit-field .kit-label { display: block; font-size: var(--text-base); font-weight: 600; margin-bottom: var(--sp-1); }
.kit-field .kit-help { display: block; font-size: var(--text-meta); color: var(--fg-2); margin-bottom: var(--sp-2); }
.kit-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  box-shadow: none;
}
.kit-card h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0 0 var(--sp-1);
}
.kit-card .kit-card-sub { color: var(--fg-2); font-size: var(--text-meta); margin: 0 0 var(--sp-3); }

/* ---------- a line under a box: what happened, or what happens next ----------
   .kit-note is the help line inside a box; .kit-meta is the grey line on a row; .kit-flag the few
   loud words inside it (amber for a nudge, good for money that landed). */
.kit-note { color: var(--fg-2); font-size: var(--text-meta); margin-top: var(--sp-2); }
.kit-note.good { color: var(--accent-deep); font-weight: 600; }
.kit-note.warn { color: var(--amber); font-weight: 600; }
.kit-said { color: var(--fg-2); font-size: var(--text-meta); margin-top: var(--sp-2); }
.kit-meta { margin-top: var(--sp-1); font-size: var(--text-meta); color: var(--fg-3); line-height: 1.45; overflow-wrap: anywhere; }
.kit-flag { font-weight: 600; }
.kit-flag.amber { color: var(--amber); }
.kit-flag.good { color: var(--accent-deep); }

/* The name on the Reviews screen, the loudest thing on that row. */
.kit-job { font-size: var(--text-md); font-weight: 600; line-height: 1.35; }

/* ---------- THE ROW (21 Sep 2026): one shape on Enquiries and Follow-ups, laptop and phone ----------
   Line 1 the name (a button: tap it and the history opens under the row), the stage pill, the number
   as a tap-to-ring link. Line 2 the job in their words. Line 3 the grey line. On the right ONE teal
   button and the "···" menu. The name and the number are 44px tall to the thumb but sit on a 22px
   line (the Spaces .sp-ring trick), so the row stays three lines high. */
.kit-row { display: block; padding: var(--sp-3); margin-bottom: var(--sp-2); border-radius: var(--radius); box-shadow: none; }
/* 21 Sep 2026 (the monday table): three columns on a laptop - the words, the status block in a fixed
   column so the colours line up, then the button and the dots. */
.kit-row-main { display: grid; grid-template-columns: minmax(0, 1fr) 124px 232px; align-items: start; gap: var(--sp-3); }
.kit-row-words { min-width: 0; }
.kit-row-acts { display: flex; gap: var(--sp-2); align-items: center; justify-content: flex-end; }
.kit-line1 { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); }
.kit-name {
  background: none; border: 0; padding: 0; margin: -11px 0;
  min-height: 44px; display: inline-flex; align-items: center;
  font: inherit; font-weight: 600; font-size: var(--text-md); color: var(--fg);
  cursor: pointer; text-align: left;
}
.kit-name:hover { text-decoration: underline; }
.kit-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
/* The solid status block (the monday Status cell): letters on the bucket's colour, the one radius,
   32px tall on the row's 22px first line. ⛔ SUPERSEDED: .kit-pill, the pale pill beside the name. */
.kit-st {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 32px; margin-top: -5px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius);
  font-size: var(--text-sm); font-weight: 700; line-height: 1.2; white-space: nowrap; text-align: center;
  background: var(--st); color: var(--st-fg);
}
.kit-flag.red { color: var(--red); }
.kit-tel { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; color: var(--fg-2); font-size: var(--text-meta); text-decoration: underline; }
.kit-tel:hover { color: var(--fg); }
.kit-row-job { margin-top: var(--sp-1); font-size: var(--text-base); color: var(--fg); overflow-wrap: anywhere; }
/* what opens under the row: a hairline, then the box */
.kit-under { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.kit-under .kit-pricebox { min-width: 0; max-width: 420px; }
.kit-under .kit-addbox { margin: 0; }
.kit-under .kit-hist { margin-top: 0; }
.kit-under .kit-askout { margin-top: 0; }
.kit-under .kit-editbox, .kit-under .kit-notebox { margin: 0; }
@media (max-width: 640px) {
  /* The block sits on line 1, right of the name, and ONLY on line 1: the words box dissolves into the
     grid (display: contents) so the job and the grey line run the full width under it. The button and
     the dots go full width at the bottom. */
  .kit-row-main { grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--sp-3); }
  .kit-row-words { display: contents; }
  .kit-line1 { grid-column: 1; grid-row: 1; }
  .kit-st { grid-column: 2; grid-row: 1; width: auto; min-width: 0; margin-top: 0; min-height: 28px; align-self: start; }
  .kit-row-job, .kit-meta { grid-column: 1 / -1; }
  .kit-row-acts { grid-column: 1 / -1; margin-top: var(--sp-3); }
  .kit-row-acts .btn:not(.kit-menu-btn) { flex: 1 1 auto; justify-content: center; }
}

/* ---------- the "···" menu (Spaces .sp-menu, renamed) ---------- */
.kit-menu { position: relative; display: inline-block; }
.kit-menu > summary { list-style: none; width: 44px; padding: 0; justify-content: center; letter-spacing: .1em; font-weight: 700; cursor: pointer; }
.kit-menu > summary::-webkit-details-marker { display: none; }
.kit-menu-list { position: absolute; right: 0; top: calc(100% + var(--sp-1)); min-width: 220px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-2); z-index: 30; display: flex; flex-direction: column; }
.kit-menu-item { display: flex; align-items: center; width: 100%; text-align: left; background: none; border: none; font: inherit; font-size: var(--text-base); color: var(--fg); padding: 0 var(--sp-3); border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; min-height: 44px; white-space: nowrap; }
.kit-menu-item:hover { background: var(--accent-tint); color: var(--accent-deep); }
.kit-menu-item.danger { color: var(--red); }
.kit-menu-item.split { border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-top: var(--sp-1); padding-top: var(--sp-1); }
.kit-menu-item.danger:hover { background: rgba(180, 35, 24, .08); color: var(--red); }

/* ---------- Numbers screen charts, 14 Sep 2026 ---------- */
.kit-chart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-3) var(--sp-3);
  margin: var(--sp-3) 0;
}
.kit-chart-title { margin: 0 0 var(--sp-2); font-size: var(--text-meta); font-weight: 600; color: var(--fg-2); }
.kit-chart { width: 100%; height: 72px; display: block; }
.kit-chart-axis { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--fg-3); margin-top: var(--sp-1); }
.kit-funnel { display: flex; flex-direction: column; gap: var(--sp-2); }
.kit-funnel-row { display: flex; align-items: center; gap: var(--sp-2); }
.kit-funnel-label { flex: 0 0 78px; font-size: var(--text-meta); color: var(--fg-2); }
.kit-funnel-track {
  flex: 1; position: relative; height: 26px; background: var(--cream);
  border-radius: var(--radius-sm); overflow: hidden;
}
.kit-funnel-fill {
  height: 100%; width: 100%; transform-origin: left; background: var(--accent-deep);
  border-radius: var(--radius-sm); transition: transform .3s ease;
}
.kit-funnel-value {
  position: absolute; right: var(--sp-2); top: 50%; transform: translateY(-50%);
  font-size: var(--text-meta); font-weight: 700; color: var(--ink);
  background: rgba(255,255,255,.9); border-radius: var(--radius-sm); padding: 1px var(--sp-2);
}

/* B10 (17 Sep 2026): Your shop this month on Numbers - the two-line week chart's key and the
   where-the-numbers-come-from list, one source a line, the state in a word. */
.kit-shop-note { margin: calc(-1 * var(--sp-1)) 0 var(--sp-3); }
.kit-chart-key { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--fg-2); }
.kit-chart-key-item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.kit-chart-swatch { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--accent); }
.kit-chart-swatch.deep { background: var(--accent-deep); }
.kit-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.kit-sources li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); align-items: baseline; font-size: var(--text-base); }
.kit-source-name { font-weight: 600; }
.kit-source-state { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3); }
.kit-source-state.good { color: var(--accent-deep); }
.kit-source-state.warn { color: var(--amber); }
.kit-source-why { grid-column: 1 / -1; font-size: var(--text-meta); color: var(--fg-2); }

/* B3 (17 Sep 2026): the Your ads screen. Campaign names are longer than a funnel stage, so the
   label column is wider and a long name ends in a dots rather than wrapping under the bar. */
.kit-ads-chart .kit-funnel-label { flex: 0 0 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit-ads-foot { margin-top: var(--sp-3); font-size: var(--text-meta); }
@media (max-width: 767px) {
  .kit-ads-chart .kit-funnel-label { flex-basis: 110px; }
}

/* The wording that goes out in their name, shown the way it will land. */
.kit-preview {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: var(--sp-3);
  font-size: var(--text-base);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: var(--sp-2) 0 var(--sp-3);
}

/* ---------- a plain sentence, never a shrunken one ---------- */
.kit-lede { font-size: var(--text-md); color: var(--fg-2); margin: 0 0 var(--sp-3); max-width: 640px; }
.kit-tiny { font-size: var(--text-sm); color: var(--fg-3); }
.kit-tiny a { display: inline-block; padding: var(--sp-3) 0; }  /* 44px tap target on the phone (kit_check) */

/* The phone: the heading's button goes full width under the line, cards and boxes take the width. */
@media (max-width: 767px) {
  .kit-h1-right { width: 100%; }
  .kit-h1-right .btn { width: 100%; justify-content: center; }
  .kit-h1-right:has(> .kit-menu) { width: auto; }   /* the Numbers dots stay beside the title, 44px wide */
  .kit-h1-right .kit-menu > summary.btn { width: 44px; }
  .row-card .right { width: 100%; }
  .row-card .right .btn { flex: 1 1 auto; justify-content: center; }
  .kit-form, .kit-card { max-width: none; }
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="password"], input[type="number"], select, textarea { max-width: none; }
}

/* ---------- the pipeline dot: HQ colours new/called/won/lost, not quoted ---------- */
.dot.quoted, .dot.consulted { background: var(--amber); }

/* ---------- the table helper (Spaces table(), 21 Sep 2026): Orders, Customers, Products ----------
   A table on a laptop: HQ's fixed grid (34% for the first column) chops a name or a reason here, so
   the browser measures the columns; the status column is fixed so the solid blocks line up; the last
   column (the button and the dots) takes what it needs. The dots' list must not be clipped, so this
   wrap never scrolls - the columns fit at 1024 and up. Under 1024px the same rows are cards (table() in
   app.js draws them; between 768 and 1023 the sidebar still takes 236px, so a table there scrolled sideways). */
.kit-table-wrap { overflow: visible; }
table.kit-table { table-layout: auto; }
table.kit-table th:first-child, table.kit-table td:first-child { width: auto; }
table.kit-table th:last-child, table.kit-table td:last-child { width: 1%; white-space: nowrap; }
table.kit-table th.num, table.kit-table td.num { width: 1%; white-space: nowrap; }
table.kit-table th.st, table.kit-table td.st { width: 148px; }
table.kit-table td.st .kit-st { margin-top: 0; }
table.kit-table td .kit-name { font-size: var(--text-base); margin: -11px 0; }
table.kit-table td .kit-name, .kit-tcard .kit-name { min-width: 44px; justify-content: flex-start; }   /* "#1011" is a 44px tap, not a 34px one */
table.kit-table td:last-child { text-align: right; }
table.kit-table td:last-child .kit-menu { vertical-align: middle; margin-left: var(--sp-2); }
table.kit-table td:last-child .btn { vertical-align: middle; }
table.kit-table tr.kit-table-under td { background: var(--surface-2); padding-top: 0; text-align: left; white-space: normal; width: auto; }
table.kit-table tr.kit-table-under .kit-order-box { max-width: 860px; }
table.kit-table tr.kit-table-under .kit-under { margin-top: 0; padding-top: var(--sp-3); border-top: 0; }
table.kit-table tr.kit-table-under:hover td { background: var(--surface-2); }
.kit-tname { font-weight: 600; }
/* the cards on a phone: the title with the status block beside it, then "label: value" pairs, then
   the button (full width) and the dots - the enquiry row's shape */
.kit-cards .kit-tcard { display: block; padding: var(--sp-3); margin-bottom: var(--sp-2); box-shadow: none; }
.kit-tcard-main { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: flex-start; }
.kit-tcard-main > .left { flex: 1 1 100%; }
.kit-tcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.kit-tcard .title { font-size: var(--text-md); min-width: 0; }
.kit-tcard .title .kit-name { font-size: var(--text-md); }
.kit-tcard-st { flex: 0 0 auto; }
.kit-tcard-st .kit-st { width: auto; margin-top: 0; min-height: 28px; }
.kit-kvs { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-1); font-size: var(--text-base); color: var(--fg); }
.kit-kv .k { color: var(--fg-3); margin-right: 2px; }
.kit-kv .kit-sub { display: inline; margin-left: 4px; }
.kit-kv .kit-sub::before { content: "("; } .kit-kv .kit-sub::after { content: ")"; }
.kit-tcard .kit-under { width: 100%; }
/* the words on a row that are not the title */
.kit-sub { font-size: var(--text-sm); color: var(--fg-2); }
.kit-dim { color: var(--fg-2); }   /* a cell that is only a note ("not typed yet"): grey, no brackets on a phone */
.kit-flagline { margin-top: 2px; color: var(--amber); font-weight: 600; }
.kit-oos td:not(:last-child), .kit-tcard.kit-oos .title, .kit-tcard.kit-oos .kit-kvs { color: var(--fg-2); }
/* what opens under an order or a customer: the lines as a plain list, the facts in two columns */
.kit-order-box { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-3); }
.kit-order-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-3); align-content: start; }
.kit-fact { display: flex; flex-direction: column; font-size: var(--text-meta); overflow-wrap: anywhere; }
.kit-fact .kit-label { font-weight: 600; color: var(--fg-3); }
.kit-lines { list-style: none; margin: 0; padding: 0; }
.kit-lines li { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--text-base); white-space: normal; }
.kit-lines li:last-child { border-bottom: 0; }
.kit-line-qty { flex: 0 0 auto; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.kit-line-title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kit-line-net { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.kit-lines .kit-st { width: auto; margin-top: 0; min-height: 28px; flex: 0 0 auto; }
@media (max-width: 767px) { .kit-order-box { grid-template-columns: 1fr; } }
/* Card mode runs to 1023px (table() in app.js): the card's button row and the order's box take the width there too. */
@media (max-width: 1023px) {
  .kit-cards .row-card .right { width: 100%; }
  .kit-cards .row-card .right .btn { flex: 1 1 auto; justify-content: center; }
  .kit-cards .kit-order-box { grid-template-columns: 1fr; }
}
/* the flag box and the cost box, the price box's shape */
.kit-flagbox .kit-field { margin-bottom: var(--sp-2); }
.kit-flagbox .kit-field .kit-label { margin-top: 0; }
.kit-flagbox select, .kit-flagbox .kit-flag-note { width: 100%; max-width: none; min-height: 44px; }
.kit-costbox .kit-price-row { margin-top: var(--sp-2); }
.kit-away { margin-top: var(--sp-4); }
.kit-away .kit-fold-body { padding-top: var(--sp-2); }

/* Every card on Settings lines up with the one above it. */
.kit-card { max-width: 560px; }

/* The Reviews card: the text and the button sit together, never a button pushed to the bottom of an empty box. */
.row-card.wide .left { flex: 0 0 auto; }
@media (max-width: 767px) { .row-card.wide .left { flex: 1 1 100%; min-width: 0; } }
.row-card.wide .btn-row { margin-top: var(--sp-3); }

/* ---------- the price box (13 Sep 2026): opens under the row ----------
   The amount, the words as they will land, and the three ways it can go. */
.kit-pricebox {
  display: block;
  max-width: 420px;
  padding: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  white-space: normal;
  text-align: left;
}
.kit-pricebox .kit-price-row { display: flex; align-items: center; gap: var(--sp-2); }
.kit-pricebox .kit-price-cur { font-size: var(--text-lg); font-weight: 700; color: var(--fg-2); }
.kit-pricebox input.kit-price-amt { width: 170px; max-width: 100%; font-size: var(--text-md); font-weight: 600; }
.kit-pricebox .kit-label { font-size: var(--text-meta); font-weight: 600; margin-top: var(--sp-2); }
.kit-pricebox .kit-preview { margin: var(--sp-2) 0 var(--sp-2); }
.kit-pricebox .btn-row { margin-top: 0; flex-wrap: wrap; }
/* 21 Sep 2026 (step 3): the chase box, the price box's shape without the amount. */
.kit-chasebox { display: block; max-width: 520px; white-space: normal; text-align: left; }
.kit-chasebox .kit-label { font-size: var(--text-meta); font-weight: 600; }
.kit-chasebox .kit-preview { margin: var(--sp-2) 0 var(--sp-2); }
.kit-chasebox .btn-row { margin-top: 0; flex-wrap: wrap; }

/* The line under the Numbers tiles when there is no ad spend to show yet. */
.kit-spend-note { margin: var(--sp-1) 0 var(--sp-3); }

/* ---------- B5 (17 Sep 2026): an enquiry's history, and the texts this month ----------
   Open under the row (tap the name): the notes first, then every call, text and reply on that
   enquiry, newest first, the texts in their own words. Same list on Follow-ups for the month. */
.kit-hist { margin-top: var(--sp-2); }
.kit-hist-empty { font-size: var(--text-meta); color: var(--fg-2); padding: var(--sp-2) var(--sp-3); }
.kit-hist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.kit-hist-row { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.kit-hist-mark { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-meta); background: var(--surface-2); color: var(--fg-2); }
.kit-hist-row.kind-sms_out .kit-hist-mark { background: var(--accent); color: var(--on-accent); }
.kit-hist-row.kind-sms_in .kit-hist-mark { background: var(--accent-deep); color: #fff; }
.kit-hist-row.kind-not_fit .kit-hist-mark { background: var(--fg-2); color: #fff; }
.kit-hist-body { min-width: 0; flex: 1 1 auto; }
.kit-hist-title { font-size: var(--text-meta); font-weight: 600; }
.kit-hist-when { font-weight: 400; color: var(--fg-2); margin-left: var(--sp-2); }
.kit-hist-who { font-weight: 700; }
.kit-hist-text { font-size: var(--text-base); line-height: 1.45; margin-top: var(--sp-1); overflow-wrap: anywhere; white-space: pre-wrap; }
.kit-hist-row.kind-sms_in .kit-hist-text { font-style: italic; }
.kit-texts { margin-top: var(--sp-3); }
@media (max-width: 640px) {
  .kit-hist-when { display: block; margin-left: 0; margin-top: 2px; }
}

/* ---------- Messages (20 Sep 2026, replaces the old B8 Need-a-hand card) ----------
   Its own screen, not a card on Settings. Their messages on the right in the brand colour, ours
   on the left with the founder's name. A dot on the nav item and the topbar ? while a reply from
   us is unread; opening Messages clears it. */
.kit-help-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: var(--sp-3); border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--fg); font-weight: 700; font-size: var(--text-md); text-decoration: none; position: relative;
}
.kit-help-btn:hover { background: var(--surface-2); }
.kit-help-btn[hidden] { display: none; }
.kit-help-btn.has-unread::after, .kit-unread-dot {
  content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--red); vertical-align: middle;
}
.kit-help-btn.has-unread::after { position: absolute; top: -2px; right: -2px; border: 2px solid var(--surface); }
.nav-item .kit-unread-dot { margin-left: var(--sp-2); margin-top: -2px; }
.tabbar .tab .kit-unread-dot { margin-left: var(--sp-1); }
/* the More sheet on a phone (21 Sep 2026, Spaces .sp-more-row): the screens not on the bar, each with
   its one-line hint, then Sign out. The shell (.tab-more-sheet, .tab-more-box) is HQ's in styles.css. */
.kit-more-box { padding: 0 0 calc(var(--sp-2) + env(safe-area-inset-bottom)); max-height: 80vh; overflow-y: auto; }
.kit-more-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--line); }
.kit-more-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); }
.kit-more-list { padding: var(--sp-2) var(--sp-2) 0; }
.kit-more-row { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); text-decoration: none; color: var(--fg); }
.kit-more-row:hover, .kit-more-row.on { background: var(--surface-2); }
.kit-more-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kit-more-label { font-weight: 600; font-size: var(--text-md); }
.kit-more-row.on .kit-more-label { color: var(--accent-deep); }
.kit-more-hint { font-size: var(--text-meta); color: var(--fg-2); }
.kit-more-row .kit-unread-dot { margin-left: var(--sp-1); }
.tabbar .tab-more .kit-unread-dot { margin-left: var(--sp-1); }
.kit-support-empty { font-size: var(--text-meta); color: var(--fg-2); padding: var(--sp-3); border: 1px dashed var(--line-strong); border-radius: var(--radius); margin-bottom: var(--sp-3); }
.kit-thread { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); max-height: 60vh; overflow-y: auto; padding: 2px; }
.kit-msg { max-width: 85%; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); }
.kit-msg.client { align-self: flex-end; background: rgba(16,165,176,.12); border-color: rgba(16,165,176,.25); border-bottom-right-radius: var(--sp-1); }
.kit-msg.gg { align-self: flex-start; border-bottom-left-radius: var(--sp-1); }
.kit-msg.gg.fresh { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(16,165,176,.18); }
.kit-msg-who { font-size: var(--text-sm); font-weight: 700; margin-bottom: 3px; }
.kit-msg.client .kit-msg-who { color: var(--fg-2); }
.kit-msg-when { font-weight: 400; opacity: .75; margin-left: var(--sp-2); }
.kit-msg-subject { font-size: var(--text-meta); font-weight: 600; margin-bottom: 2px; }
.kit-msg-text { font-size: var(--text-base); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.kit-support textarea, .kit-messages textarea {
  width: 100%; box-sizing: border-box; min-height: 88px; padding: var(--sp-2) var(--sp-3); font: inherit; font-size: 16px;   /* not under 16px: iOS zooms */
  color: var(--fg); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); resize: vertical;
}
.kit-support textarea:focus, .kit-messages textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 767px) {
  .kit-help-btn { margin-left: auto; }
  .kit-msg { max-width: 92%; }
}

/* ---------- A10 (17 Sep 2026): the same person twice ---------- */
/* The write-in box (Write one in on the heading row), under the search. */
.kit-addbox { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: var(--sp-3); margin: 0 0 var(--sp-3); max-width: 760px; }
.kit-addhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); margin-bottom: var(--sp-3); }
.kit-addhead strong { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; }
.kit-addhead .kit-note { margin-top: 0; }
.kit-addgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-3); }
.kit-addgrid label { display: block; font-size: var(--text-base); font-weight: 600; }
.kit-addgrid label input { margin-top: var(--sp-1); max-width: none; font-weight: 400; }
.kit-addgrid .kit-addwide { grid-column: 1 / -1; }
.kit-addbox .btn-row { margin-top: var(--sp-3); }
.kit-add-err { margin: var(--sp-2) 0 0; }
/* "Looks like Mairéad from Sat 12 Sep - open that one instead?" - amber, so it reads as a warning, not an error. */
.kit-dupline:empty { display: none; }
.kit-dupline { margin-top: var(--sp-2); }
.kit-dup { display: inline-block; background: rgba(143, 91, 0, .10); color: var(--amber); border: 1px solid rgba(143, 91, 0, .35); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); font-size: var(--text-base); font-weight: 500; line-height: 1.4; }
.kit-dup .linkish { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; cursor: pointer; min-height: 0; }
.kit-dup .linkish:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
/* The row lit once after "open that one instead". */
.kit-flash { animation: kit-flash 2.4s ease-out 1; }
@keyframes kit-flash {
  0% { box-shadow: 0 0 0 4px rgba(16, 165, 176, .55); background: rgba(16, 165, 176, .10); }
  100% { box-shadow: 0 0 0 0 rgba(16, 165, 176, 0); background: transparent; }
}
@media (max-width: 767px) {
  .kit-addgrid { grid-template-columns: 1fr; }
}

/* ---------- B7 (17 Sep 2026): Who can get in - the people on the Kit ---------- */
.kit-you { display: inline-block; margin-left: var(--sp-2); padding: 1px var(--sp-2); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--fg-2); font-size: var(--text-sm); font-weight: 600; vertical-align: 2px; }
.kit-people .row-card .right { flex-wrap: wrap; }
.kit-people .kit-btn-off { color: var(--red); }
.kit-people .kit-btn-off:hover { border-color: rgba(180,35,24,.35); }
.kit-people .kit-people-add { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.kit-people .kit-people-add > .kit-label { margin-bottom: var(--sp-2); }
#people-note { margin-top: var(--sp-2); }

/* B9 (17 Sep 2026): Send my enquiries somewhere else */
.kit-webhook .kit-webhook-secret, .kit-webhook .kit-webhook-kinds { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.kit-webhook .kit-webhook-secret > .kit-label, .kit-webhook .kit-webhook-kinds > .kit-label { margin-bottom: var(--sp-1); }
.kit-webhook .kit-help { display: block; margin-bottom: var(--sp-2); }
.kit-webhook .kit-help code, .kit-secret-box code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-meta); background: var(--surface-2); padding: 2px var(--sp-2); border-radius: var(--radius-sm); }
.kit-secret-box { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-2); }
.kit-secret-box code { display: block; word-break: break-all; line-height: 1.5; padding: var(--sp-2) var(--sp-3); flex: 1 1 260px; border: 1px solid var(--line-strong); }
.kit-webhook .kit-check { position: relative; display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding-left: 44px; font-size: var(--text-base); cursor: pointer; }
.kit-webhook .kit-check input { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; }  /* the real 44px tap target, drawn by .kit-box */
.kit-webhook .kit-box { position: absolute; left: 11px; top: 11px; width: 22px; height: 22px; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; pointer-events: none; }
.kit-webhook .kit-check input:checked + .kit-box { background: var(--accent); border-color: var(--accent); }
.kit-webhook .kit-check input:checked + .kit-box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.kit-webhook .kit-check input:focus-visible + .kit-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.kit-webhook #webhook-status { margin-top: var(--sp-3); }

/* ---------- the strips that belong to the frame, not to a screen (18 Sep 2026) ----------
   #kit-strips sits above the content: the demo banner (always, in a sample portal - it cannot be
   closed, so nobody mistakes sample figures for their own) and the could-not-load strip. */
#kit-strips { padding: 0 var(--pad, var(--sp-4)); }
#kit-strips:empty { display: none; }
#kit-strips .strip { margin: var(--sp-3) 0 0; }
/* 21 Sep 2026 (step 3): the one "what happened" line with Undo, HQ's .undo-strip drawn at the top. */
#kit-strips .kit-did { margin: var(--sp-3) 0 0; border-radius: var(--radius); font-size: var(--text-base); color: var(--fg); background: var(--surface); border-color: var(--line-strong); }
.kit-did .kit-did-msg { flex: 1 1 auto; font-weight: 600; }
.kit-did .btn { min-height: 44px; }
.kit-did .strip-x { margin: 0; width: 44px; height: 44px; }
/* The texts table under a fold (Spaces .sp-fold): a plain <details>, closed until tapped. */
.kit-fold { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin: var(--sp-4) 0 0; }
.kit-fold > summary { list-style: none; cursor: pointer; padding: var(--sp-3); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); min-height: 44px; }
.kit-fold > summary::-webkit-details-marker { display: none; }
.kit-fold > summary::before { content: "\25B8"; color: var(--accent); font-size: var(--text-sm); margin-right: 2px; }
.kit-fold[open] > summary::before { content: "\25BE"; }
.kit-fold-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); color: var(--fg); }
.kit-fold-sub { color: var(--fg-2); font-size: var(--text-meta); }
.kit-fold-body { padding: 0 var(--sp-3) var(--sp-3); }
.kit-fold-body .subtitle { margin-top: 0; }
.kit-demo-strip {
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-base);
}

/* ---------- the yes/no box on a row: won, deposit paid, lost, not a fit, remove (18 Sep 2026) ---------- */
.kit-askbox .kit-field { margin-top: var(--sp-2); }
.kit-askbox .kit-note { margin: var(--sp-1) 0 0; }

/* ---------- What you pay (Settings) ---------- */
.kit-pay-line { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin: 0 0 var(--sp-2); }

/* ---------- Reports: a card a month, and what comes out of the printer ---------- */
.kit-report h2 { margin: 0 0 var(--sp-2); }
.kit-report ul { margin: 0; padding-left: var(--sp-4); line-height: 1.6; font-size: var(--text-md); }
.kit-report li { margin-bottom: var(--sp-2); }
@media print {
  .sidebar, .tabbar, .topbar, .kit-tools, .kit-help-btn, #kit-strips, .btn { display: none !important; }
  .main, .content { margin: 0 !important; padding: 0 !important; }
  .kit-report { break-inside: avoid; border: 1px solid #ddd; box-shadow: none; margin-bottom: var(--sp-3); }
  body { background: #fff; }
}

/* ---------- the quiet line a screen reader reads (18 Sep 2026) ----------
   Off the screen, never display:none - a hidden node is not announced. */
.kit-live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- offline (18 Sep 2026): no internet, so no tap can save ---------- */
.kit-offline-strip { font-weight: 600; }

/* ---------- a row's own boxes: Edit, Add a note, and the yes/no that is not on a row ---------- */
.kit-editbox, .kit-notebox { margin: var(--sp-2) 0 0; max-width: 760px; }
.kit-editbox .kit-addgrid label input { display: block; width: 100%; max-width: 100%; }
.kit-notebox textarea { width: 100%; min-height: 84px; font: inherit; font-size: 16px; }
.kit-notes { margin-top: var(--sp-3); }
.kit-notes-list { margin: var(--sp-1) 0 0; padding-left: var(--sp-3); font-size: var(--text-base); line-height: 1.55; }
.kit-notes-list li { margin-bottom: var(--sp-1); display: flex; justify-content: space-between; gap: var(--sp-2); align-items: flex-start; }
.kit-notes-list li.editing { flex-direction: column; }
.kit-note-btns { display: flex; gap: var(--sp-1); flex: 0 0 auto; }
.kit-note-btns .btn { padding: 0 var(--sp-2); font-size: var(--text-sm); }
.kit-note-edit { width: 100%; }
.kit-hist .kit-notes { margin: 0 0 var(--sp-3); }
.kit-askout { margin: var(--sp-2) 0 0; max-width: 620px; }

/* "open that one instead?" in the duplicate line: a button that reads as a link */
.linkish { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.kit-quotebox .kit-addgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0; }
.kit-quote-lines input { width: 100%; min-width: 60px; }
.kit-quote-lines .kit-qty { width: 64px; }
.kit-quote-lines .kit-unit { width: 100px; }
.kit-quote-totals { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--text-base); }
.btn-row .kit-note { white-space: normal; min-width: 160px; }