/* The student folder (game/folder.js), after the user's mockup, mirrored for Arabic: a green
   cloth folder with brass corners; on the right a cream page held by corner pockets (the
   student and the observations), on the left a spiral notepad on grid paper with the sign tabs
   on its outer edge. Cila paper pieces (game/ui/folder/*.webp, white shapes) are used as masks
   and tinted here; the cloth, brass, rings and grid are CSS. Sizes follow --u, a hundredth of
   the folder's width, with floors so text stays readable on small screens. */

/* The folder's handwriting: Ocean Brush Arabic (game/fonts/, DEMO, personal-use license: see
   game/ui/CREDITS.md before any commercial release). Letters and punctuation only: the demo draws
   digits and Latin as empty boxes, so those fall back to Zain (the game's other font). */
@font-face {
  font-family: 'Ocean Brush'; font-display: swap;
  src: url(fonts/OceanBrushArabicDEMO-Texture.otf) format('opentype');
  unicode-range: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00AB, U+00BB, U+0600-065F, U+066A-06EF, U+06FA-06FF, U+0750-077F, U+2026, U+FB50-FDFF, U+FE70-FEFF;
}
#folder { --hand: 'Ocean Brush', 'Zain', sans-serif; font-synthesis-weight: none; background: rgba(8, 16, 12, 0.55); z-index: 4; }
#toast { z-index: 6; }   /* "observation added" and "saved" show over any screen */

