/* ==========================================================================
   BOOK: the folder, its cover, the two pages, the request slip and the tabs.

   THE FOLDER KEEPS ONE SHAPE ON EVERY SCREEN.
   A closed folder is always a portrait book, width : height = 0.77.
   Only its size changes. The cover is designed in `em` where 40em is the
   cover width, so the whole cover scales together.

   Two modes, chosen by app.js:
     spread  wide screens: the cover swings open and you see two pages.
     single  phones and portrait tablets: the folder opens into one wide page.
   ========================================================================== */

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  perspective: 2800px;
  font-size: var(--fs);
}

/* --- Wide screens: two pages side by side --- */
.stage[data-mode='spread'] {
  --pw: min(46vw, calc((100dvh - 96px) * 0.77), 760px); /* one page, and the closed cover */
  --ph: calc(var(--pw) / 0.77);
  --cw: var(--pw);
  --ch: var(--ph);
  --fs: clamp(12.5px, calc(var(--pw) / 40), 18px);
  --area-top: 4.4%;
}
.stage[data-mode='spread'] .book { --bw: calc(var(--pw) * 2); --bh: var(--ph); }

/* --- Phones and portrait tablets: closed = small book, open = one page --- */
.stage[data-mode='single'] {
  --pt: 46px;
  --pb: 34px;
  --cw: min(86vw, calc((100dvh - var(--pt) - var(--pb) - 16px) * 0.77), 440px);
  --ch: calc(var(--cw) / 0.77);
  --pw: min(94vw, 700px);
  --bh-open: calc(100dvh - var(--pt) - var(--pb) - 8px);
  --fs: clamp(14.5px, 4.1vw, 17px);
  --area-top: calc(3.4% + 6.8em);
  padding: var(--pt) 0 var(--pb);
}
/* Tablet screens (portrait): perbesar ukuran buku/folder saat tertutup agar proporsional */
@media (min-width: 600px) {
  .stage[data-mode='single'] {
    --pt: 48px;
    --pb: 36px;
    --cw: min(80vw, calc((100dvh - var(--pt) - var(--pb) - 24px) * 0.77), 580px);
    --ch: calc(var(--cw) / 0.77);
    --pw: min(92vw, 740px);
    --fs: 16.5px;
  }
}
@media (min-width: 820px) {
  .stage[data-mode='single'] {
    --cw: min(78vw, calc((100dvh - var(--pt) - var(--pb) - 30px) * 0.77), 620px);
    --ch: calc(var(--cw) / 0.77);
    --pw: min(90vw, 780px);
    --fs: 17px;
  }
}
.stage[data-mode='single'] .book { --bw: var(--cw); --bh: var(--ch); }
.stage[data-mode='single'] .book:is([data-state='opening'], [data-state='open']) { --bw: var(--pw); --bh: var(--bh-open); }

html[data-mode='single'] .chrome { top: 0.55rem; right: 0.7rem; }
html[data-mode='spread'] .chrome { bottom: 0.95rem; right: 1.3rem; }

/* ------------------------------------------------------------------ book */
.book {
  --cmd-h: 7.2em;
  position: relative;
  width: var(--bw);
  height: var(--bh);
  transform-style: preserve-3d;
  color: var(--ink);
  transition: transform 1.6s cubic-bezier(0.66, 0, 0.2, 1), width 0.9s ease, height 0.9s ease;
  animation: fadeIn 0.9s 0.1s both;
}
/* Closed spread: slide the book left by half a page so the cover sits in the middle. */
.stage[data-mode='spread'] .book[data-state='closed'],
.stage[data-mode='spread'] .book[data-state='lifting'],
.stage[data-mode='spread'] .book[data-state='closing'] { transform: translateX(calc(var(--pw) * -0.5)); }

.book[data-state='closing'] {
  transition: transform 1.45s cubic-bezier(0.5, 0, 0.2, 1), width 0.9s ease, height 0.9s ease;
}

@keyframes fadeIn { from { opacity: 0; } }
.book[data-noanim], .book[data-noanim] * { transition: none !important; }

.open-hint {
  position: fixed;
  left: 0; right: 0;
  bottom: 1.2rem;
  text-align: center;
  font-family: var(--f-sc);
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 1rem;
  color: rgba(241, 231, 204, 0.62);
  pointer-events: none;
  transition: opacity 0.5s;
  animation: fadeIn 1s 1.2s both;
}
.stage:has(.book:not([data-state='closed'])) .open-hint { opacity: 0; animation: none; }

