/* PLAYER.ID Premium Component Primitives V1
   Reusable, namespaced UI primitives for the Premium redesign (Astra).

   SAFETY CONTRACT
   - Every selector below is a brand-new class name (verified against the
     full assessment/ tree before this file was created). Nothing here
     redeclares the bare .pid-card / .pid-btn / .pid-kpi / .pid-badge /
     .pid-input / .pid-select / .pid-textarea / .pid-empty-state /
     .pid-loading-state / .pid-section-header foundations that already
     ship in playerid-design-system.css and are consumed by live
     workspaces (e.g. the approved Parent workspace). Those foundations
     are treated as already-formalized base primitives and are reused
     as-is; this file only adds new, additive modifier classes
     (double-dash BEM, e.g. .pid-card--raised) and net-new primitives
     that did not exist before (icon-well, page-header).
   - Nothing in this file is referenced by any existing live template,
     so it is 100% inert until Astra opts a component into it by adding
     one of these classes.
   - Tokens come from playerid-theme.css (--pid-theme-*) for light/dark
     surfaces and playerid-design-system.css (--pid-*) for shared type,
     spacing and radius. No competing token system is introduced.
*/

/* ===================================================================
   1. CARD
   =================================================================== */

.pid-card--raised,
.pid-card--inset {
  min-width: 0;
  border-radius: var(--pid-radius-card, 14px);
  background: var(--pid-theme-surface-raised);
  color: var(--pid-theme-text-primary);
  transition: box-shadow .18s ease, transform .18s ease;
}

.pid-card--raised { box-shadow: var(--pid-theme-shadow-raised); }
.pid-card--inset { background: var(--pid-theme-surface-inset); box-shadow: var(--pid-theme-shadow-inset); }

a.pid-card--raised:hover,
button.pid-card--raised:hover,
.pid-card--raised[tabindex]:hover {
  transform: translateY(-2px);
}

.pid-card--raised:focus-visible,
.pid-card--inset:focus-visible {
  outline: 0;
  box-shadow: var(--pid-theme-shadow-raised), var(--pid-theme-focus-ring);
}

/* ===================================================================
   2. BUTTON
   =================================================================== */

.pid-btn--primary,
.pid-btn--secondary,
.pid-btn--ghost,
.pid-btn--danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pid-space-2, 8px);
  min-height: var(--pid-control-height, 42px);
  min-width: 44px;
  padding: 0 var(--pid-space-4, 16px);
  border: 1px solid transparent;
  border-radius: var(--pid-radius-control, 7px);
  font: inherit;
  font-size: .8rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.pid-btn--primary {
  border-color: var(--pid-theme-teal);
  background: var(--pid-theme-teal);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
}
.pid-btn--primary:hover { background: var(--pid-theme-teal-hover); border-color: var(--pid-theme-teal-hover); }

.pid-btn--secondary {
  border-color: var(--pid-theme-border-soft);
  background: var(--pid-theme-surface-raised);
  color: var(--pid-theme-text-primary);
  box-shadow: var(--pid-theme-shadow-raised);
}
.pid-btn--secondary:hover { color: var(--pid-theme-teal); }
.pid-btn--secondary:active { box-shadow: var(--pid-theme-shadow-inset); }

.pid-btn--ghost {
  background: transparent;
  color: var(--pid-theme-text-secondary);
}
.pid-btn--ghost:hover { background: var(--pid-theme-surface-inset); color: var(--pid-theme-text-primary); }

.pid-btn--danger {
  border-color: #c95f5f;
  background: transparent;
  color: #c95f5f;
}
.pid-btn--danger:hover { background: rgba(201, 95, 95, .1); }

.pid-btn--primary:active:not(:disabled):not([aria-disabled="true"]),
.pid-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
.pid-btn--ghost:active:not(:disabled):not([aria-disabled="true"]),
.pid-btn--danger:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(1px);
}

.pid-btn--primary:focus-visible,
.pid-btn--secondary:focus-visible,
.pid-btn--ghost:focus-visible,
.pid-btn--danger:focus-visible {
  outline: 0;
  box-shadow: var(--pid-theme-focus-ring);
}

