/* © 2026 WiredType. Proprietary and confidential. Not licensed for copying or reuse. Terms: https://wiredtype.com/terms */
/* ============================================================
   /card/<CODE>, the WiredType card. Proposed by the Together design lane, 2026-09-22.
   Design artifact: https://claude.ai/artifact/9d4ycQSoWqoUutckCMyJ7R (source _pm/together/design/card.html)
   Pairs with proposed/site/card/index.html. Built on the Midnight Warm tokens in styles.css; light mode follows
   styles.css's [data-theme="light"] block, so this file sets no colors of its own beyond the white QR plate
   and the Paper and Minimal band designs.

   The public card keeps the shared shell and does not load together.css, so the four shared
   pieces it borrows from Together (tg-sr, tg-note, tg-badge, tg-toggle) are repeated here, scoped under .wc.

   card.js sets on the root [data-card-root] (.wc):
     data-view     card | show | editor
     data-state    loading | ready | error
     data-member   true | false
   and on each .wc-card:
     data-design   midnight | paper | signal | minimal   (tg_cards.design; a free account is always midnight)
     data-accent   D | I | S | C                         (the owner's primary type by default; members may pick another)

   Sections:
     1. Tokens
     2. Shared pieces (scoped copies from together.css)
     3. The card, as a receiver sees it
     4. Designs and accents
     5. The owner's full-screen card (QR, offline, picker)
     6. The editor
     7. Phone layout
     8. Reduced motion

   Motion: ease-out, 130 to 180 ms, no overshoot.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
.wc {
  --wc-owner: var(--disc-d);                 /* the card's accent; data-accent below sets it */
  --wc-on-type: #1A1520;                     /* text on a type fill, both themes */
  --wc-gray: #6E6570;
  --wc-line: var(--border, rgba(255,255,255,.06));
  --wc-line-2: var(--border-hover, rgba(255,255,255,.14));
  --wc-raise: var(--shadow-lg);
  --wc-ease: cubic-bezier(.2,.7,.3,1);
  --wc-fast: 130ms;
  --wc-base: 160ms;
}
[data-theme="light"] .wc { --wc-gray: #9A9096; }

/* ---------- 2. Shared pieces ---------- */
.wt-card-body { margin: 0; background: var(--bg-0); color: var(--text); font: 15px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
.wc { min-height: 100vh; min-height: 100dvh; color-scheme: dark; }
[data-theme="light"] .wc { color-scheme: light; }   /* native radios and checkboxes follow the theme */
.wc [hidden] { display: none !important; }
/* styles.css gives every section 120 px of padding; zero specificity so the class rules below win. */
:where(.wc) section { padding: 0; }
.wc h1, .wc h2 { word-spacing: normal; }
.wc :focus-visible { outline: 2px solid var(--wc-owner); outline-offset: 2px; }
/* zero specificity, so .wc-btn and the other class rules keep their own font */
:where(.wc) :where(button, input) { font: inherit; color: inherit; }
.wc svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wc .tg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wc .tg-note { margin: 18px auto 0; max-width: 420px; font-size: 14px; color: var(--text-secondary); text-align: center; }
.wc .tg-note--error { color: var(--error-light, #fca5a5); }

.wc .tg-badge {
  --c1: var(--wc-gray); --c2: var(--c1);
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50% 100%);
  color: var(--wc-on-type); font: 700 14px/1 var(--font-heading); letter-spacing: -.02em;
}
.wc .tg-badge[data-primary="D"] { --c1: var(--disc-d); }
.wc .tg-badge[data-primary="I"] { --c1: var(--disc-i); }
.wc .tg-badge[data-primary="S"] { --c1: var(--disc-s); }
.wc .tg-badge[data-primary="C"] { --c1: var(--disc-c); }
.wc .tg-badge[data-secondary="D"] { --c2: var(--disc-d); }
.wc .tg-badge[data-secondary="I"] { --c2: var(--disc-i); }
.wc .tg-badge[data-secondary="S"] { --c2: var(--disc-s); }
.wc .tg-badge[data-secondary="C"] { --c2: var(--disc-c); }

.wc .tg-toggle { position: relative; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.wc .tg-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wc .tg-toggle__track { position: relative; flex: none; width: 42px; height: 24px; border: 1px solid var(--wc-line-2); border-radius: var(--radius-pill); background: var(--bg-3); transition: background var(--wc-base) var(--wc-ease); }
.wc .tg-toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-secondary); transition: transform var(--wc-base) var(--wc-ease), background var(--wc-base) var(--wc-ease); }
.wc .tg-toggle input:checked + .tg-toggle__track { background: var(--wc-owner); border-color: var(--wc-owner); }
.wc .tg-toggle input:checked + .tg-toggle__track::after { transform: translateX(18px); background: var(--wc-on-type); }
.wc .tg-toggle input:disabled + .tg-toggle__track { opacity: .45; }
.wc .tg-toggle input:focus-visible + .tg-toggle__track { outline: 2px solid var(--wc-owner); outline-offset: 2px; }

/* Buttons */
.wc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border: 1px solid var(--wc-line-2); border-radius: var(--radius-md); background: transparent;
  font: 600 15px var(--font-heading); color: var(--text); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--wc-fast) var(--wc-ease), filter var(--wc-fast) var(--wc-ease);
}
.wc-btn:hover { background: var(--bg-card-hover); }
.wc-btn svg { width: 17px; height: 17px; }
.wc-btn--accent { background: var(--wc-owner); border-color: var(--wc-owner); color: var(--wc-on-type); }
.wc-btn--accent:hover { background: var(--wc-owner); filter: brightness(1.07); }
.wc-btn--solid { background: var(--text); border-color: var(--text); color: var(--bg-0); }
.wc-btn--solid:hover { background: var(--text); filter: brightness(1.1); }
.wc-btn--sm { min-height: 38px; padding: 0 13px; font-size: 13.5px; }
.wc-btn[disabled], .wc-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
/* A button that fills a column (the equal pair, the full-width calls to action, the lead form) wraps its label and
   never runs off its edge on a phone (Kevin, 2026-09-22 2:17 PM: "Share and compare" ran off its button). */
