/* ==========================================================================
   FOUNDATION — new components for Phase 2 to build with
   --------------------------------------------------------------------------
   Additive only: nothing here renames or removes an existing class.
   Loaded after tokens/themes/motion so it can use the full token set.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SEMANTIC FIX — two component rules coupled a hardcoded amber value with
   the old warm palette. Now that --amber means "accent violet" rather than
   "warning orange", these are corrected to use dedicated tokens so warning
   badges stay orange and the active nav-link uses an accent-tinted bg.
   -------------------------------------------------------------------------- */
.badge-warning{ background:var(--warning-tint); color:var(--warning-text); }
.app-nav-link.active{ background:var(--accent-tint); color:var(--accent); }
.alert-warning{ background:var(--warning-tint); border-color:var(--warning); color:var(--warning-text); }

/* --------------------------------------------------------------------------
   BUTTONS — additional variants/sizes/states beyond btn-primary/outline/ghost
   -------------------------------------------------------------------------- */
.btn{ position:relative; }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.btn-primary{
  background:var(--accent);
  color:var(--accent-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, var(--shadow-sm);
  transition:background var(--duration-fast) var(--ease-standard),
             transform var(--duration-fast) var(--ease-out),
             box-shadow var(--duration-fast) var(--ease-standard);
}
.btn-primary:hover{ background:var(--btn-primary-hover); transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.14) inset, var(--shadow-md); }
.btn-primary:active{ transform:translateY(0); box-shadow:0 1px 0 rgba(255,255,255,.1) inset; }

.btn-secondary{
  background:var(--surface-2);
  color:var(--text);
  border-color:var(--border);
}
.btn-secondary:hover{ background:var(--surface-3); border-color:var(--border-strong); }

.btn-tertiary{ background:transparent; color:var(--text-secondary); }
.btn-tertiary:hover{ color:var(--text); background:var(--surface-2); }

.btn-danger{ background:var(--danger); color:var(--on-danger); }
.btn-danger:hover{ background:var(--btn-danger-hover); }

.btn-success{ background:var(--success); color:var(--on-success); }
.btn-success:hover{ background:var(--btn-success-hover); }

.btn-lg{ padding:16px 28px; font-size:1rem; border-radius:var(--radius-md); }
.btn-icon{ width:40px; height:40px; padding:0; justify-content:center; border-radius:var(--radius-sm); }
.btn-icon.btn-sm{ width:34px; height:34px; }

.btn:disabled,
.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; pointer-events:none; }

.btn.is-loading{ color:transparent !important; pointer-events:none; }
.btn.is-loading::after{
  content:'';
  position:absolute; left:50%; top:50%;
  width:15px; height:15px;
  margin:-7.5px 0 0 -7.5px;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  color:var(--text);
  animation:btn-spin .7s linear infinite;
}
.btn-primary.is-loading::after{ color:var(--accent-ink); }
@keyframes btn-spin{ to{ transform:rotate(360deg); } }

/* --------------------------------------------------------------------------
   CARDS — interactive / feature / product / stat / glass / outline variants
   -------------------------------------------------------------------------- */
.card-interactive{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  padding:24px;
  cursor:pointer;
  transition:transform var(--duration-fast) var(--ease-out),
             border-color var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard);
}
.card-interactive:hover,
.card-interactive:focus-visible{
  transform:translateY(-3px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-lg);
}

.card-feature{
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  padding:32px;
}

