/* NERDYVANA Experience System V2 — Portal Core foundation.
   Public portals keep their own brand theme. This file standardises interaction,
   accessibility and semantic behaviour across nerdyvana.de, gombel.net and future instances. */

:root {
  --experience-info: #6ea8fe;
  --experience-success: #58a97a;
  --experience-warning: #d9a441;
  --experience-danger: var(--p-red, #d6232a);
  --experience-focus: #ffd166;
  --experience-control-min: 44px;
  --experience-focus-width: 3px;
}

/* The common PHP shell already emits this skip link. V2 guarantees it is usable. */
.skip-link {
  position: fixed;
  left: 12px;
  top: -96px;
  z-index: 5000;
  padding: 10px 14px;
  border: 2px solid currentColor;
  border-radius: 8px;
  background: #fff;
  color: #111;
  font-weight: 800;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--experience-focus-width) solid var(--experience-focus);
  outline-offset: 3px;
}

:where(button, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: var(--experience-control-min);
}

:where(input[type="checkbox"], input[type="radio"]) {
  min-width: 18px;
  min-height: 18px;
  accent-color: var(--p-red, #d6232a);
}

:where(button, [role="button"], summary) { touch-action: manipulation; }

.portal-menu {
  min-width: var(--experience-control-min);
  min-height: var(--experience-control-min);
}

:where(input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .68;
}

:where(input, textarea)::placeholder { opacity: .82; }

/* Shared semantic helpers. Feature pages may opt in without importing COS colors. */
.experience-state-info { color: var(--experience-info); }
.experience-state-success { color: var(--experience-success); }
.experience-state-warning { color: var(--experience-warning); }
.experience-state-danger { color: var(--experience-danger); }

/* Text/status remains necessary; these helpers are not intended as color-only indicators. */
.experience-status {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (prefers-contrast: more) {
  :root { --experience-focus-width: 4px; }
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-offset: 4px;
  }
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid Highlight;
  }

  .experience-status {
    border-color: CanvasText;
    forced-color-adjust: auto;
  }
}