.wc-show__btns .wc-btn, .wc-cta .wc-btn, .wc-lead .wc-btn, .wc-eq .wc-btn, .wc-send .wc-btn {
  min-width: 0; white-space: normal; padding: 10px 12px; text-align: center; line-height: 1.25;
}
.wc-eq { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }   /* two choices of equal size and weight (CONTRACT 7) */

/* ---------- 3. The card, as a receiver sees it ---------- */
.wc-page {
  min-height: 100vh; min-height: 100dvh;
  padding: max(18px, env(safe-area-inset-top)) 16px max(30px, env(safe-area-inset-bottom));
  background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--wc-owner) 16%, var(--bg-0)), var(--bg-0) 60%);
}
@media (min-width: 768px) { .wc-page { padding-top: 40px; padding-bottom: 60px; } }

.wc-card {
  position: relative; max-width: 420px; margin: 0 auto; overflow: hidden;
  border: 1px solid var(--wc-line-2); border-radius: 26px; background: var(--bg-1); box-shadow: var(--wc-raise);
}
.wc[data-state="loading"] .wc-page .wc-card { min-height: 520px; }
.wc[data-state="loading"] .wc-page .wc-card > * { visibility: hidden; }

.wc-card__band { position: relative; height: 92px; }
.wc-card__band svg { position: absolute; right: 16px; top: 14px; width: 64px; height: 64px; opacity: .35; color: #fff; }
.wc-card__photo {
  position: relative; display: block; width: 108px; height: 108px; margin: -58px 0 0 22px;
  border: 4px solid var(--bg-1); border-radius: 24px; background: var(--bg-2);
  object-fit: cover; object-position: 50% 20%;
}
.wc-card__who { padding: 12px 22px 0; }
.wc-card__name { margin: 0; font: 800 30px/1.05 var(--font-heading); letter-spacing: -.03em; color: var(--text); }
.wc-card__role { margin: 4px 0 0; font-size: 15px; color: var(--text-secondary); }

.wc-type {
  display: flex; align-items: center; gap: 12px; margin: 18px 22px 0; padding: 12px 14px;
  border: 1px solid var(--wc-line); border-radius: var(--radius-lg); background: var(--bg-0);
}
.wc-type b { display: block; font: 700 15px var(--font-heading); color: var(--text); }
.wc-type small { display: block; font-size: 12.5px; color: var(--text-muted); }

.wc-approach { margin: 14px 22px 0; font: 600 17px/1.45 var(--font-heading); color: var(--text); }
.wc-approach > span:first-child { display: block; margin-bottom: 4px; font: 500 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }

.wc-details { list-style: none; margin: 16px 22px 0; padding: 0; border-top: 1px solid var(--wc-line); }
.wc-details li { display: flex; align-items: center; gap: 12px; min-height: 46px; border-bottom: 1px solid var(--wc-line); font-size: 14.5px; }
.wc-details a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; }
.wc-details a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wc-details__icon { display: inline-flex; flex: none; color: var(--text-muted); }
.wc-details__icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.wc-details small { margin-left: auto; flex: none; font: 500 11px var(--font-mono); color: var(--text-muted); }

