/* app/house.css — the page's one stylesheet, sections in page order.
   It says how a thing looks, never what it is: the markup and the drawers
   own that. Held by test/laws/coin.test.mjs (the page links it, and every
   face it names is a file) and read on the glass by the specs under scripts/ui/. */

/* ── the paper: faces, inks, the floor ── */
/* the body's face; the other four are added at the page's foot, after the modules */
@font-face { font-family: "Spectral"; src: url("/fonts/spectral-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root {
  --paper: #E8E3D8; --card: #F5F2EB; --card-hi: #EFE9DD;
  --ink: #2C2822; --hero: #20190F; --muted: #6E675B; --faint: #8c8275;
  --line: #C9C0AD; --hair: #D8D1C3; --rule: #B0A488;
  --slate: #54707A; --ochre: #C28C3E; --sage: #6F7A58; --barn: #9C4A3B;

  --char: #4E483F;

  --tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .173 0 0 0 0 .157 0 0 0 0 .133 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
  --slab: "Fraunces", Georgia, serif;
  --book: "Spectral", Georgia, serif;
  --script: "Petit Formal Script", "Snell Roundhand", cursive;

  --keys: 0px;

  /* what the foot measured before anything measured it (app/state.js `mountFloor`) */
  --footh: calc(10.4rem + env(safe-area-inset-bottom, 0px));

--floor: calc(var(--footh) + var(--keys));
}
* { box-sizing: border-box; }

/* the browser's own [hidden] loses to any author display rule; scripts/ui/fixture.mjs reads every hidden node's display */
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink);
  font: 1rem/1.6 var(--book); overflow: hidden;
  font-feature-settings: "tnum" 1; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; }

.whisper { font: 600 .56rem var(--slab); color: var(--faint);
  text-transform: uppercase; letter-spacing: .18em;
  background: none; border: none; padding: .25rem 0; cursor: pointer; }
.whisper:hover, .whisper:focus-visible { color: var(--hero); }

/* ── three rooms, one lens ── */
#rooms { position: fixed; inset: 0; z-index: 2; display: flex; width: 100%; height: 100%;
  overflow: hidden; scroll-behavior: smooth; }

.room { flex: 0 0 100%; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden;
  padding: 1.4rem 1.3rem 0;
  display: flex; flex-direction: column; align-items: center; }

/* the floor is an item, not padding, so a room's last line clears the foot */
.room::after, #panel::after, #lens::after {
  content: ""; flex: none; width: 100%; height: var(--floor); }
.room-title { margin-bottom: 1.2rem; text-align: center; cursor: default; }
.opens { font: 1rem var(--script); color: var(--faint); text-align: center; margin: 2.2rem 0 0; }

/* ── today: the head ── */
#here { justify-content: flex-start; text-align: left; }
#head { flex: none; width: 100%; max-width: 26rem; margin: .2rem 0 0;
  display: flex; flex-direction: column; gap: .3rem; }
#head-row { display: flex; justify-content: space-between; align-items: center; }
#today-day { font: 600 .57rem var(--slab); text-transform: uppercase;
  letter-spacing: .2em; color: var(--faint); }
#greet { font: 1.3rem/1.42 var(--script); color: var(--char); text-wrap: balance;
  padding-right: 1.4rem; }

/* ── the mouth, and the marks every key is drawn with ── */
#said { flex: none; width: 100%; max-width: 26rem; margin-top: .8rem;
  display: flex; flex-direction: column; align-items: center; }
#said:empty { display: none; }

.kback { display: flex; gap: .7rem; align-items: flex-start; width: 100%;
  margin-top: .2rem; padding: .8rem 0 0; border: none; border-top: 1px solid var(--hair);
  background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.kback .kmk { color: var(--ochre); }
.kback-say { font: 1.14rem/1.4 var(--script); color: var(--char); }
.kback:hover .kback-say, .kback:focus-visible .kback-say { color: var(--hero); }

#mouth { width: 100%; display: flex; flex-direction: column; }

#write { display: flex; align-items: center;
  width: calc(100% + 1.7rem); margin: 0 -.85rem; }

#say { flex: 1; min-width: 0; padding: .92rem .4rem .98rem; text-align: center;
  font: 1.15rem/1.4 var(--book); color: var(--ink); caret-color: var(--ochre);
  background: var(--card); border: 1px solid var(--line); border-radius: 19px; outline: none; }

#say::placeholder { font-style: italic; color: var(--faint); font-size: min(1rem, 3.38vw); }
#say:focus { border-color: var(--ochre); }

svg.ic * { fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
svg.ic .fill { fill: currentColor; stroke: none; }

svg.ic .enso { fill: currentColor; stroke: none; }
svg.ic .tip { fill: var(--ochre); stroke: none; }
svg.ic .warm { stroke: var(--ochre); }

#shoot, #speak { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; padding: 0; color: var(--muted);
  background: none; border: none; cursor: pointer; }
#shoot:hover, #shoot:focus-visible, #speak:hover, #speak:focus-visible { color: var(--hero); }
#shoot svg, #speak svg { width: 33px; height: 33px; display: block; }

#speak { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#speak.listening { color: var(--ochre); }
#speak.listening svg { animation: v-breathe 1.2s ease-in-out infinite; }
@keyframes v-breathe { 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { #speak.listening svg { animation: none; } }

/* ── the lines below the rail ── */
#lines { flex: none; width: 100%; max-width: 26rem; margin-top: .7rem;
  display: flex; flex-direction: column; }
.line { display: flex; gap: .85rem; align-items: flex-start; width: 100%;
  padding: 1rem 0 .9rem; border: none; border-top: 1px solid var(--hair);
  background: none; text-align: left; color: inherit; font: inherit; }
.line:first-child { border-top: none; padding-top: .6rem; }
button.line { cursor: pointer; }
button.line:hover .lsay, button.line:focus-visible .lsay { color: var(--hero); }

.lmk { flex: none; margin-top: .2rem; color: var(--slate); }
.lmk svg { width: 20px; height: 20px; display: block; }
.line.barn .lmk { color: var(--barn); }
.line.ochre .lmk { color: var(--ochre); }
.lbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }

.lsay { font: 1.06rem/1.45 var(--book); color: var(--ink); background: none;
  border: none; padding: 0; text-align: left; overflow-wrap: anywhere; }
button.lsay { cursor: pointer; }
button.lsay:hover, button.lsay:focus-visible { color: var(--hero); }
.lkick { font: 600 .58rem var(--slab); text-transform: uppercase;
  letter-spacing: .16em; color: var(--faint); }
.lkick .felt { color: var(--ochre); letter-spacing: .1em; margin-left: .4rem; }
.lacts { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .1rem; }

.line .act { font: .94rem var(--book); color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: .66rem 1rem; }
.line .act + .act { color: var(--muted); border-color: var(--hair); }

.line input { width: 100%; max-width: 17rem; padding: .42rem .7rem; font: .95rem var(--book); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.lgo { flex: none; font: 1.4rem/1 var(--book); color: var(--faint); margin-top: .05rem; }

.lpic { flex: none; width: 44px; height: 52px; padding: 4px 4px 12px; box-sizing: border-box;
  background: var(--card-hi); border: 1px solid var(--hair); box-shadow: 0 1px 2px rgba(44,40,34,.08); }
.lpic img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── the strip: what waits on you, above the rail ── */
#strip { flex: none; width: 100%; max-width: 26rem; margin-top: 1rem;
  background: var(--card); border: 1px solid var(--hair); border-radius: 18px;
  padding: .75rem 1rem .4rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 10px 26px rgba(44,40,34,.07); }
#waiting { display: block; width: 100%; font: 600 .56rem var(--slab); text-transform: uppercase;
  letter-spacing: .18em; color: var(--barn); background: none; border: none; padding: 0 0 .15rem;
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#waiting:hover, #waiting:focus-visible { color: var(--hero); }
/* the quiet line: what is open with no due time, counted and asking nothing */
#quiet { display: block; width: 100%; font: 600 .56rem var(--slab); text-transform: uppercase;
  letter-spacing: .18em; color: var(--muted); background: none; border: none; padding: .2rem 0 .3rem;
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#quiet:hover, #quiet:focus-visible { color: var(--hero); }
#strip .rrow + #quiet { border-top: 1px solid var(--hair); padding-top: .55rem; }
/* the strip's row is the rail's, lifted off the line: the hour in the same column, and no dot */
#strip .rrow { padding: .3rem 0 .45rem; }
#strip .rrow::before { display: none; }
#strip.rise { animation: strip-rise .38s cubic-bezier(.2,.8,.3,1); }
@keyframes strip-rise { from { opacity: 0; transform: translateY(.45rem); } to { opacity: 1; transform: none; } }

/* ── the rail: the day in the order it comes ── */
.day-rail { position: relative; width: 100%; margin-top: 1.15rem; padding-bottom: .2rem; }
.day-rail::before { content: ""; position: absolute; left: 5.45rem; top: .9rem; bottom: .7rem;
  width: 1px; background: var(--line); }
.rrow { position: relative; display: grid; grid-template-columns: 5rem 1fr; column-gap: 1.35rem;
  padding: .85rem 0 .8rem; align-items: start; }
.rrow + .rrow { border-top: 1px solid var(--hair); }

.rrow::before { content: ""; position: absolute; left: 5.18rem; top: 1.38rem; width: 9px; height: 9px;
  border-radius: 50%; background: var(--paper); border: 1.5px solid var(--line); }
.rrow.next::before { background: var(--ochre); border-color: var(--ochre); box-shadow: 0 0 0 4px var(--card-hi); }
.rrow.past::before { border-color: var(--hair); }
.rrow.done::before { background: var(--sage); border-color: var(--sage); }
.rrow.due::before, .rrow.clash::before { border-color: var(--barn); }
.rrow.clash::before { background: var(--barn); }
/* a place kept on the rail for the thing standing in the strip: hollow, and asking nothing here */
.rrow.place::before { background: var(--paper); border-color: var(--barn); }
.rrow.place .rhour, .rrow.place .rsay { color: var(--faint); }
.rhour { font: 500 1.82rem/1 var(--slab); color: var(--hero); letter-spacing: -.02em;
  font-feature-settings: "tnum" 1; }
.rhour small { display: block; font: 600 .5rem var(--slab); text-transform: uppercase;
  letter-spacing: .14em; color: var(--faint); margin-top: .3rem; }
.rrow.past .rhour, .rrow.done .rhour { color: var(--muted); }
.rrow.later .rhour { color: var(--ink); }

.rhour.word { font: 600 .58rem var(--slab); letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.5; padding-top: .35rem; color: var(--muted); }
.rrow.due .rhour.word { color: var(--barn); }
.rrow.clash .rhour { color: var(--barn); }
.rsay { font: 1.18rem/1.3 var(--slab); color: var(--hero); padding-top: .12rem;
  background: none; border: none; text-align: left; overflow-wrap: anywhere; width: 100%; }
button.rsay { cursor: pointer; }
button.rsay:hover, button.rsay:focus-visible { text-decoration: underline dotted var(--rule); text-underline-offset: .3em; }
.rrow.past .rsay, .rrow.done .rsay { color: var(--muted); }
.rrow.done .rsay { text-decoration: none; }
.rkick { display: block; font: 600 .54rem var(--slab); text-transform: uppercase;
  letter-spacing: .16em; color: var(--faint); margin-top: .3rem; }
.rkick .felt { color: var(--ochre); letter-spacing: .1em; margin-left: .4rem; }
.racts { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .6rem; }
.racts .act { font: .9rem var(--book); color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: .5rem .95rem; }
.racts .act + .act { color: var(--muted); border-color: var(--hair); }
.rrow input { width: 100%; max-width: 17rem; margin-top: .5rem; padding: .42rem .7rem;
  font: .95rem var(--book); color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; }

.rnow { position: relative; display: grid; grid-template-columns: 5rem 1fr; column-gap: 1.35rem;
  align-items: center; padding: .55rem 0; }
.rnow .rhour { font-size: .58rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ochre); line-height: 1; }
.rnow::before { content: ""; position: absolute; left: 5.26rem; top: 50%; width: 7px; height: 7px;
  margin-top: -3.5px; border-radius: 50%; background: var(--ochre); }
.rline { height: 1px; background: var(--ochre); opacity: .55; }

/* ── the shapes that hang off the rail ── */
.rlist { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: .85rem 1rem .9rem; margin-top: .5rem; }

.ritem { display: flex; align-items: center; gap: .65rem; padding: .38rem 0;
  border: none; border-top: 1px solid var(--hair); font: 1.02rem/1.35 var(--book); color: var(--ink);
  background: none; width: 100%; text-align: left; cursor: pointer; }
