/* The DM pages' kit (site-src/gen/dm_kit.py, site-src/dm/KIT.md; agent A, 2026-10-07). Class prefix kit-. Built only on
   the tokens in system.css :root; reuses its sections, frames, FAQ, comparison (.cx) and the hero phone's Instagram parts
   (.ps-phone, .ig-*). No one-off hex here: Instagram's own colours stay inside depictions through the --ig-* tokens. */

/* ───────────── the hero ───────────── */
.kit-hero { padding: var(--s-16) 0 var(--s-16); }   /* the page opens on its eyebrow and heading (no breadcrumb row, no tab strip above them) */
.kit-hero-nav { display: grid; gap: var(--s-4); margin-bottom: var(--s-12); min-width: 0; }
.kit-hero-nav:empty { display: none; }
.kit-h1 { margin: var(--s-3) 0 0; font-size: clamp(34px, 2.4vw + 18px, 54px); line-height: 1.08; letter-spacing: -0.028em; font-weight: 650; color: var(--ink); text-wrap: balance; max-width: 18ch; }
.kit-lead { margin: 0; font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.kit-hero-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-12); align-items: end; }
.kit-hero-r { display: grid; gap: var(--s-6); padding-bottom: 4px; }
.kit-hero-h .kit-cta { margin-top: var(--s-8); grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-5); }
.kit-hero-h .kit-terms { max-width: 18ch; line-height: 1.4; }
.kit-hero-facts { list-style: none; margin: 0; padding: var(--s-5) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--s-6); border-top: var(--hairline) solid var(--line); }
.kit-hero-facts li { position: relative; padding-inline-start: 22px; font-size: var(--t-small); line-height: 1.45; color: var(--ink-3c); }
.kit-hero-facts li::before { content: ''; position: absolute; inset-inline-start: 0; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--accent-soft); }
.kit-hero-facts li::after { content: ''; position: absolute; inset-inline-start: 3px; top: 6px; width: 9px; height: 9px; background: var(--accent-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.kit-hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-16); align-items: center; }
.kit-hero-copy { display: grid; gap: var(--s-6); }
.kit-hero-copy .kit-h1 { margin-bottom: calc(-1 * var(--s-2)); }
.is-stack .kit-hero-visual { margin-top: var(--s-12); }
.kit-hero-note { margin: var(--s-6) auto 0; max-width: 72ch; text-align: center; font-size: var(--t-small); color: var(--ink-3c); }
@media (max-width: 1023px) {
  .kit-hero-top, .kit-hero-split { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
  .kit-hero-r { padding-bottom: 0; }
  .kit-hero-top { display: flex; flex-direction: column; }
  .kit-hero-h, .kit-hero-top .kit-hero-r { display: contents; }
  .kit-hero-h .kit-h1 { margin-bottom: 0; }
  .kit-hero-top .kit-lead { order: 2; }
  .kit-hero-h .kit-cta { order: 3; margin-top: var(--s-2); }
  .kit-hero-facts { order: 4; }
          .is-stack .kit-hero-visual, .is-split .kit-hero-visual { margin-top: var(--s-12); }
}
@media (max-width: 640px) {
  .kit-hero-facts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .kit-hero-h .kit-cta { grid-template-columns: minmax(0, 1fr); }
  .kit-hero-h .kit-terms { max-width: none; }
  .kit-hero { padding: var(--s-12) 0 var(--s-12); }
  .kit-hero-nav { margin-bottom: var(--s-8); gap: var(--s-3); }
  .kit-h1 { font-size: clamp(30px, 7.4vw + 4px, 38px); line-height: 1.12; }
  .kit-lead { font-size: 17px; }
  .is-stack .kit-hero-visual, .is-split .kit-hero-visual { margin-top: var(--s-8); }
}

/* a sub page's eyebrow is its way back (Anant, 2026-10-08: no breadcrumb row, no strip of tabs): the pages above it as quiet links */
.kit-eb a { position: relative; color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink-4) 70%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 4px; border-radius: 4px; transition: color var(--t-micro) var(--ease), text-decoration-color var(--t-micro) var(--ease); }
.kit-eb a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
.kit-eb a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.kit-eb-sep { color: var(--ink-4); }
@media (pointer: coarse) { .kit-eb a::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); } }

/* the action: the raised button, the terms under it, the facts line; left-aligned in a hero, centred in a band */
.kit-cta { display: grid; justify-items: start; gap: var(--s-2); }
.kit-cta.is-center { justify-items: center; text-align: center; }
.kit-terms { margin: 0; font-size: var(--t-small); color: var(--ink-3c); }
.kit-cta .kit-facts { margin-top: var(--s-3); text-align: start; }
.kit-cta.is-center .kit-facts { text-align: center; }
@media (max-width: 359px) { .kit-cta .btn-lg { font-size: 15px; height: 46px; padding-inline: 18px; } }

/* ───────────── the breadcrumb ───────────── */
.kit-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 13.5px; line-height: 1.4; }
.kit-crumb li { display: inline-flex; align-items: center; min-width: 0; }
.kit-crumb a { color: var(--ink-3c); text-decoration: none; border-radius: 5px; padding: 2px 0; transition: color var(--t-micro) var(--ease); }
.kit-crumb a:hover { color: var(--ink); }
.kit-crumb a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.kit-crumb [aria-current] { color: var(--ink); font-weight: 600; }
.kit-crumb-sep { display: inline-grid; place-items: center; width: 22px; color: var(--ink-4); }
.kit-crumb-sep .i { width: 13px; height: 13px; transform: rotate(-90deg); }
[dir='rtl'] .kit-crumb-sep .i { transform: rotate(90deg); }

