/* =======================================================================
   PanelCoach — Shared component primitives (pc-*)
   Used across all tabs. Depends on tokens.css + base.css.
   Tailwind utilities still work alongside these; when porting an element
   to a .pc-* class, strip conflicting color/shadow/background utilities
   but KEEP layout utilities (flex, grid, gap-*, items-center, min-h-*).
   ======================================================================= */

/* =========================================================
   BUTTONS — .pc-btn + modifiers
   ========================================================= */
.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.625rem 1rem;
  min-height: 44px;                        /* touch target */
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              filter var(--dur-fast) var(--ease-standard);
  -webkit-appearance: none;
  appearance: none;
}

.pc-btn:disabled,
.pc-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.pc-btn:active {
  transform: scale(0.98);
}

/* --- Primary (the sole gradient) --- */
.pc-btn--primary {
  background: var(--grad-primary);
  color: var(--text-on-accent);
  box-shadow: var(--grad-primary-shadow);
  border-color: transparent;
}
.pc-btn--primary:hover {
  filter: brightness(1.08);
}
.pc-btn--primary:focus-visible {
  box-shadow: var(--grad-primary-shadow), var(--shadow-focus);
}

/* --- NHS — uses the NHS blue gradient. Reserved for content actions
       that want the brand-trust cue (e.g. the Last Updated banner,
       Practice This Question on NHS-themed tiers). --- */
.pc-btn--nhs {
  background: var(--grad-nhs);
  color: var(--text-on-nhs);
  box-shadow: var(--grad-nhs-shadow);
  border-color: transparent;
}
.pc-btn--nhs:hover {
  filter: brightness(1.08);
}
.pc-btn--nhs:focus-visible {
  box-shadow: var(--grad-nhs-shadow), var(--shadow-focus-nhs);
}

/* --- Secondary (solid muted) --- */
.pc-btn--secondary {
  background: var(--surface-2);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
.pc-btn--secondary:hover {
  background: var(--surface-sunken);
  border-color: var(--border-strong);
}
.pc-btn--secondary:focus-visible {
  box-shadow: var(--shadow-focus);
}

/* --- Ghost (transparent, accent text) --- */
.pc-btn--ghost {
  background: transparent;
  color: var(--accent);
  border-color: transparent;
}
.pc-btn--ghost:hover {
  background: var(--accent-subtle-bg);
}
.pc-btn--ghost:focus-visible {
  box-shadow: var(--shadow-focus);
}

/* --- Size modifiers --- */
.pc-btn--sm { padding: 0.375rem 0.75rem; min-height: 36px; font-size: var(--size-xs); }
.pc-btn--md { padding: 0.625rem 1rem;   min-height: 44px; font-size: var(--size-sm); }
.pc-btn--lg { padding: 0.875rem 1.25rem; min-height: 52px; font-size: var(--size-base); }

.pc-btn--block {
  width: 100%;
}

/* =========================================================
   FORM INPUTS — .pc-input, .pc-textarea
   16px floor (see base.css) — these just add the skin.
   ========================================================= */
.pc-input,
.pc-textarea {
  width: 100%;
  padding: var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: var(--size-base);            /* 16px — iOS zoom fix */
  line-height: var(--lh-normal);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
  -webkit-appearance: none;
  appearance: none;
}

.pc-input {
  min-height: 44px;
}

.pc-input::placeholder,
.pc-textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.pc-input:focus,
.pc-textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.pc-input--nhs:focus,
.pc-textarea--nhs:focus {
  border-color: var(--nhs-blue);
  box-shadow: var(--shadow-focus-nhs);
}

.pc-input--error {
  border-color: var(--status-error);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2);
}

/* Pill-shaped search input (bank view) */
.pc-input--pill {
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-4);
}

/* Icon-prefixed input wrapper */
.pc-input-group {
  position: relative;
}
.pc-input-group > .pc-input--pill-icon {
  padding-left: 2.25rem;                  /* room for icon */
}
.pc-input-group__icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: var(--size-sm);
}
.pc-input-group__clear {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-weight: var(--weight-bold);
  cursor: pointer;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-full);
  font-size: var(--size-sm);
  transition: background var(--dur-fast) var(--ease-standard);
}
.pc-input-group__clear:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

/* =========================================================
   CARDS — .pc-card, .pc-card--accent
   In dark mode, --shadow-sm becomes "0 0 0 1px var(--border-subtle) + soft"
   so cards get a hairline border elevation instead of a drop shadow.
   ========================================================= */
.pc-card {
  background: var(--surface-1);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
  position: relative;
}

/* Dark-mode card gets a subtle inner top-highlight — the "glass edge"
   that makes layered dark surfaces read as deliberate, not flat. */
html.dark .pc-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.06) 20%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.06) 80%,
    transparent 100%);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  pointer-events: none;
}

/* Larger question-card variant */
.pc-card--lg {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}

/* Left-accent bar — uses inline style="--accent-hex: var(--cat-X)" */
.pc-card--accent {
  border-left: 4px solid var(--accent-hex, var(--accent));
}

/* Muted card (for collapsible details / secondary info) */
.pc-card--muted {
  background: var(--surface-2);
}

