/* .status-brand, not .status: daisyUI ships a bare unscoped .status that would
   override the properties this rule does not set. */
: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 cards and drop zone keep their contrast against the cream page. */
    --bg: var(--color-cream);
    --surface: #fffcf7;
    --ink: var(--color-cocoa);
    --muted: #6b6259;
    /* --line stays decorative, it only draws card edges and table rules.
       --line-strong was #dbcab8, which measured 1.48:1 on cream and 1.56:1 on
       the surface, and it draws the boundary of the drop zone, the disclosure
       and the outline buttons. WCAG 1.4.11 wants 3:1 for a UI component
       boundary. Mocha is 4.18:1 on cream and stays in palette. */
    --line: #ece0d4;
    --line-strong: var(--color-mocha);
    --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: 20;
    border-radius: 0 0 8px 0;
}
a.skip:focus { left: 0; }

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

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

/* Size comes from the Tailwind utilities on the h1 itself, .brand-heading
   supplies the Pacifico face and the coral offset shadow. */
h1 {
    line-height: 1.25;
    margin: 0 0 0.6rem;
}
.lede {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
    max-width: 52ch;
}

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- prefix, not the bare .step: daisyUI owns that name via `.steps &`. */
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;
}
.drop.drag { border-color: var(--ink); background: #faf5ee; }
/* Gated on hover:hover so a tap does not leave the fill stuck on a touch
   device, matching how daisyUI guards its own hover rules. */
@media (hover: hover) {
    .drop:hover { border-color: var(--ink); background: #faf5ee; }
}
.drop:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Tailwind preflight makes every svg a block box, so text-align: center on
   .drop cannot reach the icon. Centre it explicitly. */
.drop .ico { color: var(--muted); margin-bottom: 0.6rem; }
.drop .ico svg { display: block; margin-inline: auto; }
.drop .main { font-weight: 600; font-size: 0.95rem; }
.drop .sub { color: var(--muted); font-size: 0.85rem; margin-top: 0.25rem; }

/* File 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;
}
video.thumb {
    width: 72px; height: 56px; border-radius: 9px;
    object-fit: cover; background: var(--ink); 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; }

details.more {
    /* --line-strong, not --line: the summary is a real control and its box is
       the only thing that marks it as one. */
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 0.25rem 1rem;
    margin-top: 0.8rem;
}
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; }
video.player {
    display: block; width: 100%; max-height: 320px;
    border-radius: 10px; background: var(--ink);
    margin: 0.4rem 0 0.8rem;
}
video.player:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Progress / status */
.status-brand {
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 0.88rem; color: var(--muted);
    margin: 0.9rem 0 0; min-height: 1.4em;
}
.bar {
    height: 6px; background: var(--line); border-radius: 999px;
    overflow: hidden; margin-top: 0.5rem;
}
.bar-fill {
    height: 100%; background: var(--ink); border-radius: 999px;
    transition: width 0.2s ease;
}

/* Summary chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.chip-stat {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.78rem; font-weight: 600; color: #5c5148; /* 5.94:1 on the warm chip, AA */
    background: var(--line); border-radius: 999px; padding: 0.3rem 0.8rem;
}
.chip-stat.bad { background: var(--warn-bg); color: #7a2314; border: 1px solid #f0ccc5; }

/* Banners & notes */
.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: 0 0 1rem;
}
.banner.warn { background: var(--warn-bg); color: #7a2314; border: 1px solid #f0ccc5; }
.banner svg { flex-shrink: 0; margin-top: 2px; }
.banner ul.plain { margin: 0.35rem 0 0; padding-left: 1.1rem; list-style: disc; }
.banner ul.plain li { margin: 0.2rem 0; }

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

/* Metadata cards */
.meta-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem 0.45rem;
    margin-bottom: 0.8rem;
}
.meta-card h3 {
    font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--muted); margin: 0 0 0.15rem;
}
table.kv { width: 100%; border-collapse: collapse; }
.kv th {
    text-align: left; font-weight: 600; font-size: 0.85rem;
    color: var(--ink); padding: 0.5rem 0.9rem 0.5rem 0;
    vertical-align: top; width: 42%; overflow-wrap: anywhere;
}
.kv td {
    font-family: var(--mono); font-size: 0.8rem; line-height: 1.5;
    color: var(--muted); padding: 0.5rem 0;
    vertical-align: top; overflow-wrap: anywhere;
}
.kv tr + tr th, .kv tr + tr td { border-top: 1px solid var(--line); }

.hint-p { font-size: 0.9rem; color: var(--muted); line-height: 1.55; margin: 0 0 1rem; max-width: 56ch; }

/* Result card */
.result {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1.25rem;
}
.result-title { font-weight: 650; margin: 0 0 0.4rem; font-size: 1rem; }
ul.removed { margin: 0 0 0.9rem; padding-left: 1.2rem; list-style: disc; font-size: 0.9rem; line-height: 1.65; }
.stamp { font-size: 0.8rem; color: var(--muted); margin: 0 0 1rem; }
.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. Padding, radius, inline-flex centring, gap, transition
   and focus-visible all ship in the bundle. */
.result-actions > button { flex: 1; min-width: 160px; }
/* Gated on hover:hover so touch devices do not get a stuck hover fill. --btn-fg
   matters: without it the outline button kept dark text on the espresso fill,
   which measured 2.50:1. White on espresso is 7.09:1. */
@media (hover: hover) {
    .result-actions > button:hover {
        --btn-bg: var(--color-espresso);
        --btn-border: var(--color-espresso);
        --btn-fg: #fff;
    }
}

/* About */
.about h3 { font-size: 0.95rem; margin: 1.2rem 0 0.3rem; }
.about p { font-size: 0.9rem; color: var(--muted); line-height: 1.6; margin: 0; }

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

.spin {
    width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff; border-radius: 50%; flex-shrink: 0;
    animation: spin 0.7s linear infinite;
}
.spin.dark { border-color: rgba(61,43,31,0.2); border-top-color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .spin { animation: none; }
    .drop, .bar-fill, .result-actions > button { transition: none; }
}

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