/* ───────────── the sibling switcher: a segmented track, the current page a white tab with the accent icon ───────────── */
.kit-switch { min-width: 0; }
.kit-switch-row { list-style: none; margin: 0; padding: 4px; display: inline-flex; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: 12px; background: var(--rail); box-shadow: inset 0 0 0 1px var(--line-soft); scroll-snap-type: x proximity; }
.kit-switch-row::-webkit-scrollbar { display: none; }
.kit-switch li { flex: none; scroll-snap-align: center; }
.kit-sw { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 10px; border-radius: 9px; font-size: 13.5px; font-weight: 550; color: var(--ink-3c); text-decoration: none; white-space: nowrap; transition: color var(--t-micro) var(--ease), background var(--t-micro) var(--ease); }
.kit-sw .i { width: 16px; height: 16px; flex: none; color: var(--ink-4); transition: color var(--t-micro) var(--ease); }
.kit-sw:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.kit-sw:hover .i { color: var(--ink-3); }
.kit-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kit-sw.is-on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(15 23 42 / 0.08), 0 0 0 1px var(--line); }
.kit-sw.is-on .i { color: var(--accent); }
@media (max-width: 640px) {
  .kit-switch { margin-inline: calc(-1 * var(--gutter)); }
  .kit-switch-row { display: flex; border-radius: 0; padding-inline: var(--gutter); box-shadow: inset 0 1px 0 var(--line-soft), inset 0 -1px 0 var(--line-soft); -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
}

/* ───────────── sections ───────────── */
.kit-sec .sec-head { margin-bottom: var(--s-12); }
.kit-head-start { justify-items: start; text-align: start; }
@media (max-width: 640px) { .kit-sec { padding-block: var(--s-16); } .kit-sec .sec-head { margin-bottom: var(--s-8); } }

/* ───────────── capability rows: the group's name in a sticky column, rows of label, name, sentence, rule ───────────── */
.kit-caps { display: grid; gap: var(--s-6); }
.kit-capg { display: grid; grid-template-columns: 260px minmax(0, 1fr); border: var(--hairline) solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: clip; }
.band .kit-capg { background: var(--surface); box-shadow: var(--shadow-lift); }
.kit-capg-h { padding: var(--s-6); border-inline-end: var(--hairline) solid var(--line); background: var(--canvas); }
.kit-capg-h > * { position: sticky; top: calc(var(--nav-stack) + var(--s-8)); }
.kit-capg-h h3 { margin: 0; font-size: var(--t-h3); line-height: 1.3; font-weight: 650; letter-spacing: -0.012em; color: var(--ink); }
.kit-capg-h p { margin: var(--s-2) 0 0; top: auto; position: static; font-size: var(--t-small); line-height: 1.55; color: var(--ink-3c); }
.kit-cap-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kit-cap { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-6); border-top: var(--hairline) solid var(--line-soft); min-width: 0; }
.kit-cap:nth-child(-n + 2) { border-top: 0; }
.kit-cap:nth-child(odd) { border-inline-end: var(--hairline) solid var(--line-soft); }
.kit-cap:last-child:nth-child(odd) { grid-column: 1 / -1; border-inline-end: 0; }
.kit-cap dt { display: grid; justify-items: start; gap: var(--s-2); }
.kit-cap dt b { font-size: 16.5px; font-weight: 650; letter-spacing: -0.008em; color: var(--ink); line-height: 1.35; }
.kit-cap dd { margin: 0; display: grid; gap: var(--s-3); }
.kit-cap dd p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.kit-cap-rule { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px !important; line-height: 1.5 !important; color: var(--ink-3c) !important; }
.kit-cap-rule .i { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--ink-4); }
@media (max-width: 860px) {
  .kit-capg { grid-template-columns: minmax(0, 1fr); }
  .kit-capg-h { border-inline-end: 0; border-bottom: var(--hairline) solid var(--line); padding: var(--s-5); }
  .kit-capg-h > * { position: static; }
}
@media (max-width: 640px) {
  .kit-cap-list { grid-template-columns: minmax(0, 1fr); }
  .kit-cap { padding: var(--s-5); }
  .kit-cap:nth-child(2) { border-top: var(--hairline) solid var(--line-soft); }
  .kit-cap:nth-child(odd) { border-inline-end: 0; }
}

/* ───────────── the limits and facts table ───────────── */
.kit-facts-wrap { border: var(--hairline) solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: clip; }
.kit-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.kit-table th, .kit-table td { padding: 14px var(--s-5); text-align: start; vertical-align: top; line-height: 1.5; }
.kit-table thead th { white-space: nowrap; font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3c); background: var(--canvas); border-bottom: var(--hairline) solid var(--line); }
.kit-table tbody th { width: 34%; font-weight: 600; color: var(--ink); }
.kit-table tbody td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.kit-table tbody tr + tr > * { border-top: var(--hairline) solid var(--line-soft); }
.kit-table td:last-child { width: 1%; white-space: nowrap; }
.kit-by { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-3c); }
.kit-by::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.kit-by.is-meta::before { background: var(--facebook); }
.kit-source { margin: var(--s-4) 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-3c); }
@media (max-width: 640px) {
  .kit-table thead { display: none; }
  .kit-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s-3); padding: 14px var(--s-4); }
  .kit-table tbody tr + tr { border-top: var(--hairline) solid var(--line-soft); }
  .kit-table tbody tr + tr > * { border-top: 0; }
  .kit-table th, .kit-table td { padding: 0; width: auto !important; }
  .kit-table tbody th { grid-column: 1; }
  .kit-table tbody td:nth-of-type(1) { grid-column: 1 / -1; grid-row: 2; }
  .kit-table td:last-child { grid-column: 2; grid-row: 1; align-self: start; }
}

/* ───────────── how it runs: numbered moments on one rule ───────────── */
.kit-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--s-6); }
.kit-step { display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; gap: var(--s-3); min-width: 0; }
.kit-step-n { position: relative; display: flex; align-items: center; gap: var(--s-3); height: 20px; }
.kit-step-n span { font-size: 13px; font-weight: 650; letter-spacing: 0.04em; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.kit-step-n i { flex: 1; height: 1px; background: var(--line); }
.kit-step:last-child .kit-step-n i { background: linear-gradient(90deg, var(--line), transparent); }
[dir='rtl'] .kit-step:last-child .kit-step-n i { background: linear-gradient(270deg, var(--line), transparent); }
.kit-step-n::before { content: ''; order: -1; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.kit-step-v { position: relative; display: grid; place-items: center; height: 240px; margin-top: var(--s-2); padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); border: var(--hairline) solid var(--line); overflow: clip; }
.band .kit-step-v { background: var(--canvas); }
.band .kit-canvas-in, .band .kit-np-in { background-color: var(--canvas); box-shadow: none; }
.kit-step > h3 { margin: var(--s-2) 0 0; font-size: 18px; font-weight: 650; letter-spacing: -0.012em; color: var(--ink); }
.kit-step > p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.kit-step > .kit-step-rule { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px !important; color: var(--ink-3c) !important; }
.kit-step-rule .i { width: 14px; height: 14px; flex: none; margin-top: 3px; padding: 2px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); stroke-width: 3; }
@media (max-width: 1023px) { .kit-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-12); } }
@media (max-width: 560px) { .kit-steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-10, 40px); } .kit-step-v { height: 232px; } }