.card-product{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  overflow:hidden;
}
.card-product-chrome{
  display:flex; align-items:center; gap:6px;
  padding:12px 16px; border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.card-product-chrome span{ width:8px; height:8px; border-radius:50%; background:var(--border-strong); }

.card-stat{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  padding:22px 24px;
}
.card-stat .stat-label{ font-family:var(--font-mono); font-size:.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.card-stat .stat-value{ font-family:var(--font-mono); font-size:2rem; color:var(--text); margin-top:8px; }
.card-stat .stat-delta{ font-family:var(--font-mono); font-size:.82rem; margin-top:6px; }
.card-stat .stat-delta.up{ color:var(--success); }
.card-stat .stat-delta.down{ color:var(--danger); }

.card-glass{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter:blur(16px);
  padding:24px;
}

.card-outline{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:transparent;
  padding:24px;
}

.card-highlight{
  border:1px solid rgba(124,92,255,.35);
  border-radius:var(--radius-lg);
  background:radial-gradient(120% 100% at 0% 0%, rgba(124,92,255,.10), transparent 60%), var(--surface);
  padding:24px;
  box-shadow:var(--glow-accent);
}

/* --------------------------------------------------------------------------
   BENTO GRID — reusable, not tied to any specific page layout
   -------------------------------------------------------------------------- */
.bento-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--space-5);
}
.bento-item{ grid-column:span 2; min-width:0; }
.bento-item.bento-wide{ grid-column:span 4; }
.bento-item.bento-tall{ grid-row:span 2; }
.bento-item.bento-featured{ grid-column:span 2; grid-row:span 2; }
.bento-item.bento-full{ grid-column:1 / -1; }
.bento-item.bento-quarter{ grid-column:span 1; }

@media (max-width:980px){
  .bento-grid{ grid-template-columns:repeat(2, 1fr); }
  .bento-item.bento-featured{ grid-column:span 2; grid-row:auto; }
  .bento-item.bento-quarter{ grid-column:span 2; }
}
@media (max-width:640px){
  .bento-grid{ grid-template-columns:1fr; }
  .bento-item,
  .bento-item.bento-wide,
  .bento-item.bento-featured,
  .bento-item.bento-quarter{ grid-column:1 / -1; grid-row:auto; }
}

/* --------------------------------------------------------------------------
   PRODUCT UI PRIMITIVES — demo-data building blocks for later pages
   -------------------------------------------------------------------------- */
.metric-card{ border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); padding:20px 22px; }
.metric-card .m-label{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.metric-card .m-value{ font-family:var(--font-mono); font-size:1.7rem; color:var(--text); margin-top:8px; }
.metric-card .m-delta{ font-family:var(--font-mono); font-size:.8rem; margin-top:6px; }
.metric-card .m-delta.up{ color:var(--success); }
.metric-card .m-delta.down{ color:var(--danger); }

.mini-chart{ display:flex; align-items:flex-end; gap:3px; height:44px; }
.mini-chart span{ flex:1; background:var(--accent); border-radius:2px 2px 0 0; opacity:.8; }
.mini-chart span:last-child{ opacity:1; }

.status-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px; }
.status-dot.status-live{ background:var(--success); animation:glow-pulse 2.4s ease-in-out infinite; }
.status-dot.status-warning{ background:var(--warning); }
.status-dot.status-offline{ background:var(--text-muted); }

.kpi-tile{ display:flex; flex-direction:column; gap:4px; }
.kpi-tile .k-label{ font-size:.82rem; color:var(--text-muted); }
.kpi-tile .k-value{ font-family:var(--font-mono); font-size:1.4rem; color:var(--text); }

.rank-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:.9rem; }
.rank-row:last-child{ border-bottom:none; }
.rank-row .r-pos{ font-family:var(--font-mono); color:var(--text-muted); width:24px; }
.rank-row .r-name{ flex:1; color:var(--text); }
.rank-row .r-value{ font-family:var(--font-mono); color:var(--text-secondary); }

.insight-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  background:var(--surface-2); border:1px solid var(--border);
  font-size:.85rem; color:var(--text-secondary);
}

/* --------------------------------------------------------------------------
   FORM STATES — beyond default/focus (hover, filled, error, success, loading)
   -------------------------------------------------------------------------- */
.form-control:hover, .field input:hover, .field select:hover{ border-color:var(--border-strong); }
.form-control.is-success, .field input.is-success{ border-color:var(--success); }
.form-control.is-error, .field input.is-error, .field.has-error input{ border-color:var(--danger); }
.field-success{ font-size:.78rem; color:var(--success); margin-top:6px; }
.form-control.is-loading, .field input.is-loading{
  background-image:linear-gradient(90deg, transparent, rgba(124,92,255,.12), transparent);
  background-size:200% 100%;
  animation:shimmer 1.4s ease-in-out infinite;
}

