/* =============================================================================
   styles.css — the bench's own sheet

   Tokens only. Every colour here is a var() that site.css defines and dark.css
   redefines, so this one file serves both editions and there is nothing to keep
   in step. A literal colour in this file is a bug in the dark edition that the
   paper edition cannot show you.
   ========================================================================== */

/* ------------------------------------------------------------------ the drop */
.drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: 2.6rem 1.25rem;
    border: 2px dashed var(--line);
    border-radius: 14px;
    background: var(--tint);
    cursor: pointer;
    text-align: center;
    transition: border-color .18s var(--ease), background .18s var(--ease);
}
.drop:hover, .drop:focus-visible, .drop.is-over {
    border-color: var(--accent);
    background: var(--paper);
    outline: none;
}
.drop svg { width: 30px; height: 30px; opacity: .5; }
.drop b { font-size: 1.02rem; }
.drop span { font-size: .84rem; opacity: .66; }

.busy {
    display: flex; align-items: center; gap: .55rem;
    margin: .9rem 0 0; font-size: .86rem; opacity: .8;
}
.busy__dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent);
    animation: bpulse 1s var(--ease) infinite;
}
@keyframes bpulse { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .busy__dot { animation: none; } }

/* ----------------------------------------------------------------- the tiles */
.tiles {
    display: grid;
    /* minmax(0, 1fr): a 1fr track grows to min-content, and one long key name
       would then set the width of all four. */
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: .7rem;
    margin: 1.1rem 0 1.4rem;
}
.tile {
    display: flex; flex-direction: column; gap: .18rem;
    padding: .85rem .9rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    min-width: 0;
}
.tile__k {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; opacity: .55;
}
.tile__v {
    font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; line-height: 1.15;
}
.tile__s { font-size: .76rem; opacity: .62; }

/* --------------------------------------------------------------- the verdict */
.verdict {
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    padding: .95rem 1.05rem;
    background: var(--tint);
}
.verdict__grade {
    margin: 0 0 .5rem;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .13em;
    font-weight: 700; color: var(--accent);
}
.verdict__p { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.55; }
.verdict__p:last-child { margin-bottom: 0; }
.verdict__p--good { opacity: .9; }
.verdict__p--warn { opacity: .82; }
.verdict__p--bad { font-weight: 500; }

/* ----------------------------------------------------------------- the bands
   NAMED .bnd, NOT .band. `.band` is the house class for a page SECTION —
   <section class="band band--tight"> — and defining `.band { display: grid }`
   here silently re-laid-out every section on the page in both editions. It was
   invisible in review and instant in a test: querySelectorAll('.band') came
   back with the page's own sections in it. A property stylesheet shares a
   namespace with site.css and has to assume every short class name is taken. */
.spec { width: 100%; height: 220px; display: block; }

.bands { margin: 1.2rem 0 .6rem; }
.bnd {
    display: grid;
    grid-template-columns: 5.5rem 5.5rem minmax(0, 1fr) 4rem;
    grid-template-areas: "n hz bar pct" ". . why why";
    gap: .2rem .7rem;
    align-items: center;
    padding: .42rem 0;
    border-bottom: 1px solid var(--line);
}
.bnd__n   { grid-area: n; font-weight: 600; font-size: .86rem; }
.bnd__hz  { grid-area: hz; font-size: .76rem; opacity: .58; font-variant-numeric: tabular-nums; }
.bnd__bar { grid-area: bar; height: 9px; border-radius: 5px; background: var(--tint); overflow: hidden; }
.bnd__bar i { display: block; height: 100%; background: var(--ink); opacity: .34; }
.bnd__pct { grid-area: pct; text-align: right; font-size: .82rem;
             font-variant-numeric: tabular-nums; font-weight: 600; }
.bnd__why { grid-area: why; font-size: .74rem; opacity: .55; }
.bnd--bite .bnd__n { color: var(--accent); }
.bnd--bite .bnd__bar i { background: var(--accent); opacity: 1; }

.bite {
    display: flex; flex-wrap: wrap; gap: 1.6rem;
    margin: 1rem 0 1.8rem; padding: .8rem 1rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--tint);
}
.bite div { display: flex; flex-direction: column; gap: .1rem; }
.bite__k { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; opacity: .55; }
.bite b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- the partials */
.parts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
    gap: .5rem;
}
.part {
    display: flex; flex-direction: column; gap: .1rem;
    padding: .6rem .7rem;
    border: 1px solid var(--line); border-radius: 9px; background: var(--paper);
    min-width: 0;
}
.part b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.part span { font-size: .8rem; color: var(--accent); }
.part i { font-size: .72rem; opacity: .55; font-style: normal; font-variant-numeric: tabular-nums; }

.muted { opacity: .6; font-size: .88rem; }

/* One unwrappable row widens the whole document and every fixed thing with it,
   so the band table restacks rather than scrolling the page sideways. */
@media (max-width: 34rem) {
    .bnd {
        grid-template-columns: minmax(0, 1fr) 3.6rem;
        grid-template-areas: "n pct" "hz hz" "bar bar" "why why";
    }
    .bnd__bar { margin-top: .15rem; }
}