/* ───────────── text beside a picture ───────────── */
.kit-spot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-16); align-items: center; }
.kit-spot.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.kit-spot.is-flip .kit-spot-copy { order: 2; }
.kit-spot-copy { display: grid; gap: var(--s-4); align-content: start; }
.kit-spot-copy .h2 { margin: 0; }
.kit-spot-copy .lead { margin: 0; }
.kit-points { margin: var(--s-4) 0 0; display: grid; gap: var(--s-4); }
.kit-points > div { display: grid; gap: 2px; padding-inline-start: var(--s-4); border-inline-start: 2px solid var(--line); }
.kit-points dt { font-weight: 650; color: var(--ink); font-size: 16px; }
.kit-points dd { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.kit-spot-v { min-width: 0; }
@media (max-width: 960px) { .kit-spot, .kit-spot.is-flip { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); } .kit-spot.is-flip .kit-spot-copy { order: 0; } }

/* ───────────── a real capture in its frame, one click from full size ───────────── */
.kit-shot { margin: 0; display: grid; gap: var(--s-3); }
.kit-shot-open { position: relative; display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; cursor: zoom-in; border-radius: var(--r-lg); }
.kit-shot-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.kit-shot .laptop-shot img { width: 100%; height: 100%; display: block; }
.kit-shot .laptop { display: block; }
.kit-shot.is-phone .kit-shot-open, .kit-shot-open.is-ph { display: flex; justify-content: center; }
.kit-shot .phone { position: relative; inset: auto; right: auto; bottom: auto; width: min(100%, 300px); }
.kit-shot-open.is-ph { display: none; }
@media (max-width: 640px) { .kit-shot.has-ph .kit-shot-open.is-desk { display: none; } .kit-shot.has-ph .kit-shot-open.is-ph { display: flex; } .kit-shot .phone { width: min(100%, 280px, calc((100svh - var(--nav-stack, 96px) - 81px) * 0.44)); padding: 8px; border-radius: 40px; } .kit-shot .phone-screen { border-radius: 32px; } }
.kit-zoom { position: absolute; top: 12px; inset-inline-end: 12px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: var(--r-pill); border: var(--hairline) solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-lift); opacity: 0; transform: translateY(-2px); transition: opacity 0.15s var(--ease), transform 0.15s var(--ease); pointer-events: none; }
.kit-zoom .i { width: 14px; height: 14px; }
.kit-shot-open:hover .kit-zoom, .kit-shot-open:focus-visible .kit-zoom { opacity: 1; transform: none; }
@media (hover: none) { .kit-zoom { opacity: 1; transform: none; } }
.kit-shot figcaption { font-size: var(--t-small); color: var(--ink-3c); text-align: center; }

