/* ClickSomo — only what castomo-dashkit does not already draw.
   Everything else — the shell, cards, lists, forms, badges, tables, meters,
   tabs, dialogs, the assistant and the drawings — is the kit's
   (public/dashkit), in ClickSomo's theme: clicksomo.com's blue ramp and the
   Minimalistic drawings. Every value here is a kit token; no colour is named
   in this file (GUIDELINES §0.1). Media queries use only the kit's steps —
   860, 640, 560, 420, 400 (§0.36) — and each says which and why. */

/* ---------- Sign in ---------- */
.auth-title { font-size: var(--t3); }
/* The welcome words and the button are two beats: a clear pause between them. */
.auth-card > .stack-sm + * { margin-top: var(--s3); }
.auth-card > .alert { margin-top: var(--s2); }
.auth-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s0); color: var(--ink-3); font-size: var(--t-1); text-align: center; }

/* ---------- Page rhythm (§0.18) ----------
   A screen puts its blocks straight into #view, so the space between two
   blocks is one rule here, never a margin each block remembers. Vertical
   margins collapse in block flow, so a block that asks for more (a kit
   `.section`) gets exactly that, never the sum. */
#view > * + * { margin-top: var(--gap); }
#view > * + .section { margin-top: var(--s5); }
/* A slot that drew nothing (the import panel with nothing waiting) takes no gap. */
#view > :empty { display: none; }
/* Above every screen when the workspace is a viewer's (app.js workspaceNotice): one gap below it, the same as between blocks. */
.workspace-notice { margin-bottom: var(--gap); }
/* A viewer's locked door (ui.js btn): visibly off, and its words still readable, so it says what a role would allow. */
.btn[data-viewer-locked] { cursor: not-allowed; opacity: .55; }
.noscript { padding: var(--s4); text-align: center; }
.settings-stack { max-width: 880px; }
/* The time-zone picker (timezone-picker.js): one searchable select (dashkit §0.40). Its field
   may shrink with the card, so neither a long zone name nor a phone can push it wider (§0.14). */