.pid-btn--primary:disabled, .pid-btn--primary[aria-disabled="true"],
.pid-btn--secondary:disabled, .pid-btn--secondary[aria-disabled="true"],
.pid-btn--ghost:disabled, .pid-btn--ghost[aria-disabled="true"],
.pid-btn--danger:disabled, .pid-btn--danger[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --- Tertiary (evidenced by Coach Premium V1's back/return controls,
   e.g. #coachDevelopmentPage .pid-development-back): transparent, no
   border/shadow, teal text -- a quieter register than ghost for
   in-page navigation ("back to X") rather than a secondary action. --- */
.pid-btn--tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pid-space-2, 8px);
  min-height: var(--pid-control-height, 42px);
  min-width: 44px;
  padding: 0 var(--pid-space-3, 12px);
  border: 0;
  border-radius: var(--pid-radius-control, 7px);
  background: transparent;
  color: var(--pid-theme-teal);
  font: inherit;
  font-size: .8rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.pid-btn--tertiary:hover { background: var(--pid-theme-surface-inset); color: var(--pid-theme-teal-hover); }
.pid-btn--tertiary:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.pid-btn--tertiary:focus-visible { outline: 0; box-shadow: var(--pid-theme-focus-ring); }
.pid-btn--tertiary:disabled, .pid-btn--tertiary[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* --- Icon-only: square control at the same visual register as
   .pid-btn--secondary (raised surface). Coach Premium V1's existing
   icon-only controls -- e.g. .pid-premium-drawer-close, .pid-theme-toggle
   -- are hardcoded to the dark sidebar/topbar chrome they sit on and are
   left untouched; this is a theme-aware default for icon-only controls
   placed on ordinary page surfaces, where no such precedent exists yet. --- */
.pid-btn--icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--pid-control-height, 42px);
  height: var(--pid-control-height, 42px);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--pid-theme-border-soft);
  border-radius: var(--pid-radius-control, 7px);
  background: var(--pid-theme-surface-raised);
  color: var(--pid-theme-text-primary);
  box-shadow: var(--pid-theme-shadow-raised);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.pid-btn--icon svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pid-btn--icon:hover { color: var(--pid-theme-teal); }
.pid-btn--icon:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); box-shadow: var(--pid-theme-shadow-inset); }
.pid-btn--icon:focus-visible { outline: 0; box-shadow: var(--pid-theme-shadow-raised), var(--pid-theme-focus-ring); }
.pid-btn--icon:disabled, .pid-btn--icon[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* --- Premium control marker: the shared interaction contract (touch
   target, type family, focus ring) layered on top of any .pid-btn--*
   variant above via a second class. Declared after the variants so its
   min-height/focus-visible values win the cascade at equal specificity
   -- this reproduces, property-for-property, what Coach Premium V1's
   original #assessmentCenter .pid-premium-control rule already produced
   (see playerid-coach-premium.css); it is a straight extraction, not a
   new visual decision. Any control may opt in by adding this class
   alongside a .pid-btn--* variant, or on its own for bespoke controls
   (e.g. nav items, action rows) that only need the touch-target floor
   and focus ring. */
.pid-premium-control {
  font-family: inherit;
  cursor: pointer;
  min-height: var(--pid-touch-target-min, 44px);
}
/* .pid-theme-toggle intentionally supplies its own focus treatment (a
   ::before box-shadow ring around the track, see playerid-theme.css) and
   explicitly sets outline:0 -- excluded here so the canonical outline
   doesn't stack a second, unintended ring on top of it wherever the
   toggle happens to also carry .pid-premium-control (e.g. Academy's
   topbar toggle, which has no other rule protecting that property). */
.pid-premium-control:focus-visible:not(.pid-theme-toggle) {
  outline: 3px solid var(--pid-theme-teal);
  outline-offset: 3px;
}

/* ===================================================================
   3. ICON WELL
   =================================================================== */

.pid-icon-well {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--pid-radius-md, 10px);
  background: var(--pid-theme-surface-raised);
  color: var(--pid-theme-navy);
  box-shadow: var(--pid-theme-shadow-raised);
}
.pid-icon-well > svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pid-icon-well--sm { width: 32px; height: 32px; }
.pid-icon-well--lg { width: 48px; height: 48px; }

.pid-icon-well--action { color: var(--pid-theme-teal); }

.pid-icon-well--structural {
  background: var(--pid-theme-navy);
  color: #fff;
  box-shadow: none;
}
html[data-theme="dark"] .pid-icon-well--structural { color: var(--pid-theme-teal); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .pid-icon-well--structural { color: var(--pid-theme-teal); }
}

/* ===================================================================
   4. BADGE / STATUS CHIP
   =================================================================== */

.pid-badge--premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid var(--pid-theme-border-soft);
  border-radius: 999px;
  background: var(--pid-theme-surface-inset);
  color: var(--pid-theme-text-secondary);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .03em;
}
.pid-badge--premium.pid-badge--action { border-color: transparent; background: rgba(19, 170, 166, .14); color: var(--pid-theme-teal); }