/* ----------------------------------------------------------------- cover */
.cover {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--cw);
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: translateZ(2px);
  transition: transform 1.55s cubic-bezier(0.55, 0, 0.2, 1), opacity 0.6s;
}
/* Single mode: the cover keeps its own fixed size, centered in the (growing) book. */
.stage[data-mode='single'] .cover {
  top: 50%;
  height: var(--ch);
  margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);
}
.book[data-state='opening'] .cover,
.book[data-state='open'] .cover { transform: translateZ(2px) rotateY(-180deg); }

.book[data-state='closing'] .cover {
  transform: translateZ(2px) rotateY(0deg);
  transition: transform 1.35s cubic-bezier(0.42, 0, 0.22, 1);
  z-index: 10;
}

.stage[data-mode='single'] .book[data-state='opening'] .cover,
.stage[data-mode='single'] .book[data-state='open'] .cover {
  transform: translateZ(2px) rotateY(-112deg);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.55, 0, 0.2, 1), opacity 0.5s 0.55s;
}
.stage[data-mode='single'] .book[data-state='closing'] .cover {
  transform: translateZ(2px) rotateY(0deg);
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: transform 1.2s cubic-bezier(0.55, 0, 0.2, 1), opacity 0.5s 0.2s;
}
.stage[data-mode='single'] .book[data-state='open'] .cover { pointer-events: none; visibility: hidden; transition-delay: 0s, 0s; }
.stage[data-mode='single'] .face.back { display: none; }

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.face.back { transform: rotateY(180deg); }

/* Shared kraft board */
.face.front,
.face.back,
.page.right {
  background-color: var(--kraft);
  background-image:
    var(--fibers), var(--grain),
    radial-gradient(130% 95% at 30% 18%, var(--kraft-l), var(--kraft) 52%, var(--kraft-d) 100%);
  background-blend-mode: multiply, multiply, normal;
}

/* ---- Front of the folder (designed on a 40em wide board) ---- */
.face.front {
  font-size: calc(var(--cw) / 40);
  border: 0;
  padding: 0;
  text-align: left;
  color: var(--ink);
  border-radius: 0.5em 1em 1em 0.5em;
  box-shadow:
    inset 0 0 0 0.08em rgba(255, 240, 210, 0.2),
    inset 0 0 5em rgba(70, 35, 8, 0.45),
    inset 2em 0 2.4em -1.6em rgba(40, 18, 0, 0.6);
  transition: filter 0.3s;
}
.face.front:hover { filter: brightness(1.05); }
.front-in { position: absolute; inset: 0; display: block; }
.front-in::before {
  content: '';
  position: absolute;
  inset: 1.6em 1.6em 1.6em 2.6em;
  border: 0.1em dashed rgba(70, 35, 8, 0.4);
  border-radius: 0.4em;
  pointer-events: none;
}

.cover-clip {
  position: absolute;
  top: -2.6em; left: 6.5em;
  width: 10em; height: 7em;
  transform: rotate(-4deg);
  filter: drop-shadow(0 0.5em 0.5em rgba(0, 0, 0, 0.5));
  transition: transform 0.5s cubic-bezier(0.3, 1.3, 0.5, 1), opacity 0.4s 0.15s;
  z-index: 3;
}
.face.front:hover .cover-clip { transform: rotate(-4deg) translateY(-0.5em); }
.book[data-state='lifting'] .cover-clip,
.book[data-state='opening'] .cover-clip,
.book[data-state='open'] .cover-clip,
.book[data-state='closing'] .cover-clip { transform: translateY(-5em) rotate(-16deg); opacity: 0; }

