/* components.css — componentele comune ale site-ului (css-core-4).
   Se încarcă imediat după styles.css; modulele (archive, grades, curriculum, exercise-bank),
   appearance.css, header.css și study.css vin după și pot rafina contextual.
   Consumă numai tokenii din tokens.css (css-core-1): fără hex, fără px la text, fără prefixul #main.
   Butoanele sunt liquid glass exact ca în Axioma (axioma_5.html, .lg): sticla în ::before, marginea în ::after, difuzie
   de 2px (--glass-blur) și refracția marginii (glass-lens.js, Chromium) doar pe ::before și doar sub @supports; transparență redusă = sticlă opacă, culori forțate = fără straturi. Varianta „plină” de dinainte:
   docs/design-alternatives/components-butoane-plin-2026-09-27.css. */

/* == 1. Butoane: materialul liquid glass (.button, .icon-button, .glass-button) și forma (.button, .icon-button) == */
/* Rețeta Axioma, pe tokeni: corpul rămâne transparent; ::before este sticla (lumina radială urmărește cursorul prin
   --glass-x/--glass-y/--glass-angle din appearance.js, podeaua, umplerea --glass-fill și muchiile inset; difuzia și
   refracția doar în §12), ::after este marginea optică (gradient conic mascat la 1px). Proprietățile luminii sunt
   înregistrate cu @property, ca lumina să alunece după cursor în loc să sară. */
@property --glass-x { syntax: '<percentage>'; inherits: true; initial-value: 28%; }
@property --glass-y { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@property --glass-angle { syntax: '<angle>'; inherits: true; initial-value: -40deg; }
.button,
.icon-button,
.glass-button {
  --glass-x: 28%;
  --glass-y: 0%;
  --glass-angle: -40deg;
  --glass-glow: var(--glass-light);
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  box-shadow: 0 2px 3px -2px var(--glass-depth), 0 9px 22px -12px var(--glass-depth);
  transition: --glass-x .16s ease-out, --glass-y .16s ease-out, --glass-angle .2s ease-out, box-shadow .2s, color .18s, scale .24s cubic-bezier(.2, .8, .2, 1);
  -webkit-tap-highlight-color: transparent;
}
.button::before,
.icon-button::before,
.glass-button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(85% 160% at var(--glass-x) var(--glass-y), var(--glass-glow), transparent 60%), radial-gradient(110% 70% at 50% 125%, var(--glass-floor), transparent 78%), var(--glass-fill);
  box-shadow: inset 0 0 0 .5px var(--glass-line), inset 0 2px 3px -2px var(--glass-inner), inset 0 -3px 4px -3px var(--glass-rim);
}
.button::after,
.icon-button::after,
.glass-button::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--glass-angle), var(--glass-rim), var(--glass-line) 55deg, transparent 100deg, var(--glass-line) 140deg, var(--glass-rim) 180deg, transparent 250deg, var(--glass-line) 310deg, var(--glass-rim));
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  mask-composite: exclude;
}
/* Forma: .glass-button rămâne doar material (avatarul și „Ieșire” își iau forma din header.css). */
.button,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  max-width: 100%;
  min-height: var(--control-size);
  margin: 0;
  padding: 0 var(--space-5);
  font: 700 var(--type-ui)/1.35 var(--sans);
  letter-spacing: normal;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
}
.icon-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--control-size);
  width: var(--control-size);
  height: var(--control-size);
  min-width: var(--control-size);
  padding: 0;
  font-weight: 400;
  line-height: 1;
}
.button > svg,
.icon-button > svg {
  display: block;
  flex: none;
  width: var(--action-icon-size);
  height: var(--action-icon-size);
}
/* Hover, ca în Axioma: lumina de sub cursor se schimbă (--glass-hover-light) și muchia interioară se aprinde;
   textul își păstrează culoarea; umbra se adâncește ușor. */