.folder {
  --fw: min(92vw, 158vh);
  --u: calc(var(--fw) / 100);
  --cloth: #24463b;
  --page: #f4ecd9;
  --pad: #fbfaf4;
  --navy: #1f3b5c;
  --maroon: #8f3a35;
  --pencil: #6f6658;
  /* Type labels (the tape): one muted tint per card type, always with its icon and word. */
  --t-observation: #b9cfa9;
  --t-statement: #a9c9e2;
  --t-object: #e4d3ab;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  /* 16:9 on wide screens; taller on squarer ones (an iPad), where there's room for more cards. */
  width: var(--fw); height: clamp(calc(var(--fw) * 0.56), 86vh, calc(var(--fw) * 0.72));
  padding: calc(var(--u) * 4.4) calc(var(--u) * 2.2) calc(var(--u) * 1.8);
  border-radius: calc(var(--u) * 1);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 6px),
    radial-gradient(ellipse at 35% 25%, #2f574a, var(--cloth) 70%);
  box-shadow: 0 calc(var(--u) * 1.6) calc(var(--u) * 5) rgba(0, 0, 0, 0.55),
    inset 0 0 0 calc(var(--u) * 0.3) rgba(0, 0, 0, 0.22), inset 0 0 calc(var(--u) * 2.2) rgba(0, 0, 0, 0.35);
  color: var(--ink);
}
.folder.opening { animation: folder-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
@keyframes folder-in { from { opacity: 0; transform: translate(-50%, -47%) scale(0.96); } }

/* Brass corner caps on the cover. */
.brass {
  position: absolute; width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2);
  background: linear-gradient(135deg, #ecd08d, #b88d3c 55%, #8a6526);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.brass.b1 { top: 0; right: 0; border-top-right-radius: calc(var(--u) * 1); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.brass.b2 { top: 0; left: 0; border-top-left-radius: calc(var(--u) * 1); clip-path: polygon(0 0, 100% 0, 0 100%); }
.brass.b3 { bottom: 0; left: 0; border-bottom-left-radius: calc(var(--u) * 1); clip-path: polygon(0 0, 0 100%, 100% 100%); }
.brass.b4 { bottom: 0; right: 0; border-bottom-right-radius: calc(var(--u) * 1); clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* The moment of the day and the close button, on a paper label over the notepad. */
.fd-chip {
  position: absolute; top: calc(var(--u) * 1); left: calc(var(--u) * 3.4); z-index: 2;
  display: flex; align-items: center; gap: calc(var(--u) * 1);
  padding: calc(var(--u) * 0.35) calc(var(--u) * 1.3) calc(var(--u) * 0.35) calc(var(--u) * 0.5);
  background: var(--page); border-radius: calc(var(--u) * 0.35); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  font-size: calc(max(13px, calc(var(--u) * 1)) * var(--ts, 1)); font-weight: 800; letter-spacing: 0.04em;
}
.fd-close {
  display: grid; place-items: center; width: max(32px, calc(var(--u) * 2.2)); height: max(32px, calc(var(--u) * 2.2));
  padding: 0; border: none; border-radius: 50%; background: none; color: var(--ink);
}
.fd-close:hover { background: rgba(0, 0, 0, 0.07); }
.fd-close .ico { width: 55%; height: 55%; }
/* «؟»: the guide (game/guide.js). */
.fd-help {
  display: grid; place-items: center; width: max(30px, calc(var(--u) * 2)); height: max(30px, calc(var(--u) * 2));
  padding: 0; border: max(1.5px, calc(var(--u) * 0.12)) solid var(--ink); border-radius: 50%; background: none; color: var(--ink);
  font-size: calc(max(15px, calc(var(--u) * 1.15)) * var(--ts, 1)); font-weight: 900; line-height: 1;
}
.fd-help:hover { background: rgba(0, 0, 0, 0.07); }

/* ---------- the first-time tour (game/folder.js startTour) ---------- */
/* The lit part is a ring whose huge shadow dims everything else; without a part, the whole
   folder dims and the card sits in the middle. */
.fd-coach { position: absolute; inset: 0; z-index: 12; border-radius: inherit; overflow: hidden; }
.fd-coach.dim { background: rgba(10, 16, 12, 0.66); }
.coach-ring {
  position: absolute; border: max(2.5px, calc(var(--u) * 0.22)) solid var(--gold); border-radius: calc(var(--u) * 0.6);
  box-shadow: 0 0 0 200vmax rgba(10, 16, 12, 0.66); pointer-events: none; transition: all 0.3s ease;
}
.coach-card {
  position: absolute; top: 50%; width: min(30%, 380px); transform: translateY(-50%);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6) calc(var(--u) * 1.2);
  background: #fffdf7; border-radius: calc(var(--u) * 0.5); box-shadow: 0 calc(var(--u) * 0.4) calc(var(--u) * 1.6) rgba(0, 0, 0, 0.4);
  border-top: max(4px, calc(var(--u) * 0.3)) solid var(--gold); color: var(--ink);
}
.coach-card.at-left { left: 6%; }
.coach-card.at-right { right: 6%; }
.coach-card.at-middle { left: 50%; transform: translate(-50%, -50%); width: min(44%, 460px); }
.coach-count { font-size: calc(max(12px, calc(var(--u) * 0.85)) * var(--ts, 1)); font-weight: 800; color: var(--muted); }
.coach-title { margin: calc(var(--u) * 0.3) 0 calc(var(--u) * 0.5); font-family: var(--hand); font-size: calc(max(22px, calc(var(--u) * 2)) * var(--ts, 1)); font-weight: 700; color: var(--navy); }
.coach-text { margin: 0; font-size: calc(max(14px, calc(var(--u) * 1.1)) * var(--ts, 1)); font-weight: 600; line-height: 1.65; }
.coach-buttons { display: flex; align-items: center; gap: calc(var(--u) * 1.2); margin-top: calc(var(--u) * 1.2); }
.coach-skip { border: none; background: none; padding: 4px 6px; color: var(--muted); font-size: calc(max(13px, calc(var(--u) * 1)) * var(--ts, 1)); font-weight: 700; text-decoration: underline; }
@media (max-height: 520px) {
  .coach-card { width: 38%; padding: 10px 12px; }
  .coach-card.at-middle { width: 56%; }
  .coach-title { font-size: calc(17px * var(--ts, 1)); margin: 2px 0 4px; }
  .coach-text { font-size: calc(12px * var(--ts, 1)); line-height: 1.5; }
  .coach-buttons { margin-top: 8px; }
}

.fd-body { display: flex; height: 100%; }

/* ---------- right: the evidence board ---------- */
.fd-board {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  padding: calc(var(--u) * 2) calc(var(--u) * 2.6) calc(var(--u) * 1.6);
  /* Saad's page: the user's scanned paper (game/ui/folder/paper.webp, tools/prepare-paper.mjs),
     a little light from the top. */
  background:
    radial-gradient(ellipse at 70% 0%, rgba(255, 255, 255, 0.3), transparent 60%),
    url(ui/folder/paper.webp) center / cover no-repeat,
    var(--page);
  border-radius: calc(var(--u) * 0.3);
  box-shadow: 0 calc(var(--u) * 0.3) calc(var(--u) * 1) rgba(0, 0, 0, 0.35);
}
/* Corner pockets holding the page to the cover. */
.corner { position: absolute; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); background: linear-gradient(135deg, #2c5246, #1d3c32); z-index: 1; pointer-events: none; }
.corner.c1 { top: 0; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.corner.c2 { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.corner.c3 { bottom: 0; left: 0; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.corner.c4 { bottom: 0; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

.fd-id { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 2); margin: calc(var(--u) * 0.8) 0 calc(var(--u) * 0.4); padding-right: calc(var(--u) * 0.6); }
.polaroid {
  position: relative; margin: 0; flex: none; width: calc(var(--u) * 10.4); height: calc(var(--u) * 11.6);
  padding: calc(var(--u) * 0.55) calc(var(--u) * 0.55) calc(var(--u) * 1.4); background: #fffdf8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28); transform: rotate(2deg); z-index: 1;
}
.polaroid img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; background: #e4dccb; }
/* A strip of tape over its top edge. */
.polaroid::before {
  content: ''; position: absolute; top: calc(var(--u) * -0.9); left: 50%; width: calc(var(--u) * 5); height: calc(var(--u) * 1.5);
  transform: translateX(-50%) rotate(-4deg); background: rgba(230, 218, 180, 0.85);
  -webkit-mask: url(ui/folder/tape.webp) center / 100% 100% no-repeat; mask: url(ui/folder/tape.webp) center / 100% 100% no-repeat;
}
.fd-names { position: relative; z-index: 1; }
.fd-name { font-family: var(--hand); font-weight: 700; font-size: calc(max(28px, calc(var(--u) * 3.8)) * var(--ts, 1)); line-height: 1.15; color: var(--navy); }
.fd-class {
  display: inline-block; font-family: var(--hand); font-size: calc(max(16px, calc(var(--u) * 1.6)) * var(--ts, 1)); color: #3e5568;
  border-bottom: max(2px, calc(var(--u) * 0.18)) solid rgba(110, 150, 90, 0.75); padding-bottom: 2px;
}
.decor { color: var(--pencil); pointer-events: none; }
.decor.skyline { position: absolute; left: 0; bottom: calc(var(--u) * -0.4); width: calc(var(--u) * 24); opacity: 0.42; }
.decor.sprig { position: absolute; left: calc(var(--u) * 1.2); bottom: calc(var(--u) * 1.2); width: calc(var(--u) * 4.2); opacity: 0.35; }

.fd-heading {
  display: inline-block; margin: calc(var(--u) * 0.6) calc(var(--u) * 0.4) calc(var(--u) * 0.2);
  font-family: var(--hand); font-size: calc(max(20px, calc(var(--u) * 2.1)) * var(--ts, 1)); font-weight: 700; color: var(--ink);
  border-bottom: max(2px, calc(var(--u) * 0.16)) solid rgba(43, 38, 34, 0.55);
}

/* The cards, a page at a time: as many rows as fit (game/folder.js measures), no scrolling. */
.fd-list {
  position: relative; z-index: 1; flex: 1; min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start;
  gap: calc(var(--u) * 1.8) calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 0.6) calc(var(--u) * 0.4) calc(var(--u) * 1);
}
.fd-list.flip-next { animation: page-next 0.32s ease-out; }
.fd-list.flip-prev { animation: page-prev 0.32s ease-out; }
@keyframes page-next { from { opacity: 0; transform: translateX(calc(var(--u) * -3)) rotate(-0.6deg); } }
@keyframes page-prev { from { opacity: 0; transform: translateX(calc(var(--u) * 3)) rotate(0.6deg); } }
/* Turning pages: ‹ ١ / ٣ › at the foot of the page. */
.fd-pager { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4); padding-top: calc(var(--u) * 0.5); }
.fd-pager[hidden] { display: none; }
.page-turn { display: grid; place-items: center; width: max(34px, calc(var(--u) * 2.8)); height: max(34px, calc(var(--u) * 2.8)); padding: 0; border: max(1.5px, calc(var(--u) * 0.1)) solid #42505a; border-radius: 50%; background: #fffdf7; color: #2b3a44; }
.page-turn .ico { width: 45%; height: 45%; }
.page-turn:hover:not(:disabled) { background: var(--navy); color: #fff; border-color: var(--navy); }
.page-turn:disabled { opacity: 0.3; cursor: default; }
.page-of { min-width: 4em; text-align: center; font-family: 'Zain', sans-serif; font-size: calc(max(16px, calc(var(--u) * 1.4)) * var(--ts, 1)); color: #3e5568; }.fd-empty { grid-column: 1 / -1; margin: calc(var(--u) * 1.5) auto; max-width: 34em; text-align: center; font-family: var(--hand); font-size: calc(max(18px, calc(var(--u) * 1.5)) * var(--ts, 1)); line-height: 1.5; color: var(--pencil); }

/* The counsellor's note, pinned to the page. */
.fd-note { position: absolute; left: calc(var(--u) * 1); top: 50%; transform: translateY(-50%); z-index: 2; }
.note-pin {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: calc(var(--u) * 0.8) calc(var(--u) * 1.4) calc(var(--u) * 0.7) calc(var(--u) * 1.2);
  border: none; border-radius: 2px; background: #fff9e6; color: var(--ink); text-align: right;
  box-shadow: 0 calc(var(--u) * 0.15) calc(var(--u) * 0.5) rgba(40, 30, 10, 0.22); transform: rotate(-1.2deg);
}
.note-pin .pin { position: absolute; top: calc(var(--u) * -0.45); right: 50%; width: calc(var(--u) * 1); height: calc(var(--u) * 1); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e66a5a, #a5352b); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.note-from { font-family: var(--hand); font-size: calc(max(16px, calc(var(--u) * 1.35)) * var(--ts, 1)); }
.note-state { font-size: calc(max(12px, calc(var(--u) * 0.85)) * var(--ts, 1)); font-weight: 700; color: var(--muted); }
.note-pin:not(.read) .note-state { color: #8f3a35; }
.note-pin:hover { background: #fffcef; }

/* Waiting to be recorded: a dashed card with its own button. */
.fd-list .card.is-pending { background: rgba(255, 253, 247, 0.6); box-shadow: none; outline: max(1.5px, calc(var(--u) * 0.11)) dashed rgba(60, 90, 111, 0.6); outline-offset: -2px; }
.card-status.waiting { color: #3c5a6f; }
.rec-now { flex: none; padding: 3px 12px; border: none; border-radius: 4px; background: var(--navy); color: #fff; font-size: calc(max(13px, calc(var(--u) * 0.9)) * var(--ts, 1)); font-weight: 800; }
.rec-now:hover { filter: brightness(1.15); }

/* ---------- observation cards (board and notepad) ---------- */
.card {
  position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 0.55);
  padding: calc(var(--u) * 0.9) calc(var(--u) * 0.8) calc(var(--u) * 0.7);
  background: #fffdf7; border-radius: calc(var(--u) * 0.3);
  box-shadow: 0 calc(var(--u) * 0.15) calc(var(--u) * 0.6) rgba(40, 30, 10, 0.2);
}
.card .tape, .detail-card .tape {
  position: absolute; top: calc(var(--u) * -0.75); right: calc(var(--u) * 0.6); z-index: 1;
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: calc(var(--u) * 0.2) calc(var(--u) * 1.3); transform: rotate(-2deg);
  font-size: calc(max(12px, calc(var(--u) * 0.85)) * var(--ts, 1)); font-weight: 800; letter-spacing: 0.05em; color: #22313a;
  background: var(--tape);
  -webkit-mask: url(ui/folder/tape.webp) center / 100% 100% no-repeat; mask: url(ui/folder/tape.webp) center / 100% 100% no-repeat;
}
/* Recorded since the folder was last opened. */
.card .fresh { position: absolute; top: calc(var(--u) * -0.7); left: calc(var(--u) * 0.6); z-index: 1; padding: 1px 9px; border-radius: 999px; background: #e09a2c; color: #2a1c06; font-size: calc(max(11px, calc(var(--u) * 0.8)) * var(--ts, 1)); font-weight: 900; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.type-observation { --tape: var(--t-observation); }
.type-statement { --tape: var(--t-statement); }
.type-object { --tape: var(--t-object); }
.type-ico { display: inline-flex; flex: none; }
.type-ico svg, .icon.type { width: 1.15em; height: 1.15em; }

.card-body {
  display: flex; flex-direction: column; gap: calc(var(--u) * 0.55); padding: 0; border: none; background: none;
  color: inherit; font: inherit; text-align: right; cursor: pointer;
}
.photo {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(var(--u) * 0.15);
  border: max(2px, calc(var(--u) * 0.22)) solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); background: #ddd5c4;
}
/* A quote on a torn notebook slip: the Cila sheet as its shape, ruled, with spiral holes. */
.slip {
  position: relative; isolation: isolate; margin: 0; display: grid; place-items: center; aspect-ratio: 16 / 10;
  padding: calc(var(--u) * 1) calc(var(--u) * 1.6) calc(var(--u) * 1) calc(var(--u) * 2.4);
  font-family: var(--hand); font-size: calc(max(15px, calc(var(--u) * 1.45)) * var(--ts, 1)); line-height: 1.4; text-align: center; color: #283a4a;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.slip::before {
  content: ''; position: absolute; inset: 0; z-index: -1; transform: rotate(-1.2deg);
  background:
    radial-gradient(circle at calc(var(--u) * 0.9) 50%, #b9b09d 0 calc(var(--u) * 0.28), transparent calc(var(--u) * 0.34)) 0 0 / calc(var(--u) * 1.8) calc(var(--u) * 1.3) repeat-y,
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--u) * 1.5), rgba(110, 135, 165, 0.22) calc(var(--u) * 1.5) calc(var(--u) * 1.5 + 1px)),
    #fbf7ea;
  -webkit-mask: url(ui/folder/slip.webp) center / 100% 100% no-repeat; mask: url(ui/folder/slip.webp) center / 100% 100% no-repeat;
}
.plain {
  display: grid; place-items: center; aspect-ratio: 16 / 10; padding: calc(var(--u) * 1);
  font-family: var(--hand); font-size: calc(max(16px, calc(var(--u) * 1.5)) * var(--ts, 1)); text-align: center;
  background: #f7f1e1; border-radius: calc(var(--u) * 0.2);
}
.card-caption { font-size: calc(max(13px, calc(var(--u) * 1)) * var(--ts, 1)); font-weight: 700; line-height: 1.45; }
.card-caption:empty { display: none; }
/* On the board: picture, title, source and place, then the status and the link control. */
.fd-list .photo, .fd-list .slip, .fd-list .plain { aspect-ratio: 4 / 3; }
.fd-list .slip { font-size: calc(max(14px, calc(var(--u) * 1.25)) * var(--ts, 1)); }
.card-title { font-size: calc(max(15px, calc(var(--u) * 1.15)) * var(--ts, 1)); font-weight: 800; line-height: 1.4; height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-meta { display: flex; flex-wrap: wrap; align-content: flex-start; overflow: hidden; height: 2.9em; align-items: center; gap: 2px calc(var(--u) * 0.8); font-size: calc(max(12px, calc(var(--u) * 0.85)) * var(--ts, 1)); color: var(--muted); }
.src { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 6px; border-radius: 999px; background: rgba(165, 125, 67, 0.14); color: #6b4e22; font-weight: 700; }
.src-face { width: 1.6em; height: 1.6em; border-radius: 50%; object-fit: cover; object-position: 50% 8%; background: #e4dccb; }
.card-foot { display: flex; align-items: center; gap: calc(var(--u) * 0.8); padding-top: 2px; border-top: 1px dashed rgba(43, 38, 34, 0.18); }
.card-status { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 5px; padding-top: 4px; font-size: calc(max(12px, calc(var(--u) * 0.85)) * var(--ts, 1)); font-weight: 700; color: #5d5446; }
.card-status .ico, .card-status .icon { width: 1em; height: 1em; flex: none; }
.card-status.has-links { color: var(--navy); }

.attach, .linked, .full {
  flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.45); margin-top: 4px;
  padding: calc(var(--u) * 0.3) calc(var(--u) * 0.9); border-radius: calc(var(--u) * 0.3);
  font-size: calc(max(13px, calc(var(--u) * 0.95)) * var(--ts, 1)); font-weight: 700;
}
.attach { border: max(1.5px, calc(var(--u) * 0.1)) solid #42505a; background: #fffdf7; color: #2b3a44; }
.attach:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.attach .ico { width: 0.85em; height: 0.85em; }
.linked { background: #e1ebd2; color: #2f5a3a; }
.full { color: var(--muted); font-weight: 600; }
.icon.link { width: 1.15em; height: 1.15em; }
/* Linked to a sign (any): faded and moved after the others (game/folder.js), so what's left
   to consider stands out; it has gone to a sign's page. The «مرتبطة» mark stays at full strength; hovering or focusing the card
   brings it back. */
.fd-list .card.is-linked { background: #f6f1e4; box-shadow: 0 1px 3px rgba(40, 30, 10, 0.12); }
.fd-list .card.is-linked :is(.card-body, .card-title, .card-meta, .tape) { opacity: 0.5; filter: saturate(0.6); transition: opacity 0.2s, filter 0.2s; }
.fd-list .card.is-linked:is(:hover, :has(:focus-visible)) :is(.card-body, .card-title, .card-meta, .tape) { opacity: 1; filter: none; }

/* Detail view of one observation, over the board. */
.fd-detail { position: absolute; inset: calc(var(--u) * 1.2); z-index: 3; display: grid; place-items: center; background: rgba(244, 236, 217, 0.94); border-radius: calc(var(--u) * 0.3); }
.fd-detail[hidden] { display: none; }
.detail-card {
  position: relative; width: min(100%, calc(var(--u) * 30)); max-height: 100%; overflow: hidden;
  font-size: calc(max(14px, calc(var(--u) * 1.1)) * var(--ts, 1));
  display: flex; flex-direction: column; gap: calc(var(--u) * 0.8);
  padding: calc(var(--u) * 2.8) calc(var(--u) * 1.8) calc(var(--u) * 1.4);
  background: #fffdf7; border-radius: calc(var(--u) * 0.4); box-shadow: 0 calc(var(--u) * 0.4) calc(var(--u) * 1.6) rgba(40, 30, 10, 0.3);
}
/* Inside the card (it scrolls, so anything sticking out would be cut). */
.detail-card .tape { top: calc(var(--u) * 0.8); right: calc(var(--u) * 1.2); }
.detail-close { position: absolute; top: calc(var(--u) * 0.6); left: calc(var(--u) * 0.6); width: max(32px, calc(var(--u) * 2.2)); height: max(32px, calc(var(--u) * 2.2)); border: none; border-radius: 50%; background: none; color: var(--ink); display: grid; place-items: center; }
.detail-close:hover { background: rgba(0, 0, 0, 0.07); }
.detail-close .ico { width: 50%; height: 50%; }
.detail-title { margin: 0; font-size: 1.3em; font-weight: 800; line-height: 1.4; }
.detail-text { margin: 0; font-size: 1em; font-weight: 500; line-height: 1.65; color: #3a342d; }
.detail-card .slip.big { font-size: 1.25em; }
.detail-card .photo, .detail-card .slip { flex: none; max-height: 34%; }
.detail-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px calc(var(--u) * 1.2); margin: 0; font-size: 0.88em; }
.detail-facts dt { font-weight: 800; color: var(--muted); }
.detail-facts dd { margin: 0; font-weight: 600; }
.detail-done { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; color: #2f5a3a; }
.detail-record { display: flex; justify-content: center; padding-top: 4px; }
.detail-link { padding-top: calc(var(--u) * 0.6); border-top: 1px dashed rgba(43, 38, 34, 0.25); }
.detail-link-title { font-family: var(--hand); font-size: 1.3em; margin-bottom: 6px; }
.sign-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sign-toggle {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px;
  border: max(1.5px, calc(var(--u) * 0.1)) solid #8b8475; border-radius: calc(var(--u) * 0.35); background: #fffdf7; color: var(--ink); text-align: right;
}
.sign-toggle .tg-label { font-weight: 800; font-size: 0.92em; }
.sign-toggle .tg-state { font-size: 0.8em; font-weight: 700; color: var(--muted); }
.sign-toggle:hover:not(:disabled) { border-color: var(--navy); }
.sign-toggle.on { border-color: var(--navy); background: #eef2f6; box-shadow: inset 0 0 0 1px var(--navy); }
.sign-toggle.on .tg-state { color: var(--navy); }
.sign-toggle:disabled { opacity: 0.55; cursor: default; }
/* The counsellor's note, opened. */
.note-card { width: min(100%, calc(var(--u) * 34)); }
.note-paper {
  padding: calc(var(--u) * 1.6) calc(var(--u) * 1.8); background: #fff9e6;
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--u) * 2.1), rgba(110, 135, 165, 0.22) calc(var(--u) * 2.1) calc(var(--u) * 2.1 + 1px));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); transform: rotate(-0.6deg);
}
.note-paper p { margin: 0 0 calc(var(--u) * 0.7); font-family: var(--hand); font-size: calc(max(18px, calc(var(--u) * 1.5)) * var(--ts, 1)); line-height: 1.45; color: #23344a; }
.note-paper p:last-child { text-align: left; margin: 0; }

/* ---------- the spine ---------- */
.fd-spine {
  flex: 0 0 calc(var(--u) * 2.4); margin: calc(var(--u) * -1.4) 0 calc(var(--u) * -0.4);
  background: linear-gradient(90deg, #193429, #2b4f43 50%, #193429);
  box-shadow: inset 0 0 calc(var(--u) * 0.6) rgba(0, 0, 0, 0.5); position: relative;
}
.fd-spine::before, .fd-spine::after { content: ''; position: absolute; top: 2%; bottom: 2%; border-left: 2px dashed rgba(232, 220, 186, 0.28); }
.fd-spine::before { left: 26%; }
.fd-spine::after { right: 26%; }

/* ---------- left: the notepad ---------- */
.fd-pad { flex: 1 1 0; min-width: 0; display: flex; align-items: stretch; padding: calc(var(--u) * 1.6) calc(var(--u) * 1.4) 0 0; }
.pad-stack { position: relative; flex: 1; min-width: 0; margin-top: calc(var(--u) * 0.6); }
/* Sheets under the top one, showing at the outer bottom edge. */
.pad-stack::before, .pad-stack::after { content: ''; position: absolute; border-radius: calc(var(--u) * 0.3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.pad-stack::before { inset: calc(var(--u) * 0.5) calc(var(--u) * 0.3) calc(var(--u) * -0.55) calc(var(--u) * -0.45); background: #ece7da; }
.pad-stack::after { inset: calc(var(--u) * 1) calc(var(--u) * 0.6) calc(var(--u) * -1.05) calc(var(--u) * -0.85); background: #e2dccd; z-index: -1; }
.pad-rings {
  position: absolute; top: calc(var(--u) * -1.9); left: 7%; right: 7%; z-index: 4;
  display: flex; justify-content: space-between; pointer-events: none;
}
.pad-rings i {
  width: calc(var(--u) * 1.15); height: calc(var(--u) * 3.3);
  border-radius: calc(var(--u) * 0.6);
  border: calc(var(--u) * 0.32) solid #9ea3a8; border-bottom-color: transparent;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), transparent 60%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.5), 1px 1px 2px rgba(0, 0, 0, 0.35);
}
.sheet {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  overflow: hidden;
  padding: calc(var(--u) * 2.6) calc(var(--u) * 2.6) calc(var(--u) * 1.2);
  background-color: var(--pad);
  background-image:
    linear-gradient(rgba(110, 140, 170, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 140, 170, 0.15) 1px, transparent 1px);
  background-size: calc(var(--u) * 1.6) calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 0.3);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transform-origin: 50% 0;
}
/* A row of punched holes under the rings. */
.sheet::before {
  content: ''; position: absolute; top: calc(var(--u) * 0.7); left: 7%; right: 7%; height: calc(var(--u) * 0.8);
  background: radial-gradient(circle, #c9c2b2 0 calc(var(--u) * 0.32), transparent calc(var(--u) * 0.38)) 0 50% / calc(100% / 10) 100% repeat-x;
}
.sheet.ghost { z-index: 3; pointer-events: none; animation: sheet-lift 0.4s ease-in forwards; }
@keyframes sheet-lift { to { opacity: 0; transform: translate(calc(var(--u) * -1), calc(var(--u) * -5)) rotate(-4deg); } }
.sheet.settle { animation: sheet-settle 0.4s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes sheet-settle { from { transform: translateY(calc(var(--u) * 1)) rotate(0.6deg); filter: brightness(0.96); } }

/* The sign's page, centred, top to bottom: illustration, title, description, rule, linked notes.
   Only the illustration gives way when the page is short (it takes the room the rest leaves, up to
   a size), so the page never overflows; spare room is shared above and below. */
.sheet { align-items: center; justify-content: center; text-align: center; }
.sheet > * { flex-shrink: 0; }
.sheet-art { flex: 1 1 calc(var(--u) * 15); min-height: 0; max-height: calc(var(--u) * 17); align-self: stretch; display: flex; justify-content: center; }
.sheet-art img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.sheet-title { position: relative; margin: calc(var(--u) * 0.5) 0 0; font-family: var(--hand); font-size: calc(max(22px, calc(var(--u) * 2.6)) * var(--ts, 1)); font-weight: 700; line-height: 1.25; color: #1d2a33; }
/* The highlighter stroke behind the title: Cila's ragged strip, tinted. */
.sheet-title .hl { position: relative; z-index: 0; padding: 0 calc(var(--u) * 0.8); }
.sheet-title .hl::before {
  content: ''; position: absolute; inset: 22% -2% 4% -4%; z-index: -1; background: rgba(167, 201, 148, 0.62);
  -webkit-mask: url(ui/folder/highlight.webp) center / 100% 100% no-repeat; mask: url(ui/folder/highlight.webp) center / 100% 100% no-repeat;
}
.sheet-desc { max-width: 34em; max-height: 3.2em; overflow: hidden; flex: none; margin: calc(var(--u) * 0.4) 0 0; font-size: calc(max(13px, calc(var(--u) * 1.05)) * var(--ts, 1)); font-weight: 500; line-height: 1.55; color: #4a443c; }
.sheet-rule { display: block; width: calc(var(--u) * 9); margin: calc(var(--u) * 0.9) 0 calc(var(--u) * 0.1); color: var(--pencil); opacity: 0.6; line-height: 0; }
.sheet-rule svg { display: block; width: 100%; height: auto; }
.sheet-sub { margin-top: calc(var(--u) * 0.4); font-family: var(--hand); font-size: calc(max(18px, calc(var(--u) * 1.6)) * var(--ts, 1)); color: #2b2622; }

.links-inner { position: relative; flex: none; align-self: stretch; text-align: start; padding: calc(var(--u) * 1.3) calc(var(--u) * 0.8) calc(var(--u) * 0.6); }
.attached { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.4); align-items: start; }
/* An empty slot is built like a filled one (a 4:3 picture, two caption lines), so it is as tall:
   the page, and its illustration, keep their size as notes are linked and unlinked. */
.slot-empty {
  display: flex; flex-direction: column; gap: calc(var(--u) * 0.35); padding: calc(var(--u) * 1) calc(var(--u) * 0.6) calc(var(--u) * 0.5);
  border: max(1.5px, calc(var(--u) * 0.12)) dashed rgba(60, 90, 111, 0.45); border-radius: calc(var(--u) * 0.3);
  color: var(--pencil); text-align: center;
}
.slot-pic { display: grid; place-items: center; aspect-ratio: 4 / 3; font-family: var(--hand); font-size: calc(max(15px, calc(var(--u) * 1.2)) * var(--ts, 1)); }
.slot-cap { display: block; height: 2.7em; font-size: calc(max(12px, calc(var(--u) * 0.92)) * var(--ts, 1)); line-height: 1.35; }

.card.compact { padding: calc(var(--u) * 0.6) calc(var(--u) * 0.6) calc(var(--u) * 0.6); gap: calc(var(--u) * 0.4); }

.plain.mini { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px; background: #eef3f7; color: #3c5a6f; font-family: inherit; font-size: calc(max(12px, calc(var(--u) * 0.85)) * var(--ts, 1)); }
.plain.mini .type-ico svg { width: 1.6em; height: 1.6em; }
.card.compact .slip { font-size:calc(max(12px, calc(var(--u) * 0.95)) * var(--ts, 1)); padding: calc(var(--u) * 0.5) calc(var(--u) * 0.8) calc(var(--u) * 0.5) calc(var(--u) * 1.6); overflow: hidden; }

.card.compact .card-caption { font-size: calc(max(12px, calc(var(--u) * 0.92)) * var(--ts, 1)); padding-left: calc(var(--u) * 1.8); }
.att-link { position: absolute; left: calc(var(--u) * 0.7); bottom: calc(var(--u) * 0.6); color: var(--navy); }
.remove {
  position: absolute; top: calc(var(--u) * -0.9); left: calc(var(--u) * -0.9); z-index: 1;
  display: grid; place-items: center; width: max(28px, calc(var(--u) * 2.2)); height: max(28px, calc(var(--u) * 2.2));
  padding: 0; border: max(1.5px, calc(var(--u) * 0.1)) solid #c9c1b0; border-radius: 50%; background: #fff; color: #2b2622;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.remove:hover { background: #f3ede0; }
.remove .ico { width: 46%; height: 46%; }

.sheet-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--u) * 0.4) calc(var(--u) * 1.2); padding-top: calc(var(--u) * 0.6); }
.save {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 0.7) calc(var(--u) * 2.6); border: none; border-radius: calc(var(--u) * 0.5);
  background: linear-gradient(180deg, #284a70, var(--navy)); color: #f4f0e6;
  font-size: calc(max(15px, calc(var(--u) * 1.2)) * var(--ts, 1)); font-weight: 800; letter-spacing: 0.04em;
  box-shadow: 0 calc(var(--u) * 0.2) 0 #142a42, 0 calc(var(--u) * 0.4) calc(var(--u) * 0.9) rgba(0, 0, 0, 0.25);
}
.save:hover:not(:disabled) { filter: brightness(1.12); }
.save:disabled { opacity: 0.45; cursor: default; }
.save-arrow { font-size: 1.2em; line-height: 1; }
.save-status { min-height: 1.4em; display: flex; align-items: center; gap: 6px; font-size: calc(max(13px, calc(var(--u) * 1)) * var(--ts, 1)); font-weight: 700; color: #6b5a3a; }
.save-status.saved { color: #2f5a3a; }
.save-status .ico { width: 1em; height: 1em; }
.save-note { font-size: calc(max(12px, calc(var(--u) * 0.92)) * var(--ts, 1)); color: var(--muted); }

/* The sign tabs, on the notepad's outer (left) edge: tucked under the pages, except the selected
   one, the bookmark of the page that's open, which lies over its edge (above the sheet, z 2, and
   the sheet lifting away, z 3). */
.pad-tabs { flex: 0 0 calc(var(--u) * 6.8); display: flex; flex-direction: column; gap: calc(var(--u) * 0.7); padding-top: calc(var(--u) * 5.4); margin-right: calc(var(--u) * -0.7); }
.pad-tab {
  position: relative; z-index: 1; min-height: calc(var(--u) * 7.6); padding: calc(var(--u) * 0.8) calc(var(--u) * 0.9) calc(var(--u) * 0.8) calc(var(--u) * 1.6);
  border: none; background: none; color: #3b3328; text-align: center;
  font-family: var(--hand); font-size: calc(max(14px, calc(var(--u) * 1.25)) * var(--ts, 1)); line-height: 1.25;
  filter: drop-shadow(-1px 1px 2px rgba(0, 0, 0, 0.3));
}
.pad-tab::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: #ede3cc;
  -webkit-mask: url(ui/folder/tab.webp) center / 100% 100% no-repeat; mask: url(ui/folder/tab.webp) center / 100% 100% no-repeat;
}
.pad-tab span { position: relative; }
.pad-tab:hover::before { background: #f6eedb; }
.pad-tab.on { z-index: 4; color: #fbf3e4; transform: translateX(calc(var(--u) * -0.5)); }
.pad-tab.on::before { background: var(--maroon); }
/* The overview's bookmark, «العلامات», above the sign tabs like a title on them: smaller, in
   ochre paper, navy when its page is open. It takes the room above the first sign tab, so the
   sign tabs stay where they were. */
.pad-tabs:has(.pad-index) { padding-top: calc(var(--u) * 0.6); }
.pad-tab.pad-index {
  min-height: calc(var(--u) * 4.1); padding-top: calc(var(--u) * 0.5); padding-bottom: calc(var(--u) * 0.5);
  font-size: calc(max(13px, calc(var(--u) * 1.1)) * var(--ts, 1)); font-weight: 700; color: #4a3a1e;
}
.pad-tab.pad-index::before { background: #e2c47e; }
.pad-tab.pad-index:hover::before { background: #ecd396; }
.pad-tab.pad-index.on { color: #f4f0e6; }
.pad-tab.pad-index.on::before { background: var(--navy); }

/* The overview page: the four signs, one line each (its picture, name, and the notes linked to it:
   a dot per slot and the count in words). */
.ov-title { margin-top: 0; }
.ov-list { align-self: stretch; display: flex; flex-direction: column; gap: calc(var(--u) * 0.9); margin-top: calc(var(--u) * 1.1); }
.ov-row {
  display: grid; grid-template-columns: calc(var(--u) * 6.2) minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 0.6) calc(var(--u) * 1.2); border: max(1.5px, calc(var(--u) * 0.1)) solid rgba(60, 90, 111, 0.18);
  border-radius: calc(var(--u) * 0.45); background: rgba(255, 255, 255, 0.62); color: #1d2a33; text-align: start;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); transition: background 0.15s, transform 0.15s;
}
.ov-row:hover, .ov-row:focus-visible { background: #fff; transform: translateX(calc(var(--u) * -0.3)); outline: none; }
.ov-row:focus-visible { border-color: var(--navy); }
.ov-art { display: block; width: 100%; height: calc(var(--u) * 4.6); object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.ov-label { font-family: var(--hand); font-size: calc(max(16px, calc(var(--u) * 1.55)) * var(--ts, 1)); line-height: 1.25; }
.ov-count { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.35); min-width: calc(var(--u) * 6); }
.ov-dots { display: flex; gap: calc(var(--u) * 0.45); }
.ov-dots i { width: calc(var(--u) * 1); height: calc(var(--u) * 1); min-width: 9px; min-height: 9px; border-radius: 50%; border: max(1.5px, calc(var(--u) * 0.12)) solid var(--navy); background: transparent; }
.ov-dots i.on { background: var(--navy); }
.ov-words { font-size: calc(max(12px, calc(var(--u) * 0.95)) * var(--ts, 1)); font-weight: 700; color: var(--pencil); white-space: nowrap; }
.ov-row.has .ov-words { color: var(--navy); }
.ov-foot { margin: calc(var(--u) * 1) 0 0; font-size: calc(max(12px, calc(var(--u) * 0.95)) * var(--ts, 1)); color: var(--muted); }
.ov-foot.warn { color: #9a3b33; font-weight: 700; }
.ov-row.drop-over { outline: 2px dashed var(--navy); outline-offset: 2px; background: rgba(31, 59, 92, 0.08); }

.fd-board.swap, .fd-pad.swap { animation: swap 0.3s ease-out; }
@keyframes swap { from { opacity: 0.25; } }

/* Cila icons as tinted masks. */
.ico { display: inline-block; width: 1em; height: 1em; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.ico-close { -webkit-mask-image: url(ui/folder/close.webp); mask-image: url(ui/folder/close.webp); }
.ico-plus { -webkit-mask-image: url(ui/folder/plus.webp); mask-image: url(ui/folder/plus.webp); }
.ico-check { -webkit-mask-image: url(ui/folder/check.webp); mask-image: url(ui/folder/check.webp); }
.ico-prev { -webkit-mask-image: url(ui/folder/prev.webp); mask-image: url(ui/folder/prev.webp); }
.ico-next { -webkit-mask-image: url(ui/folder/next.webp); mask-image: url(ui/folder/next.webp); }

/* Keyboard focus: a gold ring (also on the game's other buttons, see style.css). */
#folder :focus-visible { outline: max(2px, calc(var(--u) * 0.2)) solid var(--gold); outline-offset: 2px; }

/* (The folder button and its slip: overlays.css.) */

/* ---------- inspected things (the note screen with a photo and an action) ---------- */
.note-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.paper-note.inspect { width: min(560px, 90vw); }
.note-photo { display: block; width: 100%; border: 6px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); transform: rotate(0.8deg); }

/* ---------- board cards side by side with their picture (four to a page on a laptop) ---------- */
.fd-list .card {
  display: grid; grid-template-columns: 42% minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: calc(var(--u) * 1); row-gap: 3px; align-items: start;
  padding: calc(var(--u) * 0.7) calc(var(--u) * 0.7) calc(var(--u) * 0.35);
}
.fd-list .card .attach, .fd-list .card .linked, .fd-list .card .full { margin-top: 2px; padding-top: calc(var(--u) * 0.2); padding-bottom: calc(var(--u) * 0.2); }
.fd-list .card .card-body { grid-column: 1; grid-row: 1 / span 3; align-self: stretch; }
.fd-list .card .card-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.fd-list .card .card-status > * { display: inline-block; vertical-align: middle; margin-left: 4px; }
.fd-list .card .card-title, .fd-list .card .card-meta { grid-column: 2; }
.fd-list .card .card-foot { grid-column: 1 / -1; }
.fd-list .card .photo { height: 100%; }
.fd-list .plain { overflow: hidden; padding: calc(var(--u) * 0.5); font-size: calc(max(12px, calc(var(--u) * 1)) * var(--ts, 1)); line-height: 1.35; }
.fd-list .plain.mini { font-family: 'Zain', sans-serif; }
.plain.mini { aspect-ratio: auto; }
/* A filled slot on the sign's sheet: a small card with its type tape, picture and title. */
.card.compact { padding: calc(var(--u) * 1) calc(var(--u) * 0.6) calc(var(--u) * 0.5); gap: calc(var(--u) * 0.35); }
.card.compact .tape { top: calc(var(--u) * -0.7); right: calc(var(--u) * 0.4); padding: 0 calc(var(--u) * 0.8); font-size: calc(max(11px, calc(var(--u) * 0.75)) * var(--ts, 1)); }
.card.compact .photo, .card.compact .plain { aspect-ratio: 4 / 3; }
.card.compact .plain { overflow: hidden; padding: calc(var(--u) * 0.4); font-size: calc(max(11px, calc(var(--u) * 0.9)) * var(--ts, 1)); line-height: 1.3; }
.card.compact .plain.mini { font-family: 'Zain', sans-serif; }
.card.compact .card-caption { padding-left: calc(var(--u) * 1.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; height: 2.7em; }
/* A passing line over the foot of the sheet (it takes no room): where to drop a dragged card, or
   why a drop didn't link. */
.sheet-note { position: absolute; left: 6%; right: 6%; bottom: calc(var(--u) * 0.9); z-index: 2; margin: 0; text-align: center; pointer-events: none; font-size: calc(max(13px, calc(var(--u) * 1)) * var(--ts, 1)); font-weight: 700; line-height: 1.45; color: #6b5a3a; }
.sheet-note > span { display: inline-block; padding: calc(var(--u) * 0.3) calc(var(--u) * 1); border-radius: calc(var(--u) * 0.3); background: #fff6df; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
.attached { gap: calc(var(--u) * 1.6) calc(var(--u) * 1.2); }

/* ---------- short screens (phones held sideways): the folder fills the screen ---------- */
/* Cards turn into rows (a small picture beside the caption), the header shrinks, and the
   decorations step aside, so a phone shows several observations and attached cards at once. */
@media (max-height: 520px) {
  .folder {
    --fw: 100vw; --u: min(1vw, 1.9vh);
    width: 100vw; height: 100vh; border-radius: 0;
    padding: 40px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
  }
  .brass, .decor.skyline, .decor.sprig, .polaroid::before, .save-note { display: none; }
  .fd-chip { top: 5px; left: max(12px, env(safe-area-inset-left)); padding: 2px 10px 2px 2px; font-size: calc(13px * var(--ts, 1)); }
  .fd-board { padding: 10px 14px 8px; }
  .corner { width: 18px; height: 18px; }
  .fd-id { margin: 0 0 2px; gap: 10px; }
  .polaroid { width: 60px; height: 68px; padding: 3px 3px 9px; }
  .fd-name { font-size: calc(22px * var(--ts, 1)); }
  .fd-class { font-size: calc(13px * var(--ts, 1)); }
  .fd-heading { font-size: calc(15px * var(--ts, 1)); margin: 0 0 4px; }

  /* Board cards: picture | title, source and controls. Quotes stay full width so they can be read. */
  .fd-note { left: 2px; }
  .fd-pager { padding-top: 2px; }
  .fd-note { position: absolute; left: calc(var(--u) * 1); top: 50%; transform: translateY(-50%); z-index: 2; }
.note-pin { padding: 5px 10px 5px 8px; }
  .note-from { font-size: calc(14px * var(--ts, 1)); }
  .fd-list { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 10px 0 6px; }
  .fd-list .card { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; padding: 8px 8px 7px; }
  .fd-list .card .tape { top: -9px; padding: 1px 10px; }
  .fd-list .card-body { grid-row: 1 / span 3; }
  .fd-list .card-foot { grid-column: 1 / -1; }
  .fd-list .photo, .fd-list .plain { aspect-ratio: 16 / 10; }
  .fd-list .slip { aspect-ratio: auto; min-height: 44px; padding: 6px 10px 6px 18px; font-size: calc(15px * var(--ts, 1)); }
  .card-title { font-size: calc(14px * var(--ts, 1)); }
  .card-caption { font-size: calc(13px * var(--ts, 1)); }
  .attach, .linked, .full { padding: 3px 8px; font-size: calc(12px * var(--ts, 1)); }

  /* The notepad. */
  .fd-pad { padding: 8px 6px 0 0; }
  .pad-rings { top: -14px; }
  .pad-rings i { width: 8px; height: 22px; border-width: 2.5px; }
  .sheet { padding: 18px 12px 6px; }
  .sheet::before { top: 4px; }
  /* Little room for the sign's illustration on a phone held sideways: the notes come first. */
  .sheet-title { margin-top: 2px; font-size: calc(20px * var(--ts, 1)); }
  .sheet-rule { margin: 4px 0 0; width: 64px; }
  .sheet-desc { margin-top: 2px; font-size: calc(12px * var(--ts, 1)); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sheet-sub { margin-top: 6px; font-size: calc(14px * var(--ts, 1)); }
  .links-inner { padding: 12px 2px 2px; }
  .attached { gap: 8px; }
  .slot-empty { padding: 8px 5px 4px; }
  .slot-pic { font-size: calc(12px * var(--ts, 1)); }
  .slot-cap { font-size: calc(11px * var(--ts, 1)); }
  .card.compact { padding: 8px 5px 4px; }
  .card.compact .card-caption { font-size: calc(11px * var(--ts, 1)); }
  .sheet-note { bottom: 6px; font-size: calc(12px * var(--ts, 1)); }
  .remove { width: 26px; height: 26px; top: -10px; left: -8px; }
  .sheet-foot { padding-top: 6px; gap: 2px; }
  .save { padding: 6px 18px; font-size: calc(14px * var(--ts, 1)); }
  .save-status { font-size: calc(12px * var(--ts, 1)); min-height: 1.2em; }
  .sign-toggles { gap: 6px; }
  .sign-toggle { padding: 5px 8px; }

  .pad-tabs { flex-basis: 58px; padding-top: 26px; gap: 5px; margin-right: -4px; }
  .pad-tab { min-height: 58px; padding: 6px 4px 6px 10px; font-size: calc(12px * var(--ts, 1)); }
  .pad-tabs:has(.pad-index) { padding-top: 2px; }
  .pad-tab.pad-index { min-height: 19px; padding: 2px 4px 2px 10px; font-size: calc(10px * var(--ts, 1)); }
  .ov-list { gap: 4px; margin-top: 4px; }
  .ov-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; padding: 3px 8px; }
  .ov-art { height: 28px; }
  .ov-label { font-size: calc(13px * var(--ts, 1)); }
  .ov-count { gap: 2px; min-width: 48px; }
  .ov-dots i { width: 8px; height: 8px; min-width: 8px; min-height: 8px; border-width: 1.5px; }
  .ov-words { font-size: calc(10px * var(--ts, 1)); }
  .ov-foot { margin-top: 4px; font-size: calc(11px * var(--ts, 1)); }
  .detail-card { padding: 22px 14px 10px; gap: 6px; }
  .detail-card { font-size: calc(13px * var(--ts, 1)); }
}

@media (prefers-reduced-motion: reduce) {
  .folder.opening, .sheet.settle, .fd-board.swap, .fd-pad.swap { animation: none; }
}

/* ---------- dragging a card onto a sign's page (game/folder.js) ---------- */
.fd-list .card[data-drag], .attached .card[data-drag] { touch-action: none; cursor: grab; }
#folder.is-dragging, #folder.is-dragging * { cursor: grabbing !important; }
.card.dragging { opacity: 0.35; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 30; margin: 0; pointer-events: none; overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important; opacity: 0.95; }
.drag-ghost .photo, .drag-ghost .slip, .drag-ghost .plain { aspect-ratio: 2.35 / 1; }
/* The drag-and-drop hint (folder.js dragHint): a ghost of the card carried by a finger to the
   sign's first empty slot, which glows; the card it copies dims a little; a caption above the slot. */
.hint-ghost { opacity: 0; }
.hint-hand { position: fixed; left: 0; top: 0; z-index: 31; width: 30px; height: 38px; pointer-events: none; transform-origin: 46% 5%; opacity: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.hint-hand svg { width: 100%; height: 100%; display: block; }
.card.hint-source { opacity: 0.55; }
.slot-empty.hint-target { outline: 2.5px dashed #c9a24a; outline-offset: 2px; background: rgba(201, 162, 74, 0.14); animation: hint-glow 1.3s ease-in-out infinite; }
@keyframes hint-glow { 50% { outline-color: rgba(201, 162, 74, 0.35); background: rgba(201, 162, 74, 0.05); } }
.hint-caption {
  position: fixed; z-index: 31; transform: translate(-50%, -100%); padding: 6px 12px 7px; border-radius: 4px;
  background: #1f4d40; color: #f7f1e3; font-size: calc(15px * var(--ts, 1)); font-weight: 800; white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); animation: hint-in 0.3s ease-out;
}
.hint-caption.below { transform: translate(-50%, 0); animation-name: hint-in-below; }
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, -80%); } }
@keyframes hint-in-below { from { opacity: 0; transform: translate(-50%, -20%); } }
@media (prefers-reduced-motion: reduce) { .hint-ghost, .hint-hand { display: none; } .slot-empty.hint-target { animation: none; } }
/* While a card is dragged, the sheet's note line says where to drop it. */
.sheet-note .drag-hint { display: none; color: var(--navy); }
#folder.is-dragging .sheet-note .drag-hint { display: inline-block; }
#folder.is-dragging .sheet-note .note-text { display: none; }
.links-inner.drop-over { outline: 2px dashed var(--navy); outline-offset: 2px; background: rgba(31, 59, 92, 0.06); border-radius: calc(var(--u) * 0.4); }
.pad-tab.drop-over::before { background: #b5524b; }