/* Benchmark — Chris Lema Design System (gold/chrislema theme).
   Translated from the Benchmark.dc.html hifi prototype. */

@font-face { font-family:"Big Shoulders Display"; src:url("./fonts/BigShoulders-Regular.ttf")  format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Big Shoulders Display"; src:url("./fonts/BigShoulders-Medium.ttf")   format("truetype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Big Shoulders Display"; src:url("./fonts/BigShoulders-SemiBold.ttf") format("truetype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Big Shoulders Display"; src:url("./fonts/BigShoulders-Bold.ttf")     format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Big Shoulders Display"; src:url("./fonts/BigShoulders-ExtraBold.ttf")format("truetype"); font-weight:800; font-display:swap; }
@font-face { font-family:"Big Shoulders Display"; src:url("./fonts/BigShoulders-Black.ttf")    format("truetype"); font-weight:900; font-display:swap; }

:root {
  --font-display:"Big Shoulders Display","Oswald","Arial Narrow",sans-serif;
  --font-body:"Epilogue","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --brand:#fcb040; --brand-light:#ffc66b; --brand-dark:#d8901f;
  --brand-glow:rgba(252,176,64,0.1); --brand-glow-md:rgba(252,176,64,0.18); --brand-glow-strong:rgba(252,176,64,0.28);
  --ink:#111118; --ink-soft:#3a3a4a; --ink-muted:#6e6e80;
  --surface:#fafafa; --white:#ffffff; --surface-dim:#f2f1f6; --surface-border:#e4e2ec;
  --radius-lg:14px; --radius-md:10px; --radius-sm:8px;
  --shadow-card-hover:0 12px 36px rgba(0,0,0,0.05);
  --ease-out-soft:cubic-bezier(0.23,1,0.32,1);
}

* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body {
  background:var(--surface); color:var(--ink-soft); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
::selection { background:var(--brand-glow-strong); color:var(--ink); }
button { font-family:inherit; }
textarea::placeholder { color:var(--ink-muted); opacity:.75; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:var(--surface-border); border-radius:100px; border:2px solid var(--surface); }
*::-webkit-scrollbar-thumb:hover { background:#d2d0dc; }

@keyframes wb-pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(.7); } }
@keyframes wb-fade  { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ---- shell ---- */
.app { height:100vh; height:100dvh; width:100%; display:flex; flex-direction:column; overflow:hidden; background:var(--surface); }

/* Mobile-only chrome — hidden on desktop, shown in the breakpoint below. */
.mobile-tabs, .mobile-runbar { display:none; }

.header {
  flex:0 0 56px; display:flex; align-items:center; justify-content:space-between; padding:0 22px;
  background:rgba(250,250,250,0.9); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--surface-border); position:relative; z-index:20;
}
.brand-wrap { display:flex; align-items:baseline; gap:13px; }
.wordmark { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:21px; letter-spacing:0.01em; color:var(--ink); line-height:1; }
.wordmark span { color:var(--brand); }
.brand-tag { font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-muted); }
.header-count { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-muted); }

.body-row { flex:1 1 auto; display:flex; min-height:0; }

/* ---- left rail ---- */
.rail { flex:0 0 320px; width:320px; border-right:1px solid var(--surface-border); background:var(--white); display:flex; flex-direction:column; min-height:0; }
.rail-scroll { flex:1 1 auto; overflow-y:auto; padding:22px; }
.rail-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
.rail-eyebrow { font-size:11.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.rail-actions { display:flex; gap:14px; }
.text-btn { background:none; border:0; cursor:pointer; font-size:10.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-muted); padding:0; transition:color .15s ease; }
.text-btn:hover { color:var(--brand-dark); }

.model-list { display:flex; flex-direction:column; gap:7px; }
.model-row {
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px; cursor:pointer;
  border:1px solid var(--surface-border); background:var(--white); transition:all .15s ease;
}
.model-row:hover { border-color:var(--brand-glow-strong); }
.model-row.on { border-color:var(--brand); background:var(--brand-glow); }
.model-row.disabled { opacity:.5; cursor:not-allowed; }
.checkbox {
  flex:0 0 auto; width:18px; height:18px; border-radius:5px; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; line-height:1; border:1.5px solid var(--surface-border); background:var(--white); color:transparent;
}
.model-row.on .checkbox { border-color:var(--brand); background:var(--brand); color:#fff; }
.model-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
.model-name { font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.25; }
.model-vendor { font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-muted); }

