/* © 2026 WiredType. Proprietary and confidential. Not licensed for copying or reuse. Terms: https://wiredtype.com/terms */
/* ============================================================
   The WiredType kit, direction B "Cards and previews" (Kevin approved the design, September 23, 2026).
   Spec: _pm/settings/design/src/settings_v1_src.html (data-dir="B"); map: _pm/settings/BUILD_PLAN.md.
   One page header, two fonts (Outfit for headings, Inter for text), one size scale (13, 15, 17, 20, 24, 32, 48),
   one card with its action pinned to the bottom, three buttons (coral pill, outline pill, text link), 24 px choices,
   and one floating item (the chat bubble). Classes start with wtk- and kit tokens with --k- so nothing here
   collides with styles.css. Built on the site's own tokens (dark by default, [data-theme="light"] overrides).
   ============================================================ */
:root{
  --k-fs-13:13px;--k-fs-15:15px;--k-fs-17:17px;--k-fs-20:20px;--k-fs-24:24px;--k-fs-32:32px;--k-fs-48:48px;
  --k-card-r:24px;--k-card-p:24px;--k-pill-h:52px;
  --k-surface:#221C27;--k-surface-2:#2A2330;
  --k-line:rgba(255,255,255,.09);--k-line-2:rgba(255,255,255,.22);
  --k-accent-ink:#EE9A8C;--k-accent-bg:rgba(224,122,107,.14);--k-accent-hover:#D46B5C;
  --k-teal-ink:#8ACFC6;--k-teal-bg:rgba(90,173,163,.17);
  --k-danger:#FF8F84;--k-focus:#8ACFC6;
  --k-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.28);
  --k-d:#EE6B6B;--k-i:#EDB25A;--k-s:#6DBE7A;--k-c:#6AABE0;
}
[data-theme="light"]{
  --k-surface:#FFFDFA;--k-surface-2:#F5F0EA;
  --k-line:rgba(42,34,32,.12);--k-line-2:rgba(42,34,32,.26);
  --k-accent-ink:#A5473A;--k-accent-bg:rgba(224,122,107,.11);
  --k-teal-ink:#2A6F66;--k-teal-bg:rgba(90,173,163,.15);
  --k-danger:#B42318;--k-focus:#2A6F66;
  --k-shadow:0 1px 2px rgba(60,40,30,.06),0 8px 22px rgba(60,40,30,.08);
  --k-d:#C94444;--k-i:#B7791F;--k-s:#3D8A4C;--k-c:#3877AE;
}
.wtk{font-family:var(--font-body);font-size:var(--k-fs-17);line-height:1.55;color:var(--text);container:wtk/inline-size}
.wtk :focus-visible{outline:3px solid var(--k-focus);outline-offset:2px;border-radius:6px}
.wtk-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* One page header: a label, a title, one line under it. */
.wtk-phead{display:grid;gap:8px}
.wtk-phead__label{margin:0;font-size:var(--k-fs-13);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--k-accent-ink)}
.wtk-phead__title{margin:0;font:700 var(--k-fs-32)/1.12 var(--font-heading);letter-spacing:-.01em;text-wrap:balance;color:var(--text)}
.wtk-phead__sub{margin:0;font-size:var(--k-fs-17);line-height:1.5;color:var(--text-secondary);max-width:60ch}
@container wtk (min-width:820px){.wtk-phead__title{font-size:var(--k-fs-48)}}
.wtk-h2{font:600 var(--k-fs-24)/1.25 var(--font-heading);margin:0;text-wrap:balance}
.wtk-h3{font:600 var(--k-fs-20)/1.3 var(--font-heading);margin:0}
.wtk-h4{font:600 var(--k-fs-17)/1.35 var(--font-heading);margin:0}
.wtk-help{font-size:var(--k-fs-15);line-height:1.5;color:var(--text-secondary);margin:0;max-width:62ch}
.wtk-stack{display:grid;gap:10px;align-content:start;min-width:0}

