/* --- css/00-tokens.css --- */
:root {
  color-scheme: light dark;
  --bg: light-dark(#f8fafc, #0b1120);
  --surface: light-dark(#ffffff, #131c2e);
  --surface-2: light-dark(#f1f5f9, #1b2638);
  --surface-3: light-dark(#e2e8f0, #263244);
  --border: light-dark(#e2e8f0, #263244);
  --border-strong: light-dark(#7d8ca1, #64748b);
  --text: light-dark(#0f172a, #e2e8f0);
  --text-2: light-dark(#475569, #94a3b8);
  --text-3: light-dark(#5b6b82, #8a97ad);
  --accent: light-dark(#2563eb, #60a5fa);
  --accent-hover: light-dark(#1d4ed8, #93c5fd);
  --accent-weak: light-dark(#eff6ff, #172a4a);
  --on-accent: light-dark(#ffffff, #0b1120);
  --focus: light-dark(#2563eb, #93c5fd);
  --ok-fg: light-dark(#166534, #4ade80);
  --ok-bg: light-dark(#dcfce7, #14301f);
  --dot-ok: light-dark(#16a34a, #22c55e);
  --warn-fg: light-dark(#92400e, #fbbf24);
  --warn-bg: light-dark(#fef3c7, #3a2a0c);
  --dot-warn: light-dark(#d97706, #f59e0b);
  --err-fg: light-dark(#991b1b, #f87171);
  --err-bg: light-dark(#fee2e2, #3b1414);
  --dot-err: light-dark(#dc2626, #ef4444);
  --off-fg: light-dark(#334155, #cbd5e1);
  --off-bg: light-dark(#e2e8f0, #263244);
  --dot-off: light-dark(#64748b, #64748b);
  --info-fg: light-dark(#1e40af, #93c5fd);
  --info-bg: light-dark(#dbeafe, #172a4a);
  --danger: light-dark(#b91c1c, #f87171);
  --danger-solid: light-dark(#b91c1c, #b91c1c);
  --on-danger: light-dark(#ffffff, #ffffff);
  --best: light-dark(#6b21a8, #c084fc);
  --best-bg: light-dark(#f3e8ff, #3b1d5c);
  --pb: light-dark(#15803d, #4ade80);
  --gold-fg: light-dark(#713f12, #fde68a);
  --gold-bg: light-dark(#fde68a, #3d2f0a);
  --silver-fg: light-dark(#1e293b, #e2e8f0);
  --silver-bg: light-dark(#e2e8f0, #2b3546);
  --bronze-fg: light-dark(#7c2d12, #fdba74);
  --bronze-bg: light-dark(#fed7aa, #3a2010);
  --knob: light-dark(#ffffff, #e2e8f0);
  --overlay: light-dark(rgb(15 23 42 / 45%), rgb(2 6 23 / 70%));
  --shadow-color: light-dark(rgb(15 23 42 / 8%), rgb(0 0 0 / 40%));
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs: 0.875rem;
  --fs-sm: 0.78125rem;
  --fs-h1: 1.375rem;
  --fs-h2: 1.0625rem;
  --fs-h3: 0.9375rem;
  --fs-kpi: 1.5rem;
  --lh: 1.45;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 10px;
  --r-full: 999px;
  --shadow-1: 0 1px 2px var(--shadow-color);
  --shadow-2: 0 4px 12px var(--shadow-color), 0 1px 3px var(--shadow-color);
  --shadow-3: 0 16px 40px var(--shadow-color), 0 2px 6px var(--shadow-color);
  --h-sm: 28px;
  --h: 34px;
  --h-lg: 40px;
  --topbar-h: 56px;
  --w-content: 1320px;
  --w-narrow: 760px;
  --w-medium: 1040px;
  --dur-fast: 120ms;
  --dur: 160ms;
  --dur-slow: 180ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --z-sticky: 10;
  --z-sidebar: 40;
  --z-backdrop: 50;
  --z-menu: 60;
  --z-toast: 70;
}
[data-theme="light"] {
  color-scheme: light;
}
[data-theme="dark"] {
  color-scheme: dark;
}
@media (max-width: 639.98px) {
  :root {
    --h-sm: 40px;
    --h: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --surface-3: #e2e8f0;
    --border: #e2e8f0;
    --border-strong: #7d8ca1;
    --text: #0f172a;
    --text-2: #475569;
    --text-3: #5b6b82;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-weak: #eff6ff;
    --on-accent: #ffffff;
    --focus: #2563eb;
    --ok-fg: #166534;
    --ok-bg: #dcfce7;
    --dot-ok: #16a34a;
    --warn-fg: #92400e;
    --warn-bg: #fef3c7;
    --dot-warn: #d97706;
    --err-fg: #991b1b;
    --err-bg: #fee2e2;
    --dot-err: #dc2626;
    --off-fg: #334155;
    --off-bg: #e2e8f0;
    --dot-off: #64748b;
    --info-fg: #1e40af;
    --info-bg: #dbeafe;
    --danger: #b91c1c;
    --danger-solid: #b91c1c;
    --on-danger: #ffffff;
    --best: #6b21a8;
    --best-bg: #f3e8ff;
    --pb: #15803d;
    --gold-fg: #713f12;
    --gold-bg: #fde68a;
    --silver-fg: #1e293b;
    --silver-bg: #e2e8f0;
    --bronze-fg: #7c2d12;
    --bronze-bg: #fed7aa;
    --knob: #ffffff;
    --overlay: rgb(15 23 42 / 45%);
    --shadow-color: rgb(15 23 42 / 8%);
  }
}
/* --- css/01-base.css --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--sp-4);
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: var(--fs);
  line-height: var(--lh);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  text-wrap: balance;
}
h1 {
  font-size: var(--fs-h1);
  margin: 0 0 var(--sp-4);
}
h2 {
  font-size: var(--fs-h2);
  margin: var(--sp-6) 0 var(--sp-3);
}
h3 {
  font-size: var(--fs-h3);
  margin: var(--sp-5) 0 var(--sp-2);
}
h4 {
  font-size: var(--fs);
  margin: var(--sp-4) 0 var(--sp-2);
}
p {
  margin: 0 0 var(--sp-3);
}
ul,
ol {
  margin: 0 0 var(--sp-3);
  padding-left: var(--sp-6);
}
a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}
strong,
b {
  font-weight: 600;
}
small {
  font-size: var(--fs-sm);
}
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-5) 0;
}
img,
svg,
video {
  max-width: 100%;
}
svg {
  vertical-align: middle;
}
code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  overflow-wrap: anywhere;
}
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 5px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}
time {
  font-variant-numeric: tabular-nums;
}
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
[hidden] {
  display: none !important;
}
fieldset {
  min-width: 0;
  margin: 0;
}
legend {
  padding: 0 var(--sp-1);
  font-weight: 600;
}
::selection {
  background: var(--accent);
  color: var(--on-accent);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}
/* --- css/02-utilities.css --- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.muted {
  color: var(--text-2);
}
.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.nowrap {
  white-space: nowrap;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.path {
  font-family: var(--font-mono);
  font-size: 0.92em;
  overflow-wrap: anywhere;
}
.text-danger {
  color: var(--danger) !important;
}
.text-warn {
  color: var(--warn-fg) !important;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.mt-0 {
  margin-top: 0 !important;
}
.mt-2 {
  margin-top: var(--sp-2) !important;
}
.mt-4 {
  margin-top: var(--sp-4) !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-2 {
  margin-bottom: var(--sp-2) !important;
}
.mb-4 {
  margin-bottom: var(--sp-4) !important;
}
.js .nojs-only {
  display: none !important;
}
/* --- css/10-shell.css --- */
.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: calc(var(--z-toast) + 1);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus-visible {
  transform: none;
  color: var(--on-accent);
}
.app {
  min-height: 100vh;
}
.sidebar {
  display: flex;
  flex-direction: column;
  width: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border-right: 1px solid var(--border);
  scrollbar-width: thin;
}
@media (min-width: 1024px) {
  .app:not(.app-bare) {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    background:
      linear-gradient(to right, var(--surface) 0 239px, var(--border) 239px 240px, transparent 240px),
      var(--bg);
  }
  .sidebar {
    position: sticky;
    top: 0;
    z-index: var(--z-sidebar);
    align-self: start;
    height: 100vh;
  }
}
.sidebar-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  height: var(--topbar-h);
  padding: 0 var(--sp-3) 0 var(--sp-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.sidebar-head > .sidebar-close,
.topbar > .nav-toggle {
  display: none;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
}
.brand:hover {
  color: var(--text);
  text-decoration: none;
}
.brand > .icon {
  width: 24px;
  height: 24px;
  color: var(--accent);
}
.brand-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-head .brand-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.2;
  white-space: normal;
}
.mainnav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-3) var(--sp-8);
}
.nav-group-title {
  margin: 0 0 var(--sp-1);
  padding: 0 var(--sp-3);
  color: var(--text-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-group ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mainnav a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: var(--r);
  color: var(--text-2);
  font-weight: 500;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.mainnav a > .icon {
  width: 18px;
  height: 18px;
}
.mainnav a:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.mainnav a.active {
  background: var(--accent-weak);
  color: var(--accent);
  font-weight: 600;
}
.sidebar-backdrop {
  display: none;
}
.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) + 20);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sp-3);
  height: var(--topbar-h);
  padding: 0 var(--sp-6);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.topbar > .breadcrumbs {
  flex: 1 1 auto;
  min-width: 0;
}
.topbar-tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
}
.palette-open {
  margin-right: var(--sp-1);
  color: var(--text-2);
}
.palette-open kbd {
  margin-left: var(--sp-2);
}
.theme-menu > summary > .theme-icon {
  display: none;
}
[data-theme="light"] .theme-icon[data-theme-icon="light"],
[data-theme="dark"] .theme-icon[data-theme-icon="dark"],
:root:not([data-theme="light"], [data-theme="dark"]) .theme-icon[data-theme-icon="auto"] {
  display: inline-flex;
}
.userbox {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  white-space: nowrap;
}
.userbox form {
  margin: 0;
}
.bell {
  position: relative;
}
.bell.active {
  background: var(--accent-weak);
  color: var(--accent);
}
.bell-count {
  position: absolute;
  top: -2px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--danger-solid);
  color: var(--on-danger);
  box-shadow: 0 0 0 2px var(--surface);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.user-menu > summary.user-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 220px;
  min-height: var(--h);
  padding: 2px 8px 2px 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text);
  font-weight: 500;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.user-menu > summary.user-chip:hover,
.user-menu[open] > summary.user-chip {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.user-chip > .icon {
  width: 16px;
  height: 16px;
  color: var(--text-2);
}
.user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--w-content);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-6) var(--sp-10);
}
.content:focus,
.content:focus-visible {
  outline: none;
}
.page-narrow {
  max-width: var(--w-narrow);
}
.page-medium {
  max-width: var(--w-medium);
}
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-5);
  width: 100%;
  max-width: var(--w-content);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-6) var(--sp-8);
  border-top: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.footer-league {
  font-weight: 600;
}
.footer-zone {
  flex: 1 1 auto;
}
.footer-version {
  font-variant-numeric: tabular-nums;
}
.app-bare .topbar {
  gap: var(--sp-4);
}
@media (max-width: 1023.98px) {
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: calc(var(--z-backdrop) + 1);
    width: 280px;
    max-width: 85vw;
    box-shadow: var(--shadow-3);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .sidebar:target,
  .nav-open .sidebar {
    transform: none;
    visibility: visible;
    transition: transform var(--dur) var(--ease), visibility 0s;
  }
  .sidebar-head > .sidebar-close {
    display: inline-flex;
  }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
    display: block;
    background: var(--overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .sidebar:target ~ .sidebar-backdrop,
  .nav-open .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur) var(--ease), visibility 0s;
  }
  .topbar > .nav-toggle {
    display: inline-flex;
    margin-left: calc(-1 * var(--sp-2));
  }
}
html.nav-open {
  overflow: hidden;
}
@media (max-width: 639.98px) {
  .topbar {
    gap: var(--sp-2);
    padding: 0 var(--sp-3);
    background: var(--surface);
    backdrop-filter: none;
  }
  .topbar-tools {
    gap: 2px;
  }
  .palette-open {
    width: 40px;
    margin-right: 0;
    padding: 0;
  }
  .palette-open > .icon {
    width: 20px;
    height: 20px;
  }
  .palette-open-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .palette-open kbd {
    display: none;
  }
  .user-menu > summary.user-chip {
    padding: 3px;
    border-color: transparent;
  }
  .user-chip > .user-name,
  .user-chip > .icon {
    display: none;
  }
  .content {
    padding: var(--sp-4) var(--sp-4) var(--sp-8);
  }
  .footer {
    flex-direction: column;
    padding: var(--sp-4) var(--sp-4) var(--sp-6);
  }
}
.auth-card {
  max-width: 420px;
  margin: var(--sp-10) auto;
  padding: var(--sp-8) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.auth-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.auth-head > .icon {
  width: 32px;
  height: 32px;
  color: var(--accent);
}
.auth-head > h1 {
  margin: 0;
}
.auth-lead {
  color: var(--text-2);
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
}
.auth-note {
  margin: var(--sp-4) 0 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-align: center;
}
.pw-rules {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.pw-rules > li {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pw-rules > li::before {
  content: "•";
  flex: none;
  width: 1em;
  color: var(--text-3);
  text-align: center;
}
.pw-rules > li[data-state="ok"] {
  color: var(--ok-fg);
}
.pw-rules > li[data-state="ok"]::before {
  content: "✓";
  color: var(--ok-fg);
  font-weight: 700;
}
.pw-rules > li[data-state="bad"] {
  color: var(--err-fg);
}
.pw-rules > li[data-state="bad"]::before {
  content: "✗";
  color: var(--err-fg);
}
@media (max-width: 639.98px) {
  .auth-card {
    margin: var(--sp-4) auto;
    padding: var(--sp-6) var(--sp-4);
  }
}
.error-page {
  max-width: 560px;
  margin: var(--sp-12) auto;
  text-align: center;
}
.error-code {
  margin: 0 0 var(--sp-2);
  color: var(--text-3);
  font-size: 3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.error-text {
  color: var(--text-2);
}
.error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.error-actions > form {
  margin: 0;
}
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
}
.page-title {
  min-width: 0;
}
.page-title h1 {
  margin: 0;
}
.page-id {
  color: var(--text-3);
  font-weight: 400;
}
.page-sub {
  margin: var(--sp-1) 0 0;
  color: var(--text-2);
}
.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.card {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.card-title {
  margin: 0;
  font-size: var(--fs-h2);
}
.card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.card-body > :last-child {
  margin-bottom: 0;
}
@media (max-width: 639.98px) {
  .card {
    padding: var(--sp-4);
  }
}
details.card > summary,
summary.card-summary {
  list-style: none;
  cursor: pointer;
}
details.card > summary::-webkit-details-marker,
summary.card-summary::-webkit-details-marker {
  display: none;
}
details.card > summary::before,
summary.card-summary::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 4px 0 2px;
  border-right: 2px solid var(--text-2);
  border-bottom: 2px solid var(--text-2);
  vertical-align: 0.15em;
  transform: rotate(-45deg);
  transition: transform var(--dur-fast) var(--ease);
}
details[open].card > summary::before,
details[open] > summary.card-summary::before {
  transform: rotate(45deg);
}
.grid {
  display: grid;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-4);
}
.grid.cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}
.grid.cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.grid > .card {
  margin: 0;
}
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--sp-4);
  margin: 0 0 var(--sp-5);
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  color: var(--text);
}
a.kpi {
  transition: border-color var(--dur-fast) var(--ease);
}
a.kpi:hover {
  border-color: var(--accent);
  color: var(--text);
  text-decoration: none;
}
.kpi-label {
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.kpi-value {
  font-size: var(--fs-kpi);
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.kpi-value small {
  color: var(--text-2);
  font-size: var(--fs);
  font-weight: 400;
}
.kpi-meta {
  color: var(--text-2);
  font-size: var(--fs-sm);
}
@media (max-width: 639.98px) {
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
  }
}
/* --- css/20-buttons.css --- */
.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--h);
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.btn .icon {
  width: 1.15em;
  height: 1.15em;
}
.btn:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  color: var(--on-accent);
  text-decoration: none;
}
.btn.secondary {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--accent);
}
.btn.secondary:hover {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--accent);
}
.btn.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text-2);
}
.btn.ghost:hover {
  background: var(--surface-2);
  color: var(--text);
}
.btn.danger {
  border-color: var(--danger-solid);
  background: var(--danger-solid);
  color: var(--on-danger);
}
.btn.danger:hover {
  border-color: color-mix(in srgb, var(--danger-solid) 85%, #000);
  background: color-mix(in srgb, var(--danger-solid) 85%, #000);
  color: var(--on-danger);
}
.btn.danger.subtle {
  border-color: var(--danger);
  background: var(--surface);
  color: var(--danger);
}
.btn.danger.subtle:hover {
  background: var(--err-bg);
  color: var(--err-fg);
}
.btn.sm {
  min-height: var(--h-sm);
  padding: 0 10px;
  font-size: var(--fs-sm);
}
.btn.lg {
  min-height: var(--h-lg);
  padding: 0 var(--sp-5);
  font-size: 0.9375rem;
}
.btn.block {
  display: flex;
  width: 100%;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.btn.secondary:disabled:hover,
.btn.secondary[aria-disabled="true"]:hover {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--accent);
}
.btn.ghost:disabled:hover,
.btn.ghost[aria-disabled="true"]:hover {
  border-color: transparent;
  background: transparent;
  color: var(--text-2);
}
.btn.danger:disabled:hover,
.btn.danger[aria-disabled="true"]:hover {
  border-color: var(--danger-solid);
  background: var(--danger-solid);
  color: var(--on-danger);
}
.btn.danger.subtle:disabled:hover,
.btn.danger.subtle[aria-disabled="true"]:hover {
  border-color: var(--danger);
  background: var(--surface);
  color: var(--danger);
}
.btn.is-busy {
  cursor: progress;
  pointer-events: none;
}
.btn.is-busy::before {
  content: "";
  flex: none;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: acevo-spin 0.7s linear infinite;
}
@keyframes acevo-spin {
  to {
    transform: rotate(360deg);
  }
}
.icon-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.icon-btn:disabled,
.icon-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.icon-btn .icon {
  width: 20px;
  height: 20px;
}
@media (max-width: 639.98px) {
  .icon-btn {
    width: 40px;
    height: 40px;
  }
}
.linkbtn {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.linkbtn:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}
.linkbtn:disabled {
  color: var(--text-3);
  cursor: not-allowed;
  text-decoration: none;
}
/* --- css/21-forms.css --- */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea) {
  max-width: 100%;
  min-height: var(--h);
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  line-height: 1.3;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
:where(textarea) {
  padding: 8px 10px;
  line-height: var(--lh);
  resize: vertical;
}
:where(select[multiple], select[size]) {
  padding: 4px;
}
:where(input, select, textarea):hover {
  border-color: var(--text-3);
}
:where(input, select, textarea):focus-visible {
  border-color: var(--focus);
  outline-offset: 1px;
}
:where(input, select, textarea):disabled {
  background: var(--surface-2);
  color: var(--text-3);
  cursor: not-allowed;
}
::placeholder {
  color: var(--text-3);
  opacity: 1;
}
:where(input[type="checkbox"], input[type="radio"]) {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  vertical-align: middle;
  cursor: pointer;
}
[aria-invalid="true"] {
  border-color: var(--danger) !important;
}
.form {
  margin: 0;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
}
.field > label:not(.switch),
.field-label {
  display: block;
  margin: 0;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
}
.field > input:not([type="checkbox"], [type="radio"]),
.field > select,
.field > textarea,
.field > .input-unit,
.field > .input-group {
  width: 100%;
}
.req {
  margin-left: 2px;
  color: var(--danger);
}
.field-hint {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.field-error {
  margin: 0;
  color: var(--danger);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--danger);
}
.check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  color: var(--text);
  font-size: var(--fs);
  font-weight: 400;
  cursor: pointer;
}
.check > input {
  flex: none;
}
.input-unit {
  display: flex;
  align-items: stretch;
  max-width: 100%;
}
.input-unit > input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-unit > .unit {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-left: 0;
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.input-group {
  display: flex;
  align-items: stretch;
  max-width: 100%;
}
.input-group > input,
.input-group > select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > .btn,
.input-group > .icon-btn {
  height: auto;
  min-height: var(--h);
  border: 1px solid var(--border-strong);
  border-left: 0;
  border-radius: 0 var(--r) var(--r) 0;
}
.input-group > .icon-btn {
  width: var(--h);
  background: var(--surface-2);
}
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}
.switch > input {
  position: absolute;
  width: 36px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.switch-track {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  border-radius: var(--r-full);
  background: var(--border-strong);
  transition: background-color var(--dur) var(--ease);
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--knob);
  box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
  transition: transform var(--dur) var(--ease);
}
.switch > input:checked + .switch-track {
  background: var(--accent);
}
.switch > input:checked + .switch-track::after {
  transform: translateX(16px);
}
.switch > input:focus-visible + .switch-track {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.switch > input:disabled + .switch-track {
  opacity: 0.5;
}
.switch:has(> input:disabled) {
  cursor: not-allowed;
}
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  align-self: flex-start;
  gap: 2px;
  max-width: 100%;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--surface-2);
}
.segmented > label {
  position: relative;
  display: inline-flex;
  margin: 0;
  font-weight: 500;
  cursor: pointer;
}
.segmented > label > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.segmented > label > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: calc(var(--h) - 8px);
  padding: 0 12px;
  border-radius: calc(var(--r) - 2px);
  color: var(--text-2);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.segmented > label:hover > span {
  color: var(--text);
}
.segmented > label > input:checked + span {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--border);
  font-weight: 600;
}
.segmented > label > input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.segmented > label > input:disabled + span {
  opacity: 0.5;
  cursor: not-allowed;
}
details.more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--accent);
  font-size: var(--fs-sm);
  cursor: pointer;
}
details.more > summary:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}
details.more[open] > summary {
  margin-bottom: 6px;
}
ul.problems {
  margin: 6px 0 0;
  padding-left: var(--sp-5);
}
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.form-toc {
  display: none;
}
@media (min-width: 1100px) {
  .form-layout:has(> .form-toc) {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .form-toc {
    position: sticky;
    top: calc(var(--topbar-h) + var(--sp-4));
    display: flex;
    flex-direction: column;
  }
}
.form-toc a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 6px 12px;
  border-left: 2px solid var(--border);
  color: var(--text-2);
}
.form-toc a:hover {
  border-left-color: var(--border-strong);
  color: var(--text);
  text-decoration: none;
}
.form-toc a[aria-current="true"] {
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.toc-error {
  color: var(--danger);
  font-weight: 700;
}
.form-sections {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
.form-section {
  margin: 0;
  scroll-margin-top: calc(var(--topbar-h) + var(--sp-4));
}
.form-section-head {
  margin-bottom: var(--sp-4);
}
.form-section-head h2 {
  margin: 0;
  font-size: var(--fs-h2);
}
.form-section-head p {
  margin: var(--sp-1) 0 0;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--sp-4) var(--sp-5);
}
.form-grid > .full {
  grid-column: 1 / -1;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.form-actions.sticky {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(6px);
}
.unsaved-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  color: var(--warn-fg);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.form-errors {
  outline: none;
}
.form-errors-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 600;
}
.form-errors a {
  color: inherit;
  text-decoration: underline;
}
.form-errors ul {
  margin: 6px 0 0;
  padding-left: var(--sp-5);
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
}
.toolbar > input:not([type="checkbox"], [type="radio"]) {
  flex: 1 1 180px;
  width: auto;
  min-width: 0;
  max-width: 300px;
}
.toolbar > select {
  width: auto;
  min-width: 0;
}
@media (max-width: 639.98px) {
  .toolbar > input:not([type="checkbox"], [type="radio"]),
  .toolbar > select {
    flex: 1 1 100%;
    max-width: none;
  }
}
/* --- css/22-tables.css --- */
:where(table) {
  width: 100%;
  border-collapse: collapse;
}
:where(th, td) {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
:where(th) {
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
:where(tbody > tr:last-child > td) {
  border-bottom: 0;
}
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th,
.table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.table thead th {
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}
.table tbody tr:last-child > td {
  border-bottom: 0;
}
.table.compact th,
.table.compact td {
  padding-top: 5px;
  padding-bottom: 5px;
}
.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
:not(.table-wrap) > .table > thead th {
  position: sticky;
  top: var(--topbar-h);
  z-index: 1;
}
.table-wrap {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--shadow-color), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--shadow-color), transparent) right center / 12px 100% no-repeat scroll;
}
html:not(.js) .table-wrap:has(details.menu[open]) {
  overflow: visible;
}
.table-wrap.sticky {
  max-height: calc(100vh - 8rem);
  overflow: auto;
}
.table-wrap.sticky > .table > thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.table tbody tr[data-row-href] {
  cursor: pointer;
}
.table tbody tr[data-row-href]:hover > td {
  background: var(--surface-2);
}
.row-link {
  color: var(--text);
  font-weight: 600;
}
.row-link:hover {
  color: var(--accent);
}
.row-actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}
.row-actions > * + * {
  margin-left: var(--sp-1);
}
tr.is-deleted > td {
  background: var(--err-bg);
}
tr.is-deleted input:not([type="checkbox"], [type="radio"]),
tr.is-deleted select {
  color: var(--text-3);
  text-decoration: line-through;
}
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.th-sort:hover {
  color: var(--text);
}
.th-sort::after {
  content: "↕";
  color: var(--text-3);
  font-size: 0.9em;
}
th[aria-sort="ascending"] .th-sort::after {
  content: "↑";
  color: var(--accent);
}
th[aria-sort="descending"] .th-sort::after {
  content: "↓";
  color: var(--accent);
}
@media (max-width: 639.98px) {
  .table .col-opt,
  .table.stack-sm .col-opt {
    display: none;
  }
  .table.stack-sm thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
  .table.stack-sm,
  .table.stack-sm tbody,
  .table.stack-sm tr,
  .table.stack-sm td {
    display: block;
    width: 100%;
  }
  .table.stack-sm tr {
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border);
  }
  .table.stack-sm tbody tr:last-child {
    border-bottom: 0;
  }
  .table.stack-sm td {
    padding: 3px 0;
    border: 0;
  }
  .table.stack-sm td[data-label] {
    position: relative;
    min-height: calc(var(--lh) * 1em + 6px);
    padding-left: calc(38% + var(--sp-2));
  }
  .table.stack-sm td[data-label]::before {
    content: attr(data-label);
    position: absolute;
    top: 3px;
    left: 0;
    width: 38%;
    overflow: hidden;
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: calc(var(--lh) * var(--fs) / var(--fs-sm));
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .table.stack-sm td.num,
  .table.stack-sm td.row-actions {
    width: 100%;
    text-align: left;
  }
  .table.stack-sm tr[data-row-href]:hover > td {
    background: none;
  }
}
/* --- css/23-feedback.css --- */
.flash {
  margin: 0 0 var(--sp-4);
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--text);
}
.flash-ok {
  border-color: color-mix(in srgb, var(--ok-fg) 30%, transparent);
  background: var(--ok-bg);
  color: var(--ok-fg);
}
.flash-err {
  border-color: color-mix(in srgb, var(--err-fg) 30%, transparent);
  background: var(--err-bg);
  color: var(--err-fg);
}
.flash-warn {
  border-color: color-mix(in srgb, var(--warn-fg) 30%, transparent);
  background: var(--warn-bg);
  color: var(--warn-fg);
}
.flash a:not(.btn),
.alert[data-tone] a:not(.btn) {
  color: inherit;
  text-decoration: underline;
}
.flash code,
.alert code {
  color: inherit;
}
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
}
.alert > .icon {
  margin-top: 1px;
}
.alert-body {
  flex: 1 1 auto;
  min-width: 0;
}
.alert-body > :last-child {
  margin-bottom: 0;
}
.alert-title {
  margin: 0 0 2px;
  font-weight: 600;
}
.alert-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.alert-actions form {
  margin: 0;
}
.alert > .icon-btn {
  margin: -6px -8px -6px 0;
  color: inherit;
}
.alert[data-tone="ok"] {
  border-color: color-mix(in srgb, var(--ok-fg) 30%, transparent);
  background: var(--ok-bg);
  color: var(--ok-fg);
}
.alert[data-tone="warn"] {
  border-color: color-mix(in srgb, var(--warn-fg) 30%, transparent);
  background: var(--warn-bg);
  color: var(--warn-fg);
}
.alert[data-tone="error"],
.alert.alert-error {
  border-color: color-mix(in srgb, var(--err-fg) 30%, transparent);
  background: var(--err-bg);
  color: var(--err-fg);
}
.alert[data-tone="info"] {
  border-color: color-mix(in srgb, var(--info-fg) 30%, transparent);
  background: var(--info-bg);
  color: var(--info-fg);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--off-bg);
  color: var(--off-fg);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 18px;
  vertical-align: middle;
}
.badge .icon {
  width: 13px;
  height: 13px;
}
.badge[data-tone="ok"] {
  background: var(--ok-bg);
  color: var(--ok-fg);
}
.badge[data-tone="warn"] {
  background: var(--warn-bg);
  color: var(--warn-fg);
}
.badge[data-tone="error"] {
  background: var(--err-bg);
  color: var(--err-fg);
}
.badge[data-tone="info"] {
  background: var(--info-bg);
  color: var(--info-fg);
}
.badge[data-tone="neutral"] {
  background: var(--off-bg);
  color: var(--off-fg);
}
.badge[data-tone="best"] {
  background: var(--best-bg);
  color: var(--best);
}
.status {
  --status-dot: var(--dot-off);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-2);
  font-weight: 500;
  white-space: nowrap;
}
.status-text {
  min-width: 0;
}
.status-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-dot);
  color: var(--status-dot);
}
.status[data-state="running"] {
  --status-dot: var(--dot-ok);
  color: var(--ok-fg);
}
.status[data-state="starting"],
.status[data-state="stopping"] {
  --status-dot: var(--dot-warn);
  color: var(--warn-fg);
}
.status[data-state="crashed"] {
  --status-dot: var(--dot-err);
  color: var(--err-fg);
}
.status[data-state="running"] .status-dot,
.status[data-state="starting"] .status-dot,
.status[data-state="stopping"] .status-dot {
  animation: acevo-pulse 1.8s var(--ease) infinite;
}
@keyframes acevo-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 6px transparent;
  }
}
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.live-indicator::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot-ok);
}
.live-indicator[data-state="offline"] {
  color: var(--err-fg);
}
.live-indicator[data-state="offline"]::before {
  background: var(--dot-err);
}
.live-indicator[data-state="paused"]::before {
  background: var(--dot-off);
}
.session-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--r-sm);
  background: var(--off-bg);
  color: var(--off-fg);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}
.session-tag[data-session="practice"] {
  background: var(--info-bg);
  color: var(--info-fg);
}
.session-tag[data-session="qualifying"] {
  background: var(--best-bg);
  color: var(--best);
}
.session-tag[data-session="warmup"] {
  background: var(--warn-bg);
  color: var(--warn-fg);
}
.session-tag[data-session="race"],
.session-tag[data-session="inverse_race"] {
  background: var(--ok-bg);
  color: var(--ok-fg);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--h-sm);
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip:hover {
  border-color: var(--accent);
  color: var(--text);
  text-decoration: none;
}
.chip[aria-current="page"],
.chip[aria-pressed="true"],
.chip.is-active {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--accent);
}
.chip-count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  text-align: center;
}
.chip .icon {
  width: 14px;
  height: 14px;
}
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-4);
  color: var(--text-2);
  text-align: center;
}
.empty > .icon {
  width: 40px;
  height: 40px;
  color: var(--text-3);
}
.empty-title {
  margin: var(--sp-1) 0 0;
  color: var(--text);
  font-size: var(--fs-h3);
  font-weight: 600;
}
.empty-text {
  max-width: 46ch;
  margin: 0;
}
.empty > .btn {
  margin-top: var(--sp-2);
}
.toast-region {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  max-width: calc(100vw - 2 * var(--sp-5));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  width: 380px;
  max-width: 100%;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-3);
  pointer-events: auto;
  animation: acevo-toast-in var(--dur-slow) var(--ease);
}
.toast.flash-ok,
.toast[data-tone="ok"] {
  border-left: 4px solid var(--dot-ok);
}
.toast.flash-err,
.toast[data-tone="error"] {
  border-left: 4px solid var(--dot-err);
}
.toast[data-tone="warn"] {
  border-left: 4px solid var(--dot-warn);
}
.toast-body {
  flex: 1 1 auto;
  min-width: 0;
}
.toast > .icon-btn {
  margin: -6px -8px -6px 0;
  color: inherit;
}
@keyframes acevo-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@media (max-width: 639.98px) {
  .toast-region {
    right: var(--sp-3);
    bottom: var(--sp-3);
    left: var(--sp-3);
    align-items: stretch;
    max-width: none;
  }
  .toast {
    width: auto;
  }
}
body:has(.form-actions.sticky) .toast-region {
  bottom: calc(var(--sp-5) + 64px);
}
@media (max-width: 639.98px) {
  body:has(.form-actions.sticky) .toast-region {
    bottom: calc(var(--sp-3) + 118px);
  }
}
dialog.modal {
  width: min(460px, calc(100vw - 2 * var(--sp-4)));
  max-height: calc(100vh - 2 * var(--sp-8));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-3);
}
dialog.modal::backdrop {
  background: var(--overlay);
}
dialog.modal[open] {
  animation: acevo-modal-in var(--dur-slow) var(--ease);
}
@keyframes acevo-modal-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}
.modal-body {
  margin: 0;
  padding: var(--sp-6);
}
.modal-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h2);
}
.modal-text {
  margin: 0;
  color: var(--text-2);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.modal-body > .field {
  margin-top: var(--sp-4);
}
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}
dialog.modal[data-tone="danger"] [data-confirm-accept] {
  border-color: var(--danger-solid);
  background: var(--danger-solid);
  color: var(--on-danger);
}
dialog.modal[data-tone="danger"] [data-confirm-accept]:hover {
  border-color: color-mix(in srgb, var(--danger-solid) 85%, #000);
  background: color-mix(in srgb, var(--danger-solid) 85%, #000);
}
dialog.modal[data-tone="warn"] .modal-title {
  color: var(--warn-fg);
}
/* --- css/24-nav.css --- */
.tabs {
  display: flex;
  gap: var(--sp-1);
  margin: 0 0 var(--sp-5);
  overflow-x: auto;
  box-shadow: inset 0 -1px 0 var(--border);
  scrollbar-width: thin;
}
.tabs > a,
.tabs > [role="tab"] {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.tabs > a:hover,
.tabs > [role="tab"]:hover {
  color: var(--text);
  text-decoration: none;
}
.tabs > a[aria-current="page"],
.tabs > [role="tab"][aria-selected="true"] {
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}
.tabs[data-tabs] {
  display: none;
}
.js .tabs[data-tabs] {
  display: flex;
}
.breadcrumbs {
  min-width: 0;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  color: var(--text-2);
  font-size: 0.8125rem;
}
.breadcrumbs li {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
.breadcrumbs li:last-child {
  flex: 0 1 auto;
  overflow: hidden;
}
.breadcrumbs li + li::before {
  content: "›";
  color: var(--text-3);
}
.breadcrumbs a {
  color: var(--text-2);
}
.breadcrumbs a:hover {
  color: var(--text);
}
.breadcrumbs [aria-current="page"] {
  overflow: hidden;
  color: var(--text);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crumb-back {
  display: none;
}
@media (max-width: 639.98px) {
  .breadcrumbs:has(> .crumb-back) > ol {
    display: none;
  }
  .breadcrumbs li:not(:last-child) {
    display: none;
  }
  .breadcrumbs li + li::before {
    content: none;
  }
  .crumb-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    min-height: 40px;
    color: var(--text);
    font-weight: 500;
  }
  .crumb-back > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .crumb-back:hover {
    color: var(--accent);
    text-decoration: none;
  }
}
details.menu {
  position: relative;
  display: inline-block;
}
details.menu > summary {
  list-style: none;
  cursor: pointer;
}
details.menu > summary::-webkit-details-marker {
  display: none;
}
.menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 2 * var(--sp-4)));
  padding: var(--sp-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
details.menu[data-align="start"] > .menu-panel {
  right: auto;
  left: 0;
}
.menu-panel.is-floating {
  position: fixed;
  right: auto;
  bottom: auto;
}
@media (max-width: 639.98px) {
  .menu-panel,
  details.menu[data-align="start"] > .menu-panel {
    position: fixed;
    top: auto;
    right: var(--sp-2);
    bottom: var(--sp-2);
    left: var(--sp-2);
    max-width: none;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: var(--shadow-3);
  }
  .menu-item {
    min-height: var(--h);
    white-space: normal;
  }
}
.menu-panel form {
  margin: 0;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.menu-item:hover,
.menu-item:focus-visible {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.menu-item .icon {
  color: var(--text-2);
}
.menu-item.text-danger .icon {
  color: inherit;
}
.menu-item[aria-pressed="true"] {
  color: var(--accent);
  font-weight: 600;
}
.menu-sep {
  height: 1px;
  margin: var(--sp-1) 0;
  background: var(--border);
}
.menu-label {
  padding: 6px 10px 2px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.pager-info {
  margin: 0;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.pager ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pager li > a,
.pager li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--h-sm);
  height: var(--h-sm);
  padding: 0 var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pager li > a:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}
.pager li > a[aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.pager li > span {
  border-color: transparent;
  color: var(--text-2);
}
dialog.palette {
  width: min(560px, calc(100vw - 2 * var(--sp-4)));
  margin-top: 12vh;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-3);
}
dialog.palette::backdrop {
  background: var(--overlay);
}
.palette-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
}
.palette-search > input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 0.9375rem;
}
.palette-search > input:focus-visible {
  outline: none;
}
.palette-list {
  max-height: min(60vh, 420px);
  margin: 0;
  padding: var(--sp-1);
  overflow-y: auto;
  list-style: none;
}
.palette-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 10px;
  border-radius: var(--r);
  color: var(--text);
  cursor: pointer;
}
.palette-item[aria-selected="true"] {
  background: var(--accent-weak);
  color: var(--accent);
}
.palette-item .icon {
  color: inherit;
}
.palette-hint {
  margin-left: auto;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.palette-empty {
  padding: var(--sp-4);
  color: var(--text-2);
  text-align: center;
}
/* --- css/25-data.css --- */
dl.kv {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px var(--sp-4);
  margin: 0;
}
dl.kv > dt {
  color: var(--text-2);
}
dl.kv > dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 639.98px) {
  dl.kv {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  dl.kv > dd {
    margin-bottom: var(--sp-2);
  }
}
.steps {
  display: flex;
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 22px var(--sp-2) 0 0;
  font-size: 0.8125rem;
}
.step::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
}
.step::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 0;
  left: 14px;
  height: 2px;
  background: var(--border);
}
.step:last-child::after {
  display: none;
}
.step[data-state="done"]::before {
  border-color: var(--dot-ok);
  background: var(--dot-ok);
}
.step[data-state="done"]::after {
  background: var(--dot-ok);
}
.step[data-state="current"]::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}
.step[data-state="error"]::before {
  border-color: var(--dot-err);
  background: var(--dot-err);
}
.step > a,
.step > strong,
.step-title {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step > a:hover {
  color: var(--accent);
}
.step[data-state="todo"] > a,
.step[data-state="todo"] .step-title {
  color: var(--text-2);
  font-weight: 500;
}
.step-meta {
  display: block;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
@media (max-width: 639.98px) {
  .steps {
    flex-direction: column;
    gap: var(--sp-3);
  }
  .step {
    padding: 0 0 0 24px;
  }
  .step::before {
    top: 2px;
  }
  .step::after {
    top: 18px;
    right: auto;
    bottom: calc(-1 * var(--sp-3));
    left: 6px;
    width: 2px;
    height: auto;
  }
}
.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline-item {
  position: relative;
  padding: 0 0 var(--sp-3) 22px;
}
.timeline-item::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot-off);
}
.timeline-item::after {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 2px;
  left: 6px;
  width: 1px;
  background: var(--border);
}
.timeline-item:last-child::after {
  display: none;
}
.timeline-item[data-tone="ok"]::before {
  background: var(--dot-ok);
}
.timeline-item[data-tone="warn"]::before {
  background: var(--dot-warn);
}
.timeline-item[data-tone="error"]::before {
  background: var(--dot-err);
}
.timeline-item[data-tone="info"]::before {
  background: var(--accent);
}
.timeline-item > time {
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.timeline-item > p {
  margin: 2px 0 0;
}
progress.progress {
  display: block;
  width: 100%;
  height: 8px;
  margin: 6px 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--accent);
  appearance: none;
}
progress.progress::-webkit-progress-bar {
  border-radius: var(--r-full);
  background: var(--surface-3);
}
progress.progress::-webkit-progress-value {
  border-radius: var(--r-full);
  background: var(--accent);
}
progress.progress::-moz-progress-bar {
  border-radius: var(--r-full);
  background: var(--accent);
}
.progress-label {
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
meter.meter {
  display: block;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface-3);
  appearance: none;
}
meter.meter::-webkit-meter-bar {
  height: 8px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface-3);
}
meter.meter::-webkit-meter-optimum-value,
meter.meter::-webkit-meter-suboptimum-value,
meter.meter::-webkit-meter-even-less-good-value {
  border-radius: var(--r-full);
  background: var(--accent);
}
meter.meter::-moz-meter-bar {
  border-radius: var(--r-full);
  background: var(--accent);
}
.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
}
.podium-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--text);
  text-align: center;
}
.podium-place[data-pos="1"] {
  order: 2;
  padding-top: var(--sp-8);
  background: var(--gold-bg);
  color: var(--gold-fg);
}
.podium-place[data-pos="2"] {
  order: 1;
  padding-top: var(--sp-6);
  background: var(--silver-bg);
  color: var(--silver-fg);
}
.podium-place[data-pos="3"] {
  order: 3;
  background: var(--bronze-bg);
  color: var(--bronze-fg);
}
.podium-pos {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.1;
}
.podium-name {
  max-width: 100%;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podium-place a {
  color: inherit;
}
.podium-meta {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 639.98px) {
  .podium {
    grid-template-columns: minmax(0, 1fr);
  }
  .podium-place,
  .podium-place[data-pos] {
    order: 0;
    flex-direction: row;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
  }
}
.pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pos[data-pos="1"] {
  background: var(--gold-bg);
  color: var(--gold-fg);
}
.pos[data-pos="2"] {
  background: var(--silver-bg);
  color: var(--silver-fg);
}
.pos[data-pos="3"] {
  background: var(--bronze-bg);
  color: var(--bronze-fg);
}
.result-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 1px 6px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
  white-space: nowrap;
}
.result-chip[data-result="p1"] {
  background: var(--gold-bg);
  color: var(--gold-fg);
}
.result-chip[data-result="p2"] {
  background: var(--silver-bg);
  color: var(--silver-fg);
}
.result-chip[data-result="p3"] {
  background: var(--bronze-bg);
  color: var(--bronze-fg);
}
.result-chip[data-result="points"] {
  background: var(--ok-bg);
  color: var(--ok-fg);
}
.result-chip[data-result="nopoints"],
.result-chip[data-result="dns"] {
  background: var(--off-bg);
  color: var(--off-fg);
}
.result-chip[data-result="nc"] {
  background: var(--warn-bg);
  color: var(--warn-fg);
}
.result-chip[data-result="dq"] {
  background: var(--err-bg);
  color: var(--err-fg);
}
.result-chip[data-result="dropped"] {
  border-color: var(--border-strong);
  border-style: dashed;
  background: transparent;
  color: var(--text-2);
  text-decoration: line-through;
}
.t {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.t.best {
  color: var(--best);
  font-weight: 700;
}
.t.pb {
  color: var(--pb);
  font-weight: 600;
}
.t.inv {
  color: var(--text-3);
  text-decoration: line-through;
}
.gap {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ts-rel {
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-weak);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.copy-field {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 100%;
  padding: 4px 4px 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
}
.copy-value {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
/* --- css/26-code.css --- */
pre.code {
  max-height: 540px;
  margin: 0;
  padding: var(--sp-3) 14px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.78125rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.code-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: 6px;
}
.code-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.logview {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.logview-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: var(--sp-2);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.logview-toolbar input[type="search"],
.logview-toolbar input[type="text"] {
  flex: 0 1 220px;
  width: auto;
  min-height: var(--h-sm);
  min-width: 0;
}
.logview-toolbar [aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--accent);
}
.logview-state {
  margin-left: auto;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
pre.logview-body {
  height: 60vh;
  margin: 0;
  padding: 10px var(--sp-3);
  overflow: auto;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.78125rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
pre.logview-body[data-wrap="off"] {
  white-space: pre;
  overflow-wrap: normal;
}
.ln {
  display: block;
}
.ln[data-level="warn"] {
  color: var(--warn-fg);
}
.ln[data-level="error"] {
  background: var(--err-bg);
  color: var(--err-fg);
}
/* --- css/60-ops.css --- */
.ops-section {
  margin: 0 0 var(--sp-6);
}
.ops-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-3);
}
.ops-section-head > h2 {
  margin: 0;
  font-size: var(--fs-h2);
}
.ops-kpis .kpi-label,
.ops-server-kpis .kpi-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ops-kpis .kpi-label > .icon,
.ops-server-kpis .kpi-label > .icon {
  width: 15px;
  height: 15px;
}
.ops-kpi-when,
.ops-kpi-text {
  font-size: var(--fs-h2);
  line-height: 1.6;
}
@media (max-width: 639.98px) {
  .ops-kpi-when,
  .ops-kpi-text {
    font-size: var(--fs);
  }
}
.ops-kpi-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ops-kpi-leader,
.ops-recent-leader > strong {
  color: var(--text);
  font-weight: 600;
}
.ops-servers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}
@media (min-width: 900px) {
  .ops-servers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ops-server-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  margin: 0;
}
.ops-server-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.ops-server-title {
  min-width: 0;
}
.ops-server-name {
  margin: 0;
  font-size: var(--fs-h2);
  overflow-wrap: anywhere;
}
.ops-server-name > a {
  color: var(--text);
}
.ops-server-name > a:hover {
  color: var(--accent);
}
.ops-server-event {
  margin: 2px 0 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.ops-server-event a {
  font-weight: 500;
}
.ops-event-now,
.ops-event-last {
  display: inline;
}
.ops-server-state {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.ops-critical {
  white-space: nowrap;
}
.ops-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ops-fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ops-fact > .icon {
  width: 15px;
  height: 15px;
  color: var(--text-2);
}
.ops-server-card > .ops-crash {
  margin: 0;
}
.ops-crash-reason {
  margin: 0;
  overflow-wrap: anywhere;
}
.ops-join {
  min-width: 0;
  padding: 3px 3px 3px 10px;
}
.ops-join-label {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.ops-join-label > .icon {
  width: 15px;
  height: 15px;
}
.ops-server-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.ops-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.ops-actions > form {
  margin: 0;
}
.ops-start {
  max-width: min(100%, 22rem);
}
.ops-start .icon {
  flex: none;
}
.ops-start-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ops-start-event {
  font-weight: 500;
}
@media (max-width: 639.98px) {
  .ops-start-event {
    display: none;
  }
}
.ops-menu > .menu-panel {
  min-width: 230px;
}
.ops-dash-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}
@media (min-width: 1024px) {
  .ops-dash-cols {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  }
}
.ops-dash-card {
  margin: 0;
}
.ops-agenda,
.ops-recent {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ops-agenda-item {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border);
}
.ops-agenda-item:first-child,
.ops-recent-item:first-child {
  padding-top: 0;
  border-top: 0;
}
.ops-agenda-item:last-child,
.ops-recent-item:last-child {
  padding-bottom: 0;
}
.ops-agenda-when {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-variant-numeric: tabular-nums;
}
.ops-agenda-when > time {
  font-weight: 600;
  white-space: nowrap;
}
.ops-agenda-what {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ops-agenda-what > a {
  font-weight: 500;
}
.ops-agenda-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
@media (max-width: 639.98px) {
  .ops-agenda-item {
    grid-template-columns: minmax(0, 1fr);
  }
  .ops-agenda-when {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 var(--sp-2);
  }
}
.ops-recent-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.ops-recent-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  color: var(--text);
  font-weight: 500;
}
.ops-recent-link:hover {
  color: var(--accent);
}
.ops-recent-track {
  overflow-wrap: anywhere;
}
.ops-recent-meta {
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.ops-recent-leader {
  overflow-wrap: anywhere;
}
.ops-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ops-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  color: var(--text);
  font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease);
}
.ops-tile:hover {
  border-color: var(--accent);
  color: var(--text);
  text-decoration: none;
}
.ops-tile > .icon {
  color: var(--accent);
}
.ops-page-head > .page-title {
  flex: 1 1 24rem;
}
@media (min-width: 640px) {
  .ops-page-head > .page-actions {
    margin-left: auto;
  }
}
.ops-server-top > .page-title {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.ops-server-top .page-sub {
  margin: 0;
}
.ops-head-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.ops-head-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
}
.ops-head-sub > span:has(~ span:not([hidden]))::after {
  content: "·";
  padding: 0 var(--sp-2);
  color: var(--text-3);
}
@media (max-width: 639.98px) {
  .ops-head-sub {
    flex-direction: column;
  }
  .ops-head-sub > span:has(~ span:not([hidden]))::after {
    content: none;
  }
}
@media (max-width: 639.98px) {
  .ops-tabs > a > .icon {
    display: none;
  }
}
.ops-server-top .ops-join {
  align-self: flex-start;
  max-width: 100%;
}
.ops-tabs {
  margin-top: calc(-1 * var(--sp-1));
}
.ops-confirm {
  box-shadow: var(--shadow-2);
}
.ops-confirm-text {
  margin: 4px 0 0;
  white-space: pre-line;
}
.ops-launch,
.ops-log-card {
  scroll-margin-top: calc(var(--topbar-h) + var(--sp-4));
}
.ops-confirm-note {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
}
.ops-players-card {
  scroll-margin-top: calc(var(--topbar-h) + var(--sp-4));
}
.ops-players-table .ops-player-num {
  width: 1%;
  color: var(--text-2);
}
.ops-player-name {
  min-width: 10rem;
}
.ops-player-driver {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ops-player-steam {
  display: block;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ops-player-car {
  overflow-wrap: anywhere;
}
.ops-players-empty {
  margin: 0;
  color: var(--text-2);
}
.ops-players-note {
  margin: var(--sp-3) 0 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.ops-card-players {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.ops-card-players > a {
  color: var(--text);
  font-weight: 500;
}
.ops-card-players > a:hover {
  color: var(--accent);
}
.ops-card-players-label {
  color: var(--text-2);
}
.ops-launch-form {
  display: grid;
  grid-template-columns: minmax(0, 30rem) auto;
  align-items: end;
  justify-content: start;
  gap: var(--sp-3) var(--sp-4);
  margin: 0;
}
.ops-launch-preview,
.ops-launch-replace {
  grid-column: 1 / -1;
}
.ops-launch-replace {
  margin: 0;
}
@media (max-width: 639.98px) {
  .ops-launch-form {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ops-log-toolbar {
  gap: 4px var(--sp-2);
}
.ops-log-filter {
  flex: 1 1 180px;
  max-width: 280px;
}
.ops-log-announce {
  font-size: var(--fs-sm);
}
@media (max-width: 639.98px) {
  .ops-log-toolbar .ops-log-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ops-log-filter {
    flex: 1 1 100%;
    max-width: none;
    order: -1;
  }
}
.ops-log-body {
  position: relative;
}
.ops-log-lines:focus-visible {
  outline-offset: -2px;
}
.ops-log-jump {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-3);
  box-shadow: var(--shadow-2);
}
.ops-log-status {
  margin: var(--sp-2) 0 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.ops-log-hidden {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 6px var(--sp-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.ops-log-hidden > .icon {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
}
.ops-log-lines > .ln[data-noise],
.ops-logfile-lines > .ln[data-noise] {
  color: var(--text-3);
}
.ops-add-panel {
  gap: var(--sp-3);
  padding: var(--sp-4);
}
@media (min-width: 640px) {
  .ops-add > .ops-add-panel {
    width: min(600px, calc(100vw - 2 * var(--sp-6)));
    max-width: none;
  }
}
.ops-add-title {
  margin: 0;
  font-weight: 600;
}
.ops-add-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3);
  margin: 0;
}
.ops-add-name {
  flex: 1 1 12rem;
}
.ops-add-template {
  flex: 1 1 12rem;
}
.ops-add-hint {
  margin: 0;
}
.ops-table-card {
  padding-bottom: var(--sp-3);
}
.ops-cell-server {
  min-width: 11rem;
}
.ops-cell-event {
  display: block;
  color: var(--text-2);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.ops-server-plain {
  font-weight: 600;
}
.ops-cell-state {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.ops-cell-phase {
  display: block;
  margin-top: 4px;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.ops-cell-join {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
}
@media (min-width: 640px) {
  .ops-cell-join > .ops-code {
    white-space: nowrap;
  }
}
.ops-code {
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
.ops-ports {
  font-variant-numeric: tabular-nums;
}
.ops-ports-help {
  margin: 0 0 var(--sp-4);
}
.ops-options .form-section-head > h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.ops-secrets > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ops-form-error {
  margin-top: var(--sp-3);
}
.ops-switches {
  gap: var(--sp-4);
}
.ops-blocklist-empty {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  color: var(--text-2);
}
.ops-blocklist-table input:not([type="checkbox"]) {
  width: 100%;
}
.ops-blocklist-table .ops-steam {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) {
  .ops-blocklist-table input:not([type="checkbox"]) {
    min-width: 8rem;
  }
  .ops-blocklist-table .ops-steam {
    min-width: 11.5rem;
  }
}
@media (min-width: 640px) {
  .ops-blocklist-table .ops-col-delete {
    width: 1%;
    text-align: center;
  }
}
.ops-cell-added {
  color: var(--text-2);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.ops-blocklist-actions {
  margin: var(--sp-3) 0;
}
.ops-expert > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.ops-expert-title {
  margin: 0;
  font-size: var(--fs-h2);
}
.ops-expert-body {
  margin-top: var(--sp-4);
}
@media (max-width: 639.98px) {
  .ops-blocklist-table.table td {
    padding-right: 6px;
    padding-left: 6px;
  }
}
.ops-update-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  margin: 0 0 var(--sp-4);
}
@media (min-width: 1100px) {
  .ops-update-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ops-install,
.ops-update {
  margin: 0;
}
.ops-install-kv {
  margin-bottom: var(--sp-3);
}
.ops-update-who {
  color: var(--text-2);
}
.ops-update-steps {
  margin: var(--sp-4) 0;
}
.ops-update-servers {
  margin: 6px 0 0;
  padding-left: var(--sp-5);
}
.ops-update-servers > li + li {
  margin-top: 4px;
}
.ops-update-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
}
.ops-update-cancel {
  margin-top: var(--sp-3);
}
.ops-update-note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
}
.ops-update-last {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--sp-2);
}
.ops-update-lines {
  height: 40vh;
}
.ops-cmd {
  max-height: none;
}
.ops-workdir {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--sp-4);
}
.ops-workdir-label {
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.ops-files {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.ops-file {
  margin: 0;
  padding: 0;
}
.ops-file > .ops-file-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
}
.ops-file-head > .icon {
  color: var(--text-2);
}
.ops-file-name {
  font-family: var(--font-mono);
  font-weight: 600;
}
.ops-file-title {
  color: var(--text-2);
}
.ops-file-meta {
  margin-left: auto;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.ops-file-body {
  padding: 0 var(--sp-5) var(--sp-5);
}
.ops-file-tools {
  justify-content: flex-end;
}
.ops-logdir {
  margin-top: var(--sp-4);
}
.ops-logfile-lines {
  height: auto;
  max-height: 70vh;
}
.ops-danger {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}
.ops-danger .card-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--err-fg);
}
.ops-consequences {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ops-consequence {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ops-consequence > .icon {
  margin-top: 1px;
  color: var(--text-2);
}
.ops-consequence[data-tone="error"] > .icon {
  color: var(--err-fg);
}
.ops-consequence[data-tone="warn"] > .icon {
  color: var(--warn-fg);
}
.ops-consequence[data-tone="ok"] > .icon {
  color: var(--ok-fg);
}
.ops-keep {
  margin: var(--sp-5) 0;
  padding: var(--sp-4);
  border-radius: var(--r);
  background: var(--surface-2);
}
.ops-keep-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  font-weight: 600;
}
.ops-delete-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
}
.ops-visit-filters {
  margin: 0 0 var(--sp-4);
}
.ops-visit-filters > .chips {
  margin-bottom: var(--sp-3);
}
.toolbar.ops-visit-toolbar {
  margin-bottom: 0;
}
@media (min-width: 640px) {
  .ops-visit-toolbar > input[type="search"] {
    max-width: 260px;
  }
}
.ops-visit-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.ops-visit-date > input {
  width: auto;
}
.ops-visit-date-label {
  min-width: 1.5em;
}
@media (max-width: 639.98px) {
  .ops-visit-date {
    flex: 1 1 100%;
  }
  .ops-visit-date > input {
    flex: 1 1 auto;
    min-width: 0;
  }
}
.ops-visits-card > .card-head {
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.ops-visits-table td.num {
  white-space: nowrap;
}
.ops-visit-driver {
  min-width: 9rem;
}
.ops-visit-name {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ops-visit-when > time {
  white-space: nowrap;
}
.ops-visit-note {
  display: block;
  color: var(--text-2);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.ops-visit-stay {
  white-space: nowrap;
}
.ops-visit-dur {
  font-variant-numeric: tabular-nums;
}
.ops-visit-car {
  overflow-wrap: anywhere;
}
.ops-visit-number {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ops-visit-laps > summary {
  cursor: pointer;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ops-visit-lap-list {
  margin: var(--sp-1) 0 0;
  padding: 0;
  list-style: none;
}
.ops-visit-lap-list > li {
  padding: 2px 0;
  white-space: nowrap;
}
.ops-visit-lap-list .ops-visit-note {
  display: inline;
}
@media (max-width: 639.98px) {
  .ops-visits-table td.num,
  .ops-visit-lap-list > li {
    white-space: normal;
  }
  .ops-visit-lap-list .ops-visit-note {
    display: block;
  }
}
.ops-visits-recent {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ops-visits-recent-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.ops-visits-recent-item:first-child {
  padding-top: 0;
  border-top: 0;
}
.ops-visits-recent-item:last-child {
  padding-bottom: 0;
}
.ops-visits-recent-who {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ops-visits-recent-meta {
  color: var(--text-2);
  font-size: var(--fs-sm);
}
/* --- css/61-events.css --- */
.evt-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.evt-small {
  font-size: var(--fs-sm);
}
.card.evt-list-card {
  padding: 0;
  overflow: hidden;
}
html:not(.js) .card.evt-list-card:has(details.menu[open]) {
  overflow: visible;
}
@media (min-width: 640px) {
  .evt-list-card > .table-wrap > .table th:first-child,
  .evt-list-card > .table-wrap > .table td:first-child {
    padding-left: var(--sp-5);
  }
  .evt-list-card > .table-wrap > .table th:last-child,
  .evt-list-card > .table-wrap > .table td:last-child {
    padding-right: var(--sp-4);
  }
}
.evt-list-card > .empty {
  padding-right: var(--sp-5);
  padding-left: var(--sp-5);
}
.evt-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 4px;
}
.evt-cars-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.evt-next-run {
  font-weight: 500;
}
.evt-inline-form {
  display: inline-flex;
  margin: 0;
  vertical-align: middle;
}
.evt-filter-none > td {
  padding: var(--sp-6) var(--sp-5);
  color: var(--text-2);
  text-align: center;
}
@media (max-width: 639.98px) {
  .evt-list-card > .table-wrap > .table {
    padding: 0 var(--sp-4);
  }
  .evt-list-card .table td.row-actions {
    padding-top: var(--sp-2);
  }
}
@media (max-width: 639.98px) {
  .evt-form-actions {
    flex-wrap: nowrap;
    gap: 6px;
    padding: var(--sp-2) var(--sp-3);
  }
  .evt-form-actions > .unsaved-note {
    display: none;
  }
  .evt-form-actions .evt-label-wide {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.evt-label-wide {
  white-space: nowrap;
}
.evt-readiness {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.evt-ready-icon {
  display: inline-flex;
}
.evt-cars {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.evt-car-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.evt-car-chips:empty {
  display: none;
}
.evt-car-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}
.evt-car-tools > .evt-car-search {
  flex: 1 1 220px;
  max-width: 340px;
}
.evt-car-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.evt-car-filters > .evt-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  gap: var(--sp-3);
  max-width: 620px;
  margin-bottom: var(--sp-2);
}
.evt-car-count {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.evt-carlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 6px;
  max-height: 26rem;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
}
.evt-car {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  font-weight: 400;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.evt-car:hover {
  border-color: var(--border-strong);
}
.evt-car:has(> input:checked) {
  border-color: var(--accent);
  background: var(--accent-weak);
}
.evt-car > input {
  flex: none;
}
.evt-car-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.evt-pi {
  flex: none;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.evt-car-none {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--sp-4);
  color: var(--text-2);
  text-align: center;
}
.evt-car-static {
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-5);
}
.chip.evt-car-chip {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--text);
}
.chip.evt-car-chip:hover {
  border-color: var(--danger);
  color: var(--danger);
}
.evt-bop {
  max-width: var(--w-narrow);
}
.evt-bop-preview {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  list-style: none;
}
.evt-bop-preview > li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px var(--sp-3);
}
.evt-bop-car {
  min-width: 0;
  overflow-wrap: anywhere;
}
.evt-bop-val {
  color: var(--best);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.evt-sessions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.evt-session {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.evt-session:has(input[data-evt-session-on]:checked) {
  border-color: var(--accent);
  background: var(--surface);
}
.evt-session.has-error {
  border-color: var(--danger);
}
.evt-session-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.evt-session-title {
  font-weight: 600;
}
.evt-session .field > input[type="number"] {
  max-width: 9rem;
}
.evt-race-unit {
  margin-top: 2px;
}
.evt-tod {
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}
.evt-tod-value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.evt-tod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: var(--sp-2) var(--sp-3);
}
.evt-tod-grid .field > input,
.evt-tod-grid .field > select {
  width: 100%;
  max-width: none;
}
.evt-tod > .field-hint {
  margin-top: var(--sp-2);
}
.evt-infinite .field-hint {
  margin-top: 2px;
}
.evt-estimate {
  margin: 0;
  color: var(--text-2);
}
.evt-estimate > strong {
  color: var(--text);
}
.evt-cycle {
  margin-top: var(--sp-4);
}
.evt-setup-lock {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.evt-setup-title {
  margin: 0 0 var(--sp-1);
  font-size: 0.9375rem;
}
fieldset.evt-setup-free {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.evt-setup-free-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-2);
}
.evt-setup-range {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.evt-setup-range > input {
  flex: 1 1 0;
  min-width: 0;
}
.evt-el-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.evt-el-slots > .input-unit {
  max-width: 10rem;
}
.evt-entrants {
  container-type: inline-size;
  margin-bottom: var(--sp-3);
}
.evt-ent-table {
  display: grid;
  grid-template-columns: auto minmax(10.25rem, 1.25fr) minmax(6rem, 1fr) minmax(5.5rem, 1fr) minmax(7rem, 1.1fr) auto;
  width: 100%;
  border-collapse: separate;
}
.evt-ent-table > thead,
.evt-ent-table > tbody {
  display: contents;
}
.evt-ent-table > thead > tr,
.evt-ent-table > tbody > tr {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  column-gap: var(--sp-2);
}
.evt-ent-table > thead > tr > th {
  padding: 0 0 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
}
.evt-ent-table > tbody > tr > td {
  min-width: 0;
  padding: 6px 0;
  border: 0;
}
.evt-ent-table > tbody > tr {
  border-bottom: 1px solid var(--border);
}
.evt-ent-table td > input:not([type="checkbox"], [type="radio"], [type="hidden"]),
.evt-ent-table td > select {
  width: 100%;
}
.evt-ent-order,
.evt-ent-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.evt-ent-actions {
  justify-content: flex-end;
}
.evt-ent-actions > .check {
  font-size: var(--fs-sm);
}
.evt-ent-table > tbody > tr > td.evt-ent-extra {
  grid-column: 1 / -1;
  padding: 0 0 var(--sp-3);
}
.js .evt-ent:not([data-evt-open]) > td.evt-ent-extra {
  display: none;
}
.evt-ent-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--r);
  background: var(--surface-2);
}
.evt-ent-fields > .field {
  flex: 0 1 9rem;
}
.evt-ent-overwrite {
  min-height: var(--h);
}
.evt-ent-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.evt-ent-add > .field-hint {
  margin: 0;
}
@container (max-width: 680px) {
  .evt-ent-table {
    display: block;
  }
  .evt-ent-table > thead {
    display: none;
  }
  .evt-ent-table > tbody {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }
  .evt-ent-table > tbody > tr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "order actions" "steam steam" "name team" "car car" "extra extra";
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
  }
  .evt-ent-table > tbody > tr > td {
    padding: 0;
  }
  .evt-ent-table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 600;
  }
  .evt-ent > td:nth-child(1) {
    grid-area: order;
  }
  .evt-ent > td:nth-child(2) {
    grid-area: steam;
  }
  .evt-ent > td:nth-child(3) {
    grid-area: name;
  }
  .evt-ent > td:nth-child(4) {
    grid-area: team;
  }
  .evt-ent > td:nth-child(5) {
    grid-area: car;
  }
  .evt-ent > td:nth-child(6) {
    grid-area: actions;
  }
  .evt-ent-table > tbody > tr > td.evt-ent-extra {
    grid-area: extra;
    padding: 0;
  }
}
@container (max-width: 300px) {
  .evt-ent-table > tbody > tr {
    grid-template-areas: "order actions" "steam steam" "name name" "team team" "car car" "extra extra";
  }
}
.evt-el-more {
  margin-bottom: var(--sp-3);
}
.evt-autofill {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.evt-autofill > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  cursor: pointer;
}
.evt-autofill[open] > summary {
  border-bottom: 1px solid var(--border);
}
.evt-autofill-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.evt-autofill-search {
  max-width: 340px;
}
.evt-autofill-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 4px var(--sp-4);
  max-height: 18rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.evt-autofill-list > li > .check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--sp-2);
  padding: 4px 0;
}
.evt-steamid {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.evt-autofill-none {
  color: var(--text-2);
}
.evt-session-list,
.evt-view-cars,
.evt-view-jobs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.evt-session-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.evt-session-list > li > .session-tag {
  min-width: 7.5rem;
}
.evt-view-cars > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--sp-2);
}
.evt-view-jobs > li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.evt-job-meta {
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.evt-launch {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
@media (min-width: 1100px) {
  .evt-launch {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}
.evt-launch > .card {
  margin: 0;
}
.evt-launch-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
}
.evt-launch-form > .form-actions {
  justify-content: flex-start;
  margin-top: 0;
}
.evt-servers {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 0;
  border: 0;
}
.evt-server {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.evt-server:has(.evt-server-pick > input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.evt-server-pick {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}
.evt-server-pick > input {
  flex: none;
  margin-top: 3px;
}
.evt-server-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.evt-server-name {
  font-weight: 600;
}
.evt-server-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--sp-3);
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.alert.evt-server-alert {
  margin: 0;
}
.evt-server-replace {
  font-size: var(--fs-sm);
}
.evt-launch-why {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  color: var(--warn-fg);
}
.evt-card-head {
  margin: 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
}
.evt-strong {
  font-weight: 600;
}
.evt-when {
  white-space: nowrap;
}
.badge.evt-result {
  white-space: normal;
}
.evt-group > .evt-group-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  font-weight: 600;
}
.evt-group[open] > .evt-group-summary {
  border-bottom: 1px solid var(--border);
}
.evt-howto {
  margin-top: var(--sp-2);
}
.evt-toggle {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 6px 4px;
  border: 0;
  border-radius: var(--r-full);
  background: none;
  cursor: pointer;
}
.evt-toggle[aria-checked="true"] > .switch-track {
  background: var(--accent);
}
.evt-toggle[aria-checked="true"] > .switch-track::after {
  transform: translateX(16px);
}
.evt-toggle:focus-visible {
  outline: none;
}
.evt-toggle:focus-visible > .switch-track {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.evt-schedule-form {
  max-width: var(--w-narrow);
}
@media (min-width: 1360px) {
  .evt-schedule-form {
    max-width: 1120px;
  }
  .evt-schedule-sections {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--sp-4) var(--sp-5);
    align-items: start;
  }
  .evt-schedule-sections > .evt-preview-card {
    position: sticky;
    top: calc(var(--topbar-h) + var(--sp-4));
    grid-column: 2;
    grid-row: 1 / span 5;
  }
}
.evt-what {
  margin: 0 0 var(--sp-2);
}
.evt-preset-ready {
  margin: var(--sp-2) 0 0;
}
.evt-preset-ready:empty {
  display: none;
}
.evt-local-time:empty {
  display: none;
}
.evt-repeat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-4);
}
.evt-repeat-grid > .evt-weekdays {
  grid-column: 1 / -1;
  padding: 0;
  border: 0;
}
.evt-repeat-grid .input-unit {
  max-width: 12rem;
}
.evt-day-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.evt-day {
  position: relative;
  display: inline-flex;
  margin: 0;
  cursor: pointer;
}
.evt-day > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.evt-day > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: var(--h-sm);
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  color: var(--text-2);
  font-weight: 500;
}
.evt-day > input:checked + span {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--accent);
  font-weight: 600;
}
.evt-day > input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.evt-late {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 0;
  border: 0;
}
.evt-late-grace {
  max-width: 14rem;
  margin-left: 26px;
}
.evt-preview-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding-left: var(--sp-6);
  font-variant-numeric: tabular-nums;
}
.evt-preview-list:empty {
  display: none;
}
.evt-preview-rule {
  margin: 0 0 var(--sp-2);
}
.evt-preview-rule:empty {
  display: none;
}
.evt-preview-empty {
  margin: 0;
}
.evt-preview-note {
  margin: var(--sp-2) 0 0;
}
.evt-preview-list:empty + .evt-preview-note {
  display: none;
}
.evt-preview-card [data-evt-conflicts] {
  margin-top: var(--sp-3);
}
.evt-conflicts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--sp-1) 0 var(--sp-2);
  padding-left: var(--sp-5);
  font-variant-numeric: tabular-nums;
}
.switch.evt-enabled {
  margin-right: auto;
}
@media (max-width: 639.98px) {
  .evt-schedule-form > .evt-form-actions {
    flex-wrap: wrap;
  }
  .switch.evt-enabled {
    flex-basis: 100%;
  }
}
.evt-cal-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.evt-cal-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.evt-cal-month {
  min-width: 9.5rem;
  margin: 0;
  font-size: var(--fs-h2);
  text-align: center;
}
.evt-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  margin: 0;
  padding: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
  list-style: none;
}
.evt-cal-legend > li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card.evt-cal-card {
  padding: 0;
  overflow: hidden;
}
.evt-cal {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.evt-cal > thead > tr > th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
}
.evt-cal-day {
  height: 7.25rem;
  padding: 6px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.evt-cal-day:last-child {
  border-right: 0;
}
.evt-cal > tbody > tr:last-child > .evt-cal-day {
  border-bottom: 0;
}
.evt-cal-day.evt-cal-out {
  background: var(--surface-2);
}
.evt-cal-day.evt-cal-today {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.evt-cal-dayhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 4px;
}
.evt-cal-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 4px;
  border-radius: var(--r-full);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.evt-cal-out .evt-cal-date {
  color: var(--text-2);
}
.evt-cal-today .evt-cal-date {
  background: var(--accent);
  color: var(--on-accent);
}
a.evt-cal-date:hover {
  background: var(--surface-2);
  color: var(--accent);
  text-decoration: none;
}
.evt-cal-today a.evt-cal-date:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}
.evt-cal-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r);
  color: var(--text-2);
  transition: opacity var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .evt-cal-add {
    opacity: 0;
  }
  .evt-cal-day:hover .evt-cal-add,
  .evt-cal-add:focus-visible {
    opacity: 1;
  }
}
.evt-cal-add:hover {
  background: var(--surface-2);
  color: var(--accent);
}
.evt-cal-add .icon {
  width: 16px;
  height: 16px;
}
.evt-cal-chips {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.evt-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 2px 6px;
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.75rem;
  line-height: 1.35;
}
.evt-chip[data-kind="championship"] {
  border-left-color: var(--best);
}
a.evt-chip:hover {
  background: var(--accent-weak);
  color: var(--text);
  text-decoration: none;
}
.evt-chip-time {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.evt-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evt-chip-auto {
  display: inline-flex;
  flex: none;
  color: var(--ok-fg);
}
.evt-chip-auto .icon {
  width: 13px;
  height: 13px;
}
.evt-cal-more {
  display: inline-block;
  margin-top: 3px;
  font-size: 0.75rem;
  font-weight: 500;
}
.evt-cal-dots {
  display: none;
}
.evt-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.evt-dot[data-kind="championship"] {
  background: var(--best);
}
.evt-cal-agenda-month {
  display: none;
}
.evt-cal-note {
  margin: 0 0 var(--sp-4);
}
.evt-agenda {
  table-layout: fixed;
}
.evt-agenda > thead th:nth-child(1) {
  width: 8.5rem;
}
.evt-agenda > thead th:nth-child(3) {
  width: 26%;
}
.evt-agenda > thead th:nth-child(4) {
  width: 14.5rem;
}
.evt-agenda-day > th {
  padding: var(--sp-3) var(--sp-5) 6px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-h3);
  font-weight: 600;
  text-align: left;
}
.evt-agenda > tbody + tbody > .evt-agenda-day > th {
  border-top: 1px solid var(--border);
}
.evt-agenda-time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.evt-agenda-tags {
  text-align: right;
}
.evt-agenda-tags > .badge + .badge {
  margin-left: 4px;
}
.evt-agenda tr.evt-past > td,
.evt-agenda tr.evt-past .row-link {
  color: var(--text-2);
}
.evt-cal-total {
  margin: 0;
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
}
.evt-ics-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}
.evt-ics-body > p {
  margin: 0;
}
.evt-ics-body .copy-field {
  margin-top: var(--sp-2);
}
@media (max-width: 719.98px) {
  .evt-cal > thead > tr > th {
    padding: 6px 2px;
    text-align: center;
  }
  .evt-cal-day {
    height: 3.25rem;
    padding: 4px 2px;
    text-align: center;
  }
  .evt-cal-dayhead {
    justify-content: center;
    margin: 0;
  }
  .evt-cal-chips,
  .evt-cal-more,
  .evt-cal-add {
    display: none;
  }
  .evt-cal-dots {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-top: 2px;
  }
  .evt-cal-agenda-month {
    display: block;
  }
  .evt-cal-legend {
    width: 100%;
  }
}
@media (max-width: 639.98px) {
  .evt-agenda-day > th {
    display: block;
    padding: var(--sp-3) 0 2px;
    border-bottom: 0;
  }
  .evt-agenda-tags {
    text-align: left;
  }
  .evt-agenda td.evt-agenda-tags:empty {
    display: none;
  }
  .evt-cal-total {
    padding: var(--sp-3) var(--sp-4);
  }
}
.evt-bop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.evt-bop-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  padding: 1px 8px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  font-size: var(--fs-sm);
}
.evt-refs > summary {
  color: var(--accent);
  cursor: pointer;
}
.evt-refs > ul {
  margin: 4px 0 0;
  padding-left: var(--sp-5);
}
.evt-bop-editor {
  container-type: inline-size;
}
.evt-bop-table {
  width: 100%;
  border-collapse: collapse;
}
.evt-bop-table > thead > tr > th {
  padding: 0 var(--sp-2) 6px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
}
.evt-bop-table > tbody > tr > td {
  padding: 6px var(--sp-2) 6px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.evt-bop-table > tbody > tr > td:first-child {
  width: 50%;
}
.evt-bop-table select {
  width: 100%;
}
.evt-bop-table .input-unit {
  max-width: 9rem;
}
.evt-bop-table > tbody > tr > td.evt-bop-actions {
  padding-right: 0;
  font-size: var(--fs-sm);
  text-align: right;
  white-space: nowrap;
}
.evt-bop-search {
  flex: 1 1 200px;
  max-width: 320px;
}
@container (max-width: 520px) {
  .evt-bop-table > thead {
    display: none;
  }
  .evt-bop-table,
  .evt-bop-table > tbody {
    display: block;
  }
  .evt-bop-table > tbody > tr.evt-bop-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border);
  }
  .evt-bop-table > tbody > tr > td {
    width: auto;
    padding: 0;
    border: 0;
  }
  .evt-bop-table > tbody > tr > td:first-child,
  .evt-bop-table > tbody > tr > td.evt-bop-actions {
    grid-column: 1 / -1;
    width: auto;
  }
  .evt-bop-table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 600;
  }
}
.card.evt-danger {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}
.evt-danger > form {
  margin: 0;
}
.evt-ref-list {
  margin: var(--sp-3) 0 var(--sp-4);
  padding-left: var(--sp-5);
}
.badge.evt-vip {
  background: var(--gold-bg);
  color: var(--gold-fg);
}
.card.evt-import-report {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.evt-import-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.evt-import-lines > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--sp-2);
}
.evt-import-n {
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.evt-import-text {
  min-width: 0;
}
.evt-import-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: var(--w-narrow);
  margin: 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}