.wc-cta { display: grid; gap: 10px; margin: 18px 22px 0; }
.wc-cta .wc-btn { width: 100%; }
.wc-cta__hint { margin: 0; font-size: 12.5px; color: var(--text-muted); text-align: center; }
.wc-btn--big { min-height: 56px; border-radius: 14px; font-size: 16.5px; }

/* D18, tap two: the smaller line, the Send me this card field and its sent line */
.wc-sendrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 2px 0 0; }
.wc-linkbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  font: 600 14px var(--font-heading); color: var(--text-secondary);
  text-decoration: underline; text-decoration-color: var(--wc-line-2); text-underline-offset: 4px;
}
.wc-linkbtn:hover { color: var(--text); }
.wc-linkbtn svg { width: 16px; height: 16px; stroke-width: 1.8; }
.wc-send { margin-top: 4px; padding: 16px; border: 1px solid var(--wc-line-2); border-radius: var(--radius-lg); background: var(--bg-0); }
.wc-send__h { margin: 0 0 12px; font: 700 17px/1.3 var(--font-heading); color: var(--text); }
.wc-send__label { display: block; margin: 12px 0 6px; font-size: 13.5px; color: var(--text-secondary); }
.wc-send__label small { font-size: 12px; color: var(--text-muted); }
.wc-send [data-card-contact-pick] { width: auto; margin: 0 0 4px; }
.wc-send input:not([type="checkbox"]) { display: block; width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--wc-line-2); border-radius: 10px; background: var(--bg-1); font-size: 16px; }
.wc-send input:not([type="checkbox"]):focus { border-color: var(--wc-owner); }
.wc-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: 14px; color: var(--text); cursor: pointer; }
.wc-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--wc-owner); }
.wc-send .wc-btn { width: 100%; margin-top: 12px; }
.wc-send textarea { display: block; width: 100%; min-height: 88px; padding: 10px 12px; border: 1px solid var(--wc-line-2); border-radius: 10px; background: var(--bg-1); font: inherit; font-size: 16px; line-height: 1.4; resize: vertical; }
.wc-send textarea:focus { border-color: var(--wc-owner); outline: 0; }
.wc-send__memo { margin: 6px 0 0; font-size: 12.5px; color: var(--text-muted); }
.wc-send__one { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.wc-send-done { display: flex; align-items: flex-start; gap: 12px; margin-top: 4px; padding: 16px; border: 1px solid var(--wc-line-2); border-radius: var(--radius-lg); background: var(--bg-0); }
.wc-send-done i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--disc-s); color: var(--wc-on-type); font: normal 700 14px var(--font-heading); }
.wc-send-done p { margin: 0; font-size: 14.5px; color: var(--text); overflow-wrap: anywhere; }
.wc-send-done small { display: block; margin-top: 4px; font-size: 13px; color: var(--text-secondary); }

