/* Overclocked — HUD widgets (js/hud/widgets.js) + the shared icon wrapper (js/icons.js).
 * Class prefixes: hw- (widgets), oc-ico (icons, usable by every module).
 * Width budget: HUD column is 452px (400px ≤1100px wide); everything below must fit both.
 * Height budget (approx.): mid 112 · copies ~57 · stats ~44 · tech ~36–57 · labor ~25 → ~300px + gaps. */

/* ---------------------------------------------------------------- icons */
.oc-ico { display: inline-flex; flex: none; width: 1em; height: 1em; line-height: 0; vertical-align: -0.14em; }
.oc-ico > svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------------------------------------------------------------- shared rhythm */
.hud-mid, .hud-copies, .hud-stats, .hud-tech, .hud-labor {
  font-family: var(--mono); font-size: 11px; line-height: 14px; color: var(--ink);
  font-variant-numeric: tabular-nums; min-width: 0;
}
.hud-mid { min-height: 112px; }
.hw-sv, .hw-cp-n, .hw-cp-model, .hw-cp-speed, .hw-sq-unit, .hud-labor b { white-space: nowrap; }

/* ---------------------------------------------------------------- 1. AI capabilities */
.hud-caps { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.hw-caps-title {
  flex: none; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 9.5px; line-height: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  text-align: center; white-space: nowrap; color: var(--ink); user-select: none;
}
.hw-caps-grid {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, 30px);
  grid-auto-flow: column; gap: 5px 8px;
}
.hw-cap { display: flex; min-width: 0; height: 30px; }
.hw-cap-tile {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 5px 0 0 5px; background: var(--ink); color: #fff; font-size: 17px;
  transition: background-color .6s var(--ease);
}
.hw-cap.is-hot .hw-cap-tile { background: var(--accent); }
.hw-cap-bar {
  position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden;
  border: 1.5px solid var(--ink); border-left: 0; border-radius: 0 5px 5px 0; background: var(--bg);
}
.hw-cap-txt {
  position: absolute; inset: 0; display: flex; align-items: center; padding: 0 5px 0 8px; overflow: hidden;
  font-size: 10px; line-height: 1; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink);
}
/* accent layer revealed left→right (clip-path set per frame); its text copy is white */
.hw-cap-fill { position: absolute; inset: 0; background: var(--accent); clip-path: inset(0 100% 0 0); }
.hw-cap-fill .hw-cap-txt { color: #fff; }

/* ---------------------------------------------------------------- 2. compute donut */
.hud-donut { display: grid; place-items: center; min-width: 0; }
.hw-donut-svg { display: block; width: 112px; height: 112px; overflow: visible; }
.hw-seg { stroke: var(--bg); stroke-width: 1.5; stroke-linejoin: round; transition: opacity .2s var(--ease); }
.hw-seg.is-us { fill: var(--ink); }
.hw-seg.is-ob { fill: var(--accent); }
.hw-seg.is-cn { fill: #2a2a2a; }
.hw-seg.is-rest { fill: #bdbdb3; }
.hw-donut-svg.is-peek .hw-seg:not(:hover) { opacity: .35; }
.hw-badge { opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.hw-badge.is-on { opacity: 1; }
.hw-badge circle { fill: var(--bg); stroke: currentColor; stroke-width: 1.5; }
.hw-badge svg { stroke-width: 2.1; }
.hw-badge.is-us { color: var(--ink); }
.hw-badge.is-ob { color: var(--accent); }
.hw-badge.is-cn { color: #2a2a2a; }
.hw-dc-t1 { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; fill: var(--ink); pointer-events: none; }
.hw-dc-t2 { font-family: var(--mono); font-size: 14px; font-weight: 700; fill: var(--ink); pointer-events: none; }
.hw-donut-svg.is-peek .hw-dc-t1 { font-size: 7.5px; font-weight: 400; letter-spacing: 0; fill: var(--muted); }

/* ---------------------------------------------------------------- 3. copies + squares */
.hud-copies { display: flex; flex-direction: column; gap: 5px; }
.hw-cp-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hw-cp-n {
  flex: none; min-width: 4ch; font-size: 20px; line-height: 1; font-weight: 700; letter-spacing: -.02em;
  color: var(--accent);
}
.hw-cp-txt { min-width: 0; font-size: 11px; line-height: 14px; color: var(--ink-2); }
.hw-cp-model { color: var(--ink); }
.hw-cp-txt b { color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.hw-sqs {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 2px;
  height: 34px; /* 4 rows × (7 + 2) − 2 : reserved so the HUD never jumps */
  overflow: hidden; min-width: 0;
}
.hw-sq {
  display: block; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--accent);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.hw-sq.is-in { animation: hw-pop .42s var(--ease) backwards; }
.hw-sq.is-out { opacity: 0; transform: scale(.2); }
@keyframes hw-pop {
  0% { opacity: 0; transform: scale(0); }
  60% { opacity: 1; transform: scale(1.35); }
  100% { opacity: 1; transform: scale(1); }
}
.hw-sq-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.hw-sq-row .hw-sqs { flex: 1 1 auto; }
.hw-sq-key {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  font-size: 10px; line-height: 12px; color: var(--muted); white-space: nowrap;
}
.hw-sq-sw { display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); margin-right: 4px; vertical-align: 0; }
.hw-sq-unit { color: var(--ink); font-weight: 700; }

/* ---------------------------------------------------------------- 4. stats ticker */
.hud-stats {
  display: flex; align-items: center; padding: 6px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.hw-sg { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.hw-sglyph {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: #fff; font-size: 14px;
}
.hw-sglyph.is-ob { background: var(--accent); }
.hw-sglyph svg { stroke-width: 2; }
.hw-srule { flex: none; width: 1px; align-self: stretch; margin: 0 8px; background: var(--rule); }
.hw-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hw-slabel { font-size: 10px; line-height: 12px; color: var(--muted); white-space: nowrap; }
.hw-sval { font-size: 14px; line-height: 16px; font-weight: 700; white-space: nowrap; }
.hw-sval small { font-size: 10px; font-weight: 400; color: var(--muted); margin-left: 1px; }

/* ---------------------------------------------------------------- 5. tech tiers */
.hud-tech { display: flex; align-items: flex-start; gap: 12px; }
.hw-tg { flex: 1 1 0; } /* flex-grow is set from JS (item count); min-width:auto keeps the label whole */
.hw-tg-label {
  margin-bottom: 4px; font-size: 10px; line-height: 12px; color: var(--muted); white-space: nowrap;
  transform-origin: 0 50%;
}
.hw-tg[data-tier='emerging'] .hw-tg-label { color: var(--accent); }
.hw-tg-items { display: flex; flex-wrap: wrap; gap: 3px; min-height: 18px; }
.hw-tg.is-empty .hw-tg-items::before { content: '—'; font-size: 11px; line-height: 18px; color: var(--rule); }
.hw-ti {
  flex: none; width: 18px; height: 18px; display: grid; place-items: center; cursor: default;
  border: 1.2px solid var(--ink); border-radius: 4px; background: var(--ink); color: #fff; font-size: 12px;
}
.hw-ti[data-tier='emerging'] { background: var(--accent); border-color: var(--accent); }
.hw-ti[data-tier='scifi'] { background: var(--bg); color: var(--ink); }
.hw-ti svg { stroke-width: 2.1; }
.hw-ti:hover { outline: 1.5px solid var(--accent); outline-offset: 1px; }

/* ---------------------------------------------------------------- 6. labor (AI 2040) */
.hud-labor { display: flex; flex-direction: column; gap: 5px; }
.hw-dots { display: flex; justify-content: space-between; gap: 2px; }
.hw-dot {
  position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.1px var(--ink);
}
.hw-dot > i {
  position: absolute; inset: 0; border-radius: 50%; background: var(--accent);
  transform: scale(0); will-change: transform;
}
.hw-dot.is-full { box-shadow: inset 0 0 0 1.1px var(--accent); }
.hw-lcaps { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; font-size: 10px; line-height: 13px; color: var(--ink-2); }
.hw-lcap { white-space: nowrap; }
.hw-lcap b { color: var(--ink); font-size: 11px; font-weight: 700; }
.hw-lcap-ai { margin-left: auto; }
.hw-lsw {
  display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; vertical-align: 0;
  box-shadow: inset 0 0 0 1.1px var(--ink);
}
.hw-lsw.is-ai { background: var(--accent); box-shadow: none; }

/* ---------------------------------------------------------------- narrow HUD (400px column) */
@media (max-width: 1100px) {
  .hw-cap-txt { letter-spacing: .03em; padding-left: 6px; }
  .hw-cap-tile { font-size: 16px; }
  .hw-cp-n { font-size: 18px; }
  .hw-sg { gap: 5px; }
  .hw-sglyph { width: 20px; height: 20px; font-size: 12px; }
  .hw-srule { margin: 0 6px; }
  .hw-slabel { font-size: 9px; line-height: 11px; }
  .hw-sval { font-size: 13px; line-height: 15px; }
  .hw-sval small { font-size: 9px; }
  .hud-tech { gap: 10px; }
  .hw-tg-label { font-size: 9px; line-height: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-sq.is-in { animation: none; }
}