.tz-pick { min-width: 0; }
.tz-pick .select { width: 100%; max-width: 100%; min-width: 0; }
.tz-state:empty { display: none; }
.tz-now { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* A page's tab row never widens its grid: at zero it scrolls inside itself (§0.4). */
.page-tabs { min-width: 0; }
.bullets { display: grid; gap: var(--s-1); margin: 0; padding-inline-start: var(--s3); color: var(--ink-2); }
.card-legend { margin: var(--s1) 0 0; font-size: var(--t1); }
/* An address, an id, a token: long words with no space break anywhere rather than push the card wide. */
.break { overflow-wrap: anywhere; word-break: break-word; }
/* A link inside a sentence that ACTS on this page (ways.js textAction) is a
   real button, for the keyboard and for screen readers, wearing the kit's
   `.link`: only a button's own chrome is taken off here, the look is the kit's. */
button.link { border: 0; padding-inline: 0; padding-top: 0; font: inherit; text-align: inherit; cursor: pointer; }

/* ---------- Facts ----------
   ui.js facts() says how many columns in an ATTRIBUTE, never inline: an
   inline --cols would beat the kit's phone rule (§0.35). Above the kit's
   560px step the attribute sets the count; at 560 and below the kit's own
   single column stands. */
@media (min-width: 560.02px) {
  .facts[data-cols="1"] { --cols: 1; }
  .facts[data-cols="2"] { --cols: 2; }
  .facts[data-cols="3"] { --cols: 3; }
  .facts[data-cols="4"] { --cols: 4; }
}

/* ---------- Overview ---------- */
.home-art { padding-block: var(--s3); }
/* The next step's buttons (views/home.js): side by side while they fit, each
   on its own line when they do not — a long Polish label wraps inside its pill
   rather than pushing the tile wider than the phone (§0.14, §0.34). */
.home-next-actions { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.home-next-actions .btn { max-width: 100%; white-space: normal; }
/* A step's one action names the step in full; at the kit's 640px step it wraps inside its pill (§0.34). */
@media (max-width: 640px) {
  .steps .btn { max-width: 100%; white-space: normal; text-align: start; padding-block: 8px; }
}

/* ---------- Lists with actions ---------- */
.list > li { flex-wrap: wrap; }
.list > li > .btn-row { flex-wrap: wrap; justify-content: flex-end; }
/* At the kit's 640px step a row's actions take a line of their own, first, under the words (§0.34). */
@media (max-width: 640px) {
  .list > li > .btn-row { flex-basis: 100%; justify-content: flex-start; padding-inline-start: 0; }
}

/* ---------- From clicksomo.com (imports.js) ---------- */
.import-card { border-inline-start: 3px solid var(--accent-ink); }
.import-title { display: flex; align-items: flex-start; gap: var(--s0); margin: 0 0 var(--s1); font-weight: 600; color: var(--ink); }
.import-title .ci { flex: none; margin-top: 2px; color: var(--accent-ink); }
.import-status { margin: 0 0 var(--s1); color: var(--ink-2); }
.import-progress { display: block; height: 6px; border-radius: var(--radius-pill); }
.import-sub { margin: var(--s2) 0 var(--s0); font-size: var(--t0); }
/* A draft's title keeps a readable width; its state and button wrap beneath it rather than squeezing it to a word per line. */
.import-drafts .list > li > .list-main { flex: 1 1 10rem; }
/* The funnel page's holder for "Brought in from clicksomo.com": no box of its own, and no gap once the card is closed. */
.import-slot { display: contents; }
/* Under the kit's 400px step the card runs edge to edge and its pad is the one inset (§0.31); the accent edge moves to the top. */
@media (max-width: 400px) {
  .import-card { border-inline-start-width: 0; border-top: 3px solid var(--accent-ink); }
}

/* --- reports --- (views/reports.js, report-campaign.js, report-parts.js) */
/* A campaign's status badge and its dates share the page's lead line and wrap together. */
.report-lead { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s0); }
.report-live { margin: 0; }
/* The line under a campaign's name, or beside a rate: quieter, on its own line. */
.report-sub { display: block; color: var(--ink-3); font-size: var(--t-1); font-weight: 400; }
/* A cell that holds a value and the line under it: one block, so the phone's label | value rows keep them together. */
.report-cell { display: inline-grid; justify-items: end; }
.report-cell-lead { display: grid; justify-items: start; }
.report-table-card .table td.end .report-sub { white-space: nowrap; }
/* The table card is flush, so its foot carries the card's inset; the hint and "Show more" stack. */
.report-foot { display: grid; gap: var(--s1); padding-bottom: var(--card-pad); }
.report-foot .hint { margin: 0; }

/* A split: one slim bar of shares, the same numbers written under it (GUIDELINES §5e).
   Each segment's width and colour are the part's own, set where it is drawn;
   a 2px surface gap keeps neighbours apart without leaning on hue alone. */
.report-split { display: grid; gap: var(--s0); margin-top: var(--s0); }
.report-split-bar { display: flex; gap: 2px; height: 10px; border-radius: var(--radius-pill); overflow: hidden; background: var(--field); }
.report-split-bar > span { flex: 0 0 var(--share); min-width: 4px; background: var(--c); }
.report-split-words { margin: 0; }
.report-split-words b { color: var(--ink); font-weight: 650; }

/* Funnels: the bar under each funnel's name uses the row's full width. */
.report-funnels .list-main { gap: var(--s-1); }
.report-funnels .list-main .hint { margin: 0; }

/* Why machines: each reason with its share as a thin bar under its words. */
.report-reasons > li { align-items: flex-start; }
.report-reason-bar { display: block; height: 4px; width: var(--share); min-width: 4px; margin-top: var(--s-1); border-radius: var(--radius-pill); background: var(--chart-2); }
.report-reason-count { display: grid; flex: none; justify-items: end; color: var(--ink); font-weight: 650; }
.report-reason-count small { color: var(--ink-3); font-weight: 400; }

/* --- campaigns & creatives --- */
/* views/campaigns.js, views/creatives.js and their helpers (campaign-ui.js,
   creative-editor.js). Kit tokens only; breakpoints are the kit's steps. */

/* ---------- Tiles: campaigns, creatives, templates (GUIDELINES §5e) ----------
   One tile shape for all three. Rows are shared with the tiles beside it
   through subgrid, so a two-line name moves that row down across the whole
   grid row and the buttons stay level on the tile's foot. */
.cm-grid { align-items: stretch; }
.cm-tile {
  --tone: transparent;
  position: relative;
  gap: var(--s1);
  padding: var(--s3) var(--s3) var(--s2);
  overflow: clip;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease);
}
@supports (grid-template-rows: subgrid) {
  .cm-tile { display: grid; grid-template-rows: subgrid; grid-row: span 5; align-content: start; }
}
@supports not (grid-template-rows: subgrid) {
  .cm-tile { display: flex; flex-direction: column; }
  .cm-tile-title { min-height: calc(2 * 1.3em); }
  .cm-tile-foot { margin-top: auto; }
}
/* Status reads from the top edge as well as the badge's words and shape (never colour alone). */
.cm-tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--tone); }
.cm-tile[data-status="sending"] { --tone: var(--ok); }
.cm-tile[data-status="paused"] { --tone: var(--warn); }
.cm-tile[data-status="scheduled"] { --tone: var(--accent-ink); }
@media (hover: hover) { .cm-tile:hover { box-shadow: var(--shadow-pop); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .cm-tile:hover { transform: translateY(-2px); } }
.cm-tile:has(.cm-tile-foot :is(a, button):focus-visible) { box-shadow: 0 0 0 2px var(--focus), var(--shadow-pop); }
.cm-tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s1); min-width: 0; }
.cm-tile-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--radius-control); background: var(--accent-soft); color: var(--accent-ink); }
.cm-tile-icon .ci { --ci-size: 22px; }
.cm-tile-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; min-width: 0; }
.cm-tile-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: var(--t1); line-height: 1.3; overflow-wrap: anywhere; }
.cm-tile-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.cm-tile-when { margin: 0; color: var(--ink-3); font-size: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cm-tile-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s0); padding-top: var(--s1); border-top: var(--rule-w) solid var(--rule); align-self: end; }
/* At the kit's 560px step a tile gives up padding before its words wrap again. */
@media (max-width: 560px) { .cm-tile { padding: var(--s2); } }

/* The filter row over the campaign tiles: chips that wrap, never a sideways scroll. */
.cm-filters { display: flex; flex-wrap: wrap; gap: var(--s0); margin-bottom: var(--s2); }
.tile-section > .hint, .tile-section > .pager { margin-top: var(--s2); }

/* ---------- A rendered e-mail: only ever inside a sandboxed frame ---------- */
.preview-frame { display: block; width: 100%; height: 560px; border: var(--rule-w) solid var(--rule); border-radius: var(--radius-control); background: var(--paper-2); }
.preview-frame-tall { height: 720px; }
.dialog .preview-frame { height: min(60vh, 560px); }
/* At the kit's 640px step the frame is shorter: the page, not the frame, should do the scrolling. */
@media (max-width: 640px) { .preview-frame, .preview-frame-tall { height: 480px; } }

