/* TCF wizard — skeleton. Neutral, self-contained; preview-theming comes later. */
.tcf-wiz{--tcf-ink:#1a2420;--tcf-line:#dfe6e1;--tcf-p:#1b5e3f;--tcf-bg:#fff;
  max-width:820px;margin:0 auto;color:var(--tcf-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
.tcf-wiz *{box-sizing:border-box;}
.tcf-wiz__rail{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.25rem;}
.tcf-step{display:flex;align-items:center;gap:.5rem;background:#f3f6f4;border:1px solid var(--tcf-line);
  border-radius:999px;padding:.4rem .9rem;font-size:.85rem;cursor:pointer;color:#54635b;}
.tcf-step span{display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;
  background:#fff;border:1px solid var(--tcf-line);font-weight:700;font-size:.75rem;}
.tcf-step.is-active{background:var(--tcf-p);color:#fff;border-color:var(--tcf-p);}
.tcf-step.is-active span{background:#fff;color:var(--tcf-p);border-color:#fff;}
.tcf-panel{display:none;}
.tcf-panel.is-active{display:block;animation:tcfIn .2s ease;}
@keyframes tcfIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.tcf-panel h3{margin:.2rem 0 1rem;font-size:1.25rem;}
.tcf-note{background:#f3f8f5;border-left:3px solid var(--tcf-p);padding:.6rem .8rem;
  border-radius:6px;font-size:.85rem;color:#43524b;margin:0 0 1rem;}
.tcf-f{display:block;margin:0 0 1rem;}
.tcf-f>span{display:block;font-weight:600;font-size:.85rem;margin-bottom:.35rem;}
.tcf-f small{display:block;color:#7a877f;font-size:.78rem;margin-top:.3rem;}
.tcf-wiz input,.tcf-wiz select,.tcf-wiz textarea{width:100%;padding:.6rem .7rem;border:1px solid var(--tcf-line);
  border-radius:8px;font-size:.95rem;background:#fff;color:var(--tcf-ink);font-family:inherit;}
.tcf-wiz input:focus,.tcf-wiz select:focus,.tcf-wiz textarea:focus{outline:2px solid var(--tcf-p);outline-offset:1px;border-color:var(--tcf-p);}
.tcf-grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.tcf-grid3{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:.5rem;align-items:center;}
.tcf-slugwrap{display:flex;align-items:center;gap:.4rem;}
.tcf-slugwrap input{flex:1;}
.tcf-slugwrap em{color:#7a877f;font-style:normal;font-size:.9rem;white-space:nowrap;}
.tcf-swatches{display:flex;gap:.5rem;flex-wrap:wrap;}
.tcf-sw{width:2.6rem;height:2.6rem;border-radius:10px;cursor:pointer;border:3px solid transparent;
  box-shadow:0 0 0 1px var(--tcf-line);}
.tcf-sw.is-sel{border-color:#fff;box-shadow:0 0 0 2px var(--tcf-p);}
.tcf-chips{display:flex;gap:.5rem;flex-wrap:wrap;}
.tcf-chip{padding:.45rem .9rem;border:1px solid var(--tcf-line);border-radius:999px;cursor:pointer;
  font-size:.85rem;background:#fff;}
.tcf-chip.is-sel{background:var(--tcf-p);color:#fff;border-color:var(--tcf-p);}
.tcf-rep{border:1px solid var(--tcf-line);border-radius:10px;padding:.9rem;margin:0 0 1rem;}
.tcf-rep legend{font-weight:600;font-size:.85rem;padding:0 .4rem;}
.tcf-row{margin-bottom:.5rem;}
.tcf-x{background:#fbecec;border:1px solid #f0caca;color:#b23;border-radius:8px;
  width:2.2rem;height:2.2rem;cursor:pointer;font-size:1.1rem;line-height:1;}
.tcf-add{background:none;border:1px dashed var(--tcf-line);color:var(--tcf-p);border-radius:8px;
  padding:.45rem .8rem;cursor:pointer;font-size:.85rem;}
.tcf-wiz__nav{display:flex;justify-content:space-between;margin:1.25rem 0;}
.tcf-btn{padding:.65rem 1.4rem;border-radius:8px;border:1px solid var(--tcf-p);cursor:pointer;
  font-weight:600;font-size:.95rem;}
.tcf-next{background:var(--tcf-p);color:#fff;}
.tcf-prev{background:#fff;color:var(--tcf-p);}
.tcf-btn:disabled{opacity:.4;cursor:not-allowed;}
.tcf-out{border:1px solid var(--tcf-line);border-radius:10px;overflow:hidden;}
.tcf-out__head{display:flex;justify-content:space-between;align-items:center;
  background:#f3f6f4;padding:.6rem .9rem;font-size:.9rem;}
.tcf-valid{font-size:.8rem;font-weight:700;}
.tcf-valid.ok{color:#1b7d3f;}
.tcf-valid.bad{color:#b23;}
.tcf-errs{margin:0;padding:.4rem .9rem;list-style:none;font-size:.82rem;color:#b23;}
.tcf-errs:empty{display:none;}
.tcf-errs li{padding:.15rem 0;}
.tcf-json{margin:0;padding:.9rem;background:#0f1613;color:#c7f0d8;font-size:.8rem;
  overflow:auto;max-height:340px;white-space:pre;}
@media(max-width:640px){.tcf-grid2,.tcf-grid3{grid-template-columns:1fr;}}

/* Step 5 — Term & hosting */
.tcf-tiers{display:flex;flex-direction:column;gap:.5rem;}
.tcf-tier{display:flex;align-items:center;gap:.7rem;border:1px solid var(--tcf-line);border-radius:10px;
  padding:.7rem .9rem;cursor:pointer;}
.tcf-tier.is-sel{border-color:var(--tcf-p);box-shadow:0 0 0 1px var(--tcf-p);}
.tcf-tier input{width:auto;margin:0;}
.tcf-tier__l{flex:1;font-weight:600;font-size:.9rem;}
.tcf-tier__p{color:var(--tcf-p);font-weight:700;font-size:.9rem;}
.tcf-check{display:flex;align-items:flex-start;gap:.55rem;font-size:.9rem;cursor:pointer;line-height:1.35;}
.tcf-check input{width:auto;margin:.15rem 0 0;flex:0 0 auto;}
.tcf-subfields{margin:.75rem 0 0 1.7rem;padding-left:.9rem;border-left:2px solid var(--tcf-line);}
.tcf-quote{margin-top:1.25rem;border:1px solid var(--tcf-line);border-radius:12px;overflow:hidden;}
.tcf-quote__lines{padding:.4rem .9rem;}
.tcf-quote__line{display:flex;justify-content:space-between;padding:.35rem 0;font-size:.9rem;
  border-bottom:1px dashed var(--tcf-line);}
.tcf-quote__line:last-child{border-bottom:none;}
.tcf-quote__total{display:flex;justify-content:space-between;align-items:center;
  background:var(--tcf-p);color:#fff;padding:.7rem .9rem;font-size:1rem;}
.tcf-quote__total strong{font-size:1.15rem;}
.tcf-quote__recur{padding:.5rem .9rem;font-size:.82rem;color:#54635b;background:#f3f6f4;}
.tcf-quote__ref{padding:.5rem .9rem;font-size:.82rem;color:#1b7d3f;font-weight:600;}

/* Step 0 — contact capture */
.tcf-contact{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--tcf-line);}
.tcf-req{color:#b23;font-style:normal;}
.tcf-saved{margin-top:.5rem;font-size:.82rem;color:#1b7d3f;font-weight:600;}

/* Commission */
.tcf-commission{margin-top:1.25rem;text-align:center;}
.tcf-commission__go{background:var(--tcf-p);color:#fff;width:100%;padding:.9rem 1.4rem;font-size:1.05rem;}
.tcf-commission__go:disabled{opacity:.6;}
.tcf-commission__note{font-size:.8rem;color:#54635b;margin:.6rem 0 0;}
.tcf-commission__err{margin-top:.6rem;padding:.6rem .8rem;background:#fbecec;border:1px solid #f0caca;
  color:#b23;border-radius:8px;font-size:.85rem;text-align:left;}

/* Post-payment status screen */
.tcf-status{max-width:560px;}
.tcf-status__card{border:1px solid var(--tcf-line);border-radius:14px;padding:2rem;text-align:center;background:#fff;}
.tcf-status__tick{width:3rem;height:3rem;border-radius:50%;background:var(--tcf-p);color:#fff;
  display:grid;place-items:center;font-size:1.5rem;margin:0 auto 1rem;}
.tcf-status__card h2{margin:0 0 .3rem;font-size:1.4rem;}
.tcf-status__event{color:#54635b;margin:0 0 1.5rem;font-weight:600;}
.tcf-status__steps{text-align:left;max-width:320px;margin:0 auto 1.25rem;}
.tcf-status__step{display:flex;align-items:center;gap:.7rem;padding:.45rem 0;color:#8a968f;font-size:.92rem;}
.tcf-status__step span{width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid var(--tcf-line);flex:0 0 auto;}
.tcf-status__step.is-active{color:var(--tcf-ink);}
.tcf-status__step.is-active span{border-color:var(--tcf-p);border-right-color:transparent;
  animation:tcfSpin .8s linear infinite;}
.tcf-status__step.is-done{color:var(--tcf-ink);font-weight:600;}
.tcf-status__step.is-done span{background:var(--tcf-p);border-color:var(--tcf-p);}
@keyframes tcfSpin{to{transform:rotate(360deg);}}
.tcf-status__msg{font-size:.9rem;color:#54635b;}
.tcf-status.has-error .tcf-status__msg{color:#b23;}
.tcf-status__go{display:inline-block;background:var(--tcf-p);color:#fff;text-decoration:none;
  padding:.8rem 1.6rem;margin:.5rem 0;}
.tcf-status__foot{font-size:.8rem;color:#8a968f;margin:1rem 0 0;}

/* ── theme picker ─────────────────────────────────────────────────── */
.tcf-themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;margin-top:10px}
.tcf-theme{display:block;text-align:left;padding:0;cursor:pointer;background:#fff;
  border:2px solid rgba(20,32,27,.14);border-radius:10px;overflow:hidden;
  transition:border-color .15s,transform .15s,box-shadow .15s;font:inherit}
.tcf-theme:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,32,27,.10)}
.tcf-theme.is-sel{border-color:#1b5e3f;box-shadow:0 0 0 3px rgba(27,94,63,.12)}
.tcf-theme img{display:block;width:100%;height:auto}
/* 0.27.0 — the thumbnail is inline SVG so the palette can repaint it live.
   It must size exactly as the <img> did: block, full width, intrinsic ratio.
   The <img> rule stays for the fallback path when the file is unreadable. */
.tcf-theme__art{display:block;width:100%;line-height:0}
.tcf-theme__art svg{display:block;width:100%;height:auto}
.tcf-theme__noimg{display:block;width:100%;aspect-ratio:4/3;background:#eef3f0}
/* The label strip needs its OWN background and colours. Without them it
   inherited the storefront's accent — a pink block with unreadable text. */
.tcf-theme__label{display:block;background:#fff;padding:12px 14px}
.tcf-theme strong{display:block;margin:0;padding:0;font-size:15px;font-weight:700;
  line-height:1.3;color:#14201b;background:none}
.tcf-theme small{display:block;margin:3px 0 0;padding:0;font-size:12.5px;
  line-height:1.45;color:#556259;background:none}
.tcf-theme.is-sel .tcf-theme__label{background:#f3f8f5}

/* ── conditional blocks + sub-rows ────────────────────────────────── */
.tcf-block{margin-top:22px;padding-top:18px;
  border-top:1px solid rgba(20,32,27,.12)}
.tcf-block h4{margin:0 0 4px;font-size:15px}
.tcf-sub{grid-column:1/-1;display:grid;gap:8px;margin-top:8px;padding-top:8px;
  border-top:1px dashed rgba(20,32,27,.14)}
.tcf-block[hidden]{display:none}
.tcf-grid5{display:grid;grid-template-columns:70px 74px 1.4fr 1.4fr 1fr auto;gap:8px;
  align-items:start}
@media(max-width:760px){.tcf-grid5{grid-template-columns:1fr 1fr;}}

/* ── required-field feedback ──────────────────────────────────────── */
.tcf-req{color:#b3261e;font-style:normal;font-weight:700}
.tcf-bad{border-color:#b3261e !important;background:#fdf3f2}
.tcf-f small{display:block;margin-top:4px;font-size:12px;color:#556259;line-height:1.45}
.tcf-icon{font-size:15px}

/* ── grouped settings (card fee, site email) ──────────────────────── */
.tcf-cc,.tcf-comms{border:1px solid rgba(20,32,27,.14);border-radius:8px;
  padding:16px 18px;margin:18px 0}
.tcf-cc legend,.tcf-comms legend{font-size:13px;font-weight:700;padding:0 6px;
  color:#14201b}
.tcf-check{display:flex;align-items:center;gap:9px;margin:10px 0 14px;
  font-size:14px;cursor:pointer}
.tcf-check input{width:16px;height:16px;margin:0}

.tcf-note--sub{margin-top:12px;padding-top:10px;font-size:12.5px;
  border-top:1px solid rgba(20,32,27,.10);color:#556259}

/* ── 0.24.0 — wizard surface pass ─────────────────────────────── */

/* W3b — live echo of the address they are actually getting. */
.tcf-slug-echo{display:block;margin-top:.35rem;font-weight:700;color:#1b5e3f;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;word-break:break-all}

/* W2 — the organiser's problem list. Only ever shown after a failed
   commission attempt, so it must read as help, not as an error dump. */
.tcf-problems{margin-top:1rem;padding:.9rem 1.1rem;border-radius:10px;
  background:#fff6f5;border:1px solid #f0c8c2;color:#7a2118}
.tcf-problems strong{display:block;margin-bottom:.35rem}
.tcf-problems ul{margin:0;padding-left:1.1rem}
.tcf-problems li{margin:.2rem 0}

/* W18 — palette names. */
.tcf-swwrap{display:inline-flex;flex-direction:column;align-items:center;gap:.3rem}
.tcf-sw__cap{font-size:.72rem;color:#556259;letter-spacing:.01em}

/* W19 — type chips carry their own face, so keep them readable. */
.tcf-chip--type{font-size:1rem;line-height:1.2}

/* W20 — equalise the design cards so a longer description cannot clip.
   "The Card" was cutting off mid-word at "Numbered like hole…". */
.tcf-themes{align-items:stretch}
.tcf-theme{display:flex;flex-direction:column;height:100%}
.tcf-theme__body{flex:1 1 auto;display:flex;flex-direction:column}
.tcf-theme p{overflow-wrap:anywhere}

/* W26 — fee source disclosure. */
.tcf-fee-src{font-size:.82rem;color:#556259;margin:.2rem 0 .7rem}
.tcf-fee-src a{color:#1b5e3f}

/* W41 — Command Centre handoff on the success screen. */
.tcf-btn--ghost{background:transparent;border:2px solid #1b5e3f;color:#1b5e3f;margin-top:.5rem}
.tcf-status__hqnote{margin-top:1rem;padding:.9rem 1.1rem;border-radius:10px;
  background:#f5faf7;border:1px solid #d3e7db;text-align:left;line-height:1.55}
.tcf-status__hqnote p{margin:0 0 .5rem}
.tcf-status__hqnote p:last-child{margin-bottom:0}
.tcf-status__small{font-size:.82rem;color:#556259}

/* ═══════════════════════════════════════════════════════════════════════
   0.28.0 — Look is a WORKBENCH, not a form.

   Every control that changes the preview sits beside the preview, above the
   fold: pick a colour and watch it change without moving. The first cut had
   the container capped at 820px, so a 380px preview column left the form 406px
   and the two design cards stacked to 370px tall — you scrolled down to choose
   a colour and back up to see it. Cards are now compact rows: a small
   thumbnail is a SELECTOR; the big preview is the thing you actually read.
   ═══════════════════════════════════════════════════════════════════════ */

.tcf-wiz{--tcprev-fh:Georgia,serif}

/* Base state FIRST — an unconditional rule written after a media query wins on
   source order at equal specificity, which is exactly how the first cut hid
   the preview at every width. */
.tcf-preview{display:none;margin:0 0 22px}

@media (min-width:1000px){
  /* Wider only when there is a second column to fill — and ONLY on the form.
     The post-payment status screen shares the .tcf-wiz class and inherited the
     grid, so its card sat in the left track with a 400px ghost column beside
     it, visibly off-centre. Scope the grid to the modifier. */
  .tcf-wiz--form{max-width:1220px;display:grid;grid-template-columns:minmax(0,1fr) 400px;
    grid-template-areas:"rail rail" "form preview";gap:0 40px;align-items:start}
  .tcf-wiz--form .tcf-wiz__rail{grid-area:rail}
  .tcf-wiz--form .tcf-wiz__body{grid-area:form;min-width:0}
  .tcf-wiz--form .tcf-preview{grid-area:preview;display:block;margin:0}
}
/* The status screen keeps the original centred measure. */
.tcf-wiz.tcf-status{max-width:560px;margin-left:auto;margin-right:auto;display:block}
/* Below the two-column breakpoint the preview stacks ABOVE the form, so it
   must stay small: at full 820px width it was 669px tall and pushed every
   control below the fold — the exact problem the two-column layout fixes. */
@media (min-width:640px) and (max-width:999px){
  .tcf-preview{display:block;max-width:360px}
  .tcf-preview__sticky{position:static}
}

.tcf-preview__sticky{position:sticky;top:24px}
.tcf-preview__cap{margin:0 0 8px;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:#6b7a72;font-weight:700}
.tcf-preview__art{border-radius:10px;overflow:hidden;line-height:0;
  box-shadow:0 16px 44px rgba(20,32,27,.16);background:#fff;
  border:1px solid rgba(20,32,27,.08)}
.tcf-preview__art svg{display:block;width:100%;height:auto}
.tcf-preview__note{margin:10px 0 0;font-size:12px;color:#6b7a72}

/* Compact selector cards: thumbnail left, name right. */
.tcf-themes{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.tcf-theme{flex-direction:row;align-items:stretch;overflow:hidden}
.tcf-theme__art{flex:0 0 116px;width:116px;align-self:center;padding:9px}
.tcf-theme__art svg{border-radius:4px}
.tcf-theme__label{flex:1 1 auto;display:flex;flex-direction:column;
  justify-content:center;padding:10px 13px 10px 3px;background:transparent}
.tcf-theme.is-sel .tcf-theme__label{background:transparent}
.tcf-theme small{overflow-wrap:anywhere}
@media (max-width:520px){.tcf-theme{flex-direction:column}
  .tcf-theme__art{flex:1 1 auto;width:100%;padding:0}
  .tcf-theme__label{padding:11px 13px}}

/* Logo dropzone */
.tcf-logo__drop{display:flex;align-items:center;justify-content:center;
  min-height:96px;padding:14px;border:1.5px dashed #c3d2cb;border-radius:10px;
  background:#fbfdfc;cursor:pointer;text-align:center;transition:border-color .15s,background .15s}
.tcf-logo__drop:hover,.tcf-logo__drop:focus-visible,.tcf-logo__drop.is-over{
  border-color:#1b5e3f;background:#f3f8f5;outline:none}
.tcf-logo__prompt{font-size:13px;color:#63736b}
.tcf-logo__thumb{max-height:80px;max-width:100%;width:auto;display:block}
.tcf-logo__msg{margin:8px 0 0;font-size:12.5px;color:#1b5e3f}
.tcf-logo__msg.is-bad{color:#a3282d}
.tcf-f--sub{margin-top:12px}

/* "Help me with this later" */
.tcf-assist{display:block;margin:18px 0 0;padding:14px 16px;border-radius:10px;
  border:1px solid #d8e4de;background:#f7fbf9;cursor:pointer}
.tcf-assist input{margin-right:9px;width:auto}
.tcf-assist__t{font-weight:650;font-size:14px}
.tcf-assist small{display:block;margin:6px 0 0 25px;font-size:12.5px;
  color:#5d6b64;line-height:1.5}
.tcf-assist:has(input:checked){border-color:#1b5e3f;background:#eef6f1}

/* A tee-off outside daylight hours: say so, do not block it. */
.tcf-warn{display:block;margin-top:6px;color:#8a5a00;font-weight:600}