/* The connect card builder (/card-builder/). Page and editor styles on the Ledger tokens in
   site.css; the card preview itself is always white paper with dark ink, in both themes,
   because it stands for a printed object.

   2026-10-25, from the UI audit: every control is a 44 px target on 4 px radii (chips and tabs
   are no longer pills), the meter's full state is the danger token, a refusal shows under the
   control it refused, Download sits above the card in the sticky column and in a bar pinned to
   the foot of a phone, and the pinned preview shrinks to the meter while you type. */

/* The card's own fonts, served from this plugin so the preview and the PDF share one file set
   and the page makes no third-party request for them. One family per file, named by its stem,
   which is how card-layout.js's FONTS names each face; a face is fetched only when a card
   uses it. */
@font-face { font-family: "IBMPlexSans-Regular"; font-display: swap; src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBMPlexSans-SemiBold"; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBMPlexSerif-SemiBold"; font-display: swap; src: url("fonts/IBMPlexSerif-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "SourceSans3-Regular"; font-display: swap; src: url("fonts/SourceSans3-Regular.woff2") format("woff2"); }
@font-face { font-family: "SourceSans3-Semibold"; font-display: swap; src: url("fonts/SourceSans3-Semibold.woff2") format("woff2"); }
@font-face { font-family: "Lora-SemiBold"; font-display: swap; src: url("fonts/Lora-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "PublicSans-Regular"; font-display: swap; src: url("fonts/PublicSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "PublicSans-SemiBold"; font-display: swap; src: url("fonts/PublicSans-SemiBold.woff2") format("woff2"); }
/* The page's own body face is the card's default pairing, so no font is fetched twice. */
@font-face { font-family: "Card Plex"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Card Plex"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }

.cb-hero { padding: 48px 0 24px; }
.cb-hero h1 { max-width: 20ch; }

.cb { display: grid; gap: 24px; align-items: start; padding-bottom: 64px; }
/* The editor comes first in the document, so the tab order runs template, church, fields, then
   the preview and Download: the order the screen shows on a desktop. */
@media (min-width: 760px) {
  .cb { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; }
  .cb-editor { order: 1; }
  .cb-preview { order: 2; position: sticky; top: 80px; }
  /* The card never pushes Download or the meter off a laptop screen: it is capped by the
     viewport's height as well as the column's width. */
  .cb-paper { width: min(100%, calc((100vh - 360px) * var(--cw, 2) / var(--ch, 3))); min-width: 160px; }
}
@media (min-width: 1000px) {
  .cb { grid-template-columns: minmax(0, 1fr) 420px; }
}

/* Phone: the thumbnail and the meter pin to the top, small, and shrink to the meter alone
   while an input has focus (Show card brings the thumbnail back). Download, the layout choice
   and the share link sit after the editor, and a bar pinned to the foot carries Download. */
@media (max-width: 759.98px) {
  .cb-preview { display: contents; } /* so the sticky thumbnail's containing block is the whole grid, editor included */
  .cb-stick { order: -1; position: sticky; top: 64px; z-index: 5; background: var(--surface); padding: 6px 16px 6px; margin: 0 -16px; border-bottom: 1px solid var(--line); }
  .cb-editor { order: 0; }
  .cb-actions, .cb-share { order: 1; }
  .cb-stick .cb-paper { width: calc(22vh * var(--cw, 2) / var(--ch, 3)); max-width: 100%; height: 22vh; max-height: 22vh; margin: 0 auto; }
  .cb-stick .cb-dims, .cb-stick .cb-tip { display: none; }
  .cb-stick .cb-meter { font-size: 0.8125rem; margin: 6px 0 0; }
  .cb-stick .cb-meter-bar { height: 6px; }
  .cb-stick .cb-peek { display: inline-flex; }
  .cb.cb-typing:not(.cb-peeking) .cb-stick .cb-paper, .cb.cb-typing:not(.cb-peeking) .cb-stick .cb-sides { display: none; }
  .cb.cb-typing .cb-stick .cb-meter { margin-top: 0; }
  .cb:not(.cb-typing) .cb-stick .cb-peek { display: none; }
  .cb-phone-bar { display: block; }
  .cb-typing ~ .cb-phone-bar, .cb.cb-typing + .cb-phone-bar { display: none; }
  main { padding-bottom: 72px; } /* room for the pinned bar above the footer */
}
.cb-phone-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
@media (min-width: 760px) { .cb-phone-bar { display: none; } }
.cb-phone-bar .btn { display: flex; width: 100%; min-height: var(--target); }
.cb-peek { display: none; align-items: center; justify-content: center; min-height: var(--target); margin: 0 auto 4px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: 500 0.875rem/1 var(--font-sans); cursor: pointer; }

.cb-paper {
  display: block; width: 100%; height: auto; max-width: 420px; margin: 0 auto;
  aspect-ratio: var(--cw, 2) / var(--ch, 3);
  background: #fff; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 10px 28px rgba(0, 0, 0, .16);
}
.cb-paper svg { display: block; width: 100%; height: 100%; }
/* The card's faces come from card-layout.js's FONTS through three variables the script sets. */
/* Each face is its own single-weight file, so the weight is the file's: never ask the browser
   for 600 on top of a semibold file (it fakes the difference, and the PDF, which embeds the real
   file, then looks lighter than the preview). font-synthesis: none makes that a rule. */
.cb-paper, .cb-template-thumb, .cb-font-sample { font-synthesis: none; }
.cb-paper text, .cb-template-thumb text, .cb-font-sample text { font-family: var(--f-regular, "Card Plex"), system-ui, sans-serif; font-weight: 400; }
.cb-paper .sb, .cb-template-thumb .sb, .cb-font-sample .sb { font-family: var(--f-semibold, "Card Plex"), system-ui, sans-serif; font-weight: 400; }
.cb-paper .disp, .cb-template-thumb .disp, .cb-font-sample .disp { font-family: var(--f-display, "Card Plex"), Georgia, serif; font-weight: 400; }

.cb-actions { max-width: 420px; margin: 0 auto 16px; }
.cb-dims { font: 400 0.8125rem/1.4 var(--font-sans); color: var(--ink-muted); margin: 10px 0 10px; text-align: center; }

.cb-meter { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; margin: 0 0 6px; }
.cb-meter-bar { flex: 1; height: 8px; border-radius: var(--radius-sm); background: var(--surface-sunken); overflow: hidden; border: 1px solid var(--line); }
.cb-meter-fill { height: 100%; width: 0; background: var(--success); border-radius: var(--radius-sm); transition: width .15s ease, background-color .15s ease; }
@media (prefers-reduced-motion: reduce) { .cb-meter-fill { transition: none; } }
.cb-meter[data-level="some"] .cb-meter-fill { background: var(--primary); }
.cb-meter[data-level="almost"] .cb-meter-fill { background: var(--warning); }
.cb-meter[data-level="full"] .cb-meter-fill { background: var(--danger); }
.cb-meter-text { white-space: nowrap; }
.cb-tip { color: var(--ink-muted); font-size: 0.875rem; margin: 0 0 16px; text-align: center; }

.cb-download { display: flex; width: 100%; }
.cb-status { min-height: 1.5em; margin: 10px 0 0; font-size: 0.9375rem; color: var(--ink-muted); }

/* Editor */
.cb-editor h2 { font-size: 1.25rem; margin: 32px 0 12px; }
.cb-editor h2:first-child { margin-top: 0; }
.cb-field { margin: 0 0 16px; }
.cb-field label, .cb-legend { display: block; font-weight: 600; font-size: 0.9375rem; margin: 0 0 6px; }
.cb-field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 2px; }
.cb-field-head label, .cb-plate-h { margin: 0; font-weight: 600; font-size: 0.9375rem; }
#cb-field-plate { margin-top: 12px; }
.cb-field[data-on="false"] label { color: var(--ink-muted); }
.cb-field[data-on="false"] .cb-input { color: var(--ink-muted); background: var(--surface-sunken); }
.cb-input {
  width: 100%; min-height: var(--target); padding: 8px 12px;
  font: 400 1rem/1.4 var(--font-sans); color: var(--ink);
  background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
}
.cb-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.cb-help { margin: 6px 0 0; font-size: 0.875rem; color: var(--ink-muted); }

/* A note under the control it is about: a refusal (danger) or a word of confirmation. The
   live region for screen readers is separate and visually hidden. */
.cb-note { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin: 8px 0 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink); font-size: 0.9375rem; line-height: 1.4; }
.cb-note[data-kind="refusal"] { background: var(--danger-soft); border-left: 0; }
.cb-note[data-kind="warning"] { background: var(--warning-soft); }
.cb-note[data-kind="warning"] .cb-note-text::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: var(--warning); color: var(--surface); font-size: 0.75rem; font-weight: 700; vertical-align: -3px; }
.cb-note-text { flex: 1 1 16ch; min-width: 0; }
.cb-note .cb-mini { flex: none; }
.cb-fields li .cb-note { margin: 0 0 4px; }

.cb-inks { display: flex; gap: 10px; flex-wrap: wrap; }
.cb-ink {
  width: var(--target); height: var(--target); border-radius: var(--radius-full);
  border: 2px solid var(--line); background: var(--swatch, #000); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.cb-ink[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }
.cb-ink svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.5; display: none; }
.cb-ink[aria-checked="true"] svg { display: block; }

.cb-fields { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.cb-fields li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line); min-height: 56px; }
.cb-fields li:first-child { border-top: 0; }
.cb-fields .cb-fname { flex: 1; min-width: 0; }
.cb-fields .cb-fname span { display: block; font-size: 0.8125rem; color: var(--ink-muted); }
.cb-fields li[data-on="false"] .cb-fname { color: var(--ink-muted); }

/* The switch: a 44 px target with a 32 px track drawn inside it. */
.cb-switch {
  position: relative; width: 60px; height: var(--target); flex: none;
  border: 0; background: transparent; cursor: pointer; padding: 0; border-radius: var(--radius-md);
}
.cb-switch::before {
  content: ""; position: absolute; top: 6px; left: 4px; width: 52px; height: 32px; box-sizing: border-box;
  border-radius: var(--radius-full); border: 1px solid var(--line-strong); background: var(--surface-sunken); transition: background-color .12s ease;
}
.cb-switch::after {
  content: ""; position: absolute; top: 10px; left: 8px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-raised); box-shadow: var(--elevation-1); transition: transform .12s ease;
}
.cb-switch[aria-checked="true"]::before { background: var(--primary); border-color: var(--primary); }
.cb-switch[aria-checked="true"]::after { transform: translateX(20px); }
.cb-switch[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.cb-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .cb-switch::before, .cb-switch::after { transition: none; } }