/* The lead form: members only, and it reads as a quiet offer, never an ad. */
.wc-lead { margin: 14px 22px 0; padding: 12px 14px; border: 1px dashed var(--wc-line-2); border-radius: 14px; font-size: 13.5px; color: var(--text-secondary); }
.wc-lead summary { display: flex; align-items: center; min-height: 28px; list-style: none; font-weight: 600; color: var(--text); cursor: pointer; }
.wc-lead summary::-webkit-details-marker { display: none; }
.wc-lead summary::after { content: ""; width: 6px; height: 6px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--wc-fast) var(--wc-ease); }
.wc-lead[open] summary::after { transform: rotate(225deg); }
.wc-lead input {
  display: block; width: 100%; min-height: 44px; margin-top: 8px; padding: 0 12px;
  border: 1px solid var(--wc-line-2); border-radius: 10px; background: var(--bg-0); font-size: 15px;
}
.wc-lead input:focus { border-color: var(--wc-owner); outline: 0; }
.wc-lead .wc-btn { width: 100%; margin-top: 10px; }
.wc-lead__note { margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted); }

.wc-mark { margin: 22px 0 18px; font: 500 11.5px var(--font-body); color: var(--text-muted); text-align: center; }

/* ---------- 4. Designs and accents ---------- */
.wc-card[data-accent="D"], .wc[data-accent="D"] { --wc-owner: var(--disc-d); }
.wc-card[data-accent="I"], .wc[data-accent="I"] { --wc-owner: var(--disc-i); }
.wc-card[data-accent="S"], .wc[data-accent="S"] { --wc-owner: var(--disc-s); }
.wc-card[data-accent="C"], .wc[data-accent="C"] { --wc-owner: var(--disc-c); }

.wc-card[data-design="midnight"] .wc-card__band,
.wc-card:not([data-design]) .wc-card__band {
  background: linear-gradient(135deg, color-mix(in srgb, var(--wc-owner) 55%, var(--bg-1)), color-mix(in srgb, var(--disc-s) 35%, var(--bg-1)));
}
.wc-card[data-design="paper"] .wc-card__band { background: linear-gradient(135deg, #F2EDE7, #DDD6CC); }
.wc-card[data-design="paper"] .wc-card__band svg { color: #5A524A; }
.wc-card[data-design="signal"] .wc-card__band { background: linear-gradient(90deg, var(--wc-owner), var(--disc-s)); }
.wc-card[data-design="minimal"] .wc-card__band { height: 72px; background: var(--bg-1); border-bottom: 1px solid var(--wc-line); }
.wc-card[data-design="minimal"] .wc-card__band svg { color: var(--wc-owner); opacity: .6; }
.wc-card[data-design="minimal"] .wc-card__photo { margin-top: -40px; }

/* The design picker's swatches use the same backgrounds as the bands. */
.wc-dz[data-design="midnight"] i { background: linear-gradient(135deg, color-mix(in srgb, var(--wc-owner) 55%, var(--bg-1)), color-mix(in srgb, var(--disc-s) 35%, var(--bg-1))); }
.wc-dz[data-design="paper"] i { background: linear-gradient(135deg, #F2EDE7, #DDD6CC); }
.wc-dz[data-design="signal"] i { background: linear-gradient(90deg, var(--wc-owner), var(--disc-s)); }
.wc-dz[data-design="minimal"] i { background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--wc-line-2); }

/* ---------- 5. The owner's full-screen card ---------- */
.wc-show {
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  padding: max(18px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom)); background: var(--bg-0);
}
.wc-show__top { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--text-muted); }
.wc-offline { display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px var(--font-mono); color: var(--disc-s); }
.wc-offline::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.wc-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px -2px 0; padding: 2px; }
.wc-pick::-webkit-scrollbar { display: none; }
.wc-pick button {
  flex: 0 1 auto; min-width: 0; max-width: 100%; min-height: 44px; padding: 8px 14px; flex-wrap: wrap; overflow-wrap: anywhere; border: 1px solid var(--wc-line-2); border-radius: var(--radius-pill);
  background: transparent; font: 600 13.5px var(--font-heading); color: var(--text-secondary); cursor: pointer;
  transition: background var(--wc-fast) var(--wc-ease), color var(--wc-fast) var(--wc-ease);
}
.wc-pick button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg-0); }