.toggle-switch{ position:relative; display:inline-block; width:40px; height:22px; }
.toggle-switch input{ opacity:0; width:0; height:0; }
.toggle-switch .track{
  position:absolute; inset:0; background:var(--surface-3);
  border:1px solid var(--border); border-radius:var(--radius-pill);
  transition:background var(--duration-fast) var(--ease-standard);
}
.toggle-switch .track::before{
  content:''; position:absolute; width:16px; height:16px; left:2px; top:2px;
  background:var(--text); border-radius:50%;
  transition:transform var(--duration-fast) var(--ease-standard);
}
.toggle-switch input:checked + .track{ background:var(--accent); border-color:var(--accent); }
.toggle-switch input:checked + .track::before{ transform:translateX(18px); background:#fff; }
.toggle-switch input:focus-visible + .track{ outline:2px solid var(--accent); outline-offset:2px; }

.segmented{ display:inline-flex; padding:3px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); gap:2px; }
.segmented button{ border:none; background:transparent; padding:7px 14px; font-size:.85rem; color:var(--text-secondary); border-radius:7px; cursor:pointer; }
.segmented button.is-active{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }

/* --------------------------------------------------------------------------
   TOOLTIP — minimal, CSS-only
   -------------------------------------------------------------------------- */
[data-tooltip]{ position:relative; }
[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--surface-3); color:var(--text); border:1px solid var(--border);
  padding:6px 10px; border-radius:var(--radius-xs); font-size:.78rem; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  z-index:var(--z-toast);
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after{ opacity:1; transform:translateX(-50%) translateY(0); }

/* --------------------------------------------------------------------------
   COMMAND PALETTE — Cmd/Ctrl+K foundation (UI + keyboard only, no backend)
   -------------------------------------------------------------------------- */
.command-trigger{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-2); color:var(--text-muted);
  padding:8px 12px; font-size:.85rem; cursor:pointer;
}
.command-trigger:hover{ border-color:var(--border-strong); color:var(--text-secondary); }
.command-trigger kbd{
  font-family:var(--font-mono); font-size:.72rem; color:var(--text-muted);
  border:1px solid var(--border); border-radius:5px; padding:1px 6px;
  background:var(--surface); line-height:1.6;
}

.command-overlay{
  position:fixed; inset:0; z-index:var(--z-command);
  background:var(--scrim);
  backdrop-filter:blur(4px);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:12vh 20px 20px;
}
.command-overlay.is-open{ display:flex; }
.command-palette{
  width:100%; max-width:560px;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-xl);
  overflow:hidden;
  animation:scale-in var(--duration-fast) var(--ease-out) both;
}
.command-input-row{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border); }
.command-input-row svg{ flex-shrink:0; color:var(--text-muted); }
.command-input-row input{
  flex:1; border:none; background:transparent; outline:none;
  color:var(--text); font-size:.98rem; font-family:var(--font-body);
}
.command-input-row input::placeholder{ color:var(--text-muted); }
.command-input-row kbd{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-muted); border:1px solid var(--border); border-radius:5px; padding:2px 6px; }
.command-list{ max-height:320px; overflow-y:auto; padding:8px; }
.command-group-label{ font-family:var(--font-mono); font-size:.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; padding:10px 10px 6px; }
.command-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; border:none; background:transparent; cursor:pointer;
  color:var(--text-secondary); padding:10px 10px; border-radius:var(--radius-xs); font-size:.9rem;
}
.command-item:hover, .command-item.is-active{ background:var(--surface-2); color:var(--text); }
.command-item .c-hint{ font-size:.75rem; color:var(--text-muted); }
.command-empty{ padding:28px 10px; text-align:center; color:var(--text-muted); font-size:.88rem; }

@media (max-width:640px){
  .command-overlay{ padding:0; align-items:flex-end; }
  .command-palette{ max-width:none; border-radius:var(--radius-lg) var(--radius-lg) 0 0; max-height:80vh; }
}