/* ---------- The creative editor ---------- */
.cm-save-row { margin: 0; }
.cm-save-state { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: var(--t-1); font-weight: 600; }
.cm-save-state .ci { --ci-size: 16px; }
.cm-save-state[data-unsaved="true"] { color: var(--warn); }
/* The preview keeps pace beside the editor on a wide screen; stacked, it simply follows. */
@media (min-width: 860.02px) { .cm-preview-col > .card { position: sticky; top: var(--s3); } }
.cm-preview-card .segmented { max-width: 100%; }
.cm-disclosure > summary, .vars-picker > summary { display: inline-flex; align-items: center; gap: 6px; width: fit-content; color: var(--accent-ink); font-size: var(--t-1); font-weight: 650; cursor: pointer; border-radius: 6px; }
.cm-disclosure > summary .ci, .vars-picker > summary .ci { --ci-size: 16px; }
.cm-disclosure[open] > summary, .vars-picker[open] > summary { margin-bottom: var(--s1); }
/* The detail picker is a panel inside the card: marked by a tint, never by more room (§0.32). */
.vars-picker { padding: var(--s1) var(--s2); border-radius: var(--radius-control); background: var(--accent-wash); }
.cm-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s1); }
.cm-inline > .field { flex: 1 1 16rem; min-width: 0; }
.cm-narrow { max-width: 720px; }
.cm-notices:empty { display: none; }

/* Blocks: a column of small forms, each marked by a rule, nested ones by an inline rule. */
.blk-list { display: grid; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.blk { display: grid; gap: var(--s1); min-width: 0; padding: var(--s1) var(--s2) var(--s2); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-control); background: var(--paper-2); }
.blk[data-problem] { border-color: var(--bad); box-shadow: inset 3px 0 0 var(--bad); }
.blk-head { display: flex; align-items: center; gap: var(--s0); min-width: 0; }
.blk-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); }
.blk-icon .ci { --ci-size: 18px; }
.blk-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.blk-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
.blk-tools .icon-btn:disabled { opacity: .4; cursor: default; }
.blk-problems:empty { display: none; }
.blk-group { display: grid; gap: var(--s1); }
.blk-add { display: flex; flex-wrap: wrap; gap: var(--s0); align-items: center; }
.blk-add .select { flex: 1 1 12rem; width: auto; min-width: 0; max-width: 100%; }
.blk-nested, .blk-column { display: grid; gap: var(--s1); padding-inline-start: var(--s1); border-inline-start: 2px solid var(--rule-strong); }
.blk-columns { display: grid; gap: var(--s2); }
.blk-column-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s0); }
.blk-pairs { display: grid; gap: var(--s0); min-width: 0; margin: 0; padding: 0; border: 0; }
.blk-pairs > legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.blk-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s0); align-items: center; }
/* At the kit's 640px step a block's box goes: a top rule marks it, and its words take the card's whole width (§0.32). */
@media (max-width: 640px) {
  .blk { padding: var(--s1) 0 0; border-width: var(--rule-w) 0 0; border-radius: 0; background: none; }
  .blk[data-problem] { box-shadow: inset 0 3px 0 var(--bad); }
  .vars-picker { padding-inline: var(--s1); }
}
/* At the kit's 420px step a label/value line stacks: two fields side by side would be a word each. */
@media (max-width: 420px) {
  .blk-pair { grid-template-columns: minmax(0, 1fr) auto; }
  .blk-pair > :nth-child(2) { grid-column: 1; }
  .blk-pair > .icon-btn { grid-row: 1 / span 2; grid-column: 2; }
}
/* Under the kit's 400px step the tinted picker bleeds to the card's edge and takes its pad (§0.32). */
@media (max-width: 400px) {
  .vars-picker { margin-inline: calc(-1 * var(--card-pad)); padding-inline: var(--card-pad); border-radius: 0; }
}

/* --- contacts & audiences --- */
/* Contacts (views/contacts.js, contact-*.js, import-csv*.js) and Audiences
   (views/audiences.js, audience-*.js, segment-*.js). Tokens only; the kit's
   steps only — 860, 640, 560, 420, 400 — each named where it is used. */

/* A dialog that is not about deleting wears the accent, not the kit's red. */
.dialog-art[data-tone="accent"] { background: var(--accent-soft); color: var(--accent-ink); }
.contacts-dialog .dialog-body { gap: var(--s1); }
.dialog-problem:empty { display: none; }

/* Two fields side by side; one column from the kit's 560px step (§4d). */
.contacts-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1) var(--s2); }
@media (max-width: 560px) { .contacts-two { grid-template-columns: minmax(0, 1fr); } }

/* ---------- People ---------- */
.contacts-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0) var(--s1); }
.contacts-toolbar .count:not(:empty) { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--t-1); }
.contacts-filters { padding-top: var(--s1); border-top: var(--rule-w) solid var(--rule); }
.contacts-filters[hidden] { display: none; }
.contacts-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--s1) var(--s2); }
.contacts-filter-grid .select, .contacts-filter-grid .input { width: 100%; max-width: 100%; }
.contacts-summary { margin: 0; }
.contacts-summary:empty { display: none; }
/* The bulk bar stands on its own above the table, so it keeps the card's corners. */
.contacts-bulk, .contacts-people .bulkbar, .page-tabs .bulkbar { border-radius: var(--radius-control); border-bottom: 0; }
.contacts-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.table-card .table-foot:empty { display: none; }
/* At the kit's 640px step the toolbar's search takes its own row and the buttons share the next (§0.34). */
@media (max-width: 640px) {
  .contacts-toolbar .input-wrap { flex: 1 1 100%; max-width: none; }
  .contacts-toolbar .spacer { display: none; }
  .contacts-toolbar .btn-primary { order: -1; flex: 1 1 100%; justify-content: center; }
}

/* ---------- One contact ---------- */
.consent-row .list-main b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.consent-mailable { color: var(--ink-2); }
.consent-event p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.consent-event small { color: var(--ink-3); }
.contacts-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s0); margin: 0; padding: 0; }
.contacts-chips .chip { max-width: 100%; gap: 2px; padding-inline-end: 4px; white-space: normal; }
.contacts-chips .chip a { overflow-wrap: anywhere; padding-inline-end: 4px; }
.chip-remove { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-3); cursor: pointer; }
.chip-remove .ci { --ci-size: 14px; }
@media (hover: hover) { .chip-remove:hover { background: var(--hover); color: var(--ink); } }
@media (pointer: coarse) { .chip-remove { width: 36px; height: 36px; } }
.contacts-danger { border: var(--rule-w) solid color-mix(in oklab, var(--bad) 40%, var(--rule)); }
/* A page head whose title is a stand-in chip keeps the chip's own size. */
.page-head h1 .name-placeholder { font-size: inherit; }