.button:not(:disabled):hover,
.icon-button:not(:disabled):hover,
.glass-button:hover {
  --glass-glow: var(--glass-hover-light);
  --glass-inner: var(--glass-hover-inner);
  box-shadow: 0 2px 4px -2px var(--glass-depth), 0 12px 26px -12px var(--glass-depth);
}
.button:not(:disabled):active,
.icon-button:not(:disabled):active,
.glass-button:active {
  scale: .975;
}
.button:disabled,
.button[aria-disabled="true"],
.icon-button:disabled,
.icon-button[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.button[aria-busy="true"] {
  cursor: progress;
}

/* == 2. Butonul primar: sticla nuanțată din Axioma (.lg-tint / .btn.primary.lg): umplere --glass-tint, lumină și podea
   proprii, textul rămâne --ink; unul singur pe vedere == */
.button.primary {
  --glass-fill: var(--glass-tint);
  --glass-glow: var(--glass-tint-light);
  --glass-floor: var(--glass-tint-floor);
  color: var(--ink);
  font-weight: 700;
}

/* == 3. Butonul mic: tot 44px, doar mai strâns și cu text mai mic (::before este acum stratul de sticlă) == */
.button.small {
  min-height: var(--control-size);
  padding: 0 var(--space-4);
  font-size: var(--type-small);
}

/* == 4. Legătura terțiară și săgeata == */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-size);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: 400 var(--type-ui)/1.35 var(--sans);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  cursor: pointer;
}
.text-link:hover {
  text-decoration-thickness: 2px;
}
.text-link:disabled,
.text-link[aria-disabled="true"] {
  color: var(--subtle);
  cursor: not-allowed;
  text-decoration: none;
}
.arrow {
  display: inline-block;
  line-height: 1;
  margin-inline-start: .25em; /* săgeata nu se lipește de text în contextele fără gap */
  transition: transform var(--dur-fast) var(--ease);
}
:is(.button, .text-link, .icon-button) > .arrow { margin-inline-start: 0; } /* acolo spațierea o dă gap */
.text-link:hover .arrow {
  transform: translateX(var(--space-1));
}

/* == 5. Focus: un singur inel, tokenizat == */
.button:focus-visible,
.icon-button:focus-visible,
.glass-button:focus-visible,
.text-link:focus-visible,
.modal-close:focus-visible,
.toast-close:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.toast-close:focus-visible {
  outline-offset: calc(-1 * var(--focus-offset));
}

/* == 6. Modal pe <dialog> (arhivă, catalog, culegere); display rămâne al UA (dialogul închis e ascuns) == */
.modal {
  box-sizing: border-box;
  width: min(570px, 100% - 28px);
  max-width: calc(100% - 28px);
  max-height: calc(100dvh - 36px);
  margin: auto;
  padding: var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-modal);
  overflow: auto;
  overscroll-behavior: contain;
}
.modal-wide {
  width: min(880px, 100% - 28px);
}
.modal::backdrop {
  background: var(--scrim); /* tokens.css: light rgb(20 22 30 / .38), dark rgb(0 0 0 / .62); întunecă pagina în ambele teme */
}
.modal[open] {
  animation: modal-in var(--dur-base) var(--ease);
}
.modal[open]::backdrop {
  animation: modal-fade var(--dur-base) var(--ease);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(var(--space-2)) scale(.98); }
}
@keyframes modal-fade {
  from { opacity: 0; }
}
.modal-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--control-size);
  height: var(--control-size);
  min-width: var(--control-size);
  min-height: var(--control-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font: 400 1.75rem/1 var(--sans);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.modal-close:hover {
  background: var(--blue-soft);
  color: var(--ink);
}
.modal-title {
  margin: 0 0 var(--space-4);
  padding-right: var(--control-size);
  color: var(--ink);
  font: 400 var(--display-3)/var(--leading-tight) var(--serif);
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* == 7. Stare goală (singura definiție; study.css din study-B-2 o consumă, nu o redefinește) == */
.empty{display:grid;justify-items:center;gap:var(--space-3);max-width:var(--measure);margin:0 auto;padding:var(--space-10) var(--space-4);text-align:center}
.empty-glyph{margin-bottom:var(--space-2);font-family:var(--serif);font-style:italic;font-size:clamp(56px,8vw,88px);line-height:1;color:var(--ink);opacity:.18}
.empty-title{margin:0;font-family:var(--serif);font-weight:400;font-size:var(--display-3);line-height:var(--leading-tight);letter-spacing:-.02em;color:var(--ink)}
.empty-text{margin:0;max-width:44ch;font-size:var(--type-copy);line-height:var(--leading-copy);color:var(--muted)}
.empty-action{margin-top:var(--space-2)}

/* == 8. Chip de stare: textul poartă sensul, culoarea doar îl susține == */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-6);
  padding: 0 var(--space-3);
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--muted);
  font: 700 var(--type-label)/1.4 var(--sans);
  letter-spacing: .02em;
  white-space: nowrap;
  vertical-align: middle;
}
.chip-success { background: var(--success-soft); color: var(--success); }
.chip-warn { background: var(--warn-soft); color: var(--warn); }
.chip-danger { background: var(--danger-soft); color: var(--danger); }
.chip-muted { background: var(--panel); color: var(--muted); }

/* == 9. Bara informativă (role=status în markup; role=alert trece pe --danger) == */
.notice {
  max-width: var(--measure);
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--blue-soft);
  color: var(--ink);
  font: 400 var(--type-ui)/var(--leading-copy) var(--sans);
  overflow-wrap: anywhere;
}
.notice[role="alert"] {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}
.notice .text-link {
  vertical-align: middle;
}