.rail-foot { flex:0 0 auto; border-top:1px solid var(--surface-border); padding:16px 22px; background:var(--surface); }
.run-btn { width:100%; font-size:15px; font-weight:600; padding:14px; border:0; border-radius:10px; transition:all .2s ease; line-height:1; background:var(--brand); color:#fff; cursor:pointer; }
.run-btn:hover:not(:disabled) { background:var(--brand-dark); }
.run-btn:disabled { background:var(--surface-dim); color:var(--ink-muted); cursor:not-allowed; }
.run-meta { text-align:center; margin-top:10px; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-muted); }

/* ---- main ---- */
.main { flex:1 1 auto; display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--surface); }
.toolbar {
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 22px;
  border-bottom:1px solid var(--surface-border); background:rgba(250,250,250,0.85);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); min-height:54px;
}
.toolbar-left { display:flex; align-items:center; gap:22px; min-width:0; }
.tabs { display:flex; align-items:stretch; gap:20px; height:54px; }
.tab {
  font-family:var(--font-display); text-transform:uppercase; font-weight:700; font-size:18px; letter-spacing:0.01em;
  line-height:1; background:none; border:0; border-bottom:2px solid transparent; padding:0 1px; margin-bottom:-1px;
  cursor:pointer; color:var(--ink-muted); transition:all .15s ease; align-self:center;
}
.tab.active { border-bottom-color:var(--brand); color:var(--ink); }
.status-line { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.toolbar-right { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.diff-btn { font-size:12px; font-weight:600; padding:7px 13px; border-radius:8px; cursor:pointer; transition:all .15s ease; white-space:nowrap; border:1px solid var(--surface-border); background:var(--white); color:var(--ink-soft); }
.diff-btn.on { border-color:var(--brand); background:var(--brand-glow); color:var(--brand-dark); }
.diff-swatch { display:inline-block; width:8px; height:8px; border-radius:2px; background:var(--brand); margin-right:7px; vertical-align:middle; }
.sort-label { font-size:10.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-muted); }
.seg-control { display:flex; border:1px solid var(--surface-border); border-radius:8px; overflow:hidden; background:var(--white); }
.seg-btn { font-size:12px; font-weight:600; padding:7px 14px; border:0; cursor:pointer; transition:all .15s ease; background:transparent; color:var(--ink-muted); }
.seg-btn.on { background:var(--brand); color:#fff; }

.content { flex:1 1 auto; overflow:auto; padding:24px 26px; }

/* ---- setup ---- */
.setup { max-width:800px; margin:0 auto; animation:wb-fade .3s var(--ease-out-soft); }
.field { margin-bottom:26px; }
.field:last-child { margin-bottom:0; }
.eyebrow { display:block; font-size:11.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); margin-bottom:5px; }
.helper { font-size:12.5px; color:var(--ink-muted); margin:0 0 10px; line-height:1.5; }
textarea.input {
  width:100%; resize:vertical; font-family:var(--font-body); font-size:14px; line-height:1.6; color:var(--ink);
  background:var(--white); border:1px solid var(--surface-border); border-radius:12px; padding:14px 16px; outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
textarea.input:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-glow); }
.system-input { min-height:96px; }
.user-input { min-height:200px; }