.ritem:first-child { border-top: none; padding-top: .1rem; }
.ritem.off { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--rule); }
.rtick { flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 1.4px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; font: .78rem var(--book);
  color: var(--card); background: var(--paper); }
.rtick.on { background: var(--sage); border-color: var(--sage); }
.rwho { font: 600 .52rem var(--slab); text-transform: uppercase; letter-spacing: .16em;
  color: var(--faint); margin-top: .55rem; }

.rtwo { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .2rem; }
.rone { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .65rem .8rem;
  text-align: left; color: inherit; cursor: pointer; }
.rone .rsay { font-size: 1.04rem; padding-top: 0; }
.rclash { font: 600 .54rem var(--slab); text-transform: uppercase; letter-spacing: .16em;
  color: var(--barn); margin-top: .55rem; }

.rpic { margin-top: .5rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  background: var(--card); display: block; width: 100%; padding: 0; cursor: pointer; }
.rpic img { display: block; width: 100%; aspect-ratio: 20 / 13; object-fit: cover; }

.rgift { margin-top: 1.1rem; border-radius: 16px; overflow: hidden; background: var(--card);
  border: 1px solid var(--line); width: 100%; padding: 0; text-align: left; color: inherit; cursor: pointer; }
.rgift img { display: block; width: 100%; aspect-ratio: 20 / 13; object-fit: cover; }
.rgift .rcap { padding: .8rem 1rem .9rem; }
.rgift .rcap .rsay { padding-top: 0; }
.rgift .rcap .rkick b { color: var(--ochre); letter-spacing: .1em; font-weight: 600; }

.ropen { display: grid; grid-template-columns: 5rem 1fr; column-gap: 1.35rem; padding: .85rem 0; }
.ropen .rsay { color: var(--muted); font-weight: 400; font-style: italic; }

/* ── the lead ── */
#greet.lead { font: 340 1.52rem/1.3 var(--slab); color: var(--hero); letter-spacing: -.004em;
  text-wrap: pretty; padding-right: .2rem; margin-top: .15rem; }

#greet.lead .cite { display: inline; font: inherit; font-weight: 480; color: var(--ochre);
  background: none; border: none; padding: 0; text-align: left; cursor: pointer; }
#greet.lead .cite:hover, #greet.lead .cite:focus-visible { text-decoration: underline dotted currentColor;
  text-underline-offset: .3em; }
.leadby { font: 600 .5rem var(--slab); text-transform: uppercase; letter-spacing: .18em;
  color: var(--faint); margin-top: .6rem; }

/* ── the envelope ── */
.rbody .env { margin-top: .5rem; }
.env { position: relative; }
.env-back { position: relative; display: block; width: 100%; box-sizing: border-box; background: var(--card);
  border: 1px solid var(--hair); border-radius: 14px; height: 208px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(44,40,34,.08); padding: 0; color: inherit; font: inherit; text-align: inherit; }
button.env-back { cursor: pointer; }
.env-flap { position: absolute; left: -1px; right: -1px; top: -1px; height: 118px; background: var(--card-hi);
  border: 1px solid var(--hair); clip-path: polygon(0 0, 100% 0, 50% 100%); z-index: 2; }
.env-flap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(32,25,15,0), rgba(32,25,15,.05)); }

.env-seal { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); width: 44px; height: 44px;
  border-radius: 50%; background: var(--barn); box-shadow: 0 3px 8px rgba(0,0,0,.18), 0 0 0 3px var(--card) inset;
  z-index: 3; display: flex; align-items: center; justify-content: center; color: var(--card); }
.env-seal svg.ic { width: 26px; height: 26px; display: block; }
.env-to { position: absolute; left: 0; right: 0; bottom: 38px; text-align: center; font: 1.45rem/1 var(--script); color: var(--hero); z-index: 1; }
.env-from { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font: 600 .48rem var(--slab);
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted); z-index: 1; }
.env-hint { text-align: center; margin: .7rem 0 0; font: .85rem var(--script); color: var(--muted); }
.env.open .env-back { height: 74px; border-radius: 14px 14px 12px 12px; overflow: visible; }
.env.open .env-flap, .env.open .env-seal, .env.open .env-to, .env.open .env-from { display: none; }
.env-card { position: relative; margin: -46px 14px 0; background: var(--card); border: 1px solid var(--hair); border-radius: 14px;
  padding: 1rem 1.05rem .95rem; box-shadow: 0 14px 34px rgba(44,40,34,.10), 0 1px 0 rgba(255,255,255,.7) inset; z-index: 4;
  display: flex; flex-direction: column; gap: .4rem; }
.env-lbl { font: 600 .46rem var(--slab); letter-spacing: .18em; text-transform: uppercase; color: var(--ochre); }
.env-kw { font: 1.35rem/1.32 var(--script); color: var(--hero); background: none; border: none; padding: 0; text-align: left; cursor: pointer; }
.env-kw:hover, .env-kw:focus-visible { text-decoration: underline dotted var(--rule); text-underline-offset: .35em; }
.env-k { display: flex; gap: .6rem; align-items: baseline; font: .95rem var(--book); color: var(--ink); }
.env-k .l { flex: 0 0 3.6rem; font: 600 .46rem var(--slab); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.env-in { font: .86rem var(--book); color: var(--muted); }
.env-card .lacts { margin-top: .4rem; }

/* ── chips ── */
.chip { font: 600 .6rem var(--slab); text-transform: uppercase; letter-spacing: .13em;
  color: var(--muted); background: var(--card); border: 1px solid var(--hair);
  border-radius: 999px; padding: .34rem .7rem; cursor: pointer; }
.chip:hover, .chip:focus-visible { color: var(--hero); border-color: var(--line); }
.chip.on { color: var(--slate); border-color: var(--slate); }
.chips { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: center; align-items: baseline; }

.daychips { flex-wrap: nowrap; gap: .3rem; }
.daychips .chip { min-width: 2em; padding: .34rem 0; text-align: center; letter-spacing: 0; }

/* ── the house's paper: the card, and the lens's sheet ── */
.kcard, .scard { position: relative; isolation: isolate; width: 100%;
  background: var(--card); border: 1px solid var(--hair); border-radius: 20px;

  box-shadow: 0 1px 2px rgba(44,40,34,.05), 0 7px 16px rgba(44,40,34,.07),
    0 24px 48px rgba(44,40,34,.09), 0 1px 0 rgba(255,255,255,.65) inset;
  display: flex; flex-direction: column; align-items: center; }

.kcard::after, .scard::after, #greet::after, .kletter::after { content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none; opacity: .55;
  transition: opacity .5s ease;
  background-image: var(--tooth); }
.kcard.bare::after { opacity: 0; }

.kcard { max-width: 27rem; padding: 1.65rem 1.35rem 1.35rem; gap: .5rem;
  text-align: center; transform-origin: 50% 92%; touch-action: none;
  transform: rotate(-.45deg); transition: transform .4s cubic-bezier(.2,.8,.3,1),
    background-color .5s ease, border-color .5s ease, box-shadow .5s ease,
    border-radius .5s ease, max-width .45s ease; }

/* the day under the card still scrolls */
#said .kcard { touch-action: pan-y; }

.kcard.bare { background: none; border-color: transparent; box-shadow: none; }

.kcard.note { max-width: 23.5rem; border-radius: 12px; background: var(--card-hi);
  transform: rotate(.5deg);
  box-shadow: 0 1px 2px rgba(44,40,34,.05), 0 5px 12px rgba(44,40,34,.06),
    0 16px 32px rgba(44,40,34,.08), 0 1px 0 rgba(255,255,255,.6) inset; }
.kcard.note .sign path { stroke: var(--ochre); opacity: .55; }
.kcard.note .sign circle { fill: var(--ochre); opacity: .55; }

.kedge { position: absolute; left: .8rem; top: .34rem; width: calc(100% - 1.6rem);
  height: 8px; overflow: visible; pointer-events: none; }
.kedge .loop { fill: none; stroke: transparent; stroke-width: 2.4; stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; }
.kcard.plan .kedge .loop { stroke: var(--slate); animation: k-ring .6s ease .1s forwards; }
.kcard.note .kedge .loop { stroke: var(--ochre); animation: k-ring .6s ease .1s forwards; }

.kseal { width: 2.15rem; height: 1.25rem; flex: none; margin-bottom: -.25rem; overflow: visible; }
.kseal .loop { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; }
.kseal .seal-leaf, .kseal .seal-sun { display: none; }
.kcard.note .kseal .seal-leaf { display: inline; }
.kcard.plan .kseal .seal-sun { display: inline; }
.kcard.note .seal-leaf .loop { stroke: var(--ochre); animation: k-ring .45s ease .25s forwards; }
.kcard.note .seal-leaf .loop:nth-child(2) { animation-delay: .4s; }
.kcard.note .seal-leaf .loop:nth-child(3) { animation-delay: .62s; }
.kcard.plan .seal-sun .loop { stroke: var(--slate); animation: k-ring .45s ease .25s forwards; }
.kcard.plan .seal-sun .loop:nth-child(2) { animation-delay: .42s; }
.kcard.plan .seal-sun .loop:nth-child(n+3) { animation-delay: .6s; animation-duration: .25s; }

.scard .kseal .loop, .scard .kedge .loop { stroke-dashoffset: 0; }
.scard.note .kseal .seal-leaf { display: inline; }
.scard.plan .kseal .seal-sun { display: inline; }
.scard.note .seal-leaf .loop, .scard.note .kedge .loop { stroke: var(--ochre); }
.scard.plan .seal-sun .loop, .scard.plan .kedge .loop { stroke: var(--slate); }
.kcard.held { transform: rotate(0deg); }
.kcard.rising { animation: k-rise .46s cubic-bezier(.2,.9,.3,1) both; }
@keyframes k-rise { from { opacity: 0; transform: translateY(28px) rotate(-2.4deg) scale(.96); } }
.kcard.settle { animation: k-lay .5s cubic-bezier(.3,.85,.3,1) both; }
@keyframes k-lay { to { opacity: 0; transform: translateY(10px) rotate(.3deg) scale(.985); } }
.kcard.leave { animation: k-leave .42s cubic-bezier(.4,0,.7,.2) both; }
@keyframes k-leave { to { opacity: 0; transform: translateY(64px) rotate(2.2deg) scale(.96); } }

.kcard.kept { pointer-events: none; }
.kept-word { font: 1.2rem var(--script); color: var(--ochre); animation: k-fade .35s ease both; }
.kcard.plan .kept-word { color: var(--slate); }
.kcard.file-tree { animation: k-file-l .52s cubic-bezier(.45,.05,.7,.35) both; }
.kcard.file-ahead { animation: k-file-r .52s cubic-bezier(.45,.05,.7,.35) both; }
@keyframes k-file-l { 28% { transform: translateX(1.3rem) rotate(1deg); opacity: 1; }
  to { transform: translateX(-130%) translateY(-1.1rem) rotate(-5deg); opacity: 0; } }
@keyframes k-file-r { 28% { transform: translateX(-1.3rem) rotate(-1deg); opacity: 1; }
  to { transform: translateX(130%) translateY(-1.1rem) rotate(5deg); opacity: 0; } }
.kwords { font: 400 1.4rem/1.36 var(--book); color: var(--hero); text-wrap: balance;
  white-space: pre-wrap; overflow-wrap: break-word; max-width: 100%; }

.heard { border-radius: .3em; padding: 0 .1em; margin: 0 -.1em;
  background: rgba(194,140,62,.16); animation: k-heard .9s ease both; }
@keyframes k-heard { from { background: rgba(194,140,62,0); } }

.ktitle { font: 1.48rem/1.42 var(--script); color: var(--char); text-wrap: balance;
  max-width: 100%; margin-bottom: .1rem;
  animation: k-write 560ms cubic-bezier(.25,.6,.3,1) both, k-ink 900ms ease-out both; }
.kcard.named .kwords { animation: k-taken .6s ease .15s both; }

.kread { font: .92rem/1.4 var(--script); color: var(--faint); max-width: 100%;
  overflow-wrap: anywhere; margin: -.1rem 0 .35rem; }
.kstill { color: var(--muted); text-wrap: balance; }
@keyframes k-taken { to { opacity: 0; transform: translateY(6px) scale(.985); filter: blur(2px); } }

/* ── the key: a mark, and a value when there is one ── */
.klines { display: flex; flex-direction: column; gap: .1rem; align-items: stretch;
  width: 100%; max-width: 19rem; margin: 0 auto; }
