:root {
    /* Brand tokens, not the old cool greys. --bg was #f4f4f2, which read
       grey against the rest of the site. The surface stays near-white so
       the fields and code panel keep their contrast against the cream page. */
    --bg: var(--color-cream);
    --surface: #fffcf7;
    --ink: var(--color-cocoa);
    --muted: #6b6259;
    /* --line stays soft: it only draws decorative card edges. --line-strong
       draws control boundaries, so it has to clear WCAG 1.4.11's 3:1. It was
       #dbcab8, which measured 1.48:1 on cream and 1.56:1 on the surface, so
       every text field, the @ prefix and the empty-code box had a boundary you
       could not see. Mocha is 4.18:1 on cream and 4.41:1 on the surface. */
    --line: #ece0d4;
    --line-strong: var(--color-mocha);
    /* Was #b4341f, an invented red. coral-deep is the palette's AA-safe red,
       4.68:1 on cream and 4.93:1 on the surface. */
    --warn: var(--color-coral-deep);
    /* The warm strip behind the preview tabs and inline code. */
    --strip: #f4ebe0;
    --radius: 14px;
    --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { background: var(--bg); }
body {
    margin: 0;
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    accent-color: var(--ink);
}
[v-cloak] { display: none; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

a.skip {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink); color: #fff; padding: 0.6rem 1rem; z-index: 20;
    border-radius: 0 0 8px 0;
}
a.skip:focus { left: 0; }

.wrap {
    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    flex: 1;
}

/* The doodles are absolutely positioned against this block. */
header#tool { position: relative; }

/* No font-size here on purpose. Page CSS is unlayered, so it would beat the
   text-3xl / sm:text-4xl utilities on the .brand-heading and flatten it back
   to one size at every width. */
h1 {
    line-height: 1.2;
    margin: 0 0 0.6rem;
}
.lede {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 2.25rem;
    max-width: 56ch;
}

.cols { display: grid; gap: 2.5rem; }
.cols > section { min-width: 0; }
@media (min-width: 920px) {
    .cols { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
    /* The site header is sticky and 124px tall above 640px. top: 1.25rem parked
       the preview column 104px underneath it, so the tabs and the top of the
       card were hidden behind the nav for the whole scroll. */
    .sticky-col { position: sticky; top: calc(124px + 1rem); }
}

h2.step-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    margin: 0 0 1rem;
}

/* Fields */
.field-group { margin-bottom: 1.35rem; }
.f-label {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 0.4rem;
}
.field {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    padding: 0.7rem 0.9rem;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.5;
    color: var(--ink);
    background: var(--surface);
}
/* This used to be `outline: none` plus a 3px rgba(22,22,26,0.08) ring, which is
   an 8% wash of an off-palette blue-black: the keyboard focus indicator was
   effectively invisible. A real 2px cocoa outline is 12.46:1 against cream. */
.field:focus { border-color: var(--ink); }
.field:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.field::placeholder { color: var(--muted); }
textarea.field { min-height: 88px; resize: vertical; }

/* Replaces three copies of an inline style="font-weight:400;color:var(--muted)". */
.opt { font-weight: 400; color: var(--muted); }

.hint {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.45;
    margin-top: 0.4rem;
}
.hint.bad { color: var(--warn); font-weight: 600; }

.counter {
    display: flex; justify-content: space-between; gap: 1rem;
    font-size: 0.78rem; color: var(--muted); margin-top: 0.4rem;
}
.counter .over { color: var(--warn); font-weight: 600; text-align: right; }

.prefix-input { display: flex; }
.prefix-input .pfx {
    display: inline-flex; align-items: center;
    border: 1px solid var(--line-strong); border-right: 0;
    border-radius: 11px 0 0 11px;
    padding: 0 0.8rem;
    background: var(--strip); color: var(--muted); font-weight: 600;
}
.prefix-input .field { border-radius: 0 11px 11px 0; }

/* More options */
details.more {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 0.25rem 1rem;
    margin-top: 1.75rem;
}
details.more summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.65rem 0.1rem;
    color: var(--ink);
    border-radius: 8px;
}
details.more summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
details.more .field-group { margin: 1.1rem 0; }
details.more[open] { padding-bottom: 0.6rem; }