/* ===================================================================
   5. FORM CONTROLS
   =================================================================== */

.pid-input--premium,
.pid-select--premium,
.pid-textarea--premium {
  width: 100%;
  min-width: 0;
  min-height: var(--pid-control-height, 42px);
  padding: 0 var(--pid-space-3, 12px);
  border: 1px solid var(--pid-theme-border-soft);
  border-radius: var(--pid-radius-control, 7px);
  outline: 0;
  background: var(--pid-theme-surface);
  color: var(--pid-theme-text-primary);
  font: inherit;
  font-size: .8rem;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.pid-textarea--premium { min-height: 104px; padding-block: var(--pid-space-3, 12px); resize: vertical; }
.pid-input--premium::placeholder,
.pid-textarea--premium::placeholder { color: var(--pid-theme-text-secondary); opacity: .8; }
.pid-input--premium:hover:not(:disabled),
.pid-select--premium:hover:not(:disabled),
.pid-textarea--premium:hover:not(:disabled) { border-color: var(--pid-theme-teal); }
.pid-input--premium:focus-visible,
.pid-select--premium:focus-visible,
.pid-textarea--premium:focus-visible { border-color: var(--pid-theme-teal); box-shadow: var(--pid-theme-focus-ring); }
.pid-input--premium:disabled,
.pid-select--premium:disabled,
.pid-textarea--premium:disabled { background: var(--pid-theme-surface-inset); color: var(--pid-theme-text-secondary); opacity: .65; cursor: not-allowed; }

/* ===================================================================
   6. EMPTY / LOADING STATE
   =================================================================== */

.pid-empty-state--premium,
.pid-loading-state--premium {
  display: grid;
  justify-items: start;
  gap: var(--pid-space-2, 8px);
  padding: var(--pid-space-6, 24px);
  border: 1px dashed var(--pid-theme-border-soft);
  border-radius: var(--pid-radius-md, 10px);
  background: var(--pid-theme-surface);
  color: var(--pid-theme-text-secondary);
  line-height: 1.5;
}
.pid-loading-state--premium { cursor: progress; }
.pid-empty-state--premium .pid-state-icon,
.pid-loading-state--premium .pid-state-icon { color: var(--pid-theme-teal); }
.pid-empty-state--premium .pid-state-title,
.pid-loading-state--premium .pid-state-title { margin: 0; color: var(--pid-theme-text-primary); font-size: .9rem; font-weight: 800; }
.pid-empty-state--premium .pid-state-text,
.pid-loading-state--premium .pid-state-text { max-width: 62ch; margin: 0; font-size: .78rem; }

/* ===================================================================
   7. PAGE HEADER / SECTION HEADER
   =================================================================== */

.pid-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pid-space-4, 16px);
  padding-bottom: var(--pid-space-5, 20px);
  border-bottom: 1px solid var(--pid-theme-border-soft);
}
.pid-page-header-eyebrow { display: block; color: var(--pid-theme-teal); font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.pid-page-header-title { margin: var(--pid-space-1, 4px) 0 0; color: var(--pid-theme-text-primary); font-size: var(--pid-text-page, 2rem); font-weight: 800; line-height: 1.15; }
.pid-page-header-description { margin: var(--pid-space-2, 8px) 0 0; color: var(--pid-theme-text-secondary); font-size: .85rem; line-height: 1.5; max-width: 62ch; }
.pid-page-header-actions { display: flex; align-items: center; gap: var(--pid-space-2, 8px); flex-wrap: wrap; }

.pid-section-header--premium { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pid-space-4, 16px); }
.pid-section-header--premium .pid-section-title { margin: 0; color: var(--pid-theme-text-primary); font-size: var(--pid-text-section, 1.25rem); font-weight: 800; line-height: 1.2; }
.pid-section-header--premium .pid-section-description { margin: var(--pid-space-1, 4px) 0 0; color: var(--pid-theme-text-secondary); font-size: .8rem; line-height: 1.45; }

/* ===================================================================
   8. KPI
   =================================================================== */