.kline { display: flex; align-items: center; gap: .62rem;
  font: 1.14rem/1.72 var(--script); color: var(--muted); max-width: 100%; }

.kmk { flex: 0 0 24px; height: calc(1.14rem * 1.72); align-self: flex-start;
  display: grid; place-items: center; color: var(--char); }
.kmk svg.ic { width: 24px; height: 24px; display: block; }
.kline.writing { animation: k-write 480ms cubic-bezier(.25,.6,.3,1) both, k-ink 900ms ease-out both; }
@keyframes k-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes k-ink { from { opacity: .45; } to { opacity: 1; } }
.kline.slate { color: var(--slate); }

.kmore { display: flex; flex-direction: column; }

.kline.plus { align-items: center; }
.kline.plus .kmk { color: var(--ochre); }

.picker { display: flex; flex-wrap: wrap; align-items: center; gap: .05rem .2rem; min-width: 0; }
.pick { display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .55rem .18rem .35rem; border: 0; background: none;
  border-radius: 999px; cursor: pointer; color: var(--ochre); }
.pick:hover, .pick:focus-visible { background: var(--card-hi); }
.pick svg.ic { width: 20px; height: 20px; display: block; }
.pick .pl { font: 1.05rem/1.4 var(--script); color: var(--ochre); }

.endchips { margin-top: .35rem; }
.endwater { display: flex; flex-direction: column; align-items: center; }
.endwater .chips { flex-wrap: wrap; justify-content: center; }

.kline.felt .dots-row { display: flex; gap: .3rem; }
.kline.felt .dot { background: none; border: 0; cursor: pointer; padding: 0 .08rem;
  font-size: 1.05rem; line-height: 1.72; color: var(--line); }
.kline.felt .dot.on { color: var(--ochre); }
.kline.felt .dot:hover, .kline.felt .dot:focus-visible { color: var(--muted); }
.kline.felt .dot.on:hover, .kline.felt .dot.on:focus-visible { color: var(--hero); }

button.kline.grey { background: none; border: 0; cursor: pointer; text-align: left;
  padding: 0; width: 100%; color: var(--faint); }
.kline.grey .val, .kline.grey .kmk { color: var(--faint); }
.kline.grey:hover .val, .kline.grey:focus-visible .val { color: var(--muted); }
.kline.grey.stranger .val { font-size: .92rem; }
.kline.grey .kwhy { font: .86rem/1.4 var(--script); color: var(--faint); margin-inline-start: .3rem; }
.kline.kwhere { color: var(--muted); font-size: 1rem; align-items: flex-start; }
.kline.kwhere .val { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }
.kline.kwhere .ksource { flex: 0 0 auto; align-self: center; white-space: nowrap; }

.kmiss { font: .92rem var(--script); color: var(--faint); background: none; border: none;
  cursor: pointer; padding: .1rem .05em; max-width: 100%; }
button.kmiss:hover, button.kmiss:focus-visible { color: var(--muted); }
div.kmiss { cursor: default; }

.kmiss-row { position: relative; display: block; max-width: 100%;
  padding-inline-end: 1.5rem; }
.kmiss-row .kmiss { padding-inline: .1em; }

.kmiss-no { position: absolute; inset-inline-end: -.5rem; top: 50%;
  transform: translateY(-50%); min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; }
.kmiss-note { font: .82rem/1.4 var(--script); color: var(--faint); padding: .1rem .1em 0; }

/* ── who sees it, who is in, and the sheet ── */
.share-line { font: 1.08rem/1.7 var(--script); color: var(--muted); text-align: center; margin-top: .35rem; }

.kline.share-line { text-align: left; margin-top: 0; }
.share-line .val { color: var(--hero); }
.share-line .mk { color: var(--ochre); font-family: var(--slab); font-size: .82em; }

.seen-line { display: block; width: 100%; margin: .2rem 0 0; padding: .2rem 0; font: .92rem var(--script);
  color: var(--faint); background: none; border: none; cursor: pointer; text-align: center; }
.seen-line:hover, .seen-line:focus-visible { color: var(--hero); }
.seen-line .mk { color: var(--ochre); font-family: var(--slab); font-size: .82em; }

.in-line.quiet { font-size: .95rem; color: var(--sage); }
.who-sheet { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .35rem 0 .2rem; }
.who-h { font: 600 .55rem var(--slab); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: .3rem; }
.who-opt { font: 1.05rem var(--script); color: var(--faint); background: none; border: none; cursor: pointer; padding: .24rem .6rem; }
.who-opt:hover, .who-opt:focus-visible { color: var(--hero); }
.who-opt.on { color: var(--slate); }
.who-opt.who-new { color: var(--ochre); }

.in-line { font: 1.05rem/1.6 var(--script); color: var(--slate); text-align: center; margin-top: .2rem; }

.in-line.moved { font-size: .92rem; opacity: .72; font-style: italic; }

.reach-faces { display: inline-flex; align-items: center; gap: .06rem;
  vertical-align: -.5em; margin-right: .25rem; }
.reach-faces .crest { width: 1.55rem; height: 1.55rem; }

