/* Filing Cabinet folder-and-paper interaction. The cabinet image remains the visual source of drawer labels. */

.filing-drawers {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
}

.archive-trigger:nth-child(7) { left: 40%; top: 56%; width: 15.5%; height: 19%; }
.archive-trigger:nth-child(8) { left: 56.5%; top: 56%; width: 15.5%; height: 19%; }

.filing-experience[hidden],
.filing-stage[hidden] {
  display: none;
}

.filing-experience {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  overscroll-behavior: contain;
  padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 36%, rgba(130, 89, 42, 0.12), transparent 45%),
    rgba(4, 3, 2, 0.58);
  transition: opacity var(--pdv-transition-fast, 160ms) var(--pdv-transition-ease, ease);
}

.filing-stage {
  display: grid;
  width: 100%;
  min-height: 100%;
  place-items: center;
}

.filing-artboard {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  flex: none;
  max-width: 100%;
  filter: drop-shadow(0 1.4rem 1.2rem rgba(0, 0, 0, 0.66));
}

.filing-artboard--folder {
  width: min(94vw, 38rem, calc(88dvh * 0.75));
  aspect-ratio: 3 / 4;
  animation: filing-folder-arrive var(--pdv-transition-room, 200ms) var(--pdv-transition-ease, ease) both;
}

.filing-artboard--paper {
  --paper-ratio: 0.75;
  --paper-safe-top: 15%;
  --paper-safe-right: 15%;
  --paper-safe-bottom: 14%;
  --paper-safe-left: 15%;
  width: min(94vw, 46rem, calc(90dvh * var(--paper-ratio)));
  aspect-ratio: var(--paper-ratio);
  animation: filing-paper-arrive var(--pdv-transition-room, 200ms) var(--pdv-transition-ease, ease) both;
}

.filing-artboard--paper[data-paper-art="standard"] {
  --paper-ratio: 0.6666667;
  --paper-safe-top: 14%;
  --paper-safe-right: 14%;
  --paper-safe-bottom: 14%;
  --paper-safe-left: 17%;
}

.filing-artboard--paper[data-paper-art="press"] {
  --paper-safe-top: 16%;
  --paper-safe-right: 17%;
  --paper-safe-bottom: 14%;
  --paper-safe-left: 16%;
}

.filing-artboard--paper[data-paper-art="gallery"] {
  --paper-safe-top: 18%;
  --paper-safe-right: 18%;
  --paper-safe-bottom: 18%;
  --paper-safe-left: 18%;
}

.filing-artboard--paper[data-paper-art="logos"] {
  --paper-safe-top: 15%;
  --paper-safe-right: 15%;
  --paper-safe-bottom: 15%;
  --paper-safe-left: 15%;
}

.filing-artboard--paper[data-paper-art="dossier"] {
  --paper-safe-top: 20%;
  --paper-safe-right: 18%;
  --paper-safe-bottom: 16%;
  --paper-safe-left: 18%;
}

.filing-artboard--paper[data-paper-art="question"] {
  --paper-safe-top: 17%;
  --paper-safe-right: 18%;
  --paper-safe-bottom: 16%;
  --paper-safe-left: 18%;
}

.filing-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.folder-label {
  position: absolute;
  left: 25%;
  top: 75.2%;
  display: grid;
  width: 50%;
  height: 6.6%;
  place-items: center;
  color: #2b1a0f;
  text-align: center;
  transform: rotate(0.2deg);
}

