/* MODERN LAUNDRY — style.css
   Every value comes from handoff/README.md (§5 layout, §6 deck, §11 tokens, §12 mobile).
   Strict monochrome; the only colour on the page is the playing record's artwork. */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:#000;color:#c0c0c0}
body{font:11px Verdana,Geneva,sans-serif;-webkit-font-smoothing:none}
a{color:#c0c0c0;text-decoration:underline}
a:hover{color:#fff}
button{font:inherit;color:inherit}
input{font:inherit}

.root{position:relative;min-height:100vh;background:#000;color:#c0c0c0;overflow:hidden}
.grid-bg{position:absolute;inset:0;background-image:radial-gradient(#161616 1px,transparent 1px);background-size:6px 6px;opacity:.7;pointer-events:none}
.page{position:relative;max-width:760px;margin:0 auto;min-height:100vh;border-left:1px solid #2a2a2a;border-right:1px solid #2a2a2a;background:#000;display:flex;flex-direction:column}
.label{font-family:'Silkscreen',monospace;font-size:9px;color:#808080}

/* 5.1 header */
.header{padding:22px 20px 12px;border-bottom:1px solid #333;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.wordmark{margin:0;font-family:'Silkscreen',monospace;font-weight:400;font-size:18px;letter-spacing:.08em;color:#e0e0e0}
.links{font-size:10px;display:flex;gap:6px;flex-wrap:wrap;align-items:baseline}
.links .label{margin-right:4px}
.links .dot{color:#808080}

/* 5.2 body grid */
.body{display:grid;grid-template-columns:148px minmax(0,1fr) 110px;grid-template-areas:'nav deck info' 'shelf shelf shelf';gap:18px;padding:18px 20px 0;align-items:start}

/* [ RECORDS ] nav */
.recnav{grid-area:nav;display:flex;flex-direction:column}
.recnav-label{margin-bottom:6px}
.navbtn{display:block;background:none;border:0;margin:0;text-align:left;cursor:pointer;line-height:1.4;padding:4px 0;color:#c0c0c0}
.navbtn.is-placeholder{color:#808080}
.navbtn.is-out{color:#fff}
.navbtn:hover,.navbtn:focus-visible{color:#fff;outline:none}
.nav-title{text-decoration:underline}
.navbtn.is-out .nav-title{text-decoration:none}
.nav-sub{font-size:9px;color:#808080;margin-left:12px}
.nav-sub:empty{display:none}

/* deck column */
.deck{grid-area:deck;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.tt{position:relative;width:100%;max-width:360px;aspect-ratio:36/25;border:1px solid #333;background:#0a0a0a;overflow:hidden;filter:contrast(1.15)}
.plinth{position:absolute;left:8.3%;top:8%;width:83.3%;height:84%;background:#1c1c1c;border:1px solid #3a3a3a}
.platter{position:absolute;left:14.4%;top:13.6%;width:48.9%;aspect-ratio:1/1;border-radius:50%;border:1px solid #666;background:#000;cursor:pointer;overflow:hidden}
.mat{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,#000 0 2px,#303030 2px 4px)}
.spindle{position:absolute;left:48.5%;top:48.5%;width:3%;height:3%;border-radius:50%;background:#888}
.pivot{position:absolute;left:74.5%;top:18.4%;width:6.7%;aspect-ratio:1/1;border-radius:50%;background:#555;border:1px solid #888}
.deckbtn{position:absolute;left:11.7%;top:78.4%;width:5%;aspect-ratio:1/1;padding:0;background:#808080;border:2px solid;border-color:#c0c0c0 #404040 #404040 #c0c0c0;cursor:pointer}
.readout{position:absolute;left:9.5%;top:87.5%;width:12%;text-align:center;font-family:'Silkscreen',monospace;font-size:6px;color:#808080;white-space:nowrap;pointer-events:none}
.dither{position:absolute;inset:0;background-image:radial-gradient(#000 38%,transparent 40%);background-size:3px 3px;opacity:.45;pointer-events:none}

.ticker{width:100%;max-width:360px;border:1px solid #333;padding:3px 8px;font-family:'VT323',monospace;font-size:17px;color:#c0c0c0;background:#050505;white-space:nowrap;overflow:hidden}
.tick{display:inline-block;min-width:100%;animation:ticker 24s linear infinite}
@keyframes ticker{from{transform:translateX(100%)}to{transform:translateX(-100%)}}

.btnrow{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.bevel{background:#c0c0c0;color:#000;border:2px solid;border-color:#fff #404040 #404040 #fff;cursor:pointer}
.btnrow .bevel{min-width:64px;min-height:24px;font-size:10px;padding:2px 10px}

/* [ INFO ] column */
.info{grid-area:info;font-size:9px;color:#808080;line-height:1.7;display:flex;flex-direction:column;gap:14px}
.info-label{margin-bottom:4px}
.info .hl{color:#c0c0c0}
.site-links{display:flex;flex-direction:column}
.site-links a{color:#808080}
.uc{border:1px solid #333;padding:4px;text-align:center;font-family:'Silkscreen',monospace;font-size:7px;color:#666;max-width:110px}

/* shelf */
.shelf{grid-area:shelf;border-top:1px solid #333;padding-top:12px;min-width:0}
.shelf-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:10px;scrollbar-color:#c0c0c0 #000;scrollbar-width:thin}
.shelf-scroll::-webkit-scrollbar{height:10px}
.shelf-scroll::-webkit-scrollbar-track{background:#000;border-top:1px solid #333}
.shelf-scroll::-webkit-scrollbar-thumb{background:#c0c0c0;border:2px solid;border-color:#fff #404040 #404040 #fff}
.shelf-row{display:flex;gap:14px;align-items:flex-start;width:max-content;padding:8px 2px 0}
.thumb{display:flex;flex-direction:column;gap:5px;align-items:center;background:none;border:0;padding:0;cursor:pointer;font-family:'Silkscreen',monospace;font-size:7px;color:#808080;transform:none;transition:transform .4s steps(4)}
.thumb.is-placeholder{color:#666}
.thumb.is-active{color:#fff}
.thumb.is-out{transform:translateY(-8px)}
.square{width:64px;height:64px;border:1px solid #555;position:relative;overflow:hidden;background:#111;transition:transform .3s steps(3)}
.thumb.is-sealed .square{border-color:#444}
.thumb.is-placeholder .square{border-color:#333}
.thumb.is-active .square{border-color:#c0c0c0}
.thumb:hover .square,.thumb:focus-visible .square{transform:translateY(-2px)}
.thumb:hover .cap,.thumb:focus-visible .cap{color:#fff}
.thumb:focus-visible{outline:1px dotted #fff;outline-offset:3px}
.art{position:absolute;inset:0;background-size:cover;background-position:center;image-rendering:pixelated;filter:grayscale(1)}
.thumb.is-active .art{filter:none}
.thumb:not(.has-art) .art{display:none}
.sealed-overlay{position:absolute;inset:0;background-color:rgba(42,42,42,.85);background-image:radial-gradient(#000 40%,transparent 42%);background-size:3px 3px}
.sealed-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.5;color:#c0c0c0}
.thumb:not(.is-sealed) .sealed-overlay,.thumb:not(.is-sealed) .sealed-text{display:none}
.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:#444}
.thumb.has-art .empty,.thumb.is-sealed .empty{display:none}
.cap{white-space:nowrap}

/* 5.3 footer */
.footer{margin-top:auto;padding:10px 20px;border-top:1px solid #333;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:9px;color:#666}
.counter{font-family:'VT323',monospace;background:#000;border:1px solid #444;padding:0 5px;color:#c0c0c0;font-size:15px;letter-spacing:.1em}

/* 6.1 the vinyl disc (page-level overlay so it can fly from the shelf to the platter) */
.disc{position:absolute;left:0;top:0;width:100px;height:100px;z-index:4;opacity:0;pointer-events:none;will-change:transform;cursor:pointer;border-radius:50%}
.disc-shadow{position:absolute;inset:0;border-radius:50%;box-shadow:0 2px 0 #000}
.vinyl{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,#000 0 2px,#262626 2px 4px);border:1px solid #777}
.disc-label{position:absolute;left:33%;top:33%;width:34%;height:34%;border-radius:50%;overflow:hidden;background:#1c1c1c;border:1px solid #888}
.disc-label img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:pixelated}
.hole{position:absolute;left:48.5%;top:48.5%;width:3%;height:3%;border-radius:50%;background:#000}
.highlight{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 205deg,transparent 0 27%,rgba(255,255,255,.14) 35%,transparent 43%,transparent 69%,rgba(255,255,255,.08) 77%,transparent 85%);pointer-events:none}
.disc-dither{position:absolute;inset:0;border-radius:50%;background-image:radial-gradient(#000 38%,transparent 40%);background-size:3px 3px;opacity:.45;pointer-events:none}

/* tonearm (page-level, pinned to the deck's pivot every draw frame; above the disc) */
.arm{position:absolute;left:0;top:0;width:4px;height:100px;z-index:5;transform-origin:50% 0;background:#a4a4a4}
.headshell{position:absolute;left:-150%;top:90%;width:400%;height:10%;background:#bdbdbd;cursor:grab;touch-action:none}
.headshell .grab{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(calc(100% + 32px),44px);height:max(calc(100% + 32px),44px)}

/* 13 owner mode: CRATE.EXE */
.crate{position:fixed;right:16px;top:16px;width:300px;z-index:9;background:#c0c0c0;border:2px solid;border-color:#fff #404040 #404040 #fff;color:#000;font-family:Verdana,Geneva,sans-serif;font-size:11px;box-shadow:4px 4px 0 #000;max-height:calc(100vh - 32px);overflow:auto}
.crate[hidden]{display:none}
.crate-title{background:#000;color:#fff;font-family:'Silkscreen',monospace;font-size:9px;padding:5px 6px;display:flex;justify-content:space-between}
.crate-body{padding:12px;display:flex;flex-direction:column;gap:10px}
.field{display:flex;flex-direction:column;gap:3px}
.field input{background:#fff;border:2px solid;border-color:#404040 #fff #fff #404040;color:#000;padding:4px 6px;outline:none}
.dropzone{display:flex;align-items:center;justify-content:center;border:2px solid;border-color:#404040 #fff #fff #404040;background:#fff;color:#404040;cursor:pointer;text-align:center;padding:6px;font-size:10px}
.dropzone-art{height:64px}
.dropzone-audio{height:48px}
.dropzone input{display:none}
.radios{display:flex;gap:6px}
.radio{flex:1;padding:4px}
.radio[aria-checked="true"]{border-color:#404040 #fff #fff #404040}
.crate-add{padding:6px;font-weight:bold}
.crate-note{font-size:9px;color:#404040;line-height:1.5}
.localbox{display:flex;flex-direction:column;gap:6px;border-top:1px solid #808080;padding-top:10px}
.localbox[hidden]{display:none}
.crate-sub{font-family:'Silkscreen',monospace;font-size:8px;color:#404040}
.local-row{display:flex;justify-content:space-between;gap:10px;align-items:center}
.local-row .bevel{padding:1px 6px;font-size:10px}

/* 404 page */
.notfound{padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.notfound p{margin:0}

/* 12 mobile */
@media (max-width:760px){
  .body{grid-template-columns:1fr;grid-template-areas:'deck' 'shelf' 'info'}
  .recnav{display:none}
  .tt,.ticker{max-width:85vw}
  .page{border-left:0;border-right:0}
  .footer{flex-direction:column;gap:8px;align-items:flex-start}
  .crate{left:8px;right:8px;width:auto}
  /* §12 required fix: every tap target ≥ 44×44 without changing the drawn size */
  .btnrow .bevel{min-height:44px}
  .deckbtn::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
}

/* 7 reduced motion: no scrolling ticker, no stepped CSS transitions; the engine skips its tweens */
@media (prefers-reduced-motion:reduce){
  .tick{animation:none;transform:none}
  .thumb,.square{transition:none}
}