.lens-menu { display: flex; justify-content: center; gap: .9rem; margin-top: .55rem; }
.lens-menu .pkey { min-width: 3.9rem; flex-direction: column; gap: .05rem; padding-bottom: .3rem; }
.pk-word { font: 600 .52rem var(--slab); text-transform: uppercase; letter-spacing: .14em; color: var(--faint); }
.pkey:hover .pk-word, .pkey.on .pk-word { color: inherit; }
.lens-water { margin: .2rem .2rem 0; padding: .55rem .3rem .1rem; border-top: 1px solid var(--hair);
  display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.lens-water .down-q { margin: 0; }
.who-list { display: flex; flex-direction: column; align-items: center; gap: .05rem; }
.knot-name { width: 11.5rem; padding: .4rem .7rem; margin: .2rem 0 .35rem; font: 1rem var(--book);
  color: var(--ink); background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; text-align: center; }
.who-why { font: .82rem/1.4 var(--script); color: var(--faint); text-align: center;
  max-width: 15rem; padding: .1rem .6rem .2rem; }
.inst.who-inst.open { max-height: 30rem; }

.sheet-back { position: fixed; inset: 0; z-index: 12; background: rgba(32,25,15,.34);
  display: flex; align-items: center; justify-content: center; padding: 1.4rem; }
.sheet { background: var(--paper); border-radius: 16px; padding: 1.4rem 1.3rem;
  max-width: 23rem; width: 100%; max-height: 92vh; overflow-y: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  box-shadow: 0 24px 60px rgba(32,25,15,.28); }
.sheet-h { font: 600 .62rem var(--slab); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sheet-q { font: 1.1rem var(--script); color: var(--hero); }
.sheet input { width: 100%; max-width: 15rem; text-align: center; font: 1.15rem var(--book);
  color: var(--ink); background: none; border: none; border-bottom: 1px solid var(--ochre);
  outline: none; border-radius: 0; padding: .3rem 0 .4rem; }
.invite-canvas { width: 100%; max-width: 19rem; height: auto; border-radius: 8px;
  box-shadow: 0 12px 30px rgba(44,40,34,.16); }
.sheet-acts { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.sheet-note { font: .82rem var(--script); color: var(--faint); text-wrap: balance; }

/* ── the card's instruments: the ribbon, the faces, the sun, the keep ── */
.val { display: inline-block; cursor: pointer; touch-action: none;
  user-select: none; -webkit-user-select: none; font: inherit; color: inherit;
  background: none; border: none; border-bottom: 1.5px solid transparent;
  padding: 0 .08em .05em; transition: transform .14s cubic-bezier(.2,.8,.3,1), color .2s; }
.val.bump { transform: scale(1.09); }
.val.tuning, .val.open { border-bottom-style: solid; border-bottom-color: var(--slate); color: var(--hero); }

.val.mine { font-family: var(--book); font-size: .94em; color: var(--hero); }
.val.stir { animation: k-stir 1.05s cubic-bezier(.3,.7,.4,1) .18s both; }
@keyframes k-stir {
  0% { transform: translateX(0); } 22% { transform: translateX(4.5px) rotate(.5deg); }
  46% { transform: translateX(-3.5px) rotate(-.4deg); } 68% { transform: translateX(1.6px); }
  100% { transform: translateX(0); } }

.kreading { display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
  animation: k-handed .5s cubic-bezier(.2,.8,.3,1) both; }
@keyframes k-handed { from { opacity: 0; transform: translateY(30px); } }
.pen { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.inkline { width: 6.5rem; height: 2px; border-radius: 2px; background: var(--ochre);
  box-shadow: 0 0 2px rgba(194,140,62,.55), 0 0 12px rgba(194,140,62,.4);
  animation: k-wet 3.2s ease-in-out infinite; }
@keyframes k-wet {
  0% { transform: scaleX(0); opacity: 0; }
  14% { opacity: .95; }
  58% { transform: scaleX(1); opacity: .85; }
  84% { opacity: .2; }
  100% { transform: scaleX(1); opacity: 0; } }

.nib { position: relative; width: 26px; height: 22px; }
.nib i { position: absolute; left: 9px; top: 8px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--rule); box-shadow: 0 3px 5px rgba(44,40,34,.16);
  animation: k-hover 2.6s ease-in-out infinite; }
@keyframes k-hover {
  0%,100% { transform: translate(0,0) scale(1); opacity: .55; }
  25% { transform: translate(5px,-2.5px) scale(.94); opacity: .85; }
  55% { transform: translate(-3px,1.5px) scale(1.06); opacity: .7; }
  78% { transform: translate(2px,2px) scale(.97); opacity: .5; } }

.sign { width: 7rem; height: 12px; opacity: .75; }
.sign path, .sign circle { stroke: var(--rule); fill: none; stroke-width: 1.4; stroke-linecap: round; }
.sign circle { fill: var(--rule); stroke: none; }
.sign .stroke { stroke-dasharray: 150; stroke-dashoffset: 150; animation: k-draw .62s cubic-bezier(.3,.7,.3,1) forwards; }
.sign .dot { opacity: 0; animation: k-pop .3s ease .58s forwards; }
@keyframes k-draw { to { stroke-dashoffset: 0; } }
@keyframes k-pop { from { opacity: 0; } to { opacity: 1; } }

.inst { width: 100%; overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height .42s cubic-bezier(.2,.8,.3,1), opacity .3s ease; }
.inst.open { max-height: 13rem; opacity: 1; }

.inst.rule-inst.open { max-height: 19rem; }
.cadencechips { margin-top: .35rem; }
.inst-in { padding: .55rem 0 .1rem; }
.ribbon { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; touch-action: pan-x; padding: .15rem 0 .3rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.ribbon::-webkit-scrollbar { display: none; }
.rib-day { flex: 0 0 4.4rem; scroll-snap-align: center; background: none; border: none;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .35rem 0; cursor: pointer; color: var(--faint);
  transition: color .2s, transform .2s cubic-bezier(.2,.8,.3,1); }
.rib-day .dw { font: 600 .58rem var(--slab); text-transform: uppercase; letter-spacing: .14em; }
.rib-day .dn { font: 400 1.32rem var(--book); line-height: 1.1; position: relative; }
.rib-day.on { color: var(--hero); transform: scale(1.14); }
.rib-day.on .dw { color: var(--slate); }
.rib-day.today .dn::after { content: ""; position: absolute; left: 50%; bottom: -.24rem;
  transform: translateX(-50%); width: 3px; height: 3px; border-radius: 50%; background: var(--ochre); }

.rib-day .dring { position: absolute; left: 50%; top: 50%;
  width: calc(100% + 1.05rem); height: calc(100% + .4rem);
  transform: translate(-50%, -53%); overflow: visible; pointer-events: none; opacity: 0; }
.rib-day.on .dring { opacity: 1; }
.dring .loop, .ring .loop { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 100; stroke-dashoffset: 100; }
.dring .loop { stroke: var(--char); stroke-width: 1.5; }
.rib-day.on .dring .loop { animation: k-ring .45s cubic-bezier(.3,.7,.3,1) forwards; }
@keyframes k-ring { to { stroke-dashoffset: 0; } }

#step-mark { width: 7rem; height: 7rem; color: var(--char); margin-bottom: .2rem;
  animation: k-settle .7s cubic-bezier(.25,.8,.3,1) both; }
@keyframes k-settle { from { opacity: 0; transform: scale(.9); } }

.rib-under { display: flex; justify-content: center; align-items: baseline; gap: .3rem;
  margin: .1rem 0 .2rem; }
.rib-none { background: none; border: none;
  font: 1rem var(--script); color: var(--faint); cursor: pointer; padding: .2rem .6rem; }
.rib-none:hover, .rib-none:focus-visible { color: var(--muted); }
.rib-month { background: none; border: none; font: .95rem var(--script); color: var(--faint);
  cursor: pointer; padding: .2rem .55rem; }
.rib-month:hover, .rib-month:focus-visible { color: var(--muted); }

.who-faces { display: flex; flex-wrap: wrap; gap: .05rem .3rem; justify-content: center;
  padding: .15rem 0 .3rem; max-width: 19rem; margin: 0 auto; }
.who-face { display: flex; flex-direction: column; align-items: center; gap: .02rem;
  background: none; border: none; cursor: pointer; padding: .3rem .3rem .2rem;
  min-width: 3.6rem; min-height: 3.4rem; }
.who-face .cap { font: .82rem var(--script); color: var(--faint); max-width: 5rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
.who-face .cap .mk { color: var(--ochre); font-family: var(--slab); font-size: .78em; }
.who-face.on .cap { color: var(--hero); }
.who-face:hover .cap, .who-face:focus-visible .cap { color: var(--muted); }
.who-face.on:hover .cap { color: var(--hero); }

.crest { overflow: visible; color: var(--faint); transition: color .2s; }
.who-face .crest { width: 2.4rem; height: 2.4rem; }
.who-face.on .crest { color: var(--hero); }
.crest path, .crest circle, .crest ellipse { fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; }
.crest .warm { stroke: var(--ochre); }
.crest .dash { stroke-dasharray: 2.5 3.2; }
.crest .fine { stroke-width: 1; }
.crest.dim { opacity: .45; }
.crest .cring { stroke: var(--ochre); stroke-width: 1.6;
  stroke-dasharray: 100; stroke-dashoffset: 100; }
.who-face.on .cring { animation: k-ring .45s cubic-bezier(.3,.7,.3,1) forwards; }

.sun { width: 100%; touch-action: none; cursor: ew-resize; display: block; }
.sun .arc { fill: none; stroke: var(--rule); stroke-width: 1.2; opacity: .45; }
.sun .horizon { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; opacity: .8; }
.sun .bead { stroke: rgba(44,40,34,.28); stroke-width: 1; }

.sun .mark { font: 600 8.5px "Fraunces", Georgia, serif; fill: var(--ochre);
  text-anchor: middle; letter-spacing: .02em; }
.sun .tick { stroke: var(--rule); stroke-width: 1; opacity: .45; }
.clockline { font: 400 1.22rem var(--book); color: var(--hero); text-align: center;
  font-variant-numeric: tabular-nums; }

.keepit { margin-top: .4rem; display: flex; flex-direction: column; align-items: center;
  animation: k-fade .4s ease both; }
@keyframes k-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.keepit button { font: 600 .66rem var(--slab); text-transform: uppercase; letter-spacing: .22em;
  color: var(--ochre); background: none; border: none; border-radius: 999px;
  position: relative; padding: .85rem 2.2rem; cursor: pointer; min-height: 3rem;
  transition: transform .12s ease, background .2s ease; }
.keepit button .ring { position: absolute; left: -5px; top: -2px;
  width: calc(100% + 10px); height: calc(100% + 4px); overflow: visible; pointer-events: none; }
.ring .loop { stroke: var(--ochre); stroke-width: 1.5; opacity: .85; }
.keepit .ring .loop { animation: k-ring .55s cubic-bezier(.3,.7,.3,1) .35s forwards; }
.keepit button:hover, .keepit button:focus-visible { color: var(--hero); background: var(--card-hi); }
.keepit button:active { transform: scale(.96); }
.keep-acts { display: flex; align-items: center; gap: .75rem; }

.keepit button.letgo { font: .98rem var(--script); text-transform: none; letter-spacing: normal;
  color: var(--muted); border: none; border-radius: 0; padding: .85rem .5rem; min-height: 3rem; }
.keepit button.letgo:hover, .keepit button.letgo:focus-visible { color: var(--barn); background: none; }

.letgo .strike { position: absolute; left: .25rem; top: 50%; width: calc(100% - .5rem);
  height: 12px; transform: translateY(-54%); overflow: visible; pointer-events: none; opacity: 0; }
.letgo .strike .loop { fill: none; stroke: var(--barn); stroke-width: 1.5; stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; }
.letgo.striking { color: var(--barn); }
.letgo.striking .strike { opacity: 1; }
.letgo.striking .strike .loop { animation: k-ring .22s ease-out forwards; }

.keepit button.leaveit { font: .98rem var(--script); text-transform: none; letter-spacing: normal;
  color: var(--muted); border: none; border-radius: 0; padding: .85rem .5rem; min-height: 3rem; }
.keepit button.leaveit:hover, .keepit button.leaveit:focus-visible { color: var(--hero); background: none; }
.keepit button.leaveit[disabled], .keepit button.letgo[disabled] { opacity: .4; pointer-events: none; }

@media (max-width: 380px) { .keep-acts { gap: .4rem; }
  .keepit button { padding: .85rem 1.5rem; } }
.safe { font: .95rem var(--script); color: var(--faint); margin-top: .42rem; }

/* ── the past: days as pages ── */
#past { position: relative; width: 100%; max-width: 24rem; display: flex; flex-direction: column;
  align-items: stretch; -webkit-tap-highlight-color: transparent;

  overflow-anchor: none; }
.pd-rule { display: block; margin: .1rem auto; width: 100%; max-width: 14rem; overflow: visible; }

/* ── its head ── */
.pd-head { position: sticky; top: 0; z-index: 3; display: flex; flex-direction: column; gap: .55rem;
  padding: 0 0 .5rem; background: var(--paper); }
.pd-head::before { content: ""; position: absolute; left: -1.5rem; right: -1.5rem; top: -1.4rem; bottom: 0;
  background: var(--paper); z-index: -1; }

.pd-search { display: flex; align-items: center; gap: .55rem; background: var(--card);
  border: 1px solid var(--hair); border-radius: 999px; padding: .5rem .95rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 8px rgba(0,0,0,.03); }
.pd-search:focus-within { border-color: var(--ochre); }
.pd-lens { width: 15px; height: 15px; flex: none; color: var(--muted); }
.pd-seek { flex: 1; min-width: 0; font: 400 1rem var(--book); color: var(--hero); background: none;
  border: none; outline: none; padding: .1rem 0; -webkit-appearance: none; appearance: none; }
.pd-seek::placeholder { color: var(--faint); }

.pd-seek:focus-visible { outline: none; }
.pd-seek::-webkit-search-cancel-button, .pd-seek::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.pd-clear { font: 600 .55rem var(--slab); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  background: none; border: none; padding: .2rem 0 .2rem .3rem; cursor: pointer; }
.pd-clear:hover, .pd-clear:focus-visible { color: var(--hero); }
.pd-count { font: 600 .52rem var(--slab); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 0 .2rem; }
.pd-count b { color: var(--hero); font-weight: 600; }

.pd-else { display: flex; flex-direction: column; gap: .3rem; padding: .1rem .2rem .2rem; }
.pd-else-word { font: 600 .52rem var(--slab); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pd-else-row { display: flex; align-items: baseline; gap: .5rem; width: 100%; text-align: left;
  background: none; border: 0; padding: .28rem .1rem; cursor: pointer; border-bottom: 1px solid var(--hair); }
.pd-else-row:last-child { border-bottom: 0; }
.pd-else-w { flex: 1; min-width: 0; font: 400 .93rem/1.35 var(--book); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-else-row:hover .pd-else-w, .pd-else-row:focus-visible .pd-else-w { color: var(--hero); }
.pd-else-where { flex: none; font: 600 .5rem var(--slab); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.pd-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.pd-chip { font: 600 .5rem var(--slab); text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); background: var(--card); border: 1px solid var(--hair);
  border-radius: 999px; padding: .38rem .62rem; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .16s cubic-bezier(.2,.8,.3,1); }
.pd-chip:hover, .pd-chip:focus-visible { color: var(--hero); border-color: var(--line); }
.pd-chip:active { transform: scale(.95); }
.pd-chip.on { color: var(--paper); background: var(--hero); border-color: var(--hero); }
.pd-chip .mk { color: var(--ochre); font-family: var(--slab); font-size: .8em; }

.pd-share { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pd-share-w { font: .95rem var(--script); color: var(--faint); }

.pd-mline { display: flex; align-items: baseline; gap: .6rem; background: none; border: none;
  padding: .15rem 0 0; text-align: left; cursor: pointer; color: inherit; min-height: 2rem; }
.pd-mname { font: 1.35rem/1 var(--script); color: var(--hero); }
.pd-myear { font: 600 .5rem var(--slab); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.pd-mline:hover .pd-mname, .pd-mline:focus-visible .pd-mname { color: var(--ochre); }

/* ── its rail ── */
.pd-rail { position: absolute; top: 100%; right: -1rem; width: 26px; z-index: 4; touch-action: none; cursor: grab;
  -webkit-user-select: none; user-select: none; }
.pd-rail.held { cursor: grabbing; }
.pd-track { position: absolute; left: 12px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.pd-tick { position: absolute; left: 0; width: 26px; text-align: center; font: 600 .4rem var(--slab);
  letter-spacing: .08em; color: var(--faint); transform: translateY(-50%); background: var(--paper); padding: 2px 0;
  pointer-events: none; }
.pd-tick.year { color: var(--hero); }

.pd-knob { position: absolute; left: 4px; width: 17px; height: 17px; border-radius: 50%; border: 2.5px solid var(--char);
  border-bottom-color: var(--ochre); background: var(--card); transform: translateY(-50%) rotate(-20deg);
  box-shadow: 0 2px 6px rgba(0,0,0,.12); transition: transform .16s cubic-bezier(.2,.8,.3,1); }
.pd-rail.held .pd-knob { transform: translateY(-50%) rotate(-20deg) scale(1.15); }
.pd-bubble { position: absolute; right: calc(100% + .9rem); transform: translateY(-50%); font: 1.2rem/1 var(--script);
  color: var(--hero); background: var(--card); border: 1px solid var(--hair); border-radius: 14px; padding: .5rem .9rem .42rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.10); white-space: nowrap; pointer-events: none; }
.pd-bubble small { display: block; margin-top: .25rem; font: 600 .46rem var(--slab); letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }

/* ── its pages ── */
.pd-list { display: flex; flex-direction: column; gap: .8rem; padding: .3rem 1.5rem .5rem 0; }
.pd-list:empty { display: none; }

.pd-leaf { display: flex; gap: .7rem; align-items: center; width: 100%; background: var(--card-hi);
  border: 1px solid var(--hair); border-radius: 14px; padding: .55rem .7rem .55rem .55rem; text-align: left;
  cursor: pointer; color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
.pd-lpic { position: relative; width: 54px; height: 54px; border-radius: 9px; overflow: hidden; flex: none; background: var(--card); }
.pd-lpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-lbody { flex: 1; min-width: 0; }
.pd-llbl { font: 600 .46rem var(--slab); letter-spacing: .16em; text-transform: uppercase; color: var(--ochre); }
.pd-lw { font: 400 .9rem/1.3 var(--book); color: var(--ink); margin-top: .15rem; }
.pd-lgo { flex: none; font: 600 .5rem var(--slab); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pd-leaf:hover .pd-lw, .pd-leaf:focus-visible .pd-lw { color: var(--hero); }

.pd-day { background: var(--card); border: 1px solid var(--hair); border-radius: 16px; padding: .85rem 1rem .9rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.7) inset; }
.pd-dh { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .2rem; }
.pd-dayname { font: 1.25rem/1 var(--script); color: var(--hero); }
.pd-date { font: 600 .5rem var(--slab); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pd-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: .55rem 0 .25rem; }
.pd-tile { position: relative; aspect-ratio: 1; border-radius: 9px; overflow: hidden; background: var(--card-hi);
  border: 1px solid var(--hair); padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pd-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem .5rem .42rem;
  background: linear-gradient(rgba(32,25,15,0), rgba(32,25,15,.58)); color: var(--paper);
  font: 400 .72rem/1.25 var(--book); text-align: left; display: flex; align-items: flex-end;
  justify-content: space-between; gap: .3rem; }
.pd-cw { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
.pd-noun { flex: none; font: 600 .42rem var(--slab); letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid rgba(245,242,235,.7); border-radius: 999px; padding: .18rem .4rem; }
.pd-row { display: flex; gap: .7rem; align-items: baseline; width: 100%; padding: .55rem 0; background: none;
  border: none; border-bottom: 1px solid var(--hair); text-align: left; cursor: pointer; color: inherit; font: inherit;
  -webkit-tap-highlight-color: transparent; }
.pd-row:last-child { border-bottom: 0; padding-bottom: .1rem; }
.pd-when { flex: 0 0 3.5rem; font: 600 .46rem var(--slab); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.pd-words { flex: 1; min-width: 0; font: 400 .93rem/1.35 var(--book); color: var(--ink); overflow-wrap: anywhere; }
.pd-row:hover .pd-words, .pd-row:focus-visible .pd-words { color: var(--hero); }
.pd-sum { flex: none; font: 600 .64rem var(--slab); color: var(--ink); letter-spacing: .04em; }

.pd-words mark, .pd-cw mark { background: none; color: inherit; font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--ochre); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }

.pd-month { position: relative; width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid var(--hair);
  background: var(--card); padding: 0; text-align: left; cursor: pointer; color: inherit; font: inherit;
  box-shadow: 0 8px 22px rgba(0,0,0,.05); -webkit-tap-highlight-color: transparent; }
.pd-cover { position: relative; aspect-ratio: 2.5; overflow: hidden; border-bottom: 1px solid var(--hair); background: var(--card-hi); }
.pd-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-shade { position: absolute; inset: 0; background: linear-gradient(rgba(32,25,15,0) 45%, rgba(32,25,15,.5)); }
.pd-cover .pd-mname { position: absolute; left: 1rem; bottom: .55rem; font: 1.7rem/1 var(--script); color: var(--paper);
  text-shadow: 0 1px 8px rgba(32,25,15,.55); }
.pd-month.bare .pd-cover { aspect-ratio: auto; padding: .9rem 1rem .1rem; border-bottom: none; background: none; }
.pd-month.bare .pd-cover .pd-mname { position: static; color: var(--hero); text-shadow: none; }
.pd-mfoot { padding: .6rem 1rem .75rem; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.pd-mn { font: 600 .5rem var(--slab); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.pd-loved { font: 400 .9rem/1.3 var(--book); color: var(--ink); text-align: right; min-width: 0; }
.pd-loved::before { content: "\2665\00a0"; color: var(--barn); font-size: .8em; }

/* ── the shelf: rows under a fold ── */
.story-list { padding-right: 0; text-align: left; }
.story-list .pd-day { background: var(--card-hi); }

.shelf-h { font: 1.05rem var(--script); color: var(--muted); background: none; border: none;
  cursor: pointer; padding: .15rem .35rem .3rem; margin: 0 0 .9rem; text-align: left;
  align-self: flex-start; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none; transition: color .2s ease; }
.shelf-h:hover, .shelf-h:focus-visible, .shelf-h:active { color: var(--hero); }
.shelf { display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--hair); border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 1px 2px rgba(44,40,34,.05),
    0 10px 26px rgba(44,40,34,.06); }

.shelf:empty { display: none; }
.t-row { font: .98rem/1.5 var(--book); color: var(--ink); background: none; border: none;
  border-top: 1px solid var(--hair); cursor: pointer; text-align: left;
  padding: .58rem .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; transition: color .2s ease, background-color .2s ease; }
.t-row:first-child { border-top: none; }
.t-row:hover, .t-row:focus-visible { color: var(--hero); }
.t-row:active { color: var(--hero); background: var(--card-hi); }

/* ── the calendar ── */
#coming { width: 100%; max-width: 24rem; display: flex; flex-direction: column;
  align-items: stretch; gap: .55rem; padding-bottom: 2.2rem; }

#stops { display: flex; justify-content: center; gap: 0; margin: -.35rem 0 -.1rem;
  padding: .2rem; border-radius: 999px; align-self: center;
  position: sticky; top: 1.4rem; z-index: 3;
  background: #DED8CA; border: 1px solid var(--hair);
  box-shadow: 0 2px 10px rgba(44,40,34,.07); }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

  #stops { background: rgba(222,216,202,.86);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15); }
}
.stop { font: 600 .6rem var(--slab); text-transform: uppercase; letter-spacing: .15em;
  color: var(--muted); background: none; border: none; border-radius: 999px;
  cursor: pointer; padding: .42rem .95rem; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: color .2s ease, background-color .25s ease, box-shadow .25s ease; }
.stop.on { color: var(--hero); background: var(--card);
  box-shadow: 0 1px 3px rgba(44,40,34,.14), 0 1px 0 rgba(255,255,255,.6) inset; }
.stop:hover, .stop:focus-visible { color: var(--hero); }

.a-head { display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(to bottom, var(--paper) 74%, transparent);
  padding-bottom: .6rem; }

.a-head + *, .a-row + .a-head, .a-strip + .a-head { margin-top: 0; }
.a-row + .a-head, #wv-head + .a-head { padding-top: 1.5rem; }

.a-name { font: 600 .62rem/1.6 var(--slab); text-transform: uppercase;
  letter-spacing: .2em; color: var(--muted); }

.a-none { font: 400 1rem/1.4 var(--book); font-style: italic; color: var(--faint);
  text-align: center; padding: .1rem 0 .5rem; }

.a-end { font: 600 .56rem/1.7 var(--slab); letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); text-align: center; padding: 1.5rem 0 .4rem; }

.a-row { display: flex; align-items: flex-start; gap: .75rem; width: 100%;
  background: var(--card); border: 1px solid var(--hair); border-radius: 18px;
  cursor: pointer; text-align: left; padding: .75rem .9rem .8rem;
  font-family: var(--book); -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 1px 2px rgba(44,40,34,.05),
    0 10px 26px rgba(44,40,34,.06);
  transition: transform .16s cubic-bezier(.2,.8,.3,1), background-color .22s ease,
    border-color .22s ease, box-shadow .22s ease; }
.a-row:hover { border-color: var(--line); }
.a-row:hover .s-words, .a-row:focus-visible .s-words { color: var(--hero); }
.a-row:active { transform: scale(.983); background: var(--card-hi); }
.rail { flex: none; width: 3.6rem; display: flex; flex-direction: column;
  align-items: center; }

#coming[data-unit="week"] .rail { width: 4.3rem; }
.rail svg { display: block; overflow: visible; }

.s-when { font: 600 .58rem/1.7 var(--slab); color: var(--slate);
  text-transform: uppercase; letter-spacing: .13em;
  text-align: center; white-space: pre-line; padding-top: .12rem; }

#coming[data-unit="week"] .s-when { font: 600 1.3rem/1.08 var(--slab);
  color: var(--char); letter-spacing: .02em; padding-top: .16rem;
  font-variation-settings: "opsz" 30, "SOFT" 40; }
#coming[data-unit="week"] .s-when::first-line { font: 600 .56rem/1.9 var(--slab);
  letter-spacing: .14em; color: var(--slate); font-variation-settings: normal; }
#coming[data-unit="week"] .a-row.bare .s-when,
#coming[data-unit="week"] .a-row.bare .s-when::first-line { color: var(--faint); }

#coming[data-unit="day"] .s-when::first-line { font: 600 1.16rem/1.3 var(--slab);
  letter-spacing: .01em; color: var(--char);
  font-variation-settings: "opsz" 30, "SOFT" 40; }
#coming[data-unit="day"] .a-row.whole .s-when::first-line { font: 600 .58rem/1.7 var(--slab);
  letter-spacing: .13em; color: var(--slate); font-variation-settings: normal; }
#coming[data-unit="day"] .a-row.again .s-when::first-line { color: var(--faint); }

.a-row.yr .rail { align-self: center; }
#coming[data-unit="year"] .s-when { font: 600 1.16rem/1.15 var(--slab);
  color: var(--char); letter-spacing: .015em; padding-top: 0;
  font-variation-settings: "opsz" 30, "SOFT" 40; }
#coming[data-unit="year"] .a-row.bare .s-when { color: var(--faint); }
.a-body { min-width: 0; flex: 1; align-self: center; }
.a-body > span { display: block; }

.s-words { font: 600 1rem/1.4 var(--book); color: var(--ink); }
.a-row .s-words { display: flex; align-items: baseline; gap: .55rem; }
.s-tx { min-width: 0; overflow-wrap: anywhere; }

.s-t { flex: none; width: 3.4rem; text-align: right;
  font: 600 .56rem/1.9 var(--slab); letter-spacing: .1em; color: var(--slate);
  text-transform: uppercase; }

#coming[data-unit="day"] .a-row .s-words { font-size: 1.12rem; }

.a-row .s-words + .s-words { margin-top: .2rem; }
.a-row .s-words.usual { color: var(--faint); font-style: italic; font-weight: 400; }

.s-meta { font: 600 .56rem/1.7 var(--slab); letter-spacing: .12em; color: var(--slate);
  text-transform: uppercase; padding-top: .18rem; }
.a-row.again .s-meta { color: var(--faint); }
.s-more { font: .88rem var(--script); color: var(--faint); padding-top: .14rem; }

.a-row.again { background: transparent; box-shadow: none; }
.a-row.again:active { background: var(--card); }
.a-row.again .s-when { color: var(--faint); }
.a-row.again .s-words { color: var(--muted); }
.a-row.bare { background: transparent; border-color: transparent; box-shadow: none; }
.a-row.bare:active { background: var(--card); transform: scale(.983); }
.a-row.bare .s-when { color: var(--faint); }
.a-row.bare .rail svg { opacity: .55; }

.a-row.beyond { background: transparent; border-style: dashed; box-shadow: none; }
.a-row.beyond:active { background: var(--card); }
.a-row.beyond .s-words { font: .98rem var(--script); color: var(--sage); }

#wv-head { padding: 0 calc(.9rem + 1px); margin-bottom: -.45rem; }

.a-strip { display: block; width: 100%; height: auto; overflow: visible;
  margin: .1rem 0 .1rem; }

#coming[data-unit="year"] #wv-head { padding-left: calc(.9rem + 1px + 3.6rem + .75rem); }

.s-pip { flex: none; width: .62rem; height: .62rem; align-self: flex-start;
  margin: .3rem -.12rem 0 0; overflow: visible; }
.wv-lm .s-pip { margin-top: .22rem; }
#wv-head svg, .a-row.woven > svg { display: block; width: 100%; height: auto;
  overflow: visible; }