/* The agency label: cream card with a double rule */
.label {
  position: absolute;
  left: 5em; right: 5em; top: 8em;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.5em;
  padding: 2.1em 2em 1.4em;
  background-color: #f3ead0;
  background-image: var(--grain);
  text-align: center;
  color: var(--char);
  box-shadow: 0.25em 0.3em 0 rgba(60, 30, 5, 0.28);
  outline: 0.1em solid var(--char);
  outline-offset: -0.5em;
}
.label::after {
  content: '';
  position: absolute;
  inset: 0.78em;
  border: 0.06em solid var(--char);
  pointer-events: none;
}
.label-agency {
  font-family: var(--f-deco); font-weight: 900;
  font-size: 1.5em; line-height: 1.25;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-right: -0.1em;
}
.label-rule { position: relative; display: block; width: 78%; height: 0.36em; margin: 0.35em 0; border-block: 0.07em solid var(--char); }
.label-rule::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 0.7em; height: 0.7em; margin: -0.35em 0 0 -0.35em;
  background: var(--red); transform: rotate(45deg);
  box-shadow: 0 0 0 0.3em #f3ead0;
}
.label-div { font-family: var(--f-fell); font-style: italic; font-weight: 400; font-size: 1.12em; line-height: 1.15; letter-spacing: 0.07em; white-space: nowrap; text-transform: uppercase; color: var(--brown); }
.label-name {
  margin-top: 0.35em;
  font-family: var(--f-gothic); font-weight: 400;
  font-size: 3.3em; line-height: 0.98; letter-spacing: 0.015em;
  text-wrap: balance;
}
.label-kind {
  font-family: var(--f-hand);
  font-size: 2.5em; line-height: 0.85;
  color: var(--red-d);
  transform: rotate(-2deg);
}
.label-meta {
  display: flex; justify-content: space-between; align-self: stretch; gap: 0.3em 1em;
  margin-top: 0.5em; padding-top: 0.6em;
  border-top: 0.07em solid var(--char);
  text-align: left;
}
.label-meta small { display: block; font-family: var(--f-sc); font-weight: 600; font-size: 0.95em; letter-spacing: 0.14em; color: var(--taupe); }
.label-meta b { font-family: var(--f-type); font-weight: 400; font-size: 1em; color: var(--ink); }

/* The black band with the red strip */
.classified {
  position: absolute;
  left: -1.2em; right: -1.2em; top: 36em;
  display: flex; flex-direction: column;
  transform: rotate(-1.6deg);
  box-shadow: 0.3em 0.4em 0 rgba(60, 30, 5, 0.3);
}
.cl-black { background-color: var(--char); background-image: var(--grain); padding: 0.75em 0 0.7em; text-align: center; }
.cl-word {
  display: inline-block;
  margin-right: -0.22em;
  font-family: var(--f-deco); font-weight: 900;
  font-size: 3em; line-height: 1; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cream);
}
.cl-red {
  padding: 0.4em 1em 0.35em;
  background-color: var(--red); background-image: var(--grain);
  color: #f7ead2; text-align: center;
  font-family: var(--f-type); font-size: 1.05em; letter-spacing: 0.16em; text-transform: uppercase;
}

.cover-pclip {
  position: absolute;
  top: 5.5em; right: 6em;
  width: 2.5em; height: 7em;
  color: var(--red);
  transform: rotate(8deg);
  filter: drop-shadow(0.15em 0.25em 0.2em rgba(0, 0, 0, 0.4));
  z-index: 2;
}

.cover-foot { position: absolute; left: 5em; bottom: 4.2em; display: flex; flex-direction: column; gap: 0.5em; }
.barcode {
  width: 13em; height: 3.2em;
  background: repeating-linear-gradient(90deg, var(--char) 0 0.14em, transparent 0.14em 0.32em, var(--char) 0.32em 0.6em, transparent 0.6em 0.76em, var(--char) 0.76em 0.84em, transparent 0.84em 1.1em);
  opacity: 0.78;
}
.foot-text { font-family: var(--f-sc); font-weight: 600; font-size: 1em; letter-spacing: 0.2em; color: rgba(42, 38, 34, 0.75); }
.cover-seal {
  position: absolute;
  right: 3.6em; bottom: 1.3em;
  width: 9.8em; height: 9.8em;
  color: #a8231a;
  opacity: 0.82;
  mix-blend-mode: multiply;
  transform: rotate(-12deg);
}

/* The mint tab on the edge */
.side-tab {
  position: absolute;
  right: -2.6em; top: 42%;
  width: 2.7em;
  padding: 1.1em 0;
  writing-mode: vertical-rl;
  text-align: center;
  background-color: var(--mint);
  color: var(--char);
  font-family: var(--f-sc); font-weight: 600; font-size: 1.3em; letter-spacing: 0.18em;
  border-radius: 0 0.5em 0.5em 0;
  box-shadow: 0.2em 0.25em 0 rgba(0, 0, 0, 0.3);
}
.stage[data-mode='single'] .side-tab { right: -2.1em; width: 2.2em; }