/* ---------- Import ---------- */
.import-steps { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s0) var(--s2); margin: 0; padding: 0; color: var(--ink-3); font-size: var(--t-1); font-weight: 600; }
.import-steps li { display: inline-flex; align-items: center; gap: 6px; }
.import-steps .step-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--field); color: var(--ink-2); }
.import-steps .step-mark .ci { --ci-size: 14px; }
.import-steps [data-state="current"] { color: var(--ink); }
.import-steps [data-state="current"] .step-mark { background: var(--accent-soft); color: var(--accent-ink); }
.import-steps [data-state="done"] .step-mark { background: color-mix(in oklab, var(--ok) 16%, var(--paper-2)); color: var(--ok); }
.import-paste-box summary { cursor: pointer; color: var(--accent-ink); font-weight: 600; }
.import-paste-box[open] summary { margin-bottom: var(--s1); }
.import-paste { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-1); }
.import-keep { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0) var(--s1); padding-block: 6px; border-top: var(--rule-w) solid var(--rule); }
.import-keep:first-child { border-top: 0; }
.import-keep .check { flex: 1 1 12rem; min-width: 0; }
.import-keep-name { flex: 1 1 12rem; min-width: 0; }
.import-keep-name .input { width: 100%; }
.import-keep-name .input:disabled { opacity: .55; }
.import-choice { padding: var(--s1); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-control); }
.import-choice:has(input:checked) { border-color: var(--accent-ink); background: var(--accent-wash); }
.import-choice span { display: grid; gap: 2px; }
.import-errors summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.import-errors[open] summary { margin-bottom: var(--s0); }
/* The sample is the file as read: a wide file scrolls inside its own frame on a desktop,
   and under the kit's 720px table step it becomes one card per row like every table. */
.import-sample { box-shadow: none; border: var(--rule-w) solid var(--rule); }

/* ---------- Audiences ---------- */
.audiences-tab-actions { justify-content: space-between; }
.audiences-tab-actions .hint { flex: 1 1 18rem; margin: 0; }
.audiences-tab-actions .btn { order: 2; }

/* ---------- The segment builder ----------
   A group inside a group is marked by a rule on its start edge, never by more
   room (§0.32): nested four deep on a phone, the words still start near the edge. */
.seg-rule { display: grid; gap: var(--s1); }
.seg-group { display: grid; gap: var(--s1); }
.seg-group:not([data-root]) { padding-inline-start: var(--s1); border-inline-start: 2px solid var(--accent-soft); }
.seg-group[data-mode="none"]:not([data-root]) { border-inline-start-color: color-mix(in oklab, var(--bad) 45%, var(--rule)); }
.seg-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0); color: var(--ink-2); font-weight: 600; }
.seg-group-head .select { width: auto; min-width: 0; }
.seg-group-head .icon-btn { margin-inline-start: auto; }
.seg-children { list-style: none; display: grid; gap: var(--s0); margin: 0; padding: 0; }
.seg-condition { display: flex; align-items: flex-start; gap: var(--s0); padding: var(--s0); border-radius: var(--radius-control); background: var(--field); }
.seg-condition-parts { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--s0); }
/* A searchable select sits in its wrapper (display: contents), so its field is reached through it. */
.seg-condition-parts > .select, .seg-condition-parts > .search-select > .select, .seg-condition-parts > .input { flex: 1 1 10rem; min-width: 0; max-width: 100%; }
.seg-condition-parts > .seg-choices { flex: 1 1 100%; }
.seg-choices { display: flex; flex-wrap: wrap; gap: 2px var(--s1); max-height: 12rem; overflow-y: auto; }
.seg-choices .check { min-width: 0; }
[data-invalid].seg-condition { box-shadow: inset 0 0 0 var(--rule-w) color-mix(in oklab, var(--warn) 60%, var(--rule)); }
.seg-count { margin: 0; font-size: var(--t1); }
.seg-count b { font-size: var(--t3); color: var(--ink); font-variant-numeric: tabular-nums; }
.seg-raw { max-width: 100%; max-height: 14rem; margin: var(--s0) 0; padding: var(--s1); overflow: auto; border-radius: var(--radius-control); background: var(--paper-2); color: var(--ink); font-size: var(--t-1); white-space: pre; overflow-wrap: normal; }
/* On a wide screen, where the kit's .split keeps two columns (its own 1100px step), the answer stays in view while the rule grows long. */
@media (min-width: 1100.02px) { .seg-answer { position: sticky; top: var(--s2); align-self: start; } }
/* From the kit's 640px step the condition's own tint drops its side room and the parts go one per line (§0.32, §0.33). */
@media (max-width: 640px) {
  .seg-group:not([data-root]) { padding-inline-start: var(--s0); }
  .seg-condition { padding-inline: 6px; }
  .seg-condition-parts > .select, .seg-condition-parts > .search-select > .select, .seg-condition-parts > .input { flex-basis: 100%; }
}
/* Under the kit's 400px step a tinted condition bleeds to its card's edge only at the root, so its words line up with the card's (§4d). */
@media (max-width: 400px) {
  .seg-group[data-root] > .seg-children > li > .seg-condition { margin-inline: calc(-1 * var(--card-pad)); padding-inline: var(--card-pad); border-radius: 0; }
}

/* The kit's card is a column with no gap between its parts (Settings uses .form-card's).
   Every card these screens draw spaces its parts by one rule, so a stepper, a legend and
   a table never touch (§0.18); the head's own margin gives way to it. */