.a-row.woven { display: block; padding: .5rem .9rem .6rem; }
.wv-words { display: flex; align-items: baseline; gap: .6rem; margin-top: .1rem; }
.wv-when { flex: none; font: 600 .58rem/1.7 var(--slab); letter-spacing: .13em;
  text-transform: uppercase; color: var(--slate); }

.wv-lm { min-width: 0; font: 600 .92rem/1.4 var(--book); color: var(--ink); }
.wv-lm .lm { display: inline-flex; align-items: center; gap: .2rem; }
.wv-lm .lm + .lm { margin-left: .5rem; }
.a-row.woven.bare .wv-when { color: var(--faint); }
.a-row.woven:hover .wv-lm, .a-row.woven:focus-visible .wv-lm { color: var(--hero); }

.a-gap { pointer-events: none; display: flex; margin: -.34rem 0; }
.a-gap svg { display: block; margin-left: calc(.9rem + 1px); width: 3.6rem; height: auto; }

@keyframes a-rise { from { opacity: 0; transform: translateY(9px); } }
.a-in { animation: a-rise .34s cubic-bezier(.2,.8,.3,1) both; }
#a-new { margin-top: 1rem; }

/* ── the lens ── */
#lens { position: fixed; inset: 0; z-index: 7; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.4rem 1.3rem 0;
  text-align: center; overflow-y: auto; }
.inner { position: relative; max-width: 30rem; width: 100%; margin: auto;
  display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.inner { transition: opacity .2s ease, transform .2s ease; }

.scard { max-width: 27rem; padding: 1.6rem 1.2rem 1.35rem; gap: .8rem; }
#lens.turning .inner { opacity: 0; transform: translateX(var(--slide, 0)); }
.words { font: 400 1.4rem/1.5 var(--book); color: var(--hero); text-wrap: balance;
  white-space: pre-wrap; overflow-wrap: break-word; max-width: 100%; }

.tellable { cursor: pointer; }
.tellable:hover, .tellable:focus-visible { text-decoration: underline dotted var(--rule); text-underline-offset: .35em; }

.story-line { font: .95rem var(--script); color: var(--ochre); }
/* a rhythm's nights, under its own print: one line each, the words its own */
.night-line { font: .95rem var(--script); color: var(--faint); }
/* ...and on a day page, what one night came to, beside the words */
.pd-was { font: .8rem var(--script); color: var(--faint); margin-left: .4rem; white-space: nowrap; }
.story { width: 100%; }
.story-head { text-align: center; margin: .1rem 0 .9rem; }
.story-head .pd-rule { margin: .2rem auto 0; display: block; }
.story-word { font: .95rem var(--script); color: var(--faint); }
.story-name { font: 400 1.4rem/1.35 var(--book); color: var(--hero); margin: .15rem 0 .2rem; text-wrap: balance; }

#retell { width: 100%; max-width: 26rem; padding: .35rem 0 .5rem; text-align: center;
  font: 1.2rem/1.5 var(--book); color: var(--ink); background: none; border: none;
  border-bottom: 1px solid var(--ochre); outline: none; border-radius: 0; }
