/* 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. */

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

/* ---------- chips: HQ's filter chips are 13px and 32px tall on a desk (the
     Agents run label is its own .run-chip since 17 Sep 2026). The Kit's chips are
     the pipeline - New, Called, Quoted - so they are proper 44px buttons. ---------- */
.chip {
  height: 44px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.chip .n { font-variant-numeric: tabular-nums; opacity: .6; font-size: 13px; }
.chip.on { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.chip.on .n { opacity: .75; }

/* ---------- the search box and the download buttons (17 Sep 2026) ----------
   One row on a desk, stacked on a phone. Clear only shows once something is typed. */
.kit-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.kit-search { display: flex; gap: 8px; align-items: center; flex: 1 1 320px; max-width: 520px; }
.kit-search input[type="search"] {
  flex: 1 1 auto;
  min-height: 44px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--fg);
  padding: 10px 12px;
  font-size: 15px;
  -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; }
.kit-export { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-export .btn { min-height: 44px; border: 1px solid var(--line-strong); }
@media (max-width: 767px) {
  .kit-tools { flex-direction: column; align-items: stretch; }
  .kit-search { max-width: none; flex: 0 0 auto; }   /* a basis of 320px would be a height here */
  .kit-export .btn { flex: 1 1 auto; }
}

/* ---------- 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: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--fg);
  padding: 10px 12px;
  font-size: 15px;
  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 18px; }
.kit-field .kit-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.kit-field .kit-help { display: block; font-size: 13px; color: var(--fg-2); margin-bottom: 6px; }
.kit-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(9, 9, 11, .04);
}
.kit-card h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
}
.kit-card .kit-card-sub { color: var(--fg-2); font-size: 13px; margin: 0 0 14px; }

/* ---------- a line under a row: what happened, or what happens next ---------- */
.kit-note { color: var(--fg-2); font-size: 13px; margin-top: 6px; }
.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: 13px; margin-top: 8px; }

/* The job, in the customer's own words, is the loudest thing on the row. */
.kit-job { font-size: 15px; font-weight: 600; line-height: 1.35; }
.kit-when { color: var(--fg-3); font-size: 13px; }

/* ---------- Numbers screen charts, 14 Sep 2026 ---------- */
.kit-chart-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #E2DFD6);
  border-radius: 12px;
  padding: 16px 18px 14px;
  margin: 14px 0;
}
.kit-chart-title { margin: 0 0 10px; font-size: 13px; 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: 12px; color: var(--fg-3); margin-top: 4px; }
.kit-funnel { display: flex; flex-direction: column; gap: 10px; }
.kit-funnel-row { display: flex; align-items: center; gap: 10px; }
.kit-funnel-label { flex: 0 0 78px; font-size: 13px; color: var(--fg-2); }
.kit-funnel-track {
  flex: 1; position: relative; height: 26px; background: var(--cream, #F8F3ED);
  border-radius: 6px; overflow: hidden;
}
.kit-funnel-fill {
  height: 100%; width: 100%; transform-origin: left; background: var(--accent-deep);
  border-radius: 6px; transition: transform .3s ease;
}
.kit-funnel-value {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 700; color: var(--ink, #09090B);
  background: rgba(255,255,255,.9); border-radius: 4px; padding: 1px 6px;
}

/* 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: -4px 0 12px; }
.kit-chart-key { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--fg-2); }
.kit-chart-key-item { display: inline-flex; align-items: center; gap: 6px; }
.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: 8px; }
.kit-sources li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; font-size: 14px; }
.kit-source-name { font-weight: 600; }
.kit-source-state { font-size: 12px; 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: 13px; 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: 16px; font-size: 13px; }
@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: 12px;
  background: var(--surface-2);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 8px 0 12px;
}

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

/* The mobile card list and the desktop table hold the same rows. HQ's styles
   already show one and hide the other; this only tidies the phone version. */
@media (max-width: 767px) {
  .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 sizes itself to what is in it ----------
   HQ's table is a fixed grid (34% for the first column, a sliver for the last),
   which is right for its own screens but chops the end off a phone number or a
   reason here. The Kit lets the browser measure: the buttons column takes what
   it needs, the job text takes the rest, and if it ever runs long the table
   scrolls inside its own box rather than the page going sideways. */
table.data { table-layout: auto; }
table.data th:first-child, table.data td:first-child { width: auto; }
table.data th:last-child, table.data td:last-child { width: 1%; white-space: nowrap; }
table.data th.num, table.data td.num { width: 1%; white-space: nowrap; }
table.data td:last-child .kit-note { white-space: normal; max-width: 280px; }

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

/* A stacked card (the review ask) should not push its button to the bottom of
   an empty box - the text and the button sit together. */
.row-card.wide .left { flex: 0 0 auto; }
/* on a phone HQ's card turns into a wrapping row (for its tick box); the Kit's words still take the full width */
@media (max-width: 767px) { .row-card.wide .left { flex: 1 1 100%; min-width: 0; } }
.row-card.wide .btn-row { margin-top: 12px; }

/* ---------- the price box (13 Sep 2026): opens in place of the row's buttons ----------
   The amount, the words as they will land, and the three ways it can go. In the table the
   last column is nowrap and shrink-to-fit, so the box says its own width and wraps inside. */
.kit-pricebox {
  display: block;
  min-width: 300px;
  max-width: 380px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  white-space: normal;
  text-align: left;
}
.kit-pricebox .kit-price-row { display: flex; align-items: center; gap: 8px; }
.kit-pricebox .kit-price-cur { font-size: 18px; font-weight: 700; color: var(--fg-2); }
.kit-pricebox input.kit-price-amt { width: 170px; max-width: 100%; font-size: 17px; font-weight: 600; }
.kit-pricebox .kit-label { font-size: 13px; font-weight: 600; margin-top: 10px; }
.kit-pricebox .kit-preview { margin: 6px 0 10px; }
.kit-pricebox .btn-row { margin-top: 0; }
td .kit-pricebox .btn-row { flex-wrap: wrap; white-space: normal; }
td .kit-pricebox .btn-row .btn { padding: 0 14px; font-size: 13px; }
.row-card .kit-pricebox { flex: 1 1 100%; max-width: none; margin-top: 12px; }

/* The line under the Numbers tiles when there is no ad spend to show yet. */
.kit-spend-note { margin: 4px 0 16px; }

/* ---------- B5 (17 Sep 2026): an enquiry's history, and the texts this month ----------
   The History button sits under the status; open, the list shows 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-wrap { margin-top: 6px; }
.kit-hist-btn { min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); font-size: 13px; }
.kit-hist-btn.on { background: var(--surface-2); }
.kit-hist-btn .n { font-variant-numeric: tabular-nums; opacity: .6; margin-left: 4px; }
.kit-hist { margin-top: 10px; }
.kit-hist-tr > td { padding-top: 0; background: var(--surface-2); }
.kit-hist-empty { font-size: 13px; color: var(--fg-2); padding: 10px 12px; }
.kit-hist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kit-hist-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; 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: 13px; 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: #0F407B; color: #fff; }
.kit-hist-body { min-width: 0; flex: 1 1 auto; }
.kit-hist-title { font-size: 13px; font-weight: 600; }
.kit-hist-when { font-weight: 400; color: var(--fg-2); margin-left: 8px; }
.kit-hist-who { font-weight: 700; }
.kit-hist-text { font-size: 14px; line-height: 1.45; margin-top: 4px; overflow-wrap: anywhere; white-space: pre-wrap; }
.kit-hist-row.kind-sms_in .kit-hist-text { font-style: italic; }
.kit-texts { margin-top: 12px; }
@media (max-width: 640px) {
  .kit-hist-when { display: block; margin-left: 0; margin-top: 2px; }
}

/* ---------- B6 (17 Sep 2026): Not a fit - the quiet last button on a new or rung enquiry ---------- */
.kit-notfit { font-size: 12px; opacity: .8; }
.kit-notfit:hover { opacity: 1; }
.kit-hist-row.kind-not_fit .kit-hist-mark { background: var(--fg-2); color: #fff; }

/* ---------- B8 (17 Sep 2026): Need a hand? - the help thread on Settings ----------
   Their messages on the right in the brand colour, ours on the left. A dot on Settings (sidebar,
   tab bar) and on the topbar ? while an answer from us is unread; opening Settings clears it. */
.kit-help-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: 12px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--fg); font-weight: 700; font-size: 16px; 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: 6px; margin-top: -2px; }
.tabbar .tab .kit-unread-dot { margin-left: 4px; }
.kit-support-empty { font-size: 13px; color: var(--fg-2); padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: 10px; margin-bottom: 14px; }
.kit-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; max-height: 420px; overflow-y: auto; padding: 2px; }
.kit-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; 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: 4px; }
.kit-msg.gg { align-self: flex-start; border-bottom-left-radius: 4px; }
.kit-msg.gg.fresh { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(16,165,176,.18); }
.kit-msg-who { font-size: 12px; 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: 8px; }
.kit-msg-subject { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.kit-msg-text { font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.kit-support textarea {
  width: 100%; box-sizing: border-box; min-height: 88px; padding: 10px 12px; font: inherit; font-size: 15px;
  color: var(--fg); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; resize: vertical;
}
.kit-support textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 767px) {
  .kit-help-btn { width: 40px; height: 40px; margin-left: auto; }
  .kit-msg { max-width: 92%; }
}

/* ---------- A10 (17 Sep 2026): the same person twice ---------- */
/* The "someone rang the office" box, under the search and download row. */
.kit-addbar { margin: 0 0 16px; }
.kit-addbox { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; padding: 16px; margin: 0 0 18px; max-width: 760px; }
.kit-addhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.kit-addhead strong { font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.kit-addhead .kit-note { margin-top: 0; }
.kit-addgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.kit-addgrid label { display: block; font-size: 14px; font-weight: 600; }
.kit-addgrid label input { margin-top: 4px; max-width: none; font-weight: 400; }
.kit-addgrid .kit-addwide { grid-column: 1 / -1; }
.kit-addbox .btn-row { margin-top: 12px; }
.kit-add-err { margin: 10px 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: 10px; }
.kit-dup { display: inline-block; background: rgba(143, 91, 0, .10); color: var(--amber); border: 1px solid rgba(143, 91, 0, .35); border-radius: 10px; padding: 8px 12px; font-size: 14px; 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: 4px; }
/* "Got in touch 3 times, last yesterday" on the row - a fact worth a glance, so it is darker than the other notes. */
.kit-again { color: var(--amber); font-weight: 600; }
/* The founder's merge button - as quiet as Not a fit. */
.kit-merge { border: 1px dashed var(--line-strong); }
/* The card 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; }
}
tr.kit-flash td { background: rgba(16, 165, 176, .10); transition: background 2.4s ease-out; }
@media (max-width: 767px) {
  .kit-addgrid { grid-template-columns: 1fr; }
  .kit-addbar .btn { width: 100%; justify-content: center; }
}

/* ---------- B7 (17 Sep 2026): Who can get in - the people on the Kit ---------- */
.kit-you { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--bg-2, #F1F5F5); color: var(--fg-2); font-size: 12px; 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: 16px; padding-top: 14px; border-top: 1px solid var(--line, rgba(0,0,0,.08)); }
.kit-people .kit-people-add > .kit-label { margin-bottom: 8px; }
#people-note { margin-top: 10px; }

/* B9 (17 Sep 2026): Send my enquiries somewhere else */
.kit-webhook .kit-webhook-secret, .kit-webhook .kit-webhook-kinds { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line, rgba(0,0,0,.08)); }
.kit-webhook .kit-webhook-secret > .kit-label, .kit-webhook .kit-webhook-kinds > .kit-label { margin-bottom: 4px; }
.kit-webhook .kit-help { display: block; margin-bottom: 8px; }
.kit-webhook .kit-help code, .kit-secret-box code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--bg-2, #F1F5F5); padding: 2px 6px; border-radius: 6px; }
.kit-secret-box { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.kit-secret-box code { display: block; word-break: break-all; line-height: 1.5; padding: 10px 12px; flex: 1 1 260px; border: 1px solid var(--line-strong); }
.kit-webhook .kit-check { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding-left: 40px; font-size: 14px; cursor: pointer; }
.kit-webhook .kit-check input { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: 0; opacity: 0; cursor: pointer; }  /* the real 40px tap target, drawn by .kit-box */
.kit-webhook .kit-box { position: absolute; left: 9px; top: 9px; width: 22px; height: 22px; border: 2px solid var(--line-strong); border-radius: 6px; 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: 12px; }

/* the Enquiries and Follow-ups tables: the date column gets room, so a date is one line */
.kit-since-col { width: 130px; }