fieldset.kind { border: 0; padding: 0; margin: 0; }
fieldset.kind legend { font-weight: 600; font-size: 0.92rem; margin-bottom: 0.5rem; padding: 0; }
.kind label {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.9rem; margin-right: 1.4rem; cursor: pointer;
}
.kind label input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Preview tabs are daisyUI `tabs tabs-box` now, so the grid, the radii, the
   focus handling and the aria-selected wiring all come from the bundle. Only
   the palette and the selected state are overridden here, scoped under
   .cf-preview-tabs so no bare .tab or .tabs rule is ever defined.

   daisyUI's own selected state is base-100 on base-200, and the equivalent here
   measured 1.15:1: you genuinely could not tell which preview you were looking
   at. A cocoa fill is 11.39:1 against the strip, with white label text at
   13.43:1, so the state clears 1.4.11 on the boundary and 1.4.3 on the text. */
.cf-preview-tabs {
    background-color: var(--strip);
    margin-bottom: 1rem;
    max-width: 500px;
    --tab-height: 2.75rem; /* 44px, a thumb-sized target at every width */
}
.cf-preview-tabs .tab {
    flex: 1;
    font-size: 0.92rem;
    font-weight: 600;
    color: #5c5049; /* 6.60:1 on the strip. daisyUI's default is a 50% wash. */
}
.cf-preview-tabs .tab[aria-selected="true"] {
    --tab-bg: var(--color-cocoa);
    color: #fff;
}
/* daisyUI's tab focus ring is `outline: 2px solid` with no colour, so it
   inherits currentColor and would go white on the selected tab. */
.cf-preview-tabs .tab:focus-visible { outline-color: var(--color-cocoa); }
@media (hover: hover) {
    .cf-preview-tabs .tab:not([aria-selected="true"]):hover { color: var(--ink); }
}

.sample-row {
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
    margin-bottom: 0.9rem; max-width: 500px; min-height: 1.7rem;
}
.sample-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; color: #5c5049;
    background: var(--strip); border-radius: 999px; padding: 0.28rem 0.75rem;
}
/* Element selector on purpose: never a bare .btn rule in page CSS. The link
   button replaces a hand-rolled .linkish that hard-coded --muted at 5.54:1;
   espresso is 6.58:1 on cream and is the palette's link colour. */
.sample-row button { --fontsize: 0.78rem; }

.panel { max-width: 500px; }