/* == 10. Decor de secțiune (singura definiție; study.css din study-B-2 nu o redefinește); aria-hidden în markup == */
.has-glyph{position:relative}
.has-glyph > :not(.section-glyph){position:relative;z-index:1}
.section-glyph{position:absolute;right:0;bottom:-.12em;z-index:0;font-family:var(--serif);font-style:italic;font-size:clamp(96px,12vw,180px);line-height:1;color:var(--ink);opacity:.14;pointer-events:none;user-select:none}
:root[data-theme="dark"] .section-glyph{opacity:.18}

/* == 11. Toast (status, #toast) și alertă persistentă (#alert.toast-alert) == */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  z-index: 9100; /* peste .bank-viewer-zen (9000) */
  box-sizing: border-box;
  width: max-content;
  max-width: min(560px, 100% - 32px);
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--ink);
  color: var(--surface);
  box-shadow: var(--shadow-2);
  font: 400 var(--type-ui)/1.5 var(--sans);
  opacity: 0;
  transform: translate(-50%, var(--space-3));
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast-alert {
  bottom: calc(var(--space-6) + 64px);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  border-left: 4px solid var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
  pointer-events: auto;
}
/* Alerta închisă rămâne ascunsă chiar dacă o foaie anterioară nu mai are [hidden]{display:none}. */
.toast-alert[hidden] {
  display: none;
}
.toast-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.toast-close {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--control-size);
  height: var(--control-size);
  min-width: var(--control-size);
  min-height: var(--control-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font: 400 1.5rem/1 var(--sans);
  cursor: pointer;
}
.toast-close:hover {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}

/* == 12. Glass: difuzia și refracția doar pe stratul ::before și doar unde există suport == */
/* Ordinea e cea din Axioma: în Chromium -webkit-backdrop-filter e alias, deci ultima declarație câștigă și refracția
   (--refract, filtrul SVG din glass-lens.js) intră doar pe .has-refraction; Safari folosește varianta fără url(). */
@supports (backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px)) {
  .button::before,
  .icon-button::before,
  .glass-button::before {
    backdrop-filter: blur(var(--glass-blur)) var(--refract, blur(0)) saturate(115%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(115%);
  }
  .has-refraction::before {
    -webkit-backdrop-filter: blur(var(--glass-blur)) var(--refract) saturate(115%);
  }
  .modal::backdrop {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  @media (prefers-reduced-transparency: reduce) {
    .button::before,
    .icon-button::before,
    .glass-button::before,
    .has-refraction::before,
    .modal::backdrop {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}
/* Transparență redusă: sticla devine opacă pe --surface; umplerea (nuanța primarului) rămâne deasupra. */
@media (prefers-reduced-transparency: reduce) {
  .button::before,
  .icon-button::before,
  .glass-button::before {
    background: linear-gradient(var(--glass-fill), var(--glass-fill)), var(--surface);
  }
}

/* == 13. Mișcare redusă: fără translații și scalări; opacitatea și culoarea rămân == */
@media (prefers-reduced-motion: reduce) {
  .button,
  .icon-button,
  .glass-button {
    transition-property: color, box-shadow;
  }
  .button:not(:disabled):active,
  .icon-button:not(:disabled):active,
  .glass-button:active {
    scale: none;
  }
  .text-link:hover .arrow {
    transform: none;
  }
  .modal[open] {
    animation-name: modal-fade;
  }
  .toast,
  .toast.show {
    transform: translate(-50%, 0);
  }
}

/* == 14. Culori forțate (Windows High Contrast): fără straturile de sticlă, margine ButtonText == */
@media (forced-colors: active) {
  .button,
  .icon-button,
  .glass-button,
  .modal-close,
  .toast-close {
    border: 1px solid ButtonText;
  }
  .button::before,
  .button::after,
  .icon-button::before,
  .icon-button::after,
  .glass-button::before,
  .glass-button::after {
    content: none;
  }
  .button.primary {
    forced-color-adjust: none;
    border-color: ButtonText;
    background: ButtonText;
    color: ButtonFace;
  }
  .button.primary:not(:disabled):hover {
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }
  .chip,
  .toast:not(.toast-alert) {
    border: 1px solid CanvasText;
  }
}

/* == 15. Breakpoint comun (580px) și tipar == */
@media (max-width: 580px) {
  .modal {
    padding: var(--space-6) var(--space-5);
  }
  .toast {
    bottom: var(--space-4);
  }
  .toast-alert {
    bottom: calc(var(--space-4) + 64px);
  }
  .section-glyph{font-size:clamp(72px,24vw,120px)}
}
@media print {
  .toast,
  .modal-close,
  .section-glyph {
    display: none;
  }
}