/* ----------------------------------------------------------- the pages */
.page.right {
  position: absolute;
  top: 0; right: 0;
  width: var(--cw);
  height: 100%;
  isolation: isolate;
  border-radius: 0.3em 0.8em 0.8em 0.3em;
  box-shadow:
    inset 0 0 0 0.08em rgba(255, 240, 210, 0.2),
    inset 0 0 3.4em rgba(70, 35, 8, 0.4),
    inset 1.8em 0 2em -1.4em rgba(40, 18, 0, 0.55);
}
.stage[data-mode='spread'] .page.right { width: var(--pw); }
.stage[data-mode='single'] .page.right { left: 0; right: auto; width: 100%; border-radius: 0.6em; }
.stage[data-mode='single'] .book:is([data-state='opening'], [data-state='open']) .page.right { box-shadow: inset 0 0 0 0.08em rgba(255, 240, 210, 0.2), inset 0 0 3.4em rgba(70, 35, 8, 0.4); }

/* Loose sheets peeking out from under the closed cover */
.sheet-edge {
  position: absolute;
  inset: 0.6% 0.4% 0.6% 0;
  background: #e9dfc3;
  border-radius: 0 0.3em 0.3em 0;
  box-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.3);
  z-index: -1;
  transition: opacity 0.4s 0.3s;
}
.sheet-edge.e1 { transform: translate(0.4em, 0.5em); }
.sheet-edge.e2 { transform: translate(0.8em, 1em); background: #d9ccaa; }
.book:not([data-state='closed']):not([data-state='lifting']) .sheet-edge { opacity: 0; }

/* ---- Left page = back of the cover ---- */
.face.back {
  font-size: calc(var(--ph) / 52); /* the left page is laid out on a 40em x 52em board, so it never overflows */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: space-between;
  gap: 1.2em 1.2em;
  padding: 3.1em 3em 2.8em 3em;
  border-radius: 0.8em 0.3em 0.3em 0.8em;
  box-shadow:
    inset 0 0 0 0.08em rgba(255, 240, 210, 0.2),
    inset 0 0 3.4em rgba(70, 35, 8, 0.4),
    inset -1.8em 0 2em -1.4em rgba(40, 18, 0, 0.55);
  color: var(--ink);
  height: 100%;
}

/* Rubber stamp on the left page of spread mode */
.lp-close-stamp {
  position: absolute;
  top: 0.9em;
  right: 1.6em;
  z-index: 10;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--red-d);
  font-family: var(--f-sc);
  font-weight: 600;
  font-size: 0.95em;
  letter-spacing: 0.12em;
  transform: rotate(2.5deg);
  transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1), filter 0.2s, opacity 0.2s;
  mix-blend-mode: multiply;
  opacity: 0.88;
}
.lp-close-stamp:hover {
  transform: rotate(0deg) scale(1.06);
  opacity: 1;
  filter: drop-shadow(0 0.15em 0.25em rgba(158, 35, 27, 0.35));
}
.lp-close-stamp:active {
  transform: scale(0.95) rotate(1deg);
}
.stamp-box {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.75em 0.25em;
  border: 0.14em dashed var(--red-d);
  border-radius: 0.25em;
  background: rgba(246, 238, 214, 0.65);
  box-shadow: inset 0 0 0.4em rgba(158, 35, 27, 0.15);
}
.stamp-icon {
  font-size: 1em;
  font-weight: 700;
  color: var(--red);
}
.stamp-txt {
  font-family: var(--f-sc);
  font-size: 0.95em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.lp-scrap {
  position: absolute;
  right: 11.2em; bottom: 2.1em;
  width: 9em;
  opacity: 0.8;
  transform: rotate(-3deg);
  mix-blend-mode: multiply;
}

.lp-polaroid {
  position: relative;
  grid-column: 1; grid-row: 1;
  align-self: start;
  width: 100%;
  max-width: 14em;
  padding: 0.7em 0.7em 0.3em;
  background: #f8f1da;
  box-shadow: 0.25em 0.3em 0 rgba(60, 30, 5, 0.28);
  transform: rotate(-3deg);
}
.lp-polaroid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #cfc3a4; filter: sepia(0.22) contrast(1.04); }
.lp-polaroid figcaption { display: flex; flex-direction: column; align-items: center; padding: 0.3em 0 0.25em; line-height: 0.9; }
.cap-red { font-size: 1.9em; color: var(--red-d); }
.cap-blue { font-size: 1.5em; color: #2c4a7a; }
.lp-clip { position: absolute; top: -2em; left: 50%; width: 4.2em; height: 2.94em; transform: translateX(-50%) rotate(3deg); filter: drop-shadow(0 0.25em 0.25em rgba(0, 0, 0, 0.4)); }

.lp-tag {
  position: relative;
  grid-column: 2; grid-row: 1;
  align-self: start;
  margin-top: 1.2em;
  padding: 0 0 0.9em;
  background-color: #f3ead0;
  background-image: var(--grain);
  box-shadow: 0.25em 0.3em 0 rgba(60, 30, 5, 0.28);
  transform: rotate(1.8deg);
}
.lp-tag::before {
  content: ''; position: absolute; top: -0.7em; left: 50%;
  width: 5em; height: 1.4em; margin-left: -2.5em;
  background: rgba(240, 179, 35, 0.7);
  transform: rotate(-3deg);
}
.lp-tag-head {
  display: block;
  padding: 0.55em 1em 0.4em;
  background: var(--brown); color: var(--cream);
  font-family: var(--f-sc); font-weight: 600; font-size: 1.05em; letter-spacing: 0.2em;
}
.lp-tag p { padding: 0.4em 1em 0; font-family: var(--f-hand); font-size: 1.85em; line-height: 0.92; color: #2c4a7a; }

.lp-index {
  grid-column: 1 / -1; grid-row: 2;
  background-color: #f3ead0;
  background-image: var(--grain);
  box-shadow: 0.25em 0.3em 0 rgba(60, 30, 5, 0.28);
}
.lp-index-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0.5em 1em 0.45em;
  background: var(--red); color: #f7ead2;
}
.lp-index-head h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.15em; letter-spacing: 0.16em; text-transform: uppercase; }
.lp-index-head span { font-family: var(--f-type); font-size: 0.85em; opacity: 0.92; }
.lp-index ul {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(6, auto);
  grid-template-columns: 1fr 1fr;
  column-gap: 1.6em;
  padding: 0.5em 1em 0;
}
.lp-index a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.4em;
  padding: 0.38em 0.35em;
  font-family: var(--f-type); font-size: 1.02em; text-decoration: none; color: var(--ink);
  border-bottom: 0.07em dotted rgba(42, 38, 34, 0.5);
}
.lp-index a:hover { background: rgba(240, 179, 35, 0.35); }
.lp-index a[aria-current='page'] { background: var(--char); color: var(--cream); }
.lp-index .tick { position: relative; flex: none; width: 1.05em; height: 1.05em; border: 0.1em solid rgba(42, 38, 34, 0.5); border-radius: 50%; }
.lp-index a.seen .tick { border-color: var(--red-d); background: var(--red-d); }
.lp-index a.seen .tick::after {
  content: ''; position: absolute; left: 0.27em; top: 0.02em; width: 0.28em; height: 0.55em;
  border: solid #f7ead2; border-width: 0 0.12em 0.12em 0; transform: rotate(40deg);
}
.lp-index a[aria-current='page'] .tick { border-color: var(--cream); }