.folder-label h2 {
  max-width: 100%;
  margin: 0;
  font-family: Arial Black, Impact, Arial, sans-serif;
  font-size: clamp(0.72rem, 4.4cqw, 1.45rem);
  line-height: 0.94;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.folder-actions {
  position: absolute;
  left: 25%;
  top: 84.5%;
  display: flex;
  width: 50%;
  height: 7%;
  align-items: center;
  justify-content: center;
  transform: rotate(-0.25deg);
}

.folder-actions button,
.folder-shove,
.paper-shove,
.dossier-gate button {
  min-height: 2.75rem;
  padding: 0.28rem 0.35rem;
  border: 0;
  border-radius: 0;
  color: #3b2015;
  background: transparent;
  box-shadow: none;
  font-family: Arial Black, Impact, Arial, sans-serif;
  font-size: clamp(0.56rem, 2.25cqw, 0.82rem);
  line-height: 1;
  letter-spacing: 0.015em;
  text-align: center;
}

.folder-shove {
  position: absolute;
  z-index: 2;
  top: 3.5%;
  left: 5%;
  display: inline-flex;
  min-width: 6.8rem;
  align-items: center;
  justify-content: flex-start;
  transform: rotate(-0.3deg);
}

.folder-actions button:is(:hover, :focus-visible),
.folder-shove:is(:hover, :focus-visible),
.paper-shove:is(:hover, :focus-visible),
.paper-page-navigation button:is(:hover, :focus-visible),
.dossier-gate button:is(:hover, :focus-visible) {
  color: #8e281c;
  background: transparent;
}

.folder-actions button:focus-visible,
.folder-shove:focus-visible,
.paper-shove:focus-visible,
.paper-page-navigation button:focus-visible,
.dossier-gate button:focus-visible,
.dossier-gate input:focus-visible {
  outline: 0.16rem dashed #6d241b;
  outline-offset: 0.14rem;
}

.paper-content {
  position: absolute;
  inset: var(--paper-safe-top) var(--paper-safe-right) var(--paper-safe-bottom) var(--paper-safe-left);
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  color: #2a1b12;
  font-family: Arial, system-ui, sans-serif;
  text-align: center;
}

.paper-content > [data-paper-empty-state] {
  display: grid;
  flex: 1;
  align-content: center;
}

.paper-content > [data-paper-empty-state][hidden] {
  display: none;
}

.paper-records {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 0.2rem 0.35rem 0.15rem;
  text-align: left;
}

.paper-records[hidden],
.filing-preview-label[hidden] {
  display: none;
}

.paper-pages {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.paper-page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.paper-page[hidden],
.paper-page-navigation[hidden],
.paper-page-navigation button[hidden] {
  display: none;
}

.paper-record--continued h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.paper-page-navigation {
  display: grid;
  min-height: 1.8rem;
  flex: none;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 0.35rem;
  padding-top: 0.18rem;
  color: #54261c;
  font-family: Arial Black, Impact, Arial, sans-serif;
  font-size: clamp(0.52rem, 2.2cqw, 0.72rem);
  letter-spacing: 0.035em;
  text-align: center;
}

.paper-page-navigation[data-measuring="true"] {
  visibility: hidden;
}

.paper-page-navigation button {
  min-width: 0;
  margin: 0;
  padding: 0.1rem 0.18rem;
  border: 0;
  color: #5f1f18;
  background: transparent;
  font: inherit;
  line-height: 1.15;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 0.16rem;
}

.paper-page-navigation button:first-child { justify-self: start; }
.paper-page-navigation button:last-child { justify-self: end; }

.paper-record + .paper-record {
  margin-top: clamp(0.8rem, 3cqw, 1.4rem);
  padding-top: clamp(0.7rem, 2.4cqw, 1.1rem);
  border-top: 0.1rem dashed rgba(61, 41, 28, 0.56);
}

.paper-record--attachment-page {
  height: 100%;
}

.paper-record h3 {
  margin: 0;
  font-size: clamp(0.92rem, 3.5cqw, 1.32rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.paper-record p {
  white-space: pre-wrap;
}

.paper-record .paper-record__details,
.paper-record .paper-record__caption {
  font-size: clamp(0.68rem, 2.8cqw, 0.9rem);
  font-weight: 700;
}

.paper-record a {
  display: inline-block;
  margin-top: 0.7rem;
  color: #5f1f18;
  font-family: Arial Black, Impact, Arial, sans-serif;
  font-size: clamp(0.68rem, 2.8cqw, 0.9rem);
}

.paper-attachment {
  margin: 0.85rem 0 0;
  max-width: 100%;
}

.paper-attachment img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(52cqh, 34rem);
  margin-inline: auto;
  object-fit: contain;
}

.paper-attachment--top-of-page img {
  max-height: min(30cqh, 18rem);
}

.paper-attachment--full-page,
.paper-attachment--photo-page {
  display: grid;
  height: 100%;
  align-content: center;
  margin: 0;
}

.paper-attachment--full-page img,
.paper-attachment--photo-page img {
  max-height: min(66cqh, 42rem);
}

.paper-attachment--photo-page picture,
.paper-attachment--photo-page > img {
  padding: clamp(0.3rem, 1.5cqw, 0.65rem);
  border: 0.08rem solid rgba(61, 41, 28, 0.42);
  background: rgba(246, 229, 193, 0.52);
  box-shadow: 0.18rem 0.24rem 0.4rem rgba(61, 41, 28, 0.2);
}

.paper-attachment--pdf img {
  max-height: min(34cqh, 22rem);
  border: 0.08rem solid rgba(61, 41, 28, 0.38);
}

.paper-attachment__caption,
.paper-attachment__usage {
  margin: 0.45rem 0 0;
  font-size: clamp(0.64rem, 2.6cqw, 0.86rem);
  line-height: 1.32;
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.filing-preview-label {
  margin: 0.2rem 0 0;
  color: #7a251c;
  font-size: clamp(0.58rem, 2.2cqw, 0.75rem);
  letter-spacing: 0.08em;
}

.paper-content h2,
.paper-content p {
  margin: 0;
}

.paper-content h2 {
  font-family: Arial Black, Impact, Arial, sans-serif;
  font-size: clamp(1.05rem, 6.4cqw, 2.75rem);
  line-height: 0.95;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.paper-content h2:focus {
  outline: 0;
  box-shadow: none;
}

.paper-content p {
  margin-top: 0.7rem;
  font-size: clamp(0.88rem, 3.6cqw, 1.18rem);
  font-weight: 800;
  line-height: 1.25;
}

.paper-shove {
  position: absolute;
  z-index: 3;
  top: 4.5%;
  left: 5%;
  display: inline-flex;
  min-width: 6.8rem;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding-inline: 0.55rem;
  color: #f0dfb8;
  background: rgba(31, 20, 13, 0.9);
  text-shadow: 0 0.08rem 0 #100a06;
  font-size: clamp(0.62rem, 2.8cqw, 0.9rem);
  transform: rotate(-0.2deg);
}

.paper-shove:is(:hover, :focus-visible) {
  color: #fff0c9;
  background: #5c211a;
}

.dossier-gate {
  display: grid;
  flex: 1;
  align-content: center;
  gap: clamp(0.3rem, 1.4cqw, 0.6rem);
  text-align: left;
}

.dossier-gate[hidden] {
  display: none;
}

.dossier-gate h2,
.dossier-gate > p {
  text-align: center;
}

.dossier-gate > p {
  margin-top: 0;
}

.dossier-gate label {
  margin-top: 0.35rem;
  font-family: Arial Black, Impact, Arial, sans-serif;
  font-size: clamp(0.7rem, 2.8cqw, 0.94rem);
  text-transform: uppercase;
}

.dossier-gate input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.42rem 0.55rem;
  border: 0.14rem solid #3d291c;
  border-radius: 0;
  background: rgba(255, 245, 209, 0.42);
  color: #1c120c;
  font: 1rem Arial, system-ui, sans-serif;
}

.dossier-gate input[aria-invalid="true"] {
  border-color: #8e281c;
}

.dossier-gate button {
  justify-self: center;
  font-size: clamp(0.62rem, 2.8cqw, 0.9rem);
}

.dossier-error {
  color: #791f18;
}

body.has-open-filing {
  overflow: hidden;
}

@keyframes filing-folder-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes filing-paper-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 767px), (max-width: 1100px) and (orientation: portrait) {
  .archive-trigger:nth-child(7) { left: 51%; top: 44.5%; width: 30%; height: 13%; }
  .archive-trigger:nth-child(8) { left: 51%; top: 58%; width: 30%; height: 13%; }

  .filing-experience {
    align-items: start;
    padding-top: max(3.25rem, env(safe-area-inset-top));
  }

  .filing-stage {
    min-height: calc(100dvh - 4rem);
  }
}

@media (max-width: 420px) {
  .filing-artboard--folder,
  .filing-artboard--paper {
    width: min(96vw, calc(82dvh * var(--paper-ratio, 0.75)));
  }

  .folder-actions {
    gap: 0.12rem;
  }

  .folder-actions button {
    padding-inline: 0.12rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .filing-artboard--folder,
  .filing-artboard--paper {
    animation: none;
  }
}

/* Owner-approved v004 filing cabinet drawer map: eight full-width drawers on
   the central cabinet, ordered exactly as the eight DOM controls. */
.archive-trigger:nth-child(1) { left: 49%; top: 6%; width: 18%; height: 13%; }
.archive-trigger:nth-child(2) { left: 49%; top: 19%; width: 18%; height: 11%; }
.archive-trigger:nth-child(3) { left: 49%; top: 30%; width: 18%; height: 11%; }
.archive-trigger:nth-child(4) { left: 49%; top: 41%; width: 18%; height: 11%; }
.archive-trigger:nth-child(5) { left: 49%; top: 52%; width: 18%; height: 11%; }
.archive-trigger:nth-child(6) { left: 49%; top: 63%; width: 18%; height: 11%; }
.archive-trigger:nth-child(7) { left: 49%; top: 74%; width: 18%; height: 11%; }
.archive-trigger:nth-child(8) { left: 49%; top: 85%; width: 18%; height: 11%; }

@media (min-width: 768px) and (max-width: 1199px) {
  .archive-trigger:nth-child(1) { left: 50.5%; top: 6.9%; width: 21%; height: 10.6%; }
  .archive-trigger:nth-child(2) { left: 50.5%; top: 17.5%; width: 21%; height: 11%; }
  .archive-trigger:nth-child(3) { left: 50.5%; top: 28.5%; width: 21%; height: 11%; }
  .archive-trigger:nth-child(4) { left: 50.5%; top: 39.5%; width: 21%; height: 11%; }
  .archive-trigger:nth-child(5) { left: 50.5%; top: 50.5%; width: 21%; height: 11%; }
  .archive-trigger:nth-child(6) { left: 50.5%; top: 61.5%; width: 21%; height: 11%; }
  .archive-trigger:nth-child(7) { left: 50.5%; top: 72.5%; width: 21%; height: 11.5%; }
  .archive-trigger:nth-child(8) { left: 50.5%; top: 84%; width: 21%; height: 12%; }
}

@media (max-width: 767px) {
  .archive-trigger:nth-child(1) { left: 29%; top: 14%; width: 43%; height: 9.5%; }
  .archive-trigger:nth-child(2) { left: 29%; top: 23.5%; width: 43%; height: 8.5%; }
  .archive-trigger:nth-child(3) { left: 29%; top: 32%; width: 43%; height: 8.6%; }
  .archive-trigger:nth-child(4) { left: 29%; top: 40.6%; width: 43%; height: 10.2%; }
  .archive-trigger:nth-child(5) { left: 29%; top: 50.8%; width: 43%; height: 9.1%; }
  .archive-trigger:nth-child(6) { left: 29%; top: 59.9%; width: 43%; height: 8.2%; }
  .archive-trigger:nth-child(7) { left: 29%; top: 68.1%; width: 43%; height: 10.7%; }
  .archive-trigger:nth-child(8) { left: 29%; top: 78.8%; width: 43%; height: 9.2%; }
}

@media (forced-colors: active) {
  .filing-experience {
    background: Canvas;
  }

  .folder-actions button,
  .folder-shove,
  .paper-shove,
  .dossier-gate button,
  .dossier-gate input {
    border: 0.14rem solid CanvasText;
    color: CanvasText;
    background: Canvas;
  }
}