/* LGTM: a Papers, Please desk at 2 a.m. Cards like ID papers on warm paper, terminal green HUD, monitor glow. */
:root {
  --paper: #efe5cc; --paper2: #e4d6b4; --ink: #2a2118; --ink2: #6b5a45;
  --green: #4dff9a; --term: #0b140e; --approve: #2a9a52; --deny: #c8322b;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --hud: 48px; --bar: 78px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #140d08; color: var(--paper); font-family: var(--sans); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
body { touch-action: none; }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
kbd { font-family: var(--mono); font-size: .85em; border: 1px solid currentColor; border-bottom-width: 2px; border-radius: 4px; padding: 0 .3em; opacity: .9; }

/* ---------- HUD: a terminal strip under the monitor ---------- */
#hud { position: fixed; top: 0; left: 0; right: 0; height: calc(var(--hud) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0 12px; display: flex; align-items: center; gap: 10px;
  background: linear-gradient(#08100bf0, #0b140ed8); border-bottom: 1px solid #2e6b46; font-family: var(--mono); color: var(--green); text-shadow: 0 0 8px #4dff9a88; z-index: 5; }
#h-title { font-size: 17px; letter-spacing: .04em; white-space: nowrap; }
#h-title span { font-weight: 400; opacity: .7; font-size: 13px; }
#clock { font-size: 18px; margin-left: auto; }
#clock.late { color: #ffcf4d; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
#prog, #coffee { font-size: 13px; opacity: .85; white-space: nowrap; }
#coffee i { font-style: normal; }
.btns { display: flex; gap: 2px; }
.btns button { width: 44px; height: 44px; border: 0; background: none; font-size: 18px; color: var(--green); border-radius: 8px; font-family: var(--sans); }
.btns button:hover { background: #4dff9a1a; }
#mute.off { opacity: .35; text-decoration: line-through; }
@media (max-width: 400px) { #prog { display: none; } #hud { gap: 6px; } }

/* ---------- the rulebook: a pull-down sheet on phones, pinned in the left margin on wide screens ---------- */
#book { position: fixed; top: calc(var(--hud) + env(safe-area-inset-top) + 6px); left: 8px; right: 8px; z-index: 6; background: var(--paper); color: var(--ink); border-radius: 6px; padding: 12px 14px 10px;
  box-shadow: 0 14px 40px #000a, inset 0 0 0 1px #0002; transform: translateY(-130%); transition: transform .25s ease; font-size: 15px; line-height: 1.35; }
body.book #book { transform: none; }
#book h3, #tray h3 { margin: 0 0 6px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
#book ol { margin: 0; padding: 0; list-style: none; }
#book li { display: flex; gap: 8px; padding: 6px 0; border-top: 1px dashed #0002; position: relative; }
#book li > span { width: 1.4em; flex: none; }
#book li.tonight { background: #f6e27a66; margin: 0 -8px; padding: 6px 52px 6px 8px; border-radius: 4px; }
.stampmark { position: absolute; right: 4px; top: 50%; transform: translateY(-50%) rotate(-8deg); font: 700 11px var(--mono); color: var(--deny); border: 2px solid var(--deny); border-radius: 3px; padding: 0 4px; font-style: normal; }
body.newrule #book-btn { animation: pulse .5s ease 3; }
body.newrule #book li.tonight { animation: slam .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes pulse { 50% { transform: scale(1.35); background: #4dff9a44; } }
@keyframes slam { 0% { transform: scale(1.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
#book .new { margin: 6px 0 0; font-size: 13px; color: var(--ink2); font-style: italic; }
#book .new:empty { display: none; }
code { font-family: var(--mono); background: #0001; padding: 0 3px; border-radius: 3px; }

#tray { display: none; }

/* ---------- the desk and the card ---------- */
#desk { position: fixed; left: 0; right: 0; top: calc(var(--hud) + env(safe-area-inset-top)); bottom: calc(var(--bar) + 26px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; pointer-events: none; }
#deck { position: relative; width: min(360px, calc(100vw - 24px)); height: min(560px, 100%); }
.card { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; max-height: 100%; overflow: hidden; pointer-events: auto; touch-action: none; cursor: grab;
  background: linear-gradient(var(--tint, transparent), var(--tint, transparent)), repeating-linear-gradient(transparent 0 23px, #6b5a4512 23px 24px), linear-gradient(160deg, var(--paper), var(--paper2));
  color: var(--ink); border-radius: 6px; padding: 12px 14px 14px; box-shadow: 0 2px 0 #0003, 0 18px 40px #000b; transition: transform .2s cubic-bezier(.2,1.4,.4,1); will-change: transform; }
.card.drag { transition: none; cursor: grabbing; }
.card.enter { transform: translateY(40px) rotate(-2deg); opacity: 0; }
.card.under { transform: translate(5px, 8px) rotate(1.4deg); background: linear-gradient(160deg, #d9caa6, #c7b48c); box-shadow: 0 12px 30px #0009; pointer-events: none; }
.card.nudge { animation: nudge .3s; }
@keyframes nudge { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.form { font: 600 10px var(--mono); letter-spacing: .12em; color: var(--ink2); border-bottom: 2px solid var(--ink); padding-bottom: 5px; margin-bottom: 8px; }
.who { display: flex; align-items: center; gap: 8px; font: 600 15px var(--mono); }
.av { width: 34px; height: 34px; display: grid; place-items: center; background: #fff8; border: 1px solid #0003; border-radius: 4px; font-size: 20px; }
.ask { font-size: 21px; line-height: 1.2; margin: 8px 0 8px; font-weight: 750; letter-spacing: -.01em; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tags span { font: 700 13px var(--mono); padding: 3px 8px; border-radius: 3px; background: #0001; border: 1px solid #0003; }
.env.prod { background: #c8322b; color: #fff; border-color: #8a1d18; }
.env.staging { background: #e9c46a; }
.cost { background: #d7ecd9 !important; }
.ev { font: 13px/1.45 var(--mono); background: var(--term); color: #c8f5d8; padding: 8px 10px; border-radius: 4px; margin: 0 0 8px; white-space: pre-wrap; word-break: break-word; box-shadow: inset 0 0 18px #4dff9a22; }
.ev b { color: var(--green); }
.ev i { color: #8fb39b; font-style: normal; display: block; }
.ev .p { color: #7dff9f; } .ev .m { color: #ff8a80; }
.claim { margin: 0 0 6px; font: 600 15px var(--sans); }
.claim span { font-weight: 400; color: var(--ink2); font-size: 13px; }
.claim.warn { color: #9a3b00; }
.peek { margin: 4px 0 0; font-size: 13px; color: var(--ink2); }
.peek em { font-style: normal; font-family: var(--mono); color: var(--deny); }
.peek::after { content: ''; }
/* what's behind Inspect: it replaces the evidence on the card when opened */
.insp { display: none; margin: 4px 0 0; }
.card.open .insp { display: block; animation: slam .25s ease-out; }
.card.open .peek, .card.open .ev, .card.open .say, .card.open .teach { display: none; }
.insp h4 { margin: 6px 0 2px; font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.insp h4:first-child { margin-top: 0; }
.log, .scr, .quote, .rcpt { font: 12px/1.45 var(--mono); background: #fffaf0; border: 1px dashed #0004; padding: 5px 8px; margin: 0; white-space: pre-wrap; word-break: break-word; }
.log .f { color: var(--deny); font-weight: 700; }
.scr.diff .p { color: #17702f; } .scr.diff .m { color: var(--deny); } .scr i { font-style: normal; color: var(--ink2); display: block; }
.quote { width: 100%; border-collapse: collapse; white-space: normal; }
.quote td { padding: 1px 0; } .quote td + td { text-align: right; padding-left: 8px; white-space: nowrap; }
.quote tr.tot td { border-top: 1px solid #0005; font-weight: 800; padding-top: 3px; }
.rcpt { list-style: none; }
.rcpt i { font-style: normal; color: var(--ink2); }
.rcpt li.cu { color: var(--deny); font-weight: 700; }
.rcpt em { font: 700 10px var(--sans); font-style: normal; text-transform: uppercase; background: var(--deny); color: #fff; padding: 0 4px; border-radius: 2px; }
.say { margin: 4px 0 0; font: italic 13px/1.3 var(--sans); color: var(--ink2); }
.memo { background: #f6e27a; color: #3b2f00; margin: -4px -6px 10px; padding: 8px 10px; border-radius: 2px; transform: rotate(-1.2deg); box-shadow: 0 3px 8px #0003; font-size: 15px; line-height: 1.3; }
.memo > b.mh { display: block; font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.stamp { position: absolute; top: 42%; left: 50%; font: 900 44px/1 var(--mono); padding: 6px 14px; border: 5px solid currentColor; border-radius: 8px; opacity: 0; pointer-events: none; letter-spacing: .06em; mix-blend-mode: multiply; }
.stamp.a { color: var(--approve); transform: translate(-50%, -50%) rotate(-12deg); }
.stamp.d { color: var(--deny); transform: translate(-50%, -50%) rotate(10deg); }
.card.stamped.is-a .stamp.a, .card.stamped.is-d .stamp.d { opacity: 1 !important; animation: stampin .16s cubic-bezier(.3,1.8,.5,1); }
@keyframes stampin { 0% { scale: 1.9; opacity: 0; } 100% { scale: 1; opacity: 1; } }

/* the citation or sulk slip */
#slip { position: absolute; left: 50%; top: 4px; width: min(360px, calc(100vw - 24px)); transform: translate(-50%, -140%); transition: transform .25s ease; z-index: 3; padding: 9px 12px; border-radius: 4px; font-size: 14px; line-height: 1.3; box-shadow: 0 10px 30px #0008; pointer-events: none; }
#slip.show { transform: translate(-50%, 0); }
#slip.cite { background: #f3d3cf; color: #5a0f0b; border-left: 6px solid var(--deny); }
#slip.sulk { background: #e8e1d2; color: #3a3226; border-left: 6px solid #8a7a60; }
#slip b { margin-right: 6px; } #slip span { opacity: .85; font-size: 13px; }

/* ---------- the buttons ---------- */
#bar { position: fixed; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom)); height: var(--bar); display: flex; justify-content: center; gap: 10px; padding: 8px 12px; z-index: 4; opacity: 0; pointer-events: none; transition: opacity .2s; }
body.playing #bar { opacity: 1; pointer-events: auto; }
.big { flex: 1; max-width: 140px; min-height: 60px; border: 0; border-radius: 12px; font-weight: 700; font-size: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 4px 0 #0006, 0 8px 20px #0006; }
.big span { font-size: 20px; }
.big:active { transform: translateY(3px); box-shadow: 0 1px 0 #0006; }
.big.d { background: #7c1f1a; color: #ffd9d4; }
.big.a { background: #1f6b3a; color: #d9ffe6; }
.big.i { background: #2b2a26; color: #e8e0cc; max-width: 96px; }
.big.i em { font-style: normal; }
.big:disabled { opacity: .35; cursor: default; }
@media (hover: hover) { .big:not(:disabled):hover { filter: brightness(1.2); } }
#hint { position: fixed; left: 0; right: 0; bottom: calc(4px + env(safe-area-inset-bottom)); margin: 0; text-align: center; font: 12px var(--mono); color: #c8f5d8aa; z-index: 4; pointer-events: none; }

#toast { position: fixed; left: 50%; top: calc(var(--hud) + 14px + env(safe-area-inset-top)); transform: translate(-50%, -10px); opacity: 0; transition: .2s; background: var(--term); color: var(--green); border: 1px solid #2e6b46; font: 13px var(--mono); padding: 6px 12px; border-radius: 4px; z-index: 9; pointer-events: none; white-space: nowrap; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- sheets: intro, help, the 2 a.m. pages and the report ---------- */
#panel { position: fixed; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 14px; background: #0007; backdrop-filter: blur(2px); }
#panel.hidden { display: none; }
.sheet { width: min(420px, 100%); max-height: 100%; overflow-y: auto; touch-action: pan-y; background: linear-gradient(160deg, var(--paper), var(--paper2)); color: var(--ink); border-radius: 8px; padding: 18px 18px 16px; box-shadow: 0 24px 60px #000c; }
.sheet h1 { font: 900 64px/1 var(--mono); margin: 2px 0 8px; letter-spacing: .02em; color: var(--approve); text-shadow: 2px 2px 0 #0002; }
.sheet h2 { margin: 0 0 8px; font-size: 22px; }
.sheet h2 small { font-size: 13px; font-weight: 600; color: var(--ink2); display: block; margin-top: 2px; }
.kicker { font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); margin: 6px 0 0; }
.sub { margin: 0 0 10px; font-size: 15px; line-height: 1.4; }
.rl { list-style: none; padding: 0; margin: 0 0 10px; font-size: 14px; line-height: 1.35; }
.rl li { display: flex; gap: 8px; padding: 6px 0; border-top: 1px dashed #0002; }
.rl li > span { width: 1.4em; flex: none; }
.rl li.q { color: var(--ink2); font-style: italic; }
.how { font-size: 13px; color: var(--ink2); margin: 0 0 12px; line-height: 1.5; }
.go { display: block; width: 100%; min-height: 52px; border: 0; border-radius: 10px; background: var(--approve); color: #fff; font-size: 18px; font-weight: 800; box-shadow: 0 4px 0 #134d29; }
.go:active { transform: translateY(3px); box-shadow: 0 1px 0 #134d29; }
.credit { text-align: center; margin: 10px 0 0; font-size: 12px; color: var(--ink2); }
[data-wefav-mark] { display: block; }

.sheet.night { background: var(--term); color: #c8f5d8; border: 1px solid #2e6b46; font-family: var(--mono); }
.night .time { color: var(--green); font-size: 13px; letter-spacing: .1em; margin: 0 0 8px; }
.night h2 { font-size: 28px; }
.night.inc h2 { color: #ff6a55; }
.night .what { font-size: 17px; line-height: 1.4; font-family: var(--sans); color: #fff; }
.night .cause { font-size: 13px; line-height: 1.5; color: #9fc8ad; }
.night .go { margin-top: 14px; }
.night.inc { animation: nudge .35s 2; }

.report .grid { font-size: 19px; white-space: nowrap; letter-spacing: 0; margin: 4px 0; text-align: center; line-height: 1.2; font-family: var(--sans); word-break: break-all; }
.report .score { text-align: center; font-size: 17px; margin: 4px 0 2px; }
.report .review { text-align: center; font-size: 14px; color: var(--ink2); margin: 0 0 10px; font-style: italic; }
.row2 { display: flex; gap: 8px; }
.row2 .go { flex: 2; }
.row2 button:not(.go) { flex: 1; min-height: 52px; border: 2px solid var(--ink); border-radius: 10px; background: none; font-weight: 700; font-size: 15px; }
details { margin: 10px 0 0; font-size: 14px; }
summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; list-style: none; }
summary::before { content: '▸'; margin-right: 6px; } details[open] summary::before { content: '▾'; }
summary::-webkit-details-marker { display: none; }
.slips { list-style: none; margin: 4px 0 0; padding: 0; }
.slips li { padding: 5px 0; border-top: 1px dashed #0002; line-height: 1.3; }
.slips li > span { margin-right: 6px; }
.slips em { display: block; font-style: normal; color: var(--ink2); font-size: 12px; margin-left: 1.8em; }
.clean { margin: 10px 0 0; text-align: center; font-size: 14px; }
.streak { margin: 8px 0; font-size: 13px; text-align: center; color: var(--ink2); }
.vote { margin: 6px 0; }
.vote p { margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.opts { display: flex; gap: 6px; overflow-x: auto; touch-action: pan-x; padding-bottom: 2px; }
.opts button { flex: none; min-height: 44px; padding: 0 12px; border: 1px solid #0004; border-radius: 22px; background: #fff7; font-size: 13px; }
.door { display: block; width: 100%; min-height: 44px; margin: 6px 0; border: 1px dashed #0006; border-radius: 8px; background: #0000000d; font-size: 13px; text-align: left; padding: 6px 10px; }
.door a { color: var(--approve); }
.foot { font-size: 12px; text-align: center; margin: 6px 0 0; }
.foot a { color: var(--approve); }

/* ---------- wide screens: rulebook pinned on the left, tonight's stamps on the right ---------- */
@media (min-width: 1000px) {
  :root { --hud: 54px; }
  #book { left: 28px; right: auto; width: 290px; top: 90px; transform: rotate(-1.5deg); transition: none; }
  body.book #book { transform: rotate(-1.5deg) scale(1.03); box-shadow: 0 0 0 3px var(--green), 0 14px 40px #000a; }
  #book-btn { display: none; }
  #tray { display: block; position: fixed; right: 40px; top: 110px; width: 170px; background: #0b140ecc; border: 1px solid #2e6b46; border-radius: 6px; padding: 10px; color: var(--green); font-family: var(--mono); }
  #tray h3 { color: var(--green); }
  #stamps { display: flex; flex-wrap: wrap; gap: 6px; }
  #stamps i { font: 700 11px var(--mono); font-style: normal; padding: 2px 5px; border: 2px solid; border-radius: 3px; }
  #stamps i.a { color: #5fd88a; transform: rotate(-4deg); } #stamps i.d { color: #ff6a55; transform: rotate(3deg); }
  #deck { width: 420px; }
  .ask { font-size: 24px; }
  .sheet { width: 460px; }
}

/* ---------- round 2: card 1 teaches, the incident line on the report ---------- */
.teach { margin: 0 0 8px; padding: 7px 9px; background: #0b140e; color: #c8f5d8; border-radius: 4px; font-size: 13px; line-height: 1.4; }
.teach b { color: #fff; } .teach kbd { color: var(--green); }
#mark { position: fixed; right: 10px; bottom: calc(var(--bar) + 30px + env(safe-area-inset-bottom)); z-index: 3; display: none; opacity: .85; font-size: 12px; }
body.fresh #mark { display: block; }
.report .incident { margin: 6px 0 8px; padding: 9px 11px; background: var(--term); color: #fff; border-radius: 6px; font-size: 14px; line-height: 1.4; }
.report .incident b { color: #ff6a55; font-family: var(--mono); }
.report .incident code { background: #ffffff1a; color: #c8f5d8; }
.report .incident span { color: #9fc8ad; font-style: italic; }
.report .incident.clean b { color: var(--green); margin-right: 6px; }

/* ---------- round 3: the weekly performance review ---------- */
.weekp { display: block; width: 100%; margin: 6px 0; padding: 7px 10px; font-size: 13px; text-align: center; color: var(--ink2); border: 1px solid #0002; border-radius: 8px; background: #0000000a; }
button.weekp { min-height: 44px; color: var(--ink); font-weight: 600; }
button.weekp.due { background: #f6e27a; color: #3b2f00; border-color: #a8901f; font-weight: 800; animation: nudge .4s 2 .6s; }
.wkrev .memo-h { font: 600 11px var(--mono); letter-spacing: .1em; color: var(--ink2); border-bottom: 2px solid var(--ink); padding-bottom: 5px; margin: 0 0 8px; }
.wkrev h2 { font-size: 26px; line-height: 1.15; margin: 4px 0 6px; font-style: normal; color: var(--ink); text-align: left; }
.wkrev .mgr { font-style: italic; font-size: 14px; color: var(--ink2); margin: 0 0 10px; text-align: left; }
.wkrev .mgr span { font-style: normal; font-size: 12px; white-space: nowrap; }
.wkgrid { list-style: none; padding: 0; margin: 0 0 8px; }
.wkgrid li { display: flex; align-items: center; gap: 8px; font: 12px var(--mono); padding: 2px 0; }
.wkgrid b { width: 64px; flex: none; color: var(--ink2); font-weight: 600; }
.wkgrid span { font: 14px/1 var(--sans); letter-spacing: -1px; white-space: nowrap; }
.wkgrid em { margin-left: auto; font-style: normal; }
.wkrev .score { text-align: center; }
.sulky { text-align: center; font-size: 13px; color: var(--ink2); margin: 0 0 10px; }

/* ---------- round 4: story mode, YOLO, music ---------- */
#music.off { opacity: .35; text-decoration: line-through; }
.tags .sig { background: #fff3c4; border-color: #a8901f; font-family: "Brush Script MT", "Segoe Script", cursive, var(--mono); font-size: 15px; }
.tags .ctx { background: #e3e8f7; } .tags .ctx.hi { background: #5b3fa8; color: #fff; border-color: #3a2470; }
.stamp.y { color: #c98a00; transform: translate(-50%, -50%) rotate(-6deg); font-size: 52px; text-shadow: 0 0 12px #ffd84d88; }
.card.stamped.is-y .stamp.y { opacity: 1 !important; animation: stampin .2s cubic-bezier(.3,1.8,.5,1); }
#stamps i.y { color: #ffd84d; transform: rotate(-6deg); }
#book li.perm { background: #b48cff22; margin: 0 -8px; padding: 6px 52px 6px 8px; border-radius: 4px; }
#book li.perm .stampmark { color: #5b3fa8; border-color: #5b3fa8; }
body.story.playing .card:not(.under) { filter: blur(var(--blur, 0px)); }
body.story.playing .card.open, body.story.playing .card.drag { filter: none; }
.big.y { display: none; background: linear-gradient(#ffd84d, #c98a00); color: #3b2600; max-width: 96px; }
body.yolo .big.y { display: flex; }
#storychip { position: fixed; left: 10px; bottom: calc(var(--bar) + 30px + env(safe-area-inset-bottom)); z-index: 3; display: none; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid #a8901f; background: #f6e27a; color: #3b2f00; font-weight: 800; font-size: 13px; box-shadow: 0 6px 16px #0008; }
body.fresh:not(.story) #storychip { display: block; }
.story-door { background: #f6e27a !important; border: 1px solid #a8901f !important; color: #3b2f00; font-size: 14px !important; }

/* the cast talking */
.line { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px dashed #0002; }
.line .face { flex: none; width: 42px; height: 42px; display: grid; place-items: center; font-size: 24px; border-radius: 50%; background: color-mix(in srgb, var(--c) 35%, #fff); box-shadow: inset 0 0 0 2px var(--c); }
.line b { font-size: 15px; } .line i { font-style: normal; font-size: 12px; color: var(--ink2); }
.line p { margin: 2px 0 0; font-size: 16px; line-height: 1.38; }
.scene .chat .line:not(.now) { opacity: .55; } .scene .chat .line:not(.now) p { font-size: 14px; }
.line.now { animation: slam .25s ease-out; }
.scene h2, .stitle h2, .ending h2, .morning h2 { font-size: 24px; line-height: 1.15; }
.scene .row2, .evening .row2 { margin-top: 12px; }
.stitle .cast .line p { display: none; }
.stitle .cast .line { padding: 5px 0; } .stitle .cast .face { width: 34px; height: 34px; font-size: 19px; }
.prog { font: 600 13px var(--mono); color: var(--ink2); margin: 8px 0; }
.found { text-align: center; font-size: 12px; color: var(--ink2); margin: 8px 0 0; }
.morning .grid, .ending .grid { font-size: 19px; text-align: center; margin: 4px 0 8px; line-height: 1.25; }
.ending .grid.wk { font-size: 15px; }
.ledger { width: 100%; border-collapse: collapse; font: 13px/1.5 var(--mono); }
.ledger td + td { text-align: right; white-space: nowrap; } .ledger .pos { color: var(--approve); } .ledger .neg { color: var(--deny); }
.ledger tr.tot td { border-top: 2px solid var(--ink); font-weight: 800; font-size: 15px; padding-top: 3px; }
.meters { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 12px; font-size: 14px; }
.meters i { font-style: normal; font-size: 12px; color: var(--ink2); }
.auto { font-size: 13px; background: #b48cff22; border-left: 4px solid #5b3fa8; padding: 6px 8px; margin: 0 0 8px; }
.yn #no { border-color: var(--deny); color: var(--deny); }
.final .fcard { position: relative; translate: none; top: auto; margin: 0 0 14px; cursor: default; }
.final .yn button { font-size: 30px; }
.sheet.final { background: none; box-shadow: none; }
.stats { list-style: none; padding: 0; margin: 6px 0 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 13px; }
.stats li { background: #0000000d; border-radius: 6px; padding: 6px 8px; } .stats b { font-size: 18px; display: block; }