/* components.css — theme-agnostic component layer. Consumes tokens.css roles.
   Loaded AFTER menuStyles.css so plain source-order wins; NO !important. */

/* Button component lives in button.css (.btn-only, board-safe). Import it, then add the
   bare-element MENU alias: raw <button>/<input> buttons on menu pages adopt the same
   token-driven look. In-game pages load button.css directly (NOT this file), so raw board
   buttons are never touched. The alias is the one intentional structural repeat — it is
   fully var(--btn-*)-driven, so it can never drift in color from .btn. */
@import "button.css";
@import "switch.css";

/* The bare-element alias must NOT touch buttons that opt into a component class
   (.btn → button.css, .switch → switch.css); otherwise those get double-styled with
   the chamfer chrome on top of their own look. Exclude them here. */
button:not(.btn):not(.switch), input[type=submit], input[type=button], input[type=reset] {
  position: relative; z-index: 0; isolation: isolate; cursor: pointer;
  display: inline-block; text-align: center; white-space: nowrap;
  font-family: var(--font-display, inherit); font-weight: 600;
  text-transform: var(--btn-transform, none); letter-spacing: var(--btn-tracking, normal);
  padding: var(--btn-pad, 5px 7px);
  color: var(--btn-text, var(--text, #fff));
  background: var(--btn-el-bg, var(--btn-surface, transparent));   /* see button.css note */
  border: var(--btn-bw, 0) solid var(--btn-border, transparent);
  border-radius: var(--btn-radius, 5px);
  box-shadow: var(--btn-shadow, none);
  clip-path: var(--btn-clip);   /* cut-geometry themes clip the element bg too, so semantic
                                   fills don't bleed past the shape; unset (flat/rounded) → none */
  transition: transform .12s, filter .2s, color .2s, background .2s;
  animation: var(--btn-anim, none);   /* signature themes opt into e.g. emberpulse */
}
button:not(.btn):not(.switch):hover, input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover {
  transform: var(--btn-hover-transform, scale(1.1));
  background: var(--btn-hover-surface, var(--btn-surface));
  border-color: var(--btn-hover-border, var(--btn-border));
  filter: drop-shadow(0 0 var(--btn-glow, 0) var(--btn-glow-color, transparent));
}
button:not(.btn):not(.switch):active, input[type=submit]:active, input[type=button]:active { transform: translateY(1px); }
button:not(.btn):not(.switch):disabled, button:not(.btn):not(.switch)[disabled] { cursor: default; opacity: .42; filter: saturate(.4); transform: none; }
button:not(.btn):not(.switch)::before {
  content: var(--btn-chamfer-content, none);
  position: absolute; inset: 0; z-index: -2; background: var(--btn-rim, var(--accent));
  clip-path: var(--btn-clip, polygon(var(--btn-cut,0) 0,100% 0,100% calc(100% - var(--btn-cut,0)),calc(100% - var(--btn-cut,0)) 100%,0 100%,0 var(--btn-cut,0)));
}
button:not(.btn):not(.switch)::after {
  content: var(--btn-chamfer-content, none);
  position: absolute; inset: var(--btn-rim-width, 2px); z-index: -1;
  background: var(--btn-fill, var(--surface));
  background-blend-mode: var(--btn-fill-blend, normal); background-size: var(--btn-fill-size, auto);
  box-shadow: var(--btn-after-shadow, none);   /* signature themes: inner neon frame */
  clip-path: var(--btn-clip-inner, polygon(var(--btn-cut-inner,0) 0,100% 0,100% calc(100% - var(--btn-cut-inner,0)),calc(100% - var(--btn-cut-inner,0)) 100%,0 100%,0 var(--btn-cut-inner,0)));
}
/* Input-type buttons can't render ::before/::after, so a chamfer theme (transparent
   element bg, fill supplied by the pseudos) would render them invisible. Give them a
   flat fill+border fallback drawn from the same tokens. */
input[type=submit], input[type=button], input[type=reset] {
  background: var(--btn-plain-fill, var(--btn-fill, var(--btn-surface, transparent)));
  border: 1px solid var(--btn-rim, var(--btn-border, transparent));
}

/* Typography — two intents */
.u-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-caps, .06em); font-weight: 700; }
.prose   { font-family: var(--font-body); text-transform: none; line-height: 1.55; letter-spacing: normal; max-width: 70ch; }
.prose p { margin: 0 0 1em; }

