/*
 * The shared kit: the pieces of the livelier look, for any page (13 Nov 2026).
 *
 * PLATFORM_DECISIONS_LOG 2026-11-13, "Website look", and thriveablebiz-docs
 * website/briefs/site-redesign.md (the kit table says when to use each piece).
 * First used by Pipeline to Payday, which moved onto it with no visible change.
 *
 * Load order: homepage.css, then this file, then the page's own file. This file
 * sits on top of homepage.css without touching it: every rule here starts with
 * a .tbz-kit- class, so it can only reach the kit's own pieces, never anything
 * homepage.css owns (its sections, buttons, accordion, or closing block). A
 * page file adds layout of its own, and never restyles a kit piece, so the
 * pieces look the same everywhere. tests/test-kit.php holds all of this.
 *
 * Theme colour names and fonts only. No pills, no capital-letter labels, no
 * gradients. Body text 17px; nothing below 13px. The only motion here is the
 * tappable example, which moves when tapped, and it switches off for anyone who
 * turns motion off. A page's one hero moment lives in that page's own file.
 *
 * Pieces: layout (wrap, body text, split, panel); the example visual's frame
 * (chart, chart head, key); the meter and reading cards; numbered cards; the
 * tappable example (assets/kit-tap.js); tick list; step tiles; icon cards;
 * aside panel; linked tiles; price card; round headshot; the small link.
 */

/* ---------- Layout ---------- */
.tbz-kit-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
  box-sizing: border-box;
}
.tbz-kit-narrow { max-width: 900px; }
.tbz-kit-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 680px;
}
.tbz-kit-body + .tbz-kit-body { margin-top: 18px; }
.tbz-kit-ink { color: var(--ink); }
.tbz-kit-note { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.tbz-kit-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 56px;
  align-items: center;
}
.tbz-kit-split-top { align-items: start; margin-top: 12px; }
.tbz-kit-panel {
  margin: 0;
  background: var(--paper);
  border-radius: 10px;
  padding: 28px;
}
.tbz-kit-chart-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
}
/* Paragraphs inside the pieces sit tight; the pieces set their own spacing */
.tbz-kit-panel p,
.tbz-kit-chart p,
.tbz-kit-readings p,
.tbz-kit-num-cards p,
.tbz-kit-aside p,
.tbz-kit-price-card p { margin: 0; }
/* Card headings */
.tbz-kit-readings h3,
.tbz-kit-num-cards h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--ink);
}

/* ---------- Example visual: the frame (the chart inside is the page's own) ---------- */
.tbz-kit-chart {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--rule-card);
  border-radius: 10px;
  padding: 28px 28px 22px;
  box-shadow: 0 30px 60px -36px rgba(43, 42, 40, 0.45);
}
.tbz-kit-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tbz-kit-key { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; font-size: 15px; color: var(--ink-2); }
.tbz-kit-key span { display: inline-flex; align-items: center; gap: 8px; }
.tbz-kit-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }

/* ---------- Meter and reading cards: three or four states to compare ----------
 * The states differ in lightness as well as colour. A meter sets its own band
 * widths and marker with --tbz-kit-meter-cols and --tbz-kit-meter-at. */
