/* timecards — the Showa desk appliance. Design language ported from design/mock.html:
   cream molded plastic device, greyish-green LCD, ONE vermilion accent (only when
   something is LIVE), charcoal report printer as the app bar, frosted binder pockets
   holding die-cut sticker cards. Mobile-first: the device is the phone's width. */

:root {
  /* responsive device path — everything derives from this (mock review D1).
     ONE paper path: the mouth fits the header, every print is a hair narrower
     than the mouth (the mock's rule — paper must fit through its slot). */
  --device-w: min(540px, calc(100vw - 32px));
  --mouth-w:  min(340px, calc(var(--device-w) - 40px));
  --paper-w:  min(320px, calc(var(--device-w) - 60px));
  /* Showa appliance palette: muted fields, one hot accent */
  --desk:      #c7c2b2;   /* workbench mat */
  --desk-line: #b3ae9d;
  --shell:     #e4ddc9;   /* cream molded plastic */
  --shell-hi:  #f0ebdb;
  --shell-lo:  #cabf9f;
  --shell-edge:#a89c78;
  --metal:     #b9b6ad;   /* brushed faceplate */
  --metal-hi:  #d8d5cc;
  --ink:       #2c2a24;   /* silkscreen dark */
  --ink-soft:  #6b6655;
  --lcd-bg:    #99a98e;   /* greyish teal-green LCD */
  --lcd-bg-lo: #8a9b80;
  --lcd-dark:  #2f3a2c;   /* live digits */
  --lcd-ghost: #8ea085;   /* unlit segment ghost */
  --vermilion: #e8472a;   /* THE accent — only when something is LIVE */
  --vermilion-lo:#b8351d;
  --olive:     #6f7457;
  /* the printer's own scope (charcoal + beige, amber accent) */
  --pr-body:   #4b4a46;
  --pr-body-hi:#62615c;
  --pr-body-lo:#34332f;
  --pr-edge:   #232220;
  --pr-beige:  #ccc6b6;
  --pr-beige-hi:#ddd8c9;
  --pr-beige-lo:#aaa491;
  --pr-ink:    #2b2a26;
  --pr-ink-soft:#6a675e;
  --pr-amber:  #f4ab3a;
  --pr-dark:   #0e0d0c;
  --pr-paper:  #efece1;   /* receipt stock */
  --pr-print:  #2b2a25;   /* printed ink */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow-x: clip; }
html { height: 100%; }
body {
  font-family: "Saira Condensed", sans-serif;
  color: var(--ink);
  min-height: 100vh;
  background-color: var(--desk);
  /* cutting-mat grid baked at low alpha (blend modes + fixed attachment break in Chromium) */
  background-image:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(107,102,85,.14) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(107,102,85,.14) 39px 40px),
    radial-gradient(120% 90% at 50% 0%, #d2cdbd 0%, var(--desk) 70%);
  background-attachment: fixed;
}
/* faint paper grain over the whole desk (plain alpha — multiply blends black over
   the root canvas in Chromium) */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scene {
  width: 100%;
  min-height: 100vh;
  display: flex; flex-direction: column; gap: 28px;
  padding: 0 16px;
}
/* device view: the appliance centered; the binder bench hugs the BOTTOM edge of the
   desk (its squared bottom corners end the page flush, like the mock) */
#view-device { flex: 1 1 auto; display: flex; flex-direction: column; gap: 28px; }
#view-device .binder { margin-top: auto; }
.jp { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; }
button { font-family: inherit; }

/* ═══════════════ PRINTER HEADER (the app bar) ═══════════════ */
.appbar { width: var(--device-w); max-width: 100%; margin: 0 auto; }
.pr-deck {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(180deg, var(--pr-beige-hi), var(--pr-beige) 50%, var(--pr-beige-lo));
  border: 1px solid var(--pr-edge); border-top: none; border-radius: 0 0 5px 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 3px rgba(0,0,0,.16);
  position: relative;
}
/* charcoal ABS body behind the cream deck */
.pr { position: relative; padding: 6px 6px 0; }
.pr::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--pr-body-hi) 0, var(--pr-body) 14%, var(--pr-body) 82%, var(--pr-body-lo));
  border: 1px solid var(--pr-edge); border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -3px 6px rgba(0,0,0,.4),
              0 14px 22px -10px rgba(0,0,0,.5);
}
.pr-badge { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .16em; color: var(--pr-ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.55); white-space: nowrap; }
.pr-badge b { color: var(--vermilion); }
.pr-badge em { font-style: normal; font-family: "Dela Gothic One", sans-serif; font-size: 7px; color: var(--pr-ink-soft); letter-spacing: .06em;
  display: block; margin-top: 1px; text-shadow: none; }
.pr-cluster { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px;
  background: var(--pr-beige-lo);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.38), inset 0 -1px 0 rgba(255,255,255,.4); }