.tw { font: .92rem var(--script); color: var(--faint); }
.tw.ahead { color: var(--slate); }

.kline.tw .val { font: inherit; color: inherit; }

#inner .kline { width: 100%; max-width: 19rem; margin-left: auto; margin-right: auto; }
.kline.read { color: var(--muted); }
.kline.read .val { font: 1.14rem/1.72 var(--script); }
.own-line { font: .92rem var(--script); color: var(--sage); }
.with-line, .again-line { font: .92rem var(--script); color: var(--slate); }

.from-line { font: .95rem var(--script); color: var(--sage); }
.keep-line { margin-top: .6rem; }
.keep-shared { font: .95rem var(--book); color: var(--ochre); background: none; border: none; cursor: pointer; padding: .3rem .8rem; }
.keep-shared:hover, .keep-shared:focus-visible { color: var(--hero); }
.keep-shared.taken { color: var(--muted); }

/* ── the room beneath a row ── */
.talk { width: 100%; max-width: 27rem; margin: .5rem auto 0; padding: 0 .6rem;
  display: flex; flex-direction: column; gap: .6rem; }
.talk-line { display: flex; flex-direction: column; gap: .1rem; text-align: left; }
.talk-w { font: 1.02rem/1.5 var(--book); color: var(--ink); white-space: pre-wrap; overflow-wrap: break-word; }
.talk-say { width: 100%; margin-top: .1rem; padding: .62rem .9rem; font: 1rem/1.4 var(--book); color: var(--ink);
  caret-color: var(--ochre); background: var(--card); border: 1px solid var(--line); border-radius: 16px; outline: none; }
.talk-say::placeholder { font-style: italic; color: var(--faint); }
.talk-say:focus { border-color: var(--ochre); }
.talk-say:disabled { opacity: .6; }
.t-row .m-from { color: var(--faint); font-size: .9em; }
.felt-line { font: .95rem var(--script); color: var(--ochre); letter-spacing: .1em; }

.still { max-width: min(100%, 26rem); max-height: 38vh; border-radius: 9px;
  border: 1px solid var(--hair); box-shadow: 0 10px 30px rgba(44,40,34,.12); }

/* ── the print: a photograph's own stage ── */
#lens.lens-print { padding: 0; background: #100D09; align-items: stretch; }

#lens.lens-print::after { display: none; }
#lens.lens-print .inner { max-width: none; width: 100%; height: 100%;
  margin: 0; gap: 0; }
.print { position: relative; width: 100%; height: 100%; overflow: hidden; }

.print-frame { position: absolute; inset: 0; }
.print-frame[role=button] { cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.print-frame:focus-visible { outline: 2px solid rgba(245,242,235,.72);
  outline-offset: -5px; border-radius: 4px; }
.print-reel { position: absolute; inset: 0; display: flex;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.print-reel::-webkit-scrollbar { display: none; }
.print-cell { flex: 0 0 100%; height: 100%; scroll-snap-align: center; }

.print-img { display: block; width: 100%; height: 100%; object-fit: contain; }

.print-pips { position: absolute; top: calc(1.4rem + env(safe-area-inset-top, 0px));
  left: 0; right: 0; display: flex; justify-content: center; gap: .34rem;
  pointer-events: none; }
.pip { width: .38rem; height: .38rem; border-radius: 50%;
  background: rgba(245,242,235,.42); box-shadow: 0 1px 3px rgba(16,13,9,.6); }
.pip.on { background: rgba(245,242,235,.95); }

.print-ends { display: flex; align-items: center; gap: .1rem;
  padding-left: .3rem; margin-left: .15rem;
  border-left: 1px solid var(--hair); }
.pend { display: inline-flex; align-items: center; gap: .34rem;
  min-height: 2.9rem; padding: .4rem .55rem; border-radius: 999px;
  white-space: nowrap;
  font: 600 .64rem var(--slab); letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
  background: none; border: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pend:hover, .pend:focus-visible { color: var(--hero); background: var(--card-hi); }

.p-mark { padding: .4rem .85rem; }
.p-mark svg.ic { width: 30px; height: 30px; display: block; }

.p-out.arm { background: var(--ochre); color: #201808; font-weight: 500; }
.p-out.arm:hover, .p-out.arm:focus-visible { background: #D6A055; color: #201808; }

/* ── the print's foot ── */
.print-foot { position: absolute; left: 0; right: 0; bottom: var(--keys);
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: 4.5rem .7rem calc(.8rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(16,13,9,.82) 0%,
    rgba(16,13,9,.52) 40%, rgba(16,13,9,0) 100%); }

.print-foot.rise { animation: p-rise .24s cubic-bezier(.2,.8,.3,1) both; }
@keyframes p-rise { from { opacity: 0; transform: translateY(14px); } }
.print-say { display: flex; flex-direction: column; align-items: center;
  gap: .18rem; text-align: center; pointer-events: none; max-width: 30rem; }
.print-cap { font: 400 1.2rem/1.45 var(--book); color: #F5F2EB;
  text-wrap: balance; white-space: pre-wrap; overflow-wrap: break-word;
  text-shadow: 0 1px 5px rgba(16,13,9,.6); }
.print-from { font: .95rem var(--script); color: rgba(245,242,235,.7); }
.print-safe { font: .9rem/1.4 var(--script); color: rgba(245,242,235,.72); text-wrap: balance;
  text-shadow: 0 1px 5px rgba(16,13,9,.6); }

.print-bar { width: 100%; max-width: 30rem; border-radius: 22px;
  overflow: hidden; background: var(--card);
  border: 1px solid var(--hair);
  box-shadow: 0 10px 26px rgba(44,40,34,.22), 0 1px 0 rgba(255,255,255,.6) inset; }
.print-water { overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height .34s cubic-bezier(.2,.8,.3,1), opacity .28s ease; }
.print-water.open { max-height: 26rem; opacity: 1; padding: .9rem .8rem .3rem; }

.print-row { display: flex; align-items: center; padding: .3rem .2rem; gap: 0; }
.print-menu { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  flex: 1; min-width: 0; gap: .1rem; }

.pkey { display: flex; align-items: center; justify-content: center;
  min-height: 2.9rem; padding: .4rem .25rem;
  background: none; border: none; border-radius: 14px;
  color: var(--muted); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: color .18s, background .18s; }
.pkey:hover, .pkey:focus-visible { color: var(--hero); background: var(--card-hi); }
.pkey.on { color: var(--ochre); background: var(--card-hi); }

.pk-mk { display: flex; align-items: center; justify-content: center; }
.pk-mk svg.ic { width: 30px; height: 30px; display: block; }

.pk-dots { display: inline-flex; gap: .16rem; align-items: center; }
.pk-dot { width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--line); display: block; }
.pk-dot.on { background: var(--ochre); }

.down-dots { display: flex; justify-content: center; gap: .15rem; }
.ddot { font-size: 1.6rem; line-height: 1; min-width: 3rem; min-height: 3rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--line); cursor: pointer; padding: 0; }
.ddot.on { color: var(--ochre); }
.ddot:hover, .ddot:focus-visible { color: var(--hero); }
.down-q { font: 1.08rem var(--script); color: var(--muted);
  text-align: center; margin-bottom: .6rem; }
.down-go { display: flex; justify-content: center; gap: .5rem; }

.dgo { font: 1rem var(--book); min-height: 3rem; padding: .5rem 1.6rem;
  border-radius: 999px; cursor: pointer; }
.dgo.keep { color: var(--hero); background: var(--card-hi); border: 1px solid var(--line); }
.dgo.drop { color: var(--paper); background: var(--barn); border: 1px solid var(--barn); }
.dgo.drop:hover, .dgo.drop:focus-visible { filter: brightness(1.12); }
.print-water .who-row, .print-water .down-dots { justify-content: center; }
.print-water #retell { max-width: 100%; text-align: center; }

.retell-row { display: flex; align-items: center; gap: .35rem; }
.retell-row #retell { flex: 1; min-width: 0; }
.retell-done { display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; min-width: 2.9rem; min-height: 2.9rem; padding: 0;
  background: none; border: none; border-radius: 14px; cursor: pointer;
  color: var(--ochre);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.retell-done:hover, .retell-done:focus-visible { background: var(--card-hi); }
.retell-done svg.ic { width: 26px; height: 26px; display: block; }
.print-water .share-line { margin-top: 0; }

/* ── bare: the photograph alone ── */
.print-foot, .print-pips { transition: opacity .26s ease; }
.print.bare .print-foot { opacity: 0; }
.print.bare .print-foot:focus-within { opacity: 1; }
.print.bare .print-pips { opacity: 0; }

.print-foot { pointer-events: none; }
.print-bar { pointer-events: auto; }
.print.bare .print-bar { pointer-events: none; }
.print.bare .print-foot:focus-within .print-bar { pointer-events: auto; }

#lens.lens-print .k-rest-note { position: absolute; left: 0; right: 0;
  top: calc(1.45rem + env(safe-area-inset-top, 0px)); text-align: center;
  font: 600 .58rem var(--slab); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(245,242,235,.6); pointer-events: none; }
#lens.lens-print ~ .turn { color: rgba(245,242,235,.82);
  background: rgba(20,16,12,.62); border-color: rgba(245,242,235,.26); }
#lens.lens-print ~ .turn:hover, #lens.lens-print ~ .turn:focus-visible { color: #FFFDF8; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #lens.lens-print ~ .turn { background: rgba(20,16,12,.34); } }

/* ── the answer: tiers, days, places, the list, the letter, the tiles ── */
.k-script { font: 1.24rem/1.74 var(--script); color: var(--hero); text-wrap: balance; }
.kasked { font: .95rem/1.45 var(--script); color: var(--faint); text-wrap: balance; text-align: center;
  max-width: 21rem; overflow-wrap: anywhere; }
.k-rest-note { font: .95rem var(--script); color: var(--faint); }

.aside { font: .82rem var(--script); color: var(--faint); text-wrap: balance; margin-top: -.2rem; }

.ktier { font: 600 .52rem var(--slab); text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); margin-top: .15rem; }

.ktier[data-tier="none"] { color: var(--ink); font-size: .56rem; }
.kletter.kcount { gap: .7rem; }

.kdays { display: flex; flex-direction: column; width: 100%; max-width: 21rem; }
.kday { display: flex; align-items: baseline; gap: .6rem; background: none; border: 0;
  border-top: 1px solid var(--hair); padding: .42rem .1rem; text-align: left; cursor: pointer;
  color: inherit; font: inherit; width: 100%; }
.kday:first-child { border-top: 0; }
.kday:hover .kday-words, .kday:focus-visible .kday-words { color: var(--hero); }
.kday-when { font: 600 .5rem var(--slab); text-transform: uppercase; letter-spacing: .13em;
  color: var(--muted); flex: 0 0 5.4rem; }
.kday-words { font: 400 .88rem/1.3 var(--book); color: var(--ink); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kday-amount { font: 600 .74rem var(--slab); color: var(--ink); letter-spacing: .04em; }
.kday.since .kday-words { color: var(--muted); font-style: italic; }
.kday.coming .kday-when { color: var(--hero); }
.kday-more { font: .78rem var(--script); color: var(--faint); padding: .35rem .1rem 0; }

.kplaces { display: flex; flex-direction: column; gap: .5rem; width: 100%; }
.kplace { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--hair);
  border-radius: 14px; background: var(--card); padding: .55rem .7rem; }
.kplace.picked { border-color: var(--line); }
.kplace-take { flex: 1; min-width: 0; background: none; border: 0; padding: 0; text-align: left;
  cursor: pointer; color: inherit; font: inherit; }
.kplace-name { font: 400 .95rem/1.3 var(--book); color: var(--ink); }
.kplace-facts { font: .82rem/1.35 var(--book); color: var(--muted); }
.kplace-kick { font: 600 .5rem var(--slab); text-transform: uppercase; letter-spacing: .13em;
  color: var(--muted); margin-top: .15rem; }
.ksource { font: 600 .56rem var(--slab); color: var(--faint); text-decoration: none;
  white-space: nowrap; letter-spacing: .06em; }
.ksource:hover, .ksource:focus-visible { color: var(--hero); }
.kline.read .ksource { margin-left: .4rem; }

.kline.klist { align-items: flex-start; }
.kitems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.kitem { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.kring { flex: 0 0 auto; width: .8rem; height: .8rem; border: 1.5px solid var(--char); border-radius: 50%;
  align-self: center; }

.kitem.got .kring { background: var(--sage); border-color: var(--sage); }
.kitem.off .kring { border-color: var(--faint); border-style: dashed; }
.kitem.added .kring { border-color: var(--ochre); }
.kitem.off .kitem-w { color: var(--faint); text-decoration: line-through; }
.kitem.added .kitem-w { color: var(--ochre); }
.kitem-w { font: 1.14rem/1.72 var(--script); color: var(--hero); background: none; border: 0; padding: 0;
  text-align: left; cursor: pointer; }
span.kitem-w { cursor: default; }
button.kitem-w:hover, button.kitem-w:focus-visible { color: var(--ochre); }
.kitem.got .kitem-w { color: var(--sage); text-decoration: line-through; }
.kwho { font: 600 .56rem var(--slab); text-transform: uppercase; letter-spacing: .13em; color: var(--muted); }

.kletter { position: relative; isolation: isolate; width: 100%; max-width: 21rem;
  background: var(--card); border: 1px solid var(--hair); border-radius: 20px;
  padding: 1.5rem 1.4rem 1.15rem; display: flex; flex-direction: column;
  align-items: center; gap: .55rem;
  box-shadow: 0 1px 2px rgba(44,40,34,.05), 0 10px 26px rgba(44,40,34,.08);
  animation: k-letter .5s cubic-bezier(.2,.8,.3,1) both; }
@keyframes k-letter { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.k-sent { display: block; animation: k-sentence 620ms cubic-bezier(.2,.75,.3,1) both; }
@keyframes k-sentence { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.ktiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem; width: 100%; max-width: 21rem; }
.ktile { position: relative; aspect-ratio: 1; overflow: hidden; padding: 0;
  border: 1px solid var(--hair); border-radius: 14px; background: var(--card);
  cursor: pointer; transition: transform .2s cubic-bezier(.2,.8,.3,1), border-color .2s ease;
  box-shadow: 0 1px 2px rgba(44,40,34,.04), 0 4px 10px rgba(44,40,34,.05); }
.ktile:hover, .ktile:focus-visible { transform: translateY(-2px); border-color: var(--line); }
.ktile-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ktile-in { position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; gap: .2rem; padding: .5rem .55rem; text-align: left; }
.ktile.pic .ktile-in { justify-content: flex-end;
  background: linear-gradient(transparent 34%, rgba(30,26,20,.72)); }
.ktile-words { font: 400 .78rem/1.3 var(--book); color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.ktile.pic .ktile-words { color: var(--paper); -webkit-line-clamp: 2;
  text-shadow: 0 1px 3px rgba(20,16,12,.55); }
.ktile-when { font: 600 .5rem var(--slab); text-transform: uppercase;
  letter-spacing: .13em; color: var(--muted); }

.ktiles.strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; touch-action: pan-x; padding-bottom: .15rem;
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
  mask-image: linear-gradient(90deg, #000 86%, transparent); }
.ktiles.strip::-webkit-scrollbar { display: none; }
.ktiles.strip .ktile { flex: 0 0 6.6rem; scroll-snap-align: start; }
.ktile.pic .ktile-when { color: rgba(232,227,216,.86); text-shadow: 0 1px 3px rgba(20,16,12,.5); }
.who-row, .dots-row, .acts-row { display: flex; gap: .45rem; flex-wrap: wrap;
  justify-content: center; align-items: baseline; margin-top: .3rem; }
.who-q, .dots-q { font: .95rem var(--script); color: var(--faint); margin-right: .3rem; }
.dot { font-size: 1.2rem; padding: .15rem .35rem; border: none; background: none;
  color: var(--faint); cursor: pointer; }
.dot.on { color: var(--ochre); }
.act { font: .85rem var(--book); color: var(--muted); background: none;
  border: 1px solid var(--line); border-radius: 999px; padding: .14rem .6rem; cursor: pointer; }
.act:hover, .act:focus-visible { color: var(--hero); background: var(--card-hi); }
.act.armed { color: var(--barn); border-color: var(--barn); }

/* ── the turn keys, and the foot ── */
.turn { position: fixed; top: 50%; transform: translateY(-50%); z-index: 8;
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  font: 400 1.2rem/1 var(--book); color: var(--muted); padding: 0 0 .15rem;
  background: #DED8CA; border: 1px solid var(--hair); border-radius: 999px;
  box-shadow: 0 2px 10px rgba(44,40,34,.08); cursor: pointer;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  transition: color .2s ease, transform .16s cubic-bezier(.2,.8,.3,1); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .turn { background: rgba(222,216,202,.58);
    -webkit-backdrop-filter: blur(8px) saturate(1.15);
    backdrop-filter: blur(8px) saturate(1.15); }
}
.turn:hover, .turn:focus-visible { color: var(--hero); }
.turn:active { transform: translateY(-50%) scale(.9); }
#prev { left: .45rem; }
#next { right: .45rem; }

#foot { position: fixed; left: 0; right: 0; bottom: var(--keys); z-index: 8;
  display: flex; justify-content: center; align-items: center;
  padding: .8rem .8rem calc(.65rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--paper) 62%, transparent);
  pointer-events: none; }
#foot > * { pointer-events: auto; }

/* ── the foot is one card: the mouth, a hairline, the dock ── */
#counter { width: 100%; max-width: 30rem; background: var(--card);
  border: 1px solid var(--hair); border-radius: 24px;
  box-shadow: 0 10px 26px rgba(44,40,34,.10); padding: .35rem .5rem .05rem; }
#counter #write { width: auto; margin: 0; padding: .1rem .2rem .2rem; }

#counter #say { background: none; border: none; border-radius: 0;
  padding: .85rem .3rem; text-align: left; font: 1.15rem/1.35 var(--book); }
#counter #say::placeholder { font: 300 1.18rem var(--slab); font-style: italic;
  color: var(--faint); font-size: min(1.18rem, 4.4vw); }