/* The live region for screen readers: every message is announced here, and shown by a note. */
.cb-refusal { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Visually hidden, read by a screen reader: the preview's text equivalent. */
.cb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Phase 2: the editor */
/* The component display rules above would otherwise beat the hidden attribute. */
.cb [hidden], .cb-preview [hidden], .cb-editor [hidden], .cb-phone-bar[hidden] { display: none !important; }
.cb-resume { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--ink); font-size: 0.9375rem; }
.cb-link { background: none; border: 0; padding: 0; color: var(--primary); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 0; }
.cb-link:hover { color: var(--primary-hover); }

.cb-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.cb-toolbar-hint { font-size: 0.8125rem; color: var(--ink-muted); margin-right: auto; }
@media (hover: none) { .cb-toolbar-hint { display: none; } } /* a keyboard shortcut means nothing on a touch screen */
.cb-mini {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--target); padding: 0 14px;
  border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface-raised);
  color: var(--ink); font: 500 0.875rem/1 var(--font-sans); cursor: pointer;
}
.cb-mini:hover:not(:disabled) { background: var(--surface-sunken); }
.cb-mini:disabled { opacity: .45; cursor: default; }
.cb-startover { margin-left: auto; }

.cb-confirm { margin: 0 0 20px; padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-raised); }
.cb-confirm .cb-confirm-h { margin: 0 0 6px; font-size: 1.125rem; }
.cb-confirm p { margin: 0 0 12px; }
.cb-confirm-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.cb-logo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cb-logo-thumb { height: 48px; width: auto; max-width: 160px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cb-logo-pick-label { cursor: pointer; }
.cb-logo-pick-label:has(+ input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.cb-fields li { flex-direction: column; align-items: stretch; gap: 8px; }
.cb-frow { display: flex; align-items: center; gap: 10px; }
.cb-handle { flex: none; width: 20px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-muted); cursor: grab; }
.cb-handle svg { width: 14px; height: 14px; fill: currentColor; }
.cb-fields li.cb-dragging { opacity: .5; }
.cb-fields li.cb-dropbefore { box-shadow: inset 0 3px 0 var(--primary); }
.cb-dropend { min-height: 12px !important; padding: 0 !important; }
.cb-fields li.cb-selected { background: var(--primary-soft); }
.cb-fields li[data-on="false"] .cb-label-input, .cb-fields li[data-on="false"] .cb-ftitle { color: var(--ink-muted); }
.cb-label-input {
  width: 100%; min-height: var(--target); padding: 4px 8px; font: 500 1rem/1.3 var(--font-sans); color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
}
.cb-label-input:hover { border-color: var(--line); }
.cb-label-input:focus { background: var(--surface-raised); border-color: var(--line-strong); }
.cb-label-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cb-ftitle { display: block; min-height: var(--target); padding: 11px 8px 0; font: 500 1rem/1.3 var(--font-sans); color: var(--ink); }
.cb-fsummary { display: block; font-size: 0.8125rem; color: var(--ink-muted); padding-left: 8px; }

.cb-fdetails { display: none; padding-left: 30px; }
.cb-fields li.cb-selected .cb-fdetails { display: block; }
.cb-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.cb-options-h { width: 100%; margin: 0; font-size: 0.8125rem; color: var(--ink-muted); }
.cb-option { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); padding-left: 10px; min-height: var(--target); }
.cb-option-input { min-width: 4ch; border: 0; background: transparent; font: 400 0.9375rem/1.3 var(--font-sans); color: var(--ink); padding: 6px 2px; min-height: 42px; }
.cb-option-input:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-sm); }
.cb-option-remove { width: var(--target); height: 42px; border: 0; background: transparent; color: var(--ink-muted); font-size: 1.25rem; line-height: 1; cursor: pointer; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.cb-option-remove:hover { color: var(--ink); background: var(--surface-sunken); }
.cb-option-add { min-height: var(--target); padding: 0 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: transparent; color: var(--primary); font: 500 0.875rem/1 var(--font-sans); cursor: pointer; }
.cb-option-add:hover { background: var(--primary-soft); }
.cb-ftools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-ftools .cb-reset { margin-left: auto; font-size: 0.875rem; }

/* Click to edit: hit areas on the preview */
.cb-hit { fill: transparent; stroke: transparent; stroke-width: 0.012; cursor: pointer; }
.cb-hit:hover { fill: rgba(31, 92, 70, 0.06); stroke: rgba(31, 92, 70, 0.5); }
.cb-hit-selected { stroke: rgba(31, 92, 70, 0.7); }
@media (max-width: 759.98px) { .cb-fdetails { padding-left: 0; } }

/* Phase 3: download formats, the success panel, the share link */
.cb-formats-wrap { margin: 10px 0 0; }
/* The disclosure reads as a button: a secondary button with a chevron, the current choice beside it. */
.cb-formats-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: var(--target); padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: 500 0.9375rem/1 var(--font-sans); }
.cb-formats-summary::-webkit-details-marker { display: none; }
.cb-formats-summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: 2px; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(45deg) translateY(-2px); }
.cb-formats-wrap[open] .cb-formats-summary::after { transform: rotate(-135deg) translateY(-2px); }
.cb-formats-summary:hover { background: var(--surface-sunken); }
.cb-formats-summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-formats-current { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-weight: 400; color: var(--ink-muted); font-size: 0.875rem; }
.cb-formats { border: 0; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.cb-formats legend { font-weight: 600; font-size: 0.875rem; color: var(--ink-muted); padding: 0; margin: 0 0 2px; }
.cb-format { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9375rem; line-height: 1.4; min-height: var(--target); padding: 4px 0; cursor: pointer; }
.cb-format input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--primary); }
.cb-format-note { color: var(--ink-muted); }
.cb-done { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--radius-md); background: var(--success-soft); color: var(--ink); font-size: 0.9375rem; }
.cb-done p { margin: 0 0 8px; }
.cb-done p:last-child { margin-bottom: 0; }
.cb-done-quiet { color: var(--ink-muted); font-size: 0.875rem; }
.cb-share { max-width: 420px; margin: 20px auto 0; padding-top: 16px; border-top: 1px solid var(--line); }
.cb-share .cb-help { margin-top: 8px; }
.cb-share-fallback { margin: 8px 0 0; }
.cb-share-fallback label { display: block; font-size: 0.875rem; margin-bottom: 4px; }
.cb-status:empty { display: none; }