.evt-import-form textarea {
  font-family: var(--font-mono);
}
.field-hint.evt-password-unsaved {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--warn-fg);
}
/* --- css/62-results.css --- */
.res-filters {
  margin: 0 0 var(--sp-4);
}
.res-filters > .res-chips {
  margin-bottom: var(--sp-3);
}
.toolbar.res-toolbar {
  margin-bottom: 0;
}
.res-toolbar > input[type="search"] {
  max-width: 260px;
}
.res-toolbar > .switch {
  margin: 0 var(--sp-1);
  white-space: nowrap;
}
.res-active-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  color: var(--text-2);
}
.res-active-filter > strong {
  color: var(--text);
}
.res-active-filter > .icon {
  width: 16px;
  height: 16px;
}
.card.res-flush {
  padding: 0;
  overflow: hidden;
}
.res-flush > .table-wrap > .table thead th:first-child,
.res-flush > .table-wrap > .table td:first-child {
  padding-left: var(--sp-5);
}
.res-flush > .table-wrap > .table thead th:last-child,
.res-flush > .table-wrap > .table td:last-child {
  padding-right: var(--sp-5);
}
.res-filter-empty {
  margin: 0;
  padding: var(--sp-6) var(--sp-5);
  color: var(--text-2);
  text-align: center;
}
.res-sub {
  display: block;
  margin-top: 2px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.res-sub.res-sub-car {
  display: none;
}
@media (max-width: 639.98px) {
  .res-sub.res-sub-car {
    display: block;
  }
}
.res-name {
  font-weight: 500;
}
.res-name a {
  font-weight: 600;
}
.res-sessions td {
  vertical-align: top;
}
.res-sessions td.res-track {
  white-space: nowrap;
}
.res-when {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}
.res-when > time {
  font-variant-numeric: tabular-nums;
}
.res-session {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--sp-2);
}
.res-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.res-lap-link:hover {
  text-decoration: none;
}
.res-lap-link:hover > .t {
  text-decoration: underline;
}
.res-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 2px;
}
.res-meta > *:has(+ *)::after {
  content: "·";
  margin: 0 var(--sp-2);
  color: var(--text-3);
}
.res-meta .icon {
  width: 15px;
  height: 15px;
  margin-right: 4px;
  vertical-align: -2px;
  color: var(--text-3);
}
.res-summary {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  align-items: end;
  gap: var(--sp-4) var(--sp-6);
  margin: 0 0 var(--sp-5);
}
.podium.res-podium {
  margin: 0;
}
.res-podium-who {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
}
.res-pole {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.res-podium-time {
  font-family: var(--font-mono);
  font-weight: 600;
}
.res-anchors {
  align-content: flex-end;
}
.res-anchors .t {
  font-size: 1em;
}
@media (max-width: 899.98px) {
  .res-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}
.res-block .card-head {
  margin-bottom: var(--sp-3);
}
.res-card-note {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.res-classification td {
  white-space: nowrap;
}
.res-classification td:nth-child(2) {
  min-width: 12rem;
  white-space: normal;
}
.res-out td {
  color: var(--text-2);
}
.res-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.res-time > .badge {
  font-family: var(--font);
}
.res-place {
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--topbar-h) + var(--sp-4));
}
.res-place > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--sp-3);
  margin: 0 calc(-1 * var(--sp-2));
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r);
  list-style: none;
  cursor: pointer;
}
.res-place > summary::-webkit-details-marker {
  display: none;
}
.res-place > summary::before {
  content: "";
  flex: none;
  align-self: center;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: rotate(-45deg);
  transition: transform var(--dur-fast) var(--ease);
}
.res-place[open] > summary::before {
  transform: rotate(45deg);
}
.res-place > summary:hover {
  background: var(--surface-2);
}
.res-place-pos {
  min-width: 2.6em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.res-place-name {
  font-weight: 600;
}
.res-place-meta {
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.res-place > .table-wrap {
  margin: 0 0 var(--sp-4);
}
.res-laps-table th,
.res-laps-table td {
  white-space: nowrap;
}
.res-laps tr[id] {
  scroll-margin-top: calc(var(--topbar-h) + var(--sp-4));
}
.res-lap-form tr[id] {
  scroll-margin-top: calc(var(--topbar-h) + 9rem);
}
.res-laps tr:target > td,
.res-laps tr.lap-invalid:target > td {
  background: var(--accent-weak);
}
.res-laps tr.lap-invalid > td:first-child {
  box-shadow: inset 3px 0 0 var(--dot-err);
}
.res-valid {
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.res-lap-form {
  margin: 0;
}
.res-editbar {
  position: sticky;
  top: calc(var(--topbar-h) + var(--sp-2));
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: var(--r-lg);
  background: var(--accent-weak);
  box-shadow: var(--shadow-2);
}
.res-editbar-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--accent);
  font-weight: 600;
}
.res-editbar > label {
  margin: 0;
  font-weight: 500;
}
.res-editbar > input {
  flex: 1 1 240px;
  min-width: 0;
}
.res-lap-toggle[value="invalidate"]:hover {
  background: var(--err-bg);
  color: var(--err-fg);
}
.res-lap-toggle[value="validate"]:hover {
  background: var(--ok-bg);
  color: var(--ok-fg);
}
.res-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--sp-3);
  color: var(--accent);
  cursor: pointer;
}
.card.res-danger {
  padding: 0;
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}
.res-danger-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  color: var(--danger);
  font-weight: 600;
}
.res-danger[open] > .res-danger-summary {
  border-bottom: 1px solid var(--border);
}
.res-danger-body {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}
.res-danger-body > p {
  margin-top: 0;
  color: var(--text-2);
}
.stack.res-danger-form {
  gap: var(--sp-3);
}
.res-best-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding: 10px var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.res-best-line > .icon {
  color: var(--best);
}
.res-best-line > span:has(+ span)::after {
  content: "·";
  margin-left: var(--sp-3);
  color: var(--text-3);
}
.res-best-car {
  color: var(--text-2);
}
.res-best-line .t {
  font-size: 1em;
}
.res-group > th {
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.res-group .icon {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  vertical-align: -3px;
  color: var(--text-2);
}
.res-leaderboard tr.res-me > td {
  background: var(--accent-weak);
}
.page-title.res-driver-title {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.avatar.res-avatar {
  width: 48px;
  height: 48px;
  font-size: 1rem;
}
.res-records td,
.res-recent td {
  vertical-align: middle;
}
.kpis.res-kpis {
  margin-bottom: var(--sp-4);
}
.res-rating {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.res-rating-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.res-rating-label {
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.res-rating-count {
  flex: none;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.res-rating .meter {
  margin-top: 4px;
}
.res-export {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: start;
  gap: var(--sp-4);
}
.res-export > .card {
  margin: 0;
}
.res-export .card-title .icon {
  margin-right: 6px;
  vertical-align: -3px;
  color: var(--text-2);
}
.res-export .res-chips {
  margin-bottom: var(--sp-4);
}
.res-period {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  align-items: end;
  gap: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-3);
}
.res-period > .btn {
  justify-self: start;
}
.res-period > .res-period-stage {
  grid-column: span 2;
}
@media (max-width: 639.98px) {
  .res-period > .res-period-stage {
    grid-column: 1 / -1;
  }
}
.res-export-count {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  background: var(--surface-2);
}
.res-export-count > .icon {
  color: var(--text-2);
}
.res-formats {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  border: 0;
}
.res-format {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  font-weight: 400;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.res-format:hover {
  border-color: var(--accent);
}
.res-format:has(> input:checked) {
  border-color: var(--accent);
  background: var(--accent-weak);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.res-format > input {
  margin-top: 3px;
}
.res-format-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.res-format-title {
  font-weight: 600;
}
.res-format-text {
  color: var(--text-2);
  font-size: var(--fs-sm);
}
@media (max-width: 639.98px) {
  .res-toolbar > input[type="search"] {
    max-width: none;
  }
  .res-tabs > a > .icon {
    display: none;
  }
  .res-meta {
    column-gap: var(--sp-3);
  }
  .res-meta > *:has(+ *)::after {
    content: none;
  }
  .res-podium-who {
    flex: 1 1 auto;
    align-items: flex-start;
  }
  .res-podium .res-podium-time {
    flex: none;
    margin-left: auto;
  }
  .res-editbar {
    position: static;
  }
  .res-lap-form tr[id] {
    scroll-margin-top: calc(var(--topbar-h) + var(--sp-4));
  }
  .res-flush > .table-wrap > .table thead th:first-child,
  .res-flush > .table-wrap > .table td:first-child,
  .res-flush > .table-wrap > .table thead th:last-child,
  .res-flush > .table-wrap > .table td:last-child {
    padding-right: var(--sp-4);
    padding-left: var(--sp-4);
  }
  .res-flush > .table-wrap > .table.stack-sm tr {
    padding-right: var(--sp-4);
    padding-left: var(--sp-4);
  }
  .res-flush > .table-wrap > .table.stack-sm td:first-child,
  .res-flush > .table-wrap > .table.stack-sm td:last-child {
    padding-right: 0;
    padding-left: calc(38% + var(--sp-2));
  }
  .res-when {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 var(--sp-2);
  }
  .page-title.res-driver-title {
    gap: var(--sp-3);
  }
  .avatar.res-avatar {
    width: 40px;
    height: 40px;
  }
  .res-classification th,
  .res-classification td {
    padding-right: 6px;
    padding-left: 6px;
  }
  .table.res-classification thead th {
    white-space: normal;
  }
  .res-classification td:nth-child(2) {
    min-width: 6rem;
  }
  .res-classification .res-time {
    flex-wrap: wrap;
    row-gap: 2px;
  }
}
/* --- css/63-championships.css --- */
.chp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--sp-2);
}
.chp-meta > span:has(~ span)::after,
.chp-next-meta > span:has(~ span)::after,
.chp-event-meta > span:has(~ span)::after,
.chp-card-meta > span:has(~ span)::after {
  content: "·";
  margin-left: var(--sp-2);
  color: var(--text-3);
}
.chp-desc {
  max-width: 72ch;
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-5);
  color: var(--text-2);
}
.chp-desc > p {
  margin: 0 0 var(--sp-2);
  white-space: pre-line;
}
.chp-stage-status {
  margin: var(--sp-2) 0 0;
}
.chp-note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
}
.chp-season > .card-head {
  margin-bottom: var(--sp-3);
}
.chp-season-done {
  margin: 0;
}
.chp-steps-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
}
.chp-steps {
  margin-bottom: var(--sp-1);
}
.chp-steps > .step {
  min-width: 8.5rem;
}
.chp-next {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
}
.chp-next-icon {
  display: inline-flex;
  flex: none;
  color: var(--accent);
}
.chp-next-body {
  flex: 1 1 auto;
  min-width: 0;
}
.chp-next-title {
  margin: 0;
  font-weight: 600;
}
.chp-next-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--sp-2);
  margin: 2px 0 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.chp-setup {
  border-style: dashed;
}
.chp-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.chp-check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.chp-check-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
  font-weight: 600;
}
.chp-check[data-done="true"] > .chp-check-mark {
  background: var(--ok-bg);
  color: var(--ok-fg);
}
.chp-check-body {
  flex: 1 1 auto;
  min-width: 0;
}
.chp-check-body > p {
  margin: 0;
}
.chp-check-title {
  font-weight: 600;
}
.chp-tabs {
  scroll-margin-top: calc(var(--topbar-h) + var(--sp-3));
}
.chp-class {
  scroll-margin-top: calc(var(--topbar-h) + var(--sp-3));
}
.chp-podium {
  max-width: 640px;
  margin-right: auto;
  margin-left: auto;
}
.chp-place {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chp-move {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chp-move[data-dir="up"] {
  color: var(--ok-fg);
}
.chp-move[data-dir="down"] {
  color: var(--err-fg);
}
.chp-move[data-dir="new"] {
  color: var(--text-2);
  font-weight: 500;
}
.chp-driver {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--sp-2);
}
.chp-driver-name {
  font-weight: 600;
}
.chp-nation {
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.chp-sub {
  display: block;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.chp-reason {
  font-style: italic;
}
.chp-points {
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.chp-form {
  display: inline-flex;
  gap: 4px;
}
.chp-standings th:first-child,
.chp-teams th:first-child,
.chp-results th:first-child {
  width: 4.5rem;
}
.chp-mine > td,
.chp-mine > th {
  background: var(--accent-weak);
}
.chp-mine > :first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
.chp-team {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.chp-team-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--dot-off);
}
.chp-team-hue-0 { background: #e11d48; }
.chp-team-hue-1 { background: #ea580c; }
.chp-team-hue-2 { background: #d97706; }
.chp-team-hue-3 { background: #65a30d; }
.chp-team-hue-4 { background: #16a34a; }
.chp-team-hue-5 { background: #0d9488; }
.chp-team-hue-6 { background: #0891b2; }
.chp-team-hue-7 { background: #2563eb; }
.chp-team-hue-8 { background: #4f46e5; }
.chp-team-hue-9 { background: #9333ea; }
.chp-team-hue-10 { background: #db2777; }
.chp-team-hue-11 { background: #64748b; }
.chp-penalty-note {
  color: var(--err-fg);
}
.chp-members {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.chp-member {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 8px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.chp-member-pts {
  color: var(--text-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.chp-heat th,
.chp-heat td {
  text-align: center;
}
.chp-heat thead th:first-child,
.chp-heat tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 3.25rem;
  min-width: 3.25rem;
  background: var(--surface);
}
.chp-heat thead th:nth-child(2),
.chp-heat .chp-heat-name {
  position: sticky;
  left: 3.25rem;
  z-index: 2;
  background: var(--surface);
  box-shadow: inset -1px 0 0 var(--border);
  text-align: left;
  white-space: nowrap;
}
.chp-heat thead th:last-child,
.chp-heat tbody td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: inset 1px 0 0 var(--border);
}
.chp-heat thead th:first-child,
.chp-heat thead th:nth-child(2),
.chp-heat thead th:last-child {
  background: var(--surface-2);
}
.chp-heat .chp-heat-name {
  color: var(--text);
  font-size: var(--fs);
  font-weight: 600;
}
.chp-heat .chp-mine > td:first-child,
.chp-heat .chp-mine > .chp-heat-name,
.chp-heat .chp-mine > td:last-child {
  background: var(--accent-weak);
}
.chp-heat-head > a {
  display: block;
  color: var(--text);
  font-weight: 700;
}
.chp-heat-track {
  display: block;
  max-width: 7rem;
  margin: 0 auto;
  overflow: hidden;
  color: var(--text-2);
  font-size: 0.6875rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chp-heat .chp-heat-cell {
  min-width: 3.5rem;
  border-left: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.chp-heat-pts {
  display: block;
  font-weight: 700;
}
.chp-heat-pos {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
}
.chp-heat-cell > .icon {
  width: 12px;
  height: 12px;
}
.chp-heat .chp-heat-cell[data-result="p1"] {
  background: var(--gold-bg);
  color: var(--gold-fg);
}
.chp-heat .chp-heat-cell[data-result="p2"] {
  background: var(--silver-bg);
  color: var(--silver-fg);
}
.chp-heat .chp-heat-cell[data-result="p3"] {
  background: var(--bronze-bg);
  color: var(--bronze-fg);
}
.chp-heat .chp-heat-cell[data-result="points"] {
  background: var(--ok-bg);
  color: var(--ok-fg);
}
.chp-heat .chp-heat-cell[data-result="nopoints"],
.chp-heat .chp-heat-cell[data-result="dns"],
.chp-heat .chp-heat-cell[data-result="nc"] {
  background: var(--off-bg);
  color: var(--off-fg);
}
.chp-heat .chp-heat-cell[data-result="absent"] {
  color: var(--text-3);
}
.chp-heat .chp-heat-cell[data-result="dq"] {
  background: var(--err-bg);
  color: var(--err-fg);
}
.chp-heat .chp-heat-cell[data-result="dropped"] {
  color: var(--text-2);
}
.chp-heat-cell[data-result="dropped"] > .chp-heat-pts,
.chp-heat-cell[data-result="dropped"] > .chp-heat-pos {
  text-decoration: line-through;
}
.chp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.chp-legend > li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chp-events {
  margin: 0;
  padding: 0;
  list-style: none;
}
.chp-event {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--topbar-h) + var(--sp-4));
}
.chp-event:first-child {
  padding-top: 0;
  border-top: 0;
}
.chp-event-main {
  min-width: 0;
}
.chp-event-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  margin: 0;
  font-size: var(--fs-h3);
}
.chp-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--sp-2);
  margin: 2px 0 0;
  color: var(--text-2);
}
.chp-event-sessions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: var(--sp-2) 0 0;
}
.chp-event-podium {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
}
.chp-event-podium > .icon {
  width: 16px;
  height: 16px;
  color: var(--gold-fg);
}
.chp-event-note {
  margin: var(--sp-2) 0 0;
}
.chp-event-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--sp-1);
}
.chp-event-actions > form {
  margin: 0;
}
.chp-add {
  scroll-margin-top: calc(var(--topbar-h) + var(--sp-4));
}
.chp-add-form {
  margin: 0 0 var(--sp-3);
}
.chp-add-actions {
  margin-top: var(--sp-4);
}
.chp-entrants .mono {
  white-space: nowrap;
}
.chp-points-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.chp-points-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
}
.chp-points-place {
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.chp-points-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.chp-rule > .card-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-h3);
}
.chp-rule-list {
  margin: 0;
  padding-left: var(--sp-5);
}
.chp-rule-list > li + li {
  margin-top: var(--sp-2);
}
.chp-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  font-weight: 600;
}
.chp-summary-title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-h2);
}
.chp-summary-meta {
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 400;
}
.chp-details-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}
.chp-details-body > .chp-note,
.chp-details-body > .table-wrap + .chp-note {
  margin: 0;
}
.chp-penalties,
.chp-stewards,
.chp-session,
.chp-stage-penalties {
  scroll-margin-top: calc(var(--topbar-h) + var(--sp-4));
}
.chp-penalty-forms {
  margin: 0;
}
.chp-penalty-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.chp-decision,
.chp-points-penalty {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
}
.chp-decision-actions {
  margin: 0;
}
.chp-form-title {
  margin: 0;
  font-size: var(--fs-h3);
}
.chp-journal {
  margin-top: calc(-1 * var(--sp-2));
}
.chp-length {
  margin-left: var(--sp-1);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.chp-results .badge {
  margin-left: var(--sp-1);
}
.chp-pts {
  display: inline-block;
  text-align: right;
}
.chp-pts > summary {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  list-style: none;
  text-decoration: underline dotted var(--text-3);
  text-underline-offset: 3px;
  cursor: pointer;
}
.chp-pts > summary::-webkit-details-marker {
  display: none;
}
.chp-pts-detail {
  display: block;
  margin-top: 2px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 400;
  white-space: nowrap;
}
.chp-finish .chp-podium {
  margin-bottom: var(--sp-4);
}
.chp-awards {
  margin: 0;
}
.chp-live {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.chp-live-lead {
  margin: 0 0 var(--sp-3);
}
.chp-live-kv {
  margin-bottom: var(--sp-4);
}
.chp-session-steps {
  margin-top: var(--sp-2);
}
.chp-run-actions {
  margin: 0;
}
.chp-run-actions > form {
  margin: 0;
}
.chp-run {
  scroll-margin-top: calc(var(--topbar-h) + var(--sp-4));
}
.chp-start {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-3);
}
.chp-servers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  border: 0;
}
.chp-servers-title {
  margin-bottom: var(--sp-2);
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
}
.chp-server {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0;
  color: var(--text);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.chp-server:hover {
  border-color: var(--accent);
}
.chp-server:has(> input:checked) {
  border-color: var(--accent);
  background: var(--accent-weak);
  box-shadow: 0 0 0 1px var(--accent);
}
.chp-server > input {
  flex: none;
  margin-top: 3px;
}
.chp-server-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.chp-server-name {
  font-weight: 600;
}
.chp-server-event {
  color: var(--text-2);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.chp-replace {
  align-self: flex-start;
}
.chp-cards {
  margin-bottom: var(--sp-6);
}
.chp-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.chp-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
}
.chp-card-title {
  margin: 0;
  font-size: var(--fs-h2);
}
.chp-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--sp-2);
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.chp-card-progress {
  margin: 0;
}
.chp-card-progress > .progress {
  margin: 4px 0 0;
}
.chp-card-facts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.chp-card-facts > li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  min-width: 0;
}
.chp-card-facts > li > .icon {
  flex: none;
  margin-top: 2px;
  color: var(--text-2);
}
.chp-card-done {
  gap: var(--sp-2);
}
.chp-card-champion {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
}
.chp-card-champion > .icon {
  flex: none;
  color: var(--gold-fg);
}
.chp-section-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h2);
}
.chp-points-editor {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.chp-points-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chp-points-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.chp-points-preview > li {
  white-space: nowrap;
}
.chp-points-preview > li:has(+ li)::after {
  content: "·";
  margin-left: 6px;
  color: var(--text-3);
}
.chp-points-presets {
  align-items: center;
}
.chp-points-presets-label {
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.chp-import-slot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
@media (max-width: 639.98px) {
  .chp-standings th,
  .chp-standings td,
  .chp-teams th,
  .chp-teams td,
  .chp-results th,
  .chp-results td {
    padding-right: 6px;
    padding-left: 6px;
  }
  .chp-standings th:first-child,
  .chp-teams th:first-child,
  .chp-results th:first-child {
    width: 3.25rem;
  }
  .chp-nation {
    display: none;
  }
  .chp-steps-wrap {
    overflow: visible;
  }
  .chp-steps > .step {
    min-width: 0;
  }
  .chp-next,
  .chp-check {
    flex-wrap: wrap;
  }
  .chp-event {
    flex-direction: column;
  }
  .chp-pts-detail {
    white-space: normal;
  }
  .chp-form-actions > .chp-cancel {
    display: none;
  }
  .chp-form-actions > .btn {
    flex: 1 1 auto;
  }
}
.field-hint.chp-import-choice {
  color: var(--text);
  overflow-wrap: anywhere;
}
/* --- css/64-admin.css --- */
.adm-section-title {
  margin: var(--sp-6) 0 var(--sp-3);
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tabs + section > .adm-section-title,
.adm-day:first-of-type > .adm-section-title {
  margin-top: 0;
}
.adm-line,
.adm-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  margin: 0;
}
.adm-meta > span:not(.badge):has(+ span:not(.badge))::after {
  content: "·";
  margin-left: var(--sp-2);
  color: var(--text-3);
}
.adm-sub {
  display: block;
  margin: 2px 0 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.adm-strong {
  display: block;
  margin: 0;
  font-weight: 600;
}
.adm-inline {
  display: inline-flex;
  margin: 0;
  vertical-align: middle;
}
.adm-count {
  padding: 0 7px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
  white-space: nowrap;
}
.adm-after {
  margin: var(--sp-3) 0 0;
}
.adm-flush {
  padding: 0;
}
.adm-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-h3);
  font-weight: 600;
  list-style: none;
}
.adm-flush > .adm-head:not(:last-child) {
  border-bottom: 1px solid var(--border);
}
.adm-head > .icon {
  color: var(--text-2);
}
.adm-head > .adm-count {
  margin-left: auto;
}
.adm-head > .adm-sub {
  margin: 0 0 0 auto;
  font-weight: 400;
}
details.adm-flush:not([open]) > .adm-head {
  border-bottom: 0;
}
.adm-body {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}
.adm-body > :last-child {
  margin-bottom: 0;
}
.adm-items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.adm-items > * + * {
  border-top: 1px solid var(--border);
}
.adm-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
}
.adm-item-body {
  flex: 1 1 260px;
  min-width: 0;
}
.adm-item > form {
  margin: 0;
}
.adm-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
}
.adm-icon > .icon {
  width: 17px;
  height: 17px;
}
.adm-icon[data-tone="info"] {
  background: var(--info-bg);
  color: var(--info-fg);
}
.adm-icon[data-tone="ok"] {
  background: var(--ok-bg);
  color: var(--ok-fg);
}
.adm-icon[data-tone="warn"] {
  background: var(--warn-bg);
  color: var(--warn-fg);
}
.adm-icon[data-tone="error"] {
  background: var(--err-bg);
  color: var(--err-fg);
}
.adm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
.adm-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: var(--sp-2) 10px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-weight: 400;
}
label.adm-opt {
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
label.adm-opt:hover {
  background: var(--surface-2);
}
label.adm-opt:has(> input:checked) {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: var(--accent-weak);
}
.adm-opt > input,
.adm-opt > .icon {
  flex: none;
  margin-top: 2px;
}
.adm-opt > .icon {
  color: var(--dot-ok);
}
.adm-opt > span {
  min-width: 0;
}
.adm-opt .badge {
  margin-top: 4px;
}
label.adm-opt.adm-card {
  padding: var(--sp-3) var(--sp-4);
  border-color: var(--border-strong);
  background: var(--surface);
}
label.adm-opt.adm-card:hover,
label.adm-opt.adm-card:has(> input:checked) {
  border-color: var(--accent);
}
label.adm-opt.adm-card:has(> input:checked) {
  background: var(--accent-weak);
  box-shadow: inset 0 0 0 1px var(--accent);
}
label.adm-opt:has(> input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.adm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.adm-tags > li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.adm-tags .adm-count {
  margin-right: -6px;
  background: var(--accent-weak);
  color: var(--accent);
}
.adm-list > .toolbar {
  margin: 0;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.adm-list > .table-wrap:first-child > .table thead th:first-child {
  border-top-left-radius: calc(var(--r-lg) - 1px);
}
.adm-list > .table-wrap:first-child > .table thead th:last-child {
  border-top-right-radius: calc(var(--r-lg) - 1px);
}
.adm-list > .pager,
.adm-list > .adm-after {
  margin: 0;
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
}
@media (min-width: 640px) {
  .adm-list .table :is(th, td):first-child {
    padding-left: var(--sp-5);
  }
  .adm-list .table :is(th, td):last-child {
    padding-right: var(--sp-5);
  }
}
@media (max-width: 639.98px) {
  .adm-list > .toolbar,
  .adm-list > .pager,
  .adm-list > .adm-after,
  .adm-list .table.stack-sm tr,
  .adm-head,
  .adm-body,
  .adm-item {
    padding-right: var(--sp-4);
    padding-left: var(--sp-4);
  }
}
.adm-user {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.adm-user > .avatar {
  margin-top: 1px;
}
.adm-user .adm-line {
  margin-top: 3px;
}
.adm-onetime .copy-field {
  flex-wrap: wrap;
  max-width: 420px;
  margin: var(--sp-2) 0;
  background: var(--surface);
}
.adm-onetime .copy-value {
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}
.adm-onetime .adm-line {
  flex-wrap: nowrap;
  align-items: flex-start;
}
.adm-onetime .adm-line > .icon {
  margin-top: 2px;
}
.adm-danger {
  margin-top: var(--sp-6);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}
.adm-danger .adm-item {
  align-items: center;
}
.adm-warn {
  margin: var(--sp-4) 0 0;
}
.adm-roles {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.adm-roles > .cluster {
  margin: 6px 0;
}
.adm-cats {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.adm-cats > .card {
  margin: 0;
}
.adm-check-all {
  margin-bottom: var(--sp-3);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.adm-selected {
  margin-right: auto;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.adm-selected > span {
  color: var(--text);
  font-weight: 600;
}
.unsaved-note:not([hidden]) + .adm-selected {
  margin-right: 0;
}
.adm-scope-list {
  margin-top: var(--sp-4);
}
.form-grid.adm-pair {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.adm-form > * + * {
  margin-top: var(--sp-4);
}
.adm-form > .form-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.adm-row {
  align-items: start;
}
.adm-form > .form-actions,
.adm-split {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.adm-fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}
.adm-fieldset > legend {
  margin-bottom: 6px;
  padding: 0;
}
.adm-form > .more > p {
  max-width: 72ch;
}
.adm-box {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  background: var(--surface-2);
}
.adm-box > .adm-tags {
  margin: var(--sp-2) 0;
}
.adm-mask {
  padding: 0 4px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.adm-test {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: 0;
}
.adm-test > .field-hint {
  flex: 1 1 220px;
}
.adm-subtitle {
  margin: var(--sp-5) 0 var(--sp-3);
  font-size: var(--fs-h3);
}
.adm-form > .adm-subtitle {
  margin-top: var(--sp-6);
}
.adm-task {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.adm-task > * {
  margin: 0;
}
.adm-task-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}
.adm-task-head > h3 {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
}
.adm-task-meta {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
}
dl.kv.adm-task-meta {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
dl.kv.adm-task-meta > dd {
  margin-bottom: 0;
}
dl.kv.adm-task-meta > dd + dt {
  margin-top: var(--sp-2);
}
.adm-task > :last-child {
  margin-top: auto;
}
.adm-kpi {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 1.0625rem;
}
.adm-kpi > .icon {
  color: var(--dot-ok);
}
.adm-kpi.adm-bad,
.adm-kpi.adm-bad > .icon {
  color: var(--err-fg);
}
.adm-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.adm-steps .copy-field {
  margin: var(--sp-2) 0;
}
.adm-filters {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
}
.adm-filters > .toolbar,
.adm-filters > .card {
  margin: 0;
}
.adm-filters .adm-head {
  padding: var(--sp-2) var(--sp-4);
  color: var(--text-2);
  font-size: var(--fs);
  font-weight: 500;
}
.adm-filters .form-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.adm-filters .form-actions {
  margin-top: var(--sp-4);
}
.adm-chip-x .icon {
  margin-right: -4px;
}
.adm-time {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.adm-time .ts-rel {
  display: block;
}
.adm-actor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.adm-actor > .icon {
  width: 16px;
  height: 16px;
  color: var(--text-3);
}
.adm-audit .more > pre {
  max-height: 260px;
  margin-bottom: var(--sp-2);
}
@media (min-width: 640px) {
  .adm-audit td:is(:first-child, :last-child) {
    width: 1%;
    white-space: nowrap;
  }
  .adm-audit td:nth-child(3) {
    width: 45%;
  }
}
.adm-square {
  width: var(--h);
  height: var(--h);
  border-color: var(--border-strong);
  background: var(--surface);
}
.adm-notes > .note.unread {
  background: color-mix(in srgb, var(--accent-weak) 70%, transparent);
}
.adm-notes > .note.unread::before {
  content: "";
  position: absolute;
  top: var(--sp-3);
  bottom: var(--sp-3);
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.adm-notes > .note:first-child {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.adm-notes > .note:last-child {
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.adm-notes > .note:only-child {
  border-radius: var(--r-lg);
}
.adm-notes .adm-item {
  gap: var(--sp-3);
}
.adm-title {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
}
button.adm-title {
  cursor: pointer;
}
button.adm-title:hover {
  color: var(--accent);
  text-decoration: underline;
}
.adm-notes > .note.quiet .adm-title {
  font-weight: 500;
}
.adm-text {
  margin: 2px 0 0;
  color: var(--text-2);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.adm-when {
  margin: var(--sp-1) 0 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.adm-when > time {
  color: var(--text-2);
}
.adm-when > time:has(+ .ts-rel)::after {
  content: " ·";
}
.adm-actions {
  display: flex;
  flex: none;
  gap: 2px;
  margin: -4px -8px 0 0;
}
.adm-actions > form {
  margin: 0;
}
@media (max-width: 639.98px) {
  .adm-notes .adm-when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 4px;
    min-height: 40px;
    margin: 0;
    padding-right: 84px;
  }
  .adm-notes .adm-actions {
    position: absolute;
    right: var(--sp-2);
    bottom: var(--sp-3);
    margin: 0;
  }
}
.adm-prio > label > span {
  justify-content: center;
  min-width: 88px;
}
.adm-prefs .adm-item {
  align-items: center;
}
@media (max-width: 639.98px) {
  .adm-prio {
    flex: 1 1 100%;
  }
  .adm-prio > label {
    flex: 1 1 0;
  }
  .adm-prio > label > span {
    width: 100%;
  }
}
.adm-sessions .is-current .adm-icon {
  background: var(--ok-bg);
  color: var(--ok-fg);
}
/* --- css/65-launcher.css --- */
.lch-page > .page-head {
  margin-bottom: var(--sp-4);
}
.lch-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.lch-mark {
  flex: none;
  width: 40px;
  height: 40px;
}
@media (max-width: 639.98px) {
  .lch-mark {
    width: 32px;
    height: 32px;
  }
}
.lch-card > .card-title {
  margin-bottom: var(--sp-3);
}
.lch-card > p {
  margin: 0 0 var(--sp-3);
}
.lch-card > p:last-child {
  margin-bottom: 0;
}
.lch-kv {
  margin-bottom: var(--sp-4);
}
.lch-card .lch-actions {
  margin: var(--sp-4) 0 var(--sp-3);
}
.lch-actions > form,
form.lch-actions {
  margin: var(--sp-4) 0 0;
}
.lch-label,
.lch-card > .lch-label {
  margin: var(--sp-4) 0 var(--sp-2);
}
.lch-card > .lch-kv + .lch-label {
  margin-top: 0;
}
.lch-steps {
  margin: 0 0 var(--sp-3);
  padding-left: var(--sp-5);
}
.lch-steps > li + li {
  margin-top: var(--sp-2);
}
.lch-after {
  margin: var(--sp-4) 0 0;
  color: var(--text-2);
}
.lch-disclaimer {
  margin-top: var(--sp-4);
}
.lch-join {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-2);
}
.lch-join-form {
  margin: 0;
}
.lch-lang {
  white-space: nowrap;
}
.lch-join-note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 0;
}
.lch-tokens {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lch-token {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
}
.lch-token + .lch-token {
  border-top: 1px solid var(--border);
}
.lch-token > form {
  margin: 0;
}
.lch-token.is-inactive .lch-token-body {
  color: var(--text-2);
}
.lch-token-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
}
.lch-token-body {
  flex: 1 1 260px;
  min-width: 0;
}
.lch-token-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  margin: 0;
}
.lch-strong {
  font-weight: 600;
}
.lch-token-sub {
  margin: 2px 0 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
@media (max-width: 639.98px) {
  .lch-token {
    padding-right: var(--sp-4);
    padding-left: var(--sp-4);
  }
}
.lch-mods-card > .table-wrap {
  border-radius: inherit;
}
.lch-mod-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  margin: 2px 0 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.lch-mod-sha,
.lch-mod-key,
.lch-mono {
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}
.lch-mod-sha {
  display: inline-block;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.lch-mod-kind {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  margin: 0 0 var(--sp-1);
}
.lch-mod-cars {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lch-mod-cars > li + li {
  margin-top: 2px;
}
.lch-mod-key {
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.lch-mod-refs > ul {
  margin: var(--sp-1) 0 0;
  padding-left: var(--sp-5);
}
.lch-mod-howto {
  margin-top: var(--sp-4);
}
.lch-mod-new > .form + .form {
  margin-top: var(--sp-5);
}
.lch-mod-new .form-section-head > h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.lch-mod-card > textarea {
  width: 100%;
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
}
.lch-mods {
  margin-top: var(--sp-4);
}
.lch-mods-set {
  margin: 0;
  padding: 0;
  border: 0;
}
.lch-mods-list {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.lch-mods-warn,
.lch-mods-ro {
  margin: 0;
}
.lch-mod-sub.lch-mod-noprefix {
  margin-top: var(--sp-1);
  font-weight: 500;
}
.lch-mods-noprefix {
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-5);
}