.tbz-kit-meter {
  position: relative;
  max-width: 900px;
  margin-top: 36px;
  display: grid;
  grid-template-columns: var(--tbz-kit-meter-cols, 1fr 1fr 1fr);
  height: 18px;
}
.tbz-kit-meter span:first-child { border-radius: 9px 0 0 9px; }
.tbz-kit-meter span:last-of-type { border-radius: 0 9px 9px 0; }
.tbz-kit-meter .tbz-kit-orange-dark { background: var(--orange-dark); }
.tbz-kit-meter .tbz-kit-orange-soft { background: var(--orange-soft); }
.tbz-kit-meter .tbz-kit-teal-dark { background: var(--teal-dark); }
.tbz-kit-meter-marker { position: absolute; left: var(--tbz-kit-meter-at, 50%); top: -9px; width: 4px; height: 36px; background: var(--ink); border-radius: 2px; }
.tbz-kit-readings {
  list-style: none;
  padding: 0;
  margin: 28px 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.tbz-kit-readings li { background: var(--white); border-radius: 10px; padding: 22px; border-top: 5px solid; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.tbz-kit-readings .tbz-kit-orange-dark { border-top-color: var(--orange-dark); }
.tbz-kit-readings .tbz-kit-orange-soft { border-top-color: var(--orange-soft); }
.tbz-kit-readings .tbz-kit-teal-dark { border-top-color: var(--teal-dark); }

/* ---------- Numbered cards: where the order genuinely matters ---------- */
.tbz-kit-num-cards { list-style: none; padding: 0; margin: 40px 0 28px; display: flex; flex-direction: column; gap: 18px; max-width: 920px; }
.tbz-kit-num-cards li {
  background: var(--white);
  border: 1px solid var(--rule-card);
  border-radius: 10px;
  padding: 28px;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
}
.tbz-kit-num-cards h3 { font-size: 23px; margin-bottom: 6px; }
.tbz-kit-num {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--teal-dark);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* One card picked out, such as the part you come back to */
.tbz-kit-num-cards .tbz-kit-num-key { border: 2px solid var(--orange); }
.tbz-kit-num-key .tbz-kit-num { background: var(--orange-soft); color: var(--orange-dark); }

/* ---------- Tappable example: one idea that makes sense once you try it ----------
 * Both states are in the HTML: .tbz-kit-tap-off shows first, .tbz-kit-tap-on
 * after a tap (assets/kit-tap.js adds .is-on). The button stays hidden unless the
 * script runs. The bar fills to --tbz-kit-tap-to when on. */
.tbz-kit-tap { background: var(--paper-warm); }
.tbz-kit-tap-track { margin-top: 22px; height: 44px; background: var(--white); border-radius: 6px; overflow: hidden; }
.tbz-kit-tap-fill { display: block; height: 100%; width: 100%; background: var(--teal-dark); transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.tbz-kit-tap .tbz-kit-tap-figure { margin-top: 14px; font-family: 'Fraunces', Georgia, serif; font-size: 26px; font-weight: 600; color: var(--ink); }
.tbz-kit-tap .tbz-kit-note { margin-top: 4px; }
.tbz-kit-tap .tbz-kit-tap-btn[hidden] { display: none; }
.tbz-kit-tap .tbz-kit-tap-btn { margin-top: 20px; background: var(--ink); color: var(--white); }
.tbz-kit-tap .tbz-kit-tap-btn:hover,
.tbz-kit-tap .tbz-kit-tap-btn:focus-visible { background: var(--teal-dark); color: var(--white); }
.tbz-kit-tap .tbz-kit-tap-btn:focus-visible { outline: 3px solid var(--teal-dark); outline-offset: 3px; }
.tbz-kit-tap .tbz-kit-tap-on { display: none; }
.tbz-kit-tap.is-on .tbz-kit-tap-off { display: none; }
.tbz-kit-tap.is-on .tbz-kit-tap-on { display: inline; }
.tbz-kit-tap.is-on .tbz-kit-tap-fill { width: var(--tbz-kit-tap-to, 50%); }

/* ---------- Tick list: features or outcomes a reader scans ---------- */
.tbz-kit-ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.tbz-kit-ticks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.tbz-kit-ticks strong { color: var(--ink); }
.tbz-kit-tick { color: var(--teal-dark); }

/* ---------- Step tiles: a short routine, numbered by the list itself ---------- */
.tbz-kit-steps {
  list-style: none;
  counter-reset: tbz-kit-step;
  padding: 0;
  margin: 40px 0 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.tbz-kit-steps li {
  counter-increment: tbz-kit-step;
  background: var(--white);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}
.tbz-kit-steps li::before {
  content: counter(tbz-kit-step);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 34px;
  line-height: 1;
  color: var(--teal-dark);
}

/* ---------- Icon cards: who it's for, or kinds of thing ---------- */
.tbz-kit-icon-cards {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  max-width: 980px;
}
.tbz-kit-icon-cards li {
  background: var(--white);
  border: 1px solid var(--rule-card);
  border-radius: 10px;
  padding: 22px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}
.tbz-kit-icon-cards svg { color: var(--teal-dark); }

/* ---------- Aside panel: one side question answered in place ---------- */
.tbz-kit-aside {
  margin-top: 36px;
  max-width: 820px;
  background: var(--paper-warm);
  border-radius: 10px;
  padding: 26px 28px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}

/* ---------- Linked tiles: pointers to other products ---------- */
.tbz-kit-tiles {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.tbz-kit-tiles li { background: var(--white); border-radius: 10px; padding: 24px; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.tbz-kit-tiles strong { color: var(--ink); }

/* ---------- Price card: the page sells one product (price from WooCommerce) ---------- */
.tbz-kit-price-card {
  background: var(--ink);
  color: var(--offwhite);
  border-radius: 12px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.tbz-kit-price { font-family: 'Fraunces', Georgia, serif; font-size: 52px; line-height: 1; color: var(--offwhite); }
.tbz-kit-price-terms { font-size: 17px; color: var(--offwhite); }
.tbz-kit-price-card .tbz-btn { margin-top: 8px; }

/* ---------- Round framed headshot, beside a word from Judy ---------- */
.tbz-kit-person { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 44px; align-items: start; }
.tbz-kit-headshot {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  border: 6px solid var(--white);
  box-shadow: 0 10px 30px -14px rgba(43, 42, 40, 0.35);
}

/* ---------- The small link: a quieter second way on ---------- */
.tbz-kit-small-link { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.tbz-kit-small-link a {
  display: inline-block;
  padding: 6px 0;
  color: var(--teal-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* On a dark or teal block, such as the closing block */
.tbz-kit-small-link.tbz-kit-on-dark { margin-top: 18px; color: var(--offwhite); }
.tbz-kit-small-link.tbz-kit-on-dark a { color: var(--white); }

/* Motion off for anyone who has turned it off */
@media (prefers-reduced-motion: reduce) {
  .tbz-kit-tap-fill { transition: none; }
}

/* Phones: everything stacks */
@media (max-width: 720px) {
  .tbz-kit-wrap { padding: 0 20px; }
  .tbz-kit-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tbz-kit-chart { padding: 20px 16px 18px; }
  .tbz-kit-num-cards li { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px; }
  .tbz-kit-num { width: 52px; height: 52px; font-size: 25px; }
  .tbz-kit-person { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tbz-kit-headshot { width: 160px; height: 160px; }
  .tbz-kit-price { font-size: 44px; }
  .tbz-kit-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}