/* Arhiva de studiu: un fișet de fișe desenat integral în CSS. Paleta stă în --archive-* (light aici, dark mai jos); restul vine din tokens.css. */
.study-archive {
  --archive-pencil: #98998e;
  --archive-faint: #d2d1c5;
  --archive-cabinet: #efefe6;
  --archive-cabinet-base: #e5e5da;
  --archive-cabinet-foot: #eaeae1;
  --archive-slot: #dfdfd1;
  --archive-slot-border: #a6a69a;
  --archive-slot-ring: #e8e8dc;
  --archive-slot-ring-2: #b3b3a6;
  --archive-front: #f6f5ee;
  --archive-front-edge: #fefdf9;
  --archive-front-inner: #deded3;
  --archive-ring: #fdfcf6;
  --archive-ring-open: var(--blue);
  --archive-drop: #575b3f38;
  --archive-top-ring: #f6f5ee70;
  --archive-side: #e9e9dd;
  --archive-holder: #ecece2;
  --archive-holder-border: #9c9c91;
  --archive-holder-highlight: #fffef7;
  --archive-dots: #999b91;
  --archive-label-border: #b9b8aa;
  --archive-label-ink: #444b49;
  --archive-label-shade: #2925220d;
  --archive-keyhole: #e5e5dc;
  --archive-keyhole-border: #7e8178;
  --archive-keyhole-bar: #969a8e;
  --archive-knob: #e8e9df;
  --archive-knob-border: #8f9388;
  --archive-knob-shadow: #878b7c24;
  --archive-knob-face: #f8f7f0;
  --archive-knob-face-border: #9d9f91;
  --archive-knob-light: #fffef8;
  --archive-knob-dark: #c3c4b7;
  --archive-knob-gleam: #d1d2c6;
  --archive-paper: #faf9f2;
  --archive-paper-border: #b8bbac;
  --archive-paper-edge: #fffdf7;
  --archive-paper-edge-2: #cac9bc;
  --archive-paper-ink: #41473f;
  --drawer-depth: 64px;
  --drawer-shift: -16px;
  --drawer-side: 16px;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  border-top: 1px solid var(--line);
}
:root[data-theme="dark"] .study-archive {
  --archive-pencil: #777b86;
  --archive-faint: #434750;
  --archive-cabinet: #23262c;
  --archive-cabinet-base: #171a20;
  --archive-cabinet-foot: #202329;
  --archive-slot: #171a20;
  --archive-slot-border: #626875;
  --archive-slot-ring: #292c33;
  --archive-slot-ring-2: #505560;
  --archive-front: #292c33;
  --archive-front-edge: #292c33;
  --archive-front-inner: #494d56;
  --archive-ring: #34373e;
  --archive-drop: #00000080;
  --archive-top-ring: #ffffff10;
  --archive-side: #20242b;
  --archive-holder: #363a41;
  --archive-holder-border: #777e88;
  --archive-holder-highlight: transparent;
  --archive-dots: #777e88;
  --archive-label-border: #626a76;
  --archive-label-ink: #ebeef3;
  --archive-label-shade: transparent;
  --archive-keyhole: #353b43;
  --archive-keyhole-border: #7b828d;
  --archive-keyhole-bar: #7b828d;
  --archive-knob: #20242a;
  --archive-knob-border: #7b828d;
  --archive-knob-shadow: #00000040;
  --archive-knob-face: #343a42;
  --archive-knob-face-border: #9299a5;
  --archive-knob-light: #737c89;
  --archive-knob-dark: #15191f;
  --archive-knob-gleam: #737c89;
  --archive-paper: #5e646d;
  --archive-paper-border: #89909a;
  --archive-paper-edge: #747986;
  --archive-paper-edge-2: #2b3039;
  --archive-paper-ink: #f1f1ed;
}
.archive-lilac { --archive-label: #dcd9ec; --archive-interior: #e3e0ef; }
.archive-peach { --archive-label: #edddd0; --archive-interior: #eee1d3; }
.archive-sage { --archive-label: #d9e3d4; --archive-interior: #e0e7d8; }
.archive-butter { --archive-label: #eae4c4; --archive-interior: #efebd4; }
.archive-rose { --archive-label: #ead5d6; --archive-interior: #f0e0de; }
.archive-sky { --archive-label: #d7e3e8; --archive-interior: #e0e9ec; }
:root[data-theme="dark"] .archive-lilac { --archive-label: #4a465e; --archive-interior: #393546; }
:root[data-theme="dark"] .archive-peach { --archive-label: #624c43; --archive-interior: #43372f; }
:root[data-theme="dark"] .archive-sage { --archive-label: #435547; --archive-interior: #303d33; }
:root[data-theme="dark"] .archive-butter { --archive-label: #5c573e; --archive-interior: #423f31; }
:root[data-theme="dark"] .archive-rose { --archive-label: #61474f; --archive-interior: #44323a; }
:root[data-theme="dark"] .archive-sky { --archive-label: #435460; --archive-interior: #303d46; }

.archive-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-8); margin-bottom: var(--stack-lg); }
.archive-heading .eyebrow { margin-bottom: var(--space-4); }
/* letter-spacing-ul titlului vine din regula de bază h1,h2 { letter-spacing: -.02em } din styles.css (spec §3); aici nu se declară. */
.archive-heading h2 { font: 400 var(--display-2)/var(--leading-tight) var(--serif); margin: 0; }
.archive-heading h2 em { color: var(--blue); font-style: italic; font-weight: 400; }
.archive-instruction { font-size: var(--type-small); line-height: 1.85; margin: 0 6px 5px 0; display: grid; grid-template-columns: 1fr 29px; column-gap: var(--space-6); }
.archive-instruction > span { grid-column: 2; grid-row: 1 / 3; font: var(--display-3)/1 var(--serif); align-self: center; color: var(--ink); }

.archive-cabinet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  padding: 17px;
  border: 1px solid var(--archive-pencil);
  border-radius: 3px;
  position: relative;
  background: var(--archive-cabinet);
  box-shadow: 0 3px 0 var(--archive-cabinet-base), 0 4px 0 var(--archive-pencil);
  isolation: isolate;
}
.archive-cabinet::before { content: ''; position: absolute; inset: 5px; border: 1px solid var(--archive-faint); pointer-events: none; }
.archive-cabinet::after { content: ''; position: absolute; bottom: -12px; left: 25px; right: 25px; height: 7px; border: 1px solid var(--archive-pencil); border-top: 0; border-radius: 0 0 2px 2px; background: var(--archive-cabinet-foot); z-index: -1; }
.archive-slot {
  min-width: 0;
  aspect-ratio: 1.72;
  position: relative;
  border: 1px solid var(--archive-slot-border);
  border-radius: 2px;
  background: var(--archive-slot);
  box-shadow: inset 0 0 0 3px var(--archive-slot-ring), inset 0 0 0 4px var(--archive-slot-ring-2);
}
.archive-slot.is-open, .archive-slot:focus-within { z-index: 4; }
.archive-drawer {
  display: block;
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 1px;
  background: transparent;
  touch-action: manipulation;
  z-index: 3;
  transform: translate3d(0, 0, 0);
  transition: transform var(--dur-base) var(--ease);
}
.archive-drawer-front {
  display: block;
  position: absolute;
  inset: 0;
  border: 1px solid var(--archive-pencil);
  border-radius: 1px;
  background: var(--archive-front);
  box-shadow: 1px 1px 0 var(--archive-front-edge), inset 0 0 0 2px var(--archive-ring);
  backface-visibility: hidden;
}
.archive-drawer-front::after { content: ''; position: absolute; inset: 4px 3px 3px 4px; border: 1px solid var(--archive-front-inner); border-radius: 1px; pointer-events: none; }
.archive-label-holder {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 84%;
  max-width: 200px;
  min-width: 104px;
  padding: 3px 12px;
  border: 1px solid var(--archive-holder-border);
  border-radius: 3px;
  background: var(--archive-holder);
  box-shadow: 0 1px 0 var(--archive-holder-highlight);
}
.archive-label-holder::before, .archive-label-holder::after { content: ''; position: absolute; top: 50%; width: 3px; height: 3px; border: 1px solid var(--archive-dots); border-radius: 50%; transform: translateY(-50%); }
.archive-label-holder::before { left: 4px; }
.archive-label-holder::after { right: 4px; }
.archive-label { display: block; padding: 3px 4px 4px; border: 1px solid var(--archive-label-border); background: var(--archive-label); font: 700 var(--type-label)/1.3 var(--sans); letter-spacing: 0; text-align: center; text-wrap: balance; overflow-wrap: anywhere; color: var(--archive-label-ink); box-shadow: inset 0 1px 1px var(--archive-label-shade); }
.archive-keyhole { position: absolute; top: 48%; left: 50%; width: 5px; height: 5px; transform: translateX(-50%); border: 1px solid var(--archive-keyhole-border); border-radius: 50%; background: var(--archive-keyhole); }
.archive-keyhole::after { content: ''; position: absolute; width: 2px; height: 4px; top: 2px; left: .5px; background: var(--archive-keyhole-bar); }
.archive-knob { position: absolute; top: 62%; left: 50%; display: block; width: 26px; height: 26px; border: 1px solid var(--archive-knob-border); border-radius: 50%; transform: translateX(-50%); background: var(--archive-knob); box-shadow: 0 2px 1px var(--archive-knob-shadow); }
.archive-knob::before { content: ''; position: absolute; inset: 3px; border: 1px solid var(--archive-knob-face-border); border-radius: 50%; background: var(--archive-knob-face); box-shadow: inset 1px 1px 0 var(--archive-knob-light), inset -1px -1px 0 var(--archive-knob-dark); }
.archive-knob::after { content: ''; position: absolute; width: 7px; height: 3px; top: 7px; left: 8px; border-top: 1px solid var(--archive-knob-gleam); border-radius: 50%; transform: rotate(-30deg); }
.archive-drawer-mark { position: absolute; bottom: 5px; right: 11px; font: var(--type-copy)/1 var(--serif); color: var(--muted); }
.archive-drawer[aria-expanded='true'] .archive-drawer-mark { color: var(--blue); }
.archive-drawer[aria-expanded='true'] .archive-drawer-mark::after { content: '−'; position: absolute; inset: 0; background: var(--archive-front); }
.archive-drawer-top { position: absolute; top: 4px; left: 4px; right: 4px; height: var(--drawer-depth); transform-origin: center top; transform: skewX(-14.036deg) scaleY(0); border: 1px solid var(--archive-pencil); background: var(--archive-interior); box-shadow: inset 0 0 0 4px var(--archive-top-ring); z-index: 1; }
.archive-drawer-side { position: absolute; top: 4px; right: 4px; width: var(--drawer-side); height: calc(100% - 8px); transform-origin: right top; transform: skewY(-75.964deg) scaleX(0); border: 1px solid var(--archive-pencil); background: var(--archive-side); z-index: 1; }
.archive-drawer-top, .archive-drawer-side { transition: transform var(--dur-base) var(--ease); pointer-events: none; }
.archive-slot.is-open .archive-drawer { transform: translate3d(var(--drawer-shift), var(--drawer-depth), 0); }
.archive-slot.is-open .archive-drawer-top { transform: skewX(-14.036deg) scaleY(1); }
.archive-slot.is-open .archive-drawer-side { transform: skewY(-75.964deg) scaleX(1); }
.archive-slot.is-open .archive-drawer-front { box-shadow: 0 10px 12px -8px var(--archive-drop), inset 0 0 0 2px var(--archive-ring-open); }
.archive-drawer-inside { position: absolute; top: 11px; left: 15px; right: 29px; height: calc(var(--drawer-depth) + 5px); z-index: 2; visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity var(--dur-fast) ease, transform var(--dur-base) var(--ease), visibility var(--dur-base); }
.archive-slot.is-open .archive-drawer-inside { visibility: visible; opacity: 1; transform: translateY(0); }
.archive-folder { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; transform: translateY(0); transition: transform var(--dur-fast) var(--ease); touch-action: manipulation; }
.archive-folder:hover { transform: translateY(-5px); }
.archive-paper { display: block; position: absolute; inset: 0 5px 0 7px; border: 1px solid var(--archive-paper-border); border-radius: 3px 3px 0 0; background: var(--archive-paper); box-shadow: 0 -3px 0 -2px var(--archive-paper-edge), 0 -4px 0 -2px var(--archive-paper-edge-2); }
.archive-paper-back { transform: rotate(-2deg); background: var(--archive-label); }
.archive-paper-back::before { content: ''; position: absolute; top: -6px; left: 9px; width: 31%; height: 6px; border: 1px solid var(--archive-paper-border); border-bottom: 0; border-radius: 3px 3px 0 0; background: var(--archive-label); }
.archive-paper-middle { inset: 5px 2px -5px 3px; transform: rotate(1deg); }
.archive-paper-front { inset: 11px 7px -9px 0; background: var(--archive-label); text-align: left; }
.archive-paper-front > span { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 9px 10px; font-size: var(--type-label); color: var(--archive-paper-ink); }
.archive-paper-front b { font-size: var(--type-copy); font-weight: 400; }
.archive-caption { display: flex; justify-content: space-between; gap: var(--space-5); margin: calc(var(--drawer-depth) + 23px) 0 0; font-size: var(--type-label); color: var(--muted); }
.archive-caption > span:first-child { font-family: var(--serif); font-size: var(--type-ui); font-style: italic; }
.archive-caption > span:last-child { letter-spacing: .15em; padding-top: 2px; }

/* Dialogul folosește componenta comună .modal; aici rămân doar lățimea, bara colorată și titlul serif. */
.archive-panel { width: min(440px, calc(100% - 32px)); }
.archive-panel::before { content: ''; display: block; width: 38px; height: 5px; background: var(--archive-label); margin-bottom: var(--space-5); }
.archive-panel-number { display: inline-block; color: var(--muted); font-size: var(--type-label); letter-spacing: .1em; margin-bottom: var(--space-3); }
.archive-panel .modal-title { font: 400 var(--display-3)/1.15 var(--serif); letter-spacing: -.02em; margin: 0 0 var(--space-3); padding-right: var(--control-size); }
.archive-panel-intro p { font-size: var(--type-ui); max-width: 340px; line-height: 1.85; margin-bottom: var(--space-4); }
.archive-panel-content { border-top: 1px solid var(--line); }
.archive-panel .archive-course-links a { padding: 15px 3px; }
.archive-course-links { list-style: none; margin: 0; padding: 0; }
.archive-course-links li { margin: 0; border-bottom: 1px solid var(--line); }
.archive-course-links a { display: flex; align-items: center; justify-content: space-between; gap: 17px; padding: 14px 1px; min-height: var(--control-size); font-size: var(--type-ui); line-height: 1.65; }
.archive-course-links a:hover { color: var(--blue); }
.archive-link-arrow { color: var(--muted); font-size: var(--type-copy); line-height: 1; flex-shrink: 0; transition: transform var(--dur-fast) var(--ease); }
.archive-course-links a:hover .archive-link-arrow { color: var(--blue); transform: translateX(3px); }
.archive-empty { font-size: var(--type-small); padding: 15px 0; }
.archive-exercises { margin-top: var(--space-5); }
.archive-exercises summary { min-height: var(--control-size); display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); font-size: var(--type-small); color: var(--blue); cursor: pointer; list-style: none; }
.archive-exercises summary::-webkit-details-marker, .archive-flat > summary::-webkit-details-marker { display: none; }
.archive-exercises[open] > summary > span, .archive-flat[open] > summary > span { transform: rotate(45deg); }
.archive-exercises .archive-course-links a { font-size: var(--type-small); }
.archive-flat { margin-top: var(--space-6); border-top: 1px solid var(--line); }
.archive-flat > summary { display: flex; justify-content: space-between; gap: var(--space-5); align-items: center; min-height: var(--control-size); padding: 13px 0; cursor: pointer; list-style: none; font-size: var(--type-small); color: var(--muted); }
.archive-flat > summary > span { font-size: var(--type-copy); }
.archive-flat > summary:hover { color: var(--blue); }
.archive-flat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 35px; row-gap: var(--space-6); padding-top: var(--space-4); }
.archive-flat-grid h3 { font: 400 var(--display-3)/1.2 var(--serif); letter-spacing: -.02em; margin-bottom: var(--space-2); }
.archive-flat-grid .archive-course-links a { font-size: var(--type-small); padding: 11px 0; }
.archive-simple .archive-cabinet, .archive-simple .archive-caption, .archive-simple .archive-panels, .archive-simple .archive-instruction { display: none; }
.archive-simple .archive-flat { margin-top: 0; }
.archive-simple > .archive-flat-grid { padding-top: 0; }
[data-archive-keyboard] .archive-drawer, [data-archive-keyboard] .archive-drawer-top, [data-archive-keyboard] .archive-drawer-side, [data-archive-keyboard] .archive-drawer-inside, [data-archive-keyboard] .archive-folder { transition: none; }

@media (max-width: 900px) {
  .study-archive { --drawer-depth: 48px; }
  /* row-gap = adâncimea sertarului + 8px: fața trasă în jos nu atinge slotul de dedesubt. */
  .archive-cabinet { gap: 13px; row-gap: calc(var(--drawer-depth) + 8px); padding: 13px; }
  .archive-slot { aspect-ratio: 1.48; }
  .archive-label-holder { min-width: 102px; top: 12%; }
  .archive-keyhole { top: 50%; }
  .archive-knob { width: 24px; height: 24px; top: 64%; }
  .archive-flat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 27px; }
}
@media (max-width: 580px) {
  .study-archive { --drawer-depth: 48px; --drawer-shift: -12px; --drawer-side: 12px; }
  .archive-heading { display: block; }
  .archive-heading .eyebrow { margin-bottom: var(--space-4); }
  .archive-instruction { display: block; margin: var(--space-5) 0 0; }
  .archive-instruction br, .archive-instruction span { display: none; }
  .archive-cabinet { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 11px; column-gap: 13px; row-gap: calc(var(--drawer-depth) + 8px); }
  .archive-slot { aspect-ratio: 1.1; }
  .archive-label-holder { width: 84%; min-width: 0; top: 12%; padding: 2px 8px; }
  .archive-label-holder::before { left: 2px; }
  .archive-label-holder::after { right: 2px; }
  .archive-label { padding: 3px 2px; }
  .archive-keyhole { top: 58%; }
  .archive-knob { top: 70%; width: 23px; height: 23px; }
  .archive-drawer-mark { right: 8px; }
  .archive-drawer-inside { top: 7px; left: 7px; right: 15px; }
  .archive-paper-front { top: 9px; }
  .archive-paper-front > span { padding: 7px 6px; gap: 2px; }
  .archive-paper-front b { font-size: var(--type-label); }
  .archive-flat-grid { grid-template-columns: 1fr; gap: var(--space-5); padding-top: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  /* Translația sertarului este funcțională (dezvăluie dosarul), așa că rămâne, dar fără tranziție. */
  .archive-drawer, .archive-drawer-top, .archive-drawer-side, .archive-drawer-inside, .archive-folder, .archive-link-arrow { transition: none; }
  .archive-folder:hover, .archive-course-links a:hover .archive-link-arrow { transform: none; }
}
@media print { .study-archive { break-before: page; padding: 25px 0; } .archive-cabinet, .archive-caption, .archive-panels, .archive-instruction, .archive-flat > summary { display: none; } .archive-flat-grid { display: grid !important; grid-template-columns: repeat(2, 1fr); } }