/* =============================================================================
   THE FILE -- a manilla folder on a desk.

   Extracted from start.html so the SAME folder can be opened from the training
   screen. Being called to the office used to navigate to the start screen to
   read your file, which meant a session was abandoned to attend it, and any
   failure to load the file left you looking at the home screen with no idea
   what had happened. The folder now opens wherever you are standing.

   Requires src/ui/tokens.css for the font variables; every fallback is stated
   inline so the folder still reads as a folder without them.
   ============================================================================= */

/*
  THE FILE -- a manilla folder on a desk.

  Not a modal with tabs. The card stock, the tab cut into the top edge, the
  string-and-button closure, the sheet sitting slightly proud of the folder: all
  of it is CSS, because a folder made of images cannot resize and cannot theme.

  Tabs across the top are the reviews, oldest to newest. The current one is the
  last. Flipping back shows what the file said AT THE TIME -- stale numbers on
  purpose, because that is what a record is.
*/
.folder {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 4vh 18px;
  background: radial-gradient(ellipse at 50% 35%, #2a2620 0%, #14120e 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
  z-index: 12;
  overflow-y: auto;
}
.folder.is-open { opacity: 1; pointer-events: auto; }

.folder__stage { perspective: 1600px; perspective-origin: 50% 20%; }

.folder__card {
  width: min(70ch, 94vw);
  position: relative;
  transform-style: preserve-3d;
  /* Manilla. Warm, slightly uneven, the colour of a card that has been handled. */
  background:
    radial-gradient(circle at 18% 12%, rgba(120, 88, 40, .10) 0%, transparent 40%),
    radial-gradient(circle at 86% 82%, rgba(120, 88, 40, .12) 0%, transparent 42%),
    linear-gradient(168deg, #d9c08a 0%, #cfb37c 52%, #c3a56d 100%);
  border-radius: 2px 2px 3px 3px;
  box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.45);
  padding: 0 clamp(14px, 2.4vw, 26px) clamp(20px, 3vw, 30px);
  /*
    THE CAMERA. The folder arrives at arm's length, shut, sitting on the desk.
    Once the cover is back it pushes in until the sheet fills the view -- which
    is what actually happens when somebody hands you a file and you start
    reading it. Two moves, not one: opening and then leaning in.
  */
  transform: rotate(-.25deg) scale(.82) translateY(2.5%);
  transition: transform .85s cubic-bezier(.25, .8, .3, 1);
}
.folder.is-reading .folder__card { transform: rotate(-.25deg) scale(1) translateY(0); }
/* The closure: a fibre string wound round a button. Two elements, no images. */
.folder__card::after {
  content: "";
  position: absolute;
  right: clamp(14px, 2.4vw, 26px);
  bottom: 10px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #6d5324;
  box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset, 0 1px 0 rgba(255,255,255,.25);
}

/*
  THE COVER. A real folder is shut when you are handed it. This is the front
  flap: it lies over the sheet, hinged along the top edge, and swings back and
  away on the X axis when the file is opened.

  Hinged at the TOP rather than the side because that is how a filing folder in
  a drawer opens, and because a side hinge would sweep across the tabs.
*/
.folder__cover {
  position: absolute;
  inset: 38px 0 0;
  transform-origin: 50% 0%;
  transform: rotateX(0deg);
  transition: transform 1.05s cubic-bezier(.22, .61, .36, 1);
  transform-style: preserve-3d;
  background:
    radial-gradient(circle at 22% 18%, rgba(120, 88, 40, .12) 0%, transparent 44%),
    linear-gradient(172deg, #cdb079 0%, #c2a267 55%, #b6955a 100%);
  border-radius: 2px;
  box-shadow: 0 -3px 12px rgba(0,0,0,.35) inset, 0 14px 30px rgba(0,0,0,.4);
  display: grid;
  place-content: center;
  gap: 10px;
  z-index: 2;
  backface-visibility: hidden;
}
.folder.is-opened .folder__cover { transform: rotateX(-118deg); box-shadow: none; }
/* Once you are reading, the open cover is behind you. It stops competing. */
.folder__cover { transition: transform .9s cubic-bezier(.22,.61,.36,1), opacity .5s ease .35s; }
.folder.is-reading .folder__cover { opacity: 0; pointer-events: none; }

.folder__coverMark {
  font-family: var(--font-display, "Oswald", Impact, sans-serif);
  font-weight: 700; font-size: clamp(26px, 5vw, 44px); letter-spacing: .2em;
  color: rgba(70, 52, 20, .78); text-align: center;
}
.folder__coverRef {
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 11px; letter-spacing: .16em; text-align: center;
  color: rgba(70, 52, 20, .6);
}
/* The red diagonal band a file gets when somebody has been reading it. */
.folder__coverBand {
  width: 60%; height: 4px; margin: 6px auto 0;
  background: #8c2b22; opacity: .55; transform: rotate(-1.5deg);
}

/* The cut tabs along the top edge. */
.folder__tabs { display: flex; gap: 4px; padding-top: 10px; flex-wrap: wrap; }
.folder__tab {
  font-family: var(--font-display, "Oswald", Impact, sans-serif);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  padding: 8px 13px 9px;
  border: none;
  color: #5c4720;
  background: linear-gradient(180deg, #c7a96f 0%, #bb9c60 100%);
  border-radius: 3px 3px 0 0;
  cursor: pointer;
  opacity: .72;
}
.folder__tab:hover { opacity: .92; }
.folder__tab[aria-selected="true"] {
  opacity: 1;
  color: #33240a;
  background: linear-gradient(180deg, #e7d2a4 0%, #dcc493 100%);
  box-shadow: 0 -2px 0 #8c2b22 inset;
}
.folder__tab:focus-visible { outline: 2px solid #8c2b22; outline-offset: 2px; }

/* The sheet inside, sitting slightly proud of the card. */
/* The sheet turning. One page leaving, the next arriving. */
.folder__sheet.is-turning-next { animation: pageNext .34s ease-in both; }
.folder__sheet.is-turning-prev { animation: pagePrev .34s ease-in both; }
@keyframes pageNext {
  0%   { transform: rotateY(0) translateX(0); opacity: 1; }
  55%  { transform: rotateY(-16deg) translateX(-3%); opacity: .35; }
  100% { transform: rotateY(.2deg) translateX(0); opacity: 1; }
}
@keyframes pagePrev {
  0%   { transform: rotateY(0) translateX(0); opacity: 1; }
  55%  { transform: rotateY(16deg) translateX(3%); opacity: .35; }
  100% { transform: rotateY(.2deg) translateX(0); opacity: 1; }
}

.folder__sheet {
  --paper-aged: #f2ebda;
  background: linear-gradient(170deg, #f7f1e2 0%, var(--paper-aged) 60%, #e9e0c9 100%);
  color: #2a3346;
  padding: clamp(22px, 3.6vw, 38px);
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  transform: rotate(.2deg);
}

.folder__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; border-bottom: 3px solid #2a3346; padding-bottom: 8px; }
.folder__kind { font-family: var(--font-display, "Oswald", Impact, sans-serif); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.folder__kind span { display: block; }
.folder__kind .cyr { font-size: clamp(14px, 2.2vw, 19px); }
.folder__kind .lat { font-size: 9px; letter-spacing: .22em; opacity: .7; margin-top: 3px; }
.folder__ref { font-family: var(--font-mono, ui-monospace, Consolas, monospace); font-size: 10.5px; color: #8c2b22; text-align: right; line-height: 1.6; }
.folder__ref b { display: block; color: #2a3346; font-weight: 400; opacity: .65; }

.folder__rows { width: 100%; border-collapse: collapse; margin: 22px 0 6px; }
.folder__rows th, .folder__rows td { text-align: left; padding: 9px 0; border-bottom: 1px dotted rgba(42,51,70,.3); vertical-align: baseline; }
.folder__rows th {
  font-family: var(--font-display, "Oswald", Impact, sans-serif);
  font-weight: 400; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(42,51,70,.62); width: 46%;
}
.folder__rows td { font-family: var(--font-mono, ui-monospace, Consolas, monospace); font-size: 14px; font-variant-numeric: tabular-nums; }
/* A row the app declines to fill in is struck through, not left blank. A blank
   reads as a rendering bug; a rule reads as a decision. */
.folder__rows td.unknown { color: rgba(42,51,70,.42); font-style: italic; font-family: var(--font-body, Georgia, serif); }
.folder__note { display: block; font-family: var(--font-body, Georgia, serif); font-style: italic; font-size: 12px; color: rgba(42,51,70,.6); margin-top: 3px; }

.folder__assessment { font-family: var(--font-body, "Spectral", Georgia, serif); font-size: 14.5px; line-height: 1.7; margin: 18px 0 0; color: rgba(42,51,70,.9); }

/* His remark, in the same hand as the letter. Printed form, handwritten note. */
.folder__remark {
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: clamp(20px, 2.7vw, 24px);
  line-height: 1.5;
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(42,51,70,.25);
  color: #24304a;
}
.folder__initials { font-family: "Italianno", cursive; font-size: 34px; text-align: right; margin-top: 6px; color: #202a3d; transform: rotate(-1.4deg); }

.folder__nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 18px; }
.folder__nav button, .folder__close {
  font-family: var(--font-display, "Oswald", Impact, sans-serif);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #4a3714; background: none; border: none; cursor: pointer;
  padding: 8px 4px; border-bottom: 1px solid transparent;
}
.folder__nav button:hover:not(:disabled), .folder__close:hover { color: #2a1d06; border-bottom-color: #8c2b22; }
.folder__nav button:disabled { opacity: .3; cursor: default; }
.folder__close { display: block; margin: 12px auto 0; }
.folder__where { font-family: var(--font-mono, monospace); font-size: 10px; color: #5c4720; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .folder { transition: none; }
  .folder__card, .folder__sheet { transform: none; }
  /* No swing and no riffle. The cover is simply not in the way. */
  .folder__cover { transition: none; display: none; }
  .folder__sheet.is-turning-next, .folder__sheet.is-turning-prev { animation: none; }
  /* No camera move either -- the file is simply open and legible. */
  .folder__card, .folder.is-reading .folder__card { transform: none; transition: none; }
}