.reffiles { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.reffile { display:flex; align-items:center; gap:12px; padding:11px 14px; background:var(--white); border:1px solid var(--surface-border); border-radius:10px; }
.reffile-ext { flex:0 0 auto; font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:0.05em; color:var(--brand); background:var(--brand-glow); border-radius:5px; padding:5px 7px; text-transform:uppercase; }
.reffile-text { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.reffile-name { font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reffile-meta { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-muted); }
.reffile-x { flex:0 0 auto; background:none; border:0; cursor:pointer; font-size:19px; line-height:1; color:var(--ink-muted); padding:2px 4px; transition:color .15s ease; }
.reffile-x:hover { color:var(--brand-dark); }
.add-files { width:100%; font-size:13.5px; font-weight:600; background:transparent; color:var(--ink-soft); border:1.5px dashed var(--surface-border); border-radius:12px; padding:16px; cursor:pointer; transition:all .15s ease; }
.add-files:hover { border-color:var(--brand); color:var(--brand-dark); }

/* ---- results ---- */
.results-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; align-items:start; }
.card { background:var(--white); border:1px solid var(--surface-border); border-radius:14px; display:flex; flex-direction:column; overflow:hidden; min-width:0; transition:box-shadow .25s ease; }
.card:hover { box-shadow:var(--shadow-card-hover); }
.card-head { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 15px; border-bottom:1px solid var(--surface-border); }
.card-head-left { display:flex; align-items:center; gap:9px; min-width:0; }
.dot { flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--ink-muted); }
.dot.done { background:var(--brand); }
.dot.error { background:#b4452f; }
.dot.running { background:var(--brand); animation:wb-pulse 1s infinite ease-in-out; }
.card-name { font-size:13.5px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-vendor { font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-muted); }
.fastest-pill { flex:0 0 auto; font-size:9px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand-dark); background:var(--brand-glow); border:1px solid var(--brand-glow-md); padding:3px 8px; border-radius:100px; white-space:nowrap; }
.card-body { flex:1 1 auto; padding:15px; max-height:380px; overflow:auto; }
.generating { display:flex; align-items:center; gap:9px; color:var(--ink-muted); font-size:13px; }
.generating-dot { width:9px; height:9px; border-radius:50%; background:var(--brand); animation:wb-pulse 1s infinite ease-in-out; }
.card-error { color:#b4452f; font-size:13px; }
.output { font-size:13.5px; line-height:1.62; color:var(--ink-soft); white-space:pre-wrap; word-break:break-word; animation:wb-fade .4s var(--ease-out-soft); }
.seg.divergent { background:var(--brand-glow-strong); border-radius:3px; box-shadow:0 0 0 2px var(--brand-glow-strong); }
.card-foot { flex:0 0 auto; display:flex; align-items:center; gap:13px; padding:10px 15px; border-top:1px solid var(--surface-border); background:var(--surface); font-family:var(--font-mono); font-size:10.5px; color:var(--ink-muted); }
.card-foot .sep { opacity:.35; }

/* ---- empty state ---- */
.empty { height:100%; min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; }
.empty-head { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(34px,4vw,46px); line-height:0.95; letter-spacing:-0.01em; color:var(--ink); max-width:16ch; }
.empty-head span { color:var(--brand); }
.empty-sub { max-width:420px; font-size:14px; line-height:1.65; margin:0; color:var(--ink-muted); }
.empty-sub strong { color:var(--ink-soft); }
.empty-btn { margin-top:6px; font-size:13.5px; font-weight:600; background:var(--brand); color:#fff; border:0; border-radius:10px; padding:12px 24px; cursor:pointer; transition:all .2s ease; }
.empty-btn:hover { background:var(--brand-dark); transform:translateY(-2px); }

.hidden { display:none !important; }

/* ====================================================================
   Mobile — three panels (Models / Setup / Results) via top tabs, with a
   persistent bottom Run bar. The .app carries a mv-models|mv-setup|mv-results
   class that decides which region shows. Desktop ignores these classes.
   ==================================================================== */
@media (max-width: 860px) {
  /* header trims to wordmark + count */
  .brand-tag { display:none; }
  .header { padding:0 16px; }

  /* show the mobile chrome */
  .mobile-tabs { display:flex; flex:0 0 auto; border-bottom:1px solid var(--surface-border); background:var(--white); }
  .m-tab {
    flex:1; background:none; border:0; border-bottom:2px solid transparent; padding:13px 0;
    font-family:var(--font-display); text-transform:uppercase; font-weight:700; font-size:15px; letter-spacing:0.03em;
    color:var(--ink-muted); cursor:pointer; transition:color .15s ease, border-color .15s ease;
  }
  .m-tab.active { color:var(--ink); border-bottom-color:var(--brand); }

  .mobile-runbar { display:flex; flex:0 0 auto; flex-direction:column; gap:8px; padding:12px 16px; border-top:1px solid var(--surface-border); background:var(--white); }

  /* full-width single column; one region at a time */
  .rail { flex:1 1 auto; width:auto; border-right:0; }
  .rail-foot { display:none; }        /* run moves to the bottom bar */
  .rail, .main { display:none; }
  .app.mv-models .rail { display:flex; }
  .app.mv-setup .main, .app.mv-results .main { display:flex; }

  /* the desktop Setup/Results tabs are replaced by the mobile tab bar */
  .tabs { display:none; }
  .toolbar { display:none; }
  .app.mv-results .toolbar { display:flex; flex-wrap:wrap; min-height:auto; padding:10px 16px; gap:10px; }
  .toolbar-left { gap:0; }
  .toolbar-right { flex-wrap:wrap; }

  .content { padding:16px; }
  .setup { max-width:none; }
  .results-grid { grid-template-columns:1fr; }
}