/* Comp Forge v2 look (docs/redesign/PLAN.md section 8): the shell with a left navigation, and the shared parts
   restyled. Loaded after the page files, before motion.css, so it wins over their older base rules */

/* ---------- page background: night blue with a faint dot grid and gold light from the top ---------- */
body {
  background:
    radial-gradient(1100px 520px at 30% -14%, color-mix(in oklch, var(--amber) 10%, transparent), transparent 70%),
    radial-gradient(800px 440px at 100% -10%, color-mix(in oklch, var(--ally) 9%, transparent), transparent 70%),
    radial-gradient(circle at center, rgb(170 190 230 / .045) 1px, transparent 1.2px) 0 0 / 22px 22px,
    var(--surface-0);
  background-attachment: fixed;
  font-family: var(--font-ui);
  font-feature-settings: "ss01", "cv11";
}

/* ---------- left navigation ---------- */
.sidenav {
  position: fixed;
  z-index: 70;
  inset: 0 auto 0 0;
  width: var(--nav-w);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-7) var(--space-6);
  border-right: 1px solid var(--hairline);
  background: linear-gradient(180deg, color-mix(in oklch, var(--surface-1) 92%, transparent), color-mix(in oklch, var(--surface-0) 94%, transparent));
  backdrop-filter: blur(12px);
  transition: width var(--dur-base) var(--ease-out);
}
.topbar, .tab-page, .live-view { margin-left: var(--nav-w); transition: margin-left var(--dur-base) var(--ease-out); }
.sidenav .brand { display: flex; align-items: center; gap: var(--space-5); height: 36px; padding: 0 var(--space-4); }
.sidenav .brand-mark { width: 16px; height: 16px; border-width: 2.5px; box-shadow: 0 0 14px color-mix(in oklch, var(--amber) 55%, transparent); }
.sidenav .brand-name { font: 700 19px/1 var(--font-display); letter-spacing: .04em; }
.sidenav .tabs { position: relative; flex: 1; height: auto; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.nav-section { padding: 0 var(--space-5) var(--space-4); font: 600 var(--fs-xs)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); }
.sidenav .tab {
  position: relative;
  z-index: 1;
  height: 42px;
  gap: var(--space-6);
  padding: 0 var(--space-5);
  border-radius: var(--radius-lg);
  font: 600 14px/1 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.sidenav .tab:hover { background: color-mix(in oklch, var(--surface-2) 70%, transparent); color: var(--text-1); }
.sidenav .tab[aria-current="page"] { color: var(--text-1); }
.sidenav .tab[aria-current="page"] .nav-icon { color: var(--amber); }
.nav-icon { flex: none; width: 20px; height: 20px; color: var(--text-3); transition: color var(--dur-fast); }
.sidenav .tab:hover .nav-icon { color: var(--text-1); }
.nav-label { white-space: nowrap; overflow: hidden; }
/* the current page: a lit plate behind its link that slides from link to link */
.sidenav .tab-line {
  left: 0;
  top: 0;
  bottom: auto;
  width: 100%;
  height: 42px;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, color-mix(in oklch, var(--amber) 16%, transparent), color-mix(in oklch, var(--amber) 4%, transparent));
  box-shadow: inset 2px 0 0 var(--amber), inset 0 0 0 1px color-mix(in oklch, var(--amber) 18%, transparent);
}
.sidenav .tab-line.placed { transition: transform var(--dur-base) var(--ease-out), height var(--dur-fast); }
.sidenav .live-pill { margin: 0; height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-lg); }
.sidenav .live-text { overflow: hidden; text-overflow: ellipsis; }

/* the top bar only searches now */
.topbar { z-index: 75; height: var(--top-h); padding: 0 var(--page-pad); justify-content: flex-start; background: color-mix(in oklch, var(--surface-0) 70%, transparent); border-bottom: 1px solid var(--hairline); }
.topbar .bar-search { width: min(520px, 100%); margin: 0; }
.topbar .bar-search .field { height: 36px; border-radius: var(--radius-lg); background: color-mix(in oklch, var(--surface-1) 85%, transparent); }

