/* ═════════════════════════════════════════════════════════════════════════
   styles-append-home-v0.1.2.css  —  sport-picker landing page (home.html)
   ═════════════════════════════════════════════════════════════════════════
   v0.1.2 — 2026-10-19 — home v0.19.16.4, nav-rebuild 015. The command-center
   layout (Mo's concept, 2026-10-19): an eyebrow and a smaller headline, a
   four-cell status strip (.home-stats), section heads, compact tiles with a
   corner arrow on linked tiles only, a larger status dot, and a tools row
   (.home-tools) that replaces the lone Cappers aside. Dimmed tiles
   (.home-tile--off: Offseason, Unavailable, and MLB, which has no board) take
   order:1, so a tile moves to the end of the grid when its board goes dark
   and back when it goes live, with the DOM order kept inside each group.
   Grid: four columns, two at 1000px and below, one at 520px and below. The
   name keeps v0.1.1's 22cqi cap (NCAAWB is the widest at 4.30em in Outfit
   900). Built-line stamps are kept: they are the only freshness signal on
   the page. Reads only the base tokens from styles.css, as before.
   Retires v0.1.1 (rule 10); the next change ships as v0.1.3.
   v0.1.1 — 2026-10-02 — NBA v0.19.15, nav-rebuild 010. Each tile an
   inline-size container, name capped at 22cqi; non-link tiles drop the
   hover lift.
   v0.1.0 — 2026-09-04 — NBA v0.16.73 / §10.252. First version; self-contained
   under .home-*, brand block re-declared so a slate-command CSS retirement
   cannot break this page.
   ═════════════════════════════════════════════════════════════════════════ */

.home-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.home-mark{width:40px;height:40px;flex:0 0 40px;display:block}
.home-mark img{display:block;width:100%;height:100%}
.home-brand-copy{display:flex;flex-direction:column;line-height:1}
.home-brand-copy strong{font:800 14px var(--font-display);letter-spacing:.18em;color:var(--text-primary)}
.home-brand-copy span{margin-top:5px;font:400 9px var(--font-mono);letter-spacing:.26em;color:var(--text-tertiary)}
.home-topbar-date{font:500 11px var(--font-mono);letter-spacing:.11em;color:var(--text-secondary)}

.home{max-width:1200px;margin:0 auto;padding:44px 28px 72px}
.home-eyebrow{margin:0 0 10px;font:600 11px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-pos)}
.home-title{margin:0;font:800 clamp(28px,3.4vw,40px)/1.1 var(--font-display);letter-spacing:-.02em;color:var(--text-primary)}
.home-sub{margin:10px 0 0;max-width:60ch;font:400 15px/1.5 var(--font-display);color:var(--text-secondary)}

/* Status strip. Counts are written by the page script from the tiles' own
   final state, so the strip cannot disagree with the grid. */
.home-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:28px 0 0;padding:0}
.home-stat{margin:0;padding:16px 18px;background:var(--bg-elev-1);border:1px solid var(--border);border-radius:12px}
.home-stat dt{font:500 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary)}
.home-stat dd{margin:8px 0 0;font:700 28px/1 var(--font-display);color:var(--text-primary);font-variant-numeric:tabular-nums}

.home-section{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:40px 0 0}
.home-section h2{margin:0;font:600 18px var(--font-display);color:var(--text-primary)}
.home-section span{font:500 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary)}

.home-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}

.home-tile{
    position:relative;display:flex;flex-direction:column;justify-content:space-between;
    min-height:190px;padding:22px 22px 20px;
    background:var(--bg-elev-1);border:1px solid var(--border);border-radius:14px;
    color:inherit;text-decoration:none;
    transition:border-color .15s ease,background-color .15s ease;
    container-type:inline-size;
}
.home-tile:hover{border-color:var(--border-strong);background:var(--bg-elev-2)}
.home-tile:focus-visible{outline:2px solid var(--accent-pos);outline-offset:3px;border-color:var(--accent-pos-border)}
.home-tile:active{background:var(--bg-elev-3)}
.home-tile:not([href]):hover,.home-tile:not([href]):active{border-color:var(--border);background:var(--bg-elev-1)}
.home-tile[href]::after{
    content:"\2197";position:absolute;top:18px;right:20px;
    font:500 15px/1 var(--font-display);color:var(--text-tertiary);
    transition:color .15s ease;
}
.home-tile[href]:hover::after{color:var(--text-primary)}

.home-tile-sport{
    display:block;padding-right:24px;
    font:900 40px/.95 var(--font-display);letter-spacing:-.03em;
    font-size:min(clamp(30px,3.2vw,44px),22cqi);
    color:var(--text-primary);
}
.home-tile-meta{display:flex;flex-direction:column;gap:8px;margin-top:24px}
.home-tile-state{
    display:inline-flex;align-items:center;gap:10px;
    font:600 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent-pos);
}
.home-tile-state::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--accent-pos);flex:0 0 12px}
.home-tile-dest{font:500 15px/1.3 var(--font-display);color:var(--text-primary)}
.home-tile-built{font:400 11px var(--font-mono);letter-spacing:.06em;color:var(--text-tertiary);min-height:14px}

/* Dimmed: the type carries the state (grey name, grey dot) and the tile
   sorts after every live one. */
.home-tile--off{order:1}
.home-tile--off .home-tile-sport{color:var(--text-tertiary)}
.home-tile--off .home-tile-state{color:var(--text-tertiary)}
.home-tile--off .home-tile-state::before{background:var(--text-muted)}
.home-tile--off:hover .home-tile-sport{color:var(--text-secondary)}
.home-tile--off:not([href]):hover .home-tile-sport{color:var(--text-tertiary)}

/* Tools row. */
.home-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.home-tool{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    min-height:96px;padding:18px 14px;
    background:var(--bg-elev-1);border:1px solid var(--border);border-radius:12px;
    color:var(--text-primary);text-decoration:none;font:500 14px var(--font-display);
    transition:border-color .15s ease,background-color .15s ease;
}
.home-tool svg{width:26px;height:26px;stroke:var(--accent-pos);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.home-tool:hover{border-color:var(--border-strong);background:var(--bg-elev-2)}
.home-tool:focus-visible{outline:2px solid var(--accent-pos);outline-offset:3px}
.home-tool:active{background:var(--bg-elev-3)}

@media (max-width:1000px){
    .home-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
    .home{padding:32px 18px 56px}
    .home-stats{grid-template-columns:repeat(2,1fr);gap:10px}
    .home-tile{min-height:160px;padding:18px 18px 16px}
    .home-tool{min-height:84px;font-size:13px}
}
@media (max-width:520px){
    .home-tiles{grid-template-columns:minmax(0,1fr)}
    .home-tools{gap:10px}
}
@media (prefers-reduced-motion:reduce){
    .home-tile,.home-tile[href]::after,.home-tool{transition:none}
}