/**
 * Part-level UI overrides (density, radius, surfaces, modal, font).
 * Composes with pack chrome in nor-ui-packs.css. Never fights [hidden].
 */

/* Accent override hook */
html[style*="--ui-accent-override"] .btn--primary {
  background: var(--ui-accent-override) !important;
  border-color: var(--ui-accent-override) !important;
}

/* ── Density ── */
html[data-ui-density="compact"] .main {
  padding-top: 1rem !important;
  padding-bottom: 1.25rem !important;
}
html[data-ui-density="compact"] .panel {
  margin-bottom: 0.85rem !important;
}
html[data-ui-density="compact"] .panel__head,
html[data-ui-density="compact"] .main__toolbar {
  margin-bottom: 0.75rem !important;
}
html[data-ui-density="compact"] .btn {
  padding-block: 0.4rem !important;
  font-size: 0.8125rem !important;
}

html[data-ui-density="dense"] .main {
  padding: 0.65rem 0.85rem 1rem !important;
}
html[data-ui-density="dense"] .panel {
  margin-bottom: 0.55rem !important;
}
html[data-ui-density="dense"] .panel__head {
  padding: 0.55rem 0.75rem !important;
}
html[data-ui-density="dense"] .btn {
  padding-block: 0.3rem !important;
  font-size: 0.75rem !important;
}
html[data-ui-density="dense"] .sidebar__link {
  padding-block: 0.35rem !important;
  font-size: 0.78rem !important;
}

/* ── Radius ── */
html[data-ui-radius="soft"] {
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
}
html[data-ui-radius="medium"] {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}
html[data-ui-radius="sharp"] {
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
}
html[data-ui-radius="sharp"] .btn,
html[data-ui-radius="sharp"] .panel,
html[data-ui-radius="sharp"] input,
html[data-ui-radius="sharp"] select,
html[data-ui-radius="sharp"] textarea {
  border-radius: var(--radius-sm) !important;
}

/* ── Surfaces ── */
html[data-ui-surfaces="elevated"] .panel {
  border: 0 !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.1) !important;
}
html[data-ui-surfaces="elevated"] .panel:before {
  display: none !important;
}

html[data-ui-surfaces="flat"] .panel {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-solid, #e2e8f0) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 1.5rem !important;
}
html[data-ui-surfaces="flat"] .panel:before {
  display: none !important;
}

/* ── Fonts ── */
html[data-ui-font="system"] body,
html[data-ui-font="system"] .super-settings-page {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
html[data-ui-font="plex"] body,
html[data-ui-font="plex"] .super-settings-page {
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif !important;
}
html[data-ui-font="serif"] body {
  font-family: Georgia, "Times New Roman", serif !important;
}
html[data-ui-font="serif"] .btn,
html[data-ui-font="serif"] .sidebar__link,
html[data-ui-font="serif"] .race-event-nav__link,
html[data-ui-font="serif"] .ss-tabs__tab {
  font-family: system-ui, -apple-system, sans-serif !important;
}

/* ── Modal / popup placement ── */
html[data-ui-modal="drawer"] .modal,
html[data-ui-modal="drawer"] [role="dialog"].modal,
html[data-ui-modal="drawer"] .ss-platform-modal,
html[data-ui-modal="drawer"] .partner-form-sheet,
html[data-ui-modal="drawer"] .ss-userdrawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(420px, 100vw) !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

html[data-ui-modal="sheet"] .modal,
html[data-ui-modal="sheet"] [role="dialog"].modal,
html[data-ui-modal="sheet"] .ss-platform-modal,
html[data-ui-modal="sheet"] .partner-form-sheet {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  top: auto !important;
  width: min(640px, 100vw) !important;
  max-height: min(85vh, 900px) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  border-radius: 16px 16px 0 0 !important;
}

/* Keep lab chrome light even on dark packs */
html[data-ui-lab="1"] .nor-ui-lab {
  color-scheme: light;
}