.counter {
  --n: 0;
  position: relative;
  margin: 0.6em 1em 0; padding: 0.3em 0 0.75em;
  font-family: var(--f-sc); font-weight: 600; font-size: 1.1em; letter-spacing: 0.14em;
  background: linear-gradient(var(--red), var(--red)) 0 100% / calc(var(--n) / var(--t, 13) * 100%) 0.3em no-repeat;
  transition: background-size 0.6s;
}
.counter::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 0.3em; background: rgba(42, 38, 34, 0.15); z-index: -1; }

.lp-card {
  grid-column: 1; grid-row: 3;
  align-self: end;
  display: flex; flex-direction: column; gap: 0.15em;
  padding: 0.75em 1em 0.8em 1.3em;
  background-color: #f3ead0;
  background-image: var(--grain), linear-gradient(90deg, var(--red-d) 0 0.5em, transparent 0.5em);
  box-shadow: 0.25em 0.3em 0 rgba(60, 30, 5, 0.28);
  font-size: 0.9em;
  transform: rotate(-1.4deg);
}
.lp-card b { font-family: var(--f-display); font-weight: 700; font-size: 1.2em; }
.lp-card span { font-family: var(--f-type); font-size: 0.92em; color: var(--ink-2); overflow-wrap: anywhere; }

.lp-seal {
  grid-column: 2; grid-row: 3;
  justify-self: end; align-self: end;
  width: 6.4em; height: 6.4em;
  color: var(--red-d);
  opacity: 0.7;
  mix-blend-mode: multiply;
  transform: rotate(-12deg);
}