/* Three buttons: a coral pill for the main action, an outline pill for the second, a text link. Sentence case, no periods. */
.wtk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--k-pill-h);padding:0 22px;border-radius:999px;border:1.5px solid transparent;font:600 var(--k-fs-15)/1.2 var(--font-body);text-decoration:none;text-align:center;cursor:pointer;background:none;color:var(--text)}
.wtk-btn svg{width:18px;height:18px}
.wtk-btn--primary{background:var(--accent);color:var(--on-accent,#1A1520)}
.wtk-btn--primary:hover{background:var(--k-accent-hover)}
.wtk-btn--primary:disabled{background:var(--bg-3);color:var(--text-muted);cursor:not-allowed}
.wtk-btn--outline{border-color:var(--k-line-2);color:var(--text)}
.wtk-btn--outline:hover{border-color:var(--text-secondary)}
.wtk-btn--danger{border-color:var(--k-danger);color:var(--k-danger)}
.wtk-btn--link{border:0;color:var(--k-accent-ink);padding:0 2px;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.wtk-btn--sm{min-height:40px;padding:0 16px}
.wtk-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* One card: corners 24, padding 24, a soft shadow, the action pinned to the bottom. */
.wtk-card{display:flex;flex-direction:column;gap:8px;border-radius:var(--k-card-r);padding:var(--k-card-p);background:var(--k-surface);border:1px solid transparent;box-shadow:var(--k-shadow);min-width:0;text-align:left;color:var(--text)}
.wtk-card__t{font:600 var(--k-fs-20)/1.3 var(--font-heading);margin:0}
.wtk-card__d{font-size:var(--k-fs-15);line-height:1.5;color:var(--text-secondary);margin:0}
.wtk-card__act{margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.wtk-cards{display:grid;gap:12px}
@container wtk (min-width:640px){.wtk-cards--2{grid-template-columns:1fr 1fr}}
@container wtk (min-width:900px){.wtk-cards--3{grid-template-columns:repeat(3,1fr)}}

/* Chips */
.wtk-chip{display:inline-flex;align-items:center;gap:4px;font-size:var(--k-fs-13);font-weight:600;border-radius:999px;padding:2px 10px;white-space:nowrap;vertical-align:middle;line-height:1.5}
.wtk-chip svg{width:14px;height:14px}
.wtk-chip--rec{color:var(--k-teal-ink);background:var(--k-teal-bg)}
.wtk-chip--plain{color:var(--text-secondary);border:1px solid var(--k-line-2)}
.wtk-chip--wait{color:var(--k-accent-ink);background:var(--k-accent-bg)}
.wtk-chip--soon{color:var(--text-muted);border:1px dashed var(--k-line-2)}
.wtk-tchip{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 8px;border-radius:999px;font:700 var(--k-fs-13)/1 var(--font-body);color:#1A1520;white-space:nowrap}
[data-theme="light"] .wtk-tchip{color:#fff}
.wtk-tchip--D{background:var(--k-d)}.wtk-tchip--I{background:var(--k-i)}.wtk-tchip--S{background:var(--k-s)}.wtk-tchip--C{background:var(--k-c)}

/* Choices: 24 px marks; the whole card or row is the label. */
.wtk-opts{display:grid;gap:10px}
.wtk-opt{position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px;border:1.5px solid var(--k-line-2);border-radius:14px;background:var(--k-surface);cursor:pointer;transition:border-color .15s ease-out,background-color .15s ease-out}
.wtk-opt:hover{border-color:var(--text-secondary)}
.wtk-opt:has(input:checked){border-color:var(--k-accent-ink);background:var(--k-accent-bg)}
.wtk-opt:has(input:disabled){cursor:not-allowed;opacity:.6}
.wtk-opt input{position:absolute;opacity:0;width:24px;height:24px;margin:0;left:16px;top:17px}
.wtk-mark{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--text-muted);display:grid;place-items:center;background:var(--k-surface);margin-top:1px}
.wtk-mark--box{border-radius:7px}
.wtk-opt input:checked+.wtk-mark{border-color:var(--k-accent-ink)}
.wtk-opt input:checked+.wtk-mark:not(.wtk-mark--box)::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--k-accent-ink)}
.wtk-opt input:checked+.wtk-mark--box{background:var(--k-accent-ink)}
.wtk-opt input:checked+.wtk-mark--box::after{content:"";width:6px;height:12px;border:solid var(--k-surface);border-width:0 3px 3px 0;transform:translate(0,-1px) rotate(45deg)}
.wtk-opt input:focus-visible+.wtk-mark{outline:3px solid var(--k-focus);outline-offset:3px}
.wtk-opt__text{display:grid;gap:4px;min-width:0}
.wtk-opt__title{font-weight:600;line-height:1.4;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.wtk-opt__desc{font-size:var(--k-fs-15);line-height:1.5;color:var(--text-secondary)}
.wtk-opt--flat{border:0;border-radius:0;background:none;padding:14px 0}
.wtk-opt--flat:has(input:checked){background:none}
.wtk-opt--flat input{left:0;top:15px}
/* Yes and no, equal size and weight, nothing chosen in advance; stacked on a narrow phone. */
.wtk-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:0;padding:0;margin:0;min-width:0}
.wtk-seg .wtk-opt{padding:13px 14px;align-items:center;min-height:56px}
.wtk-seg .wtk-opt input{top:auto}
.wtk-seg .wtk-opt__title{font-size:var(--k-fs-15)}
@container wtk (max-width:480px){.wtk-seg{grid-template-columns:1fr}}

/* "What this means" */
.wtk-info{display:grid;gap:8px}
.wtk-info__btn{justify-self:start;display:inline-flex;align-items:center;gap:6px;text-align:left;border:0;background:none;color:var(--k-accent-ink);font-weight:600;font-size:var(--k-fs-15);padding:8px 2px;min-height:44px;cursor:pointer}
.wtk-info__btn svg{width:18px;height:18px}
.wtk-info__body{background:var(--k-surface-2);border-radius:14px;padding:14px 16px;font-size:var(--k-fs-15);line-height:1.6;max-width:65ch}
.wtk-info__body p{margin:0}

/* Fields and the type-to-find box */
.wtk-field{display:grid;gap:6px;align-content:start}
.wtk-field label{font-weight:600}
.wtk-field input,.wtk-field textarea{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--k-line-2);border-radius:12px;background:var(--k-surface);font:var(--k-fs-17) var(--font-body);color:var(--text)}
.wtk-field input:focus,.wtk-field textarea:focus{border-color:var(--k-accent-ink);outline:3px solid var(--k-accent-bg);outline-offset:0}
.wtk-combo__box{position:relative}
.wtk-combo__box input{padding-right:48px}
.wtk-combo__btn{position:absolute;right:4px;top:4px;width:40px;height:40px;border:0;background:none;color:var(--text-muted);display:grid;place-items:center;border-radius:10px;cursor:pointer}
.wtk-combo__btn svg{width:18px;height:18px}
.wtk-combo__list{margin:4px 0 0;padding:6px;list-style:none;background:var(--k-surface);border:1px solid var(--k-line-2);border-radius:12px;box-shadow:0 10px 24px rgba(26,21,32,.16);max-height:264px;overflow:auto}
.wtk-combo__opt{padding:10px 12px;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--k-fs-15);min-height:44px}
.wtk-combo__opt:hover{background:var(--k-surface-2)}
.wtk-combo__opt[aria-selected="true"]{background:var(--k-accent-bg);box-shadow:inset 0 0 0 1.5px var(--k-accent-ink)}
.wtk-combo__opt mark{background:none;color:var(--k-accent-ink);font-weight:700}
.wtk-combo__g{font-size:var(--k-fs-13);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);padding:10px 12px 4px}
.wtk-combo__cur{font-size:var(--k-fs-13);color:var(--text-muted);flex:none}
.wtk-combo__note{font-size:var(--k-fs-15);color:var(--text-secondary);margin:0;padding:10px 12px;border-radius:12px;background:var(--k-surface-2)}
.wtk-pex{border:1px dashed var(--k-line-2);border-radius:12px;padding:10px 12px;display:grid;gap:4px}
.wtk-pex__l{font-size:var(--k-fs-13);color:var(--text-muted);margin:0}
.wtk-pex__t{font:500 var(--k-fs-17)/1.4 var(--font-heading);margin:0}

/* Previews beside a choice */
.wtk-pv{background:var(--bg-1);border-radius:24px;padding:20px;display:grid;gap:14px;align-content:start;min-width:0}
.wtk-pv__t{font-size:var(--k-fs-15);font-weight:600;color:var(--text-muted);margin:0}
@media (prefers-reduced-motion:reduce){.wtk *,.wtk *::before,.wtk *::after{transition:none!important;animation:none!important}}

/* The Together settings form (site/js/together/settings.js), on the account page and on /together/settings. */
.tgk-form{display:grid;gap:22px}
.tgk-block{display:grid;gap:10px;min-width:0}
.tgk-block+.tgk-block{padding-top:18px;border-top:1px solid var(--k-line)}
.tgk-h{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.tgk .wtk-help{margin:0;font-size:var(--k-fs-15);color:var(--text-secondary);line-height:1.5}
.tgk [role=status]:empty{display:none}
.wtk-combo[data-combo="pronouns"] .wtk-combo__box input{padding-right:14px}