.pid-kpi--premium {
  min-width: 0;
  min-height: 112px;
  padding: var(--pid-space-4, 16px);
  border-radius: var(--pid-radius-md, 10px);
  background: var(--pid-theme-surface-raised);
  box-shadow: var(--pid-theme-shadow-raised);
}
.pid-kpi--premium .pid-kpi-value { display: block; margin-top: var(--pid-space-2, 8px); color: var(--pid-theme-text-primary); font-size: 1.65rem; font-weight: 800; }
.pid-kpi--premium .pid-kpi-label { display: block; color: var(--pid-theme-text-secondary); font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.pid-kpi--premium .pid-kpi-note { display: block; margin-top: var(--pid-space-1, 4px); color: var(--pid-theme-text-secondary); font-size: .7rem; line-height: 1.4; }

/* ===================================================================
   9. REDUCED MOTION
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
  .pid-card--raised,
  .pid-btn--primary, .pid-btn--secondary, .pid-btn--ghost, .pid-btn--danger, .pid-btn--tertiary, .pid-btn--icon,
  .pid-premium-control,
  .pid-input--premium, .pid-select--premium, .pid-textarea--premium {
    transition: none;
  }
  a.pid-card--raised:hover, button.pid-card--raised:hover, .pid-card--raised[tabindex]:hover { transform: none; }
  .pid-btn--primary:active, .pid-btn--secondary:active, .pid-btn--ghost:active, .pid-btn--danger:active, .pid-btn--tertiary:active, .pid-btn--icon:active { transform: none; }
}

/* ===================================================================
   10. BREAKPOINTS (Premium contract: desktop / tablet 768px / mobile 390px)
   =================================================================== */

@media (max-width: 768px) {
  .pid-page-header { align-items: stretch; flex-direction: column; }
  .pid-page-header-actions { justify-content: flex-start; }
  .pid-section-header--premium { align-items: stretch; flex-direction: column; }
}

@media (max-width: 390px) {
  .pid-kpi--premium { min-height: 100px; padding: var(--pid-space-3, 12px); }
  .pid-page-header-actions > .pid-btn--primary,
  .pid-page-header-actions > .pid-btn--secondary { width: 100%; }
}

/* ===================================================================
   11. LANGUAGE SWITCH (EN | BM) -- i18n Phase 1
   Segmented radiogroup for the dark navy access surfaces (Unified Sign
   In canvas, Workspace Gateway identity panel). Placement lives with each
   surface; behaviour lives in assessment/js/i18n/i18n.js. Active state is
   driven by aria-checked so styling and accessibility cannot diverge.
   =================================================================== */

.pid-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(111, 227, 218, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
}
.pid-lang-switch .pid-lang-option {
  appearance: none;
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  min-height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: #a9bac6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  transition: background-color 150ms ease, color 150ms ease;
}
.pid-lang-switch .pid-lang-option:hover { color: #fff; }
.pid-lang-switch .pid-lang-option[aria-checked="true"] {
  background: rgba(111, 227, 218, .16);
  box-shadow: inset 0 0 0 1px rgba(111, 227, 218, .45);
  color: #fff;
}
.pid-lang-switch .pid-lang-divider {
  color: rgba(255, 255, 255, .22);
  font-size: 11px;
  line-height: 1;
  user-select: none;
}
/* Mobile / touch: full 44px touch height per option. The pill's inner
   padding drops to 0 so the control stays compact (46px incl. border). */
@media (max-width: 800px), (pointer: coarse) {
  .pid-lang-switch { padding: 0; }
  .pid-lang-switch .pid-lang-option { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .pid-lang-switch .pid-lang-option { transition: none; }
}
/* i18n Phase 2: the same control placed in the navy workspace sidebars
   (Developer / Academy / Coach / Parent), just above each sidebar's
   return/exit footer action. The sidebar doubles as the mobile drawer, so
   the control stays reachable on phones without touching the topbars. */
.pid-lang-switch.pid-shell-lang {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 0 0 12px;
}
.pid-sidebar-note .pid-lang-switch.pid-shell-lang { margin-bottom: 14px; }
/* Parent drawer (<=980px): playerid-v2.css hides .pid-sidebar-note on mobile,
   which also hid the switch nested in it. Keep the note visible for the
   switch only; its tagline stays hidden on mobile as before. */
@media (max-width: 980px) {
  #parentMobileNavigation .pid-sidebar-note { display: block; }
  #parentMobileNavigation .pid-sidebar-note > small { display: none; }
  #parentMobileNavigation .pid-sidebar-note .pid-lang-switch.pid-shell-lang { margin-bottom: 0; }
}
/* Coach sidebar: the switch takes over the footer's auto top margin so the
   Return action stays pinned beneath it. */
#assessmentCenter .pid-premium-sidebar > .pid-shell-lang { margin: auto 10px 12px; }
#assessmentCenter .pid-premium-sidebar > .pid-shell-lang + .pid-coach-return { margin-top: 0; }