/* ───────────── the phone (the hero phone's frame) scaled as one picture ───────────── */
.kit-phone-w { display: grid; justify-items: center; gap: var(--s-3); min-width: 0; }
.kit-phone-l { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3c); text-align: center; }
.kit-fit { --kit-s: 1; position: relative; width: calc(var(--kit-w, 310px) * var(--kit-s)); height: calc(var(--kit-h, 660px) * var(--kit-s)); }
.kit-fit-in { position: absolute; left: 0; top: 0; width: var(--kit-w, 310px); height: var(--kit-h, 660px); transform: scale(var(--kit-s)); transform-origin: 0 0; }
.kit-phone { width: 100%; height: 100%; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.14), inset 0 0 0 5px #0b0c0e, 0 34px 70px -24px rgb(15 23 42 / 0.45), 0 0 0 1px rgb(0 0 0 / 0.6); }
.kit-screen { background: #fff; color: #000; }
.kit-screen .ig-status { color: #000; }
.kit-screen .ig-status.is-dark { color: #fff; }
.kit-ig-col { display: grid; gap: 4px; justify-items: start; max-width: 80%; min-width: 0; }
.ig-m.me .kit-ig-col { justify-items: end; }
.kit-ig-col .ig-b { max-width: 100%; }
.ig-m.me .ig-b { background: linear-gradient(160deg, #a033ff, var(--ig-sent-b)); color: #fff; }   /* Instagram draws your own messages purple-to-blue, as the home does (agent L) */
.kit-ig-link { width: 100%; min-width: 196px; border: 1px solid #dbdbdb; border-radius: 16px; overflow: hidden; background: #fff; }
.kit-ig-link p { margin: 0; }
.kit-ig-link p:first-child { display: grid; padding: 9px 13px; border-bottom: 1px solid #efefef; font-size: 13px; line-height: 1.35; }
.kit-ig-link p:first-child span { color: var(--ig-meta); font-size: 12px; }
.kit-ig-link-b { padding: 9px 12px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ig-blue); }
.kit-ig-dmh { padding-top: 50px; gap: 8px; }
.kit-ig-dmh .ig-g { width: 21px; height: 21px; }
.kit-ig-dmh .ig-g + .ig-g { margin-inline-start: 6px; }

/* ───────────── the flow builder's card, drawn as the app draws it (FC1, 2026-10-08; site-src/dm/FLOW_CARDS.md) ─────────────
   The truth is src/components/automation/flow/{nodes.tsx, flow.css, glyph.css} and src/app/globals.css. The six families
   (flow/model.ts groups: the trigger, messages, ask, logic, actions, comment) keep the app's own values, defined once here;
   the colours inside a card's preview (the message as the person will see it) are the app's --color-mock-* values. */
:root {
  --fam-start: var(--accent); --fam-start-soft: var(--accent-soft); --fam-start-ink: var(--accent-ink);
  --fam-send: #2b78e4; --fam-send-soft: #e8f0fd; --fam-send-ink: #1c58b3;
  --fam-collect: #6d4fe0; --fam-collect-soft: #efeafd; --fam-collect-ink: #4f36b8;
  --fam-logic: #d98a12; --fam-logic-soft: #fdf2df; --fam-logic-ink: #9d6207;
  --fam-action: #109c9c; --fam-action-soft: #dff5f5; --fam-action-ink: #0b7373;
  --fam-comment: #d8378f; --fam-comment-soft: #fce8f3; --fam-comment-ink: #a8256d;
  --mock-canvas: #f0f2f5; --mock-surface: #ffffff; --mock-line: #e4e6eb; --mock-ink: #1c1e21; --mock-ink-3: #65676b; --mock-blue: #0866ff;
  --kit-card: 288px; --kit-card-compact: 236px;   /* the app's card, and the same card at 60 % zoom drawn at reading size */
  --kit-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --kit-lift: 0 4px 12px rgb(15 23 42 / 0.08);
}
.kit-node, .kit-wire, .kit-tile.f-start { --g: var(--fam-start); --g-soft: var(--fam-start-soft); --g-ink: var(--fam-start-ink); }
:is(.kit-node, .kit-tile, .kit-wire).f-send { --g: var(--fam-send); --g-soft: var(--fam-send-soft); --g-ink: var(--fam-send-ink); }
:is(.kit-node, .kit-tile, .kit-wire).f-collect { --g: var(--fam-collect); --g-soft: var(--fam-collect-soft); --g-ink: var(--fam-collect-ink); }
:is(.kit-node, .kit-tile, .kit-wire).f-logic { --g: var(--fam-logic); --g-soft: var(--fam-logic-soft); --g-ink: var(--fam-logic-ink); }
:is(.kit-node, .kit-tile, .kit-wire).f-action { --g: var(--fam-action); --g-soft: var(--fam-action-soft); --g-ink: var(--fam-action-ink); }
:is(.kit-node, .kit-tile, .kit-wire).f-comment { --g: var(--fam-comment); --g-soft: var(--fam-comment-soft); --g-ink: var(--fam-comment-ink); }

/* the card: white, a hairline, a soft shadow. Compact by default (the name, one line, the ways out) */
.kit-node { --g-line: color-mix(in srgb, var(--g) 38%, var(--surface)); --kit-inset: 19px; position: relative; width: var(--w, var(--kit-card-compact)); flex: none; border: var(--hairline) solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lift); text-align: start; font-size: 13px; color: var(--ink); }
.kit-node.is-sel { border-color: var(--g); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 18%, transparent), var(--kit-lift); }   /* the app's selected card: the family's hairline and a soft ring of it */
.kit-node-h { display: flex; align-items: center; gap: 10px; padding: 11px 12px; }
.kit-tile { position: relative; width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--surface); color: var(--g-ink); box-shadow: inset 0 0 0 1px var(--line), 0 1px 0 rgb(15 23 42 / 0.04); }
.kit-tile .i { width: 16px; height: 16px; }
/* the step's own drawing (step-glyph.tsx): the outline in the tile's colour, a tint of the hue, one detail in the full hue */
.kit-g { display: block; width: 72%; height: 72%; overflow: visible; --g-tone: color-mix(in srgb, var(--g) 30%, var(--surface)); }
.kit-g * { stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kit-g .o { fill: none; stroke: currentColor; stroke-width: 1.5; }
.kit-g .t { fill: var(--g-tone); stroke: currentColor; stroke-width: 1.5; }
.kit-g .tf { fill: var(--g-tone); }
.kit-g .w { fill: var(--surface); stroke: currentColor; stroke-width: 1.5; }
.kit-g .h { fill: var(--g); }
.kit-g .hc { fill: var(--g); stroke: var(--surface); stroke-width: 1.5; }
.kit-g .hs { fill: none; stroke: var(--g); stroke-width: 1.9; }
.kit-g .ws { fill: none; stroke: var(--surface); stroke-width: 1.5; }
.kit-g .cut { fill: none; stroke: var(--surface); stroke-width: 4; }
.kit-i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kit-node-t { min-width: 0; flex: 1; display: grid; gap: 1px; }
.kit-node-t b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit-node-t b .i { width: 14px; height: 14px; margin-inline-start: auto; flex: none; }
.kit-node-t small { font-size: 12px; line-height: 1.35; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit-pf { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; color: var(--surface); }
.kit-pf.is-ig { background: var(--instagram); } .kit-pf.is-fb { background: var(--facebook); }
.kit-pf .i { width: 12px; height: 12px; }

/* the ways out: a row each, its dot on the card's edge in the family's hue (hollow while nothing is wired to it) */
.kit-ports { border-top: var(--hairline) solid var(--line-soft); }
.kit-port { position: relative; display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 5px 12px; padding-inline-end: 26px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.kit-port + .kit-port { border-top: var(--hairline) solid var(--line-soft); }
.kit-port-k { display: inline-flex; align-items: center; gap: 4px; }
.kit-port-hint { margin-inline-start: auto; font-size: 11.5px; font-weight: 400; color: var(--ink-3); text-align: end; }
/* a button or a quick reply in the compact card: its label after a small square of the hue */
.kit-port em { min-width: 0; flex: 1; margin-inline-start: -7px; padding: 1px 6px; border: var(--hairline) solid transparent; border-radius: 6px; font-style: normal; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit-port em::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-inline-end: 8px; border-radius: 2px; background: var(--g); vertical-align: 1px; }
.kit-yn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.kit-yn.is-yes { color: var(--accent-ink); } .kit-yn.is-no { color: var(--danger-ink); }
.kit-yn .kit-i { box-sizing: border-box; width: 16px; height: 16px; padding: 3px; border-radius: 50%; stroke-width: 2.8; }
.kit-yn.is-yes .kit-i { background: var(--accent-soft); } .kit-yn.is-no .kit-i { background: var(--danger-soft); }
.kit-way { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.kit-way b { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 6px; background: var(--g-soft); color: var(--g-ink); font-size: 11px; }
.kit-dot { position: absolute; z-index: 1; box-sizing: border-box; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--g); background: var(--g); }
.kit-dot.is-open { border-color: var(--ink-4); background: var(--surface); }
.kit-port > .kit-dot { inset-inline-end: -7px; top: 50%; margin-top: -6px; }
.kit-dot.is-in { inset-inline-start: -7px; top: 20px; }
.kit-node.f-start > .kit-dot.is-in { display: none; }

/* the full card: the family's word and the step's name, then what the person will see */
.kit-node.is-full { width: var(--w, var(--kit-card)); }
.kit-node.is-full > .kit-node-h { gap: 9px; padding: 10px 12px 8px; }
.kit-node.is-full > .kit-node-h > .kit-tile { width: 28px; height: 28px; }
.kit-node.is-full > .kit-dot.is-in { top: 18px; }
.kit-node.is-full .kit-node-t { display: flex; align-items: baseline; gap: 5px; overflow: hidden; white-space: nowrap; }
.kit-node.is-full .kit-node-t b { flex: 0 1 auto; display: block; }
.kit-kick { flex: none; font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--g-ink); }
/* THE CARD'S NAME (LF, 2026-10-10). The step's name is the one thing a card must say, so it is never cut, in any language. A compact card's name takes two lines where one is too short, as the app's own compact card does (flow.css
   `.fb-node.is-compact .fb-title b`); the line under it stays one line, it is a preview. A full card's head keeps "family · name" on one line
   while both fit; a longer name ("Preguntar y esperar · Hacer una pregunta") moves under the family's word whole, and wraps there if it must.
   The dot is drawn before the name, in the gap, so it is clipped away with the gap when the name starts a line; the typed dot stays as an
   invisible strut of no width (it sets the row's height). English reads by the same rules since the coordinator's word (2026-10-10): its own
   "Someone sends a message" and "Someone shares your post" were cut too */
.kit-node-t b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
.kit-node.is-full .kit-node-t { flex-wrap: wrap; gap: 0 13.6px; white-space: normal; }
.kit-node.is-full .kit-node-t b { position: relative; }
.kit-node.is-full .kit-node-t > .kit-sep { visibility: hidden; width: 0; margin-inline-end: -13.6px; overflow: hidden; }
.kit-node.is-full .kit-node-t > .kit-sep + b::before { content: '·'; position: absolute; inset-inline-end: 100%; margin-inline-end: 5px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-4); }
.kit-kick { white-space: nowrap; }
.kit-sep { flex: none; font-style: normal; color: var(--ink-4); }
.kit-view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0 8px 8px; padding: 10px; border-radius: 11px; background: var(--mock-canvas); }
.kit-who { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; line-height: 1.3; color: var(--mock-ink-3); }
.kit-av { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--surface); font-size: 11px; line-height: 1; font-weight: 700; }
.kit-msg, .kit-them { display: block; min-width: 0; border: var(--hairline) solid var(--mock-line); border-radius: 16px; border-end-start-radius: 4px; background: var(--mock-surface); }
.kit-msg-p, .kit-them { display: block; padding: 8px 11px; font-size: 12.5px; line-height: 1.4; color: var(--mock-ink); overflow-wrap: anywhere; }
.kit-them { justify-self: start; max-width: 92%; }
.kit-thumb { display: block; width: 100%; height: auto; aspect-ratio: 1.91 / 1; object-fit: cover; border-radius: 15px 15px 0 0; }
.kit-card-t { display: grid; gap: 1px; padding: 8px 11px; }
.kit-card-t b { font-size: 12.5px; font-weight: 600; color: var(--mock-ink); }
.kit-card-t span { font-size: 11.5px; color: var(--mock-ink-3); }
/* a button of the message: a row of it, as Instagram and Messenger draw them, its dot out on the card's edge */
.kit-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 0; padding: 7px 11px; border-top: var(--hairline) solid var(--mock-line); font-size: 12.5px; font-weight: 600; color: var(--mock-blue); }
.kit-msg > .kit-btn + .kit-btn { border-top: var(--hairline) solid var(--mock-line); }
.kit-msg > .kit-btn:first-child { border-top: 0; }
.kit-btn.is-link { color: var(--mock-ink-3); }
.kit-btn-l { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kit-view .kit-port > .kit-dot { inset-inline-end: calc(-7px - var(--kit-inset)); }
/* quick replies: pills under the message, at its far side, each with its own way out */
.kit-qrs { display: grid; gap: 4px; justify-items: end; }
.kit-qr { --kit-inset: 18px; position: relative; display: flex; justify-content: flex-end; min-height: 0; padding: 0; border: 0; }
.kit-qrs > .kit-qr + .kit-qr { border-top: 0; }
.kit-qr .kit-btn-l { padding: 3px 11px; border: var(--hairline) solid color-mix(in srgb, var(--mock-blue) 45%, var(--mock-line)); border-radius: var(--r-pill); background: var(--mock-surface); font-size: 12px; font-weight: 600; color: var(--mock-blue); }
.kit-note { font-size: 11px; line-height: 1.35; color: var(--mock-ink-3); }
.kit-quote { padding-block: 1px; padding-inline-start: 8px; border-inline-start: 2px solid color-mix(in srgb, var(--g) 50%, var(--line)); font-size: 11.5px; color: var(--mock-ink-3); }
/* the start: the moment it fires (the post, the comment with its keyword marked) */
.kit-moment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border: var(--hairline) solid var(--mock-line); border-radius: 10px; background: var(--mock-surface); }
.kit-post { display: block; width: 56px; height: 56px; border-radius: 9px; object-fit: cover; box-shadow: 0 0 0 2px var(--surface), 0 2px 6px rgb(15 23 42 / 0.12); }
.kit-scope { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 9px; background: color-mix(in srgb, var(--g) 7%, var(--mock-canvas)); }
.kit-scope svg { width: 60px; height: 60px; overflow: visible; }
.kit-scope .sa-card { fill: var(--surface); stroke: var(--mock-line); stroke-width: 1.2; }
.kit-scope .sa-dash { fill: var(--surface); stroke: color-mix(in srgb, var(--g) 45%, var(--mock-line)); stroke-width: 1.4; stroke-dasharray: 4 3; }
.kit-scope .sa-img { fill: color-mix(in srgb, var(--g) 16%, var(--surface)); }
.kit-scope .sa-line { fill: none; stroke: color-mix(in srgb, var(--g) 55%, var(--surface)); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.kit-scope .sa-sun { fill: color-mix(in srgb, var(--fam-logic) 70%, var(--surface)); }
.kit-scope .sa-dot { fill: color-mix(in srgb, var(--ink-4) 55%, var(--surface)); }
.kit-scope .sa-bar { fill: var(--mock-line); }
.kit-scope .sa-hue { fill: var(--g); }
.kit-scope .sa-cta, .kit-scope .sa-play { fill: var(--surface); }
.kit-scope .sa-plus { fill: none; stroke: var(--surface); stroke-width: 1.8; stroke-linecap: round; }
.kit-cm { font-size: 12px; line-height: 1.35; color: var(--mock-ink); overflow-wrap: anywhere; }
.kit-cm b { font-weight: 600; }
.kit-kw { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, var(--g) 18%, transparent); color: var(--g-ink); font-weight: 600; }
.kit-answer { display: flex; align-items: center; gap: 7px; padding: 5px 11px; border: var(--hairline) dashed var(--mock-line); border-radius: var(--r-pill); background: var(--mock-surface); font-size: 11.5px; color: var(--mock-ink-3); }
.kit-caret { width: 1.5px; height: 12px; flex: none; background: var(--g); }
.kit-reply { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-inline-start: 6px; padding-inline-start: 10px; border-inline-start: 2px solid var(--mock-line); }
/* the body of a step that sends nothing: chips, a rule, a request, one quiet line */
.kit-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 12px 12px; color: var(--ink-2); }
.kit-body > * { min-width: 0; max-width: 100%; }
.kit-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.kit-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px; border-radius: var(--r-pill); border: var(--hairline) solid var(--line); background: var(--surface); font-size: 12px; font-weight: 500; color: var(--ink-2); }
.kit-chip .kit-i { font-size: 11px; color: var(--ink-3); }
.kit-meta { font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.kit-rules { display: grid; gap: 3px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.kit-rules i { margin-inline-end: 5px; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--g-ink); }
.kit-http { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.kit-http-m { flex: none; padding: 1px 6px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-ink); font: 700 11px/16px var(--kit-mono); letter-spacing: 0.03em; }
.kit-http-url { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; direction: ltr; }
.kit-var { display: inline-block; margin-inline: 1px; padding: 0 5px; border-radius: 6px; font: 11.5px/18px var(--kit-mono); color: var(--fam-collect-ink); background: var(--fam-collect-soft); }
.kit-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0 14px 10px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kit-stats b { font-weight: 600; color: var(--ink); }
.kit-node.is-full .kit-ports > .kit-port { min-height: 34px; padding-block: 6px; }

/* the wires, as the app draws them (the kit script routes them: flow/route.ts): the colour of the step each leaves, quiet;
   a wire a run has taken (data-in on flow()'s wire) in the full hue, its dashes running the way the flow runs */
.kit-wires, .kit-flow-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.kit-wire-p { fill: none; stroke: color-mix(in srgb, var(--g) 45%, var(--ink-4)); stroke-width: 1.6; }
.kit-wire-a { fill: color-mix(in srgb, var(--g) 50%, var(--ink-4)); stroke: color-mix(in srgb, var(--g) 50%, var(--ink-4)); stroke-width: 1; stroke-linejoin: round; }
.kit-wire-on > .kit-wire-p { stroke: var(--g); stroke-width: 2; stroke-dasharray: 7 5; animation: kit-wire-run 0.9s linear infinite; }
.kit-wire-on > .kit-wire-a { fill: var(--g); stroke: var(--g); }
.kit-wire-on:not(.on) { display: none; }
@keyframes kit-wire-run { to { stroke-dashoffset: -12; } }

/* a flow laid out by hand: flow(). Its cards sit where at() puts them; move the whole flow with --pan-x / --pan-y */
.kit-flow { --kit-way: 1; position: absolute; top: 0; inset-inline-start: 0; width: var(--fw); height: var(--fh); transform: translate(calc(var(--pan-x, 0px) * -1 * var(--kit-way)), calc(var(--pan-y, 0px) * -1)); transition: transform 0.9s var(--ease); }
.kit-flow > .kit-node.kit-at { position: absolute; inset-inline-start: var(--x); top: var(--y); z-index: 1; }

/* the dotted canvas the nodes sit on, wired left to right; a phone stacks them */
.kit-canvas { margin: 0; display: grid; gap: var(--s-4); }
.kit-canvas-in { position: relative; display: flex; align-items: center; justify-content: safe center; gap: 56px; padding: var(--s-12) var(--s-8); border-radius: var(--r-lg); border: var(--hairline) solid var(--line); background-color: var(--surface); box-shadow: var(--shadow-card); background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-4) 45%, transparent) 1px, transparent 1.2px); background-size: 16px 16px; overflow-x: auto; scrollbar-width: none; }
.kit-canvas-in::-webkit-scrollbar { display: none; }
.kit-canvas-in > .kit-node { z-index: 1; }
.kit-canvas figcaption { font-size: var(--t-small); color: var(--ink-3c); text-align: center; }
@media (max-width: 860px) {
  .kit-canvas-in { flex-direction: column; align-items: center; gap: 36px; padding: var(--s-8) var(--s-4); overflow: visible; }
  .kit-canvas-in > .kit-node { width: min(100%, 280px); }
  /* top to bottom (a phone's column): one dot where the wire leaves, under the card, one where it arrives, on top */
  .kit-port > .kit-dot, .kit-view .kit-port > .kit-dot { inset-inline-end: auto; inset-inline-start: 50%; top: auto; bottom: -7px; margin: 0; margin-inline-start: -6px; }
  .kit-port:not(:last-child) > .kit-dot, .kit-view .kit-port > .kit-dot { display: none; }
  .kit-dot.is-in, .kit-node.is-full > .kit-dot.is-in { inset-inline-start: 50%; top: -7px; margin-inline-start: -6px; }
  .kit-flow.is-col-sm { --kit-col: 1; }
  .kit-flow.is-col-sm > .kit-node.kit-at { inset-inline-start: var(--col-x, 20px); top: var(--col-top, calc(var(--col-y, 18px) + var(--sy) * 92px)); width: var(--col-w, 220px); }
  .kit-flow.is-col-sm > .kit-sm-off { display: none; }
  /* a narrow card: the family's word stands over the step's name, so neither is cut */
  .kit-flow.is-col-sm > .kit-node.is-full .kit-node-t { display: grid; gap: 0; white-space: normal; }
  .kit-flow.is-col-sm > .kit-node.is-full .kit-sep { display: none; }
  .kit-flow.is-col-sm > .kit-node.is-full .kit-kick { font-size: 11px; }
  .kit-flow.is-col-sm .kit-port-hint { display: none; }
  .kit-flow.is-col-sm .kit-port > .kit-dot, .kit-canvas-in > .kit-node .kit-port > .kit-dot { display: none; }
  .kit-flow.is-col-sm > .kit-node:has(.kit-port)::after, .kit-canvas-in > .kit-node:has(.kit-port):not(:last-child)::after { content: ''; position: absolute; z-index: 1; inset-inline-start: 50%; bottom: -7px; width: 12px; height: 12px; margin-inline-start: -6px; border-radius: 50%; background: var(--g); }
}

