/* ============================================================
 * Kethran atoms — Phase 2 of the UI redesign.
 *
 * Six reusable components rendered with theme tokens:
 *   .k-pill       region pill                           (Top Strip)
 *   .k-tickbar    HP / shield / AP bar with tick marks  (Selection)
 *   .k-cmd        command tile (4×3 grid uses .k-cmd-grid)
 *   .k-tabs       tab header (underline accent, summary right)
 *   .k-world      world-space entity label (CSS, not 3D — tooltips)
 *   .k-chip-warn  brownout / status context chip
 *
 * All atoms read from theme tokens — never hardcode colors.
 * ============================================================ */

/* ── Region pill (132 × 46) ─────────────────────────────── */
.k-pill {
  flex-shrink: 0;
  width: 132px;
  height: 46px;
  padding: 6px 10px;
  background: var(--panel-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font);
}
.k-pill.warn {
  border-color: var(--warn);
  background: var(--warn-dim);
}
.k-pill .k-pill-l1 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.k-pill .k-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
body[data-glow="true"] .k-pill .k-pill-dot {
  box-shadow: 0 0 4px var(--accent);
}
.k-pill.warn .k-pill-dot {
  background: var(--warn);
}
body[data-glow="true"] .k-pill.warn .k-pill-dot {
  box-shadow: 0 0 4px var(--warn);
}
.k-pill .k-pill-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  flex: 1;
  color: var(--text);
}
.k-pill .k-pill-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--warn);
}
.k-pill .k-pill-l2 {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.k-pill .k-pill-stored {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
}
.k-pill.warn .k-pill-stored {
  color: var(--warn);
}
.k-pill .k-pill-cap {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
}
.k-pill .k-pill-net {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--good);
  margin-left: auto;
}
.k-pill .k-pill-net.bad {
  color: var(--bad);
}
.k-pill .k-pill-progress {
  position: relative;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}
.k-pill .k-pill-progress > div {
  height: 100%;
  background: var(--accent);
}
.k-pill.warn .k-pill-progress > div {
  background: var(--warn);
}

/* ── Tickbar (6px tall) ─────────────────────────────────── */
.k-tickbar {
  margin-bottom: 8px;
}
.k-tickbar .k-tickbar-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 0.6px;
  margin-bottom: 3px;
}
.k-tickbar .k-tickbar-track {
  position: relative;
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1.5px;
  overflow: hidden;
}
.k-tickbar .k-tickbar-fill {
  height: 100%;
}
.k-tickbar .k-tickbar-fill.hull {
  background: var(--bad);
}
.k-tickbar .k-tickbar-fill.shield {
  background: var(--accent);
}
.k-tickbar .k-tickbar-fill.ap {
  background: var(--good);
}
body[data-glow="true"] .k-tickbar .k-tickbar-fill {
  box-shadow: 0 0 4px currentColor;
}
.k-tickbar .k-tickbar-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.45);
}

/* ── Command tile (4×3 grid; tile 60h × 68w) ─────────────── */
.k-cmd-grid {
  display: grid;
  grid-template-columns: repeat(4, 68px);
  grid-auto-rows: 60px;
  gap: 5px;
}
.k-cmd {
  background: var(--panel-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
  font-family: var(--font);
}
.k-cmd:hover:not(.disabled) {
  border-color: var(--border-strong);
  background: var(--panel);
}
.k-cmd.active {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.k-cmd.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.k-cmd-icon {
  font-size: 14px;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
}
.k-cmd.active .k-cmd-icon {
  color: var(--accent);
}
.k-cmd-lbl {
  font-size: 8px;
  letter-spacing: 0.3px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.k-cmd-hot {
  position: absolute;
  top: 2px;
  right: 3px;
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text);
  font-weight: 700;
}
.k-cmd.active .k-cmd-hot {
  color: var(--accent);
}

/* ── Tab header ─────────────────────────────────────────── */
.k-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  align-items: stretch;
}
.k-tab {
  padding: 10px 16px;
  font-family: var(--font-header);
  font-size: 11px;
  font-weight: var(--header-weight);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.k-tab:hover {
  color: var(--text);
}
.k-tab.on {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.k-tabs-summary {
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  margin-left: auto;
  align-self: center;
}

/* ── World label (overlay on 3D entities — 2D HTML, not Three) ── */
.k-world {
  background: rgba(8, 12, 20, 0.92);
  border: 1px solid var(--accent);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  display: inline-block;
  white-space: nowrap;
}
.k-world.selected {
  border-width: 2px;
  font-weight: 600;
}
body[data-glow="true"] .k-world.selected {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 12px var(--accent), 0 6px 14px rgba(0, 0, 0, 0.5);
}
.k-world.hostile {
  border-color: var(--bad);
  color: var(--bad);
}
.k-world.world-owned {
  border-color: var(--text-faint);
  color: var(--text-dim);
}
.k-world-tag {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 9px;
  margin-right: 6px;
  letter-spacing: 1px;
}

/* ── Brownout / status chip ─────────────────────────────── */
.k-chip-warn {
  background: var(--panel);
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: var(--blur);
  box-shadow: 0 0 0 1px var(--warn-dim), 0 6px 14px rgba(0, 0, 0, 0.5);
  font-family: var(--font);
}
.k-chip-warn .k-chip-glyph {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--warn);
  font-weight: 700;
}
.k-chip-warn .k-chip-loc {
  font-size: 11px;
  color: var(--text);
}
.k-chip-warn .k-chip-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}
.k-chip-warn .k-chip-cta {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  margin-left: auto;
}