.solved {
  position: absolute;
  left: 50%; top: 44%;
  padding: 0.1em 0.7em 0.15em;
  border: 0.14em double var(--red);
  color: var(--red);
  font-family: var(--f-display); font-weight: 900; font-size: 2.6em; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  background: rgba(241, 231, 204, 0.3);
  transform: translate(-50%, -50%) rotate(-11deg);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.solved.on { opacity: 0.88; }
.solved.pop { animation: thud 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
@keyframes thud {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-11deg) scale(2.4); }
  60% { opacity: 0.95; transform: translate(-50%, -50%) rotate(-11deg) scale(0.94); }
  100% { opacity: 0.88; transform: translate(-50%, -50%) rotate(-11deg) scale(1); }
}

/* ---- Right page furniture ---- */
.mini-head { display: none; }
.stage[data-mode='single'] .mini-head {
  position: absolute; z-index: 4;
  left: 5.5%; right: 6%; top: 3.4%;
  display: flex; align-items: center; gap: 0.7em;
  padding: 0.35em 0.8em 0.35em 0.4em;
  background-color: #f3ead0;
  background-image: var(--grain);
  box-shadow: 0.2em 0.25em 0 rgba(60, 30, 5, 0.28);
  outline: 0.08em solid var(--char);
  outline-offset: -0.3em;
}
.mini-head img { width: 2.4em; height: 2.4em; object-fit: cover; border-radius: 50%; border: 0.12em solid var(--char); background: #cfc3a4; filter: sepia(0.22); }
.mini-name { font-family: var(--f-display); font-weight: 700; font-size: 1.05em; line-height: 1.1; }
.mini-count { margin-left: auto; font-family: var(--f-hand); font-size: 1.6em; color: var(--red-d); white-space: nowrap; }

.edge-tabs { position: absolute; z-index: 5; display: flex; opacity: 0; transition: opacity 0.5s 1.1s; }
.book[data-state='opening'] .edge-tabs,
.book[data-state='open'] .edge-tabs { opacity: 1; }
.book[data-state='closing'] .edge-tabs { opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.book[data-instant] .edge-tabs { transition: none; }
.stage[data-mode='spread'] .edge-tabs { right: -2.4em; top: 8%; flex-direction: column; gap: 0.5em; }
.stage[data-mode='single'] .edge-tabs { left: 5.5%; right: 6%; top: calc(3.4% + 4.1em); gap: 0.3em; }

.tab {
  border: 0;
  padding: 1em 0.55em;
  background: var(--tone, var(--mint));
  color: var(--char);
  font-family: var(--f-sc); font-weight: 600; font-size: 1.1em; letter-spacing: 0.12em;
  writing-mode: vertical-rl;
  border-radius: 0 0.5em 0.5em 0;
  box-shadow: 0.18em 0.22em 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.25s, box-shadow 0.25s;
}
.tab[data-tone='mint'] { --tone: var(--mint); }
.tab[data-tone='mustard'] { --tone: var(--mustard); }
.tab[data-tone='pink'] { --tone: var(--pink); }
.tab[data-tone='blue'] { --tone: var(--blue); }
.tab[data-tone='red'] { --tone: var(--red); color: #f7ead2; }
.tab[data-tone='char'] { --tone: var(--char); color: var(--cream); }
.tab[data-tone='parchment'] { --tone: #d9c79a; }
.tab[aria-pressed='true'] { transform: translateX(0.5em); box-shadow: 0.25em 0.28em 0 rgba(0, 0, 0, 0.4); }
.tab:hover { transform: translateX(0.3em); }
.stage[data-mode='single'] .tab {
  flex: 1 1 0; min-width: 0; writing-mode: horizontal-tb; padding: 0.5em 0.1em 0.45em; font-size: 0.9em; letter-spacing: 0.03em; text-align: center;
  border-radius: 0.5em 0.5em 0 0; box-shadow: 0 -0.12em 0 rgba(0, 0, 0, 0.25);
}
.stage[data-mode='single'] .tab[aria-pressed='true'],
.stage[data-mode='single'] .tab:hover { transform: translateY(-0.2em); }

.paper-area {
  position: absolute; z-index: 3;
  left: 5.5%; right: 7.4%;
  top: var(--area-top);
  bottom: calc(var(--cmd-h) + 2em);
  display: flex; flex-direction: column;
  padding: 2.2em 0.7em 1.4em;
  overflow-x: hidden; overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(42, 38, 34, 0.45) transparent;
  outline: none;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 1.6em), transparent);
  mask-image: linear-gradient(#000 calc(100% - 1.6em), transparent);
}
.stage[data-mode='single'] .paper-area { left: 3.5%; right: 4%; }

.empty {
  position: absolute; left: 0; right: 0; top: 16%;
  text-align: center;
  font-family: var(--f-hand); font-size: 2.3em; line-height: 1; color: var(--red-d);
  transform: rotate(-2deg);
}
.empty kbd { font-family: var(--f-type); font-size: 0.62em; color: var(--ink); }
.empty::after {
  content: '';
  display: block; width: 4.4em; height: 5.2em; margin: 0.3em auto 0;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 70' fill='none' stroke='%239e231b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4C38 6 52 30 32 62'/%3E%3Cpath d='M32 62l-14-12M32 62l12-13'/%3E%3C/svg%3E") center / contain no-repeat;
}
.book[data-dock='bottom'] .empty { display: none; }

/* ------------------------------------------------------ the request slip */
.cmd {
  position: absolute; z-index: 8;
  left: 0; right: 0;
  width: min(88%, 34em);
  margin-inline: auto;
  height: var(--cmd-h);
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
  transition: top 0.7s cubic-bezier(0.3, 0.9, 0.3, 1), transform 0.7s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.book[data-dock='bottom'] { --cmd-h: 5.2em; }
.book[data-dock='bottom'] .cmd { top: calc(100% - 4.4%); transform: translateY(-100%); }
.book[data-dock='bottom'] .cmd-band { display: none; }
.book[data-dock='bottom'] .cmd form { justify-content: center; border-top: 0.45em solid var(--red); padding-top: 0.2em; }
.book[data-state='opening'] .cmd,
.book[data-state='open'] .cmd { visibility: visible; }
.book[data-state='closing'] .cmd { opacity: 0; visibility: visible; transition: opacity 0.25s ease; pointer-events: none; }
.book[data-state='closing'] .paper-area { pointer-events: none; }

.cmd form, .cmd-clip { animation: slipIn 0.85s 1s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.book:not([data-state='opening']):not([data-state='open']) .cmd form,
.book:not([data-state='opening']):not([data-state='open']) .cmd-clip { animation: none; }
.book[data-instant] .cmd form, .book[data-instant] .cmd-clip { animation: none; }
@keyframes slipIn {
  from { opacity: 0; transform: translateY(2.6em) rotate(-2.5deg); }
}

.cmd form {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-start;
  background-color: #f6eed6;
  background-image: var(--grain);
  box-shadow: 0.3em 0.4em 0 rgba(40, 18, 0, 0.35), 0 0 0 0.07em var(--char);
  transform: rotate(-0.6deg);
}
.cmd-clip { position: absolute; z-index: 2; top: -1.6em; left: 1.5em; width: 1.3em; height: 3.6em; color: var(--red); filter: drop-shadow(0.1em 0.15em 0.1em rgba(0, 0, 0, 0.35)); }

.cmd-band {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0.5em 1em 0.42em 3.4em;
  background-color: var(--red);
  background-image: var(--grain);
  color: #f7ead2;
}
.cmd-title { font-family: var(--f-display); font-weight: 700; font-size: 1em; line-height: 1.1; letter-spacing: 0.18em; text-transform: uppercase; }
.cmd-no { font-family: var(--f-type); font-size: 0.8em; opacity: 0.92; }

.cmd-row { display: flex; align-items: baseline; gap: 0.5em; margin: 0.4em 1.1em 0; border-bottom: 0.09em solid var(--char); }
.cmd-prefix { font-family: var(--f-sc); font-weight: 600; font-size: 1.05em; letter-spacing: 0.14em; color: var(--brown); }
.cmd input {
  flex: 1; min-width: 0;
  padding: 0.18em 0;
  border: 0; outline: 0; background: transparent;
  font-family: var(--f-type); font-size: 1.4em; color: var(--ink);
  caret-color: var(--red);
}
.cmd input::placeholder { color: rgba(42, 38, 34, 0.42); }
.cmd-row:focus-within { border-bottom-color: var(--red); }
.cmd input:focus-visible { outline: none; }
.cmd-btn {
  flex: none; align-self: center;
  padding: 0.2em 0.65em;
  border: 0.09em solid var(--char); border-radius: 0.3em;
  background: transparent; color: var(--char);
  font-family: var(--f-type); font-size: 0.82em;
}
.cmd-btn:hover, .cmd-btn[aria-expanded='true'] { background: var(--char); color: var(--cream); }
#cmdType { display: none; }
@media (pointer: coarse) { #cmdType { display: inline-block; } }

.cmd-msg { min-height: 1.35em; margin: 0.15em 1.1em 0; font-family: var(--f-type); font-size: 0.85em; line-height: 1.35; color: var(--red-d); }
.cmd-row.shake { animation: shake 0.4s; }
@keyframes shake { 20% { transform: translateX(-0.35em); } 40% { transform: translateX(0.35em); } 60% { transform: translateX(-0.2em); } 80% { transform: translateX(0.2em); } }

/* The list: a ledger page */
.cmd-list {
  position: absolute; z-index: 9;
  left: 0.3em; right: 0.3em;
  max-height: calc(var(--bh) * 0.4);
  overflow-y: auto;
  padding: 0 0 0.3em;
  background-color: #faf3dd;
  background-image: var(--grain);
  border: 0.09em solid var(--char);
  box-shadow: 0.3em 0.4em 0 rgba(40, 18, 0, 0.35);
  scrollbar-width: thin;
}
.book[data-dock='center'] .cmd-list { top: calc(100% + 0.5em); }
.book[data-dock='bottom'] .cmd-list { bottom: calc(100% + 0.6em); }

.cmd-list .sec {
  position: sticky; top: 0;
  padding: 0.35em 0.9em 0.2em;
  background: var(--brown); color: var(--cream);
  font-family: var(--f-sc); font-weight: 600; font-size: 1em; letter-spacing: 0.2em;
}
.cmd-list [role='option'] {
  display: flex; align-items: baseline; gap: 0.8em;
  padding: 0.5em 0.9em;
  min-height: 2.3em;
  font-family: var(--f-type);
  border-bottom: 0.07em dotted rgba(42, 38, 34, 0.4);
  cursor: pointer;
}
.cmd-list .o-say { margin-left: auto; text-align: right; font-family: var(--f-body); font-style: italic; font-size: 0.82em; color: var(--ink-2); }
.cmd-list .o-seen { flex: none; align-self: center; width: 0.5em; height: 0.9em; margin-left: -0.3em; border: solid var(--red-d); border-width: 0 0.2em 0.2em 0; transform: rotate(40deg) translateY(-0.12em); }
.cmd-list [aria-selected='true'] { background: var(--char); color: var(--cream); }
.cmd-list [aria-selected='true'] .o-say { color: rgba(241, 231, 204, 0.78); }
.cmd-list [aria-selected='true'] .o-seen { border-color: var(--mustard); }
.cmd-list .none { padding: 0.8em 0.9em; font-family: var(--f-type); color: var(--ink-2); }

/* Short landscape screens (phones on their side): tighter furniture, same folder shape */
@media (max-height: 480px) {
  .stage[data-mode='single'] { --pt: 36px; --pb: 8px; }
  .open-hint { display: none; }
  .chrome { font-size: 0.78rem; }
  .chrome-link { min-height: 1.8rem; padding: 0 0.65rem; }
  html[data-mode='single'] .chrome { top: 0.35rem; }
  .stage[data-mode='single'] { --fs: 11.5px; --area-top: 3.2%; }
  .stage[data-mode='single'] .mini-head,
  .stage[data-mode='single'] .edge-tabs { display: none; }
  .stage[data-mode='single'] .book { --cmd-h: 4.2em; }
  .stage[data-mode='single'] .cmd-band { display: none; }
  .stage[data-mode='single'] .cmd form { justify-content: center; border-top: 0.45em solid var(--red); }
  .stage[data-mode='single'] .paper-area { bottom: calc(var(--cmd-h) + 1.6em); padding-top: 1.8em; }
  .stage[data-mode='single'] .book[data-dock='center'] .cmd-list { max-height: 9em; }
  .stage[data-mode='single'] .cmd-msg { position: absolute; left: 1.5em; right: 1em; top: 100%; margin: 0.2em 0 0; padding: 0 0.4em; background: #f6eed6; }
  .stage[data-mode='single'] .empty { top: 6%; font-size: 1.7em; }
  .stage[data-mode='single'] .empty::after { display: none; }
}