/* Interactive card (click / hover cue) */
.pc-card--interactive {
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.pc-card--interactive:hover {
  border-color: var(--border-strong);
}
.pc-card--interactive:active {
  transform: scale(0.99);
}

/* =========================================================
   BADGES — .pc-badge + variants (solid / outline / subtle)
   Authors recolor via inline style="--accent: var(--cat-X)"
   ========================================================= */
.pc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.1875rem 0.5rem;
  border-radius: var(--r-full);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

.pc-badge--solid {
  background: var(--accent);
  color: var(--text-on-accent);
  border: 1px solid transparent;
}

.pc-badge--outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid currentColor;
}

.pc-badge--subtle {
  background: var(--accent-subtle-bg);
  color: var(--accent);
  border: 1px solid transparent;
}

/* Monospace numeric badge (probabilities) */
.pc-badge--mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* NHS blue preset — convenience when the author doesn't want to set
   --accent inline, used heavily on Bank tab tier markers. */
.pc-badge--nhs {
  --accent: var(--nhs-blue);
  --accent-subtle-bg: var(--nhs-blue-subtle-bg);
}

/* =========================================================
   SECTION CARDS — semantic colored blocks (guidance / tips / info)
   Replaces the 30+ `border-l-4 border-{color}-400` inline styles.
   ========================================================= */
.pc-section {
  position: relative;
  border-left: 6px solid var(--section-color, var(--accent));
  background: var(--section-bg, var(--accent-subtle-bg));
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

html.dark .pc-section {
  background: var(--section-bg, var(--accent-subtle-bg));
}

.pc-section__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.pc-section__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  background: var(--section-color, var(--accent));
  color: #fff;
  border-radius: var(--r-md);
  font-size: var(--size-sm);
  font-weight: var(--weight-bold);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--section-color, var(--accent)) 35%, transparent);
}

.pc-section__title {
  color: var(--section-color, var(--accent));
  font-size: var(--size-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pc-section__body {
  color: var(--text-primary);
  font-size: var(--size-sm);
  line-height: var(--lh-relaxed);
}

.pc-section__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.pc-section__list li {
  display: flex;
  gap: var(--sp-2);
  color: var(--text-primary);
  font-size: var(--size-sm);
  line-height: var(--lh-relaxed);
}

.pc-section__list li::before {
  content: "•";
  color: var(--section-color, var(--accent));
  flex-shrink: 0;
  margin-top: 0.1em;
}

/* Semantic presets — consumed via class combo: pc-section pc-section--guidance */
.pc-section--guidance {
  --section-color: var(--status-success);
  --section-bg: var(--status-success-bg);
}
.pc-section--tips {
  --section-color: var(--status-warn);
  --section-bg: var(--status-warn-bg);
}
.pc-section--info {
  --section-color: var(--nhs-blue);
  --section-bg: var(--nhs-blue-subtle-bg);
}
.pc-section--danger {
  --section-color: var(--status-error);
  --section-bg: var(--status-error-bg);
}

/* =========================================================
   MODAL — .pc-modal*
   Mobile = bottom-sheet. Desktop (>=640px) = centered dialog.
   ========================================================= */
.pc-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--sp-4);
}
@media (min-width: 640px) {
  .pc-modal__backdrop {
    align-items: center;
  }
}

.pc-modal__sheet {
  background: var(--surface-1);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 28rem;
  max-height: 85vh;
  overflow-y: auto;
}
@media (min-width: 640px) {
  .pc-modal__sheet {
    border-radius: var(--r-xl);
  }
}

/* =========================================================
   FLOATING BOTTOM NAV — .pc-floating-nav
   ========================================================= */
.pc-floating-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-floating-nav);
}

.pc-floating-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--accent);
  border: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.pc-floating-nav__btn:hover:not(:disabled) {
  background: var(--accent-subtle-bg);
}
.pc-floating-nav__btn:disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
}

.pc-floating-nav__counter {
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  padding: 0 var(--sp-2);
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   TAB NAV — .pc-tabnav (used by renderNavTabs in render-core.js)
   Kept subtle; only the dashboard is migrated later. Present here so
   other tabs can opt in during the rollout.
   ========================================================= */
.pc-tabnav {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2);
}
.pc-tabnav__tab {
  flex: 1;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.pc-tabnav__tab:hover {
  color: var(--text-primary);
  background: var(--surface-2);
}
.pc-tabnav__tab--active {
  color: var(--accent);
  background: var(--surface-1);
  border-color: var(--accent-subtle-bg);
  box-shadow: var(--shadow-xs);
}

/* =========================================================
   FRAMEWORK CHIP — STAR / CAMP / SPIES / OPEN
   ========================================================= */
.pc-framework-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  min-height: 36px;
  background: var(--surface-1);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-full);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
}
.pc-framework-chip:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.pc-framework-chip--active[data-framework="STAR"]  { background: var(--fw-star);  color: #fff; border-color: var(--fw-star); }
.pc-framework-chip--active[data-framework="CAMP"]  { background: var(--fw-camp);  color: #fff; border-color: var(--fw-camp); }
.pc-framework-chip--active[data-framework="SPIES"] { background: var(--fw-spies); color: #fff; border-color: var(--fw-spies); }
.pc-framework-chip--active[data-framework="OPEN"]  { background: var(--fw-open);  color: #fff; border-color: var(--fw-open); }

/* =========================================================
   UTILITY: subtle divider / sub-heading
   ========================================================= */
.pc-subhead {
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pc-divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--sp-4) 0;
}