.wc-show__qr { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
/* The plate stays white in both themes so every phone camera reads the code. */
.wc-qr { display: grid; place-items: center; width: 212px; height: 212px; padding: 14px; border-radius: 22px; background: #fff; }
.wc .wc-qr svg, .wc .wc-qr svg * { stroke: none; }   /* the page's line-icon stroke must never touch the code's modules */
.wc-qr canvas, .wc-qr img, .wc-qr svg { display: block; width: 184px !important; height: 184px !important; }
.wc-show h2 { margin: 0; font: 800 26px/1.1 var(--font-heading); color: var(--text); }
.wc-show__role { margin: 0; font-size: 14px; color: var(--text-secondary); }
.wc-show__scan { max-width: 30ch; margin: 0; font-size: 13.5px; color: var(--text-secondary); }
.wc-noscan { display: grid; justify-items: center; gap: 3px; text-align: center; }
.wc-noscan__lead { max-width: 34ch; margin: 0 0 2px; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.wc-nw { white-space: nowrap; }
.wc-noscan__code { margin: 4px 0 0; font: 700 30px/1.1 var(--font-mono); letter-spacing: .08em; color: var(--text); }
.wc-noscan__phone { margin: 2px 0 0; font: 500 20px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.wc-show__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 420px; width: 100%; margin: 0 auto; }

/* ---------- 6. The editor ---------- */
.wc-ed { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 34px; align-items: start; max-width: 1180px; margin: 0 auto; padding: 26px 34px 60px; }
.wc-ed h1 { margin: 0; font: 800 36px/1.05 var(--font-heading); letter-spacing: -.03em; color: var(--text); }
.wc-ed__lead { margin: 6px 0 0; color: var(--text-secondary); }
.wc-saved { font-size: 13px; font-weight: 600; color: var(--disc-s); }
.wc-ed__form > section { padding: 20px 0; border-top: 1px solid var(--wc-line-2); }
.wc-ed__form > section:first-of-type { margin-top: 18px; }
.wc-ed__form h2 { margin: 0 0 12px; font: 700 12.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.wc-ed__hint { margin: 8px 0 0; font-size: 13.5px; color: var(--text-secondary); }
.wc-ed__form > section > .wc-ed__hint:first-of-type { margin: 0 0 10px; }

.wc-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.wc-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--wc-line-2); border-radius: var(--radius-md); background: transparent;
  font: 600 14px var(--font-heading); color: var(--text); cursor: pointer;
  transition: background var(--wc-fast) var(--wc-ease), border-color var(--wc-fast) var(--wc-ease);
}
.wc-chip[aria-pressed="true"] { border-color: var(--wc-owner); background: color-mix(in srgb, var(--wc-owner) 10%, transparent); }
.wc-chip small { font: 500 11px var(--font-mono); color: var(--text-muted); }
.wc-chip--add { margin-top: 8px; border-style: dashed; color: var(--text-secondary); }

.wc-photoedit { display: flex; align-items: center; gap: 14px; }
.wc-photoedit img { width: 72px; height: 72px; border-radius: 18px; object-fit: cover; object-position: 50% 20%; background: var(--bg-2); }
.wc-photoedit > div { display: flex; flex-wrap: wrap; gap: 8px; }

.wc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.wc-fld label { display: block; margin-bottom: 4px; font-size: 13px; color: var(--text-secondary); }
.wc-fld input {
  display: block; width: 100%; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--wc-line-2); border-radius: 10px; background: var(--bg-1); font-size: 15px;
}
.wc-fld input:focus { border-color: var(--wc-owner); outline: 0; }

.wc-showrow { display: flex; align-items: center; gap: 12px; min-height: 46px; border-bottom: 1px solid var(--wc-line); }
.wc-showrow > span { flex: 1; font-size: 14.5px; }

.wc-lines { display: grid; gap: 8px; }
.wc-lineopt {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--wc-line-2); border-radius: var(--radius-md); font-size: 14.5px;
  transition: border-color var(--wc-fast) var(--wc-ease), background var(--wc-fast) var(--wc-ease);
}
.wc-lineopt:has(input:checked) { border-color: var(--wc-owner); background: color-mix(in srgb, var(--wc-owner) 8%, transparent); }
.wc-lineopt input { margin-top: 3px; accent-color: var(--wc-owner); }