/* ───────────── the builder's chrome, drawn like the app's: the bar, the steps rail, the canvas tools, the pill ───────────── */
.kit-fbar { display: flex; align-items: center; gap: 10px; height: 56px; padding-inline: 10px 16px; border-bottom: var(--hairline) solid var(--line); background: var(--surface); font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.kit-fbar-back { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 8px 10px; font-weight: 500; color: var(--ink-3); }
.kit-fbar-back .kit-i { font-size: 16px; stroke-width: 2; }
.kit-fbar-sep { width: 1px; height: 22px; background: var(--line); }
.kit-fbar-ic { display: grid; place-items: center; width: 26px; height: 26px; margin-inline-start: 6px; border-radius: var(--r-sm); background: var(--rail); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 14px; }
.kit-fbar > b { font-size: 16px; font-weight: 650; letter-spacing: -0.012em; color: var(--ink); }
.kit-fbar-sp { flex: 1; }
.kit-fbar-t { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding-inline: 11px; border-radius: var(--r-md); border: var(--hairline) solid var(--line); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-2); transition: transform 0.15s var(--ease), background 0.2s var(--ease); }
.kit-fbar-t .kit-i { font-size: 15px; stroke-width: 1.8; color: var(--ink-3); }
.kit-fbar-t.tap { transform: scale(0.95); background: var(--canvas); }
.kit-fbar-t.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.kit-fbar-t.is-on .kit-i { color: var(--accent-ink); }
/* Build with AI wears the app's own edge: the families' hues in one line around it (a picture of the app's button) */
.kit-fbar-t.is-ai { border: 1.5px solid transparent; color: var(--ink); background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(100deg, var(--fam-collect), var(--fam-comment), var(--fam-logic), var(--accent-bright)) border-box; }
.kit-fbar-mark img { display: block; width: 18px; height: 18px; }
.kit-fbar-hist { display: inline-flex; align-items: center; gap: 12px; height: 32px; padding-inline: 10px; border-radius: var(--r-md); border: var(--hairline) solid var(--line); color: var(--ink-4); font-size: 15px; }
.kit-fbar-live { display: inline-flex; align-items: center; gap: 7px; margin-inline-start: 4px; font-size: 14px; font-weight: 600; color: var(--ink); }
.kit-fbar-live > i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.kit-fbar-sw { position: relative; width: 34px; height: 20px; border-radius: var(--r-pill); background: var(--accent); }
.kit-fbar-sw::after { content: ''; position: absolute; top: 2px; inset-inline-end: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-lift); }
.kit-fbar-live.is-off > i { background: var(--ink-4); box-shadow: none; }
.kit-fbar-live.is-off .kit-fbar-sw { background: var(--ink-4); }
.kit-fbar-live.is-off .kit-fbar-sw::after { inset-inline: 2px auto; }
.kit-fbar-dots { color: var(--ink-3); font-size: 18px; display: grid; }
.kit-fbar-dots .kit-i { stroke-width: 3; }
.kit-fbar-save { display: inline-grid; place-items: center; height: 34px; padding-inline: 14px; border-radius: var(--r-md); background: var(--rail); color: var(--ink-3); font-size: 13.5px; font-weight: 600; }
.kit-rail { width: 56px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-inline-end: var(--hairline) solid var(--line); background: var(--surface); overflow: hidden; }
.kit-rail-x { display: grid; place-items: center; height: 30px; color: var(--ink-3); font-size: 14px; }
.kit-rail-g { display: grid; justify-items: center; gap: 8px; width: 40px; padding: 10px 0; }
.kit-rail-g + .kit-rail-g { border-top: var(--hairline) solid var(--line); }
.kit-rail .kit-tile { width: 28px; height: 28px; }
.kit-ftools { position: absolute; z-index: 3; inset-inline-start: 12px; bottom: 12px; display: flex; border: var(--hairline) solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-lift); overflow: hidden; color: var(--ink-2); font-size: 15px; }
.kit-ftools span { display: grid; place-items: center; width: 34px; height: 32px; }
.kit-ftools span + span { border-inline-start: var(--hairline) solid var(--line-soft); }
.kit-ftools .kit-i { stroke-width: 1.8; }
.kit-fpill { position: absolute; z-index: 3; top: 12px; inset-inline-end: 12px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding-inline: 12px; border-radius: var(--r-pill); border: var(--hairline) solid var(--line); background: var(--surface); box-shadow: var(--shadow-lift); font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.kit-fpill .kit-i { font-size: 14px; }
.kit-fpill.is-ok { color: var(--accent-ink); }
.kit-fpill.is-warn { border-color: color-mix(in srgb, var(--fam-logic) 35%, var(--surface)); background: var(--fam-logic-soft); color: var(--fam-logic-ink); }

/* the node and its phone: the canvas card, a wire, and what the person sees */
.kit-np { margin: 0; display: grid; gap: var(--s-4); }
.kit-np-in { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: center; padding: var(--s-8); border-radius: var(--r-lg); border: var(--hairline) solid var(--line); background-color: var(--surface); box-shadow: var(--shadow-card); background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-4) 45%, transparent) 1px, transparent 1.2px); background-size: 16px 16px; }
.kit-np-cv { display: grid; justify-items: center; gap: var(--s-3); }
.kit-np-k { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3c); }
.kit-np-wire { height: 2px; border-radius: 1px; background: repeating-linear-gradient(90deg, var(--ink-4) 0 6px, transparent 6px 11px); }
.kit-np figcaption { font-size: var(--t-small); color: var(--ink-3c); text-align: center; }
@media (max-width: 760px) {
  .kit-np-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 40px auto; justify-items: center; padding: var(--s-6) var(--s-4); }
  .kit-np-wire { width: 2px; height: 100%; background: repeating-linear-gradient(180deg, var(--ink-4) 0 6px, transparent 6px 11px); }
}