/* v2: templates and two sides; v3: type pairings */
.cb-templates, .cb-fonts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cb-template, .cb-font {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px;
  border: 2px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised);
  color: var(--ink); text-align: left; cursor: pointer; font: inherit; min-height: var(--target);
}
.cb-template:hover, .cb-font:hover { border-color: var(--line-strong); }
.cb-template[aria-checked="true"], .cb-font[aria-checked="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
/* A fixed-height box with the card centred in it, so the three names line up whatever the card's shape. */
.cb-template-thumb { display: flex; align-items: center; justify-content: center; height: 132px; width: 100%; }
.cb-template-card { display: block; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.cb-template-card[data-shape="portrait"] { height: 100%; width: auto; }
.cb-template-card[data-shape="landscape"] { width: 100%; height: auto; }
.cb-template-card svg { display: block; width: 100%; height: 100%; }
.cb-template-text, .cb-font-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-template-name, .cb-font-name { font-weight: 600; font-size: 0.9375rem; }
.cb-template-blurb, .cb-font-blurb { font-size: 0.8125rem; color: var(--ink-muted); line-height: 1.35; }
.cb-custom-font { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.cb-custom-font-h { margin: 0 0 8px; font-weight: 600; font-size: 0.9375rem; }
.cb-custom-face { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--line); }
.cb-custom-face:first-of-type { border-top: 0; }
.cb-custom-face-name { flex: 1 1 14ch; min-width: 0; font-size: 0.9375rem; }
.cb-custom-face-file { color: var(--ink-muted); }
.cb-custom-face-file:empty::before { content: attr(data-empty); }
.cb-custom-pick { cursor: pointer; }
.cb-custom-pick:has(+ input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-font-sample { display: block; height: 56px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cb-font-sample svg { display: block; width: 100%; height: 100%; }
@media (max-width: 479.98px) {
  .cb-templates, .cb-fonts { grid-template-columns: 1fr; }
  .cb-template, .cb-font { flex-direction: row; align-items: center; }
  .cb-template-thumb { width: 72px; height: 72px; flex: none; }
  .cb-font-sample { width: 96px; flex: none; }
}

.cb-sides { display: flex; gap: 4px; justify-content: center; margin: 0 0 8px; }
.cb-sides [role="tab"] { min-height: var(--target); padding: 0 16px; border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); border-radius: var(--radius-md); font: 500 0.875rem/1 var(--font-sans); cursor: pointer; }
.cb-sides [role="tab"][aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.cb-stick .cb-sides { margin-bottom: 6px; }

.cb-side-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 8px; }
.cb-side-head h3 { margin: 0; font-size: 1rem; }
.cb-dropempty { padding: 16px 12px !important; color: var(--ink-muted); font-size: 0.9375rem; min-height: 56px; }

/* The custom ink: the browser's own colour picker behind a plain swatch that says Custom. */
.cb-ink-custom { position: relative; overflow: hidden; width: auto; min-width: var(--target); padding: 0 12px; border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: 500 0.875rem/1 var(--font-sans); gap: 8px; }
.cb-ink-custom input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.cb-ink-custom .cb-ink-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--swatch, transparent); flex: none; }
.cb-ink-custom[data-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }
.cb-ink-custom:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }