: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 drop zones and cards keep their contrast against the cream page. */
    --bg: var(--color-cream);
    --surface: #fffcf7;
    --ink: var(--color-cocoa);
    --muted: #6b6259;
    --faint: #8a7f74;
    /* --line stays soft on purpose: it only draws decorative card, thumbnail
       and image edges, never the outline of a control. --line-strong draws
       control boundaries (the drop zone, the message box, the outline button),
       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 the single most important
       affordance on the page had an edge you could not see. Mocha is 4.18:1 on
       cream and 4.41:1 on the surface, and stays in palette. */
    --line: #ece0d4;
    --line-strong: var(--color-mocha);
    --good-bg: #eaf6ef;
    /* Was #b4341f, an invented red. coral-deep is the palette's AA-safe red,
       4.68:1 on cream. */
    --warn: var(--color-coral-deep);
    --warn-bg: #fbecea;
    --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: 50;
    border-radius: 0 0 8px 0;
}
a.skip:focus { left: 0; }

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

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

h1 {
    line-height: 1.25;
    margin: 0 0 0.6rem;
}
.lede {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 2rem;
    max-width: 44ch;
}

/* Mode switch. Real daisyUI `tabs tabs-box` over two native radio inputs, so
   the layout, radii, focus handling and arrow-key navigation all ship in the
   bundle. The old hand-rolled control claimed role="tab" without aria-controls,
   left both buttons at tabindex 0 and had no arrow-key handling. Only the
   palette and the selected state are overridden here, scoped under
   .cf-mode-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.27:1, so the only reliable cue for "am I hiding or revealing" was
   a text colour shift. A cocoa fill is 10.35:1 against the track, with white
   label text at 13.43:1. */
fieldset.cf-mode-set { border: 0; padding: 0; margin: 0 0 2rem; }
.cf-mode-tabs {
    background-color: var(--line);
    /* The track alone is 1.20:1 on cream, so the group gets a real edge. */
    border: 1px solid var(--line-strong);
    --tab-height: 2.75rem; /* 44px, a thumb-sized target at every width */
}
.cf-mode-tabs .tab {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
    color: #5c5049; /* 6.00:1 on the track. daisyUI's default is a 50% wash. */
}
.cf-mode-tabs .tab:checked {
    --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-mode-tabs .tab:focus-visible { outline-color: var(--color-cocoa); }
@media (hover: hover) {
    .cf-mode-tabs .tab:not(:checked):hover { color: var(--ink); }
}

/* The Reveal panel's own title, so the decode wording that used to live in the
   h1 ternary stays on the page. */
h2.panel-title {
    font-size: 1.35rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-weight: 650;
    margin: 0 0 0.5rem;
}

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

/* cf- prefix, not the bare .step: daisyUI owns that name via `.steps &`. */
section.cf-step { margin-bottom: 1.6rem; }

/* Drop zone */
.drop {
    display: block;
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 2rem 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.drop.drag { border-color: var(--ink); background: #fdf9f3; }
/* Gated on hover:hover so a tap on touch does not leave the zone stuck in its
   drag-target state, matching how daisyUI guards its own hover rules. */
@media (hover: hover) {
    .drop:hover { border-color: var(--ink); background: #fdf9f3; }
}
.drop:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.drop .ico { color: var(--faint); margin-bottom: 0.6rem; }
.drop .main { font-weight: 600; font-size: 0.95rem; }
.drop .sub { color: var(--muted); font-size: 0.85rem; margin-top: 0.25rem; }

/* Element-qualified, never a bare .btn rule in page CSS. This is a real
   daisyUI btn-link now, so the colour, focus ring and transition come from the
   bundle. Two overrides are needed: the label is a whole sentence, so the fixed
   daisyUI button height has to give way or it overflows at 375px, and the
   target used to render about 22px tall, under WCAG 2.5.8's 24px floor and
   well under the 44px the rest of the site uses for thumb targets. */
button.cf-sample {
    display: flex;
    margin: 0.7rem auto 0;
    height: auto;
    min-height: 44px;
    padding-block: 0.45rem;
    white-space: normal;
    text-align: center;
    --fontsize: 0.85rem;
}

/* The full-width action button in each step. */
button.cf-go { width: 100%; }
/* daisyUI's disabled state is a 20% wash of the ink on a 10% wash, about
   1.9:1. Disabled controls are exempt from 1.4.3, but the reason line below is
   no help if the button itself is unreadable, so it gets the treatment
   text-converter uses: transparent fill, real border, muted label at 5.58:1. */
button.cf-go:disabled,
.result-actions > button:disabled {
    background-color: transparent;
    border-color: var(--line-strong);
    color: var(--muted);
    box-shadow: none;
}

/* Thumbnail row */
.thumb-row {
    display: flex; align-items: center; gap: 0.9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.75rem;
}
.thumb {
    width: 56px; height: 56px; border-radius: 9px;
    object-fit: cover; background: #f6ede2; flex-shrink: 0;
    border: 1px solid var(--line);
}
.thumb-meta { flex: 1; min-width: 0; }
.thumb-meta .name { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb-meta .dim { color: var(--muted); font-size: 0.82rem; }

/* Textarea */
textarea.msg {
    width: 100%;
    min-height: 130px;
    resize: vertical;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    font-family: var(--mono);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink);
    background: var(--surface);
    outline: none;
}
textarea.msg:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(61,43,31,0.12); }
textarea.msg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
textarea.msg::placeholder { color: var(--muted); }

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

.copy-note { font-size: 0.82rem; color: var(--muted); margin: 0.6rem 0 0; }

/* Result cards */
.result {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1.25rem;
    margin-top: 1.75rem;
}
.result img.out {
    display: block; max-width: 100%; max-height: 340px;
    margin: 0 auto 1rem; border-radius: 10px; border: 1px solid var(--line);
}
.result-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
/* Element selector, not .btn: daisyUI owns that name and these are real
   daisyUI buttons now. */
.result-actions > button { flex: 1; min-width: 150px; }

.revealed {
    font-family: var(--mono);
    font-size: 1rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--good-bg);
    /* Sage, 4.99:1 on the fill. The old #cfe8db measured 1.27:1. */
    border: 1px solid #4a7249;
    border-radius: 10px;
    padding: 1rem;
    color: #143d2b;
    margin-bottom: 0.9rem;
}
.stamp { font-size: 0.8rem; color: var(--muted); margin: 0 0 0.9rem; }

.note {
    display: flex; gap: 0.55rem; align-items: flex-start;
    font-size: 0.85rem; line-height: 1.5; color: var(--muted);
    margin-top: 0.9rem;
}
.note svg { flex-shrink: 0; margin-top: 1px; }
.note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.note a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) {
    .note a:hover { color: var(--ink); }
}

.banner {
    display: flex; gap: 0.55rem; align-items: flex-start;
    border-radius: 10px; padding: 0.75rem 0.9rem;
    font-size: 0.88rem; line-height: 1.45; margin-top: 1rem;
}
/* The border was #f0ccc5, 1.38:1 on the fill. coral-deep is 4.39:1. */
.banner.warn { background: var(--warn-bg); color: #7a2314; border: 1px solid var(--color-coral-deep); }

@media (prefers-reduced-motion: reduce) {
    .drop { transition: none; }
    .result-actions > button, button.cf-go, button.cf-sample { transition: none; }
}

@media (max-width: 480px) {
    .wrap { padding-top: 1.5rem; }
    .result-actions > button { min-width: 100%; }
}

/* Not Tailwind's .scroll-smooth utility: that one is unconditional and ignores
   a reduced-motion preference. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}