:is([id^="contacts-panel-"], [id^="contact-panel-"], [id^="audiences-panel-"], [id^="list-panel-"], .seg-split) .card:not(.table-card) { gap: var(--s2); }
:is([id^="contacts-panel-"], [id^="contact-panel-"], [id^="audiences-panel-"], [id^="list-panel-"], .seg-split) .card:not(.table-card) > .card-head { margin-bottom: 0; }

/* --- funnels --- */
/* The Funnels screen (views/funnels.js and the funnel-*.js modules beside
   it): the list's tiles, the builder, its canvas and its phone outline, the
   step editor, Versions and People. Kit tokens only (§0.1). The builder
   arranges itself by the room its CARD has — a container query, not a
   screen step — because the shell's sidebar takes a different share at
   every width; the screen steps it does use are the kit's 860, 640 and 400
   (§0.36), each named where it is used. */

/* ---------- The list: tiles that line up (§5e) ---------- */
.ft-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
.ft-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.ft-grid[data-count="2"], .ft-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Five rows per tile, shared across a row, so titles, words and buttons stand level. */
.ft { display: grid; grid-template-rows: subgrid; grid-row: span 5; gap: var(--s1); cursor: pointer; border-top: 3px solid var(--rule); transition: transform var(--dur-fast) var(--ease); }
.ft[data-status="live"] { border-top-color: var(--ok); }
.ft[data-status="paused"] { border-top-color: var(--warn); }
.ft[data-status="draft"] { border-top-color: var(--info); }
@media (hover: hover) { .ft:hover { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .ft, .ft:hover { transition: none; transform: none; } }
.ft:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.ft-name { margin: 0; font-size: var(--t1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ft-chips { display: flex; flex-wrap: wrap; gap: var(--s0); align-items: center; }
.ft-next { margin: 0; color: var(--ink-2); }
.ft-meta { margin: 0; color: var(--ink-3); font-size: var(--t-1); }
.ft-foot { align-self: end; }
/* At the kit's 860 step the shell goes phone: two across at most; at 640, one (§5e "a phone is one column"). */
@media (max-width: 860px) { .ft-grid:not([data-count="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ft-grid:not([data-count="1"]) { grid-template-columns: minmax(0, 1fr); } }

/* ---------- A funnel's head ---------- */
.fh-badges { display: flex; flex-wrap: wrap; gap: var(--s0); margin: var(--s0) 0; }
.fh-actions { display: flex; flex-wrap: wrap; gap: var(--s0); }

/* ---------- The builder ---------- */
.fb-card { container-type: inline-size; container-name: builder; }
.fb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1); }
.fb-actions { flex-wrap: wrap; }
.fb-status { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink-3); font-size: var(--t-1); }
.fb-status .ci { --ci-size: 16px; }
.fb-slot:empty { display: none; }
.fb-body { display: grid; gap: var(--s2); grid-template-columns: minmax(0, 1fr); margin-top: var(--s1); }
.fb-main { min-width: 0; display: grid; gap: var(--s0); align-content: start; }
.fb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.fb-tools-gap { flex: 1; }
.fb-tools .icon-btn[disabled] { opacity: .45; }
.fb-view span { display: inline-flex; align-items: center; gap: 6px; }
.fb-keys { margin: 0; }
.fb-palette { display: grid; gap: var(--s1); align-content: start; }
.fb-group-title { margin: 0 0 6px; font-size: var(--t-1); color: var(--ink-3); font-weight: 600; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-chips .chip { white-space: normal; text-align: start; }
.fb-inspector { min-width: 0; padding: var(--s2); border-radius: var(--radius-sm); background: var(--paper); border: var(--rule-w) solid var(--rule); align-self: start; }
.fb-results:empty { display: none; }
.fb-sub { margin: var(--s2) 0 var(--s0); font-size: var(--t0); }
.fb-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); }
.fb-dot .ci { --ci-size: 16px; }
.fb-timeline b { overflow-wrap: anywhere; }
.fb-timeline .hint { margin: 2px 0 0; }
/* Wide enough for all three side by side: the palette, the canvas, the step editor. */
@container builder (min-width: 1000px) {
  .fb-body { grid-template-columns: 188px minmax(0, 1fr) 300px; }
  .fb-palette .fb-chips { flex-direction: column; align-items: stretch; }
  .fb-palette .chip { justify-content: flex-start; }
}
/* A mid-width card: the palette becomes a row of chips over the canvas, the editor stays beside it. */
@container builder (min-width: 700px) and (max-width: 999.98px) {
  .fb-body { grid-template-columns: minmax(0, 1fr) 280px; }
  .fb-palette { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fb-card[data-mode="outline"] .fb-body { grid-template-columns: minmax(0, 1fr); }
.fb-card[data-mode="outline"] .fb-palette, .fb-card[data-mode="outline"] .fb-keys { display: none; }

/* ---------- The canvas (canvas.js), all in tokens so dark is designed, not inverted (§7b) ---------- */
.fb-stage { min-width: 0; }
.fb-canvas {
  position: relative;
  height: clamp(420px, 62vh, 760px);
  border-radius: var(--radius-sm);
  border: var(--rule-w) solid var(--rule);
  background-color: var(--paper);
  background-image: radial-gradient(var(--rule) 1px, transparent 1.2px);
  background-size: 22px 22px;
  overflow: hidden;
}
.fc { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; cursor: grab; }
.fc:active { cursor: grabbing; }
.fc:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.fc-box { fill: var(--paper-2); stroke: var(--rule-strong); stroke-width: 1.5; }
.fc-node { cursor: pointer; }
.fc-strip { fill: var(--chart-2); }
.fc-entry .fc-strip { fill: var(--accent); }
.fc-flow .fc-strip { fill: var(--chart-3); }
.fc-title { fill: var(--ink); font-size: 13px; font-weight: 700; }
.fc-line { fill: var(--ink-2); font-size: 12px; }
.fc-node.is-idle .fc-box { stroke-dasharray: 4 4; }
.fc-node.is-selected .fc-box { stroke: var(--accent); stroke-width: 3; }
.fc-node.needs-attention .fc-box { stroke: var(--info); stroke-width: 2.5; stroke-dasharray: 6 4; }
.fc-node.has-problem .fc-box { stroke: var(--bad); stroke-width: 2.5; stroke-dasharray: none; }
.fc-node.is-selected.has-problem .fc-box, .fc-node.is-selected.needs-attention .fc-box { stroke-width: 3.5; }
.fc-problem { fill: var(--bad); stroke: var(--paper-2); stroke-width: 2; }
.fc-attention { fill: var(--info); stroke: var(--paper-2); stroke-width: 2; }
.fc-handle { cursor: crosshair; }
.fc-handle-hit { fill: transparent; }
.fc-handle-dot { fill: var(--paper-2); stroke: var(--accent); stroke-width: 2.5; transition: r var(--dur-fast) var(--ease); }
@media (hover: hover) { .fc-handle:hover .fc-handle-dot { fill: var(--accent); } }
.fc-handle-label { fill: var(--ink-3); font-size: 10px; font-weight: 600; }
.fc-edge-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.fc-edge-line { fill: none; stroke: var(--ink-3); stroke-width: 2; pointer-events: none; }
.fc-edge-yes .fc-edge-line { stroke: var(--ok); }
.fc-edge-no .fc-edge-line { stroke: var(--warn); stroke-dasharray: 6 4; }
.fc-edge.is-selected .fc-edge-line { stroke: var(--accent); stroke-width: 3.5; }
.fc-edge-label { fill: var(--ink-2); font-size: 11px; font-weight: 700; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; pointer-events: none; }
.fc-arrowhead { fill: var(--ink-3); }
.fc-rubber { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .fc-handle-dot { transition: none; } }

/* ---------- The step editor (funnel-inspector.js) ---------- */
.fi { display: grid; gap: var(--s1); }
.fi-head .hint { margin: 2px 0 0; }
.fi-title { margin: 0; font-size: var(--t1); }
.fi-fields { display: grid; gap: var(--s1); }
.fi-pair { display: grid; gap: var(--s0); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fi-pair .field { min-width: 0; }
.fi-pair .select, .fi-pair .input, .fi .select { width: 100%; max-width: 100%; }
.fi-warn { color: var(--bad); }
.fi-id { font-size: var(--t-2); overflow-wrap: anywhere; }
.fi-code { margin: 0; padding: var(--s0); border-radius: var(--radius-sm); background: var(--paper-2); font-size: var(--t-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 12rem; overflow: auto; }
.fi-next { display: grid; gap: var(--s0); margin: 0; padding: var(--s1) 0 0; border: 0; border-top: var(--rule-w) solid var(--rule); min-width: 0; }
.fi-next legend { padding: 0; font-weight: 700; font-size: var(--t0); }
.fi-arms { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s0); }
.fi-arm { display: grid; grid-template-columns: minmax(0, 1fr) 5rem auto auto; gap: 6px; align-items: center; }
.fi-share { color: var(--ink-3); font-size: var(--t-1); min-width: 3ch; text-align: end; }

/* ---------- The phone's outline (funnel-outline.js) ---------- */
.fo { display: grid; gap: var(--s2); }
.fo-list { list-style: none; margin: 0; padding: 0; display: grid; }
.fo-step { border-top: var(--rule-w) solid var(--rule); }
.fo-step:last-child { border-bottom: var(--rule-w) solid var(--rule); }
.fo-step[data-group="entry"] .fo-n { background: var(--accent); color: var(--on-accent); }
.fo-row { display: flex; align-items: flex-start; gap: var(--s1); width: 100%; padding: var(--s1) 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.fo-row:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.fo-row > .ci { flex: none; margin-top: 4px; color: var(--ink-3); }
.fo-n { flex: none; display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: var(--t-1); }
.fo-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fo-main b, .fo-line { overflow-wrap: anywhere; }
.fo-line { color: var(--ink-2); font-size: var(--t-1); }
.fo-main .badge { justify-self: start; }
.fo-paths { margin: 0 0 var(--s1); padding-inline-start: calc(28px + var(--s1)); list-style: none; color: var(--ink-3); font-size: var(--t-1); }
/* The editor opens under its row, marked by a rule, never by another box (§0.32). */
.fo-editor { padding: var(--s1) 0 var(--s2); border-top: var(--rule-w) dashed var(--rule); }
.fo-add { display: grid; gap: var(--s1); }
.fo-add-title { margin: 0; font-size: var(--t0); }

/* ---------- Versions and People ---------- */
.fv-in { color: var(--ink-3); font-size: var(--t-1); }
.fp-label { font-weight: 600; }
.fp-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-who span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.fp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-table td { overflow-wrap: anywhere; }

/* At the kit's 640 step a nested box drops its side room for a rule (§0.32), and three choices go one per row (§0.33). */
@media (max-width: 640px) {
  .fb-inspector { padding: var(--s1) 0 0; border-width: var(--rule-w) 0 0; border-radius: 0; background: none; }
  .fp-who { grid-template-columns: minmax(0, 1fr); }
  .fp-who span { justify-content: flex-start; min-height: 44px; }
  .fb-actions { width: 100%; }
}

/* ---------- The guided setup (funnel-wizard.js) ----------
   One dialog, one question at a time: its head, the six steps, the question
   (the only part that scrolls) and Back / Next. Its height is fixed, so the
   buttons stay where the hand left them from step to step. Kit tokens only;
   the phone rules switch at the kit's 640 step, where the dialog becomes the
   whole screen. */
.fw { width: min(860px, calc(100vw - 32px)); max-width: none; height: min(780px, calc(100dvh - 48px)); }
.fw-form { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; min-height: 0; }
.fw-head { display: flex; align-items: center; gap: var(--s1); padding: var(--s2) var(--s3) var(--s1); }
.fw-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); font-size: var(--t-1); font-weight: 700; }
.fw-kicker .ci { --ci-size: 18px; }
.fw-count { margin-inline-start: auto; color: var(--ink-3); font-size: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums; }

/* The steps: a bar that fills as they are answered, each with its icon and name. A step
   reached before is a way back; the one on screen is also bolder, never told by colour alone. */
.fw-steps { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0 var(--s3) var(--s1); }
.fw-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 6px; width: 100%; padding: 0 0 4px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-3); font: inherit; font-size: var(--t-1); font-weight: 600; text-align: start; cursor: pointer; }
.fw-step::before { content: ""; grid-column: 1 / -1; height: 4px; border-radius: var(--radius-pill); background: var(--rule); transition: background-color var(--dur) var(--ease); }
.fw-step[data-state="done"]::before, .fw-step[data-state="current"]::before { background: var(--accent); }
.fw-step[data-state="done"] { color: var(--ink-2); }
.fw-step[data-state="current"] { color: var(--ink); font-weight: 750; cursor: default; }
.fw-step:disabled { cursor: default; }
.fw-step:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fw-step-mark { display: grid; place-items: center; }
.fw-step-mark .ci { --ci-size: 16px; }
.fw-step[data-state="done"] .fw-step-mark, .fw-step[data-state="current"] .fw-step-mark { color: var(--accent-ink); }
.fw-step-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fw-body { min-height: 0; overflow-y: auto; scrollbar-gutter: stable both-edges; overscroll-behavior: contain; padding: var(--s2) var(--s3) var(--s3); }
.fw-panel { display: grid; gap: var(--s2); max-width: 720px; margin-inline: auto; }
.fw-panel.is-entering { animation: fw-in var(--dur-slow) var(--ease-out); }
@keyframes fw-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .fw-panel.is-entering { animation: none; } }
/* The question: its lines are authored (one thought per line), so it never wraps mid-phrase. */
.fw-q { margin: 0; font-size: var(--t3); line-height: 1.15; outline: none; }
.fw-lead { margin: calc(-1 * var(--s0)) 0 0; color: var(--ink-2); }
.fw-sub { margin: var(--s0) 0 0; font-size: var(--t0); color: var(--ink); }
.fw-problem:empty, .fw-detail:empty { display: none; }
.fw-detail { display: grid; gap: var(--s1); }
.fw-panel .select, .fw-panel .input { width: 100%; max-width: 100%; }
.fw-skeleton { display: block; height: var(--control-h); border-radius: var(--radius-control); }

/* Choices as cards: the whole card is the radio's target, and the chosen one carries a mark as well as the accent. */
.fw-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s0); }
.fw-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* An odd card out takes the whole row: no hole in the grid. */
.fw-cards:not(.fw-cards-3) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.fw-card { position: relative; display: flex; align-items: flex-start; gap: var(--s1); min-height: 64px; padding-block: var(--s1); padding-inline: var(--s1) var(--s2); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-control); background: var(--paper); cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.fw-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
@media (hover: hover) { .fw-card:hover { border-color: var(--rule-strong); } }
.fw-card:has(input:checked) { border-color: var(--accent-ink); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.fw-card:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.fw-card-icon, .fw-way-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--field); color: var(--ink-2); }
.fw-card-icon .ci, .fw-way-icon .ci { --ci-size: 18px; }
.fw-card:has(input:checked) .fw-card-icon { background: var(--accent-soft); color: var(--accent-ink); }
.fw-card-words, .fw-way-words { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fw-card-words b, .fw-way-words b { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
.fw-card-words small, .fw-way-words small { color: var(--ink-3); font-size: var(--t-1); }
/* The mark sits on the corner of the card's icon, so it takes no room from the words. */
.fw-card-mark { position: absolute; inset-block-start: calc(var(--s1) + 22px); inset-inline-start: calc(var(--s1) + 22px); display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--accent-wash); border-radius: 50%; background: var(--accent); color: var(--on-accent); visibility: hidden; pointer-events: none; }
.fw-card-mark .ci { --ci-size: 12px; }
.fw-card:has(input:checked) .fw-card-mark { visibility: visible; }

/* The e-mails: each a small form, marked by a rule. */
.fw-mails { list-style: none; display: grid; gap: var(--s1); margin: 0; padding: 0; }
.fw-mail { display: grid; gap: var(--s0); padding: var(--s1) var(--s2) var(--s2); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-control); }
.fw-mail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s0); min-height: 36px; }
.fw-mail-n { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; }
.fw-mail-n .ci { --ci-size: 18px; color: var(--accent-ink); }
.fw-mail-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s1) var(--s2); align-items: start; }
.fw-custom[hidden] { display: none; }