.wc-designs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wc-dz {
  display: grid; gap: 6px; padding: 8px; text-align: left; cursor: pointer;
  border: 1px solid var(--wc-line-2); border-radius: var(--radius-md); background: transparent; font: 600 13px var(--font-heading);
}
.wc-dz[aria-pressed="true"] { border-color: var(--wc-owner); box-shadow: inset 0 0 0 1px var(--wc-owner); }
.wc-dz[disabled] { opacity: .5; cursor: default; }
.wc-dz i { display: block; height: 54px; border-radius: 8px; }
.wc-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.wc-swatches button { width: 44px; height: 44px; border: 2px solid var(--bg-0); border-radius: 50%; box-shadow: 0 0 0 1px var(--wc-line-2); cursor: pointer; }
.wc-swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }
.wc-swatches button[disabled] { opacity: .45; cursor: default; }
.wc-swatches button[data-accent="D"] { background: var(--disc-d); }
.wc-swatches button[data-accent="I"] { background: var(--disc-i); }
.wc-swatches button[data-accent="S"] { background: var(--disc-s); }
.wc-swatches button[data-accent="C"] { background: var(--disc-c); }
.wc-swatches small { margin-left: 6px; font-size: 12.5px; color: var(--text-muted); }

/* Shown to a free owner only, one line, never to a receiver. */
.wc-lk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 10px 0 0; padding: 10px 12px; border: 1px dashed var(--wc-line-2); border-radius: 10px; font-size: 13.5px; color: var(--text-secondary); }
.wc-lk b { color: var(--text); }
.wc-lk a { color: var(--text); text-underline-offset: 3px; }