/* a rail of icons on Live (the board needs the width) and on narrow windows */
body[data-tab="live"] { --nav-w: 68px; }
@media (max-width: 1279px) { :root { --nav-w: 68px; } }
body[data-tab="live"] .sidenav .nav-label, body[data-tab="live"] .sidenav .brand-name, body[data-tab="live"] .nav-section, body[data-tab="live"] .sidenav .live-word, body[data-tab="live"] .sidenav .live-sep, body[data-tab="live"] .sidenav .live-text { display: none; }
@media (max-width: 1279px) {
  .sidenav .nav-label, .sidenav .brand-name, .nav-section, .sidenav .live-word, .sidenav .live-sep, .sidenav .live-text { display: none; }
}
body[data-tab="live"] .sidenav .tab, body[data-tab="live"] .sidenav .live-pill { justify-content: center; padding: 0; }
@media (max-width: 1279px) { .sidenav .tab, .sidenav .live-pill { justify-content: center; padding: 0; } }

/* ---------- cards ---------- */
.panel { border-radius: var(--radius-xl); background: linear-gradient(180deg, #131a25, var(--surface-1) 140px); border-color: var(--hairline); }
.panel > .panel-head { height: auto; min-height: 28px; margin: calc(-1 * var(--space-1)) 0 0; }
.panel-head h3, .panel-head h3.label { font: 600 15px/1.2 var(--font-display); letter-spacing: .02em; text-transform: none; color: var(--text-1); }
.panel-legend { font: 500 var(--fs-sm)/1 var(--font-ui); color: var(--text-3); }
.sublabel { font: 600 10.5px/1 var(--font-mono); letter-spacing: .08em; color: var(--text-3); }
.label { font-family: var(--font-display); letter-spacing: .06em; }

/* ---------- numbers ---------- */
.stat-value { font-family: var(--font-mono); font-weight: 600; letter-spacing: -.01em; }
.num, .delta { font-family: var(--font-mono); }

/* ---------- choices: one segmented control instead of separate boxed buttons ---------- */
.choices:not(.locked) { gap: 2px; padding: 3px; border: 1px solid var(--hairline); border-radius: calc(var(--radius-lg) + 3px); background: color-mix(in oklch, var(--surface-0) 70%, transparent); }
.choice {
  height: 32px;
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-2);
  font: 600 13px/1 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
}
.choice:hover { background: color-mix(in oklch, var(--surface-2) 80%, transparent); color: var(--text-1); }
.choice.current { background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); color: var(--text-1); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--amber) 45%, transparent), 0 2px 8px -2px rgb(0 0 0 / .6); }
.choices.mine .choice.current { background: var(--amber); color: var(--on-amber); box-shadow: 0 4px 14px -6px color-mix(in oklch, var(--amber) 80%, transparent); }
.choice:disabled { background: transparent; color: var(--text-4); }
.choice-label { font: inherit; }
.choices.locked .choice { border: 1px solid var(--hairline); }

/* ---------- inputs, selects, buttons ---------- */
.field { height: 36px; border-color: var(--hairline-strong); border-radius: var(--radius-lg); background: color-mix(in oklch, var(--surface-0) 70%, transparent); }
.field:focus-within { border-color: color-mix(in oklch, var(--amber) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--amber) 14%, transparent); }
.field-input { font: 500 14px/1 var(--font-ui); }
.select, .picker-button.select { height: 38px; border-color: var(--hairline-strong); border-radius: var(--radius-lg); background-color: color-mix(in oklch, var(--surface-0) 70%, transparent); font: 600 13px/1 var(--font-ui); letter-spacing: 0; text-transform: none; }
.select.current { background-color: color-mix(in oklch, var(--amber) 12%, var(--surface-1)); }
.bar-button { height: 34px; padding: 0 var(--space-7); border-color: var(--hairline-strong); border-radius: var(--radius-lg); background: color-mix(in oklch, var(--surface-2) 70%, transparent); font: 600 13px/1 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--text-1); }
.bar-button:hover { background: var(--surface-3); border-color: var(--line-3); }
.filter-bar .field { height: 38px; }

/* ---------- tables ---------- */
.data-table th { height: 38px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .08em; color: var(--text-3); border-bottom-color: var(--hairline); }
.data-table td { height: 48px; border-bottom-color: color-mix(in oklch, var(--hairline) 70%, transparent); font-family: var(--font-mono); }
.data-table tbody tr:hover { background: linear-gradient(90deg, color-mix(in oklch, var(--amber) 6%, transparent), color-mix(in oklch, var(--surface-2) 60%, transparent) 40%); }
.cell-name { font: 600 14px/1.1 var(--font-ui); }
.champ-cell .cell-icon { border-radius: var(--radius-lg); }

/* ---------- tier letters ---------- */
.tier { width: 26px; height: 26px; border-radius: 7px; font: 700 14px/1 var(--font-display); }

/* ---------- page titles ---------- */
.page-title { font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; }
.page-eyebrow { font-family: var(--font-mono); letter-spacing: .12em; }