/* ───────────── the comparison (system.css .cx) in a kit page ───────────── */
.kit-cx { margin-top: 0; }

/* the capture dialog (system.css .lb) */
.kit-lb.is-phone { width: auto; }
.kit-lb.is-phone img { max-height: calc(94vh - 56px); width: auto; }

@media (prefers-reduced-motion: reduce) { .kit-sw, .kit-zoom, .kit-crumb a, .kit-eb a, .kit-flow, .kit-fbar-t { transition: none; } .kit-wire-on > .kit-wire-p { animation: none; } }

/* links inside copy: the accent ink, a quiet underline that firms on hover */
.kit-cap dd a, .kit-sec .lead a, .kit-points a, .kit-step > p a, .kit-hero .lead a, [data-dm-page] #faq .qa-a a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: text-decoration-color var(--t-micro) var(--ease); }
.kit-cap dd a:hover, .kit-sec .lead a:hover, .kit-points a:hover, .kit-step > p a:hover, .kit-hero .lead a:hover, [data-dm-page] #faq .qa-a a:hover { text-decoration-color: currentColor; }

/* links inside kit copy (agent L's rule, made shared): the accent ink, a quiet underline that darkens on hover */
:is(.kit-capg-h, .kit-cap dd, .kit-spot-copy, .kit-hero-note, .kit-lead, .kit-faq, .kit-step) a:not([class]) { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
:is(.kit-capg-h, .kit-cap dd, .kit-spot-copy, .kit-hero-note, .kit-lead, .kit-faq, .kit-step) a:not([class]):hover { text-decoration-color: currentColor; }

/* ═════════════ H0 hardening (2026-10-07; site-src/dm/status/H0-harden-shared.md) ═════════════ */

/* touch targets (the charter's 44px floor on a coarse pointer): the crumb link answers through an invisible ::after; the
   switcher's chips fill their track, which grows 2px (5px of padding around a 34px chip is 44) */
@media (pointer: coarse) {
  .kit-crumb a { position: relative; }
  .kit-crumb a::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
  .kit-switch-row { padding-block: 5px; }
  .kit-sw { position: relative; }
  .kit-sw::after { content: ''; position: absolute; inset: -5px 0; }
}

/* right to left: the kit's layout mirrors (logical properties throughout); a depiction keeps left-to-right geometry (KIT.md § 6).
   The hero's signature visual, a step's small picture, a phone, the canvas and the node-and-phone pair are depictions. Text
   inside them takes its own direction per line, so a translated bubble reads correctly inside a left-to-right chat. */
[dir='rtl'] :is(.kit-hero-visual, .kit-step-v, .kit-phone-w, .kit-canvas-in, .kit-np-in) { direction: ltr; }
[dir='rtl'] :is(.kit-hero-visual, .kit-step-v, .kit-phone-w, .kit-canvas-in, .kit-np-in, .kit-flow, .kit-fbar, .kit-fpill, .kit-node) :is(p, li, h3, h4, dt, dd, time, small, b, span, em, q, mark, th, td) { unicode-bidi: plaintext; }   /* the words of a card or a bubble sit in b, span and em too (LF, 2026-10-10: a title that ended in "15%" or an emoji showed it at the wrong end) */
[dir='rtl'] .kit-phone-l, [dir='rtl'] .kit-np-k { direction: rtl; }   /* the kit's own captions are page text */
/* a flow() is a depiction too and keeps left to right; flow(mirror=True) follows the page instead, as the app's canvas does for an Arabic reader:
   its cards, dots and pan are logical, and the kit script routes its wires mirrored */
[dir='rtl'] .kit-flow:not(.is-mirror), [dir='rtl'] .kit-fbar, [dir='rtl'] .kit-rail { direction: ltr; }
[dir='rtl'] .kit-flow.is-mirror { direction: rtl; --kit-way: -1; }
/* a card on an Arabic page (LF, 2026-10-10; decided: the canvas stays left to right, the words inside a card read right to left). The card stays where
   it was laid, its in-dot on the left and its ways out on the right, so the wires land as drawn; its head, preview, body and rows take the reader's
   direction, as the app's Arabic card does: the tile at the right, the name beside it, a row's label at the right and its hint at the left. The
   dots keep their physical edge. Quick replies and an indented reply keep the side their dots are measured from */
[dir='rtl'] .kit-node > :not(.kit-dot) { direction: rtl; }
[dir='rtl'] .kit-flow.is-mirror > .kit-node > :not(.kit-dot) { direction: inherit; }
[dir='rtl'] :not(.is-mirror) > .kit-node .kit-port { padding-inline: 26px 12px; }
[dir='rtl'] :not(.is-mirror) > .kit-node .kit-qrs { direction: ltr; }
[dir='rtl'] :not(.is-mirror) > .kit-node .kit-reply { margin-inline: 0 6px; padding-inline: 0 10px; border-inline-start: 0; border-inline-end: 2px solid var(--mock-line); }
@media (min-width: 861px) {
  [dir='rtl'] :not(.is-mirror) > .kit-node .kit-port > .kit-dot { inset-inline: -7px auto; }
  [dir='rtl'] :not(.is-mirror) > .kit-node .kit-view .kit-port > .kit-dot { inset-inline: calc(-7px - var(--kit-inset)) auto; }
}