.wc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--wc-line); border-radius: var(--radius-md); background: var(--wc-line); }
.wc-stat { padding: 12px 14px; background: var(--bg-1); }
.wc-stat small { display: block; font-size: 12.5px; color: var(--text-secondary); }
.wc-stat b { display: block; margin-top: 4px; font: 500 26px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.wc-stat em { font-style: normal; font-size: 12px; color: var(--text-muted); }
.wc-funnel { display: grid; gap: 8px; margin-top: 12px; }
.wc-frow { display: grid; grid-template-columns: 130px minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 13px; color: var(--text-secondary); }
/* card.js sets the bar's width as a percent of scans. */
.wc-frow__bar { display: block; height: 12px; border-radius: 0 4px 4px 0; background: var(--wc-owner); opacity: .85; }
.wc-frow b { font: 500 13px var(--font-mono); text-align: right; color: var(--text); }

.wc-prev { position: sticky; top: 20px; }
.wc-prev__cap { margin: 0 0 8px; font: 500 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.wc-prev .wc-card { transform: scale(.92); transform-origin: top center; margin-bottom: -40px; }

/* ---------- 7. Phone layout ---------- */
@media (max-width: 767px) {
  .wc-ed { grid-template-columns: 1fr; gap: 18px; padding: 18px 16px 40px; }
  .wc-ed h1 { font-size: 30px; }
  /* The client brief places the phone preview below the form. */
  .wc-prev { position: static; order: 0; }
  .wc-prev .wc-card { transform: none; margin-bottom: 0; }
  .wc-fields { grid-template-columns: 1fr; }
  .wc-designs { grid-template-columns: repeat(2, 1fr); }
  .wc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-frow { grid-template-columns: 110px minmax(0, 1fr) 40px; }
  .wc-card__name { font-size: 28px; }
}

/* ---------- 8. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .wc *, .wc *::before, .wc *::after { transition: none !important; animation: none !important; }
}

/* ---------- /code (D21, D24): one box for a card's seven-character code ---------- */
.wc-code { max-width: 420px; margin: 0 auto; padding: 32px 16px 60px; }
.wc-code h1 { margin: 0; font: 800 32px/1.05 var(--font-heading); letter-spacing: -.03em; color: var(--text); }
.wc-code__sub { margin: 10px 0 0; font-size: 15.5px; color: var(--text-secondary); }
.wc-code__label { display: block; margin: 22px 0 6px; font-size: 13.5px; color: var(--text-secondary); }
.wc-code__box { display: block; width: 100%; min-height: 64px; padding: 0 16px; border: 1px solid var(--wc-line-2); border-radius: 14px; background: var(--bg-1); color: var(--text); font: 700 30px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.wc-code__box:focus { border-color: var(--wc-owner); outline: 0; }
.wc-code__found { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--text); }
.wc-code__err { margin: 12px 0 0; font-size: 14px; color: var(--error-light, #fca5a5); }
.wc-code .wc-btn { width: 100%; margin-top: 16px; }

/* D23: the editor's Your address row and the handle field */
.wc-addr { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.wc-addr > span { flex: 1 1 240px; min-width: 0; }
.wc-addr b { display: block; font: 600 15px var(--font-mono); color: var(--text); overflow-wrap: anywhere; }
.wc-addr small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-secondary); }
.wc-handle { margin-top: 12px; }
.wc-handle__row { display: flex; align-items: center; min-height: 44px; border: 1px solid var(--wc-line-2); border-radius: 10px; background: var(--bg-1); overflow: hidden; }
.wc-handle__row span { flex: none; padding: 0 2px 0 12px; font: 500 14px var(--font-mono); color: var(--text-muted); }
.wc-handle__row input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; color: var(--text); font: 600 15px var(--font-mono); outline: 0; }
.wc-handle__row:focus-within { border-color: var(--wc-owner); }

/* Production shell and responsive additions. */
.wc { overflow-wrap: anywhere; }
.wc-btn, .wc-chip, .wc-linkbtn { white-space: normal; text-align: center; line-height: 1.3; padding-top: 10px; padding-bottom: 10px; max-width: 100%; }
.wc-btn svg, .wc-linkbtn svg { flex: none; }
.wc textarea { color: var(--text); }
.wc-page > [data-card-host]:empty { display: none; }
.wc-detail-toggle { margin: 12px 22px 0; }
.wc-nw { display: inline-block; white-space: nowrap; overflow-wrap: normal; max-width: 100%; }
.wc-addr b.wc-nw { font-size: clamp(10px, 3.1vw, 15px); }
.wc-noscan__lead .wc-nw { font-size: clamp(9px, 3vw, 13px); }
.wc-card__name, .wc-type > span:last-child { min-width: 0; }
.wc-done-actions { display: grid; gap: 10px; }
.wc-a2hs { margin: 20px 0; padding: 14px; border: 1px solid var(--wc-line-2); border-radius: 14px; }
.wc-a2hs p { margin: 4px 0 12px; color: var(--text-secondary); font-size: 13px; }
.wc-made { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.wc-made p { flex-basis: 100%; }
.wc-ed__lead .wc-btn { min-height: 32px; font-size: 12px; margin-left: 8px; }
.wc [data-exchange-status]:empty { display: none; }
.wc [data-exchange-status] { margin-top: 12px; }
.wc-code__found { display: block; }
.wc-code a:not(.wc-btn) { display: block; margin-top: 12px; color: var(--text); }
.wc-dz[data-design="midnight"] i { background: linear-gradient(135deg, var(--disc-d), var(--bg-1)); }
.wc-dz[data-design="paper"] i { background: #F2EDE7; }
.wc-dz[data-design="signal"] i { background: linear-gradient(90deg, var(--disc-d), var(--disc-s)); }
.wc-dz[data-design="minimal"] i { background: var(--bg-1); border: 1px solid var(--wc-line-2); }
.wc-swatches button { padding: 0; min-height: 32px; color: var(--wc-on-type); }
.wc input:focus-visible, .wc textarea:focus-visible { outline: 2px solid var(--wc-owner); outline-offset: 2px; }
.wc .wc-qr svg { stroke: none; }

/* D24a: a person's invitation landing (no public card): the name they chose and the test button, nothing else. */
.wc-landing { padding-top: 22px; }
.wc-landing .wc-card__who { margin-top: 0; }
.wc-landing__list { margin: 14px 22px 0; padding-left: 20px; color: var(--text-secondary); font-size: 14.5px; line-height: 1.55; }
.wc-landing__list li + li { margin-top: 4px; }
/* The owner's own card (the My card view): Show my card and Edit card. */
.wc-ownerbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 12px 16px -4px; }
/* #101 (the circle's C4): on a phone the three items do not fit one row, so the owner's Founder's Circle badge takes its own
   first row and the two buttons keep their place against the card's band. */
@media (max-width: 459px) { .wc-ownerbar [data-circle-badge]:not([hidden]) { order: -1; flex-basis: 100%; display: flex; justify-content: flex-end; } }

/* D30: the owner's card controls and private portrait library. */
.wc-pick small { color: var(--text-muted); font-size: 11px; }
.wc-card-controls { display: grid; gap: 10px; margin-top: 14px; min-width: 0; }
.wc-card-controls .wc-btn { justify-self: start; max-width: 100%; white-space: normal; }
.wc-card-confirm { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1px solid var(--wc-line-2); border-radius: var(--radius-md); }
.wc-card-confirm p { flex-basis: 100%; margin: 0; }
.wc-photo-library { margin-top: 20px; }
.wc-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 16px 12px; margin-top: 14px; }
.wc-photos__tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.wc-photos img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; }
.wc-photos small { color: var(--text-muted); }
.wc-photos .wc-btn, .wc-photos a { max-width: 100%; min-width: 0; padding: 6px 8px; min-height: 36px; font-size: 12px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
.wc-photos a { color: var(--text); }
.wc-cards .wc-chip { min-width: 0; max-width: 100%; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; overflow-wrap: anywhere; }
.wc-cards [data-chip-name] { min-width: 0; }
.wc-addr [data-ed-address] { white-space: normal; overflow-wrap: anywhere; }
/* The exchange sheet's privacy link (the privacy review's F5): small and plain under the consent line. */
.wc-send__why { margin: 4px 0 16px; font-size: 12.5px; line-height: 1.5; }
.wc-send__why a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
/* Stage 5 item 20: the one membership box at the end of the editor, and the phone's jump to the preview. */
.wc-lk-box { padding: 20px 0; border-top: 1px solid var(--wc-line-2); }
.wc-lk-box ul { margin: 0 0 12px; padding-left: 20px; color: var(--text-secondary); line-height: 1.55; }
.wc-lk-box a { color: var(--text); }
.wc-ed__jump { display: none; }
@media (max-width: 767px) {
  .wc-ed__jump { display: inline-flex; position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 30; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
}


/* Stage 5: visible field edges, focus, and comfortable keyboard/touch targets. */
.wc-send input:not([type="checkbox"]), .wc-send textarea { border-color: var(--text-muted); }
.wc-send input:not([type="checkbox"]):focus-visible, .wc-send textarea:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.wc-send__why a { display: inline-flex; align-items: center; min-height: 44px; }
.wc-ed__lead [data-ed-retry] { min-height: 44px; }