: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 zone and icon cards keep their contrast against the cream page. */
    --bg: var(--color-cream);
    --surface: #fffcf7;
    --ink: var(--color-cocoa);
    --muted: #6b6259;
    --faint: #8a7f74;
    --line: #ece0d4;
    /* --line-strong was #dbcab8, which measured 1.48:1 on cream and failed
       WCAG 1.4.11 on every control boundary it drew, including the nine
       Download links. Mocha is 4.18:1 on cream and stays in palette. */
    --line-strong: var(--color-mocha);
    --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;
}

/* Anchors the aria-hidden sketch doodles that sit in the header's margins. */
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 2.25rem;
    max-width: 46ch;
}

h2.step-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    margin: 0 0 0.8rem;
}
/* cf- prefixed: daisyUI owns bare .step, it only stays inert because daisyUI
   nests it under .steps. One unrelated markup change and all four sections
   would turn into grids. */
section.cf-step { margin-bottom: 2.25rem; }

/* 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;
}
/* .drag stays unguarded, it is a real drag state driven by the Vue :class
   binding and the only feedback that a drag is being accepted. The pointer
   half is gated on hover:hover so touch devices do not keep the fill after
   the first tap, the way daisyUI guards its own components. */
.drop.drag { border-color: var(--ink); background: #faf5ee; }
@media (hover: hover) {
    .drop:hover { border-color: var(--ink); background: #faf5ee; }
}
.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; }

/* 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: #f4ebe0; 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; }

/* Buttons are real daisyUI components now. Everything the old .btn-brand
   family hand-rolled (padding, radius, inline-flex centring, gap, transition,
   focus-visible, disabled) ships in the bundle, and daisyUI already wraps its
   own .btn:hover in @media (hover: hover). Element selectors on purpose:
   never a bare .btn rule in page CSS. */
.cf-step > button, .dl-all > button { width: 100%; }
.icon-card a.dl { width: 100%; }

.hint {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.45;
    margin-top: 0.6rem;
}

/* Banners */
.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;
}
.banner svg { flex-shrink: 0; margin-top: 2px; }
.banner.warn { background: var(--warn-bg); color: var(--warn); border: 1px solid #f0ccc5; }
.banner.note { background: #f0e6da; color: #4a423a; border: 1px solid var(--line-strong); }

/* Icon grid */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    list-style: none;
    margin: 0; padding: 0;
}
.icon-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.75rem;
    text-align: center;
}
.tile {
    display: flex; align-items: center; justify-content: center;
    height: 84px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background-color: var(--surface);
    /* checkerboard so transparent PNGs read as transparent */
    background-image:
        linear-gradient(45deg, #f0e6da 25%, transparent 25%, transparent 75%, #f0e6da 75%),
        linear-gradient(45deg, #f0e6da 25%, transparent 25%, transparent 75%, #f0e6da 75%);
    background-size: 14px 14px;
    background-position: 0 0, 7px 7px;
    margin-bottom: 0.6rem;
    overflow: hidden;
}
.tile img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}
.icon-card .size {
    font-weight: 600; font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    margin: 0 0 0.6rem;
}
.dl-all { margin-top: 1rem; }

/* Empty state */
.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;
}
.code-empty code, .paste-hint code, .hint code, .copy-note code {
    font-family: var(--mono); font-size: 0.8em;
    background: #f0e6da; border-radius: 4px; padding: 0.1em 0.35em;
}

/* Code output */
.paste-hint { font-size: 0.85rem; color: var(--muted); line-height: 1.5; margin: 0.6rem 0 1rem; }
.code-scroll {
    background: var(--surface);
    border: 1px solid var(--line);
    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;
}
.copy-note { font-size: 0.82rem; color: var(--muted); margin-top: 0.6rem; }
.copy-note.bad { color: var(--warn); font-weight: 600; }

.note {
    display: flex; gap: 0.55rem; align-items: flex-start;
    font-size: 0.85rem; line-height: 1.5; color: var(--muted);
}
.note svg { flex-shrink: 0; margin-top: 1px; }

.spin {
    width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff; border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.foot {
    text-align: center; padding: 1.5rem 1rem 2rem;
    font-size: 0.8rem; color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
    .spin { animation: none; }
    .drop { transition: none; }
}

@media (max-width: 480px) {
    .wrap { padding-top: 1.5rem; }
    /* Keeps the nine Download links at a 44px touch target on phones. */
    .icon-card a.dl { min-height: 44px; }
}