#counter #speak, #counter #shoot { width: 2.8rem; height: 2.8rem; color: var(--faint); }
#counter #speak svg, #counter #shoot svg { width: 26px; height: 26px; }

#counter #dock { max-width: none; background: none; border: none; border-radius: 0;
  box-shadow: none; padding: 0 .4rem; border-top: 1px solid var(--hair); }

#counter.mouthless #dock { border-top: none; }
#counter.mouthless { padding-top: .1rem; }
#counter #f-close { padding: .8rem .3rem .75rem; }

#dock { width: 100%; max-width: 30rem; display: flex; align-items: center;
  justify-content: space-evenly; padding: .4rem .5rem;
  background: var(--card); border: 1px solid var(--hair); border-radius: 999px;
  box-shadow: 0 10px 26px rgba(44,40,34,.12), 0 1px 0 rgba(255,255,255,.6) inset; }
.f-key { display: inline-flex; align-items: center; justify-content: center;
  flex: 1 1 0; max-width: 5rem; height: 3.2rem; padding: 0; color: var(--muted);
  background: none; border: none; cursor: pointer; }
.f-key svg { width: 30px; height: 30px; display: block; }
.f-key:hover, .f-key:focus-visible { color: var(--hero); }

.f-key { position: relative; }
.f-key.on { color: var(--hero); }
.f-key.on::after { content: ""; position: absolute; left: 50%; bottom: .42rem;
  width: 1.5rem; height: 1.5px; transform: translateX(-50%); background: var(--ochre); }

.f-word { font: 600 .88rem var(--slab); color: var(--muted); text-transform: uppercase;
  letter-spacing: .08em; background: none; border: none; padding: .9rem .2rem; cursor: pointer;
  flex: 1 1 0; max-width: 6.5rem; -webkit-tap-highlight-color: transparent; }
.f-word:hover, .f-word:focus-visible { color: var(--hero); }
.f-word.on { color: var(--hero); text-decoration: underline; text-decoration-color: var(--ochre);
  text-decoration-thickness: 1.5px; text-underline-offset: .5em; }
/* the present's word wears a dot while a word is owed, on every room */
.f-word.owed { position: relative; }
.f-word.owed::after { content: ""; position: absolute; top: .78rem; right: -.2rem; width: 6px; height: 6px;
  border-radius: 50%; background: var(--barn); }
#f-close { font: 600 .64rem var(--slab); color: var(--muted); text-transform: uppercase;
  letter-spacing: .18em; background: none; border: none; padding: .9rem .3rem; cursor: pointer;
  flex: 1 1 0; max-width: 6.5rem; -webkit-tap-highlight-color: transparent; }
#f-close:hover, #f-close:focus-visible { color: var(--hero); }

/* ── the stranger, and the doorstep ── */
#stranger { position: fixed; inset: 0; z-index: 9; background: var(--paper);
  display: flex; flex-direction: column; gap: .6rem; align-items: center; justify-content: center;
  text-align: center; padding: 1.5rem; font-style: italic; color: var(--muted); }
#stranger p { margin: 0; }
#doorstep { position: fixed; inset: 0; z-index: 9; background: var(--paper);
  display: flex; flex-direction: column; gap: 1.2rem; align-items: center;
  justify-content: center; text-align: center; padding: 1.5rem; }
#step-say { font: 1.25rem var(--script); color: var(--muted); margin: 0; }
#knock-btn { font: 600 1rem var(--slab); padding: .6rem 1.6rem; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); cursor: pointer; }
#the-words { font: 600 1.9rem var(--slab); color: var(--hero); letter-spacing: .04em; }
.step-note { font-style: italic; color: var(--muted); }
#step-how { margin: -.3rem 0 0; font-size: .92rem; }
#step-words { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
#step-words .step-note { margin: 0; }

.step-acts { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.step-acts button, .step-acts a { font: .95rem var(--book); color: var(--ink); padding: .5rem 1.15rem;
  border-radius: 999px; background: var(--card); border: 1px solid var(--line); cursor: pointer;
  text-decoration: none; }
.step-acts button:hover, .step-acts button:focus-visible, .step-acts a:hover, .step-acts a:focus-visible {
  color: var(--hero); background: var(--card-hi); }
#step-out { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
#step-out .step-note { margin: 0; }

#step-wait { font-size: .9rem; color: var(--faint); }
#doorstep.waiting #step-mark { animation: k-settle .7s cubic-bezier(.25,.8,.3,1) both,
  k-breathe 2.8s ease-in-out .9s infinite; }
@keyframes k-breathe { 50% { opacity: .55; transform: scale(.965); } }
#step-dead { font-style: italic; color: var(--barn); }

#step-in { font: 1.6rem var(--script); color: var(--hero); margin: 0;
  animation: k-settle .5s cubic-bezier(.25,.8,.3,1) both; }

#step-way { display: block; width: 13.5rem; max-width: 72%; height: auto; margin-top: .6rem; }
#step-way .rule { fill: var(--rule); stroke: none; }
#step-way .ring { fill: none; stroke: var(--rule); stroke-width: 1.35;
  transition: fill .5s ease, stroke .5s ease; }
#doorstep[data-step="1"] .s1, #doorstep[data-step="2"] .s2, #doorstep[data-step="3"] .s3 {
  fill: var(--ochre); stroke: var(--ochre); }
#doorstep[data-step="2"] .s1, #doorstep[data-step="3"] .s1, #doorstep[data-step="3"] .s2 {
  fill: var(--char); stroke: var(--char); }

/* ── the people screen ── */
#panel { position: fixed; inset: 0; z-index: 5; overflow-y: auto; overflow-x: hidden;
  background: var(--paper);
  padding: 1.4rem 1.3rem 0;

  /* what the foot covers, where scrollIntoView can read it */
  scroll-padding: 1.4rem 0 var(--floor);
  display: flex; flex-direction: column; gap: 1rem; align-items: center; }
#panel > * { width: 100%; max-width: 34rem; }

#p-tabs { display: flex; justify-content: center; gap: 1.8rem; flex: none; }

#panel .ptab { font: 600 .62rem var(--slab); text-transform: uppercase; letter-spacing: .2em;
  color: var(--faint); background: none; border: none; border-radius: 0; padding: .3rem 0; cursor: pointer; }
#panel .ptab:hover, #panel .ptab:focus-visible { color: var(--hero); background: none; }
#panel .ptab.on { color: var(--ochre); }