/* Google preview */
.g-card {
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 1.1rem 1.2rem;
    font-family: arial, sans-serif;
}
.g-top { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.75rem; }
.g-fav {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    background: #f1f3f4; border: 1px solid #ecedef;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #202124;
}
.g-id { min-width: 0; flex: 1; }
.g-site { display: block; font-size: 14px; color: #202124; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-crumb { display: block; font-size: 12px; color: #4d5156; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-title {
    font-size: 20px; font-weight: 400; color: #1a0dab; line-height: 1.3;
    margin: 0 0 0.25rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.g-desc {
    font-size: 14px; color: #474747; line-height: 1.57; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    overflow-wrap: anywhere;
}

/* Facebook preview */
.fb-card {
    border: 1px solid #dddfe2; border-radius: 8px; overflow: hidden; background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.fb-card img, .x-card img {
    display: block; width: 100%; aspect-ratio: 1.91 / 1;
    object-fit: cover; background: #f0f2f5;
}
.fb-bar { background: #f0f2f5; padding: 10px 12px; }
.fb-domain { font-size: 12px; color: #606770; text-transform: uppercase; letter-spacing: 0.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-title { font-size: 16px; font-weight: 600; color: #050505; margin: 3px 0 0; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    overflow-wrap: anywhere; }
.fb-desc { font-size: 14px; color: #606770; margin: 2px 0 0; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* X preview */
.x-wrap { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.x-card { position: relative; border: 1px solid #cfd9de; border-radius: 16px; overflow: hidden; background: #fff; }
.x-pill {
    position: absolute; left: 12px; bottom: 12px;
    background: rgba(0,0,0,0.77); color: #fff;
    font-size: 13px; line-height: 1.4; padding: 2px 8px; border-radius: 4px;
    max-width: calc(100% - 24px);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.x-from { font-size: 13px; color: #536471; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Copy is a real daisyUI button now. Everything the old .btn-brand hand-rolled
   (radius, padding, inline-flex centring, gap, transition, focus-visible) ships
   in the bundle. Element selector, not .btn: daisyUI owns that name. */
.code-actions { margin-top: 0.9rem; }
.code-actions > button { width: 100%; max-width: 500px; }
/* Gated on hover:hover so touch devices do not get a stuck hover fill, matching
   how daisyUI guards its own .btn:hover. --btn-fg is set alongside --btn-bg: a
   background swap without a matching foreground is how a previous page ended up
   with dark text on a dark fill at 2.50:1. White on espresso is 7.09:1. */
@media (hover: hover) {
    .code-actions > button:hover {
        --btn-bg: var(--color-espresso);
        --btn-border: var(--color-espresso);
        --btn-fg: #fff;
    }
}
/* The disabled fill was #e8dccd, 1.25:1 against cream, so the button all but
   vanished and its label sat at 4.42:1. Outlined on the page background instead:
   the boundary is mocha at 4.18:1 and the label is 5.54:1. */
.code-actions > button:disabled {
    background-color: transparent;
    border-color: var(--line-strong);
    color: var(--muted);
    box-shadow: none;
}

/* Code output */
.code-section { margin-top: 3rem; }
.paste-hint { font-size: 0.85rem; color: var(--muted); line-height: 1.5; margin: 0.6rem 0 1rem; max-width: 60ch; }
.paste-hint code, .code-empty code {
    font-family: var(--mono); font-size: 0.8em;
    background: var(--strip); border-radius: 4px; padding: 0.1em 0.35em;
}
/* --line-strong, not --line: this is a focusable scrolling region, and its edge
   is the only thing telling you the block scrolls. --line is 1.20:1 on cream. */
.code-scroll {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    max-height: 340px; overflow: auto;
    padding: 1.1rem 1.2rem;
}
.code-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.code-scroll pre {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.82rem;
    line-height: 1.6;
}
.code-empty {
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius);
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
}

.copy-note { font-size: 0.82rem; color: var(--muted); margin-top: 0.6rem; }
.copy-note.bad { color: var(--warn); font-weight: 600; }

.foot {
    text-align: center; padding: 1.5rem 1rem 2rem;
    font-size: 0.8rem; color: var(--muted);
}
/* Espresso, not --muted: this is the one outbound link on the page and it was
   the same colour as the sentence around it. 6.58:1 on cream. */
.foot a { color: var(--color-espresso); text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) {
    .foot a:hover { color: var(--ink); }
}
.foot a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .cf-preview-tabs .tab, .code-actions > button { transition: none; }
}

@media (max-width: 480px) {
    /* No h1 font-size override here any more. It used to force 1.6rem, which,
       being unlayered page CSS, beat the text-3xl utility on the .brand-heading
       at every width. */
    .wrap { padding-top: 1.5rem; }
    /* Thumb-sized targets. The radios were 13px and the disclosure row 40px. */
    .kind label { min-height: 44px; margin-right: 0; width: 100%; }
    .kind label input { width: 20px; height: 20px; }
    /* Padding, not display:flex: flex on a summary drops the disclosure marker. */
    details.more summary { padding-top: 0.85rem; padding-bottom: 0.85rem; }
    .code-actions > button { max-width: 100%; }
}