/* ---- Inputs / selects / textareas (Phase 3) — token-themed ---- */
input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=search], input[type=tel], input[type=date], select, textarea {
  background: var(--surface-sunken, #394452);
  color: var(--input-text, var(--text, #fff));
  border: var(--border-width, 1px) solid var(--border, #454545);
  border-radius: var(--radius, 5px);
}
input::placeholder, textarea::placeholder { color: var(--text-muted, #aaa); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent, #5aa0ff);
  box-shadow: 0 0 6px var(--glow, rgba(90,160,255,.35));
}
/* Native <select> popup options — the box is styled above; these style the option list.
   (Browser-limited: bg + color apply in modern Firefox/Chromium; geometry stays native.) */
select option, select optgroup {
  background: var(--surface-raised, #2b2f36);
  color: var(--text, #fff);
}

/* ---- Checkbox / radio ---- */
input[type=checkbox], input[type=radio] {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin: 0 6px 0 0; padding: 0;
  background: var(--surface-sunken, #394452); border: var(--border-width, 1px) solid var(--border, #454545);
  border-radius: var(--radius, 5px); cursor: pointer; position: relative; vertical-align: middle; flex-shrink: 0;
  transition: box-shadow 120ms, background 120ms;
}
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:hover, input[type=radio]:hover { box-shadow: 0 0 6px var(--glow, rgba(90,160,255,.45)); }
input[type=checkbox]:checked, input[type=radio]:checked { background: var(--check-fill, var(--accent)); box-shadow: 0 0 5px var(--glow, rgba(90,160,255,.35)); }
input[type=checkbox]:checked::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px;
  border: solid var(--check-mark, var(--on-accent, #08202b)); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
input[type=radio]:checked::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%;
  background: var(--check-mark, var(--on-accent, #08202b)); transform: translate(-50%, -50%);
}

/* ---- Dropdown / menu panel (covers nav .dropdown-content, generic .dropdown-panel,
   and the deck-builder custom-select widget .widget-dd-menu) ---- */
.dropdown-content, .dropdown-panel, .widget-dd-menu {
  background: var(--surface-raised, #2b2f36);
  border: var(--border-width, 1px) solid var(--border, #454545);
  border-radius: var(--radius, 5px);
  box-shadow: 0 6px 18px rgba(0,0,0,.55);
}
.dropdown-content a, .dropdown-panel__item, .widget-dd-item { color: var(--text, #fff); }
.dropdown-content a:hover, .dropdown-panel__item:hover, .dropdown-panel__item.is-active,
.widget-dd-item:hover, .widget-dd-item.is-active {
  background: var(--accent, #5aa0ff); color: var(--on-accent, #08202b);
}

/* ---- Tabs (.tab / .panelTab) — reuse the button chamfer tokens for HUD themes; flat themes
   get a simple active underline. ---- */
.tab, .panelTab {
  position: relative; z-index: 0; isolation: isolate; cursor: pointer;
  display: inline-block; border: 0; background: transparent; box-shadow: none;
  padding: var(--tab-pad, 4px 11px); margin: 2px 3px;
  color: var(--btn-text, var(--text, #fff)); font-weight: 600;
  text-transform: var(--btn-transform, none); letter-spacing: var(--btn-tracking, .05em);
  border-bottom: 2px solid transparent;
  transition: filter 150ms, color 150ms, transform 110ms, border-color 150ms;
}
.tab::before, .panelTab::before {
  content: var(--btn-chamfer-content, none); position: absolute; inset: 0; z-index: -2; background: var(--btn-rim, var(--accent));
  clip-path: polygon(var(--btn-cut,0) 0,100% 0,100% calc(100% - var(--btn-cut,0)),calc(100% - var(--btn-cut,0)) 100%,0 100%,0 var(--btn-cut,0));
}
.tab::after, .panelTab::after {
  content: var(--btn-chamfer-content, none); position: absolute; inset: var(--btn-rim-width, 2px); z-index: -1; background: var(--btn-plain-fill, var(--btn-fill, var(--surface-raised, #2b2f36)));
  clip-path: polygon(var(--btn-cut-inner,0) 0,100% 0,100% calc(100% - var(--btn-cut-inner,0)),calc(100% - var(--btn-cut-inner,0)) 100%,0 100%,0 var(--btn-cut-inner,0));
}
.tab:hover, .panelTab:hover { color: #fff; filter: drop-shadow(0 0 8px var(--btn-glow-color, var(--glow, transparent))); transform: translateY(-1px); }
.tab:active, .panelTab:active { transform: translateY(1px); }
.tab.is-active, .tab.active, .panelTab.is-active, .panelTab.active { border-bottom-color: var(--accent, #5aa0ff); }

/* ---- Tables: opt-in .ds-table for separators; .interactive-row for clickable-row hover
   (replaces per-page inline onmouseover JS). ---- */
.ds-table { width: 100%; border-collapse: collapse; }
.ds-table th, .ds-table td { border-bottom: var(--border-width, 1px) solid var(--border, #454545); padding: 6px 8px; }
.ds-table tbody tr:hover { background: var(--surface-raised, #2b2f36); }
.interactive-row { cursor: pointer; transition: box-shadow .25s ease, transform .25s ease; }
.interactive-row:hover { box-shadow: 0 0 10px 3px var(--glow, rgba(90,160,255,.4)); transform: scaleY(1.02); position: relative; z-index: 1; }

/* ---- Panel (opt-in) — surface + border + backdrop blur from tokens. Cross-theme .card/.container
   migration is deferred to Phase 5 (tangled with menuStyles.css). ---- */
.panel {
  background: var(--surface-raised, #2b2f36);
  border: var(--border-width, 1px) solid var(--border, #454545);
  border-radius: var(--radius, 5px);
  backdrop-filter: blur(var(--backdrop-blur, 20px)); -webkit-backdrop-filter: blur(var(--backdrop-blur, 20px));
  padding: 20px;
}

/* Styled-dialog CSS (.sd-*) is self-injected by Core/StyledDialog.js so dialogs work on any
   page without depending on this file. Kept out of here intentionally — do not re-add. */