#panel[data-side="house"] #p-knots, #panel[data-side="house"] #p-fold-field,
#panel[data-side="house"] #p-shared { display: none; }
#panel[data-side="folk"] #p-house { display: none; }
#panel h2 { font: 600 1.05rem var(--slab); color: var(--hero); margin: 0; }
#panel .p-line input { padding: .45rem .7rem;
  font: .95rem var(--book); color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 13px; }

#panel #hm .said { margin: 0; font: .98rem var(--script); color: var(--faint); }
#panel #hm input, #panel #hm select { font: .95rem var(--book); color: var(--ink);
  background: none; border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 0 .1rem 1px; max-width: 10.5rem; }
#panel #hm input { width: 9rem; }
#panel #hm .nb { white-space: nowrap; }

#panel #hm-keep { font: 600 .68rem var(--slab); text-transform: uppercase;
  letter-spacing: .15em; padding: .44rem 1.2rem; margin-top: .2rem;
  align-self: flex-start; transition: color .2s ease, border-color .2s ease; }
#panel #hm-keep.stands { color: var(--ochre); border-color: var(--ochre);
  background: var(--card); font-weight: 700; }

#panel #hm-face { width: 3rem; height: 3rem; vertical-align: middle; padding: 0;
  background: none; border: 1px dashed var(--hair); border-radius: 8px;
  cursor: pointer; overflow: hidden; }
#panel #hm-face.worn { border-style: solid; }
#panel #hm-face:hover { background: none; }
#hm-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
#hm-draft img { display: block; width: 11rem; height: 11rem; margin: .2rem auto;
  object-fit: cover; border-radius: 9px; border: 1px solid var(--hair); }
#panel code { font-size: .8rem; overflow-wrap: anywhere; color: var(--muted); }
.qr { display: block; margin: .2rem auto; width: 13rem; height: 13rem;
  image-rendering: pixelated; border-radius: 9px; border: 1px solid var(--hair); }
.qr-say { font: 1.05rem var(--script); color: var(--muted); text-align: center; margin: .1rem 0 .4rem; }

/* ── the people screen: beings, drawn ── */
#panel .house { width: 100%; }
#panel .wall { margin: 1.9rem 0 .1rem; }
#panel .wall svg { display: block; width: 100%; max-width: 13.5rem; height: auto; margin: 0 auto; }
#panel .wall .rule { fill: var(--rule); stroke: none; }
#panel .wall .ring { fill: none; stroke: var(--rule); stroke-width: 1.35; }
#panel .wall .ring.warm { stroke: var(--ochre); }

#panel .crown svg { display: block; width: 100%; height: auto; filter: url(#pencil); }
#panel .crown .dw { fill: none; stroke: var(--rule); stroke-width: 1.5; stroke-linecap: round;
  stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#panel .crown .dw.w1 { stroke-width: 1.32; }
#panel .crown .dw.w2 { stroke-width: 1.5; }
#panel .crown .dw.w3 { stroke-width: 1.7; }
#panel .crown .dw.hair { stroke: var(--hair); stroke-width: 1; }
#panel .crown .dw.thin { stroke: var(--line); stroke-width: 1.1; }
#panel .crown .dw.fine { stroke: var(--hair); stroke-width: .8; }
#panel .crown .dw.door { stroke: var(--line); stroke-width: 1.4; }
#panel .crown .dw.me { stroke: var(--slate); }
#panel .crown .dw.coming { stroke: var(--line); stroke-dasharray: 2.5 2.5; }

#panel .crown { position: relative; }
#panel .crown .p-over { position: absolute; inset: 0; }
#panel .crown .who { position: absolute; transform: translateX(-50%);
  width: auto; padding: 0; }
#panel .crown .who.aright { transform: none; align-items: flex-start; text-align: left; }
#panel .crown .who-name { margin-top: 0; }

#panel .crown .who-name.who-act { white-space: nowrap; }

#panel .house.worn .walls { background: none; border: none;
  margin: 0 1.15rem; padding: 0 .6rem .5rem; }
#panel .house.worn #p-folk { display: none; }

#p-face { display: block; width: auto; margin: 0 1.15rem; padding: 0;
  background: none; border: none; cursor: pointer; line-height: 0; }
#p-face img { display: block; width: 100%; max-height: 42vh; object-fit: cover;
  border-radius: 14px 14px 0 0; border: 1px solid var(--hair); border-bottom: none; }
#p-face[aria-busy="true"] { opacity: .55; }
#panel .house.drawn #p-folk { display: flex; }
#panel .house.drawn .walls { background: var(--card); border: 1px solid var(--hair);
  border-top: none; margin: -1px 1.15rem 0; padding: .1rem .6rem .8rem; }
#panel .roof { display: block; width: 100%; height: 50px; }
#panel .roof .fillp { fill: var(--card); stroke: none; }

#panel .roof .edge { fill: none; stroke: var(--hair); stroke-width: 1;
  stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#panel .walls { margin: -1px 1.15rem 0; background: var(--card);
  border: 1px solid var(--hair); border-top: none; border-radius: 0 0 14px 14px;
  padding: .1rem .6rem .8rem; }
#panel .plate-name { display: block; width: 100%; font: 600 .64rem var(--slab);
  text-transform: uppercase; letter-spacing: .15em; color: var(--muted);
  background: none; border: none; border-radius: 0; padding: .5rem 0 .35rem;
  text-align: center; cursor: pointer; }
#panel .plate-name:hover { color: var(--hero); background: none; }
#panel .plate-name.open { color: var(--hero); background: none;
  box-shadow: inset 0 -1px 0 0 var(--rule); }

#panel .row { display: flex; flex-wrap: wrap; justify-content: center;
  align-items: flex-start; gap: .5rem .2rem; }
#panel .field { display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 1rem .2rem; margin-top: 1.5rem; }

#panel .p-empty { width: 100%; padding: 0 .3rem .2rem; }
#panel .who { width: 76px; display: flex; flex-direction: column; align-items: center;
  background: none; border: none; border-radius: 0; padding: .1rem 0 0; cursor: pointer; }
#panel .who:hover { background: none; }
#panel .who-name, #panel .who-word { max-width: 100%; overflow-wrap: break-word;
  text-align: center; }
#panel .who-name { font: 600 .62rem var(--slab); text-transform: uppercase;
  letter-spacing: .11em; color: var(--ink); margin-top: .28rem; }
#panel .who.far .who-name { color: var(--muted); }
#panel .who.open .who-name { color: var(--hero);
  box-shadow: inset 0 -1px 0 0 var(--rule); }

#panel .who-name.who-act { font: .92rem var(--script); text-transform: none;
  letter-spacing: 0; color: var(--faint); border: none; border-radius: 0;
  padding: 0; margin-top: .1rem; }
#panel .who-word { font: .58rem var(--book); font-style: italic; color: var(--faint);
  line-height: 1.25; margin-top: .05rem; }
#panel .who-word.alarm { color: var(--barn); font-style: normal; font-weight: 600; }
#panel .fig circle, #panel .fig path { fill: none; stroke: var(--rule); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; }
#panel .fig.me circle, #panel .fig.me path { stroke: var(--slate); }
#panel .fig.far circle, #panel .fig.far path { opacity: .78; }

#panel .fig.coming circle, #panel .fig.coming path { stroke: var(--line); stroke-dasharray: 2.5 2.5; }
#panel .fig.door circle, #panel .fig.door path { stroke: var(--line); }

#panel .fold { margin: .75rem .1rem 0; padding: .65rem .1rem 0;
  border-top: 1px solid var(--hair); display: flex; flex-direction: column;
  gap: .3rem; align-items: flex-start; }
#panel .fold.bare { margin: 1.1rem .1rem 0; }
.p-line { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.p-state { font: 600 .6rem var(--slab); text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }
.p-state.alarm { color: var(--barn); }
.p-knock input { width: 9.5rem; padding: .35rem .6rem; font: .9rem var(--book);
  background: var(--card-hi); border: 1px solid var(--line); border-radius: 9px; }
#panel button { font: .8rem var(--book); color: var(--muted); background: none;
  border: 1px solid var(--line); border-radius: 999px; padding: .12rem .55rem; cursor: pointer; }
#panel button:hover { color: var(--hero); background: var(--card-hi); }

#panel button.armed { color: var(--barn); border-color: var(--barn); }

#panel .p-note { font: .95rem var(--script); color: var(--faint); background: none;
  border: none; border-radius: 0; padding: .25rem .1rem; text-align: left; align-self: flex-start; }
#panel button.p-note:hover, #panel button.p-note:focus-visible { color: var(--ochre); background: none; }

#panel .fold .shelf-h, #p-shared .shelf-h { font: 1.05rem var(--script); color: var(--muted); background: none;
  border: none; border-radius: 0; padding: .15rem .35rem .3rem; margin-top: .55rem;
  text-align: left; align-self: flex-start; }
#panel .fold .shelf-h:hover, #panel .fold .shelf-h:focus-visible,
#p-shared .shelf-h:hover, #p-shared .shelf-h:focus-visible { color: var(--hero); background: none; }

#panel .fold .shelf, #p-shared .shelf { align-self: stretch; }

#p-shared { display: flex; flex-direction: column; margin-top: .9rem; }
#panel .fold .t-row, #p-shared .t-row { font: .98rem/1.5 var(--book); color: var(--ink); background: none;
  border: none; border-top: 1px solid var(--hair); border-radius: 0;
  padding: .58rem .95rem; text-align: left; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel .fold .t-row:first-child, #p-shared .t-row:first-child { border-top: none; }
#panel .fold .t-row:hover, #panel .fold .t-row:focus-visible,
#p-shared .t-row:hover, #p-shared .t-row:focus-visible { color: var(--hero); background: var(--card-hi); }

#panel .fold .facts { align-self: stretch; display: flex; flex-direction: column; }
#panel .fold .fact { font: .98rem/1.5 var(--book); color: var(--muted); background: none;
  border: none; border-top: 1px solid var(--hair); border-radius: 0;
  padding: .58rem .95rem; text-align: left; max-width: 100%;
  display: flex; gap: .6rem; align-items: baseline; }
#panel .fold .fact:first-child { border-top: none; }
#panel .fold .fact:hover, #panel .fold .fact:focus-visible { color: var(--hero); background: var(--card-hi); }
#panel .fold .fact .fact-w { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel .fold .fact.on { color: var(--ink); }
#panel .fold .fact .mk { color: var(--ochre); font-family: var(--slab); font-size: .82em; visibility: hidden; }
#panel .fold .fact.on .mk { visibility: visible; }
#panel button:disabled { color: var(--faint); border-color: var(--hair); cursor: default; }
#panel button:disabled:hover { color: var(--faint); background: none; }

.keymark { width: 26px; height: 12px; flex: none; }
.keymark circle, .keymark path { fill: none; stroke: var(--rule); stroke-width: 1.4; stroke-linecap: round; }
.keymark.here circle, .keymark.here path { stroke: var(--slate); }

/* ── the toast, focus, and stillness ── */
#toast { position: fixed; left: 50%; bottom: calc(var(--floor) + .7rem);
  transform: translateX(-50%); z-index: 20;
  background: var(--ink); color: var(--paper); padding: .45rem 1rem; border-radius: 1.2rem;
  font-size: .85rem; opacity: 0; transition: opacity .25s; pointer-events: none;

  width: max-content; max-width: min(90vw, 26rem); }
#toast.show { opacity: 1; }
/* a toast wearing a key can be touched, and the key is a word in the toast's own ink */
#toast.acts { pointer-events: auto; display: flex; align-items: center; gap: .9rem; }
#toast .undo { font: inherit; color: var(--paper); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: .2em; }

:focus-visible { outline: 2px solid var(--rule); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  #rooms { scroll-behavior: auto; }
  .inner { transition: none; }
  .a-in { animation: none !important; }
  #strip { animation: none !important; }

  .pd-chip, .pd-knob { transition: none !important; }
  .kcard, .kline, .ktitle, .kwords, .val, .nib i, .keepit, .inst, .rib-day, .sign .stroke, .sign .dot,
  .dring .loop, .ring .loop, .kedge .loop, .kseal .loop, .strike .loop, #step-mark,
  .heard, .cring, .kreading, .inkline, .k-script, .kletter, .k-sent, .ktile {
    animation: none !important; transition: none !important; }
  .print-foot, .print-pips { transition: none; }
  .kline, .ktitle, .k-sent { clip-path: none !important; opacity: 1 !important; }
  .sign .stroke { stroke-dashoffset: 0; }
  .sign .dot { opacity: 1; }

  .dring .loop, .ring .loop, .kedge .loop, .kseal .loop { stroke-dashoffset: 0; }
  .who-face.on .cring { stroke-dashoffset: 0; }
  #step-mark { opacity: 1; transform: none; }
}