/* 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 has two different .chip rules and the later one
     (the Agents screen) makes them 11px and 32px tall. The Kit's chips are
     the pipeline - New, Called, Quoted - so they are proper 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; }

/* ---------- 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-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: linear-gradient(90deg, var(--accent), var(--accent-deep));
  border-radius: 6px; transition: transform .3s ease;
}
.kit-funnel-value {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 700; color: var(--ink, #09090B);
}

/* 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); }

/* 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 { 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; }
.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; }