/* Which e-mail: closed it names the choice; open it is a search and the person's e-mails. */
.fw-pick { min-width: 0; border: var(--rule-w) solid var(--rule-strong); border-radius: var(--radius-control); background: var(--paper-2); }
.fw-pick > summary { display: flex; align-items: center; gap: var(--s0); min-height: var(--control-h); padding: 0 12px; border-radius: inherit; color: var(--ink); font-weight: 600; cursor: pointer; list-style: none; }
.fw-pick > summary::-webkit-details-marker { display: none; }
.fw-pick > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.fw-pick > summary .ci { --ci-size: 18px; flex: none; color: var(--ink-3); }
.fw-pick[open] > summary .ci:last-child { transform: rotate(180deg); }
.fw-pick[data-chosen="false"] > summary { color: var(--ink-2); font-weight: 500; }
.fw-pick-current { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-pick-body { display: grid; gap: var(--s0); padding: var(--s0); border-top: var(--rule-w) solid var(--rule); }
.fw-options { display: grid; max-height: 13rem; overflow-y: auto; overscroll-behavior: contain; }
.fw-option { display: flex; align-items: flex-start; gap: 10px; min-height: var(--target); padding: 8px; border-radius: var(--radius-sm); cursor: pointer; }
.fw-option[hidden] { display: none; }
.fw-option input { width: 18px; height: 18px; flex: none; margin: 3px 0 0; cursor: pointer; }
.fw-option span { display: grid; min-width: 0; }
.fw-option b { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
.fw-option small { color: var(--ink-3); font-size: var(--t-1); overflow-wrap: anywhere; }
.fw-option:has(input:checked) { background: var(--accent-wash); }
@media (hover: hover) { .fw-option:hover { background: var(--hover); } }
.fw-nomatch { margin: 0; padding: 0 8px; }

/* Two questions on one step are two groups, parted by a rule. */
.fw-set { display: grid; gap: var(--s1); min-width: 0; }
.fw-set-title { margin: 0; color: var(--ink); font-size: var(--t1); font-weight: 700; }
.fw-set + .fw-set { padding-top: var(--s2); border-top: var(--rule-w) solid var(--rule); }
.fw-set .hint { margin: 0; }
.fw-switch { display: flex; align-items: center; gap: var(--s1); min-height: var(--target); cursor: pointer; }
.fw-switch span { display: grid; gap: 2px; min-width: 0; }
.fw-switch b { color: var(--ink); font-weight: 650; }
.fw-switch small { color: var(--ink-3); font-size: var(--t-1); }

/* The review: the path as one sentence, then the steps the builder will show. */
.fw-summary { display: grid; gap: var(--s1); padding: var(--s2); border-radius: var(--radius-control); background: var(--accent-wash); }
.fw-summary .hint { margin: 0; }
.fw-summary-name { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.fw-summary-name .ci { --ci-size: 18px; flex: none; color: var(--accent-ink); }
.fw-path { list-style: none; margin: 0; padding: 0; color: var(--ink); line-height: 1.7; }
.fw-path li { display: inline; }
.fw-path li + li::before { content: "→"; margin-inline: 8px; color: var(--accent-ink); font-weight: 700; }
:root[dir="rtl"] .fw-path li + li::before { content: "←"; }
.fw-preview > li { min-height: 48px; padding: 6px 0; }
/* What happens to people who did not click sits off the main path, marked by a rule. */
.fw-preview > li[data-branch="no"] { margin-inline-start: 17px; padding-inline-start: var(--s2); border-inline-start: 2px solid var(--warn); }
.fw-todo { list-style: none; display: grid; gap: var(--s0); margin: 0; padding: 0; }
.fw-todo > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0) var(--s1); color: var(--ink-2); }
/* A line of "what is left" and the button that does it: the words take what
   room there is, and the button drops under them when there is none (§0.14). */
.fw-todo-text { flex: 1 1 12rem; min-width: 0; }

.fw-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); padding: var(--s1) var(--s3) var(--s2); border-top: var(--rule-w) solid var(--rule); }
.fw-note { flex: 1 1 14rem; margin: 0; }
.fw-nav { flex-wrap: nowrap; margin-inline-start: auto; }

