/* AI Bacon — Self-host equivalents page. Builds on css/models.css + css/hardware.css tokens. */

/* ── "your rig" selector ── */
.sh-rig {
  border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg);
  padding: var(--space-3) var(--space-4); margin: var(--space-5) 0;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.sh-rig__label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.sh-rig__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.sh-gpus { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sh-gpu {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 600;
  color: var(--text); background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 9px; transition: all .12s var(--ease-out, ease-out);
}
.sh-gpu:hover { border-color: var(--navy-light); }
.sh-gpu.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.sh-gpu__v { font-size: 0.62rem; opacity: .7; font-weight: 700; }
.sh-gpu.active .sh-gpu__v { opacity: .85; }
.sh-gpu--mac.active { background: #555; border-color: #555; }

/* Labelled control groups in the settings row. "Cards" was previously a bare stepper
   wedged between the GPU chips and the search box, where it read as a stray widget
   despite being the multiplier on your total VRAM. */
/* Wraps, and may shrink below its content width. Grouping the label with its control
   otherwise turns the pair into one unbreakable flex item — on a narrow phone the 7-button
   quant selector plus its label would then be forced to overflow rather than stack. */
.sh-field { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.sh-field .sh-quant { flex-wrap: wrap; }
.sh-field__label { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--text-muted); font-weight: 700; }
.sh-field--count {
  padding: 3px var(--space-3) 3px var(--space-2); border: 1px solid var(--border);
  border-radius: 8px; background: var(--card-bg);
}
.sh-field--count .sh-field__label { color: var(--navy); }

.sh-count { display: inline-flex; align-items: center; gap: 3px; }
.sh-count__btn {
  cursor: pointer; width: 24px; height: 26px; border: 1px solid var(--border);
  background: var(--bg); border-radius: 5px; font-weight: 700; color: var(--navy); line-height: 1;
}
.sh-count__btn:hover { border-color: var(--navy-light); }
.sh-count__x { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); }
.sh-count__in {
  width: 46px; height: 26px; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 0.76rem; font-weight: 700;
  color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 5px;
}
.sh-count__in:focus { outline: none; border-color: var(--copper); }

.sh-more, .sh-custom input {
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px;
}
.sh-more { width: 200px; max-width: 100%; }
.sh-more:focus { outline: none; border-color: var(--copper); }
.sh-more::placeholder { color: var(--text-muted); opacity: .8; }
.sh-custom { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.sh-custom input { width: 68px; }

.sh-rig__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px dashed var(--border); }
.sh-quant__label { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--text-muted); font-weight: 700; }
.sh-quant { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.sh-q {
  cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 600;
  color: var(--text); background: var(--bg); border: none; border-right: 1px solid var(--border);
  padding: 5px 10px; transition: all .12s;
}
.sh-q:last-child { border-right: none; }
.sh-q:hover { background: var(--card-bg); }
.sh-q.active { background: var(--copper); color: #fff; }
.sh-q--lossy { color: #a15c00; }
.sh-q--lossy.active { background: #a15c00; color: #fff; }

.sh-rig__total { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text); }
.sh-rig__total strong { color: var(--copper); }
.sh-rig__mult { color: var(--text-muted); }
.sh-rig__hint { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--text-muted); font-style: italic; }
.sh-rig__clear { cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; color: var(--text-muted); background: none; border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; margin-left: 4px; }
.sh-rig__clear:hover { color: var(--copper); border-color: var(--copper); }

/* ── the "Runs on" cell: active quant + fit + quant-ladder pills ── */
.sh-runscell { text-align: left !important; vertical-align: middle; }
.sh-runs { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.sh-runs__main { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sh-runs__q { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; color: var(--text-muted); font-weight: 700; }
.sh-runs__gb { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sh-fit--offload { color: #a12a2a !important; background: rgba(224, 120, 60, 0.16) !important; }

.sh-pills { display: inline-flex; gap: 3px; }
.sh-pill {
  font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; font-weight: 700;
  border-radius: 3px; padding: 1px 4px; color: var(--text-muted);
  background: rgba(27, 58, 92, 0.06); border: 1px solid transparent; cursor: default;
}
.sh-pill--ok    { color: #1a7f4b; background: rgba(74, 222, 128, 0.16); }
.sh-pill--tight { color: #a15c00; background: rgba(224, 158, 0, 0.16); }
.sh-pill--no    { color: var(--text-muted); background: rgba(27, 58, 92, 0.05); opacity: .55; }
.sh-pill--varies { opacity: .4; }
.sh-pill--on { border-color: var(--copper); box-shadow: 0 0 0 1px var(--copper); }

/* ── the ≈ closest-paid cell ── */
.sh-table .col-match { white-space: normal; min-width: 190px; }
.sh-match { display: flex; flex-direction: column; gap: 3px; }
.sh-match__names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.sh-match__name { font-weight: 700; color: var(--navy); font-size: var(--text-sm); }
.sh-match__sep { color: var(--border); font-weight: 400; }
.sh-match__meta {
  display: flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text-muted);
}
.sh-match__score { font-weight: 700; color: var(--text); }

/* gap chip: how the open model sits vs its nearest paid model */
.sh-gap {
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; border-radius: 3px; padding: 1px 5px;
}
.sh-gap--even { color: #1a7f4b; background: rgba(74, 222, 128, 0.16); }
.sh-gap--up   { color: #1a7f4b; background: rgba(74, 222, 128, 0.22); }
.sh-gap--down { color: #a15c00; background: rgba(224, 158, 0, 0.16); }

.sh-score { font-weight: 700; font-variant-numeric: tabular-nums; }

/* specialty line under the open-model name */
.sh-spec {
  font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; color: var(--copper);
  letter-spacing: .01em; margin-top: 1px;
}
.sh-spec--none { color: var(--text-muted); opacity: .7; }

/* fit badge (reuses hw-fit colours, but sits as its own line under the GB number) */
.sh-table .hw-fit { display: inline-block; margin-left: 6px; }
.sh-pnote {
  display: inline-block; margin-left: 5px; font-family: 'JetBrains Mono', monospace;
  font-size: 0.56rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; vertical-align: middle;
}

.sh-table td.col-match, .sh-table th.col-match { text-align: left; }
.sh-table .col-device { min-width: 250px; }

/* ── per-capability reality check ── */
.sh-caps { margin-top: var(--space-8); }
.sh-caps__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4); margin-top: var(--space-4);
}
.sh-cap {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card-bg); padding: var(--space-3) var(--space-4);
}
.sh-cap__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-2); }
.sh-cap__name { font-weight: 700; color: var(--navy); font-size: var(--text-base); }
.sh-cap__gap {
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; border-radius: 3px; padding: 1px 6px;
}
.sh-cap__gap--even  { color: #1a7f4b; background: rgba(74, 222, 128, 0.18); }
.sh-cap__gap--ok    { color: #1a7f4b; background: rgba(74, 222, 128, 0.12); }
.sh-cap__gap--tight { color: #a15c00; background: rgba(224, 158, 0, 0.16); }
.sh-cap__gap--no    { color: #a12a2a; background: rgba(200, 60, 60, 0.14); }
/* Capabilities with no open-weight score yet: stated plainly, not silently dropped. */
.sh-pending-note { display: block; margin-top: var(--space-2); color: var(--text-muted); font-size: var(--text-sm); }

.sh-cap__bars { display: flex; flex-direction: column; gap: 6px; }
.sh-cap__row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; }
.sh-cap__tag {
  font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; text-align: center; border-radius: 3px; padding: 1px 0;
}
.sh-cap__tag--closed { color: var(--navy); background: rgba(27, 58, 92, 0.1); }
.sh-cap__tag--open   { color: #1a7f4b; background: rgba(74, 222, 128, 0.18); }
.sh-cap__track { height: 9px; border-radius: 5px; background: rgba(27, 58, 92, 0.07); overflow: hidden; }
.sh-cap__fill {
  display: block; height: 100%; border-radius: 5px;
  animation: sh-grow 0.9s var(--ease-out, ease-out) both;
}
.sh-cap__fill--closed { background: linear-gradient(90deg, var(--navy-light), var(--navy)); }
.sh-cap__fill--open   { background: linear-gradient(90deg, #4ade80, #1a7f4b); }
.sh-cap__val {
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700;
  color: var(--text); white-space: nowrap;
}
.sh-cap__model { font-weight: 400; color: var(--text-muted); font-size: 0.66rem; }

@keyframes sh-grow { from { width: 0 !important; } }

@media (prefers-reduced-motion: reduce) {
  .sh-cap__fill { animation: none; }
}

@media (max-width: 700px) {
  .sh-spec { display: none; }
  .sh-cap__val .sh-cap__model { display: none; }
}

/* Parameter count + MoE marker in the model cell. */
.sh-params { font-family: 'JetBrains Mono', monospace; color: var(--text-muted); }
.sh-moe {
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700;
  color: var(--navy); background: rgba(58,111,168,.12); border-radius: 4px;
  padding: 1px 5px; margin-left: 3px; white-space: nowrap;
}