/* DriveDeck — tuned for the Tesla center screen (1200x774 usable, ~1.2x DPR).
   Design rules: nothing smaller than 44px tap target, nothing smaller than 16px text,
   pure black background (OLED + night driving), no hover-only affordances. */

:root{
  --bg:#000;
  --panel:#0e1113;
  --panel-2:#161a1e;
  --line:#23292f;
  --fg:#f2f5f7;
  --fg-dim:#9aa4ad;
  --accent:#4bb8ff;
  --accent-2:#ff8a3d;
  --danger:#ff5b4b;
  --r:14px;
  --tap:56px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:500 17px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow:hidden;user-select:none;-webkit-user-select:none;
  overscroll-behavior:none;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none !important}

/* ---------- boot gate ---------- */
.boot{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:var(--bg);z-index:100}
.boot-logo{font-size:44px;font-weight:800;letter-spacing:.14em}
.boot-logo span{color:var(--accent)}
.boot-btn{min-width:280px;min-height:72px;border:0;border-radius:var(--r);background:var(--accent);color:#00131f;font-size:22px;font-weight:800;letter-spacing:.04em}
.boot-btn:active{transform:scale(.98)}
.boot-note{color:var(--fg-dim);font-size:15px;max-width:420px;text-align:center;margin:0}

/* ---------- shell ---------- */
.app{position:fixed;inset:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:16px;padding:10px 16px;border-bottom:1px solid var(--line);background:#05070800}
.brand{font-weight:800;letter-spacing:.12em;font-size:18px;flex:0 0 auto}
.brand span{color:var(--accent)}
.tabs{display:flex;gap:6px;flex:1 1 auto;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{min-height:var(--tap);padding:0 18px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);white-space:nowrap;font-weight:600}
.tab.is-active{background:var(--accent);color:#00131f;border-color:var(--accent)}
.status{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.clock{font-variant-numeric:tabular-nums;font-size:22px;font-weight:700}
.weather{display:flex;align-items:center;gap:6px;color:var(--fg-dim)}
.wx-icon{font-size:20px}

/* ---------- views ---------- */
.views{flex:1 1 auto;position:relative;overflow:hidden}
.view{position:absolute;inset:0;padding:16px 16px 24px;overflow-y:auto;-webkit-overflow-scrolling:touch;display:none}
.view.is-active{display:block}
.section-title{font-size:15px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-dim);margin:22px 0 10px}
.empty{color:var(--fg-dim);margin:6px 2px;font-size:16px}
.hint{color:var(--fg-dim);font-size:15px;margin:8px 2px}
.count{color:var(--fg-dim);font-size:15px;align-self:center}

.hero{display:flex;align-items:baseline;gap:20px;padding:8px 4px 4px}
.hero-clock{font-size:64px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.hero-wx{color:var(--fg-dim);font-size:19px}

/* ---------- controls ---------- */
.toolbar{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.field{flex:1 1 260px;min-height:var(--tap);padding:0 16px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);outline:0}
.field:focus{border-color:var(--accent)}
.field-sm{flex:0 0 200px}
select.field{padding-right:10px}
.btn{min-height:var(--tap);padding:0 22px;border:1px solid var(--line);background:var(--panel-2);border-radius:var(--r);font-weight:600;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:#00131f;border-color:var(--accent)}
.btn-danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn-file{cursor:pointer}
.check{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);color:var(--fg-dim)}
.check input{width:24px;height:24px}

/* ---------- grids and lists ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-align:left;padding:0;display:flex;flex-direction:column;min-height:132px}
.card:active{border-color:var(--accent)}
.card-art{aspect-ratio:16/9;background:#0a0d10 center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--fg-dim)}
.card-body{padding:10px 12px}
.card-title{font-weight:600;font-size:16px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-sub{color:var(--fg-dim);font-size:14px;margin-top:3px}
.card-bar{height:4px;background:var(--line)}
.card-bar > i{display:block;height:100%;background:var(--accent)}

.rail{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail .card{flex:0 0 240px}

.list{display:flex;flex-direction:column;gap:8px}
.row-item{display:flex;align-items:center;gap:14px;min-height:64px;padding:8px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);text-align:left;width:100%}
.row-item:active{border-color:var(--accent)}
.row-logo{width:48px;height:48px;flex:0 0 auto;border-radius:8px;background:#0a0d10 center/contain no-repeat;display:flex;align-items:center;justify-content:center;color:var(--fg-dim);font-size:13px}
.row-main{flex:1 1 auto;min-width:0}
.row-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-sub{color:var(--fg-dim);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-fav{flex:0 0 auto;width:48px;height:48px;border:0;background:transparent;font-size:22px;color:var(--fg-dim)}
.row-fav.on{color:var(--accent-2)}

/* ---------- settings ---------- */
.settings{max-width:720px;display:flex;flex-direction:column;gap:12px}
.settings .row{display:flex;align-items:center;gap:16px;justify-content:space-between;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 16px}
.settings .row > span{color:var(--fg-dim)}

/* ---------- player overlay ---------- */
.overlay{position:fixed;inset:0;background:#000;z-index:50}
.video,.video-canvas,.ytframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;object-fit:contain}
.video-canvas{pointer-events:none}
.ov-renderer{flex:0 0 auto;font-size:15px;padding:0 12px}
.ov-renderer[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.overlay-ui{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 62%,rgba(0,0,0,.78));
  opacity:1;transition:opacity .25s}
.overlay-ui.hidden-ui{opacity:0;pointer-events:none}
.ov-top{display:flex;align-items:center;gap:14px;padding:14px 16px}
.ov-title{flex:1 1 auto;font-weight:700;font-size:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 3px #000}
.ov-heading{flex:1 1 auto;min-width:0}
.ov-render-status{font-size:14px;color:#dfe6ec;font-variant-numeric:tabular-nums;margin-top:3px}
.ov-btn{min-width:var(--tap);min-height:var(--tap);border:1px solid rgba(255,255,255,.18);background:rgba(10,12,14,.55);border-radius:var(--r);font-size:20px}
.ov-close{font-size:22px}
.ov-center{display:flex;align-items:center;justify-content:center;gap:28px}
.ov-big{min-width:88px;min-height:88px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(10,12,14,.55);font-size:20px;font-weight:700}
.ov-play{min-width:104px;min-height:104px;font-size:34px}
.ov-bottom{display:flex;align-items:center;gap:12px;padding:14px 16px}
.ov-time{font-variant-numeric:tabular-nums;color:#dfe6ec;font-size:16px;min-width:56px;text-align:center}
.ov-seek{flex:1 1 auto}
.ov-vol{flex:0 0 130px}
input[type=range]{-webkit-appearance:none;appearance:none;height:44px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:rgba(255,255,255,.28)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:var(--accent);border:0}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.28)}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:var(--accent)}
.ov-qual{min-height:var(--tap);border-radius:var(--r);background:rgba(10,12,14,.75);border:1px solid rgba(255,255,255,.18);padding:0 10px}
.ov-toast{position:absolute;left:50%;top:18%;transform:translateX(-50%);background:rgba(0,0,0,.8);border:1px solid var(--line);padding:12px 20px;border-radius:var(--r)}

/* ---------- diagnostics readout ---------- */
.diag{background:#07090b;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  font:500 15px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#c8d2da;white-space:pre-wrap;
  overflow-x:auto;margin:0;user-select:text;-webkit-user-select:text}

/* ---------- segmented control ---------- */
.segmented{display:inline-flex;gap:4px;padding:4px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);margin-bottom:14px}
.seg{min-height:48px;padding:0 20px;border:0;background:transparent;border-radius:10px;font-weight:600;color:var(--fg-dim)}
.seg.is-active{background:var(--accent);color:#00131f}

/* ---------- disclosure + load-more ---------- */
.disclose{margin:14px 0 4px}
.disclose > summary{min-height:var(--tap);display:flex;align-items:center;padding:0 4px;color:var(--fg-dim);cursor:pointer;list-style:none}
.disclose > summary::-webkit-details-marker{display:none}
.disclose > summary::before{content:'▸';margin-right:10px;transition:transform .15s}
.disclose[open] > summary::before{transform:rotate(90deg)}
.more{display:flex;justify-content:center;padding:14px 0 4px}

/* Duration badge on a result card. */
.card-art{position:relative}
.badge{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.82);border-radius:6px;
  padding:2px 7px;font-size:13px;font-variant-numeric:tabular-nums;color:#e8eef3}

/* ---------- game host ----------
   The close bar floats over the game rather than stealing layout height, so
   games get the whole screen and still have one obvious way out. */
.gameframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.game-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:12px 16px;
  background:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,0));pointer-events:none}
.game-bar > *{pointer-events:auto}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:200;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 22px;max-width:80vw;box-shadow:0 8px 30px rgba(0,0,0,.6)}

/* ---------- narrow / portrait (Model 3 & Y are landscape, but S/X vertical screens exist) ---------- */
@media (max-width:900px){
  .hero-clock{font-size:48px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .tabs .tab{padding:0 14px}
}