/* "A new funnel": the ways to start, the recommended one marked by its badge and the accent. */
.fw-choose { width: min(560px, calc(100vw - 32px)); }
.fw-ways { list-style: none; display: grid; gap: var(--s0); margin: 0; padding: 0; }
.fw-way { display: flex; align-items: center; gap: var(--s1); width: 100%; min-height: 64px; padding-block: var(--s1); padding-inline: var(--s1) var(--s2); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-control); background: var(--paper); color: inherit; font: inherit; text-align: start; cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.fw-way[data-recommended] { border-color: var(--accent-ink); background: var(--accent-wash); }
.fw-way[data-recommended] .fw-way-icon { background: var(--accent-soft); color: var(--accent-ink); }
@media (hover: hover) { .fw-way:hover { border-color: var(--rule-strong); background: var(--hover); } }
.fw-way:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fw-way-words b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

/* What the guided setup made, above the builder: the success moment and what is left. */
.fw-done { border-inline-start: 3px solid var(--ok); }
.fw-done-body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s2) var(--s3); }
.fw-done-body dk-art { --art-size: 144px; }
.fw-done-body .import-sub { margin: var(--s0) 0 0; }

/* At the kit's 640 step the guided setup is the whole screen (a dialog floating on a phone
   is two insets per side, §0.31): one 16px gutter, cards one per row, names of the steps
   left to the counter above them, Back and Next the full width with a thumb's target. */