/* molded plastic keys: amber = the lit/active view */
.pr-key {
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .1em; color: #42402f;
  border: none; cursor: pointer; white-space: nowrap;
  padding: 0 11px; height: 26px; border-radius: 5px;
  background: linear-gradient(180deg, #e7e1d2 0, #cfc8b6 55%, #b3ab96 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 3px rgba(70,60,30,.3),
              0 2px 3px rgba(0,0,0,.3);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  transition: box-shadow .07s, background .07s;
}
.pr-key.primary {
  color: #3a2a12;
  background: linear-gradient(180deg, #f7be5a 0, var(--pr-amber) 55%, #d8902a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 3px rgba(120,70,10,.45),
              0 2px 3px rgba(0,0,0,.3);
}
.pr-key:active {
  background: linear-gradient(180deg, #b3ab96 0, #c4bda9 60%, #d8d2c1 100%);
  box-shadow: inset 0 3px 5px rgba(60,50,25,.5), inset 0 -1px 1px rgba(255,255,235,.4);
}
.pr-key.primary:active {
  background: linear-gradient(180deg, #d18a28 0, #e09e35 60%, #efb04a 100%);
  box-shadow: inset 0 3px 5px rgba(80,45,5,.55), inset 0 -1px 1px rgba(255,220,150,.35);
}
.pr-key.tiny { padding: 0 8px; font-size: 13px; }
/* the exit mouth the report prints from */
.pr-exit { position: relative; height: 16px; margin: 0 -6px;
  background: linear-gradient(180deg, var(--pr-beige-lo), var(--pr-beige-lo) 40%, #9a937f);
  border: 1px solid var(--pr-edge); border-top: none; border-radius: 0 0 8px 8px;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.2); }
.pr-mouth { position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: var(--mouth-w); height: 8px; border-radius: 2px;
  background: var(--pr-dark);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.95), inset 0 -1px 1px rgba(255,255,255,.05); }
/* chrome serrated TEAR bar at the exit lip — cool steel, three values */
.pr-tear { position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: var(--mouth-w); height: 6px; z-index: 3;
  background: linear-gradient(180deg, #dfe3e6 0, #eef1f3 14%, #c2c6ca 24%,
    #8a8d90 42%, #65686b 62%, #44464a 84%, #25272b 100%);
  filter: drop-shadow(0 2px 1.5px rgba(0,0,0,.7));
  clip-path: polygon(0 0,100% 0,100% 55%,
    98% 100%,96% 55%,94% 100%,92% 55%,90% 100%,88% 55%,86% 100%,84% 55%,82% 100%,
    80% 55%,78% 100%,76% 55%,74% 100%,72% 55%,70% 100%,68% 55%,66% 100%,64% 55%,
    62% 100%,60% 55%,58% 100%,56% 55%,54% 100%,52% 55%,50% 100%,48% 55%,46% 100%,
    44% 55%,42% 100%,40% 55%,38% 100%,36% 55%,34% 100%,32% 55%,30% 100%,28% 55%,
    26% 100%,24% 55%,22% 100%,20% 55%,18% 100%,16% 55%,14% 100%,12% 55%,10% 100%,
    8% 55%,6% 100%,4% 55%,2% 100%,0 55%); }
/* the resting paper STUB: the leading tongue of the next receipt, hanging out of
   the mouth. Hidden while the report itself is out (it HAS become the report). */
.pr-stub { position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: var(--paper-w); height: 30px; z-index: 4;
  background: linear-gradient(180deg, #f6f3ea 0, var(--pr-paper) 55%, #e7e2d3 100%);
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.45);
  --tooth: 9px;
  -webkit-mask: linear-gradient(#000,#000) no-repeat 0 0/100% calc(100% - 13px),
                radial-gradient(var(--tooth) at 50% 100%, transparent 98%, #000) repeat-x 0 100%/18px 18px;
  mask: linear-gradient(#000,#000) no-repeat 0 0/100% calc(100% - 13px),
        radial-gradient(var(--tooth) at 50% 100%, transparent 98%, #000) repeat-x 0 100%/18px 18px;
}
.pr-stub::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px;
  background: linear-gradient(180deg, rgba(14,12,8,.75) 0%, rgba(14,12,8,.45) 30%, transparent 100%); }
/* the stub BECOMES the paper: hidden the whole time one is out; feeds back after a cut */
.pr.paper-is-out .pr-stub { opacity: 0; }
.pr .pr-stub.feeding { opacity: 1; animation: feed-new .55s cubic-bezier(.2,.8,.3,1); }
@keyframes feed-new { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
/* the power lamp: recessed amber dot, lit while the mechanism runs */
.pr-power { width: 15px; height: 15px; flex: 0 0 auto; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #5c4326 0 36%, var(--pr-dark) 40%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.85); }
.pr.printing .pr-power {
  background: radial-gradient(circle at 50% 42%, #ffe6a0 0 22%, var(--pr-amber) 26% 38%, var(--pr-dark) 42%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4), 0 0 8px var(--pr-amber); }

/* ═══════════════ THE DEVICE ═══════════════ */
#device {
  /* the LCD takes the card's HUE at screen lightness — a backlight changes color,
     it doesn't go dim (dark card colors must not kill readability) */
  --accent-lcd: color-mix(in srgb, var(--lcd-bg) 80%, var(--card-accent, var(--lcd-bg)));
  --accent-lcd-lo: color-mix(in srgb, var(--lcd-bg-lo) 80%, var(--card-accent, var(--lcd-bg-lo)));
  width: var(--device-w); max-width: 100%; margin: 0 auto;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--shell-hi) 86%, var(--card-accent, var(--shell-hi))),
    color-mix(in srgb, var(--shell) 84%, var(--card-accent, var(--shell))) 14%,
    color-mix(in srgb, var(--shell) 84%, var(--card-accent, var(--shell))) 86%,
    color-mix(in srgb, var(--shell-lo) 84%, var(--card-accent, var(--shell-lo))));
  transition: background 1s ease;
  border-radius: 22px;
  padding: 16px;
  position: relative;
  box-shadow:
    0 2px 0 var(--shell-hi) inset,
    0 -3px 0 var(--shell-lo) inset,
    0 24px 40px -12px rgba(60,52,30,.55),
    0 4px 8px rgba(0,0,0,.2);
  border: 1px solid var(--shell-edge);
}
@supports (color: oklch(from red l c h)) {
  #device { --accent-lcd: oklch(from var(--card-accent, var(--lcd-bg)) 0.70 min(c, 0.085) h);
            --accent-lcd-lo: oklch(from var(--card-accent, var(--lcd-bg)) 0.63 min(c, 0.085) h); }
}
.screw { position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9d2bd, #9c916f);
  box-shadow: 0 1px 1px rgba(0,0,0,.35), 0 0 0 1px var(--shell-edge); }
.screw::after { content: ""; position: absolute; inset: 3px; border-top: 1.5px solid #6b6242; transform: rotate(34deg); }
.screw.tl { top: 9px; left: 9px; } .screw.tr { top: 9px; right: 9px; }
.screw.bl { bottom: 9px; left: 9px; } .screw.br { bottom: 9px; right: 9px; }

.faceplate {
  background: repeating-linear-gradient(90deg, var(--metal) 0 2px, var(--metal-hi) 2px 3px);
  border-radius: 12px 12px 4px 4px;
  border: 1px solid var(--shell-edge);
  border-bottom: 2px solid color-mix(in srgb, var(--card-accent, var(--shell-edge)) 75%, var(--shell-edge));   /* snap-on trim keyed to the card */
  padding: 9px 14px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 1px 0 var(--metal-hi) inset, 0 2px 4px rgba(0,0,0,.18);
  margin: 4px 6px 14px;
}
.brand { font-weight: 700; font-size: 19px; letter-spacing: .14em; color: var(--ink); text-transform: lowercase; }
.fp-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.model { font-size: 11px; letter-spacing: .22em; color: var(--ink-soft); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand b { color: var(--vermilion); }
/* the lock: a small keyed toggle on the faceplate */
.lock-toggle {
  font-size: 14px; line-height: 1; cursor: pointer;
  background: linear-gradient(180deg, var(--shell-hi), #d3cab0);
  border: 1px solid var(--shell-edge); border-radius: 6px; padding: 4px 8px;
  box-shadow: 0 2px 0 var(--shell-lo), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .06s, box-shadow .06s;
}
.lock-toggle:active { transform: translateY(2px); box-shadow: 0 0 0 var(--shell-lo), inset 0 1px 3px rgba(0,0,0,.2); }
#device.is-locked .lock-toggle {
  background: linear-gradient(180deg, #f7be5a, var(--pr-amber));
  box-shadow: 0 1px 0 var(--shell-lo), inset 0 1px 3px rgba(120,70,10,.4);
}

/* ── LCD ── */
.lcd-bezel {
  margin: 0 6px 16px;
  background: linear-gradient(180deg, #6c6a60, #4f4d44);
  border-radius: 10px;
  padding: 9px;
  box-shadow: 0 2px 6px rgba(0,0,0,.4) inset, 0 1px 0 #7d7b70;
}
.lcd {
  /* the backlight leans toward the slotted card's color — screens can do that */
  background: linear-gradient(180deg, var(--accent-lcd) 0%, var(--accent-lcd-lo) 100%);
  transition: background 1s ease;
  border-radius: 5px;
  padding: 14px 16px 12px;
  position: relative; overflow: hidden;
  box-shadow: 0 0 0 1px #3a3a30 inset, 0 0 24px rgba(40,50,35,.25) inset;
}
/* LCD wakes up when a card slots: a quick contrast/opacity stutter (the mock's flicker) */
@keyframes flicker { 0%{opacity:.15; filter:contrast(.4);} 12%{opacity:.6;} 20%{opacity:.2;} 40%{opacity:.9; filter:contrast(1.1);} 55%{opacity:.5;} 100%{opacity:1; filter:contrast(1);} }
.lcd.waking { animation: flicker .5s steps(1,end) forwards; }
.lcd::before { /* glass reflection */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 42%;
  background: linear-gradient(180deg, rgba(255,255,255,.16), transparent);
  pointer-events: none;
}
.lcd-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.lcd-card-wrap { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.lcd-emblem { font-style: normal; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900;
  font-size: 14px; color: var(--lcd-dark); opacity: .85; flex: 0 0 auto;
  text-shadow: 0 1px 0 rgba(255,255,255,.12); }
.lcd-emblem:empty { display: none; }
.lcd-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; flex: 0 1 auto; }
/* TODAY — this card's tracked time today, a real segment counter */
.lcd-today { font-family: "Share Tech Mono", monospace; font-size: 10px; letter-spacing: .06em;
  color: var(--lcd-dark); opacity: .8; white-space: nowrap; }
.lcd-today:empty { display: none; }
.lcd-stars { font-size: 9px; letter-spacing: 2px; color: var(--lcd-dark); opacity: .8; white-space: nowrap; }
.lcd-stars:empty { display: none; }
.lcd-card { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: 15px;
  color: var(--lcd-dark); letter-spacing: .02em; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.lcd-card.empty { opacity: .55; font-weight: 500; }
.lcd-mode { font-size: 11px; letter-spacing: .18em; color: var(--lcd-dark); opacity: .75;
  font-weight: 600; text-transform: uppercase; flex: 0 1 auto; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.lcd-mode b { color: var(--vermilion-lo); }
.daycount { text-align: center; font-size: 11px; letter-spacing: .12em; color: var(--lcd-dark);
  opacity: .8; font-weight: 600; text-transform: uppercase; }
.daycount.passed { color: var(--vermilion-lo); opacity: 1; }
.readout {
  font-family: "Share Tech Mono", monospace;
  font-size: clamp(44px, 14vw, 64px); line-height: .92;
  color: var(--lcd-dark); letter-spacing: .02em;
  text-align: center; position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.12);
}
.readout .ghost { position: absolute; inset: 0; color: var(--lcd-ghost); opacity: .45; z-index: 0; }
.readout .live { position: relative; z-index: 1; }
.lcd-sub { text-align: center; font-family: "Saira Condensed", sans-serif; font-size: 12px;
  letter-spacing: .14em; color: var(--lcd-dark); opacity: .72; margin-top: 5px; font-weight: 600;
  text-transform: uppercase; min-height: 15px; }
#device.running .lcd-sub, #device.finished .lcd-sub { color: var(--vermilion-lo); opacity: 1; }
.lcd-ticks { display: flex; gap: 8px; margin-top: 9px; font-size: 10px; letter-spacing: .08em;
  color: var(--lcd-dark); justify-content: center; flex-wrap: wrap;
  font-weight: 600; }
.lcd-ticks span { opacity: .5; }
.lcd-ticks span.on { opacity: 1; color: var(--vermilion-lo); }

/* ── control deck ── */
.controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 6px 8px 4px; }
.bigbtn-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-bottom: 2px; }
.bigbtn {
  width: clamp(96px, 28vw, 116px); height: clamp(96px, 28vw, 116px); border-radius: 50%;
  border: none; cursor: pointer; position: relative;
  background: radial-gradient(circle at 38% 30%, var(--vermilion) 0%, var(--vermilion) 55%, var(--vermilion-lo) 100%);
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--card-accent, var(--shell-lo)) 62%, var(--shell-lo)),
    0 0 0 6px color-mix(in srgb, var(--card-accent, var(--shell-edge)) 35%, var(--shell-edge)),
    0 9px 0 var(--vermilion-lo),
    0 14px 18px rgba(120,30,15,.45),
    inset 0 4px 8px rgba(255,255,255,.35),
    inset 0 -6px 10px rgba(0,0,0,.25);
  transition: transform .07s ease, box-shadow .07s ease;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.bigbtn:active, #device.running .bigbtn {
  transform: translateY(6px);
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--card-accent, var(--shell-lo)) 62%, var(--shell-lo)),
    0 0 0 6px color-mix(in srgb, var(--card-accent, var(--shell-edge)) 35%, var(--shell-edge)),
    0 3px 0 var(--vermilion-lo),
    0 6px 10px rgba(120,30,15,.4),
    inset 0 4px 8px rgba(255,255,255,.3),
    inset 0 -6px 10px rgba(0,0,0,.3);
}
.bigbtn:disabled { cursor: default; filter: saturate(.25) brightness(1.05); }
/* the finished dome glows for attention — brightness only, geometry stays still */
#device.finished .bigbtn { animation: dome-glow 1.2s ease-in-out infinite; }
@keyframes dome-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.22) saturate(1.15); }
}
.bigbtn .glyph { font-size: clamp(30px, 9vw, 38px); filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.bigbtn-label { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--ink-soft); }
#device.finished .bigbtn-label { color: var(--vermilion-lo); }

/* side keys */
.side { display: flex; flex-direction: column; gap: 9px; }
.skey {
  font-family: "Saira Condensed", sans-serif; font-weight: 700; letter-spacing: .12em;
  font-size: 12px; text-transform: uppercase; color: var(--ink);
  background: linear-gradient(180deg, var(--shell-hi), #d3cab0);
  border: 1px solid var(--shell-edge); border-radius: 7px; padding: 8px 6px; cursor: pointer;
  box-shadow: 0 2px 0 var(--shell-lo), 0 3px 4px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .06s, box-shadow .06s;
}
.skey:active { transform: translateY(2px); box-shadow: 0 0 0 var(--shell-lo), inset 0 1px 3px rgba(0,0,0,.2); }
.skey:disabled { cursor: default; opacity: .45; box-shadow: 0 1px 0 var(--shell-lo); transform: none; }
.skey .jp { display: block; font-size: 9px; letter-spacing: .04em; color: var(--ink-soft); margin-top: 1px; }

/* ── timer rack: dark recessed instrument panel ── */
.rack-area { margin: 16px 6px 8px; }
.slot-label { font-size: 10px; letter-spacing: .22em; color: var(--ink-soft); font-weight: 600;
  margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.slot-label::before, .slot-label::after { content: ""; height: 1px; flex: 1;
  background: color-mix(in srgb, var(--card-accent, var(--shell-edge)) 55%, var(--shell-edge)); opacity: .6; }
.timer-row.add { justify-content: center; align-items: center; min-height: 52px;
  color: #8a856f; font-weight: 400; letter-spacing: .18em;
  font-size: 10px; text-transform: uppercase;
  background: repeating-linear-gradient(45deg, #232219 0 6px, #2a2920 6px 12px);
  border-style: dashed; border-color: #3a392f; }
.timer-row.add:hover { color: #b9b3a0; background: repeating-linear-gradient(45deg, #232219 0 6px, #2a2920 6px 12px); }
.rack-count { flex: 0 0 auto; font-family: "Share Tech Mono", monospace; font-size: 10px;
  color: var(--ink-soft); letter-spacing: .05em; }
.rack {
  list-style: none;
  --rack-tx: none;
  background:
    var(--rack-tx),
    linear-gradient(180deg,
      color-mix(in srgb, #25241e 78%, var(--card-accent, #25241e)),
      color-mix(in srgb, #1b1a15 80%, var(--card-accent, #1b1a15)));
  border: 1px solid #100f0c; border-radius: 7px; padding: 6px;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.7), 0 1px 0 var(--shell-hi);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;   /* four sockets, 2x2 */
  transition: background 1s ease;
}
/* the slotted card's TEXTURE is milled into the panel */
#device[data-tx="cosmos"] .rack, #device[data-tx="cosmos"] .rack-editor { --rack-tx: var(--tx-cosmos); }
#device[data-tx="waves"] .rack, #device[data-tx="waves"] .rack-editor { --rack-tx: var(--tx-waves); background-size: 48px 24px, 48px 24px, 48px 24px, auto; }
#device[data-tx="rays"] .rack, #device[data-tx="rays"] .rack-editor { --rack-tx: var(--tx-rays); }
#device[data-tx="pin"] .rack, #device[data-tx="pin"] .rack-editor { --rack-tx: var(--tx-pin); }
#device[data-tx="ichimatsu"] .rack, #device[data-tx="ichimatsu"] .rack-editor { --rack-tx: var(--tx-ichimatsu); background-size: 30px 30px, auto; }
#device[data-tx="lattice"] .rack, #device[data-tx="lattice"] .rack-editor { --rack-tx: var(--tx-lattice); }
#device[data-tx="dots"] .rack, #device[data-tx="dots"] .rack-editor { --rack-tx: var(--tx-dots); background-size: 17px 17px, auto; }
.timer-row {
  display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0;
  font-family: "Share Tech Mono", monospace; text-align: left;
  background: linear-gradient(180deg, #34332b, #2a2922);
  border: 1px solid #14130f; border-radius: 4px; padding: 7px 9px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: background .1s;
}
.tc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tc-bot { display: flex; align-items: center; gap: 6px; min-width: 0; padding-left: 16px; }
.tc-bot .t-cfg { margin-left: 0; margin-right: auto; }
/* a bay with nothing in it — hatched, inert */
.timer-row.socket { cursor: default; min-height: 52px; position: relative;
  background: repeating-linear-gradient(45deg, #1f1e18 0 6px, #24231c 6px 12px);
  border-style: solid; border-color: #14130f;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.55); }
.timer-row.socket::after { content: attr(data-emblem); position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900; font-size: 24px;
  color: rgba(255,250,225,.05);
  text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 -1px 0 rgba(255,255,255,.04); }
.timer-row.socket:hover { background: repeating-linear-gradient(45deg, #1f1e18 0 6px, #24231c 6px 12px); }
.timer-row:hover { background: linear-gradient(180deg, #3c3b32, #302f27); }
.t-led { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: #4a3f2e; box-shadow: inset 0 0 2px #000; }
.t-nm { font-size: 13px; color: #b9b3a0; letter-spacing: .05em; text-transform: uppercase;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-cfg { margin-left: auto; font-size: 11px; color: #7e7a6a; letter-spacing: .04em; flex: 0 0 auto; }
.t-live { font-size: 10px; flex: 0 0 auto; }
.t-live.run { color: var(--vermilion); }
.t-live.held { color: #b9a86e; }
.timer-row.active { background: linear-gradient(180deg,
    color-mix(in srgb, var(--card-accent, #45342c) 34%, #221712),
    color-mix(in srgb, var(--card-accent, #38291f) 30%, #191009));
  box-shadow: inset 0 0 0 1px var(--vermilion-lo), inset 0 0 14px rgba(232,71,42,.25); }
.timer-row.active .t-led { background: radial-gradient(circle at 35% 30%, #ff8a6e, var(--vermilion));
  box-shadow: 0 0 7px var(--vermilion), 0 0 2px #fff inset; }
.timer-row.active .t-nm { color: #ffd9cd; }
.timer-row.active .t-cfg { color: #ffb09c; }
.t-del { flex: 0 0 auto; background: transparent; border: none; color: #7e7a6a;
  font-size: 12px; cursor: pointer; padding: 2px 4px; border-radius: 3px; }
.t-del:hover { color: #d8d2c1; background: rgba(255,255,255,.06); }
.timers-empty { font-family: "Share Tech Mono", monospace; font-size: 11px; color: #8a856f;
  letter-spacing: .1em; text-align: center; padding: 12px 6px; list-style: none;
  background: repeating-linear-gradient(45deg, #232219 0 6px, #2a2920 6px 12px);
  border: 1px dashed #3a392f; border-radius: 4px; }

/* ── the PROGRAMMING PANEL: the plate's edit mode. Four quadrant cells, boxed
   machine keys (the scheme Zeo picked), on the card-tinted, card-textured plate.
   Height pinned to the measured grid so the machine never changes size. ── */
.rack-editor {
  --rack-tx: none;
  background:
    var(--rack-tx),
    linear-gradient(180deg,
      color-mix(in srgb, #25241e 78%, var(--card-accent, #25241e)),
      color-mix(in srgb, #1b1a15 80%, var(--card-accent, #1b1a15)));
  transition: background 1s ease;
  border: 1px solid #100f0c; border-radius: 7px; padding: 6px;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.7), 0 1px 0 var(--shell-hi);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px;
  animation: re-in .18s ease;
}
@keyframes re-in { from { opacity: .4; } }
.rack-editor[hidden] { display: none; }
.rack-area.editing .rack { display: none; }
/* a quadrant = a socket */
.re-cell { min-width: 0; min-height: 0; border-radius: 4px; border: 1px solid #14130f;
  background: linear-gradient(180deg, #34332b, #2a2922);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 6px; }
.re-name { flex-direction: column; align-items: stretch; justify-content: center; gap: 2px;
  font-family: "Saira Condensed", sans-serif; font-size: 8px; font-weight: 700;
  letter-spacing: .18em; color: #8a856f; cursor: text; }
.re-name input { width: 100%; min-width: 0; font-family: "Share Tech Mono", monospace; font-size: 13px;
  color: #ffd9cd; background: #14130f; border: 1px solid #0c0b08; border-radius: 3px;
  padding: 3px 6px; box-shadow: inset 0 2px 4px rgba(0,0,0,.6); }
.re-name input:focus { outline: 1px solid var(--vermilion-lo); }
.re-name input::placeholder { color: #6a6555; }
.re-modes { flex-direction: column; align-items: stretch; }
.re-latch { flex: 1; font-family: "Share Tech Mono", monospace; font-size: 9px; letter-spacing: .06em;
  color: #b9b3a0; text-transform: uppercase; cursor: pointer;
  background: #201f19; border: 1px solid #14130f; border-radius: 3px; padding: 2px 4px; }
.re-latch.on { background: linear-gradient(180deg, #45342c, #38291f); color: #ffd9cd;
  box-shadow: inset 0 0 0 1px var(--vermilion-lo), inset 0 0 10px rgba(232,71,42,.25); }
.re-steppers { transition: opacity .2s; }
.re-steppers.disabled { opacity: .35; pointer-events: none; }
.re-colon { font-family: "Share Tech Mono", monospace; color: #6a6555; font-size: 13px; }
.re-unit { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.re-unit input { width: 38px; text-align: center; font-family: "Share Tech Mono", monospace;
  font-size: 14px; color: #ffd9cd; background: #14130f; border: 1px solid #0c0b08;
  border-radius: 3px; padding: 1px 0; box-shadow: inset 0 2px 4px rgba(0,0,0,.6);
  -moz-appearance: textfield; appearance: textfield; }
.re-unit input::-webkit-outer-spin-button, .re-unit input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0; }
.re-unit input:focus { outline: 1px solid var(--vermilion-lo); }
.re-step { width: 38px; font-size: 7px; line-height: 1; color: #b9b3a0; cursor: pointer;
  background: #201f19; border: 1px solid #14130f; border-radius: 3px; padding: 2px 0;
  touch-action: none; }
.re-step:active { box-shadow: inset 0 2px 3px rgba(0,0,0,.55); }
.re-actions { flex-direction: column; align-items: stretch; }
.re-key { font-family: "Share Tech Mono", monospace; font-size: 9px; letter-spacing: .05em;
  color: #b9b3a0; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  background: #201f19; border: 1px solid #14130f; border-radius: 3px; padding: 3px 6px;
  overflow: hidden; text-overflow: ellipsis; }
.re-key:active { box-shadow: inset 0 2px 3px rgba(0,0,0,.55); }
.re-key.alarm { flex: 1; }
.re-act-row { display: flex; gap: 4px; }
.re-act-row .re-key { flex: 1; }
.re-key.save { background: linear-gradient(180deg, #b8351d, #8f2916); color: #ffd9cd;
  border-color: #5e1a0d; }

/* the CARD GATE in the chassis bottom: a labeled tab where 2xAAA used to be.
   Machine furniture, not a mini-card: darkened card color, silkscreen name, ⏏. */
.pull-tab {
  border: none; padding: 3px 10px 3px 8px; border-radius: 5px;
  display: inline-flex; align-items: center; gap: 7px; max-width: 60%;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--card-accent, var(--shell-lo)) 72%, #241c14),
    color-mix(in srgb, var(--card-accent, var(--shell-lo)) 62%, #1a1410));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(0,0,0,.35),
    0 2px 3px rgba(0,0,0,.3);
  cursor: grab; touch-action: none;
  transition: transform .15s ease;
}
.pull-tab:active { cursor: grabbing; }
.pull-tab[hidden] { display: none; }
.pull-tab i { font-style: normal; }
#pt-emblem { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900; font-size: 11px;
  line-height: 1; color: #fff6ec; text-shadow: 0 1px 1px rgba(0,0,0,.6); }
#pt-name { font-family: "Saira Condensed", sans-serif; font-weight: 700; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: #fff6ec;
  text-shadow: 0 1px 1px rgba(0,0,0,.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pt-eject { font-size: 9px; color: rgba(255,246,236,.75); flex: 0 0 auto; }
#fs-batt[hidden] { display: none; }

.footstamp { display: flex; justify-content: space-between; align-items: center; margin: 10px 8px 2px;
  min-height: 22px;
  font-size: 9px; letter-spacing: .14em; color: var(--ink-soft); font-weight: 600; }
.footstamp > span { opacity: .7; }

/* ═══════════════ THE BINDER ═══════════════ */
/* the frosted polypropylene sheet, one horizontal scroll of welded pockets */
.binder__page {
  border-radius: 9px 9px 0 0;
  padding: 5px 0 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  background: linear-gradient(180deg, rgba(236,233,224,.66), rgba(222,219,208,.54));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 12px 24px -10px rgba(40,34,18,.4);
  scrollbar-width: none;
}
@supports (backdrop-filter: blur(1px)) {
  .binder__page { backdrop-filter: saturate(1.05) blur(.5px); }
}
.binder__page::-webkit-scrollbar { display: none; }
.binder__row { display: flex; list-style: none; min-width: 100%; padding: 0 14px; gap: 0;
  perspective: 1100px; }
.binder__row.cards--flipping { overflow: visible; }   /* one shared vanishing point down the page */

/* POCKET — a light frosted-PP welded sleeve, card sealed inside. Bright weld
   perimeter + a repeating vertical seam so neighbours share one welded line. */
.pocket {
  position: relative; flex: 0 0 auto; width: min(262px, 80vw); padding: 6px; border-radius: 8px;
  scroll-snap-align: start;
  isolation: isolate;   /* keep the film/tag/action z-indexes INSIDE the pocket */
  content-visibility: auto; contain-intrinsic-size: 262px 225px;
  background: linear-gradient(160deg, rgba(255,255,255,.26), rgba(255,255,255,.10));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.5),
    inset 0 0 0 1.5px rgba(40,34,20,.10),
    inset -1px 0 0 rgba(255,255,255,.55),
    inset -2px 0 0 rgba(40,34,20,.18),
    inset 1px 0 0 rgba(255,255,255,.35);
}
/* PP film over the card — a faint cloudy veil + ONE hero specular streak, so you see
   the card THROUGH plastic — a soft broad sheen, kept off the title line. */
.pocket::before { content: ""; position: absolute; inset: 6px; border-radius: 6px; z-index: 6; pointer-events: none;
  background:
    linear-gradient(74deg, transparent 0 58%, rgba(255,255,255,.09) 68%, rgba(255,255,255,.13) 74%, rgba(255,255,255,.05) 80%, transparent 90%),
    radial-gradient(120% 60% at 50% -12%, rgba(255,255,255,.22), transparent 60%),
    rgba(255,255,255,.07);
  -webkit-mask: radial-gradient(circle 12px at 78% 0, transparent 12px, #000 13px);
          mask: radial-gradient(circle 12px at 78% 0, transparent 12px, #000 13px); }
.pocket__ring { position: absolute; inset: 4px; border-radius: 7px; z-index: 3; pointer-events: none;
  background: rgba(255,255,255,.08);
  -webkit-mask: radial-gradient(closest-side, transparent 70%, #000 86%); mask: radial-gradient(closest-side, transparent 70%, #000 86%); }
.pocket__weld-b { position: absolute; left: 6px; right: 6px; bottom: 5px; height: 3px; z-index: 4; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,.55), rgba(40,34,20,.18)); filter: blur(.4px); border-radius: 2px; }
.pocket__lip { position: absolute; left: 6px; right: 6px; top: 5px; height: 8px; z-index: 6; pointer-events: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 0 rgba(40,34,20,.12) inset;
  -webkit-mask: radial-gradient(circle 11px at 78% -2px, transparent 11px, #000 12px);
          mask: radial-gradient(circle 11px at 78% -2px, transparent 11px, #000 12px); }
/* the pocket's top-center tab: SLOT inserts the card; the slotted pocket wears IN USE */
.pocket-tab {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 7;
  font-family: "Zen Kaku Gothic New", sans-serif; font-size: 8px; font-weight: 700;
  letter-spacing: .1em; border: none; cursor: pointer; white-space: nowrap;
  color: #3a2a12; background: linear-gradient(180deg, #f7be5a, var(--pr-amber));
  border-radius: 0 0 4px 4px; padding: 2px 9px; box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.pocket.in-use .pocket-tab { background: var(--vermilion); color: #fff6ec; cursor: default; }

/* ── THE CARD: a die-cut Bikkuriman sticker. Tap = flip; drag UP = carry it to the
   device. .card is the positioning/drag wrapper (portaled to <body> mid-gesture);
   .card-3d rotates. All states from the mock. ── */
.card { position: relative; cursor: grab; touch-action: pan-x;   /* horizontal swipe scrolls the bench; vertical drag picks the card up */
  transition: transform .14s ease; }
.card:hover { transform: translateY(-4px) rotate(-.5deg) scale(1.015); }
.card:active { cursor: grabbing; }
/* LIFTED OUT of the pocket — position:fixed so it escapes the scroller's clip */
.card.airborne { position: fixed; z-index: 300; margin: 0; cursor: default;
  transition: top .22s cubic-bezier(.45,.05,.55,.95); }
.card.airborne:hover, .card.flipping:hover { transform: none; }
/* RESTING flipped — back inside its pocket (native scroll content), raised z + float shadow */
.card.resting { z-index: 200; cursor: default; }
.card.resting .card-3d, .card.airborne .card-3d { box-shadow:
  0 22px 34px -10px rgba(40,34,18,.6),
  inset 0 1px 0 rgba(255,255,255,.6); }
.card:not(.airborne):hover .card-3d { box-shadow:
  0 16px 28px -6px rgba(60,52,30,.55),
  inset 0 1px 0 rgba(255,255,255,.6); }
/* being pointer-dragged: a fixed follower under the finger */
.card.dragging { position: fixed; z-index: 400; margin: 0; pointer-events: none; cursor: grabbing;
  transform: rotate(-2deg) scale(1.04); transition: none; }
.card.dragging .card-3d { box-shadow:
  0 0 0 1.5px color-mix(in srgb, var(--cat) 60%, #000),
  0 26px 40px -10px rgba(40,34,18,.6),
  inset 0 1px 0 rgba(255,255,255,.6); }
/* its card is out — hold the sleeve open so the bench doesn't collapse */
.pocket.bn-lent { min-height: 224px; }

.card-3d {
  --cat: var(--olive);
  --cat-capped: var(--cat);   /* fallback: raw color */
  position: relative; width: 100%; transform-style: preserve-3d;
  transition: transform 300ms cubic-bezier(.45,.05,.55,.95);
  background: var(--cat);                      /* the colored die-cut frame rotates WITH the faces */
  border: none; border-radius: 14px; padding: 6.5px;   /* the retired white border's 2.5px goes to the frame — face size unchanged */
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--cat) 60%, #000),
    0 8px 18px -5px rgba(60,52,30,.5),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.card.flipped .card-3d { transform: rotateY(180deg); }
/* any user color reads as a deep jewel: cap the base lightness (frame/emblem keep the raw color) */
@supports (color: oklch(from red l c h)) {
  .card-3d { --cat-capped: oklch(from var(--cat) min(l, 0.55) c h); }
}
.pocket.in-use .card-3d { box-shadow:
  0 0 0 1.5px color-mix(in srgb, var(--cat) 60%, #000),
  0 0 0 3px var(--vermilion),
  0 8px 18px -5px rgba(60,52,30,.5); }
.card-face.front, .card-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 8px; }
/* FRONT: deep jewel base + cosmic sparkle + inner light rays, foil over it */
.card-face.front {
  --tx: linear-gradient(transparent, transparent);   /* safety: a missing texture class must not void the background */
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; padding: 9px 11px; min-height: 200px;
  background: var(--tx), linear-gradient(158deg, color-mix(in srgb, var(--cat-capped) 60%, #0d0b1a) 0%, color-mix(in srgb, var(--cat-capped) 80%, #07060f) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 -10px 18px rgba(0,0,0,.35);
}
:root {
  --tx-cosmos:
    radial-gradient(2px 2px at 22% 26%, rgba(255,247,210,.95), transparent),
    radial-gradient(1.5px 1.5px at 71% 20%, rgba(255,255,255,.9), transparent),
    radial-gradient(2px 2px at 85% 60%, rgba(255,240,180,.8), transparent),
    radial-gradient(1.5px 1.5px at 33% 70%, rgba(255,247,210,.8), transparent),
    repeating-conic-gradient(from 0deg at 50% 38%, rgba(255,250,225,.14) 0 6deg, transparent 6deg 14deg);
  --tx-waves:
    radial-gradient(circle at 50% 125%, transparent 42%, rgba(255,250,225,.30) 43% 47%, transparent 48% 58%, rgba(255,250,225,.20) 59% 63%, transparent 64%),
    radial-gradient(circle at 0% 125%, transparent 42%, rgba(255,250,225,.30) 43% 47%, transparent 48% 58%, rgba(255,250,225,.20) 59% 63%, transparent 64%),
    radial-gradient(circle at 100% 125%, transparent 42%, rgba(255,250,225,.30) 43% 47%, transparent 48% 58%, rgba(255,250,225,.20) 59% 63%, transparent 64%);
  --tx-rays:
    radial-gradient(circle at 26% 45%, rgba(255,245,205,.30) 0%, transparent 34%),
    repeating-conic-gradient(from 0deg at 26% 45%, rgba(255,250,225,.24) 0 7deg, transparent 7deg 16deg);
  --tx-pin: repeating-linear-gradient(115deg, rgba(255,255,255,.16) 0 1px, transparent 1px 7px);
  --tx-ichimatsu: repeating-conic-gradient(rgba(255,250,225,.14) 0 90deg, transparent 90deg 180deg);
  --tx-lattice:
    repeating-linear-gradient(45deg, rgba(255,250,225,.15) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(-45deg, rgba(255,250,225,.15) 0 1px, transparent 1px 12px);
  --tx-dots: radial-gradient(2.5px at 50% 50%, rgba(255,250,225,.30), transparent 65%);
}
/* the texture rides ABOVE the foil too — embossed into it, not buried under it */
.card-face.front .tx { position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
  z-index: 2; background: var(--tx); mix-blend-mode: overlay; }
/* ── base TEXTURES under the foil (picked per card; cosmos = the original) ── */
.tx-cosmos .card-face.front { --tx: var(--tx-cosmos); }
/* seigaiha — overlapping wave scallops */
.tx-waves .card-face.front { --tx: var(--tx-waves);
  --tx-size: 48px 24px;
  background-size: var(--tx-size), var(--tx-size), var(--tx-size), auto; }
.tx-waves .card-face.front .tx { background-size: var(--tx-size); }
/* rising-sun rays from behind the emblem */
.tx-rays .card-face.front { --tx: var(--tx-rays); }
/* fine pinstripe suit cloth */
.tx-pin .card-face.front { --tx: var(--tx-pin); }
/* ichimatsu — the checker */
.tx-ichimatsu .card-face.front { --tx: var(--tx-ichimatsu); }
.tx-ichimatsu .card-face.front, .tx-ichimatsu .card-face.front .tx { background-size: 30px 30px, auto; }
/* kagome — diagonal woven lattice */
.tx-lattice .card-face.front { --tx: var(--tx-lattice); }
/* shibori dots */
.tx-dots .card-face.front { --tx: var(--tx-dots); }
.tx-dots .card-face.front, .tx-dots .card-face.front .tx { background-size: 17px 17px, auto; }
/* gold filigree inner frame */
.card-face.front::before {
  content: ""; position: absolute; inset: 3px; border-radius: 6px; pointer-events: none; z-index: 3;
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, #fff1c0, #e3bd5c 25%, #a9802a 50%, #e8c878 75%, #fff1c0) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  box-shadow: inset 0 0 6px rgba(180,140,40,.4);
}
/* (the card carries no baked-in glare — gloss belongs to the pocket's PP film;
   a sticker out of its sleeve is matte-bright, not permanently streaked) */
/* THE FOIL: holographic field, always faintly on. .foil-* on the pocket picks the hue. */
.card-3d .foil { position: absolute; inset: 0; border-radius: 9px; pointer-events: none; z-index: 1;
  mix-blend-mode: screen; opacity: .86; background-position: 0% 0%;
  /* slow glides, no loops: sheen drifts in over seconds and drifts back out — never snaps,
     never strobes (a fast full-spectrum cycle is a photosensitivity hazard) */
  transition: opacity .5s ease, background-position 4s cubic-bezier(.25,.1,.25,1), filter 1.2s ease; }
.card-3d .foil::after { content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
  background: repeating-linear-gradient(70deg, rgba(255,255,255,.16) 0 2px, transparent 2px 5px);
  mix-blend-mode: screen; }
.card:hover .foil { opacity: 1; }
/* etched-foil facet angles: registered so each transitions INDEPENDENTLY —
   different durations + delays = the light reaching each etched region at
   a different moment (browsers without @property fall back to static + glow) */
@property --f1 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --f2 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --f3 { syntax: "<number>"; inherits: false; initial-value: 0; }

/* ── the curated foils: each a distinct OPTICAL STRUCTURE, not a hue swap ──
   (legacy values prism/emerald/violet/sunset alias to the nearest structure) */
/* HOLO — the classic smooth rainbow holofoil */
.foil-holo .foil, .foil-prism .foil, .foil-violet .foil, .foil-emerald .foil {
  background: conic-gradient(from 30deg, #ff6ec7, #ffe96e, #6effb0, #6ec8ff, #c98bff, #ff6ec7);
  background-size: 200% 200%; filter: saturate(1.4); }
.foil-holo:hover .foil, .foil-prism:hover .foil, .foil-violet:hover .foil, .foil-emerald:hover .foil {
  background-position: 120% 120%; }
/* GOLD — gold leaf (the one place a color IS the material) */
.foil-gold .foil, .foil-sunset .foil {
  background: linear-gradient(115deg, #fff2c0 20%, #e9b94a 40%, #b8862a 50%, #ffe9a8 60%, #c9a23e 80%);
  background-size: 250% 250%; }
.foil-gold:hover .foil, .foil-sunset:hover .foil { background-position: 130% 0%; }
/* CHROME — mirror silver, a different metal */
.foil-chrome .foil { background: linear-gradient(105deg, #eef3f8 8%, #9fb2c4 26%, #5c6f82 42%, #dfe9f2 55%, #8fa4b8 70%, #f4f8fc 88%);
  background-size: 250% 250%; filter: saturate(.9); }
.foil-chrome:hover .foil { background-position: 130% 0%; }
/* AURORA — the blurred northern-lights curtain */
.foil-aurora .foil { background: conic-gradient(from 200deg at 50% 120%, #2affd5, #4f7cff 25%, #b04fff 45%, #2affd5 70%, #6dffb0);
  background-size: 200% 200%; filter: blur(3px) saturate(1.25); }
.foil-aurora:hover .foil { background-position: 130% 130%; transition-duration: .5s, 7s, 1.2s;
  filter: blur(3px) saturate(1.45) brightness(1.1); }
/* CRACKED — the shards are FROZEN; the light ripples across them, one facet
   family at a time (per-facet brightness on independent clocks) */
.foil-cracked .foil { background:
    conic-gradient(from 20deg at 30% 25%, rgb(110 200 255 / calc(.5 + .48 * var(--f1))) 0 40deg, transparent 40deg 90deg, rgb(255 110 199 / calc(.4 + .45 * var(--f2))) 90deg 122deg, transparent 122deg),
    conic-gradient(from 200deg at 72% 58%, rgb(110 255 176 / calc(.42 + .46 * var(--f2))) 0 48deg, transparent 48deg 108deg, rgb(255 233 110 / calc(.42 + .46 * var(--f3))) 108deg 150deg, transparent 150deg),
    conic-gradient(from 90deg at 52% 88%, rgb(201 139 255 / calc(.42 + .46 * var(--f3))) 0 34deg, transparent 34deg 98deg, rgb(110 200 255 / calc(.38 + .42 * var(--f1))) 98deg 134deg, transparent 134deg),
    linear-gradient(120deg, #35507a, #6a3a5f);
  filter: saturate(1.3);
  transition: opacity .5s ease, filter 1.4s ease,
    --f1 .9s ease, --f2 1.3s ease .3s, --f3 1.2s ease .6s; }
.foil-cracked:hover .foil { --f1: 1; --f2: 1; --f3: 1; filter: saturate(1.5) brightness(1.12); }
/* GALAXY — two tempos: the star dust flashes fast, the nebula swells slow */
.foil-galaxy .foil { background:
    radial-gradient(40% 32% at 28% 62%, rgba(120,80,255,.75), transparent 70%),
    radial-gradient(36% 30% at 76% 24%, rgba(255,80,180,.6), transparent 70%),
    radial-gradient(46% 40% at 64% 82%, rgba(60,180,255,.6), transparent 70%),
    #150a2a;
  transition: opacity .5s ease, filter 2.6s ease; }
.foil-galaxy .foil::after { background:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent),
    radial-gradient(1px 1px at 34% 64%, #ffe9ff, transparent),
    radial-gradient(1.5px 1.5px at 56% 18%, #e0f4ff, transparent),
    radial-gradient(1px 1px at 71% 47%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 88% 74%, #ffeecc, transparent),
    radial-gradient(1px 1px at 23% 86%, #e8ffe8, transparent),
    radial-gradient(1.5px 1.5px at 66% 90%, #fff, transparent),
    radial-gradient(1px 1px at 92% 12%, #ffd9f2, transparent);
  opacity: .7; transition: opacity .7s ease .1s, filter .8s ease .1s; }
.foil-galaxy:hover .foil { filter: brightness(1.22) saturate(1.25); }
.foil-galaxy:hover .foil::after { opacity: 1; filter: brightness(1.6); }
/* REFRACTOR — fine prismatic grating, lines FIXED; the spectrum flows through
   them via a slow hue rotation (what tilting a refractor actually does) */
.foil-refractor .foil { background:
    repeating-linear-gradient(90deg, #ff5e7e 0 5px, #ffd25e 5px 10px, #5effa6 10px 15px, #5ec8ff 15px 20px, #c98bff 20px 25px);
  filter: blur(1px) saturate(1.15) hue-rotate(0deg);
  transition: opacity .5s ease, filter 4.5s cubic-bezier(.25,.1,.25,1); }
.foil-refractor:hover .foil { filter: blur(1px) saturate(1.3) hue-rotate(300deg); }

/* TOP ROW: rarity ・ series ・ No. on an opaque cream plate above the foil */
.card-rank { display: flex; align-items: center; gap: 8px; position: relative; z-index: 4;
  background: rgba(250,246,234,.93); border: 1px solid color-mix(in srgb, #caa23e 60%, transparent);
  border-radius: 5px; padding: 2px 7px; }
.rarity { font-size: 12px; letter-spacing: 1px;
  background: linear-gradient(#fff7d6, #e3bd5c 45%, #a9802a); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: 0 1px 0 rgba(0,0,0,.2); }
.card-series { font-family: "Share Tech Mono", monospace; font-size: 8px; letter-spacing: .1em; color: #3a2a12; font-weight: 700;
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%); border: none;
  background: linear-gradient(180deg, #fff3c4, #e7b84e 45%, #9a6a16); padding: 2px 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.4);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-no { margin-left: auto; font-family: "Share Tech Mono", monospace; display: flex; align-items: baseline; gap: 3px; }
.card-no .l { font-size: 8px; letter-spacing: .1em; color: var(--ink-soft); }
.card-no .n { font-size: 15px; font-weight: 700;
  background: linear-gradient(#fff7d6, #caa23e 55%, #8a6418); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; }

/* ART ZONE: haloed emblem medallion + chrome-gold stamped name */
.card-art { flex: 1 1 auto; display: flex; align-items: center; gap: 14px; padding: 8px 10px;
  border-radius: 8px; position: relative; isolation: isolate; z-index: 2; }
.card-art::before {
  content: ""; position: absolute; left: 42px; top: 50%; width: 104px; height: 104px;
  transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle, rgba(255,245,205,.92) 0%, rgba(255,238,175,.35) 28%, transparent 56%),
    repeating-conic-gradient(from 0deg, rgba(255,247,210,.8) 0 4deg, transparent 4deg 9deg);
  -webkit-mask: radial-gradient(circle, #000 34%, transparent 70%);
          mask: radial-gradient(circle, #000 34%, transparent 70%);
}
.card-emblem { width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; position: relative; z-index: 1;
  line-height: 1; text-align: center;
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900; font-size: 30px;
  color: #fff6ec; text-shadow: 0 0 1px #fff, 0 1px 0 #caa23e, 0 2px 3px rgba(0,0,0,.45);
  background: radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--cat) 25%, #fff), color-mix(in srgb, var(--cat) 70%, #fff));
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,.3), inset 0 2px 3px rgba(255,255,255,.6),
    0 0 0 2.5px #fdfaf0, 0 0 0 4px #caa23e, 0 0 0 5px #8a6418, 0 2px 6px rgba(0,0,0,.4);
}
.card-emblem::after { content: "\2726"; position: absolute; top: -3px; right: -5px; font-size: 13px;
  color: #ffe9a8; text-shadow: 0 0 5px #e3bd5c; z-index: 2; }
.card-id { min-width: 0; position: relative; z-index: 1; }
.card-nm { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900; font-size: 21px; line-height: 1.25;
  background: linear-gradient(#ffffff, #ffe9a8 45%, #caa23e 56%, #fff7d6);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px #241806; paint-order: stroke fill;
  /* the keyline IS the readability: a tight dark halo hugging the stroke,
     embossed relief, warm bloom — ink printed with the stamp, no scrim */
  text-shadow: 0 0 2px rgba(18,10,0,.95), 0 -1px 0 rgba(255,255,255,.28),
    0 1px 0 rgba(0,0,0,.6), 0 2px 3px rgba(0,0,0,.5), 0 0 7px rgba(255,230,150,.4);
  transform: skewX(-4deg); transform-origin: left center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  padding: 1px 3px 2px 1px; margin: -1px -3px -2px -1px; }
.card-cat { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #ffe7b0; font-weight: 700; margin-top: 4px;
  text-shadow: 0 0 2px rgba(0,0,0,.95), 0 1px 1px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* FOOT: timer chips + total on an opaque cream plate */
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  position: relative; z-index: 4; background: rgba(250,246,234,.93);
  border: 1px solid color-mix(in srgb, #caa23e 50%, transparent); border-radius: 5px; padding: 3px 7px; }
.card-timers { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.tdot { font-family: "Share Tech Mono", monospace; font-size: 8px; letter-spacing: .04em; color: #6a4a16; font-weight: 700;
  background: #fff6e0; border-radius: 3px; padding: 2px 5px;
  border: 1px solid color-mix(in srgb, #caa23e 55%, transparent); white-space: nowrap; }
.card-total { font-family: "Share Tech Mono", monospace; font-size: 14px; color: var(--ink); flex: 0 0 auto; }
/* barcode: ink bars printed on their own cream plate (bars ON TOP — mock review D2) */
.barcode { height: 11px; opacity: .6; position: relative; z-index: 4; border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 2px, var(--ink) 2px 4px, transparent 4px 7px, var(--ink) 7px 8px, transparent 8px 12px, var(--ink) 12px 13px, transparent 13px 16px),
    linear-gradient(rgba(250,246,234,.93), rgba(250,246,234,.93)); }

/* ── THE MATTE BACK: pale newsprint, one-ink offset print, this card's stats ── */
.card-back {
  position: absolute; inset: 6.5px; transform: rotateY(180deg) translateZ(.01px);
  background:
    radial-gradient(120% 90% at 50% 40%, #f1ead9, #e6dcc4 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0 1px, transparent 1px 3px);
  color: var(--ink);
  font-family: "Share Tech Mono", monospace;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), inset 0 0 7px rgba(0,0,0,.09);
}
.card-back::after { content: ""; position: absolute; inset: 4px;
  border: 1px solid color-mix(in srgb, var(--cat) 30%, rgba(120,100,60,.4)); border-radius: 7px; pointer-events: none; }
.cb-id { display: flex; justify-content: space-between; align-items: baseline; font-size: 9px; letter-spacing: .04em;
  color: var(--ink); padding-bottom: 3px; border-bottom: 1px solid color-mix(in srgb, var(--cat) 45%, transparent); }
.cb-id .cb-rank { color: color-mix(in srgb, var(--cat) 55%, var(--ink)); font-weight: 700; letter-spacing: .1em; }
.cb-name-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.cb-name { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; font-size: 15px; color: var(--ink); line-height: 1.25;
  text-shadow: 0 0 .4px currentColor; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cb-seal { flex: 0 0 auto; padding: 1px 5px; border-radius: 3px; font-family: "Share Tech Mono", monospace; font-weight: 700;
  font-size: 7px; letter-spacing: .1em; line-height: 1.4;
  color: var(--vermilion); border: 1.5px solid var(--vermilion); opacity: .82; transform: rotate(-3deg);
  text-shadow: 0 0 .5px var(--vermilion); }
.cb-ledger { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-height: 0; }
.cb-row, .cb-trow { display: flex; align-items: baseline; font-size: 9.5px; line-height: 1.25; color: var(--ink); }
.cb-row > span, .cb-trow > span { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .05em; }
.cb-row > i, .cb-trow > i { flex: 1 1 6px; min-width: 6px; border-bottom: 1px dotted rgba(0,0,0,.35); margin: 0 4px 2px; height: 0; }
.cb-row > b, .cb-trow > b { flex: 0 0 auto; font-weight: 700; font-size: 10.5px; text-align: right; }
.cb-rule { border-top: 1px solid color-mix(in srgb, var(--cat) 35%, rgba(120,100,60,.35)); margin: 1px 0; }
.cb-roster { display: flex; flex-direction: column; gap: 0; overflow: hidden; }
.cb-trow { font-size: 9px; color: var(--ink-soft); }
.cb-trow > b { font-size: 9.5px; color: var(--ink); }
.cb-foot { margin-top: 2px; }
.cb-tick { height: 4px; background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 3px); opacity: .4; border-radius: 1px; }
.cb-reg { display: flex; justify-content: space-between; align-items: center; font-size: 7px; color: var(--ink-soft); margin-top: 2px; letter-spacing: .03em; }
.cb-chop { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--vermilion); color: var(--vermilion); opacity: .7;
  display: flex; align-items: center; justify-content: center; font-size: 8px; transform: rotate(4deg); }

/* pocket-corner keys for edit/delete */
.card-actions { position: absolute; top: 10px; right: 10px; z-index: 7; display: flex; gap: 4px; }
.card-edit, .card-del {
  font-size: 10px; line-height: 1; cursor: pointer; color: var(--ink-soft);
  background: rgba(250,246,234,.9); border: 1px solid var(--shell-edge);
  border-radius: 4px; padding: 3px 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.card-edit:hover, .card-del:hover { color: var(--ink); }

/* EMPTY welded sleeve + the "+" ADD sleeve (same weld idiom, no card) */
.pocket--empty, .pocket--add { min-height: 224px; }
.pocket--add { cursor: pointer; }
.pocket--add::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center;
  font: 300 34px/1 "Saira Condensed", sans-serif; color: rgba(40,34,20,.28); pointer-events: none; }
.empty-deck { list-style: none; font-family: "Share Tech Mono", monospace; font-size: 11px;
  letter-spacing: .08em; color: var(--ink-soft); padding: 34px 16px; text-align: center;
  align-self: center; }

/* ═══════════════ THE PAPERS (report + settings print from the one mouth) ═══════ */
.appbar { position: relative; z-index: 5; }   /* papers drape OVER the scene below */
.paper {
  /* like the mock: the paper's top edge sits AT the mouth and the sheet passes IN
     FRONT of the tear bar (its own feed shadow says "from inside the slot") */
  position: absolute; z-index: 4;
  top: calc(100% - 12px);         /* the mouth's Y on the header's bottom edge */
  left: 50%; margin-left: calc(var(--paper-w) / -2);
  width: var(--paper-w);          /* a hair narrower than the mouth it feeds from */
  padding: 26px 16px 18px;
  background: var(--pr-paper);
  background-image:
    linear-gradient(var(--pr-paper), var(--pr-paper)),
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(0,0,0,.03) 21px 22px);
  font-family: "VT323", monospace; font-size: 16px; line-height: 1.25; color: var(--pr-print);
  box-shadow: 0 16px 26px -10px rgba(40,38,30,.5);
  /* scalloped tear-off bottom edge */
  --tooth: 9px;
  -webkit-mask: linear-gradient(#000,#000) no-repeat 0 0/100% calc(100% - 13px),
                radial-gradient(var(--tooth) at 50% 100%, transparent 98%, #000) repeat-x 0 100%/18px 18px;
  mask: linear-gradient(#000,#000) no-repeat 0 0/100% calc(100% - 13px),
        radial-gradient(var(--tooth) at 50% 100%, transparent 98%, #000) repeat-x 0 100%/18px 18px;
}
.paper.spooling { animation: spool-in .7s cubic-bezier(.2,.85,.3,1); }
@keyframes spool-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
/* CUT: torn off (top edge gains the scallop too) and falls away — the gimmick's payoff */
.paper.cut {
  -webkit-mask:
    radial-gradient(var(--tooth) at 50% 0%, transparent 98%, #000) repeat-x 0 0/18px 18px,
    linear-gradient(#000,#000) no-repeat 0 13px/100% calc(100% - 26px),
    radial-gradient(var(--tooth) at 50% 100%, transparent 98%, #000) repeat-x 0 100%/18px 18px;
  mask:
    radial-gradient(var(--tooth) at 50% 0%, transparent 98%, #000) repeat-x 0 0/18px 18px,
    linear-gradient(#000,#000) no-repeat 0 13px/100% calc(100% - 26px),
    radial-gradient(var(--tooth) at 50% 100%, transparent 98%, #000) repeat-x 0 100%/18px 18px;
  animation: cut-fall .55s cubic-bezier(.5,0,.75,.4) forwards;
}
.paper.cut::before { opacity: 0; }   /* a free cut piece has no slot-lip shadow */
@keyframes cut-fall {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(115vh) rotate(var(--fall-tilt, 3deg)); }
}
/* the slot lip casts a feed shadow onto the paper top */
.paper::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24px; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,12,8,.7) 0%, rgba(14,12,8,.4) 30%, transparent 100%); }
.p-head { text-align: center; border-bottom: 1px dashed #b3afa2; padding-bottom: 7px; margin-bottom: 9px; }
.p-title { font-size: 24px; letter-spacing: .14em; line-height: 1; }
.p-sub { font-size: 13px; color: #7a766a; letter-spacing: .04em; }
.p-row { display: flex; justify-content: space-between; gap: 8px; }
.p-row b { font-weight: 400; }
.stats-block { margin: 11px 0; }
.p-lbl { font-size: 13px; font-weight: 400; color: #7a766a; letter-spacing: .1em;
  border-bottom: 1px solid #cfcabb; padding-bottom: 2px; margin-bottom: 6px; }
/* the mock receipt's 14-day chart: vertical dotted-ink bars, today in amber */
.chart { display: flex; align-items: flex-end; gap: 3px; height: 54px; }
.chart i { flex: 1; min-height: 2px; background: repeating-linear-gradient(0deg, var(--pr-print) 0 2px, transparent 2px 3px); }
.chart i.hot { background: repeating-linear-gradient(0deg, #9a5a1e 0 2px, transparent 2px 3px); }
.p-streak { text-align: center; font-size: 17px; margin: 7px 0; letter-spacing: .04em; }
/* breakdown ledger — per-card fill bar (the mock's pr-p-bk), timers beneath */
.bd-card { margin-bottom: 7px; }
.bd-card-head { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.bd-card-head u { flex: 1; height: 7px; background: #dcd7c8; text-decoration: none; position: relative; }
.bd-card-head u i { position: absolute; inset: 0 auto 0 0; background: var(--pr-print); }
.bd-card-head b { font-weight: 400; flex: 0 0 auto; }
.bd-timer { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #7a766a; padding-left: 8px; }
.bt-bar { flex: 1; height: 7px; background: #e3dfd2; position: relative; }
.bt-bar span { position: absolute; inset: 0 auto 0 0; display: block;
  background: repeating-linear-gradient(90deg, var(--pr-print) 0 2px, transparent 2px 3px); }
.bt-ms { flex: 0 0 48px; text-align: right; }
/* recent sessions */
.recent-list { list-style: none; }
.recent-item { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 15px; }
.recent-item strong { font-weight: 400; }
.r-when { font-size: 12px; color: #7a766a; }
.r-ms { flex: 0 0 auto; }
.stats-empty { font-size: 14px; color: #7a766a; text-align: center; padding: 6px; list-style: none; }
.p-code { height: 20px; margin: 10px 16px 0;
  background: repeating-linear-gradient(90deg, var(--pr-print) 0 1px, transparent 1px 2px,
    var(--pr-print) 2px 4px, transparent 4px 7px, var(--pr-print) 7px 9px, transparent 9px 12px); }
.p-foot { text-align: center; font-size: 13px; color: #7a766a; margin-top: 10px; letter-spacing: .1em; }
/* on-tape control strip: PRINTED onto the paper — a dashed section rule, then ink buttons */
.p-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px;
  margin-top: 12px; padding-top: 12px; border-top: 2px dashed #b3afa2; }
/* PAPER buttons: printed ink, dashed box (a tear-here field on a receipt). Flat, no 3D. */
.p-btn { font-family: "VT323", monospace; font-size: 18px; letter-spacing: .05em;
  color: var(--pr-print); background: transparent; cursor: pointer;
  border: 1.5px dashed var(--pr-print); border-radius: 2px; padding: 2px 12px;
  transition: background .08s; }
.p-btn:hover { background: rgba(43,42,37,.06); }
.p-btn:active { background: rgba(43,42,37,.14); }
.p-btn.accent { color: #9a5a1e; border-color: #9a5a1e; }
.p-btn.accent:hover { background: rgba(154,90,30,.08); }
/* the END-OF-TAPE cut line, printed at the very bottom (the mock's pr-p-end) — not a
   button, a clickable piece of print: tap it to tear the paper off */
.p-end { display: block; width: 100%; text-align: center; font-family: "VT323", monospace;
  font-size: 13px; color: var(--pr-print); letter-spacing: .06em; margin-top: 9px;
  white-space: nowrap; overflow: hidden; background: transparent; border: none;
  cursor: pointer; padding: 3px 0; }
.p-end:hover, .p-end:active { color: #9a5a1e; }
/* the settings sheet: a form PRINTED on the same paper stock */
.p-note { font-size: 14px; color: #7a766a; line-height: 1.35; margin: 6px 0; }
.p-field { display: flex; flex-direction: column; gap: 2px; margin: 8px 0;
  font-size: 14px; color: #7a766a; letter-spacing: .06em; }
.p-field input { font-family: "VT323", monospace; font-size: 17px; color: var(--pr-print);
  background: transparent; border: none; border-bottom: 1.5px dashed var(--pr-print);
  border-radius: 0; padding: 2px 2px 3px; }
.p-field input:focus { outline: none; background: rgba(43,42,37,.05); }
.p-field input::placeholder { color: #b3afa2; }

/* ═══════════ DETAILED REPORT: a long paged tape from the same mouth ═══════════
   Anchored to the printer like every other paper — it scrolls WITH the page. */
.pr-big { position: absolute; z-index: 4;
  top: calc(100% - 12px); left: 50%; margin-left: calc(var(--paper-w) / -2);
  width: var(--paper-w); }
.pr-big[hidden] { display: none; }
.pr-big-tape {
  position: relative; width: 100%;
  padding: 26px 16px 18px;
  background: var(--pr-paper);
  font-family: "VT323", monospace; color: var(--pr-print); font-size: 16px; line-height: 1.3;
  box-shadow: 0 22px 40px -12px rgba(30,26,16,.55), 0 0 0 1px rgba(0,0,0,.04);
  background-image:
    linear-gradient(var(--pr-paper), var(--pr-paper)),
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(0,0,0,.03) 21px 22px);
  --tooth: 9px;
  -webkit-mask: linear-gradient(#000,#000) no-repeat 0 0/100% calc(100% - 13px),
                radial-gradient(var(--tooth) at 50% 100%, transparent 98%, #000) repeat-x 0 100%/18px 18px;
  mask: linear-gradient(#000,#000) no-repeat 0 0/100% calc(100% - 13px),
        radial-gradient(var(--tooth) at 50% 100%, transparent 98%, #000) repeat-x 0 100%/18px 18px;
}
/* the slot lip casts a feed shadow onto the paper top, like the receipt */
.pr-big-tape::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24px; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,12,8,.7) 0%, rgba(14,12,8,.4) 30%, transparent 100%); }
.pr-big.spooling .pr-big-tape { animation: pr-big-in .9s cubic-bezier(.2,.85,.3,1); }
@keyframes pr-big-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.pr-big.cut .pr-big-tape {
  -webkit-mask:
    radial-gradient(var(--tooth) at 50% 0%, transparent 98%, #000) repeat-x 0 0/18px 18px,
    linear-gradient(#000,#000) no-repeat 0 13px/100% calc(100% - 26px),
    radial-gradient(var(--tooth) at 50% 100%, transparent 98%, #000) repeat-x 0 100%/18px 18px;
  mask:
    radial-gradient(var(--tooth) at 50% 0%, transparent 98%, #000) repeat-x 0 0/18px 18px,
    linear-gradient(#000,#000) no-repeat 0 13px/100% calc(100% - 26px),
    radial-gradient(var(--tooth) at 50% 100%, transparent 98%, #000) repeat-x 0 100%/18px 18px;
  animation: cut-fall .6s cubic-bezier(.5,0,.75,.4) forwards;
}
/* on-tape control strip: printed ink on the same paper */
.pr-big-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 18px;
  margin: 14px 0 4px; padding-top: 14px; border-top: 2px dashed #b3afa2; }
.pr-big-pgind { font-size: 18px; color: #7a766a; letter-spacing: .08em; min-width: 48px; text-align: center; }
.p-btn:disabled { color: #b3afa2; border-color: #cfcabb; cursor: default; background: transparent; }
/* detailed-page bits reuse the receipt classes; sub-rows are dimmer + indented */
.pd-sub { font-size: 13px; color: #7a766a; padding-left: 8px; display: flex; justify-content: space-between; gap: 8px; }
/* labeled vertical bar columns (weekday / time-of-day / weekly trend) */
.pd-cols { display: flex; gap: 4px; align-items: flex-end; height: 70px; margin: 6px 0 2px; }
.pd-col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 2px; min-width: 0; }
.pd-col i { width: 100%; min-height: 2px;
  background: repeating-linear-gradient(0deg, var(--pr-print) 0 2px, transparent 2px 3px); }
.pd-col.hot i { background: repeating-linear-gradient(0deg, #9a5a1e 0 2px, transparent 2px 3px); }
.pd-col b { font-weight: 400; font-size: 9px; color: #7a766a; letter-spacing: .04em; white-space: nowrap; }
.pd-note { font-size: 13px; color: #7a766a; text-align: center; margin: 6px 0; }
.pd-day { font-size: 13px; color: #7a766a; letter-spacing: .08em; border-bottom: 1px solid #cfcabb;
  margin-top: 8px; padding-bottom: 1px; }
/* the receipt's item/total separator: a dashed till rule */
.p-tear-rule { border-top: 2px dashed #b3afa2; margin: 8px 0 6px; }
.recent-item.r-live { color: #9a5a1e; }

/* ═══════════ THE INDEX CARDS (create/edit = fill in a card, in pencil) ═══════════
   A ruled index card slides up from the desk to the middle, slightly tilted; the
   form is pencil handwriting on its rules. One more real object on the desk. */
.editor { border: none; padding: 0; background: transparent; overflow: visible;
  /* explicit modal centering — the global margin reset kills the UA's dialog margin:auto */
  position: fixed; inset: 0; margin: auto; width: fit-content; height: fit-content;
  max-width: none; max-height: none; }
.editor::backdrop { background: rgba(30,26,16,.45); backdrop-filter: blur(1.5px); }
.index-card {
  --graphite: #44464b;        /* pencil stroke */
  --graphite-soft: #83868d;   /* light pencil */
  --redpencil: #c94f3d;       /* the red pencil */
  --rule: rgba(72,110,165,.30);
  --tilt: -2.2deg;
  position: relative;
  width: min(420px, calc(100vw - 36px));
  padding: 16px 24px 20px;
  border-radius: 5px;
  font-family: "Klee One", "Zen Kaku Gothic New", cursive;
  color: var(--graphite);
  background: linear-gradient(165deg, #fdfbf3, #f8f3e6 70%, #f1ead8);
  box-shadow:
    0 30px 60px -18px rgba(40,34,18,.65),
    0 4px 10px rgba(0,0,0,.2),
    inset 0 0 0 1px rgba(255,255,255,.5);
  transform: rotate(var(--tilt));
}
.index-card.tilt-r { --tilt: 1.8deg; }
/* the red double head-rule */
.index-card::before { content: ""; position: absolute; left: 0; right: 0; top: 46px;
  border-top: 2px solid rgba(201,79,61,.5); box-shadow: 0 3px 0 -1px rgba(201,79,61,.3);
  pointer-events: none; }
/* faint blue rules over the card's writing area */
.index-card::after { content: ""; position: absolute; left: 0; right: 0; top: 56px; bottom: 58px;
  background: repeating-linear-gradient(0deg, transparent 0 27px, rgba(72,110,165,.10) 27px 28px);
  pointer-events: none; }
/* pulled up from the desk below, settles at its tilt */
dialog[open] .index-card { animation: ic-up .5s cubic-bezier(.2,.85,.3,1); }
@keyframes ic-up {
  0%   { transform: translateY(110vh) rotate(.5deg); }
  80%  { transform: translateY(-10px) rotate(var(--tilt)); }
  100% { transform: translateY(0) rotate(var(--tilt)); }
}
.index-card.away { animation: ic-down .3s cubic-bezier(.5,0,.8,.4) forwards; }
@keyframes ic-down { to { transform: translateY(115vh) rotate(calc(var(--tilt) * 2)); } }

.ic-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 12px; }
.ic-head h3 { font-size: 22px; font-weight: 600; letter-spacing: .02em; line-height: 1.1; }
.ic-jp { font-size: 12px; color: var(--redpencil); opacity: .85; }
/* a field = a label written small, the value written ON a rule */
.ic-field { display: flex; flex-direction: column; gap: 1px; font-size: 12px;
  color: var(--graphite-soft); letter-spacing: .05em; margin-top: 10px; min-width: 0; }
.ic-field input, .ic-field select {
  font-family: inherit; font-size: 19px; color: var(--graphite);
  background: transparent; border: none; border-bottom: 1.5px solid var(--rule);
  border-radius: 0; padding: 0 2px 2px; outline: none; min-width: 0;
}
.ic-field input:focus, .ic-field select:focus { border-bottom-color: var(--redpencil); }
.ic-field input::placeholder { color: rgba(131,134,141,.45); }
.ic-field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.ic-row { display: flex; gap: 20px; }
.ic-row .ic-field { flex: 1 1 0; }
.ic-color input[type=color] { width: 52px; height: 30px; padding: 0; cursor: pointer;
  background: transparent; border: none; border-bottom: 1.5px solid var(--rule); }
/* pencil-drawn radios: a wobbly circle, scribbled in when checked */
.ic-radios { display: flex; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.ic-radio { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer;
  color: var(--graphite); }
.ic-radio input { appearance: none; -webkit-appearance: none; width: 17px; height: 17px;
  margin: 0; cursor: pointer; border: 1.6px solid var(--graphite);
  border-radius: 49% 51% 48% 52% / 52% 48% 52% 48%; }
.ic-radio input:checked { background: radial-gradient(circle at 45% 42%, var(--graphite) 0 42%, transparent 52%); }
.ic-radio input:focus-visible { outline: 2px solid var(--redpencil); outline-offset: 2px; }
/* h:m:s written in little ruled slots */
.ic-dur { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.ic-dur.disabled { opacity: .4; }
.ic-dur-label { font-size: 12px; color: var(--graphite-soft); letter-spacing: .05em; }
.ic-dur-in { display: flex; align-items: baseline; gap: 4px; }
.ic-dur-in input { width: 46px; text-align: center; font-family: inherit; font-size: 19px;
  color: var(--graphite); background: transparent; border: none;
  border-bottom: 1.5px solid var(--rule); border-radius: 0; outline: none; padding: 0 0 2px; }
.ic-dur-in input:focus { border-bottom-color: var(--redpencil); }
.ic-dur-in input::-webkit-outer-spin-button, .ic-dur-in input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0; }
.ic-dur-in input { -moz-appearance: textfield; appearance: textfield; }
.ic-dur-in label { font-size: 12px; color: var(--graphite-soft); }
/* emblem quick-picks: little pencil-boxed stamps */
.ic-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ic-chips button { font-family: inherit; font-size: 15px; line-height: 1.3; color: var(--graphite);
  background: transparent; cursor: pointer; padding: 1px 8px;
  border: 1.4px solid var(--graphite-soft);
  border-radius: 225px 15px 255px 15px / 15px 255px 15px 225px; }
.ic-chips button:hover { border-color: var(--graphite); background: rgba(68,70,75,.05); }
/* foil picker: swatch dots ringed in pencil when chosen */
.ic-foils { display: flex; gap: 9px; margin-top: 7px; align-items: center; flex-wrap: wrap; }
.ic-foil { position: relative; cursor: pointer; display: block; }
.ic-foil input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.ic-foil i { display: block; width: 22px; height: 22px;
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
  border: 1.6px solid var(--graphite-soft); box-shadow: inset 0 1px 2px rgba(255,255,255,.5); }
.ic-foil input:checked + i { border-color: var(--graphite);
  box-shadow: 0 0 0 2.5px rgba(68,70,75,.28), inset 0 1px 2px rgba(255,255,255,.5); }
.ic-foil input:focus-visible + i { outline: 2px solid var(--redpencil); outline-offset: 2px; }
.f-auto { background: repeating-linear-gradient(45deg, #f0ead9 0 4px, #ddd5c0 4px 8px); }
.f-holo { background: conic-gradient(from 30deg, #ff6ec7, #ffe96e, #6effb0, #6ec8ff, #c98bff, #ff6ec7); }
.f-gold { background: linear-gradient(115deg, #fff2c0, #e9b94a 40%, #b8862a 60%, #ffe9a8); }
.f-chrome { background: linear-gradient(105deg, #eef3f8, #9fb2c4 30%, #5c6f82 45%, #dfe9f2 60%, #8fa4b8); }
.f-aurora { background: conic-gradient(from 200deg, #2affd5, #4f7cff, #b04fff, #2affd5, #6dffb0); }
.f-cracked { background:
    conic-gradient(from 20deg at 35% 30%, rgba(110,200,255,.95) 0 60deg, transparent 60deg 130deg, rgba(255,110,199,.85) 130deg 180deg, transparent 180deg),
    conic-gradient(from 220deg at 70% 70%, rgba(110,255,176,.9) 0 70deg, transparent 70deg),
    #35507a; }
.f-galaxy { background:
    radial-gradient(1.5px at 30% 30%, #fff, transparent),
    radial-gradient(1px at 70% 55%, #fff, transparent),
    radial-gradient(1.5px at 45% 75%, #ffe9ff, transparent),
    radial-gradient(45% 40% at 40% 60%, rgba(120,80,255,.8), transparent 70%),
    radial-gradient(40% 35% at 70% 30%, rgba(255,80,180,.7), transparent 70%),
    #150a2a; }
.f-refractor { background: repeating-linear-gradient(90deg, #ff5e7e 0 2px, #ffd25e 2px 4px, #5effa6 4px 6px, #5ec8ff 6px 8px, #c98bff 8px 10px); }
/* texture dots: the dark jewel with each pattern in miniature */
.t-cosmos { background:
    radial-gradient(1.5px 1.5px at 30% 30%, rgba(255,247,210,.95), transparent),
    radial-gradient(1px 1px at 68% 55%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.5px 1.5px at 45% 75%, rgba(255,240,180,.8), transparent),
    #1d1b2c; }
.t-waves { background:
    radial-gradient(circle at 50% 130%, transparent 45%, rgba(255,250,225,.35) 46% 52%, transparent 53%) 0 0/12px 6px,
    #1d1b2c; }
.t-rays { background:
    repeating-conic-gradient(from 0deg at 35% 45%, rgba(255,250,225,.35) 0 12deg, transparent 12deg 30deg),
    #1d1b2c; }
.t-pin { background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.3) 0 1px, transparent 1px 4px),
    #1d1b2c; }
.t-ichimatsu { background: repeating-conic-gradient(rgba(255,250,225,.35) 0 90deg, transparent 90deg 180deg) 0 0/10px 10px, #1d1b2c; }
.t-lattice { background:
    repeating-linear-gradient(45deg, rgba(255,250,225,.35) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(255,250,225,.35) 0 1px, transparent 1px 5px), #1d1b2c; }
.t-dots { background: radial-gradient(1.5px at 50% 50%, rgba(255,250,225,.5), transparent 65%) 0 0/7px 7px, #1d1b2c; }

/* hand-drawn button boxes; SAVE in red pencil */
.ic-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px;
  position: relative; z-index: 1; }
.ic-btn { font-family: inherit; font-weight: 600; font-size: 15px; color: var(--graphite);
  background: transparent; cursor: pointer; padding: 4px 16px;
  border: 1.7px solid var(--graphite);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; }
.ic-btn:hover { background: rgba(68,70,75,.06); }
.ic-btn:active { background: rgba(68,70,75,.12); }
.ic-btn.red { color: var(--redpencil); border-color: var(--redpencil); }
.ic-btn.red:hover { background: rgba(201,79,61,.07); }

/* one reduced-motion block (mock review D16) */
@media (prefers-reduced-motion: reduce) {
  .paper.spooling, .paper.cut, .pr-stub.feeding { animation: none; }
  .lcd.waking { animation: none; }
  .rack-editor { animation: none; }
  .card-3d { transition: opacity 1ms; }   /* flip lands instantly, no 3D turn */
  dialog[open] .index-card, .index-card.away { animation: none; }
  .card, .card.airborne { transition: none; }   /* gesture beats resolve via their timeout clocks */
  .card-3d .foil, .card-3d .foil::after { transition: opacity .5s ease; }
  .card:hover .foil { background-position: 0% 0% !important; }
  #device.finished .bigbtn { animation: none; }
  .bigbtn, .skey, .pr-key, .lock-toggle, .deck-add { transition: none; }
  .binder__page { scroll-behavior: auto; }
}