/* --------------------------------------------------------------------------
   FAQ ACCORDION (shared) — used on the homepage and pricing.php.
   Markup: .hp-faq > .hp-faq-item > button[aria-expanded] + .f-icon, .hp-faq-answer > p
   Toggle logic lives in assets/js/main.js so it works on any page.
   -------------------------------------------------------------------------- */
.hp-faq{ max-width:760px; margin-inline:auto; border-top:1px solid var(--border); }
.hp-faq-item{ border-bottom:1px solid var(--border); }
.hp-faq-item button{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 4px; background:none; border:none; text-align:left; cursor:pointer;
  font-size:1rem; color:var(--text); font-family:var(--font-body);
}
.hp-faq-item button:hover{ color:var(--accent); }
.hp-faq-item button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-xs); }
.hp-faq-item .f-icon{ flex-shrink:0; width:18px; height:18px; position:relative; }
.hp-faq-item .f-icon::before, .hp-faq-item .f-icon::after{ content:''; position:absolute; background:var(--text-muted); border-radius:2px; transition:transform var(--duration-fast) var(--ease-standard); }
.hp-faq-item .f-icon::before{ width:100%; height:2px; top:50%; left:0; transform:translateY(-50%); }
.hp-faq-item .f-icon::after{ width:2px; height:100%; left:50%; top:0; transform:translateX(-50%); }
.hp-faq-item.is-open .f-icon::after{ transform:translateX(-50%) scaleY(0); }
.hp-faq-item.is-open button{ color:var(--accent); }
.hp-faq-answer{ max-height:0; overflow:hidden; transition:max-height var(--duration-normal) var(--ease-standard); }
.hp-faq-item.is-open .hp-faq-answer{ max-height:320px; }
.hp-faq-answer p{ padding:0 4px 20px; font-size:.92rem; color:var(--text-secondary); max-width:64ch; line-height:1.6; }

@media (prefers-reduced-motion: reduce){
  .hp-faq-answer{ transition:none; }
  .hp-faq-item .f-icon::before, .hp-faq-item .f-icon::after{ transition:none; }
}

/* --------------------------------------------------------------------------
   TREND CHART — see includes/trend-chart.php. Fixed viewBox internal units
   (1000x220), scaled responsively by the wrapper's width via CSS — the SVG
   itself never needs a redraw on resize.
   -------------------------------------------------------------------------- */
.trend-chart{ width:100%; }
.trend-chart-svg{ width:100%; height:220px; display:block; overflow:visible; }
.trend-chart-dot{ opacity:0; transform-origin:center; transform-box:fill-box; }
.trend-chart.is-drawing .trend-chart-dot{
  animation:trend-dot-in var(--duration-normal) var(--ease-spring) forwards;
  animation-delay:var(--duration-cinematic);
}
@keyframes trend-dot-in{ from{ opacity:0; transform:scale(0.4); } to{ opacity:1; transform:scale(1); } }
.trend-chart-axis{
  display:flex; justify-content:space-between; margin-top:8px;
  font-family:var(--font-mono); font-size:.72rem; color:var(--text-muted);
}

@media (prefers-reduced-motion: reduce){
  .trend-chart-dot{ animation:none; opacity:1; }
}

/* ==========================================================================
   SCREEN-READER-ONLY UTILITY (Phase 2 §19)
   --------------------------------------------------------------------------
   Content that must be announced but not shown — aria-live status regions,
   labels for icon-only controls, table captions. The product had no such
   utility at all before (only .psy-visually-hidden, scoped to the
   psychology module's own stylesheet), so status regions had nowhere to
   live. Canonical name is .sr-only; .visually-hidden is kept as an alias
   because it is the other name people reach for.

   NOT `display:none` / `visibility:hidden` — both remove the node from the
   accessibility tree, which defeats the entire purpose.
   ========================================================================== */
.sr-only,
.visually-hidden{
  position:absolute;
  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;
}

/* Skip-link pattern: visually hidden until focused, then shown. Anything
   using .sr-only that must become visible on keyboard focus adds this. */
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible{
  position:static;
  width:auto; height:auto;
  margin:0; overflow:visible;
  clip:auto; clip-path:none;
  white-space:normal;
}