/* AI Bacon — Local AI Hardware page. Builds on css/models.css + shared theme tokens. */

/* ── headline callouts ── */
.hw-callouts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3); margin: var(--space-5) 0 var(--space-5);
}
.hw-callout {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-left: 4px solid var(--console-green);
  background: var(--card-bg); border-radius: 6px;
}
.hw-callout:nth-child(2) { border-left-color: var(--copper); }
.hw-callout:nth-child(3) { border-left-color: var(--navy-light); }
.hw-callout__kicker {
  font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.hw-callout__name { font-weight: 700; font-size: var(--text-lg); color: var(--navy); }
.hw-callout__sub { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.4; }

/* ── "how many cards" (your setup) control ── */
.hw-stack {
  border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg);
  padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.hw-stack__label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.hw-stack__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hw-stack__text { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text); }
.hw-count { display: inline-flex; align-items: center; gap: 3px; }
.hw-count__btn {
  cursor: pointer; width: 26px; height: 28px; border: 1px solid var(--border);
  background: var(--bg); border-radius: 5px; font-weight: 700; color: var(--navy);
  line-height: 1; font-size: 1rem;
}
.hw-count__btn:hover { border-color: var(--navy-light); }
.hw-count__in {
  width: 52px; height: 28px; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; font-weight: 700;
  color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
}
.hw-count__in:focus { outline: none; border-color: var(--copper); }
.hw-stack__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: 3px 8px; margin-left: 2px;
}
.hw-stack__clear:hover { color: var(--copper); border-color: var(--copper); }
.hw-stack__note {
  font-size: var(--text-xs); color: var(--text-muted); line-height: 1.45; margin: 0;
}
.hw-stack__note strong { color: var(--copper); }

/* ×N chip shown in the Memory cell for a stacked rig */
.hw-mult {
  font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; font-weight: 700;
  color: var(--text-muted); background: rgba(27, 58, 92, 0.07);
  border-radius: 3px; padding: 1px 4px; margin-left: 4px; letter-spacing: .02em;
}

/* ── sort note ── */
.hw-sortnote {
  font-family: 'JetBrains Mono', monospace; font-size: var(--text-xs);
  color: var(--text-muted); margin: 0 0 var(--space-4);
}
.hw-sortnote strong { color: var(--copper); }

/* ── table specifics ── */
.hw-table { white-space: nowrap; }
.hw-table .col-device { white-space: normal; min-width: 260px; }
.hw-table td.hw-num { text-align: right; font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', monospace; color: var(--text); }
.hw-table td.rank { color: var(--text-muted); }
.hw-unit { color: var(--text-muted); font-weight: 400; }

/* device cell: brand chip + name + meta + note */
.hw-device { display: flex; gap: var(--space-3); align-items: flex-start; }
.hw-chip {
  flex: none; width: 30px; height: 30px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700;
  color: #fff; letter-spacing: .02em; margin-top: 2px;
}
.hw-chip--nv    { background: #76b900; }
.hw-chip--amd   { background: #d0202f; }
.hw-chip--apple { background: #555; }
.hw-chip--intel { background: #0071c5; }
.hw-chip--tt    { background: #7c3aed; }
.hw-chip--gen   { background: var(--navy-light); }
.hw-device__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hw-device__name { font-weight: 700; color: var(--text); font-size: var(--text-sm); }
.hw-device__name a { color: var(--navy); text-decoration: none; }
.hw-device__name a:hover { color: var(--copper); text-decoration: underline; }
.hw-device__meta {
  font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .03em;
}
.hw-device__note { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.4; white-space: normal; max-width: 46ch; margin-top: 2px; }

/* ── the proportional bar (chart behaviour on the active sort column) ── */
.hw-table td.hw-barcell { position: relative; min-width: 132px; }
.hw-bar {
  display: block; height: 7px; border-radius: 4px; margin-bottom: 3px;
  background: rgba(27, 58, 92, 0.08); overflow: hidden;
}
.hw-bar__fill {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--navy-light), var(--copper));
}
.hw-bar--lower .hw-bar__fill { background: linear-gradient(90deg, #9aa6b2, var(--navy-light)); }
.hw-bar__val { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.hw-table thead th.num, .hw-table thead th.sortable { text-align: right; }
.hw-table thead th.col-device { text-align: left; }

/* ── fit badge next to est. tok/s ── */
.hw-fit {
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; border-radius: 3px;
  padding: 1px 4px; margin-left: 5px; vertical-align: middle;
}
.hw-fit--ok    { color: #1a7f4b; background: rgba(74, 222, 128, 0.16); }
.hw-fit--tight { color: #a15c00; background: rgba(224, 158, 0, 0.16); }
.hw-fit--no    { color: #a12a2a; background: rgba(200, 60, 60, 0.14); }

/* ── price note (used / leaked / est / system) ── */
.hw-pnote {
  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; margin-left: 4px; vertical-align: middle;
}

.models-vram-note code { font-size: 0.9em; background: rgba(27,58,92,0.06); padding: 1px 5px; border-radius: 4px; }

@media (max-width: 700px) {
  .hw-device__note { display: none; }
  .hw-callout__name { font-size: var(--text-base); }
}