@media (max-width: 640px) {
  .fw { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .fw-head, .fw-steps, .fw-body, .fw-foot { padding-inline: 16px; }
  .fw-step { grid-template-columns: minmax(0, 1fr); justify-items: center; min-height: var(--target); align-content: start; }
  .fw-step::before { width: 100%; }
  .fw-step-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fw-step-mark .ci { --ci-size: 20px; }
  .fw-q { font-size: var(--t2); }
  .fw-cards, .fw-cards-3 { grid-template-columns: minmax(0, 1fr); }
  .fw-mail { padding: var(--s1) 0 0; border-width: var(--rule-w) 0 0; border-radius: 0; }
  .fw-mail-fields { grid-template-columns: minmax(0, 1fr); }
  .fw-summary { margin-inline: -16px; padding-inline: 16px; border-radius: 0; }
  .fw-note { flex-basis: 100%; }
  .fw-nav { flex: 1 1 100%; }
  .fw-nav .btn { flex: 1; justify-content: center; min-height: var(--target); }
  .fw-done-body { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .fw-done-body dk-art { --art-size: 112px; }
}
/* Under the kit's 400 step the card's accent edge moves to the top, as the import card's does. */
@media (max-width: 400px) {
  .fw-done { border-inline-start-width: 0; border-top: 3px solid var(--ok); }
}