/* ==========================================================================
   The dashboard shelf
   A wooden (or glass, or candy) shelving unit. Every widget is a real-looking
   object standing on a shelf: a jar, a lamp, a tin, a letter board, a robot.
   Rows of the grid are shelves; the row gap is the plank.
   ========================================================================== */
.shelf-unit {
  --plank: 26px;
  --sh-back: #f3dfbd; --sh-back2: #ead2a8; --sh-side: #a8662f; --sh-side2: #7d4519;
  --pk-top: #e9b87e; --pk-front: #c98544; --pk-edge: #8a5022; --pk-grain: rgba(90, 45, 10, .18);
  --ink: #23180f;
  position: relative; margin: 0 0 var(--space-5); padding: 0 16px; border-radius: 14px 14px 8px 8px;
  background:
    radial-gradient(circle at 12px 12px, var(--sh-back2) 0 2px, transparent 2.5px) 0 0 / 26px 26px,
    linear-gradient(180deg, var(--sh-back), color-mix(in srgb, var(--sh-back) 80%, #000));
  box-shadow: inset 16px 0 0 var(--sh-side), inset -16px 0 0 var(--sh-side), inset 19px 0 0 var(--sh-side2), inset -19px 0 0 var(--sh-side2), inset 0 0 60px rgba(0,0,0,.25), 0 24px 40px -20px rgba(0,0,0,.6);
}
.shelf-unit::before, .shelf-unit::after { content: ""; position: absolute; bottom: -14px; width: 28px; height: 16px; border-radius: 0 0 8px 8px; background: var(--sh-side2); }
.shelf-unit::before { left: 10px; } .shelf-unit::after { right: 10px; }

.w-grid {
  --cols: 6; --cell: 180px; --gap: 14px;
  position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: var(--cell); grid-auto-flow: row dense;
  column-gap: var(--gap); row-gap: var(--plank); padding: var(--plank) 8px var(--plank);
  margin: 0;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 var(--plank), rgba(0,0,0,.32) var(--plank), rgba(0,0,0,0) calc(var(--plank) + 18px), rgba(0,0,0,0) calc(var(--cell) + var(--plank))),
    repeating-linear-gradient(180deg, var(--pk-top) 0 7px, var(--pk-front) 7px calc(var(--plank) - 5px), var(--pk-edge) calc(var(--plank) - 5px) var(--plank), transparent var(--plank) calc(var(--cell) + var(--plank)));
}
.w-grid a, .w-grid img { -webkit-user-drag: none; }

.sh-1x1 { grid-column: span 1; grid-row: span 1; }
.sh-1x2 { grid-column: span min(2, var(--cols)); grid-row: span 1; }
.sh-1x3 { grid-column: span min(3, var(--cols)); grid-row: span 1; }
.sh-2x1 { grid-column: span 1; grid-row: span 2; }
.sh-2x2 { grid-column: span min(2, var(--cols)); grid-row: span 2; }
.sh-1x5 { grid-column: span min(5, var(--cols)); grid-row: span 1; }
.w-grid[data-cols="2"] .sh-1x3 { grid-column: span 2; }

/* Phones: one big piece per row. Two half-width columns that every piece spans, and rows a quarter
   of the width tall (with the plank inside each piece's box), so squares stay square, wide pieces get
   more height than on a desk, and every piece sits on its own plank. */
.w-grid[data-phone="1"] { --unit: calc((var(--cell) * 2 + var(--gap) + var(--plank)) / 4); grid-auto-rows: var(--unit); row-gap: 0; background: none; grid-auto-flow: row; padding-top: calc(var(--plank) + 4px); padding-bottom: 0; }
.w-grid[data-phone="1"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--plank); background: linear-gradient(180deg, var(--pk-top) 0 7px, var(--pk-front) 7px calc(100% - 5px), var(--pk-edge) calc(100% - 5px) 100%); }
.w-grid[data-phone="1"] > .w, .w-grid[data-phone="1"] > .w-ph { grid-column: 1 / -1 !important; }
.w-grid[data-phone="1"] > .w { container-type: normal; }
.w-grid[data-phone="1"] > .w > .ob { bottom: var(--plank); container-type: size; }
.w-grid[data-phone="1"] > .sh-1x1, .w-grid[data-phone="1"] > .sh-1x2, .w-grid[data-phone="1"] > .sh-1x3, .w-grid[data-phone="1"] > .sh-1x5 { grid-row: span 3 !important; }
.w-grid[data-phone="1"] > .sh-2x2 { grid-row: span 4 !important; }
.w-grid[data-phone="1"] > .sh-2x1 { grid-row: span 5 !important; }
.w-grid[data-phone="1"] > .sh-2x4 { grid-row: span 5 !important; }
.w-grid[data-phone="1"] > .w-ph { margin-bottom: var(--plank); }
.w-grid[data-phone="1"] > .w::after { content: ""; position: absolute; left: -8px; right: -8px; top: calc(100% - var(--plank)); height: calc(var(--plank) + 18px); pointer-events: none;
  background: linear-gradient(180deg, var(--pk-top) 0 7px, var(--pk-front) 7px calc(var(--plank) - 5px), var(--pk-edge) calc(var(--plank) - 5px) var(--plank), rgba(0,0,0,.32) var(--plank), rgba(0,0,0,0) 100%); }
.w-grid[data-phone="1"] > .w.is-lifted::after { display: none; }
/* the plank paints under everything in its piece (a name label on the plank's edge must show), whatever makes the piece a stacking context */
.w-grid[data-phone="1"] > .w { isolation: isolate; }
.w-grid[data-phone="1"] > .w::after { z-index: -1; }
/* bigger cells, bigger things: lift the pixel caps that keep art small on a desk */
.w-grid[data-phone="1"] .tr-cup { max-width: 60cqw; height: calc(50cqh + 12cqh * (var(--lvl) / 50)); }
.w-grid[data-phone="1"] .sj-glass { width: min(80cqw, 190px); } .w-grid[data-phone="1"] .sj-lid { width: min(66cqw, 160px); }
.w-grid[data-phone="1"] .sj-stars i { width: 24px; height: 24px; } .w-grid[data-phone="1"] .sj-tag b { font-size: 26px; } .w-grid[data-phone="1"] .sj-tag small { font-size: 12px; }
.w-grid[data-phone="1"] .ob-pet .pt-art { max-width: 300px; }
.w-grid[data-phone="1"] .ob-plant .pt-art, .w-grid[data-phone="1"] .ob-plant.is-tall .pt-art { max-width: 240px; }
.w-grid[data-phone="1"] .ob-decor .pt-art { max-width: 230px; }
.w-grid[data-phone="1"] .rb-body { max-width: 180px; } .w-grid[data-phone="1"] .gf-target { max-width: 170px; }
.w-grid[data-phone="1"] .lb-side { max-width: 150px; } .w-grid[data-phone="1"] .fr { max-width: 190px; } .w-grid[data-phone="1"] .bk { max-width: 80px; } .w-grid[data-phone="1"] .ln { max-width: 120px; }
.w-grid[data-phone="1"] .gl-dome .wx-day :is(svg, .wx-crest) { max-width: 150px; max-height: 150px; }
.w-grid[data-phone="1"] .gl-base { max-height: 60px; } .w-grid[data-phone="1"] .lv-base { max-height: 80px; }
.w-grid[data-phone="1"] .ob-tag { font-size: 15px; padding: 4px 11px 4px 18px; }
/* ---------- The ½ and ⅓ views (phones, draft 10, post-deploy item 7) ----------
   The same phone pieces, two or three to a row, each drawn at a half or a third of its size with CSS zoom, so
   two or three times as much of the shelf is on the screen at once. A piece keeps its own pixels inside (its
   face, its plank, its buttons all shrink together); the grid around it stays in page pixels, with the rows a
   half or a third as tall and the gaps and top plank shrunk to match. Drags and glides divide by the scale
   (lib/dashgrid.mjs scaleOf), because pointer positions arrive in page pixels. */
.w-grid[data-phone="1"][data-zoom="2"] { --zf: 2; }
.w-grid[data-phone="1"][data-zoom="3"] { --zf: 3; }
.w-grid[data-phone="1"][data-zoom] { --unit: calc((var(--cell) * 2 + var(--gap) + var(--plank)) / 4 / var(--zf)); column-gap: calc(var(--gap) / var(--zf) + 2px); padding: calc((var(--plank) + 4px) / var(--zf)) 6px 0; }
.w-grid[data-phone="1"][data-zoom]::before { height: calc(var(--plank) / var(--zf)); }
.w-grid[data-phone="1"][data-zoom] > .w, .w-grid[data-phone="1"][data-zoom] > .w-ph { grid-column: span 1 !important; }
.w-grid[data-phone="1"][data-zoom="2"] > .w, .w-grid[data-phone="1"][data-zoom="2"] > .w-ph { zoom: .5; }
.w-grid[data-phone="1"][data-zoom="3"] > .w, .w-grid[data-phone="1"][data-zoom="3"] > .w-ph { zoom: .3333; }
/* the menu button keeps a usable size when everything else is a third of its size */
.w-grid[data-phone="1"][data-zoom="3"] .w-menu { zoom: 1.5; }
/* the nudge pad in a piece's menu */
.w-nudge { display: grid; grid-template-columns: repeat(4, max-content); gap: 8px; }
.w-nudge .btn { min-width: 48px; }

/* Each object */
/* How the pieces arrive (draft 10, post-deploy item 1): a gentle, short drop one after another the first time the
   shelf is drawn (no bounce, no tilt: the old swing read as the page jumping); a quick fade when I come back to Home;
   nothing at all when the shelf is redrawn after a change, except a piece I just added, which drops in on its own. */
.w { position: relative; min-width: 0; container-type: size; color: var(--ink); touch-action: manipulation; animation: w-in .42s cubic-bezier(.2,.7,.3,1) both; animation-delay: min(calc(var(--n, 0) * 22ms), 420ms); }
@keyframes w-in { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes w-fade { from { opacity: 0; } to { opacity: 1; } }
.w-grid[data-enter="fade"] > .w:not(.is-lifted, .is-dropped) { animation: w-fade .22s ease-out both; animation-delay: 0s; }
.w-grid[data-enter="none"] > .w:not(.is-lifted, .is-dropped) { animation: none; }
.w-grid[data-enter="none"] > .w.w-new:not(.is-lifted, .is-dropped) { animation: w-in .42s cubic-bezier(.2,.7,.3,1) both; animation-delay: 0s; }
.w-grid:not(.is-locked) .w { cursor: grab; }
.w.is-lifted { cursor: grabbing; filter: drop-shadow(0 26px 22px rgba(0,0,0,.45)); transition: none; animation: none; }
.w.is-dropped { animation: w-drop .5s cubic-bezier(.2,.9,.3,1.5); }
@keyframes w-drop { 0% { transform: translateY(-14px) scale(1.04); } 55% { transform: translateY(2px) scale(.98, 1.02); } 100% { transform: none; } }
.w-ph { position: relative; border-radius: 14px; border: 3px dashed color-mix(in srgb, var(--ink) 45%, transparent); background: rgba(255,255,255,.14); }
.ob { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; text-decoration: none; color: var(--ink); font: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: inherit; }
a.ob, button.ob { cursor: pointer; }
.w-grid:not(.is-locked) a.ob, .w-grid:not(.is-locked) button.ob { cursor: grab; }
.ob :is(a, button, input, label):focus-visible, a.ob:focus-visible, button.ob:focus-visible { outline: 3px solid #2b2bff; outline-offset: 3px; border-radius: 8px; }
.ob .icon { width: 1em; height: 1em; }
.ob svg:not(.icon) { display: block; overflow: visible; }
/* objects wobble a little when you hover, like picking them up */
@media (hover: hover) { :root:not([data-scrolling]) .w:hover > .ob { animation: ob-wiggle .5s ease; animation-delay: .2s; } } /* not while the page scrolls under the pointer, and not for a pointer just passing by */
@keyframes ob-wiggle { 25% { transform: rotate(-1.4deg) translateY(-2px); } 60% { transform: rotate(1deg) translateY(-1px); } }

.w-menu { position: absolute; top: 2px; right: 2px; z-index: 6; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; background: #fffdf7; color: var(--ink); cursor: pointer; opacity: 0; transition: opacity .15s; box-shadow: 0 3px 0 var(--ink); }
.w:hover .w-menu, .w:focus-within .w-menu, .w-menu:focus-visible { opacity: 1; }
@media (hover: none) { .w-menu { opacity: .9; width: 30px; height: 30px; } }
.w-menu:focus-visible { outline: 3px solid #2b2bff; outline-offset: 2px; }
.w-menu .icon { width: 18px; height: 18px; }

/* Shared bits */
.ob-btn { display: inline-flex; align-items: center; gap: .35em; padding: .35em .75em; border-radius: 999px; border: 2px solid var(--ink); background: #fff15c; color: var(--ink); font-weight: 800; font-size: 14px; line-height: 1.1; text-decoration: none; box-shadow: 0 3px 0 var(--ink); white-space: nowrap; }
.ob-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.ob-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.ob-tag { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%) rotate(-2deg); max-width: 92%; padding: 3px 9px 3px 16px; background: #fffaf0; border: 2px solid var(--ink); border-radius: 4px 10px 10px 4px; font-weight: 800; font-size: 13px; line-height: 1.15; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; box-shadow: 0 3px 0 rgba(0,0,0,.25); z-index: 2; }
.ob-tag::before { content: ""; position: absolute; left: 5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ink); }

/* ---------- Letter board (welcome) ---------- */
.ob-letter { align-items: stretch; gap: 10px; padding: 4px 4px 0; }
.lb-frame { flex: 1; min-width: 0; padding: 9px; border-radius: 6px; background: linear-gradient(135deg, #d8a46a, #a8692f 50%, #c58a4e); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25), 0 10px 14px -8px rgba(0,0,0,.6); transform: rotate(-1deg); }
.lb-board { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 6px 10px; border-radius: 2px; background: repeating-linear-gradient(180deg, #1b1a1f 0 5px, #121115 5px 7px); box-shadow: inset 0 3px 8px rgba(0,0,0,.7); overflow: hidden; }
.lb-line { margin: 0; text-align: center; font: 800 clamp(11px, 7cqh, 15px)/1.15 "Atkinson Hyperlegible Next", system-ui, sans-serif; letter-spacing: .14em; color: #f6f1e4; text-shadow: 0 1px 0 #000, 0 0 1px #fff; }
.lb-big { font-size: clamp(15px, 12cqh, 26px); letter-spacing: .1em; color: #fffaf0; }
.lb-small { font-size: clamp(10px, 6cqh, 13px); color: #ffd36b; }
.lb-side { flex: none; width: 31cqw; max-width: 140px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; padding-bottom: 4px; }
.lb-photo { display: block; padding: 6px 6px 18px; background: #fffdf7; box-shadow: 0 6px 10px -4px rgba(0,0,0,.5); transform: rotate(4deg); }
.lb-photo .m-avatar { width: min(64px, 34cqh) !important; height: min(64px, 34cqh) !important; border-radius: 4px !important; box-shadow: none !important; }
.lb-go { align-self: center; }

/* ---------- Snow globe (weather) ---------- */
.ob-globe { gap: 12px; align-items: flex-end; }
.gl-unit { position: relative; display: flex; flex-direction: column; align-items: center; width: min(96cqh, 100cqw); flex: none; }
.gl-dome { position: relative; width: 86%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 60%, #bfe9ff 0%, #6ec3f0 55%, #2f8fd0 100%); box-shadow: inset 0 -10px 18px rgba(0,40,80,.35), inset 10px 10px 0 -4px rgba(255,255,255,.25); margin-bottom: -10%; z-index: 1; display: grid; place-items: center; }
.gl-dome::after { content: ""; position: absolute; left: 18%; top: 12%; width: 26%; height: 16%; border-radius: 50%; background: rgba(255,255,255,.7); transform: rotate(-30deg); filter: blur(1px); pointer-events: none; }
.gl-base { position: relative; width: 100%; height: 26cqh; max-height: 46px; border-radius: 10px 10px 6px 6px; background: linear-gradient(180deg, #b8323f, #8a1c2e); box-shadow: inset 0 4px 0 rgba(255,255,255,.3), 0 8px 10px -6px rgba(0,0,0,.6); display: grid; place-items: center; z-index: 2; clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); }
.gl-base span { font: 900 11px/1 system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #ffe8a3; padding: 2px 8px; border: 2px solid #ffe8a3; border-radius: 4px; }
.gl-snow i { position: absolute; top: -10%; width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: .85; animation: gl-fall 6s linear infinite; }
.gl-snow i:nth-child(1) { left: 20%; } .gl-snow i:nth-child(2) { left: 40%; animation-delay: -2s; } .gl-snow i:nth-child(3) { left: 62%; animation-delay: -4s; } .gl-snow i:nth-child(4) { left: 78%; animation-delay: -1s; } .gl-snow i:nth-child(5) { left: 30%; animation-delay: -3s; width: 3px; height: 3px; } .gl-snow i:nth-child(6) { left: 70%; animation-delay: -5s; width: 3px; height: 3px; }
@keyframes gl-fall { to { transform: translateY(120cqh) translateX(8px); } }
.gl-dome .wx-panel { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; transform: translateY(-4%); }
.gl-dome :is(.wx-city, .wx-source, .wx-foot, .wx-sun-line, .wx-date, .wx-loading) { display: none !important; }
.gl-dome .wx-week { display: block; margin: 0; padding: 0; list-style: none; }
.gl-dome .wx-day { display: flex !important; flex-direction: column; align-items: center; gap: 0; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.gl-dome .wx-day:not(:first-child) { display: none !important; }
.gl-dome .wx-day :is(svg, .wx-crest) { width: 54cqh !important; height: 54cqh !important; max-width: 110px; max-height: 110px; }
.gl-dome .wx-day-temps { font-weight: 900; font-size: 15px; color: #08304d; background: rgba(255,255,255,.75); padding: 0 8px; border-radius: 999px; }
.gl-dome .wx-day > :not(svg):not(.wx-crest):not(.wx-day-temps) { display: none !important; }
.ob-globe.is-big .gl-unit { width: min(96cqh, 34cqw); }
.ob-globe.is-big .gl-dome::before { content: ""; position: absolute; inset: 22% 22%; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff6b0, #ffc93c 55%, #ff9f1c); box-shadow: 0 0 30px #ffd23f; }
.gb-week { flex: 1; min-width: 0; align-self: stretch; margin: 2px 0 2px; padding: 8px 10px; border-radius: 12px; background: #fffaf0; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); overflow: auto; font-size: 14px; }

/* ---------- Cork board (my day) ---------- */
.ob-cork { padding: 2px 2px 0; }
/* the big cork board (3 wide, 2 tall): notes wrap into rows and grow a little; nothing scrolls sideways (draft 10, item 8) */
.ob-cork.is-big .ck-board { padding: 26px 14px 12px; }
.ob-cork.is-big .ck-board { overflow: hidden; }
.ob-cork.is-big .ck-row { flex-wrap: wrap; align-content: flex-start; gap: 10px 12px; overflow: hidden auto; padding: 6px 6px 4px; height: 100%; scrollbar-width: thin; }
.ob-cork.is-big .ck-row > .tk { width: calc((100% - 24px) / 3) !important; min-height: 100px; }
.ob-cork.is-big .tk-title { font-size: 14px; -webkit-line-clamp: 3; }
.ob-cork.is-big .ck-title { font-size: 24px; }
.ck-board { position: relative; width: 100%; height: 100%; padding: 22px 12px 10px; border-radius: 6px; border: 8px solid #b6763c; border-image: linear-gradient(135deg, #d39858, #8a5022) 1; background: radial-gradient(circle at 20% 30%, #c48a52 0 1.2px, transparent 1.6px) 0 0 / 7px 7px, radial-gradient(circle at 70% 60%, #9c6230 0 1px, transparent 1.4px) 0 0 / 9px 9px, #d6a066; box-shadow: 0 10px 14px -8px rgba(0,0,0,.6), inset 0 0 20px rgba(80,40,0,.35); }
.ck-title { position: absolute; top: -4px; left: 14px; transform: rotate(-3deg); padding: 2px 12px; background: #fff15c; border: 2px solid var(--ink); font: 700 20px/1.1 var(--font-hand, cursive); box-shadow: 0 3px 0 rgba(0,0,0,.25); z-index: 2; }
.ob-go.ck-open { top: 4px; right: 44px; bottom: auto; }
.ck-row { display: flex; gap: 12px; height: 100%; margin: 0; padding: 6px 4px 4px; list-style: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.tk { position: relative; flex: none; width: clamp(108px, 16cqw, 140px); display: flex; flex-direction: column; gap: 2px; padding: 12px 8px 8px; background: var(--tk); border: 2px solid var(--ink); border-radius: 4px; transform: rotate(var(--r)); box-shadow: 3px 4px 0 rgba(0,0,0,.28); font-size: 13px; line-height: 1.2; overflow: hidden; }
.tk::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -2px; height: 8px; background: radial-gradient(circle at 5px -1px, transparent 4px, var(--tk) 4.5px) 0 0 / 10px 8px; }
.tk-pin { position: absolute; top: 3px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9a9a, #d62828); box-shadow: 0 2px 2px rgba(0,0,0,.4); }
.tk-flag { position: absolute; top: 4px; right: 4px; font-size: 11px; font-weight: 900; text-transform: uppercase; padding: 0 5px; border-radius: 4px; background: var(--ink); color: #fff; }
.tk-flag.is-next { background: #fffaf0; color: var(--ink); border: 1.5px solid var(--ink); }
.tk-ico { font-size: 22px; line-height: 0; margin-left: 24px; min-height: 22px; }
.tk-time { font-weight: 900; }
.tk-title { font-weight: 700; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tk-title small { font-weight: 600; }
.tk.is-now { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--ink), 4px 6px 0 rgba(0,0,0,.3); }
.tk.is-done .tk-title { text-decoration: line-through; text-decoration-thickness: 2px; }
.tk-check { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; font-weight: 800; font-size: 13px; cursor: pointer; }
.tk-check input { width: 20px; height: 20px; accent-color: #1d7a3a; margin: 0; }
.tk-go { margin-top: auto; font-size: 12px; padding: .2em .5em; align-self: flex-start; }
.ck-empty { margin: 14px 4px; font-weight: 700; background: #fffaf0; display: inline-block; padding: 6px 10px; transform: rotate(-1deg); border: 2px solid var(--ink); }

/* ---------- Clipboard (today) ---------- */
.ob-clip { padding: 8px 6px 0; }
.cb-board { position: relative; width: 100%; height: 100%; padding: 22px 10px 10px; border-radius: 12px; background: linear-gradient(160deg, #c08447, #8f5524); box-shadow: inset 0 0 0 2px rgba(0,0,0,.2), 0 10px 14px -8px rgba(0,0,0,.6); transform: rotate(1.2deg); }
.cb-clip { position: absolute; top: -6px; left: 50%; width: 56%; height: 26px; transform: translateX(-50%); border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #f2f2f2, #9aa1a8); border: 2px solid #4b5563; z-index: 2; }
.cb-clip::before { content: ""; position: absolute; top: -8px; left: 50%; width: 30%; height: 12px; transform: translateX(-50%); border: 3px solid #6b7280; border-bottom: 0; border-radius: 8px 8px 0 0; }
.cb-paper { height: 100%; display: flex; flex-direction: column; padding: 14px 10px 8px; background: repeating-linear-gradient(180deg, #fffdf7 0 25px, #bcd7ff 25px 26px); box-shadow: 0 2px 4px rgba(0,0,0,.3); overflow: hidden; }
.cb-title { margin: 0 0 2px; font: 700 26px/1 var(--font-hand, cursive); color: #c0392b; }
.cb-list { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 26px; overflow: auto; flex: 1; }
.cb-list li { display: flex; align-items: flex-start; gap: 6px; }
.cb-list label { display: flex; align-items: flex-start; gap: 6px; cursor: pointer; }
.cb-list input { width: 18px; height: 18px; margin-top: 4px; accent-color: #1d7a3a; flex: none; }
.cb-list .is-done span { text-decoration: line-through; color: #5a4836; }
.cb-dot { color: #c0392b; flex: none; } .cb-dot .icon { margin-top: 5px; }
.cb-add { align-self: flex-end; font-weight: 800; font-size: 13px; color: var(--ink); }
.cb-empty { font-size: 14px; color: #5a4836; }

/* ---------- Trophy (wins) ---------- */
.ob-trophy { flex-direction: column; align-items: center; justify-content: flex-end; }
/* the pedestal (draft 10, item 10b): the cup stands on a marble-and-gold pedestal that sits on the plank; the plaque is on its front */
/* The pedestal (draft 10, item 10b): the cup's foot rests on the top gold band (the picture's top 14% is the
   swag above the band, so the pedestal tucks up under the cup), the plaque is on the drum, the marble base on the plank. */
.tr-pedestal { --pdw: 150px; position: relative; display: block; width: min(84cqw, var(--pdw)); margin-top: calc(min(84cqw, var(--pdw)) * -0.09); z-index: 0; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.tr-pedestal svg { display: block; width: 100%; height: auto; }
.ob-trophy .tr-plinth { position: absolute; left: 50%; bottom: calc(min(84cqw, var(--pdw)) * 0.155); transform: translateX(-50%); width: calc(min(84cqw, var(--pdw)) * 0.78); padding: 0; background: none; box-shadow: none; z-index: 1; }
.ob-trophy .tr-plaque { padding: 2px 5px; border: 1.5px solid #5a3a0a; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset; gap: 1px; }
.ob-trophy .tr-plaque b { font-size: 10.5px; line-height: 1.1; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 100%; overflow-wrap: break-word; } .ob-trophy .tr-plaque small { font-size: 7.5px; line-height: 1.15; white-space: nowrap; max-width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; }
.ob-trophy .tr-pedestal { --pdw: 136px; }
/* the shortcut pill sits top-right (left of the ⋯ button), clear of the plaque; in the tall shape the ribbons start under it */
.ob-trophy + .ob-go { top: 4px; right: 44px; bottom: auto; }
.sh-2x1 .tr-ribbons { margin-top: 34px; }
.ob-trophy .tr-cup { position: relative; z-index: 1; }
.tr-cup { width: min(62cqh, 74cqw); max-width: 120px; filter: drop-shadow(0 6px 4px rgba(0,0,0,.35)); }
.tr-plinth { width: min(90cqw, 150px); padding: 6px 8px 7px; background: linear-gradient(180deg, #4a2c17, #2b170b); border-radius: 4px 4px 2px 2px; box-shadow: inset 0 3px 0 rgba(255,255,255,.15); }
.tr-plaque { display: flex; flex-direction: column; align-items: center; padding: 2px 6px; background: linear-gradient(180deg, #ffe599, #d4a017); border-radius: 3px; color: #3d2600; font-size: 13px; font-weight: 800; line-height: 1.1; text-align: center; }
.tr-plaque b { font-size: 20px; } .tr-plaque small { font-size: 11px; font-weight: 700; }
.tr-ribbons { order: -1; display: flex; flex-direction: column; gap: 5px; width: 94%; margin-bottom: 8px; }
.tr-rib { position: relative; padding: 4px 8px 4px 20px; background: var(--rb); color: #fff; font-weight: 800; font-size: 12px; line-height: 1.2; border-radius: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.tr-rib::before { content: "★"; position: absolute; left: 6px; top: 4px; color: #ffe066; }
.sh-2x1 .ob-trophy { justify-content: flex-end; padding-top: 6px; }

/* ---------- Recipe-card tin (routines) ---------- */
.ob-tin { flex-direction: column; align-items: stretch; padding: 0 6px; }
.tn-cards { position: relative; display: flex; align-items: flex-end; gap: 4px; padding: 0 10px; height: 74cqh; margin-bottom: -16cqh; z-index: 1; }
.tn-card { flex: 1; min-width: 0; height: calc(100% - var(--h)); display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 7px 7px; border: 2px solid var(--ink); border-radius: 8px 8px 0 0; background: linear-gradient(170deg, var(--c1), var(--c2)); color: var(--ink); text-decoration: none; box-shadow: 0 -2px 0 rgba(255,255,255,.4) inset; transition: transform .2s cubic-bezier(.2,.9,.3,1.4); }
.tn-card:hover, .tn-card:focus-visible { transform: translateY(-12px) rotate(-2deg); }
.tn-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fffaf0; border: 2px solid var(--ink); font-size: 15px; flex: none; overflow: hidden; }
.tn-ico.has-drawn svg, .tn-ico.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.tn-name { max-width: 100%; font-weight: 800; font-size: 13px; line-height: 1.15; background: rgba(255,250,240,.9); padding: 1px 4px; border-radius: 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; }
/* phones: four decks share the tin's width, names on up to four lines */
.w-grid[data-phone="1"] .tn-name { font-size: 11px; padding: 1px 2px; -webkit-line-clamp: 4; hyphens: auto; }
.w-grid[data-phone="1"] .tn-card { padding: 6px 4px; }
.tn-box { position: relative; z-index: 2; height: 40cqh; border-radius: 6px 6px 14px 14px; border: 3px solid var(--ink); background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.25) 0 3px, transparent 4px) 0 0 / 16px 16px, linear-gradient(180deg, #ff6b6b, #c92a2a); box-shadow: inset 0 6px 0 rgba(255,255,255,.25), 0 8px 10px -6px rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; gap: 10px; }
.tn-box::before { content: ""; position: absolute; left: -3px; right: -3px; top: -3px; height: 10px; border-radius: 6px; background: #a51d1d; border: 3px solid var(--ink); }
.tn-label { padding: 3px 12px; background: #fffaf0; border: 2px solid var(--ink); border-radius: 4px; font: 700 20px/1.1 var(--font-hand, cursive); transform: rotate(-2deg); }
.tn-count { font-weight: 800; font-size: 12px; color: #fff; }

/* ---------- Arcade cabinet ---------- */
.ob-arcade { padding: 0 4px; }
.cab { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; padding: 12px 16px 8px; border-radius: 22px 22px 8px 8px; text-decoration: none; color: #fff; background: linear-gradient(180deg, #33206a, #1a0f3a 60%, #120a2a); box-shadow: 0 0 0 3px #0b0620, 0 16px 22px -10px rgba(0,0,0,.7), 0 0 24px -4px rgba(255,79,216,.55); }
.cab-side { position: absolute; top: 0; bottom: 0; width: 10px; background: repeating-linear-gradient(180deg, #ff4fd8 0 10px, #22e6ff 10px 20px); opacity: .85; box-shadow: 0 0 12px #ff4fd8; }
.cab-left { left: 0; border-radius: 22px 0 0 8px; } .cab-right { right: 0; border-radius: 0 22px 8px 0; }
.cab-top { flex: none; display: block; margin: 0 4px 8px; padding: 6px; border-radius: 12px 12px 6px 6px; background: linear-gradient(90deg, #ff4fd8, #7b45c4, #22e6ff); box-shadow: 0 0 16px rgba(255,79,216,.6); text-align: center; animation: cab-glow 3s ease-in-out infinite; }
@keyframes cab-glow { 50% { filter: brightness(1.25); } }
.cab-marquee-big { font-weight: 900; letter-spacing: .25em; font-size: 12px; text-shadow: 0 0 6px #fff, 0 0 12px #ff4fd8; }
.cab-marquee-big b { display: block; letter-spacing: .3em; font-size: 18px; }
.cab-bezel { position: relative; flex: 1; min-height: 0; margin: 0 2px; padding: 8px; border-radius: 12px; background: #05030f; box-shadow: inset 0 0 0 3px #2a1a55; }
.cab-crt { position: relative; display: block; height: 100%; border-radius: 18px / 14px; overflow: hidden; background: radial-gradient(120% 100% at 50% 45%, #10183d 0%, #070a1f 70%, #020208 100%); box-shadow: inset 0 0 22px rgba(0,0,0,.9), inset 0 0 8px rgba(34,230,255,.35); }
.cab-crt::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 2px, transparent 2px 4px), radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.14), transparent 50%); pointer-events: none; }
.cab-hud { position: absolute; top: 6px; left: 8px; right: 8px; display: flex; justify-content: space-between; font: 800 10px/1 ui-monospace, monospace; color: #ffd25c; text-shadow: 0 0 6px #ffd25c; z-index: 1; }
.cab-insert { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font: 900 11px/1 ui-monospace, monospace; letter-spacing: .15em; color: #fff; text-shadow: 0 0 8px #22e6ff; animation: sc-twinkle 1.2s steps(2) infinite; }
.cab .am-net { position: absolute; left: 50%; top: 10%; bottom: 10%; border-left: 2px dashed rgba(255,255,255,.35); }
.cab .am-pad { position: absolute; top: 40%; width: 6px; height: 22%; border-radius: 3px; animation: am-pad 2.2s ease-in-out infinite alternate; }
.cab .am-l { left: 10%; background: #22e6ff; box-shadow: 0 0 10px #22e6ff; } .cab .am-r { right: 10%; background: #ff4fd8; box-shadow: 0 0 10px #ff4fd8; animation-delay: -1.1s; }
.cab .am-ball { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff; animation: am-ball 2.2s linear infinite alternate; top: 50%; left: 14%; }
@keyframes am-pad { from { transform: translateY(-60%); } to { transform: translateY(60%); } }
@keyframes am-ball { 0% { left: 14%; top: 30%; } 50% { top: 62%; } 100% { left: 82%; top: 40%; } }
.cab-panel { flex: none; display: flex; align-items: center; justify-content: space-between; margin: 8px -6px 0; padding: 10px 18px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #4b3592, #2a1a60); box-shadow: inset 0 3px 0 rgba(255,255,255,.15); transform: perspective(200px) rotateX(20deg); }
.cab-stick { position: relative; width: 26px; height: 26px; border-radius: 50%; background: #120a2a; }
.cab-stick i { position: absolute; left: 50%; bottom: 40%; width: 6px; height: 22px; margin-left: -3px; background: #ccc; border-radius: 3px; transform-origin: bottom; animation: stick 2.4s ease-in-out infinite; }
.cab-stick i::after { content: ""; position: absolute; top: -10px; left: -6px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9a9a, #e5484d); }
@keyframes stick { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
.cab-btns { display: flex; gap: 8px; } .cab-btns i { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 3px 0 rgba(0,0,0,.5); }
.cab-btns .b1 { background: #22e6ff; } .cab-btns .b2 { background: #ff4fd8; } .cab-btns .b3 { background: #ffd25c; }
.cab-coin { flex: none; display: flex; justify-content: center; gap: 10px; padding-top: 8px; } .cab-coin i { width: 14px; height: 20px; border-radius: 3px; background: #0b0620; box-shadow: inset 0 0 0 2px #ff9a3c, 0 0 8px rgba(255,154,60,.6); }
.cab:hover .cab-crt { box-shadow: inset 0 0 28px rgba(0,0,0,.95), inset 0 0 14px rgba(34,230,255,.6); }
.cab:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.cab-count { position: absolute; right: 14px; top: 46px; padding: 2px 7px; border-radius: 999px; background: #ffd25c; color: #23180f; font: 900 10px/1.3 ui-monospace, monospace; box-shadow: 0 2px 0 rgba(0,0,0,.4); transform: rotate(6deg); }

/* The old, broken machine: dusty, boarded up, cobwebs, a spider and a taped-on sign. Earn stars to fix it. */
button.cab { font: inherit; border: 0; cursor: pointer; text-align: left; }
.is-broken .cab { background: linear-gradient(180deg, #3b3550, #262238 60%, #1b1828); box-shadow: 0 0 0 3px #110d1c, 0 16px 22px -10px rgba(0,0,0,.7); overflow: visible; }
.is-broken .cab-side { background: repeating-linear-gradient(180deg, #7a5f86 0 10px, #4e6d78 10px 20px); opacity: .55; box-shadow: none; }
.is-broken .cab-top { background: linear-gradient(90deg, #6f4f7a, #4a3d70, #3f6a74); box-shadow: none; animation: none; filter: saturate(.5); }
.is-broken .cab-marquee-big { color: #cfc6d8; text-shadow: none; }
.is-broken .cab-marquee-big b { animation: cab-flicker 7s steps(1) infinite; }
@keyframes cab-flicker { 0%, 88%, 92%, 100% { opacity: .55; text-shadow: none; } 89%, 91% { opacity: 1; text-shadow: 0 0 6px #fff, 0 0 12px #ff4fd8; } }
.is-broken .cab-bezel { box-shadow: inset 0 0 0 3px #3a3250; overflow: visible; }
.cab-crt-dead { background: radial-gradient(120% 100% at 50% 45%, #1c1a28 0%, #0f0e16 70%, #050408 100%); box-shadow: inset 0 0 22px rgba(0,0,0,.9); }
.cab-crt-dead::after { background: radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.08), transparent 50%); }
.cab-crack { position: absolute; left: 30%; top: 20%; width: 40%; height: 50%; background:
  linear-gradient(32deg, transparent 48%, rgba(255,255,255,.45) 49%, rgba(255,255,255,.45) 51%, transparent 52%),
  linear-gradient(-70deg, transparent 48%, rgba(255,255,255,.35) 49%, rgba(255,255,255,.35) 51%, transparent 52%) no-repeat 20% 60% / 60% 50%,
  linear-gradient(100deg, transparent 48%, rgba(255,255,255,.3) 49%, rgba(255,255,255,.3) 51%, transparent 52%) no-repeat 70% 20% / 50% 40%; }
.cab-boards { position: absolute; inset: -4px -8px; pointer-events: none; }
.cab-boards i { position: absolute; left: -6%; right: -6%; height: 17%; min-height: 14px; border-radius: 3px; background: linear-gradient(180deg, #b7854f, #8a5a2b 55%, #6e4520); box-shadow: 0 3px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.2); }
.cab-boards i::before, .cab-boards i::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #3a2a1a; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.cab-boards i::before { left: 9%; } .cab-boards i::after { right: 9%; }
.cab-boards i:nth-child(1) { top: 26%; transform: rotate(-9deg); }
.cab-boards i:nth-child(2) { top: 56%; transform: rotate(7deg); }
.cab-web { position: absolute; width: 38%; max-width: 70px; aspect-ratio: 1; top: -2px; opacity: .9; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.cab-web svg { width: 100%; height: 100%; display: block; }
.cw-l { left: -2px; } .cw-r { right: -2px; transform: scaleX(-1); }
.cab-spider { position: absolute; right: 16%; top: 11%; width: 38px; display: flex; flex-direction: column; align-items: center; transform-origin: top center; animation: sp-bob 3.6s ease-in-out infinite; z-index: 4; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.sp-thread { display: block; width: 1.5px; height: 48px; background: rgba(255,255,255,.8); }
.cab-spider svg { width: 38px; height: 34px; display: block; margin-top: -3px; }
@keyframes sp-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(9px) rotate(-4deg); } }
.cab-dust { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(80% 50% at 50% 100%, rgba(120,110,90,.25), transparent 70%), repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 7px); pointer-events: none; }
.cab-sign { position: absolute; left: 50%; bottom: 26%; width: 78%; max-width: 150px; transform: translateX(-50%) rotate(-6deg); padding: 7px 8px 6px; border-radius: 4px; background: linear-gradient(180deg, #d9b074, #b98950); border: 2px solid #5a3a1a; box-shadow: 0 4px 0 rgba(0,0,0,.4); color: #3a2410; text-align: center; font-family: var(--font-hand, cursive); line-height: 1; z-index: 3; }
.cab-sign b { display: block; font-size: 17px; font-weight: 800; }
.cab-sign small { display: block; margin-top: 4px; font: 800 11px/1 var(--font-body); color: #5a3a1a; }
.cab-sign .tape { position: absolute; top: -9px; width: 34px; height: 14px; background: rgba(255,246,200,.72); border: 1px solid rgba(0,0,0,.08); transform: rotate(-28deg); }
.cab-sign .tape.tr { right: -8px; transform: rotate(32deg); } .cab-sign .tape.tl { left: -8px; }
.is-broken .cab:hover .cab-sign { transform: translateX(-50%) rotate(-3deg) scale(1.04); }
.is-broken .cab-stick i { animation: none; transform: rotate(22deg); } .is-broken .cab-stick i::after { background: radial-gradient(circle at 35% 30%, #c9a5a5, #8a5a5a); }
.is-broken .cab-btns i { filter: saturate(.3) brightness(.7); }
.is-broken .cab-coin i { box-shadow: inset 0 0 0 2px #7a6a50; }
/* the day it gets fixed: the boards fall away */
.is-fixing .cab-boards i { animation: board-fall 1.4s cubic-bezier(.5,0,.9,.4) forwards; }
.is-fixing .cab-boards i:nth-child(2) { animation-delay: .35s; }
@keyframes board-fall { 0% { opacity: 1; } 15% { transform: rotate(-9deg) translateY(-4px); } 100% { transform: rotate(60deg) translateY(260px); opacity: 0; } }
.is-fixing .cab-top { animation: cab-glow 3s ease-in-out infinite, cab-wake 2.2s steps(1) both; }
@keyframes cab-wake { 0%, 20%, 40%, 55% { filter: saturate(.3) brightness(.6); } 10%, 30%, 48%, 60%, 100% { filter: none; } }

/* ---------- Talking-button box (choices) ---------- */
.ob-talk { padding: 6px 4px 0; }
.tb-box { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 10px 12px 8px; border-radius: 22px 22px 14px 14px; border: 3px solid var(--ink); background: radial-gradient(circle at 18% 12%, rgba(255,255,255,.45), transparent 35%), linear-gradient(180deg, #2ec4b6, #138a7e); box-shadow: inset 0 -6px 0 rgba(0,0,0,.18), 0 8px 10px -6px rgba(0,0,0,.6); }
.tb-grille { position: absolute; top: 8px; right: 14px; width: 40px; height: 16px; background: radial-gradient(circle, #0b4f48 0 2px, transparent 2.5px) 0 0 / 7px 7px; border-radius: 6px; }
.tb-btns { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; align-items: center; }
.tb-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--ink); }
.tb-dome { display: grid; place-items: center; width: min(54px, 34cqh); aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--ink); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cc) 30%, #fff), var(--cc) 60%, color-mix(in srgb, var(--cc) 70%, #000)); color: #fff; font-size: 22px; box-shadow: 0 5px 0 var(--ink); transition: transform .1s, box-shadow .1s; }
.tb-btn:active .tb-dome, .tb-btn.is-speaking .tb-dome { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.tb-word { font-weight: 800; font-size: 12px; line-height: 1.1; padding: 2px 6px; background: #fffaf0; border-radius: 8px; border: 1.5px solid var(--ink); max-width: 100%; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tb-word { overflow-wrap: normal; word-break: keep-all; hyphens: none; max-width: none; margin: 0 -6px; } /* a long word stays whole and may poke past its button a little (draft 10) */
.tb-more { align-self: flex-end; margin-top: auto; }
/* the giant talking-button box (5 wide, 4 tall): every card at once, big domes and big words (draft 10, item 21); the big face (2x2, phones) wraps two rows */
.ob-talk.is-giant .tb-box, .ob-talk.is-big .tb-box { padding: 14px 16px 12px; }
.ob-talk.is-giant .tb-btns, .ob-talk.is-big .tb-btns { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; gap: 14px 10px; align-content: space-evenly; align-items: start; }
.ob-talk.is-big .tb-btns { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; align-content: space-evenly; }
.ob-talk.is-giant .tb-dome, .ob-talk.is-big .tb-dome { flex: none; }
.ob-talk.is-giant .tb-dome { --dome: min(112px, 18cqh); width: var(--dome); height: var(--dome); font-size: 44px; } .ob-talk.is-giant .tb-dome .icon { width: 48px; height: 48px; }
.ob-talk.is-giant .tb-word { font-size: 17px; padding: 4px 12px; margin-top: 4px; }
.ob-talk.is-giant.is-few .tb-btns { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 12px; }
.ob-talk.is-giant.is-few .tb-dome { --dome: min(150px, 22cqh); font-size: 56px; } .ob-talk.is-giant.is-few .tb-dome .icon { width: 64px; height: 64px; }
.ob-talk.is-giant.is-few .tb-word { font-size: 20px; }
.ob-talk.is-giant.is-some .tb-btns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ob-talk.is-giant.is-some .tb-dome { --dome: min(124px, 19cqh); }
.ob-talk.is-big .tb-dome { --dome: min(58px, 14cqh); width: var(--dome); height: var(--dome); }
.ob-talk.is-giant .tb-grille { width: 60px; height: 22px; }

/* ---------- Helper robot (summary) ---------- */
.ob-robot { gap: 6px; align-items: flex-end; padding: 0 2px; }
.rb-body { flex: none; width: min(34cqw, 76cqh); max-width: 130px; filter: drop-shadow(0 6px 4px rgba(0,0,0,.3)); }
.rb-eyes { animation: rb-blink 4s infinite; transform-origin: 60px 52px; }
@keyframes rb-blink { 0%, 92%, 100% { transform: none; } 95% { transform: scaleY(.1); } }
.rb-bulb { animation: cab-glow 1.6s ease-in-out infinite; }
.rb-screen { position: relative; flex: 1; min-width: 0; align-self: stretch; margin: 6px 0 10px; padding: 8px 10px; border-radius: 14px; border: 3px solid var(--ink); background: #0b2318; color: #c8ffe1; font: 700 13px/1.3 "Atkinson Hyperlegible Next", system-ui, sans-serif; box-shadow: inset 0 0 14px rgba(0,0,0,.6), 0 5px 0 var(--ink); overflow: hidden; display: flex; flex-direction: column; gap: 4px; }
.rb-screen::before { content: ""; position: absolute; left: -14px; bottom: 18px; border: 8px solid transparent; border-right: 10px solid var(--ink); }
.rb-screen p { margin: 0; }
.rb-head { font: 900 11px/1 ui-monospace, monospace !important; letter-spacing: .15em; text-transform: uppercase; color: #ffd166; }
.rb-screen p:not(.rb-head):not(.rb-flag) { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.rb-flag { color: #ffe08a; font-weight: 800; }
.rb-more { margin-top: auto; align-self: flex-end; }

/* ---------- Journal (daily log) ---------- */
.ob-journal { padding: 4px 0 0; }
.jr-book { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(74cqw, 72cqh); height: 94%; border-radius: 4px 14px 14px 4px; background: radial-gradient(circle at 70% 20%, rgba(255,255,255,.18), transparent 40%), linear-gradient(90deg, #5a1f1f 0 9%, #8f2d2d 9%); box-shadow: inset -3px 0 0 #f3e6cf, inset -6px 0 0 #d9c8a8, inset -8px 0 0 #f3e6cf, 0 10px 12px -6px rgba(0,0,0,.6); outline: 2px dashed rgba(255,220,180,.45); outline-offset: -9px; transform: rotate(-3deg); transition: transform .25s; }
.ob-journal:hover .jr-book { transform: rotate(0) translateY(-4px); }
.jr-ribbon { position: absolute; bottom: -12px; left: 30%; width: 8px; height: 24px; background: #ffd23f; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); }
.jr-strap { position: absolute; top: 0; bottom: 0; right: 18%; width: 9px; background: #23180f; opacity: .85; }
.jr-plate { position: relative; display: flex; flex-direction: column; align-items: center; padding: 5px 10px; background: linear-gradient(180deg, #ffe7a0, #d9a520); border: 2px solid #6b4a00; border-radius: 4px; color: #3d2600; text-align: center; line-height: 1.1; z-index: 1; }
.jr-plate b { font: 700 22px/1 var(--font-hand, cursive); } .jr-plate small { font-weight: 800; font-size: 12px; }
.jr-stamp { position: absolute; top: 10%; left: 12%; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #7dffb0; color: #7dffb0; font-size: 18px; transform: rotate(-14deg); }
.jr-mood { position: absolute; bottom: 10%; left: 14%; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ffd23f; color: var(--ink); border: 2px solid var(--ink); font-size: 18px; }

/* ---------- ID badge (profile) ---------- */
.ob-badge { flex-direction: column; justify-content: flex-start; align-items: center; }
.bd-strap { width: 40%; height: 24%; background: repeating-linear-gradient(90deg, #2c56c9 0 6px, #ff6b6b 6px 12px); clip-path: polygon(0 0, 22% 0, 56% 100%, 44% 100%, 78% 0, 100% 0, 60% 100%, 40% 100%); }
.bd-clip { width: 18px; height: 14px; margin-top: -2px; border-radius: 3px; background: linear-gradient(180deg, #e5e7eb, #9ca3af); border: 2px solid #4b5563; }
.bd-card { display: flex; flex-direction: column; align-items: center; gap: 3px; width: min(78cqw, 58cqh); min-height: 0; flex: 1; margin-top: -2px; padding: 0 6px 6px; background: #fffdf7; border: 3px solid var(--ink); border-radius: 10px; box-shadow: 0 8px 10px -6px rgba(0,0,0,.6); overflow: hidden; transform: rotate(2deg); transform-origin: top center; animation: bd-sway 5s ease-in-out infinite; }
@keyframes bd-sway { 50% { transform: rotate(-2deg); } }
.bd-bar { align-self: stretch; margin: 0 -6px 3px; padding: 3px; background: #e5484d; color: #fff; text-align: center; font: 900 10px/1.1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.bd-card .m-avatar { width: min(52px, 26cqh) !important; height: min(52px, 26cqh) !important; flex: none; }
.bd-name { font-size: 14px; line-height: 1.1; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bd-card small { font-size: 12px; font-weight: 700; color: #5a4836; }
.bd-imp { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 4px; }
.bd-imp i { font-style: normal; font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: #ffe066; border: 1.5px solid var(--ink); }
.ob-badge.is-tall .bd-strap { height: 14%; }

/* ---------- First-aid kit (vital) ---------- */
.ob-kit { flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 4px; }
.kt-handle { width: 30%; height: 16px; border: 6px solid #9b1c1c; border-bottom: 0; border-radius: 12px 12px 0 0; }
.kt-box { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 72%; padding: 8px 12px; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(180deg, #ffffff, #eef0f2); box-shadow: inset 0 -6px 0 rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.6); }
.kt-box::before { content: ""; position: absolute; left: -3px; right: -3px; top: 38%; height: 6px; background: #d62828; }
.kt-cross { position: relative; flex: none; width: min(58px, 40cqh); aspect-ratio: 1; background: conic-gradient(from 0deg at 50% 50%, transparent 0) , #d62828; clip-path: polygon(33% 0, 67% 0, 67% 33%, 100% 33%, 100% 67%, 67% 67%, 67% 100%, 33% 100%, 33% 67%, 0 67%, 0 33%, 33% 33%); z-index: 1; }
.kt-label { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 5px 8px; background: #fffaf0; border: 2px solid var(--ink); border-radius: 6px; font-size: 13px; line-height: 1.2; overflow: hidden; }
.kt-label b { font-size: 14px; color: #9b1c1c; }
/* the kit's shortcut pill sits above the box, beside the handle, clear of the card's last line (the sample on Station 4 showed it covering "Health") */
.w-vital .ob-go { top: 6px; bottom: auto; }
.kt-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-label em { font-style: normal; font-weight: 800; }
.sh-1x1 .kt-box { flex-direction: column; justify-content: center; }
.sh-1x1 .kt-label { flex: none; text-align: center; }

/* ---------- Target and flag (goals) ---------- */
.ob-goal { gap: 4px; align-items: flex-end; padding: 0 4px; }
.gf-target { flex: none; width: min(34cqw, 80cqh); max-width: 120px; }
.ob-arrow { animation: gl-thunk 4s ease-in-out infinite; transform-origin: 62px 60px; }
@keyframes gl-thunk { 0%, 88%, 100% { transform: none; } 92% { transform: rotate(-4deg); } 96% { transform: rotate(2deg); } }
.gf-flag { position: relative; flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; gap: 4px; margin: 2px 0 0 10px; padding: 8px 34px 26px 18px; isolation: isolate; }
.gf-flag::before { content: ""; position: absolute; inset: 0 0 18px 8px; z-index: -1; background: repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 10px, transparent 10px 20px), color-mix(in srgb, var(--gc, #3f9a2f) 85%, #000); clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 50%, 100% 100%, 0 100%); filter: drop-shadow(0 4px 0 rgba(0,0,0,.3)); animation: gf-wave 4s ease-in-out infinite; transform-origin: left center; }
@keyframes gf-wave { 50% { transform: skewY(-1.5deg) scaleX(.98); } }
.gf-flag::after { content: ""; position: absolute; left: 0; top: -6px; bottom: 0; width: 8px; border-radius: 4px; background: linear-gradient(90deg, #d9a066, #8a5a2b); box-shadow: 0 -4px 0 2px #ffd23f; }
.gf-flag > * { background: #fffaf0; border-radius: 6px; padding: 2px 6px; }
.gf-flag .gf-steps { background: rgba(255,250,240,.95); padding: 4px 6px; }
.gf-title { font-weight: 900; font-size: 15px; line-height: 1.15; color: var(--ink); text-decoration: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gf-title:hover { text-decoration: underline; }
.gf-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.2; overflow: auto; }
.gf-steps label { display: flex; gap: 6px; align-items: flex-start; cursor: pointer; }
.gf-steps input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #1d7a3a; }
.gf-steps .is-done span, .gf-steps input:checked + span { text-decoration: line-through; color: #5a4836; }
.gf-week { margin: auto 0 0; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; }
.gf-week .gl-week { margin: 0; padding: 0; background: none; box-shadow: none; border: 0; }
.ob-goal .gl-chip { display: none; }

/* ---------- Pill organizer (medicines) ---------- */
.ob-pills { padding: 6px 2px 0; }
.pl-case { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 8px 10px 10px; border-radius: 18px; border: 3px solid var(--ink); background: linear-gradient(180deg, #b197fc, #7048e8); box-shadow: inset 0 5px 0 rgba(255,255,255,.3), 0 8px 10px -6px rgba(0,0,0,.6); }
.pl-title { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 14px; color: #fff; }
.pl-title b { margin-left: auto; padding: 0 8px; border-radius: 999px; background: #fffaf0; color: var(--ink); font-size: 13px; }
.pl-row { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.pl-row li { display: flex; min-width: 0; }
/* the real-looking organizer: four lidded compartments for today */
.pb-mini { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 7px 9px 9px; border-radius: 18px; border: 3px solid var(--ink); background: linear-gradient(180deg, #e9e3f6, #c9bfe6); box-shadow: inset 0 3px 0 rgba(255,255,255,.6), 0 6px 0 #6b5d8f, 0 12px 14px -10px rgba(0,0,0,.6); }
.pb-mini-title { margin: 0 0 5px; display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 13px; color: #2c2340; }
.pb-mini-title b { margin-left: auto; padding: 0 8px; border-radius: 999px; background: #fffaf0; color: var(--ink); font-size: 12px; border: 1.5px solid var(--ink); }
.pb-mini-row { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.pb-mcell { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; border: 2px solid var(--ink); border-radius: 10px; background: #fffaf0; font: inherit; color: var(--ink); cursor: pointer; overflow: hidden; perspective: 400px; }
.pb-mcell:disabled { cursor: default; background: #ece6da; border-style: dashed; opacity: .8; }
.pb-mcell:focus-visible { outline: 3px solid #2b2bff; outline-offset: 2px; }
.pb-mlid { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; height: 30%; min-height: 20px; border-bottom: 2px solid var(--ink); background: linear-gradient(180deg, color-mix(in srgb, var(--lid) 55%, #fff), var(--lid)); color: var(--lid-ink); font-weight: 900; font-size: 11px; letter-spacing: .04em; transform-origin: top; transition: transform .5s cubic-bezier(.3,1.3,.5,1); }
.pb-mlid::after { content: ""; position: absolute; right: 4px; top: 50%; width: 10px; height: 5px; margin-top: -2.5px; border-radius: 999px; background: rgba(255,255,255,.6); border: 1px solid rgba(0,0,0,.35); }
.pb-mcell.is-done .pb-mlid, .pb-mcell.is-open .pb-mlid { transform: rotateX(-120deg); }
.pb-mwell { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 2px; padding: 4px 3px; background: radial-gradient(120% 90% at 50% 100%, #fff, #f1eadb 80%); box-shadow: inset 0 5px 8px -5px rgba(0,0,0,.3); }
.pb-mwell .pill { filter: drop-shadow(0 1.5px 1px rgba(0,0,0,.3)); }
.pb-mphoto { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; border: 1.5px solid var(--ink); }
.pb-more { font-size: 10px; font-weight: 900; align-self: center; }
.pb-mcheck { display: grid; place-items: center; width: 26px; height: 26px; margin: auto; border-radius: 50%; background: #1d7a3a; color: #fff; } .pb-mcheck .icon { width: 16px; height: 16px; stroke-width: 3; }
.pb-mcell.is-done { background: #eef8ef; }
.pb-mcell:hover:not(:disabled) .pb-mwell { background: radial-gradient(120% 90% at 50% 100%, #fff, #fff3b0 80%); }
.sh-1x3 .pb-mlid { font-size: 13px; } .sh-1x3 .pb-mwell .pill { width: 30px; height: 30px; }
@container (max-width: 360px) { .pb-mlid { font-size: 10px; } }
/* the whole-week organizer (draft 10, item 9) */
.pb-week { gap: 4px; }
.pw-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 38px repeat(var(--days, 7), minmax(0, 1fr)); grid-template-rows: 30px; grid-auto-rows: minmax(0, 1fr); gap: 4px; }
.pw-day { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; border-radius: 8px; background: rgba(255, 250, 240, .7); border: 1.5px solid rgba(35, 24, 15, .35); color: #2c2340; }
.pw-day b { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; } .pw-day small { font-size: 11px; font-weight: 800; }
.pw-day.is-today { background: #fff15c; border-color: var(--ink); border-width: 2px; }
.pw-day.is-past { opacity: .7; }
.pw-slot { display: grid; place-items: center; border-radius: 8px; border: 2px solid var(--ink); background: linear-gradient(180deg, color-mix(in srgb, var(--lid) 55%, #fff), var(--lid)); color: var(--lid-ink); font-size: 11px; font-weight: 900; }
.pw-cell { position: relative; display: flex; min-width: 0; min-height: 0; padding: 0; border: 2px solid var(--ink); border-radius: 9px; background: #fffaf0; font: inherit; color: var(--ink); overflow: hidden; border-top: 5px solid var(--lid); }
.pw-cell .pb-mwell { padding: 3px 2px; gap: 1px; }
.pw-cell .pb-mwell .pill { width: 26px; height: 26px; }
.pw-cell.is-empty { background: transparent; border-style: dashed; border-color: rgba(35, 24, 15, .25); border-top-color: color-mix(in srgb, var(--lid) 60%, transparent); }
.pw-cell.is-empty .pb-mwell { display: none; }
.pw-cell.is-past:not(.is-done):not(.is-empty) { background: #f1e8e4; } .pw-cell.is-past:not(.is-done) .pb-mwell { opacity: .55; filter: grayscale(.5); }
.pw-cell.is-later:not(.is-empty) .pb-mwell { opacity: .8; }
.pw-cell.is-today { cursor: pointer; box-shadow: 0 0 0 2px #fff15c; }
.pw-cell.is-today:hover .pb-mwell { background: radial-gradient(120% 90% at 50% 100%, #fff, #fff3b0 80%); }
.pw-cell.is-today:focus-visible { outline: 3px solid #2b2bff; outline-offset: 2px; }
.pw-cell.is-done { background: #eef8ef; }
.pw-cell .pb-mcheck { width: 22px; height: 22px; } .pw-cell .pb-mcheck .icon { width: 14px; height: 14px; }
/* phones: the week keeps its seven columns and scrolls sideways inside the piece */
.w-grid[data-phone="1"] .pb-week { overflow-x: auto; scrollbar-width: thin; }
.w-grid[data-phone="1"] .pw-grid { min-width: 560px; }
/* when there is room for two rows of compartments, show every dose at once instead of scrolling */
.sh-1x3 .pl-row, .w-grid[data-phone="1"] .pl-row { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); grid-auto-columns: auto; grid-auto-rows: 1fr; overflow: hidden; }
.pl-cell { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 1px; padding: 0 3px 5px; border: 2px solid var(--ink); border-radius: 10px; background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55)); cursor: pointer; font: inherit; color: var(--ink); overflow: hidden; perspective: 300px; }
.pl-lid { position: absolute; inset: 0 0 auto; height: 52%; border-bottom: 2px solid var(--ink); background: linear-gradient(180deg, color-mix(in srgb, var(--lid) 60%, #fff), var(--lid)); transform-origin: top; transition: transform .35s cubic-bezier(.2,.9,.3,1.4); }
.pl-lid::after { content: ""; position: absolute; left: 50%; top: 40%; width: 22px; height: 10px; margin-left: -11px; border-radius: 999px; background: linear-gradient(90deg, #fff 50%, #ff6b6b 50%); border: 1.5px solid var(--ink); }
.pl-cell.is-taken .pl-lid { transform: rotateX(-160deg); }
.pl-cell.is-taken::after { content: "✓"; position: absolute; top: 8%; left: 50%; transform: translateX(-50%); font-weight: 900; font-size: 22px; color: #1d7a3a; }
.pl-time { font-weight: 900; font-size: 13px; line-height: 1.1; }
.pl-name { font-size: 11px; font-weight: 700; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-empty { margin: 0; padding: 6px 8px; border-radius: 8px; background: #fffaf0; font-size: 13px; font-weight: 700; }

/* ---------- Coin jar (budget) ---------- */
.ob-jar { flex-direction: column; align-items: center; justify-content: flex-end; }
.jr-lid { width: min(70cqw, 120px); height: 14px; border-radius: 6px 6px 2px 2px; background: repeating-linear-gradient(90deg, #c9c9c9 0 3px, #8f8f8f 3px 5px); border: 2px solid #4b5563; margin-bottom: -2px; z-index: 1; }
.jr-glass { position: relative; width: min(84cqw, 140px); height: 78%; border-radius: 18px 18px 26px 26px; border: 3px solid rgba(40,80,90,.65); background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(200,240,255,.25) 30%, rgba(255,255,255,.12) 70%, rgba(255,255,255,.45)); box-shadow: inset 0 0 0 4px rgba(255,255,255,.25), 0 8px 10px -6px rgba(0,0,0,.5); overflow: hidden; }
.ob-jar:not(.is-tall) .jr-glass { height: 74%; }
.jr-coins { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: 0 2px; padding: 0 8px; }
.jr-coins i { width: 26px; height: 12px; margin-top: -3px; border-radius: 50%; background: radial-gradient(ellipse at 40% 35%, #fff3b0, #f5c518 50%, #b8860b); border: 1.5px solid #7a5600; transform: translateX(calc(var(--x) * .1)) rotate(calc(var(--x) * .3deg)); animation: jr-drop .5s cubic-bezier(.3,1.4,.5,1) both; animation-delay: var(--d); }
@keyframes jr-drop { from { transform: translateY(-120px); opacity: 0; } }
.jr-tag { position: absolute; left: 50%; top: 18%; transform: translateX(-50%) rotate(-3deg); display: flex; flex-direction: column; align-items: center; padding: 4px 10px; background: #fffaf0; border: 2px solid var(--ink); border-radius: 6px; line-height: 1.1; text-align: center; box-shadow: 0 3px 0 rgba(0,0,0,.25); white-space: nowrap; }
.jr-tag b { font-size: 17px; } .jr-tag small { font-size: 11px; font-weight: 800; } .jr-tag em { font-style: normal; font-size: 10px; font-weight: 700; color: #5a4836; }
.ob-jar:not(.is-tall) .jr-tag { top: 8%; }
/* the jar reads the room: a tinted water line for how much is left, and a mood when money runs low */
.jr-level { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--pct, 30) * 1%); background: linear-gradient(180deg, rgba(120,220,160,.18), rgba(120,220,160,.42)); border-top: 2px solid rgba(255,255,255,.55); transition: height .8s var(--toy-spring, ease); }
.ob-jar.tone-mid .jr-level { background: linear-gradient(180deg, rgba(255,210,80,.2), rgba(255,190,60,.45)); }
.ob-jar.tone-low .jr-level { background: linear-gradient(180deg, rgba(255,120,90,.22), rgba(255,90,70,.5)); }
.ob-jar.tone-over .jr-glass { box-shadow: inset 0 0 0 4px rgba(255,255,255,.25), inset 0 0 30px rgba(229,72,77,.35), 0 8px 10px -6px rgba(0,0,0,.5); }
.ob-jar.tone-over .jr-tag, .ob-jar.tone-low .jr-tag { border-color: #a3171b; } .ob-jar.tone-over .jr-tag b { color: #a3171b; }
.ob-jar.tone-good .jr-coins i:nth-child(3n) { animation-name: jr-drop, jr-shine; animation-duration: .5s, 4s; animation-iteration-count: 1, infinite; }
@keyframes jr-shine { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
.jr-face { position: absolute; left: 50%; bottom: calc(var(--pct, 10) * 1% + 10px); transform: translateX(-50%); font-size: 24px; line-height: 1; filter: drop-shadow(0 2px 0 rgba(0,0,0,.2)); }
/* spilled coins on the plank: spent today */
.jr-spent { position: absolute; right: 2%; bottom: 0; display: flex; align-items: flex-end; gap: 2px; }
.jr-spent i { width: 18px; height: 9px; border-radius: 50%; background: radial-gradient(ellipse at 40% 35%, #fff3b0, #f5c518 50%, #b8860b); border: 1.5px solid #7a5600; }
.jr-spent i:nth-child(2) { margin-left: -8px; transform: rotate(-12deg) translateY(-3px); }
.jr-spent b { margin-left: 2px; padding: 1px 6px; border-radius: 6px; background: #fffaf0; border: 2px solid var(--ink); font-size: 10px; white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
/* a little piggy bank beside the tall jar: all my saving goals together */
.jr-piggy { position: absolute; left: 4%; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 34%; max-width: 70px; }
.pg-body { position: relative; width: 100%; aspect-ratio: 1.25; border-radius: 50% 50% 42% 42% / 60% 60% 40% 40%; background: #ffb3c7; border: 2.5px solid #7a2340; overflow: hidden; box-shadow: inset 0 -5px 0 rgba(0,0,0,.08), 0 4px 0 #7a2340; }
.pg-body::before { content: ""; position: absolute; left: 32%; top: -6px; width: 22%; height: 8px; border-radius: 3px; background: #7a2340; }
.pg-fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--pct, 0) * 1%); background: linear-gradient(180deg, #ffd34f, #f5a900); border-top: 2px solid rgba(255,255,255,.6); transition: height .8s var(--toy-spring, ease); }
.pg-eye { position: absolute; left: 24%; top: 34%; width: 6px; height: 6px; border-radius: 50%; background: #3a1020; }
.pg-snout { position: absolute; right: 8%; top: 40%; width: 30%; height: 34%; border-radius: 50%; background: #ff8fb0; border: 2px solid #7a2340; }
.pg-snout::before, .pg-snout::after { content: ""; position: absolute; top: 38%; width: 3px; height: 4px; border-radius: 50%; background: #7a2340; } .pg-snout::before { left: 28%; } .pg-snout::after { right: 28%; }
.pg-tag { padding: 1px 6px; border-radius: 6px; background: #fffaf0; border: 2px solid var(--ink); font-size: 10px; font-weight: 800; white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.ob-jar.is-tall .jr-glass { width: min(62cqw, 140px); margin-left: 18%; }
.ob-jar.is-tall .jr-lid { margin-left: 18%; width: min(52cqw, 120px); }

/* ---------- Emergency box ---------- */
.ob-alarm { flex-direction: column; align-items: center; justify-content: flex-end; }
.al-box { display: flex; flex-direction: column; align-items: center; gap: 5px; width: min(80cqw, 70cqh); height: 86%; padding: 7px; border-radius: 10px; border: 3px solid var(--ink); background: linear-gradient(180deg, #ff4d4d, #c1121f); box-shadow: inset 0 4px 0 rgba(255,255,255,.3), 0 8px 10px -6px rgba(0,0,0,.6); color: #fff; }
.al-top { font: 900 10px/1.1 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.al-glass { flex: 1; width: 100%; display: grid; place-items: center; border-radius: 6px; border: 3px solid #fff; background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.15) 45%, rgba(255,255,255,.4)); }
.al-glass span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fffaf0; color: #c1121f; font-size: 24px; border: 2px solid var(--ink); animation: al-ring 3s ease-in-out infinite; }
@keyframes al-ring { 0%, 80%, 100% { transform: none; } 84% { transform: rotate(-14deg); } 88% { transform: rotate(14deg); } 92% { transform: rotate(-8deg); } }
.al-word { font-weight: 900; font-size: 14px; padding: 1px 8px; border-radius: 4px; background: #fffaf0; color: #9b1c1c; }
.al-stripes { width: min(90cqw, 80cqh); height: 9px; margin-top: 2px; background: repeating-linear-gradient(45deg, #ffd000 0 10px, #23180f 10px 20px); border-radius: 2px; }

/* ---------- Steady hovers (draft 10, post-deploy item 1) ----------
   A thing that lifts or slides when the pointer rests on it leaves a band where it stood. A pointer resting in that
   band then sits on nothing, the thing drops back under it, lifts again, and so on: a fast flutter at the edges.
   While it is lifted, each of these keeps an invisible extension over the band it left, so the pointer stays on it. */
.tn-card, .np-tab, .lp-book, .gd-arrow, .ob-btn, .tm-btn { position: relative; }
.tn-card:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.fr:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 7px; }
.dr:hover::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 6px; }
.gd-back:hover::after { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 22px; }
.ky-key:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 4px; }
.np-tab:hover::after, .lp-book:hover::after { content: ""; position: absolute; inset: -2px -2px -2px -6px; }
.ob-notepad.is-wide .np-tab:hover::after { inset: -2px -2px -5px -2px; }
.gd-arrow:hover::after, .ob-btn:hover::after, .tm-btn:hover::after, .ob-go:hover::after { content: ""; position: absolute; inset: -2px -2px -4px -2px; border-radius: inherit; }
/* a book's lower gold line grows a clear tail below the book while it is pulled out */
.bk:hover::after { bottom: -11px; height: 18px; background: linear-gradient(180deg, rgba(255,230,150,.7) 0 3px, transparent 3px); }

/* ---------- Photo frames (people) ---------- */
.ob-frames { gap: 8px; align-items: flex-end; padding: 0 4px; }
.fr { position: relative; flex: 1; min-width: 0; height: var(--h); max-width: 140px; display: flex; flex-direction: column; padding: 8px 8px 6px; text-decoration: none; color: var(--ink); box-shadow: 0 8px 10px -6px rgba(0,0,0,.6); transition: transform .2s; }
.fr:nth-child(odd) { transform: rotate(-3deg); } .fr:nth-child(even) { transform: rotate(2.5deg); }
.fr:hover { transform: translateY(-5px) rotate(0); }
.fr-wood { background: linear-gradient(135deg, #b77a42, #7c4a1e); }
.fr-gold { background: linear-gradient(135deg, #ffe08a, #c99400 50%, #ffe08a); border-radius: 50% 50% 6px 6px / 30% 30% 6px 6px; }
.fr-paint { background: #2ec4b6; border: 3px solid var(--ink); }
.fr-pic { flex: 1; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #fff 0 18%, transparent 19%), var(--fc); border: 2px solid rgba(0,0,0,.35); font: 900 clamp(22px, 22cqh, 40px)/1 Fraunces, Georgia, serif; color: var(--ink); }
.fr-gold .fr-pic { border-radius: 50% 50% 4px 4px / 30% 30% 4px 4px; }
.fr-name { margin-top: 4px; padding: 1px 4px; background: #fffaf0; border-radius: 3px; font-weight: 800; font-size: 12px; line-height: 1.15; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-call { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #3fb37f; color: #fff; border: 2px solid var(--ink); font-size: 14px; }

/* ---------- Row of books (library shelf) ---------- */
.ob-books { gap: 4px; align-items: flex-end; justify-content: flex-start; padding: 0 8px; }
.bk { position: relative; flex: var(--bw) 1 0; min-width: 34px; max-width: 64px; height: var(--bh); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 8px; border: 2px solid var(--ink); border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, rgba(255,255,255,.25) 0 10%, transparent 10% 85%, rgba(0,0,0,.2) 85%), var(--bk); color: #fff; text-decoration: none; box-shadow: 0 6px 6px -4px rgba(0,0,0,.6); transition: transform .2s cubic-bezier(.2,.9,.3,1.4); }
.bk::before, .bk::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: rgba(255,230,150,.7); }
.bk::before { top: 5px; } .bk::after { bottom: 4px; }
.bk.is-lean { transform: rotate(-7deg); transform-origin: bottom left; margin-left: 10px; }
.bk:hover, .bk:focus-visible { transform: translateY(-10px); }
.bk-ico { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 4px; border-radius: 50%; background: #fffaf0; color: var(--bk); font-size: 12px; flex: none; position: relative; z-index: 1; }
/* the whole title, small and very bold, wrapping into as many lines as the spine needs (fitBookTitles shrinks it if needed) */
.bk-title { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 900; font-size: 11px; line-height: 1.05; letter-spacing: .01em; white-space: normal; overflow-wrap: anywhere; text-align: center; overflow: hidden; max-width: 100%; text-shadow: 0 1px 1px rgba(0,0,0,.55); }
.bk-end { color: var(--ink); } .bk-end .bk-ico { color: var(--ink); } .bk-end .bk-title { text-shadow: none; }

/* ---------- Sticky-note pad ---------- */
.ob-pad { padding: 6px 6px 0; }
.pd-stack { position: absolute; left: 10px; right: 10px; bottom: 0; height: 18px; background: repeating-linear-gradient(180deg, #ffe066 0 3px, #f5c400 3px 4px); border-radius: 0 0 4px 4px; box-shadow: 0 6px 8px -4px rgba(0,0,0,.5); }
.pd-sheet { position: absolute; left: 6px; right: 6px; top: 6px; bottom: 14px; background: linear-gradient(170deg, #fff6a8, #ffe66b); box-shadow: 0 4px 6px -2px rgba(0,0,0,.35); transform: rotate(-2deg); border-radius: 2px 2px 14px 2px; }
.pd-sheet::after { content: ""; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; background: linear-gradient(135deg, #f2d23c 50%, transparent 50%); border-radius: 0 0 14px 0; }
.pd-sheet textarea { position: absolute; inset: 8px; width: auto; height: auto; resize: none; border: 0; background: transparent; font: 700 20px/1.2 var(--font-hand, cursive); color: #3b2a00; padding: 4px; }
.pd-sheet textarea::placeholder { color: #8a6d00; }
.pd-sheet textarea:focus-visible { outline: 3px dashed #8a6d00; border-radius: 6px; }
.pd-pen { position: absolute; right: 2px; bottom: 6px; width: 9px; height: 60%; background: linear-gradient(90deg, #2c56c9, #1b3a8f); border-radius: 4px 4px 1px 1px; transform: rotate(16deg); transform-origin: bottom; box-shadow: 0 0 0 1.5px var(--ink); }
.pd-pen::after { content: ""; position: absolute; bottom: -8px; left: 0; border: 4.5px solid transparent; border-top: 9px solid #f3e6cf; }

/* ---------- Lava lamp (calm) ---------- */
.ob-lava { flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; --lv1: #ff4fd8; --lv2: #ff9f1c; --lv-liquid: #3a0ca3; }
.lv-lamp { position: relative; display: flex; flex-direction: column; align-items: center; width: min(66cqw, 120px); height: 86%; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
.ob-lava:not(.is-tall) .lv-lamp { height: 96%; width: min(60cqw, 90px); }
.lv-cap { width: 34%; height: 10%; border-radius: 40% 40% 4px 4px; background: linear-gradient(90deg, #6b7280, #e5e7eb, #6b7280); border: 2px solid #374151; }
.lv-glass { position: relative; flex: 1; width: 64%; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); background: linear-gradient(90deg, rgba(255,255,255,.25), transparent 30%), var(--lv-liquid); overflow: hidden; box-shadow: inset 0 0 20px rgba(0,0,0,.5); transition: filter 3.8s ease-in-out; }
/* The blobs breathe the box pattern (draft 10, item 16): rise for 4 seconds, hold 4 at the top, sink for 4, rest 4 at
   the bottom: a 16-second loop while the lamp idles. Once the lamp is tapped and the counter runs, the counter's phase
   drives them instead (a 4-second glide per phase), so the blobs and the words always agree. */
.lv-glass i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--lv1) 50%, #fff), var(--lv1)); filter: blur(.5px); --rise: -260%; animation: lv-breathe 16s ease-in-out infinite; }
.lv-glass i:nth-child(1) { left: 22%; width: 42%; height: 22%; bottom: 0; }
.lv-glass i:nth-child(2) { left: 46%; width: 30%; height: 16%; bottom: 10%; --rise: -300%; animation-delay: -.35s; background: radial-gradient(circle at 40% 35%, #fff3, var(--lv2)); }
.lv-glass i:nth-child(3) { left: 30%; width: 24%; height: 14%; bottom: 0; --rise: -380%; animation-delay: -.7s; }
.lv-glass i:nth-child(4) { left: 10%; width: 80%; height: 12%; bottom: -6%; animation: none; border-radius: 50% 50% 0 0; background: var(--lv1); }
@keyframes lv-breathe {
  0% { transform: translateY(0) scale(1, 1); }
  25% { transform: translateY(var(--rise)) scale(.9, 1.15); }
  50% { transform: translateY(calc(var(--rise) - 6%)) scale(1.05, .95); }
  75% { transform: translateY(0) scale(1, 1); }
  100% { transform: translateY(0) scale(1, 1); }
}
.lv-lamp.is-on .lv-glass i:not(:nth-child(4)) { animation: none; transition: transform 4s ease-in-out; }
.lv-lamp.is-on[data-phase="0"] .lv-glass i:not(:nth-child(4)), .lv-lamp.is-on[data-phase="1"] .lv-glass i:not(:nth-child(4)) { transform: translateY(var(--rise)) scale(.9, 1.15); }
.lv-lamp.is-on[data-phase="2"] .lv-glass i:not(:nth-child(4)), .lv-lamp.is-on[data-phase="3"] .lv-glass i:not(:nth-child(4)) { transform: translateY(0) scale(1, 1); }
/* the glow breathes with it: brighter while the air is in */
.lv-lamp:not(.is-on)::after { animation: lv-glow 16s ease-in-out infinite; }
@keyframes lv-glow { 25%, 50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; } 0%, 75%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .7; } }
.lv-base { display: grid; place-items: center; width: 100%; height: 30%; max-height: 64px; clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); background: linear-gradient(90deg, #6b7280, #f3f4f6 40%, #9ca3af); border-radius: 0 0 8px 8px; }
.lv-base .m-breathe-label { position: static; background: #fffaf0; border: 2px solid var(--ink); color: var(--ink); font-size: 12px; font-weight: 900; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.lv-lamp::after { content: ""; position: absolute; left: 50%; top: 40%; width: 140%; height: 70%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--lv1) 45%, transparent), transparent); z-index: -1; opacity: .7; transition: transform 3.8s ease-in-out, opacity 3.8s; }
.lv-lamp.is-on[data-phase="0"]::after, .lv-lamp.is-on[data-phase="1"]::after { transform: translate(-50%, -50%) scale(1.45); opacity: 1; }
.lv-lamp.is-on[data-phase="0"] .lv-glass, .lv-lamp.is-on[data-phase="1"] .lv-glass { filter: brightness(1.35) saturate(1.2); }
.lv-cue { margin: 0; min-height: 0; font-size: 13px; font-weight: 800; text-align: center; padding: 0 4px; background: rgba(255,250,240,.9); border-radius: 8px; }
.lv-cue:empty { display: none; }
.lv-lamp:focus-visible { outline: 3px solid #2b2bff; outline-offset: 3px; border-radius: 12px; }

/* ---------- Chest of drawers (week) ---------- */
.ob-drawers { flex-direction: column; align-items: stretch; padding: 4px 4px 0; }
.dr-top { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 1px 12px; background: #fffaf0; border: 2px solid var(--ink); border-radius: 6px 6px 0 0; font: 700 18px/1.1 var(--font-hand, cursive); }
.dr-chest { display: flex; gap: 5px; height: 82%; margin-top: auto; padding: 8px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #2f6f6a, #1d4b47); border: 3px solid var(--ink); box-shadow: inset 0 4px 0 rgba(255,255,255,.18), 0 8px 10px -6px rgba(0,0,0,.6); }
.dr { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px; border-radius: 4px; background: linear-gradient(180deg, #ffb4a2, #e5989b); border: 2px solid var(--ink); text-decoration: none; color: var(--ink); box-shadow: inset 0 -4px 0 rgba(0,0,0,.12); transition: transform .2s; }
.dr:nth-child(2n) { background: linear-gradient(180deg, #ffd166, #f4a261); } .dr:nth-child(3n) { background: linear-gradient(180deg, #a0e7e5, #6cc5c1); }
.dr.is-open { transform: translateY(6px) scale(1.05); box-shadow: 0 6px 0 rgba(0,0,0,.35), inset 0 -4px 0 rgba(0,0,0,.12); z-index: 1; }
.dr:hover { transform: translateY(4px); }
.dr-card { display: flex; flex-direction: column; align-items: center; padding: 1px 4px; background: #fffaf0; border: 2px solid #8a6d00; border-radius: 3px; line-height: 1.05; }
.dr-card b { font-size: 12px; text-transform: uppercase; } .dr-card span { font-size: 15px; font-weight: 900; }
.dr-n { font-size: 11px; font-weight: 800; white-space: nowrap; }
.dr-knob { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #c99400); border: 1.5px solid #6b4a00; }

/* ---------- Lanterns (habits) ---------- */
/* Lanterns stand on the plank on their own little bases, the habit's name on the base (draft 10, item 10c) */
.ob-lanterns { flex-direction: column; align-items: stretch; padding: 0 4px; }
.ln-base { width: 100%; max-width: 104px; margin-top: -3px; padding: 3px 4px 4px; border-radius: 5px 5px 8px 8px; background: linear-gradient(180deg, #5a4532, #3a2a1c); border: 2px solid #23180f; box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.ln-base .ln-name { max-width: none; }
.ln-streak { position: absolute; top: 14px; right: -2px; z-index: 1; display: inline-flex; align-items: center; gap: 2px; border: 1.5px solid var(--ink); }
.ln-streak .icon { width: 11px; height: 11px; }
.ln-row { flex: 1; display: flex; gap: 6px; margin: 0; padding: 28px 0 0; list-style: none; align-items: flex-end; }
.ln-row li { flex: 1; min-width: 0; display: flex; justify-content: center; }
.ln { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; max-width: 96px; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--ink); }
.ln-hook { width: 18px; height: 12px; border: 3px solid #4b3a2a; border-bottom: 0; border-radius: 10px 10px 0 0; }
.ln-glass { display: grid; place-items: center; width: min(62px, 42cqh); aspect-ratio: .8; border-radius: 12px 12px 16px 16px; border: 3px solid #4b3a2a; background: linear-gradient(90deg, rgba(255,255,255,.4), rgba(255,255,255,.08)), color-mix(in srgb, var(--hc) 45%, #3b3b4f); color: #fffaf0; font-size: 22px; box-shadow: inset 0 0 0 4px rgba(0,0,0,.15); transition: background .3s, box-shadow .3s, color .3s; position: relative; }
.ln-glass::before { content: ""; position: absolute; top: -8px; left: 10%; right: 10%; height: 8px; background: #4b3a2a; border-radius: 6px 6px 0 0; }
.ln.is-lit .ln-glass { background: radial-gradient(circle at 50% 60%, #fff6c2, color-mix(in srgb, var(--hc) 70%, #ffd23f)); color: #fff; box-shadow: 0 0 22px 6px color-mix(in srgb, var(--hc) 70%, #ffd23f), inset 0 0 8px rgba(255,255,255,.8); }
.ln.is-lit .ln-glass .icon { filter: drop-shadow(0 0 4px #fff); }
.ln-name { font-weight: 800; font-size: 12px; line-height: 1.1; text-align: center; padding: 1px 6px; background: #fffaf0; border-radius: 6px; border: 1.5px solid var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-streak { font-size: 11px; font-weight: 800; color: var(--ink); background: rgba(255,250,240,.8); padding: 0 4px; border-radius: 4px; }


/* ---------- Plant and cat ---------- */
.ob-plant { flex-direction: column; align-items: center; justify-content: flex-end; }
.w-plant:not(.is-lifted) { z-index: 2; } /* where a leaf does reach past the cubby, the plant is in front of its neighbours (draft 11, A6) */
.ob-plant .pt-art { display: flex; align-items: flex-end; justify-content: center; max-height: calc(100% - 26px); }
.ob-plant .pt-art svg { width: 100%; height: auto; max-height: 100%; overflow: visible; }
.ob-plant .pt-art svg.is-measuring, .ob-plant .pt-art svg.is-measuring *, .tr-cup svg.is-measuring, .tr-cup svg.is-measuring * { animation: none !important; transition: none !important; }
.pt-art { width: min(80cqw, 74cqh); max-width: 130px; filter: drop-shadow(0 6px 4px rgba(0,0,0,.3)); }
.ob-plant.is-tall .pt-art { width: min(92cqw, 60cqh); }
.pt-tag { margin-bottom: 4px; padding: 1px 8px; background: #fffaf0; border: 2px solid var(--ink); border-radius: 6px; font-weight: 800; font-size: 12px; transform: rotate(-2deg); }
.pl-leaf { transform-origin: 0 0; animation: pl-sway 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }
@keyframes pl-sway { 50% { transform: rotate(6deg); } }
.ob-plant.is-shaken .pt-art { animation: pt-shake .6s ease; }
@keyframes pt-shake { 20% { transform: rotate(-6deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-3deg); } }
.ob-cat { align-items: flex-end; justify-content: center; }
.ct-art { width: min(96cqw, 120cqh); filter: drop-shadow(0 6px 4px rgba(0,0,0,.3)); margin-bottom: -4px; }
.ct-tail { transform-origin: 128px 96px; animation: ct-tail 3s ease-in-out infinite; }
@keyframes ct-tail { 50% { transform: rotate(-12deg); } }
.ct-zzz { animation: ct-z 3s ease-in-out infinite; }
@keyframes ct-z { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.ct-head { transform-origin: 50px 70px; }
.ob-cat.is-petted .ct-head { animation: ct-purr .6s ease 2; }
@keyframes ct-purr { 50% { transform: rotate(-6deg) translateY(-3px); } }
.ct-bubble { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); padding: 2px 10px; background: #fffaf0; border: 2px solid var(--ink); border-radius: 12px; font-weight: 800; font-size: 13px; white-space: nowrap; opacity: 0; pointer-events: none; }
.ob-cat.is-petted .ct-bubble { animation: ct-say 2.2s ease forwards; }
@keyframes ct-say { 10%, 80% { opacity: 1; transform: translateX(-50%) translateY(-4px); } 100% { opacity: 0; } }

/* ---------- Library resources on the shelf (draft 10, items 11 + 24 + 25) ----------
   Each resource is its own stand-alone object: the drawing it has in the library, standing on the plank, nothing
   around it. Per object (from shelf.mjs): --lw how wide it stands, --lean a little tilt, --ldx where on the plank.
   The drawing's own floor shadow lands just above the name tag, which is the same tag the mailbox and bell wear. */
.ob-libitem { --lw: 92%; --lean: 0deg; --ldx: 0%; display: block; text-decoration: none; color: var(--ink); padding: 0; overflow: visible; }
.ob-libitem .lo-thing { position: absolute; left: 50%; bottom: 2px; width: var(--lw); max-width: 196px; aspect-ratio: 120 / 84; max-height: calc(100% - 8px); transform: translateX(calc(-50% + var(--ldx))) rotate(var(--lean)); transform-origin: 50% 100%; transition: transform .2s var(--toy-spring, ease); }
.ob-libitem .li-art-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 0 rgba(0,0,0,.12)); }
.ob-libitem:hover .lo-thing, .ob-libitem:focus-visible .lo-thing { transform: translateX(calc(-50% + var(--ldx))) rotate(var(--lean)) translateY(-4px); }
/* the name: a label on the front edge of the plank, so the whole object shows */
.ob-libitem .ob-tag { left: 2%; right: 2%; width: fit-content; max-width: 96%; margin-inline: auto; bottom: calc(-1 * var(--plank) + 3px); font-size: 12px; line-height: 1.1; padding: 2px 8px 2px 15px; -webkit-line-clamp: 3; hyphens: auto; transform: none; z-index: 3; }
.ob-libitem:focus-visible { outline: 3px solid #29298e; outline-offset: -3px; border-radius: 12px; }
.w-grid[data-phone="1"] .ob-libitem .lo-thing { max-width: 250px; max-height: calc(100% - 8px); }
.w-grid[data-phone="1"] .ob-libitem .ob-tag { font-size: 14px; padding: 3px 10px 3px 17px; }
.ob-libitem.is-gone .lo-gone { position: absolute; left: 50%; bottom: 30px; display: grid; place-items: center; width: 52%; height: 48%; transform: translateX(-50%); border-radius: 12px; border: 3px dashed var(--ink); opacity: .7; }
.ob-libitem.is-gone .lo-gone .icon { width: 30px; height: 30px; }
@media (prefers-reduced-motion: reduce) { .ob-libitem .lo-thing { transition: none; } .ob-libitem:hover .lo-thing { transform: translateX(calc(-50% + var(--ldx))) rotate(var(--lean)); } }
:root[data-motion="reduce"] .ob-libitem:hover .lo-thing { transform: translateX(calc(-50% + var(--ldx))) rotate(var(--lean)); }
/* the old door, tray and gadget are gone; their styles stay for a build or two in case a cached page asks for them */
.ob-door { flex-direction: column; align-items: center; justify-content: flex-end; }
.dz-arch { position: relative; display: grid; place-items: center; width: min(68cqw, 60cqh); height: 84%; margin-bottom: 14px; border-radius: 999px 999px 6px 6px; border: 6px solid #8a5a2b; outline: 3px solid var(--ink); background: radial-gradient(circle at 50% 55%, #fff 0 8%, #b9f3ff 18%, #7b45c4 46%, #1a0f3a 80%); overflow: hidden; box-shadow: 0 0 26px 4px rgba(123,69,196,.55); }
.dz-swirl { position: absolute; inset: -30%; background: conic-gradient(from 0deg, transparent, rgba(255,79,216,.55), transparent 30%, rgba(34,230,255,.55), transparent 60%, rgba(255,210,63,.5), transparent); animation: portal-spin 5s linear infinite; }
@keyframes portal-spin { to { transform: rotate(360deg); } }
.dz-glow { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.85); color: #4c1d95; font-size: 22px; box-shadow: 0 0 18px 6px #fff; animation: dz-float 3s ease-in-out infinite; }
@keyframes dz-float { 50% { transform: translateY(-6px) scale(1.06); } }
.ob-door:hover .dz-arch { box-shadow: 0 0 40px 10px rgba(255,79,216,.6); }
.ob-tray { flex-direction: column; align-items: center; justify-content: flex-end; }
.ty-papers { position: relative; width: min(56cqw, 92px); height: 34%; margin-bottom: -8px; }
.ty-papers i { position: absolute; inset: 0; background: #fffdf7; border: 2px solid var(--ink); border-radius: 2px; background-image: repeating-linear-gradient(180deg, transparent 0 8px, #cbd5e1 8px 9px); }
.ty-papers i:first-child { transform: rotate(-6deg); } .ty-papers i:last-child { transform: rotate(3deg) translateY(-10px); animation: ty-feed 3.5s ease-in-out infinite; }
@keyframes ty-feed { 50% { transform: rotate(3deg) translateY(-18px); } }
.ty-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; width: min(84cqw, 140px); height: 22%; border-radius: 10px 10px 0 0; border: 3px solid var(--ink); background: linear-gradient(180deg, #ffd166, #f4a261); font-size: 18px; }
.ty-stamp { padding: 0 6px; border: 2px solid #c0392b; color: #c0392b; font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; transform: rotate(-6deg); background: #fffaf0; }
.ty-box { width: min(92cqw, 150px); height: 18%; margin-bottom: 30px; border-radius: 0 0 10px 10px; border: 3px solid var(--ink); border-top: 0; background: linear-gradient(180deg, #e76f51, #b6452c); }
.ob-gadget { flex-direction: column; align-items: center; justify-content: flex-end; }
.gd-box { display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(78cqw, 120px); height: 64%; margin-bottom: 30px; padding: 8px; border-radius: 16px; border: 3px solid var(--ink); background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.4), transparent 40%), var(--gc); box-shadow: inset 0 -5px 0 rgba(0,0,0,.2), 0 8px 10px -6px rgba(0,0,0,.6); }
.gd-screen { flex: 1; width: 100%; display: grid; place-items: center; border-radius: 8px; background: #0f2a1d; color: #9dffc9; font-size: 30px; box-shadow: inset 0 0 10px rgba(0,0,0,.7); }
.gd-screen .icon { filter: drop-shadow(0 0 6px #9dffc9); }
.gd-dials { display: flex; gap: 10px; } .gd-dials i { width: 14px; height: 14px; border-radius: 50%; background: #fffaf0; border: 2px solid var(--ink); }

/* ---------- Menu size picker and the bar above the shelf ---------- */
.w-shape-pick { display: flex; flex-wrap: wrap; gap: 10px; }
.w-shape-pick label { position: relative; }
.w-shape-pick input { position: absolute; opacity: 0; inset: 0; }
.w-shape-pick span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: .6em .8em; border-radius: 14px; border: 2px solid #dcc8a6; background: #fffaf0; font-weight: 700; cursor: pointer; }
.w-shape-pick input:checked + span { border-color: #23180f; background: #23180f; color: #fffdf7; }
.w-shape-pick input:focus-visible + span { outline: 3px solid #29298e; outline-offset: 2px; }
.w-shape-demo { display: grid; gap: 3px; } .w-shape-demo::before { content: ""; display: block; border-radius: 4px; background: currentColor; opacity: .75; }
.w-shape-demo.sh-1x1::before { width: 18px; height: 18px; } .w-shape-demo.sh-1x2::before { width: 39px; height: 18px; } .w-shape-demo.sh-1x3::before { width: 60px; height: 18px; } .w-shape-demo.sh-2x1::before { width: 18px; height: 39px; } .w-shape-demo.sh-2x2::before { width: 39px; height: 39px; }
.w-hint { margin: 0 auto 0 0; display: inline-flex; align-items: center; gap: .35em; padding: .3em .8em; border-radius: 999px; background: rgba(255, 253, 247, .9); color: #47372a; font-weight: 700; font-size: var(--step--1); }
.w-hint .icon { width: 1em; height: 1em; }
.m-home-bar { justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.center-link .btn-quiet { background: rgba(255, 253, 247, .92); color: #23180f; }

/* ---------- Each world builds its own shelf ---------- */
:root[data-theme="dark"]:not([data-world]) .shelf-unit { --sh-back: #3a2a24; --sh-back2: #4a372f; }
:root[data-world="sunrise"] .shelf-unit { --sh-back: #ffe0b0; --sh-back2: #ffc98a; --sh-side: #e07a3a; --sh-side2: #a94c1a; --pk-top: #ffd09a; --pk-front: #f08a4b; --pk-edge: #b5521f; }
:root[data-world="ocean"] .shelf-unit { --sh-back: #0d5876; --sh-back2: #13708f; --sh-side: #c9b48e; --sh-side2: #8f7a55; --pk-top: #efe2c6; --pk-front: #c9b48e; --pk-edge: #8f7a55; --pk-grain: rgba(80, 60, 30, .25); }
:root[data-world="meadow"] .shelf-unit { --sh-back: #1c4433; --sh-back2: #245a42; --sh-side: #6e4f27; --sh-side2: #43301a; --pk-top: #7fbf4d; --pk-front: #7a5a30; --pk-edge: #43301a; }
:root[data-world="dusk"] .shelf-unit { --sh-back: #1f0b4d; --sh-back2: #35137a; --sh-side: #ff4fd8; --sh-side2: #7b2ff7; --pk-top: #22e6ff; --pk-front: rgba(160, 120, 255, .85); --pk-edge: #ff4fd8; --pk-grain: rgba(255,255,255,.15); }
:root[data-world="dusk"] .w-grid { filter: drop-shadow(0 0 0 transparent); }
:root[data-world="canyon"] .shelf-unit { --sh-back: #a8492f; --sh-back2: #bf5b3a; --sh-side: #e9a86b; --sh-side2: #a8592b; --pk-top: #f4c28d; --pk-front: #d7834a; --pk-edge: #8a4520; }
:root[data-world="berry"] .shelf-unit { --sh-back: #ffd6ea; --sh-back2: #ffb8d9; --sh-side: #ff5fa2; --sh-side2: #c2185b; --pk-top: #fff; --pk-front: #ff7ab8; --pk-edge: #c2185b; --pk-grain: rgba(255,255,255,.55); }
:root[data-world="moon"] .shelf-unit { --sh-back: #2a1d3b; --sh-back2: #3a2852; --sh-side: #4a2f1f; --sh-side2: #26160c; --pk-top: #7a4e33; --pk-front: #4a2f1f; --pk-edge: #26160c; }
:root[data-world="moon"] .shelf-unit::before { content: ""; left: auto; right: 22px; bottom: auto; top: 0; width: 70px; height: 70px; border-radius: 0; background: radial-gradient(circle at 100% 0, transparent 0 10px, rgba(255,255,255,.35) 10px 11px, transparent 11px 24px, rgba(255,255,255,.3) 24px 25px, transparent 25px 40px, rgba(255,255,255,.25) 40px 41px, transparent 41px), linear-gradient(225deg, transparent 49%, rgba(255,255,255,.3) 49% 51%, transparent 51%); pointer-events: none; z-index: 0; }
:root[data-world="ocean"] .lv-lamp, :root[data-world="ocean"] .ob-lava { --lv1: #48cae4; --lv2: #ffd166; --lv-liquid: #023e8a; }
:root[data-world="meadow"] .ob-lava { --lv1: #b5e48c; --lv2: #ffd23f; --lv-liquid: #1b4332; }
:root[data-world="moon"] .ob-lava { --lv1: #ff7b00; --lv2: #c77dff; --lv-liquid: #240046; }
:root[data-world="sunrise"] .ob-lava, :root[data-world="canyon"] .ob-lava { --lv1: #ffd166; --lv2: #ff6b35; --lv-liquid: #9d0208; }
:root[data-world="moon"] .ob-cat { --cat: #3b3b4f; } :root[data-world="moon"] .ct-zzz { fill: #ffb703; }
:root[data-world="ocean"] .ob-cat { --cat: #c9d6df; } :root[data-world="berry"] .ob-cat { --cat: #ffc8dd; } :root[data-world="meadow"] .ob-cat { --cat: #a47148; }
:root[data-world="dusk"] .ob-cat { --cat: #b8b8ff; }

/* Calm and accessible versions */
@media (prefers-reduced-motion: reduce) {
  .w, .w.is-dropped, .w:hover > .ob, .gl-snow i, .cab-top, .cab-insert, .cab .am-pad, .cab .am-ball, .cab-stick i, .rb-eyes, .rb-bulb, .ob-arrow, .gf-flag::before, .bd-card, .jr-coins i, .al-glass span, .lv-glass i, .pl-leaf, .ct-tail, .ct-zzz, .dz-swirl, .dz-glow, .ty-papers i { animation: none !important; }
  .lv-lamp::after, .lv-glass, .pl-lid { transition: none !important; animation: none !important; }
  .lv-lamp.is-on .lv-glass i { transition: none !important; }
}
:root[data-motion="reduce"] :is(.w, .w.is-dropped, .w:hover > .ob, .gl-snow i, .cab-top, .cab-insert, .cab .am-pad, .cab .am-ball, .cab-stick i, .rb-eyes, .rb-bulb, .ob-arrow, .gf-flag::before, .bd-card, .jr-coins i, .al-glass span, .lv-glass i, .lv-lamp::after, .pl-leaf, .ct-tail, .ct-zzz, .dz-swirl, .dz-glow, .ty-papers i) { animation: none !important; }
:root[data-motion="reduce"] .lv-lamp.is-on .lv-glass i { transition: none !important; }
:root[data-contrast="high"] .shelf-unit { --sh-back: #fff; --sh-back2: #fff; --pk-top: #000; --pk-front: #000; --pk-edge: #000; }
@media print { .shelf-unit { box-shadow: none; } }

/* Small screens and tight cubbies */
.ob { color-scheme: light; }
.dr-chest { overflow-x: auto; scrollbar-width: thin; }
.dr { min-width: 46px; }
.tb-btns { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(66px, 1fr); overflow-x: auto; scrollbar-width: thin; }
@container (max-width: 360px) {
  .gf-target, .rb-body { width: 24cqw; }
  .gf-flag { padding-right: 28px; }
  .lb-side { width: 26cqw; }
}
@container (max-width: 170px) {
  .al-word { font-size: 12px; } .al-top { font-size: 9px; }
  .al-glass span { width: 36px; height: 36px; font-size: 20px; }
}
.tk .m-grip { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: rgba(255,255,255,.6); color: var(--ink); display: grid; place-items: center; cursor: grab; z-index: 1; }
.tk .m-grip .icon { width: 14px; height: 14px; }
.tk.is-sorting, .tk.is-dragging { z-index: 5; }

/* ==========================================================================
   Draft 9 objects: the earned trophy, pets, plants, decor, the star jar,
   today's quest and the mailbox, plus the little lives they have
   ========================================================================== */
/* ---------- the trophy ---------- */
.ob-trophy { gap: 2px; }
.tr-cup { --lvl: 1; height: calc(44cqh + 12cqh * (var(--lvl) / 50)); width: 100%; filter: drop-shadow(0 4px 3px rgba(0,0,0,.25)); display: flex; align-items: flex-end; justify-content: center; transition: transform .35s var(--toy-spring, ease); }
.tr-cup .tr-svg { height: 100%; width: auto; max-width: 100%; overflow: visible; }
.sh-2x1 .tr-cup { height: calc(30cqh + 16cqh * (var(--lvl) / 50)); }
.ob-trophy .tr-plinth { padding: 3px 6px 4px; }
.ob-trophy .tr-plaque { padding: 1px 5px; }
.ob-trophy:hover .tr-cup { transform: translateY(-4px) rotate(-2deg); }
.tr-plaque b { font-size: 12px; line-height: 1.1; display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-plaque small { font-size: 10px; }
.tr-spark, .tr-spark2 { transform-box: fill-box; transform-origin: center; animation: tr-twinkle 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.37s); }
@keyframes tr-twinkle { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .15; scale: .5; } }
.tr-glow { animation: tr-glow 3.2s ease-in-out infinite; }
@keyframes tr-glow { 50% { opacity: .55; } }
.tr-svg.is-prism { animation: tr-hue 9s linear infinite; }
@keyframes tr-hue { to { filter: hue-rotate(360deg); } }
.tr-svg.is-prism .tr-sweep { animation: tr-sweep 3.4s ease-in-out infinite; }
@keyframes tr-sweep { 0%, 15% { transform: translateX(0) skewX(-12deg); } 60%, 100% { transform: translateX(230px) skewX(-12deg); } }
.tr-svg.is-prism .tr-orbit { transform-box: fill-box; transform-origin: center; animation: tr-orbit 10s linear infinite; }
@keyframes tr-orbit { to { rotate: 360deg; } }
.ob-trophy.lv-50 .tr-cup { animation: tr-float 4s ease-in-out infinite; }
/* ---------- The trophy in a small cubby (draft 11, A7): the cup is the star of it, half again as big; the pedestal
   shorter; the title on a gold nameplate across the plank's front edge (12px, up to two lines, every title fits);
   the drum's plaque keeps the level and the stars to go, now readable. Tall and phone shapes keep their layout. */
.tr-name { display: none; }
.sh-1x1 .ob-trophy { gap: 0; padding-bottom: 0; }
.sh-1x1 .ob-trophy .tr-cup { height: 58cqh; width: 86cqw; max-width: none; }
.sh-1x1 .ob-trophy .tr-cup .tr-svg { height: 100%; width: auto; max-width: 100%; }
.sh-1x1 .ob-trophy .tr-pedestal { --pdw: 999px; width: min(66cqw, 50cqh); margin-top: calc(min(66cqw, 50cqh) * -0.12); }
.sh-1x1 .ob-trophy .tr-plinth { bottom: calc(min(66cqw, 50cqh) * 0.14); width: calc(min(66cqw, 50cqh) * 0.86); }
.sh-1x1 .ob-trophy .tr-plaque b { display: none; }
.sh-1x1 .ob-trophy .tr-plaque { padding: 2px 4px; }
.tr-plaque .tr-short { display: none; }
.sh-1x1 .ob-trophy .tr-plaque small { display: none; }
.sh-1x1 .ob-trophy .tr-plaque small.tr-short { display: block; font-size: 10.5px; line-height: 1.15; white-space: nowrap; }
.sh-1x1 .ob-trophy .tr-name { display: block; position: absolute; left: 50%; bottom: calc(-1 * var(--plank) + 3px); transform: translateX(-50%); z-index: 3; width: max-content; max-width: 96%; padding: 2px 9px; border-radius: 4px; border: 1.5px solid #5a3a0a;
  background: linear-gradient(180deg, #ffe9a3, #d4a017); color: #3d2600; font: 800 12px/1.15 var(--font-body, system-ui), sans-serif; text-align: center; box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 2px 3px rgba(0,0,0,.35);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-grid[data-phone="1"] .sh-1x1 .ob-trophy .tr-name { font-size: 14px; }
/* the trophy room */
.trr { display: flex; flex-direction: column; gap: 12px; }
.trr-lead { margin: 0; display: flex; align-items: center; gap: .4em; flex-wrap: wrap; }
.trr-path { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; position: relative; }
.trr-fam { position: relative; padding: 8px 10px 10px; border-radius: 14px; background: linear-gradient(180deg, #fbf3e2, #f2e4c8); border: 2px solid #e2cfa6; }
.trr-fam.has-here { border-color: #d4a017; box-shadow: 0 0 0 3px rgba(212, 160, 23, .25); }
.trr-fam-h { margin: 0 0 4px; font-size: .95rem; color: #5a3a0a; }
.trr-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; position: relative; }
.trr-cup.is-got + .trr-cup::before { content: ""; position: absolute; left: -10px; top: 42px; width: 12px; height: 4px; border-radius: 2px; background: #d4a017; } /* the gold path joins the cups already earned */

.trr-cup { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; border-radius: 12px; background: #fffdf7; border: 2px solid #e8d8b6; text-align: center; }
.trr-art { display: flex; align-items: flex-end; justify-content: center; height: 76px; width: 100%; }
.trr-art svg { height: 100%; width: auto; max-width: 100%; overflow: visible; }
.trr-n { position: absolute; top: 4px; left: 6px; font: 800 11px/1 system-ui, sans-serif; color: #7a5a2a; }
.trr-label { font-size: 12px; line-height: 1.15; color: #23180f; }
.trr-cup small { font-size: 11px; color: #5a4836; font-weight: 700; }
.trr-cup.is-locked .trr-art { filter: grayscale(1) brightness(.35) opacity(.35); }
.trr-cup.is-locked .trr-label { color: #6b5a45; }
.trr-cup.is-here { border-color: #d4a017; background: #fff6d6; box-shadow: 0 0 0 3px rgba(212, 160, 23, .35), 0 6px 14px -6px rgba(0,0,0,.4); }
.trr-cup.is-here::after { content: "★ You are here"; position: absolute; top: -10px; right: -4px; padding: 1px 6px; border-radius: 999px; background: #23180f; color: #ffe066; font: 800 10px/1.4 system-ui, sans-serif; }
.trr-cup.is-next { border-style: dashed; border-color: #b8860b; }
:root[data-motion="reduce"] .trr .tr-spark, :root[data-motion="reduce"] .trr .tr-glow { animation: none; }
@keyframes tr-float { 50% { transform: translateY(-6px); } }

/* ---------- pets ---------- */
.ob-pet { align-items: flex-end; justify-content: center; }
.ob-pet .pt-art { width: min(96cqw, 118cqh); max-width: 220px; margin-bottom: -2px; filter: drop-shadow(0 6px 4px rgba(0,0,0,.3)); }
.ob-pet .pt-art .mg { width: 100%; height: auto; overflow: visible; }
.ob-pet .pt-name { bottom: 2px; }
.mg-tail { transform-box: fill-box; transform-origin: 0% 100%; animation: mg-tail 3s ease-in-out infinite; }
@keyframes mg-tail { 50% { rotate: -14deg; } }
.mg-wag { animation: mg-wag 1.1s ease-in-out infinite; }
@keyframes mg-wag { 50% { rotate: -32deg; } }
.mg-eyes { transform-box: fill-box; transform-origin: center; animation: mg-blink 4.6s infinite; }
@keyframes mg-blink { 0%, 93%, 100% { scale: 1 1; } 96% { scale: 1 .08; } }
.mg-head { transform-box: fill-box; transform-origin: 50% 90%; animation: mg-breathe 3.6s ease-in-out infinite; }
@keyframes mg-breathe { 50% { translate: 0 -1.5px; rotate: -1.5deg; } }
.mg-zzz { animation: ct-z 3s ease-in-out infinite; }
.mg-ear-l, .mg-ear-r { transform-box: fill-box; transform-origin: 50% 100%; animation: mg-ear 5s ease-in-out infinite; }
.mg-ear-r { animation-delay: -2.4s; }
@keyframes mg-ear { 0%, 90%, 100% { rotate: 0deg; } 94% { rotate: -9deg; } 97% { rotate: 6deg; } }
.mg-wing { transform-box: fill-box; transform-origin: 80% 10%; }
.mg-body { transform-box: fill-box; transform-origin: 50% 100%; animation: mg-breathe 3s ease-in-out infinite; }
.mg-fish { transform-box: fill-box; transform-origin: center; animation: mg-swim 7s ease-in-out infinite; }
@keyframes mg-swim { 0% { translate: -16px 0; scale: 1 1; } 46% { translate: 16px 0; scale: 1 1; } 50% { translate: 16px 2px; scale: -1 1; } 96% { translate: -16px 0; scale: -1 1; } 100% { translate: -16px 0; scale: 1 1; } }
.mg-bubbles { animation: mg-rise 3.5s linear infinite; }
@keyframes mg-rise { from { translate: 0 10px; opacity: 0; } 30% { opacity: 1; } to { translate: 0 -22px; opacity: 0; } }
.mg-throat { transform-box: fill-box; transform-origin: center; animation: mg-throat 1.8s ease-in-out infinite; }
@keyframes mg-throat { 50% { scale: 1.5; opacity: .9; } }
.mg-water { animation: mg-water 3s ease-in-out infinite; }
@keyframes mg-water { 50% { translate: -8px 0; } }
.mg-notes { opacity: 0; }
.ob-pet.is-petted .mg-head { animation: mg-nuzzle .55s ease 2; }
@keyframes mg-nuzzle { 50% { rotate: -8deg; translate: 0 -4px; } }
.ob-pet.is-petted .mg-wing { animation: mg-flap .3s ease 4; }
@keyframes mg-flap { 50% { rotate: -40deg; } }
.ob-pet.is-petted .mg-tail { animation: mg-wag .35s ease-in-out 6; }
.ob-pet.is-petted .mg-notes, .ob-pet.is-petted .dc-notes { animation: mg-notes 1.6s ease-out 1; }
@keyframes mg-notes { 0% { opacity: 0; translate: 0 6px; } 30% { opacity: 1; } 100% { opacity: 0; translate: 6px -16px; } }
.ob-pet.is-petted .mg-body { animation: mg-hop .4s ease 2; }
@keyframes mg-hop { 50% { translate: 0 -8px; } }
.ob-pet .ct-bubble { top: 6%; }
.ob-pet.is-petted .ct-bubble { animation: ct-say 2.2s ease forwards; }

/* ---------- plants ---------- */
.ob-plant .pt-art { width: min(84cqw, 78cqh); max-width: 140px; }
.ob-plant .pt-art .mg { width: 100%; height: auto; overflow: visible; }
.ob-plant.is-tall .pt-art { width: min(92cqw, 62cqh); max-width: 170px; }
.pl-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: pl-sway 5s ease-in-out infinite; }
@keyframes pl-sway { 50% { rotate: 1.6deg; } }
.pl-leaf { transform-box: fill-box; transform-origin: 0% 50%; animation: pl-leaf 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.5s); }
@keyframes pl-leaf { 50% { rotate: 4deg; } }
.pl-bloom { transform-box: fill-box; transform-origin: center; animation: pl-bloom .9s var(--toy-spring, ease) both; }
@keyframes pl-bloom { from { scale: 0; } }
.ob-plant.is-full .pt-tag { background: #ffe066; }
.ob-plant.is-shaken .pt-art { animation: pt-shake .6s ease; }

/* ---------- decor ---------- */
.ob-decor { align-items: flex-end; justify-content: center; cursor: pointer; }
.ob-decor .pt-art { width: min(80cqw, 80cqh); max-width: 150px; margin-bottom: 4px; filter: drop-shadow(0 6px 4px rgba(0,0,0,.3)); }
.ob-decor .pt-art .mg { width: 100%; height: auto; overflow: visible; }
.dc-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: dc-flame 1.1s ease-in-out infinite; }
@keyframes dc-flame { 25% { scale: .92 1.08; rotate: -3deg; } 60% { scale: 1.05 .95; rotate: 3deg; } }
.dc-notes { opacity: 0; } .ob-decor.is-poked .dc-notes { animation: mg-notes 1.6s ease-out 1; }
.dc-spin { transform-box: fill-box; transform-origin: center; } .ob-decor.is-poked .dc-spin { animation: dc-spin 1.4s cubic-bezier(.2,.9,.3,1) 1; }
@keyframes dc-spin { to { rotate: 360deg; } }
.dc-crawl { animation: dc-crawl 14s linear infinite; }
@keyframes dc-crawl { 0% { translate: -6px 0; } 50% { translate: 6px 0; } 100% { translate: -6px 0; } }
.dc-bulb { animation: dc-bulb 2.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.44s); }
@keyframes dc-bulb { 50% { opacity: .35; } }
.dc-die { transform-box: fill-box; transform-origin: center; } .ob-decor.is-poked .dc-die { animation: dc-roll .8s cubic-bezier(.2,.9,.3,1.2) 1; animation-delay: calc(var(--i, 0) * .12s); }
@keyframes dc-roll { 30% { translate: 0 -14px; rotate: 120deg; } 100% { rotate: 360deg; } }
.ob-decor.is-poked .pt-art { animation: pt-shake .5s ease; }
/* the radio: a switch. On, the power light glows, the needle trembles and notes drift up for as long as it plays (draft 10, item 31) */
.ob-decor.dc-radio .pt-art { margin-bottom: 28px; }
.ob-decor.dc-radio .dc-radio-tag { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); white-space: nowrap; }
.ob-decor.dc-radio .dc-led { transition: fill .2s; }
.ob-decor.dc-radio.is-on .dc-led { fill: #7cff6b; filter: drop-shadow(0 0 3px #7cff6b); }
.ob-decor.dc-radio.is-on .dc-notes { opacity: 1; animation: dc-radio-notes 2.6s ease-in-out infinite; }
@keyframes dc-radio-notes { 0% { translate: 0 0; opacity: 0; } 20% { opacity: 1; } 100% { translate: 0 -14px; opacity: 0; } }
.ob-decor.dc-radio.is-on .pt-art svg rect[x="40"] { animation: dc-needle 3.4s ease-in-out infinite; }
@keyframes dc-needle { 0%, 100% { translate: 0 0; } 50% { translate: 2px 0; } }
:is(:root[data-motion="reduce"]) .ob-decor.dc-radio.is-on :is(.dc-notes, .pt-art svg rect[x="40"]) { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ob-decor.dc-radio.is-on :is(.dc-notes, .pt-art svg rect[x="40"]) { animation: none; opacity: 1; } }

/* ---------- the star jar ---------- */
.ob-starjar { flex-direction: column; align-items: center; justify-content: flex-end; cursor: pointer; }
.sj-lid { width: min(66cqw, 110px); height: 12px; border-radius: 6px 6px 2px 2px; background: linear-gradient(90deg, #6b4a2a, #c69a66 40%, #8a5a2b); border: 2px solid #4a2f1f; margin-bottom: -2px; z-index: 1; }
.sj-glass { position: relative; width: min(80cqw, 130px); height: 62%; border-radius: 18px 18px 26px 26px; border: 3px solid rgba(40,80,90,.6); background: linear-gradient(90deg, rgba(255,255,255,.5), rgba(220,245,255,.22) 30%, rgba(255,255,255,.1) 70%, rgba(255,255,255,.4)); box-shadow: inset 0 0 0 4px rgba(255,255,255,.25), 0 8px 10px -6px rgba(0,0,0,.5); overflow: hidden; }
.ob-starjar.is-tall .sj-glass { height: 70%; }
.sj-stars { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: 1px; padding: 0 6px; }
.sj-stars i { width: 18px; height: 18px; margin-top: -4px; background: var(--c); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transform: rotate(var(--r)) translateX(calc(var(--x) * .1)); animation: sj-drop .5s cubic-bezier(.3,1.4,.5,1) both; animation-delay: var(--d); filter: drop-shadow(0 0 2px rgba(255,210,60,.8)); }
@keyframes sj-drop { from { transform: translateY(-120px) rotate(var(--r)); opacity: 0; } }
.sj-tag { position: absolute; left: 50%; top: 10%; transform: translateX(-50%) rotate(-3deg); display: flex; flex-direction: column; align-items: center; padding: 3px 10px; background: #fffaf0; border: 2px solid var(--ink); border-radius: 6px; line-height: 1.1; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.sj-tag b { font-size: 20px; } .sj-tag small { font-size: 10px; font-weight: 800; }
.sj-next { margin: 4px 0 2px; max-width: 94%; padding: 1px 8px; background: #fffaf0; border: 2px solid var(--ink); border-radius: 6px; font-weight: 800; font-size: 11px; line-height: 1.2; text-align: center; }
.sj-big { font-size: var(--step-2); display: flex; align-items: center; gap: .3em; margin: 0 0 .3em; }
.sj-parts, .sj-next-list { margin: 0 0 .6em; padding: 0; list-style: none; }
.sj-parts li { padding: .15em 0; } .sj-next-list li { display: flex; justify-content: space-between; gap: 8px; padding: .3em .6em; border-radius: 8px; background: #fff3d6; margin-bottom: 4px; }

/* ---------- today's quest: a scroll ---------- */
.ob-quest { padding: 6px 4px 0; }
.qs-scroll { position: relative; width: 100%; height: 100%; padding: 8px 14px 6px; background: linear-gradient(90deg, #e8d3a8, #fbf0d6 10%, #fbf0d6 90%, #e8d3a8); border: 3px solid #8a5a2b; border-radius: 6px; box-shadow: inset 0 0 0 2px #fbf0d6, 0 8px 10px -6px rgba(0,0,0,.6); display: flex; flex-direction: column; overflow: hidden; }
.qs-scroll::before, .qs-scroll::after { content: ""; position: absolute; left: -8px; right: -8px; height: 12px; border-radius: 6px; background: linear-gradient(180deg, #d9b47a, #a8773f); border: 2px solid #6b4420; }
.qs-scroll::before { top: -7px; } .qs-scroll::after { bottom: -7px; }
.qs-title { margin: 4px 0 4px; font: 700 18px/1.1 var(--font-hand, cursive); display: flex; align-items: center; gap: .3em; color: #5a3a1a; }
.qs-list { flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.w.sh-1x3 .ob-quest .qs-list { flex-direction: row; }
.qs { flex: 1; min-width: 0; display: flex; }
.qs-check, .qs-btn { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 6px; border: 2px solid var(--ink); border-radius: 10px; background: #fffaf0; color: var(--ink); font: inherit; font-size: 12px; line-height: 1.15; text-align: left; text-decoration: none; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.qs-check input { flex: none; }
.qs-check b, .qs-btn b { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #5a3a1a; }
.qs-check span:not(.qs-ico), .qs-btn span:not(.qs-ico) { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow-wrap: break-word; }
.qs-ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--hc, #f6a91c); color: #fff; border: 2px solid var(--ink); font-size: 14px; }
.qs.is-done .qs-check, .qs.is-done .qs-btn { background: #e3f4e3; }
.qs.is-done .qs-check span:not(.qs-ico), .qs.is-done .qs-btn span:not(.qs-ico) { text-decoration: line-through; }
.qs-foot { margin: 4px 0 2px; font-weight: 800; font-size: 12px; color: #5a3a1a; }
/* the quest before it starts, and after it is finished (draft 10, item 14) */
/* in the smaller shapes each objective is one line (label and words together) so all three fit */
.w:not(.sh-1x3) .ob-quest .qs-check, .w:not(.sh-1x3) .ob-quest .qs-btn { padding: 3px 6px; }
.w:not(.sh-1x3) .ob-quest :is(.qs-check, .qs-btn) b { display: inline; margin-right: 4px; }
.w:not(.sh-1x3) .ob-quest .qs-list { gap: 3px; }
.qs-start { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
.qs-start p { margin: 0; font-size: 13px; line-height: 1.3; color: #3b2c1f; }
.qs-start .btn { align-self: flex-start; }
.qs-quit { font-size: 12px; font-weight: 800; color: #5a3a1a; text-decoration: underline; }
.w.sh-1x3 .ob-quest .qs-start { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
/* the "Go on a quest" dialog: picks laid out like the add-to-shelf options */
.qw-pick { margin-top: 8px; }
.qw-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.qw-opt > span { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; }
.qw-opt > span strong { font-size: 14px; } .qw-opt > span small { grid-column: 2; font-size: 12px; color: #5a4532; }
.qw-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hc, #f6a91c); color: #fff; border: 2px solid #23180f; }
.qw-ico .icon { width: 18px; height: 18px; }
.qw-opt.is-step > span { margin-left: 18px; }
.qw-opt.is-skip > span { opacity: .85; }

/* ---------- the mailbox ---------- */
.ob-mailbox { flex-direction: column; align-items: center; justify-content: flex-end; cursor: pointer; }
.mb-box { position: relative; width: min(74cqw, 120px); height: 44%; border-radius: 40px 40px 8px 8px / 36px 36px 8px 8px; background: linear-gradient(90deg, #1f4e9c, #4a8be8 40%, #2b63be); border: 3px solid var(--ink); box-shadow: inset 0 -8px 0 rgba(0,0,0,.18), 0 8px 10px -6px rgba(0,0,0,.6); }
.mb-door { position: absolute; left: 10%; right: 10%; top: 20%; bottom: 18%; border-radius: 30px 30px 6px 6px / 26px 26px 6px 6px; border: 2px solid var(--ink); background: linear-gradient(180deg, #6ea7ff, #3b76d6); }
.mb-door::after { content: ""; position: absolute; left: 50%; bottom: 10%; width: 20px; height: 7px; margin-left: -10px; border-radius: 4px; background: #ffd166; border: 1.5px solid var(--ink); }
.mb-flag { position: absolute; right: -16px; top: 30%; width: 10px; height: 34px; border-radius: 4px; background: #e5484d; border: 2px solid var(--ink); transform-origin: 50% 90%; transform: rotate(90deg); transition: transform .5s var(--toy-spring, ease); }
.mb-flag::after { content: ""; position: absolute; left: -2px; top: -2px; width: 14px; height: 12px; border-radius: 2px; background: #e5484d; border: 2px solid var(--ink); }
.ob-mailbox.has-mail .mb-flag { transform: rotate(0deg); }
.ob-mailbox.has-mail .mb-box { animation: mb-wiggle 3s ease-in-out infinite; }
@keyframes mb-wiggle { 0%, 88%, 100% { rotate: 0deg; } 91% { rotate: -2deg; } 94% { rotate: 2deg; } 97% { rotate: -1deg; } }
.mb-post { order: 2; width: 14px; height: 30%; background: linear-gradient(90deg, #6b4420, #a0693a, #6b4420); border: 2px solid var(--ink); border-top: 0; }
.ob-mailbox .ob-tag { bottom: 2px; }
.mb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mb-note, .mb-notice { padding: 10px 12px; border: 2px solid var(--toy-ink); border-radius: 12px; background: #fffaf0; box-shadow: 0 4px 0 var(--toy-ink); }
.mb-note.is-new, .mb-notice.is-new { background: #fff6d6; }
.mb-note-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 4px; }
.mb-note p { margin: .3em 0; } .mb-goals .gl-chip { margin: 0 2px; } .mb-win { font-weight: 800; }

/* ---------- unlock dialog bits ---------- */
.ul-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ul-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 2px solid var(--toy-ink); border-radius: 14px; background: #fff6d6; }
.ul-art { flex: none; width: 84px; height: 84px; display: grid; place-items: center; }
.ul-art svg, .ul-mini svg { width: 100%; height: 100%; overflow: visible; }
.ul-world, .ul-shelf, .ul-game { display: block; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--toy-ink); background: var(--sw, #ddd); }
.ul-game { display: grid; place-items: center; font-size: 30px; background: #ffd166; }
.ul-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important; }
.ul-opt span { grid-template-columns: 1fr !important; text-align: center; }
.ul-mini { display: block; width: 64px; height: 64px; margin: 0 auto 4px; }
.ul-opt.is-locked span { opacity: .55; filter: grayscale(.8); }
.ul-opt.is-locked small { color: #8e1212; font-weight: 800; }
.ul-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.ul-colors label { position: relative; } .ul-colors input { position: absolute; opacity: 0; inset: 0; }
.ul-swatch { display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--c); border: 3px solid var(--toy-ink); box-shadow: 0 3px 0 var(--toy-ink); }
.ul-colors input:checked + .ul-swatch { outline: 3px solid var(--toy-ink); outline-offset: 3px; }
.ul-colors input:focus-visible + * { outline: 3px solid var(--focus); outline-offset: 3px; }
.ul-topper { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; border: 2px solid var(--toy-ink); border-radius: 10px; background: #fffaf0; font-size: 12px; font-weight: 800; box-shadow: 0 3px 0 var(--toy-ink); }
.ul-topper .ul-mini { width: 44px; height: 54px; }
.ul-colors input:checked + .ul-topper { background: #ffe066; }
.ul-ladder { margin-top: 8px; } .ul-ladder summary { cursor: pointer; font-weight: 800; }
.ul-levels { margin: 6px 0 0; padding: 0 0 0 1.4em; columns: 2; font-size: 13px; }
.ul-levels li { display: flex; justify-content: space-between; gap: 6px; padding: 1px 4px; break-inside: avoid; }
.ul-levels li.is-done { color: #3e690e; } .ul-levels li.is-now { background: #ffe066; border-radius: 4px; font-weight: 800; }
.ul-lock { font-weight: 800; }

/* Calm versions */
@media (prefers-reduced-motion: reduce) {
  .tr-spark, .tr-spark2, .tr-glow, .tr-svg.is-prism, .tr-sweep, .tr-orbit, .ob-trophy.lv-50 .tr-cup, .mg-tail, .mg-wag, .mg-eyes, .mg-head, .mg-zzz, .mg-ear-l, .mg-ear-r, .mg-body, .mg-fish, .mg-bubbles, .mg-throat, .mg-water, .pl-sway, .pl-leaf, .pl-bloom, .dc-flame, .dc-crawl, .dc-bulb, .ob-mailbox.has-mail .mb-box, .sj-stars i, .cab-spider, .is-broken .cab-marquee-big b, .is-fixing .cab-top { animation: none !important; } .pb-mlid { transition: none !important; }
}
:root[data-motion="reduce"] :is(.tr-spark, .tr-spark2, .tr-glow, .tr-svg.is-prism, .tr-sweep, .tr-orbit, .ob-trophy.lv-50 .tr-cup, .mg-tail, .mg-wag, .mg-eyes, .mg-head, .mg-zzz, .mg-ear-l, .mg-ear-r, .mg-body, .mg-fish, .mg-bubbles, .mg-throat, .mg-water, .pl-sway, .pl-leaf, .pl-bloom, .dc-flame, .dc-crawl, .dc-bulb, .ob-mailbox.has-mail .mb-box, .sj-stars i, .cab-spider, .is-broken .cab-marquee-big b, .is-fixing .cab-top) { animation: none !important; }
.lb-goal { color: #9ff0c3 !important; font-size: clamp(10px, 6cqh, 13px) !important; display: inline-flex; align-items: center; justify-content: center; gap: .3em; }
.lb-goal .icon { width: 1em; height: 1em; }

/* ---------- a tool's own object, big, at the top of its page ---------- */
.ob-stage { --cell: 190px; --ink: #23180f; color: var(--ink); position: relative; container-type: size; display: block; width: min(100% - 48px, 560px); height: 200px; margin: 8px auto 30px; border-radius: 10px; flex: none; }
.ob-stage.sh-1x1 { width: min(100% - 48px, 240px); }
.ob-stage.sh-1x2 { width: min(100% - 48px, 400px); }
.ob-stage.sh-2x1 { height: 270px; width: min(100% - 48px, 240px); }
.ob-stage.sh-2x2 { height: 300px; width: min(100% - 48px, 420px); }
.ob-stage::after { content: ""; position: absolute; left: -24px; right: -24px; bottom: -18px; height: 18px; border-radius: 6px; background: linear-gradient(180deg, var(--pk-top, #e9b87e) 0 6px, var(--pk-front, #c98544) 6px 14px, var(--pk-edge, #8a5022) 14px); box-shadow: 0 10px 14px -8px rgba(0,0,0,.6); z-index: -1; }
.ob-stage .ob { font-size: 15px; }
.m-tool-head.has-stage { margin-top: 10px; }
@media (max-width: 640px) { .ob-stage { height: 180px; } .ob-stage.sh-2x1 { height: 230px; } }

/* ==========================================================================
   The staff desk: the same board, with desk objects
   ========================================================================== */
.s-desk .m-home-bar h1 { margin: 0; }
.s-desk .m-home-bar .btn-row { align-items: center; }
/* punch clock */
.ob-punch { padding: 6px 6px 0; }
.pc-body { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 10px 12px 10px; border-radius: 18px 18px 10px 10px; border: 3px solid var(--ink); background: linear-gradient(180deg, #5a6b7d, #33404f); box-shadow: inset 0 6px 0 rgba(255,255,255,.18), inset 0 -8px 0 rgba(0,0,0,.25), 0 10px 14px -8px rgba(0,0,0,.6); color: #fff; overflow: hidden; }
.ob-punch.is-on .pc-body { background: linear-gradient(180deg, #2e7d5b, #1b4d38); }
.pc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pc-clock { width: 54px; height: 54px; flex: none; filter: drop-shadow(0 3px 2px rgba(0,0,0,.4)); }
.pc-clock svg { width: 100%; height: 100%; }
.pc-title b { display: block; font-size: 17px; line-height: 1.1; } .pc-title small { font-size: 12px; opacity: .9; }
.pc-card { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; border-radius: 6px; background: repeating-linear-gradient(180deg, #fffdf7 0 26px, #dbe7f3 26px 27px); color: var(--ink); box-shadow: inset 0 0 0 2px #c9d4df, 0 2px 0 rgba(0,0,0,.3); position: relative; scrollbar-width: thin; }
.pc-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: #e5484d; opacity: .85; }
.pc-card .field { gap: 2px; margin-top: 6px; } .pc-card label { font-size: 13px; }
.pc-card input, .pc-card select { min-height: 40px; font-size: 14px; }
.pc-seg legend { font-size: 13px; }
.pc-go { margin-top: 8px; width: 100%; justify-content: center; }
.pc-line { margin: 8px 0 2px; font-size: 14px; }
.pc-timer { margin: 0 0 8px; font-size: 24px; font-weight: 900; }
/* desk planner */
.ob-planner { padding: 4px 6px 0; }
.pn-book { position: relative; width: 100%; height: 100%; padding: 10px 12px 8px 22px; border-radius: 6px 12px 12px 6px; border: 3px solid var(--ink); background: #fffaf0; box-shadow: 0 8px 10px -6px rgba(0,0,0,.6), inset 0 0 0 2px #f3e6cf; overflow: hidden; }
.pn-rings { position: absolute; left: -8px; top: 12px; bottom: 12px; display: flex; flex-direction: column; justify-content: space-around; }
.pn-rings i { width: 20px; height: 10px; border-radius: 10px; border: 3px solid #4b5563; border-left: 0; background: linear-gradient(180deg, #e5e7eb, #9ca3af); box-shadow: 2px 1px 0 rgba(0,0,0,.25); }
.pn-page { height: 100%; display: flex; flex-direction: column; overflow: auto; scrollbar-width: thin; }
.pn-head { margin: 0 0 4px; display: flex; align-items: center; gap: .4em; font: 700 18px/1.1 var(--font-hand, cursive); color: #5a3a1a; }
.pn-head a:not(.ob-go) { margin-left: auto; font: 800 12px/1 var(--font-body, sans-serif); color: var(--ink); display: inline-flex; align-items: center; gap: .2em; }
.pn-head .ob-go { font-family: var(--font-body, sans-serif); }
.pn-tmrw { margin-top: 6px; font-size: 15px; }
.pn-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pn-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; border-left: 6px solid var(--svc, #7b45c4); background: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.12); font-size: 13px; line-height: 1.2; }
.pn-row.svc-320 { --svc: #2f6f9d; } .pn-row.svc-331 { --svc: #3f9a2f; } .pn-row.svc-other { --svc: #c97a1c; }
.pn-time { font-weight: 900; white-space: nowrap; }
.pn-main b { font-size: 14px; } .pn-main small { display: block; color: #5a4836; }
.pn-rows.is-quiet .pn-row { opacity: .8; }
.pn-empty { margin: 0; font-weight: 700; color: #5a4836; }
/* the member's folder */
.ob-folder { padding: 10px 6px 0; }
.fd-folder { position: relative; width: 100%; height: 100%; border-radius: 6px 10px 10px 10px; border: 3px solid var(--ink); background: linear-gradient(180deg, #f3c977, #e0ad5a); box-shadow: 0 8px 10px -6px rgba(0,0,0,.6); padding: 8px 8px 6px; }
.fd-tab { position: absolute; top: -18px; left: 10px; padding: 1px 12px; border: 3px solid var(--ink); border-bottom: 0; border-radius: 8px 8px 0 0; background: #f3c977; font-weight: 900; font-size: 13px; }
.fd-paper { height: 100%; overflow: auto; padding: 8px 10px; background: #fffdf7; border-radius: 4px; box-shadow: inset 0 0 0 1px #e8d9bd; font-size: 13px; line-height: 1.3; scrollbar-width: thin; }
.fd-paper p { margin: 0 0 4px; }
.fd-name { font-size: 14px; }
.fd-vital { padding: 3px 6px; border-radius: 6px; background: #fde2e2; }
.fd-hours { margin: 4px 0; padding: 0; list-style: none; font-size: 12px; }
.fd-hours li { padding: 2px 6px; border-radius: 6px; background: #e3f4e3; margin-bottom: 2px; }
.fd-pick { margin-top: 4px; font-size: 12px; }
/* pinboard */
.ob-pin { padding: 4px 4px 0; }
.pb-board { position: relative; width: 100%; height: 100%; padding: 22px 10px 8px; border-radius: 6px; border: 8px solid #b6763c; border-image: linear-gradient(135deg, #d39858, #8a5022) 1; background: radial-gradient(circle at 20% 30%, #c48a52 0 1.2px, transparent 1.6px) 0 0 / 7px 7px, #d6a066; box-shadow: 0 10px 14px -8px rgba(0,0,0,.6), inset 0 0 20px rgba(80,40,0,.35); overflow: hidden; }
.pb-title { position: absolute; top: -4px; left: 14px; transform: rotate(-3deg); padding: 2px 12px; background: #fff15c; border: 2px solid var(--ink); font: 700 18px/1.1 var(--font-hand, cursive); box-shadow: 0 3px 0 rgba(0,0,0,.25); z-index: 2; }
.pb-notes { list-style: none; margin: 0; padding: 4px 2px; display: flex; gap: 10px; overflow-x: auto; height: 100%; scrollbar-width: thin; }
.pb-note { position: relative; flex: none; width: 150px; padding: 14px 8px 6px; background: var(--pc); border: 2px solid var(--ink); transform: rotate(var(--r)); box-shadow: 3px 4px 0 rgba(0,0,0,.25); font-size: 12px; line-height: 1.25; overflow: hidden; }
.pb-note b { display: block; font-size: 13px; } .pb-note p { margin: 2px 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .pb-note small { color: #5a4836; }
.pb-note.is-pinned { outline: 3px solid #ffd23f; }
.pb-empty { margin: 10px 4px; font-weight: 700; background: #fffaf0; display: inline-block; padding: 6px 10px; border: 2px solid var(--ink); }
/* toolbox */
.ob-toolbox { flex-direction: column; align-items: stretch; padding: 0 4px; }
.tb-handle { align-self: center; width: 40%; height: 14px; border: 4px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; background: #4b5563; }
.tb-lid { padding: 3px 10px; border: 3px solid var(--ink); border-radius: 10px 10px 2px 2px; background: linear-gradient(180deg, #ff6b6b, #c92a2a); color: #fff; font-weight: 900; font-size: 13px; text-align: center; box-shadow: inset 0 4px 0 rgba(255,255,255,.25); }
.tb-tools { flex: 1; margin: 0; padding: 6px; list-style: none; display: grid; gap: 4px; align-content: start; border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #e5484d, #b12a2a); overflow: auto; scrollbar-width: thin; }
.tb-tools .ob-btn { width: 100%; justify-content: flex-start; font-size: 12px; padding: .3em .5em; background: #fffaf0; }
/* badges */
.ob-badges { padding: 6px 4px 0; }
.bg-board { width: 100%; height: 100%; padding: 22px 8px 6px; position: relative; border-radius: 10px; border: 3px solid var(--ink); background: linear-gradient(180deg, #2f3e9e, #1f2a6e); box-shadow: 0 8px 10px -6px rgba(0,0,0,.6); }
.bg-title { position: absolute; top: -4px; left: 50%; transform: translateX(-50%) rotate(-2deg); padding: 1px 10px; background: #ffd23f; border: 2px solid var(--ink); border-radius: 4px; font-weight: 900; font-size: 12px; white-space: nowrap; }
.bg-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.bg-list li { display: flex; flex-direction: column; align-items: center; gap: 1px; opacity: .35; filter: grayscale(1); }
.bg-list li.is-on { opacity: 1; filter: none; }
.bg-medal { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #f5c518 50%, #b8860b); border: 2px solid var(--ink); color: #6b4a00; font-size: 15px; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.bg-list small { font-size: 9px; font-weight: 800; color: #fff; text-align: center; line-height: 1.1; }
/* clock-out extras */
.co-goals .check-list { gap: 4px; } .co-goals .check { padding: .35em .6em; }
.co-moods { display: flex; flex-wrap: wrap; gap: 6px; }
.co-moods label { position: relative; } .co-moods input { position: absolute; opacity: 0; inset: 0; }
.co-moods span { display: inline-flex; align-items: center; gap: .3em; padding: .35em .7em; border: 2px solid var(--toy-ink); border-radius: 999px; background: #fffaf0; font-weight: 800; box-shadow: 0 3px 0 var(--toy-ink); cursor: pointer; }
.co-moods input:checked + span { background: #ffe066; transform: translateY(2px); box-shadow: 0 1px 0 var(--toy-ink); }
.co-moods input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
/* the punch clock's time card stays compact */
.pc-top { margin-bottom: 6px; } .pc-clock { width: 44px; height: 44px; }
.pc-seg { margin: 0; padding: 0; border: 0; } .pc-seg legend { padding: 0; margin-bottom: 2px; font-weight: 800; }
.pc-seg .s-seg { display: flex; gap: 4px; }
.pc-seg .s-seg label > span, .pc-seg .s-seg label span { padding: .25em .5em !important; font-size: 12px !important; line-height: 1.1 !important; border-radius: 10px !important; display: flex !important; flex-direction: row !important; gap: .35em; align-items: center; }
.pc-seg .s-seg label span small, .pc-seg .s-seg label span .small { display: none !important; }
.pc-card .field label { font-size: 12px; font-weight: 800; }
.pc-card input, .pc-card select { min-height: 36px; padding: .25em .6em; font-size: 13px; }
.pc-card .hint { font-size: 11px; margin: 4px 0 0; }
.pc-go { margin-top: 6px; min-height: 44px; font-size: 15px; }

/* ==========================================================================
   Shelf trimmings: lights, garland, nameplate, clock, stickers, vine, window, rug, neon
   ========================================================================== */
.shelf-unit { overflow: visible; }
.shelf-trims { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.shelf-trims-back { z-index: 0; }
.shelf-trims .trim { position: absolute; pointer-events: none; }
.shelf-trims button { pointer-events: auto; }
.trim-edit { position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); background: #fffdf7; color: var(--ink); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s; box-shadow: 0 2px 0 var(--ink); z-index: 2; }
.trim:hover .trim-edit, .trim:focus-within .trim-edit, .trim-edit:focus-visible { opacity: 1; }
@media (hover: none) { .trim-edit { opacity: .85; } }
.trim-edit .icon { width: 14px; height: 14px; }
/* string lights */
.trim-lights { left: 10px; right: 10px; top: -22px; height: 70px; }
.lt-wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lt-bulb { position: absolute; left: var(--x); top: calc(var(--y) + 14px); width: 14px; height: 22px; margin-left: -7px; transform: rotate(calc((var(--i) - 8) * 1.4deg)); transform-origin: top center; }
.lt-cap { position: absolute; left: 3px; top: 0; width: 8px; height: 7px; border-radius: 2px 2px 0 0; background: #3a3a46; }
.lt-glass { position: absolute; left: 0; top: 6px; width: 14px; height: 16px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: color-mix(in srgb, var(--c) 45%, #777); border: 1px solid rgba(0,0,0,.35); transition: background .3s, box-shadow .3s; }
.trim-lights.is-on .lt-glass { background: var(--c); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--c) 80%, transparent), 0 0 22px 6px color-mix(in srgb, var(--c) 40%, transparent); animation: lt-twinkle 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
@keyframes lt-twinkle { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
.lt-cord { position: absolute; left: -4px; top: 30px; width: 3px; height: 40px; background: #2b2420; border-radius: 2px; }
.lt-switch { position: absolute; left: -26px; top: 66px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.lt-plate { position: relative; display: block; width: 30px; height: 44px; border-radius: 6px; background: linear-gradient(180deg, #fffaf0, #e6dcc8); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.lt-plate::before, .lt-plate::after { content: ""; position: absolute; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #9c8f7c; } .lt-plate::before { top: 4px; } .lt-plate::after { bottom: 4px; }
.lt-nub { position: absolute; left: 50%; top: 50%; width: 12px; height: 16px; margin: -8px 0 0 -6px; border-radius: 3px; background: linear-gradient(180deg, #fff, #cfc6b8); border: 1.5px solid var(--ink); transform: translateY(6px) perspective(40px) rotateX(-30deg); transition: transform .2s var(--toy-spring, ease); }
.trim-lights.is-on .lt-nub { transform: translateY(-6px) perspective(40px) rotateX(30deg); }
.lt-word { font-size: 9px; font-weight: 900; letter-spacing: .08em; color: #fffaf0; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.lt-switch:focus-visible .lt-plate { outline: 3px solid #2b2bff; outline-offset: 2px; }
/* garland */
.trim-garland { left: 10px; right: 10px; top: 2px; height: 60px; }
.gl-string { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gl-flag { position: absolute; left: var(--x); top: var(--y); width: 26px; height: 32px; margin-left: -13px; background: var(--c); clip-path: polygon(0 0, 100% 0, 50% 100%); transform: rotate(var(--r)); transform-origin: top center; font: 900 13px/1 var(--font-display); color: #fff; text-align: center; padding-top: 5px; text-shadow: 0 1px 0 rgba(0,0,0,.35); animation: gl-sway 4s ease-in-out infinite; animation-delay: calc(var(--x) * .02s); }
@keyframes gl-sway { 50% { transform: rotate(calc(var(--r) + 4deg)); } }
/* nameplate */
.trim-nameplate { left: 50%; top: 0; transform: translate(-50%, -50%); }
.np-plate { position: relative; padding: 5px 20px 6px; border-radius: 6px; border: 2px solid #5a3a0f; background: linear-gradient(180deg, #ffe08a, #d9a520 60%, #b8860b); color: #3a2410; font: 800 14px/1.1 var(--font-display); letter-spacing: .04em; box-shadow: 0 3px 0 #5a3a0f, inset 0 1px 0 rgba(255,255,255,.6); cursor: pointer; white-space: nowrap; }
.np-plate::before, .np-plate::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #6b4a16; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); } .np-plate::before { left: 6px; } .np-plate::after { right: 6px; }
.np-plate:focus-visible { outline: 3px solid #2b2bff; outline-offset: 3px; }
/* clock */
.trim-clock { left: -30px; top: 180px; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ck-face { --h: 0deg; --m: 0deg; --s: 0deg; position: relative; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #f1e9d8); border: 4px solid #5a3a0f; box-shadow: 0 4px 0 #3a2410, inset 0 0 0 3px #e6b35a; }
.ck-face::before { content: ""; position: absolute; left: 50%; top: -14px; width: 10px; height: 14px; margin-left: -5px; background: #5a3a0f; border-radius: 2px 2px 0 0; }
.ck-face i { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; border-radius: 2px; background: #23180f; }
.ck-h { width: 4px; height: 20px; margin-left: -2px; transform: rotate(var(--h)); } .ck-m { width: 3px; height: 27px; margin-left: -1.5px; transform: rotate(var(--m)); } .ck-s { width: 1.5px; height: 29px; margin-left: -.75px; background: #e5484d; transform: rotate(var(--s)); }
.ck-dot { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #e5484d; }
.ck-face span { position: absolute; width: 3px; height: 6px; background: #23180f; left: 50%; margin-left: -1.5px; }
.ck-12 { top: 4px; } .ck-6 { bottom: 4px; } .ck-3 { right: 4px; left: auto; top: 50%; width: 6px; height: 3px; margin-top: -1.5px; } .ck-9 { left: 4px; top: 50%; width: 6px; height: 3px; margin: -1.5px 0 0 0; }
.ck-time { padding: 1px 7px; border-radius: 6px; background: #fffaf0; border: 2px solid var(--ink); font-size: 11px; font-weight: 800; color: var(--ink); }
/* stickers */
.trim-stickers { left: -16px; top: 320px; width: 44px; height: 150px; }
.stk-one { position: absolute; left: 0; top: calc(var(--i) * 48px); width: 42px; height: 42px; border-radius: 50%; background: var(--c); border: 3px solid #fff; display: grid; place-items: center; color: #23180f; transform: rotate(calc((var(--i) - 1) * 14deg)); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.stk-one .icon { width: 22px; height: 22px; }
.trim-stickers .trim-edit { right: auto; left: 2px; top: -34px; }
/* vine */
.trim-vine { right: -18px; top: -16px; width: 60px; height: min(70%, 420px); }
.vn-pot { position: absolute; left: 14px; top: 0; width: 34px; height: 26px; border-radius: 4px 4px 10px 10px; background: linear-gradient(180deg, #d98a5a, #a8582e); border: 2px solid #5a3a1c; }
.vn-pot::before { content: ""; position: absolute; left: -4px; top: -2px; right: -4px; height: 8px; border-radius: 3px; background: #c97a4a; border: 2px solid #5a3a1c; }
.vn-stem { position: absolute; left: 30px; top: 24px; width: 4px; height: calc(100% - 24px); border-radius: 2px; background: linear-gradient(180deg, #3f8f4a, #2f6f3a); }
.vn-leaf { position: absolute; left: 32px; top: calc(28px + var(--t) * 1 - var(--t) * .0); width: 26px; height: 14px; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #7bc96f, #3f8f4a); border: 1.5px solid #2f6f3a; transform: translateX(calc(var(--s) * 4px - 12px)) rotate(calc(var(--s) * -35deg)); transform-origin: left center; animation: vn-wave 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
.trim-vine .vn-leaf { top: calc(28px + var(--t) * .92); }
@keyframes vn-wave { 50% { transform: translateX(calc(var(--s) * 4px - 12px)) rotate(calc(var(--s) * -35deg + 6deg)); } }
.vn-flower { position: absolute; right: -4px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #ff8fab; box-shadow: 0 0 0 2px #fff; }
/* window on the back wall */
.trim-window { left: 46%; top: 36px; width: 110px; height: 110px; }
.shelf-trims .trim-window { pointer-events: none; }
.wn-sky { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: linear-gradient(180deg, #8fd3ff, #dff4ff); }
.trim-window.is-night .wn-sky { background: linear-gradient(180deg, #0b1335, #2a2f66); }
.wn-orb { position: absolute; left: 60%; top: 22%; width: 26px; height: 26px; border-radius: 50%; background: #ffe066; box-shadow: 0 0 16px 4px rgba(255, 224, 102, .6); }
.trim-window.is-night .wn-orb { background: #fff6d6; box-shadow: 0 0 14px 3px rgba(255,255,255,.4); }
.wn-cloud { position: absolute; width: 44px; height: 16px; border-radius: 999px; background: rgba(255,255,255,.85); animation: wn-drift 18s linear infinite; }
.wn-cloud.c1 { top: 50%; left: -50px; } .wn-cloud.c2 { top: 68%; left: -90px; width: 32px; animation-duration: 24s; }
@keyframes wn-drift { to { transform: translateX(200px); } }
.trim-window.is-night .wn-cloud { opacity: .25; }
.wn-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: 0; } .trim-window.is-night .wn-star { opacity: 1; animation: sc-twinkle 3s ease-in-out infinite; }
.wn-star.s1 { left: 22%; top: 30%; } .wn-star.s2 { left: 40%; top: 18%; animation-delay: -1s; } .wn-star.s3 { left: 30%; top: 55%; animation-delay: -2s; }
.wn-frame { position: absolute; inset: -6px; border-radius: 50%; border: 8px solid #f3e4c8; box-shadow: 0 0 0 3px #5a4a36, inset 0 0 0 2px #5a4a36, 0 6px 10px rgba(0,0,0,.25); }
.wn-bar { position: absolute; background: #f3e4c8; box-shadow: 0 0 0 1px #5a4a36; } .wn-bar.v { left: 50%; top: 0; bottom: 0; width: 6px; margin-left: -3px; } .wn-bar.h { top: 50%; left: 0; right: 0; height: 6px; margin-top: -3px; }
/* rug */
.trim-rug { left: 8%; right: 8%; bottom: -46px; height: 40px; border-radius: 6px; border: 3px solid color-mix(in srgb, var(--rc) 55%, #000); box-shadow: 0 6px 10px -6px rgba(0,0,0,.5); z-index: -1; }
.rug-stripes { background: repeating-linear-gradient(90deg, var(--rc) 0 14px, color-mix(in srgb, var(--rc) 70%, #fff) 14px 28px); }
.rug-dots { background: radial-gradient(circle at 8px 8px, color-mix(in srgb, var(--rc) 60%, #fff) 0 4px, transparent 5px) 0 0 / 18px 18px, var(--rc); }
.rug-stars { background: radial-gradient(circle at 10px 10px, #fff 0 2px, transparent 3px) 0 0 / 22px 22px, var(--rc); }
.rug-zigzag { background: linear-gradient(135deg, var(--rc) 25%, transparent 25%) -8px 0 / 16px 16px, linear-gradient(225deg, var(--rc) 25%, transparent 25%) -8px 0 / 16px 16px, linear-gradient(315deg, var(--rc) 25%, transparent 25%) 0 0 / 16px 16px, linear-gradient(45deg, var(--rc) 25%, transparent 25%) 0 0 / 16px 16px, color-mix(in srgb, var(--rc) 70%, #fff); }
.rug-fringe { position: absolute; top: -3px; bottom: -3px; width: 10px; background: repeating-linear-gradient(180deg, #e6d2b0 0 3px, transparent 3px 6px); } .rug-fringe.l { left: -13px; } .rug-fringe.r { right: -13px; }
.trim-rug .trim-edit { top: 4px; }
/* neon */
.trim-neon { right: 12%; top: -34px; display: flex; align-items: flex-start; gap: 6px; }
.nn-tube { padding: 6px 14px; border: 3px solid var(--nc); border-radius: 14px; color: #fff; font: 900 20px/1 var(--font-display); letter-spacing: .08em; background: rgba(0,0,0,.25); opacity: .5; transition: opacity .3s, box-shadow .3s, text-shadow .3s; }
.trim-neon.is-on .nn-tube { opacity: 1; text-shadow: 0 0 6px #fff, 0 0 14px var(--nc), 0 0 28px var(--nc); box-shadow: 0 0 10px var(--nc), inset 0 0 10px color-mix(in srgb, var(--nc) 50%, transparent); animation: nn-flicker 7s steps(1) infinite; }
@keyframes nn-flicker { 0%, 93%, 96%, 100% { opacity: 1; } 94%, 97% { opacity: .6; } }
.nn-chain { position: relative; width: 20px; height: 54px; border: 0; background: none; cursor: pointer; padding: 0; }
.nn-chain i { position: absolute; left: 50%; top: 0; width: 3px; height: 40px; margin-left: -1.5px; background: repeating-linear-gradient(180deg, #ccc 0 3px, #777 3px 5px); border-radius: 2px; transition: height .15s; }
.nn-chain b { position: absolute; left: 50%; top: 40px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #ffd56b; border: 2px solid var(--ink); transition: top .15s; }
.nn-chain:active i { height: 48px; } .nn-chain:active b { top: 48px; }
.nn-chain:focus-visible { outline: 3px solid #2b2bff; outline-offset: 2px; border-radius: 6px; }
.trim-neon .trim-edit { position: static; align-self: flex-start; margin-top: 4px; }
/* swatches in the dialogs */
.tr-swatch { display: block; width: 64px; height: 30px; border-radius: 8px; background: var(--c); border: 2px solid var(--ink); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.ul-colors label input:checked + .tr-swatch { outline: 3px solid var(--ink); outline-offset: 2px; }
/* phones: keep trims clear of the content */
@media (max-width: 760px) { .m-view:has(.trim-clock) .m-home-bar { margin-bottom: 74px; } /* the clock hangs above the shelf: the home bar's buttons stay clear of it */
  .trim-clock { left: auto; right: 6px; top: -60px; transform: scale(.78); transform-origin: top right; z-index: 3; } .trim-stickers { left: -8px; transform: scale(.85); } .trim-vine { right: -8px; } .trim-window { width: 80px; height: 80px; left: 40%; } .lt-switch { left: -12px; } .trim-neon { right: 6%; transform: scale(.85); transform-origin: top right; } }
@media (prefers-reduced-motion: reduce) { .trim-lights.is-on .lt-glass, .gl-flag, .vn-leaf, .wn-cloud, .wn-star, .trim-neon.is-on .nn-tube { animation: none !important; } }
:root[data-motion="reduce"] :is(.trim-lights.is-on .lt-glass, .gl-flag, .vn-leaf, .wn-cloud, .wn-star, .trim-neon.is-on .nn-tube) { animation: none !important; }
:root[data-look="simple"] .shelf-trims { display: none; }

/* ---------- Shelf materials (earned) ---------- */
html:root .shelf-unit[data-mat="cardboard"] { --sh-back: #d9b991; --sh-back2: #c9a877; --sh-side: #b8905c; --sh-side2: #8a6a40; --pk-top: #e3c79b; --pk-front: #c9a877; --pk-edge: #8a6a40; --pk-grain: rgba(90,60,20,.18); }
html:root .shelf-unit[data-mat="bamboo"] { --sh-back: #f2e6c8; --sh-back2: #e6d7ae; --sh-side: #b8a04a; --sh-side2: #7d6a2a; --pk-top: #e9d98a; --pk-front: #c9b45a; --pk-edge: #8a7a30; --pk-grain: rgba(80,70,20,.2); }
html:root .shelf-unit[data-mat="stone"] { --sh-back: #cfd3d6; --sh-back2: #bfc4c8; --sh-side: #8d949b; --sh-side2: #5e656c; --pk-top: #d9dde0; --pk-front: #a6adb4; --pk-edge: #6b7279; --pk-grain: rgba(40,45,50,.18); }
html:root .shelf-unit[data-mat="glass"] { --sh-back: #dff4f8; --sh-back2: #c9ecf4; --sh-side: #9fd9e8; --sh-side2: #4fb3cc; --pk-top: #eafbff; --pk-front: #b9e8f3; --pk-edge: #6cc5db; --pk-grain: rgba(255,255,255,.5); }
html:root .shelf-unit[data-mat="ice"] { --sh-back: #e6f3ff; --sh-back2: #d2e8fb; --sh-side: #bcdcf7; --sh-side2: #7fb6ea; --pk-top: #f4faff; --pk-front: #cfe6fb; --pk-edge: #8fc0ee; --pk-grain: rgba(255,255,255,.6); }
html:root .shelf-unit[data-mat="metal"] { --sh-back: #3b4046; --sh-back2: #4a5058; --sh-side: #9aa3ad; --sh-side2: #5f6871; --pk-top: #c9d1d9; --pk-front: #8e98a3; --pk-edge: #4f5760; --pk-grain: rgba(255,255,255,.12); }
html:root .shelf-unit[data-mat="gold"] { --sh-back: #fff1c2; --sh-back2: #ffe39a; --sh-side: #e0b24a; --sh-side2: #a67c1a; --pk-top: #ffe9a3; --pk-front: #e6bc4f; --pk-edge: #a67c1a; --pk-grain: rgba(255,255,255,.4); }
html:root .shelf-unit[data-mat="wood"] { --sh-back: #f3dfbd; --sh-back2: #ead2a8; --sh-side: #a8662f; --sh-side2: #7d4519; --pk-top: #e9b87e; --pk-front: #c98544; --pk-edge: #8a5022; --pk-grain: rgba(90, 45, 10, .18); }

/* ---------- No backboard (draft 10, item 15): an open frame, the world shows through behind the things on it.
   The two uprights and the planks stay (they are what the objects stand on); the back, its dots and the inner
   vignette go. Each plank keeps a soft shadow so it still reads as a board in front of the wall. ---------- */
html:root .shelf-unit[data-back="none"] {
  background: none;
  box-shadow: inset 16px 0 0 var(--sh-side), inset -16px 0 0 var(--sh-side), inset 19px 0 0 var(--sh-side2), inset -19px 0 0 var(--sh-side2), 0 24px 40px -20px rgba(0,0,0,.45);
}
html:root .shelf-unit[data-back="none"] .w-grid {
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 var(--plank), rgba(0,0,0,.22) var(--plank), rgba(0,0,0,0) calc(var(--plank) + 12px), rgba(0,0,0,0) calc(var(--cell) + var(--plank))),
    repeating-linear-gradient(180deg, var(--pk-top) 0 7px, var(--pk-front) 7px calc(var(--plank) - 5px), var(--pk-edge) calc(var(--plank) - 5px) var(--plank), transparent var(--plank) calc(var(--cell) + var(--plank)));
}
/* Phones paint one plank under each piece (above); the repeating desk-spaced planks must not come back here, or
   they cross behind every piece (draft 10, post-deploy item 5: "too many horizontal shelves"). */
html:root .shelf-unit[data-back="none"] .w-grid[data-phone="1"] { background: none; }
/* The My style switch for it, under the materials */
.st-back { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; padding-top: 12px; border-top: 2px dashed rgba(0,0,0,.14); }
.st-back .st-back-row { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.st-back .st-back-row b { font-size: 15px; }
.st-back .hint { flex: 1 1 220px; margin: 0; }

/* ---------- Key hooks on the staff desk: one tagged key per member the office set me up with ---------- */
.ob-keys { align-items: stretch; }
.ky-board { width: 100%; height: 100%; border-radius: 12px; background: linear-gradient(180deg, #c98544, #b8743a); border: 3px solid #7d4519; box-shadow: inset 0 0 0 3px #e2b06a, 0 6px 0 #5c3a22; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ky-title { display: inline-flex; align-items: center; gap: 6px; align-self: center; padding: 2px 12px; border-radius: 6px; background: #fff6d6; border: 2px solid #23180f; font-weight: 900; font-size: 13px; color: #23180f; }
.ky-title .icon { width: 16px; height: 16px; }
.ky-hooks { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; overflow: auto; min-height: 0; }
.ky-key { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: #23180f; transform-origin: 50% 0; transition: transform .2s var(--toy-spring, ease); }
.ky-key::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #9aa3ad 60%, #4b5563); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.ky-ring { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #d9a74a; margin-top: -3px; box-shadow: inset 0 0 0 1px #8a5a1e; }
.ky-tag { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 92px; padding: 8px 6px 6px; margin-top: -2px; border-radius: 10px; background: var(--kc, #7a6a58); color: #fff; border: 2px solid #23180f; box-shadow: 0 3px 0 #23180f; text-align: center; }
.ky-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #23180f; }
.ky-ico .icon { width: 16px; height: 16px; }
.ky-tag b { font-size: 12px; line-height: 1.15; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.ky-tag small { font-size: 10px; font-weight: 700; opacity: .9; }
.ky-key:hover, .ky-key:focus-visible { transform: rotate(-4deg) translateY(2px); }
.ky-key:focus-visible { outline: 3px solid var(--focus, #29298e); outline-offset: 3px; border-radius: 10px; }
.ky-empty { margin: 0; font-size: 13px; font-weight: 700; color: #fff6d6; text-align: center; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.fd-open { margin-bottom: 6px; }
.sh-1x2 .ky-tag { width: 86px; }

/* ---------- The bell ---------- */
/* absolute like every other object: on phones the cubby's size containment collapsed a relative bell to nothing (draft 10, screenshot 04) */
.ob-bell { position: absolute; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; cursor: pointer; border: 0; background: transparent; padding: 6px 4px 0; }
/* seated on the plank (draft 10, item 10a); the door chimes hang from the top of the row instead */
.ob-bell .bl-art { margin-bottom: 0; }
.ob-bell.bl-desk .bl-art, .ob-bell.bl-hand .bl-art { margin-bottom: -2px; }
.ob-bell.bl-chimes { justify-content: flex-start; padding-top: 0; }
.ob-bell.bl-chimes .bl-art { width: min(92%, 150px); }
.ob-bell .bl-tag { position: absolute; right: 6px; bottom: 6px; z-index: 2; }
.ob-bell.bl-chimes .bl-tag { bottom: 8px; }
.ob-bell .bl-art { display: block; width: min(86%, 120px); aspect-ratio: 100 / 90; filter: drop-shadow(0 6px 4px rgba(35, 24, 15, .3)); }
.ob-bell .bl-art svg { width: 100%; height: 100%; overflow: visible; }
.ob-bell .bl-tag { display: inline-flex; align-items: center; gap: .3em; flex-wrap: wrap; justify-content: center; background: #fff6dc; color: #23180f; border: 2px solid #23180f; border-radius: 999px; padding: .1em .7em; font-weight: 800; font-size: .85rem; box-shadow: 0 2px 0 #23180f; }
.ob-bell .bl-tag small { flex-basis: 100%; text-align: center; font-weight: 700; font-size: .68rem; color: #5a4532; }
.ob-bell .bl-tag .icon { width: 1em; height: 1em; }
.bl-dome, .bl-plunger { transform-box: fill-box; transform-origin: 50% 100%; }
.bl-hand .bl-dome { transform-origin: 50% 0; }
.bl-chimes .bl-dome rect { transform-box: fill-box; transform-origin: 50% 0; }
.ob-bell.is-ringing.bl-desk .bl-plunger { animation: bl-press .18s ease-out; }
.ob-bell.is-ringing.bl-desk .bl-dome { animation: bl-jiggle .07s ease-in-out .05s 8 alternate; }
.ob-bell.is-ringing.bl-hand .bl-dome { animation: bl-swing .17s ease-in-out 0s 4 alternate; }
.ob-bell.is-ringing.bl-chimes .bl-dome rect { animation: bl-swing .32s ease-in-out 0s 4 alternate; }
.ob-bell.is-ringing.bl-chimes .bl-dome rect:nth-of-type(2) { animation-delay: .08s; } .ob-bell.is-ringing.bl-chimes .bl-dome rect:nth-of-type(3) { animation-delay: .16s; } .ob-bell.is-ringing.bl-chimes .bl-dome rect:nth-of-type(4) { animation-delay: .24s; }
@keyframes bl-press { 50% { transform: translateY(5px); } }
@keyframes bl-jiggle { from { rotate: -3deg; scale: 1.02 .98; } to { rotate: 3deg; scale: .98 1.02; } }
@keyframes bl-swing { from { rotate: -16deg; } to { rotate: 16deg; } }
.bl-waves { position: absolute; left: 50%; top: 14%; width: 0; height: 0; pointer-events: none; }
.bl-waves i { position: absolute; left: -28px; top: -18px; width: 56px; height: 36px; border: 3px solid #e2b23a; border-color: #e2b23a transparent transparent transparent; border-radius: 50%; opacity: 0; }
.ob-bell.is-ringing .bl-waves i { animation: bl-wave .7s ease-out; }
.ob-bell.is-ringing .bl-waves i:nth-child(2) { animation-delay: .15s; } .ob-bell.is-ringing .bl-waves i:nth-child(3) { animation-delay: .3s; }
@keyframes bl-wave { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px) scale(1.5); } }
@media (prefers-reduced-motion: reduce) { .ob-bell * { animation: none !important; } }
:root[data-motion="reduce"] .ob-bell * { animation: none !important; }

/* ---------- People pictures (photo, icon or letter) ---------- */
.fr-pic { position: relative; overflow: hidden; }
.fr-pic[style*="--fp"] { background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.35) 0 18%, transparent 19%), var(--fp); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.fr-pic .icon { width: 46%; height: 46%; }
.fr-pic.has-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fr-gold .fr-pic.has-photo { overflow: hidden; }

/* My day: add and change the sticky notes */
.tk-edit { position: absolute; right: 4px; bottom: 6px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: #fffaf0; color: var(--ink); cursor: pointer; z-index: 2; }
.tk-edit .icon { width: 13px; height: 13px; }
.tk-edit:hover, .tk-edit:focus-visible { background: #fff15c; }
.ck-add { position: absolute; top: 0; right: 160px; min-height: 24px; box-sizing: border-box; font-weight: 800; font-size: 13px; color: var(--ink); background: #fff15c; padding: 2px 8px; border-radius: 0 0 8px 8px; border: 2px solid var(--ink); border-top: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.ck-add .icon { width: 12px; height: 12px; }
@container (max-width: 420px) { .ck-add { right: auto; left: 106px; padding-inline: 5px; } .ck-add .ck-add-word { display: none; } .ck-add .icon { width: 14px; height: 14px; } } /* a narrow board: the add tab is its plus sign alone, clear of the "My calendar" pill */

/* Goal flag: flip between goals */
.gf-tabs { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.gf-flip { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: #fffaf0; color: var(--ink); cursor: pointer; box-shadow: 0 2px 0 var(--ink); }
.gf-flip:active { transform: translateY(2px); box-shadow: none; }
.gf-flip .icon { width: 14px; height: 14px; }
.gf-count { font-weight: 900; font-size: 12px; background: #fffaf0; border: 1.5px solid var(--ink); border-radius: 999px; padding: 0 7px; color: var(--ink); }
/* Today's list and My day: grab a note anywhere to move it (the grip is there for the keyboard) */
.cb-list li[data-sort-id] { cursor: grab; touch-action: pan-y; }
.cb-list .m-grip { width: 20px; height: 26px; margin: 0 -2px 0 -4px; border: 0; box-shadow: none; background: transparent; }
.cb-list .m-grip .icon { width: 16px; height: 16px; }
.ck-row > .tk[data-sort-id] { cursor: grab; touch-action: pan-y; }
.ck-row > .tk.is-lifted { cursor: grabbing; }
.fr-pic:has(> .icon) { background: radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,.28), transparent 60%), var(--fp, var(--fc)); }
.tk:has(.tk-edit) .tk-title { padding-right: 20px; }
/* ---------- Station 4: the sample dashboard on the Learn side ---------- */
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .8rem; }
.demo-bar h2 { display: inline-flex; align-items: center; gap: .4em; margin: 0; font-size: var(--step-1); }
.demo-bar h2 .icon { width: 1.1em; height: 1.1em; }
.demo-tag { font: 800 .72rem/1 var(--font-ui, system-ui), sans-serif; text-transform: uppercase; letter-spacing: .08em; padding: .35em .6em; border-radius: 999px; background: #23180f; color: #fff6dc; }
.demo-privacy { display: inline-flex; align-items: center; gap: .35em; margin: 0 auto 0 0; padding: .3em .8em; border-radius: 999px; background: rgba(255, 253, 247, .9); color: #47372a; }
.demo-privacy .icon { width: 1em; height: 1em; }
.demo-dash .m-home-bar, .demo-dash .w-menu, .demo-dash > .center-link { display: none !important; }
.demo-dash .w-grid.is-locked .w { cursor: default; }
.demo-section > .wrap { max-width: 1320px; }
/* habit names show in full: up to two short lines instead of being cut off */
.ln-name { white-space: normal !important; overflow: hidden !important; text-overflow: clip !important; overflow-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.ln-name.is-long { font-size: 10.5px; padding-left: 3px; padding-right: 3px; }
/* Words show whole: no letters broken across lines on the letter board, longer note titles, wrapped vital info */
.lb-line { overflow-wrap: normal; word-break: keep-all; hyphens: none; }
/* phones (draft 10, screenshot 05): the profile button keeps its label, the side column has room for it, and the goal line wraps whole words on up to two lines */
.w-grid[data-phone="1"] .lb-side { width: 36cqw; max-width: 150px; }
.lb-side .ob-go { max-width: 100%; }
.lb-goal span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-align: center; }
.w-grid[data-phone="1"] .lb-goal span { -webkit-line-clamp: 4; }
.lb-big { font-size: min(clamp(15px, 12cqh, 26px), 7.4cqw); }
.tk-title { -webkit-line-clamp: 3; }
.kt-label span { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.w.is-refreshed, .w.is-refreshed * { animation: none !important; transition: none !important; }
/* ---------- My goals: a fanned deck of goal cards ---------- */
.ob-deck { display: flex; flex-direction: column; gap: 6px; padding: 4px 6px 2px; }
.gd-stack { position: relative; flex: 1; min-height: 0; margin-right: 26px; }
.gd-card { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 8px 12px; border-radius: 12px; border: 2.5px solid var(--ink, #23180f); background: #fffdf7; color: #23180f; box-shadow: 0 4px 0 #23180f, inset 6px 0 0 var(--gc); overflow: hidden; transform: rotate(-1deg); }
.gd-card.is-from-right { animation: gd-in-r .32s cubic-bezier(.2, .9, .3, 1.15) both !important; }
.gd-card.is-from-left { animation: gd-in-l .32s cubic-bezier(.2, .9, .3, 1.15) both !important; }
@keyframes gd-in-r { from { transform: translateX(26px) rotate(4deg); opacity: .4; } to { transform: rotate(-1deg); opacity: 1; } }
@keyframes gd-in-l { from { transform: translateX(-26px) rotate(-5deg); opacity: .4; } to { transform: rotate(-1deg); opacity: 1; } }
.gd-back { position: absolute; inset: 0; border-radius: 12px; border: 2.5px solid #23180f; background: var(--gc); cursor: pointer; display: flex; align-items: center; justify-content: flex-end; padding: 0 3px 0 0; color: #fff; box-shadow: 0 3px 0 #23180f; transition: transform .18s; }
.gd-back .icon { width: 16px; height: 16px; filter: drop-shadow(0 1px 0 rgba(0,0,0,.4)); }
.gd-back-1 { z-index: 2; transform: translateX(14px) rotate(3deg); }
.gd-back-2 { z-index: 1; transform: translateX(27px) rotate(6deg); filter: brightness(.9); }
.gd-back:hover, .gd-back:focus-visible { transform: translateX(20px) rotate(5deg); }
.gd-back:focus-visible { outline: 3px solid var(--focus, #29298e); outline-offset: 2px; }
.gd-cat { margin: 0; display: flex; align-items: center; gap: 5px; font: 800 11px/1.2 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #47372a; }
.gd-cat .icon { width: 14px; height: 14px; color: var(--gc); }
.gd-pin { margin-left: auto; color: #a3171b; } .gd-pin .icon { color: #a3171b; }
.gd-title { flex: none; font-weight: 900; font-size: 15px; line-height: 1.2; color: #23180f; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gd-title:hover { text-decoration: underline; }
.gd-progress { display: flex; align-items: center; gap: 8px; }
.gd-bar { flex: 1; height: 9px; border-radius: 999px; background: #eee5d3; border: 1.5px solid #23180f; overflow: hidden; }
.gd-bar i { display: block; height: 100%; background: var(--gc); }
.gd-pct { font: 800 11px/1 system-ui, sans-serif; color: #47372a; white-space: nowrap; }
.gd-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; line-height: 1.25; }
.gd-steps label { display: flex; align-items: flex-start; gap: 6px; cursor: pointer; }
.gd-steps input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #1d7a3a; }
.gd-done { margin: 0; font-size: 13px; font-weight: 700; display: flex; gap: 5px; align-items: center; }
.gd-done > a { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 4px; margin: -2px -4px; }
.gd-week { margin: auto 0 0; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.gd-nav { display: flex; align-items: center; gap: 6px; flex: none; min-width: 0; flex-wrap: wrap; }
.gd-dots { flex: 1 1 auto; min-width: 0; overflow: hidden; }
/* the arrows are round buttons that never squash: flex: none keeps them 32px wide however tight the row gets (draft 10, item 5) */
.gd-arrow { flex: none; width: 32px; height: 32px; min-width: 32px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 2.5px solid #23180f; background: #fffdf7; color: #23180f; cursor: pointer; box-shadow: 0 3px 0 #23180f; transition: transform .14s var(--toy-spring, ease), box-shadow .14s; }
.gd-arrow:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #23180f; background: #fff3c4; }
.gd-arrow .icon { width: 18px; height: 18px; stroke-width: 2.6; }
.gd-arrow:active { transform: translateY(3px); box-shadow: none; }
.gd-dots { display: inline-flex; gap: 4px; align-items: center; }
.gd-dots i { width: 8px; height: 8px; border-radius: 50%; background: #fffdf7; border: 1.5px solid #23180f; }
.gd-dots i.is-on { background: var(--gc); width: 18px; border-radius: 999px; }
/* ---------- The shortcut pill (draft 10, items 4 + 17): the same compact yellow pill on every object ----------
   Default place: the bottom-right corner of the cubby. .is-inline lets an object keep it in its own control row
   (the goals nav, the cork board's top edge, the robot screen, the talking-button box). */
.ob-go { position: absolute; right: 8px; bottom: 8px; z-index: 4; display: inline-flex; align-items: center; gap: 3px; min-height: 24px; padding: 2px 8px 2px 9px; border-radius: 999px; border: 2px solid #23180f; background: #ffd34f; color: #23180f; font-weight: 800; font-size: 12px; line-height: 1.3; text-decoration: none; box-shadow: 0 2px 0 #23180f; white-space: nowrap; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; transition: transform .14s var(--toy-spring, ease), box-shadow .14s, background-color .14s; }
.ob-go .icon { width: 13px; height: 13px; flex: none; stroke-width: 2.6; }
.ob-go:hover, .ob-go:focus-visible { background: #ffe58a; transform: translateY(-1px); box-shadow: 0 3px 0 #23180f; }
.ob-go:active { transform: translateY(1px); box-shadow: 0 1px 0 #23180f; }
.ob-go:focus-visible { outline: 3px solid #29298e; outline-offset: 2px; }
.ob-go.is-inline { position: static; margin-left: auto; }
/* where the corner is busy, the pill moves to the top-right (photo frames, the coin jar) or the object makes room for it */
.ob-frames .ob-go, .ob-jar + .ob-go { bottom: auto; top: 6px; }
.pb-mini-title .ob-go.is-inline { margin-left: auto; margin-right: 4px; }
.pb-mini-title b { margin-left: 0; }
/* the My lists pill: beside the add row on the wide pad, under it on the tall ones (so the field keeps its width) */
.ob-notepad.is-wide .np-add { margin-right: 96px; }
.ob-notepad:not(.is-wide) .np-add { margin-right: 32px; margin-bottom: 30px; }
/* the tall narrow pad (2x1): the name on its own line under the icon and count, a smaller plus */
.ob-notepad.is-narrow .np-head { flex-wrap: wrap; row-gap: 2px; }
.ob-notepad.is-narrow .np-title { flex: 1 1 100%; order: 3; font-size: 18px; }
.ob-notepad.is-narrow .np-plus { width: 26px; height: 26px; }
.ob-lava .lv-cue { max-width: 96%; margin-bottom: 30px; }
.ob-lanterns .ln-row { padding-right: 94px; justify-content: flex-start; }
.ob-lanterns .ln-row li { flex: 0 1 96px; }
/* phones: the lanterns use the whole width (up to five), the pill moves to the top-right corner */
.w-grid[data-phone="1"] .ob-lanterns .ln-row { padding: 38px 2px 0; gap: 8px; justify-content: center; }
.w-grid[data-phone="1"] .ob-lanterns .ln-row li { flex: 1 1 60px; max-width: 108px; }
.w-grid[data-phone="1"] .ob-lanterns .ln { max-width: 108px; }
.w-grid[data-phone="1"] .ob-lanterns .ln-base { max-width: 108px; }
.w-grid[data-phone="1"] .ob-lanterns .ln-name { font-size: 13px; padding: 1px 3px; }
.w-grid[data-phone="1"] .ob-lanterns .ln-name.is-long { font-size: 11.5px; }
.w-grid[data-phone="1"] .ob-lanterns .ob-go { top: 6px; left: 8px; right: auto; bottom: auto; }
/* phones: the trophy's pedestal and plaque grow with the cell; its pill sits top-left, clear of the plaque and the ⋯ button */
.w-grid[data-phone="1"] .ob-trophy .tr-pedestal { --pdw: 200px; }
.w-grid[data-phone="1"] .ob-trophy .tr-plaque b { font-size: 13px; } .w-grid[data-phone="1"] .ob-trophy .tr-plaque small { font-size: 9.5px; }
.w-grid[data-phone="1"] .sh-2x1 .tr-ribbons { margin-top: 36px; }
.w-grid[data-phone="1"] .ob-trophy + .ob-go { top: 6px; left: 8px; right: auto; bottom: auto; }
.gd-open { margin-left: auto; }
.ob-deck.is-big .gd-title { font-size: 18px; } .ob-deck.is-big .gd-steps { font-size: 14px; }
.ob-deck.is-empty .gd-card { position: relative; inset: auto; height: 100%; justify-content: center; }
.ob-deck.is-empty .gd-stack { margin-right: 0; }
@media (prefers-reduced-motion: reduce) { .gd-card.is-from-right, .gd-card.is-from-left { animation: none !important; } }
/* ---------- My day notes: a compact top row (grip, icon, time, check) and room for the whole note ---------- */
.tk { width: clamp(124px, 18cqw, 168px); padding: 10px 7px 8px; gap: 3px; }
.tk-top { display: flex; align-items: center; gap: 3px; min-height: 22px; }
.tk-color, .tk-del { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); color: #3d3020; cursor: pointer; }
.tk-del { margin-left: auto; }
.tk-color .icon, .tk-del .icon { width: 15px; height: 15px; }
.tk-color:hover, .tk-del:hover { background: #fffdf7; }
.tk .m-grip { position: static; width: 18px; height: 22px; flex: none; background: transparent; margin: 0 -2px 0 -3px; }
.tk .m-grip .icon { width: 13px; height: 13px; }
.tk-ico { font-size: 0; line-height: 0; margin: 0; min-height: 0; flex: none; }
.tk-ico .icon { width: 17px; height: 17px; }
.tk-time { font-weight: 900; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tk-check { margin: 0 0 0 auto; padding: 0; flex: none; display: grid; place-items: center; }
.tk-check input { width: 19px; height: 19px; }
.tk-flag { top: -9px; right: 6px; font-size: 10px; z-index: 2; }
.tk-title { font-size: 13px; line-height: 1.22; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; padding: 1px 2px !important; border-radius: 4px; cursor: text; outline: none; min-height: 1.3em; }
.tk-title[contenteditable]:hover { background: rgba(255, 255, 255, .45); }
.tk-title[contenteditable]:focus { background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 2px var(--ink); -webkit-line-clamp: unset; display: block; overflow: auto; max-height: 100%; }
.tk-title:empty::before { content: "Write a note…"; color: rgba(35, 24, 15, .6); font-weight: 600; }
.tk-with { font-size: 11px; font-weight: 700; margin-top: -1px; }
.tk.is-editing { z-index: 6; transform: rotate(0); }
.tk.is-done .tk-ico, .tk.is-done .tk-time { opacity: .7; }
/* The snow globe opens a weather search in a new tab */
.gl-unit { position: relative; }
.gl-open { position: absolute; inset: 0; z-index: 4; border-radius: 14px; cursor: pointer; }
.gl-open:hover { box-shadow: 0 0 0 3px rgba(255, 255, 255, .8), 0 0 18px rgba(143, 211, 255, .9); }
.gl-open:focus-visible { outline: 3px solid var(--focus, #29298e); outline-offset: 3px; }
.gl-unit:has(.gl-open:hover) .gl-snow i { animation-duration: 1.4s; }

/* the long library shelf: a whole row of books with titles big enough to read */
.ob-books.is-long { gap: 8px; padding: 0 14px; justify-content: flex-start; }
.ob-books.is-long .bk { max-width: 66px; min-width: 44px; flex-grow: 0; flex-basis: 60px; }
.ob-books.is-long .bk-title { font-size: 12px; }
.w-shape-demo.sh-1x5::before { width: 102px; height: 18px; }
.w-shape-demo.sh-2x3::before { width: 60px; height: 39px; } .w-shape-demo.sh-2x4::before { width: 81px; height: 39px; } .w-shape-demo.sh-4x5::before { width: 102px; height: 81px; }

/* My day: the notes swipe sideways. A finger can always scroll the row (holding still lifts a note to move it).
   Arrows and dots under the board make it easy on a phone too. */
.ck-row > .tk[data-sort-id] { touch-action: pan-x pan-y; }
.ck-row { scroll-snap-type: x proximity; scroll-padding-inline: 12px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.ck-row > .tk { scroll-snap-align: center; }
.ck-nav { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); display: none; align-items: center; gap: 8px; z-index: 3; }
.ck-arrow { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: #fffaf0; color: var(--ink); box-shadow: 0 2px 0 rgba(0,0,0,.3); cursor: pointer; }
.ck-arrow:hover, .ck-arrow:focus-visible { background: #fff15c; }
.ck-arrow .icon { width: 18px; height: 18px; }
.ck-count { display: flex; gap: 5px; padding: 4px 8px; border-radius: 999px; background: rgba(255, 250, 240, .92); border: 1.5px solid var(--ink); }
.ck-count i { width: 8px; height: 8px; border-radius: 50%; background: #c9b48e; transition: background-color .2s, transform .2s; }
.ck-count i.is-on { background: var(--ink); transform: scale(1.3); }
/* phones and narrow boards: big notes, one in the middle at a time, with room left for the swipe */
.w-grid[data-phone="1"] .ck-nav { display: flex; }
.w-grid[data-phone="1"] .ck-board { padding-bottom: 48px; }
.w-grid[data-phone="1"] .ck-row { scroll-snap-type: x mandatory; gap: 16px; padding-inline: 14%; }
.w-grid[data-phone="1"] .ck-row > .tk { width: 72%; max-width: 260px; font-size: 15px; }
.w-grid[data-phone="1"] .tk-title { -webkit-line-clamp: 6; }
.w-grid[data-phone="1"] .tk-check input { width: 26px; height: 26px; }

/* ---------- My lists: a spiral notepad (shelf) and the full list page ---------- */
.ob-notepad { align-items: stretch; justify-content: stretch; padding: 4px 30px 6px 4px; --lc: #2c56c9; }
.ob-notepad.is-wide { padding: 30px 4px 6px 4px; }
.np-pad { position: relative; flex: 1; min-width: 0; display: flex; border-radius: 6px 6px 10px 10px; background: var(--lc); border: 2px solid var(--ink); box-shadow: 4px 6px 0 rgba(0,0,0,.25); padding: 16px 6px 8px; transform: rotate(-.6deg); }
.np-pad::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 5px; border-radius: 0 0 6px 6px; background: repeating-linear-gradient(180deg, #fffdf7 0 1px, #e8dcc4 1px 2px); opacity: .9; }
.np-spiral { position: absolute; left: 10px; right: 10px; top: -9px; height: 22px; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 5px 9px at 50% 55%, transparent 3px, #5d6670 3.4px 5px, transparent 5.5px) 0 0 / 15px 22px repeat-x; filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)); }
.np-spiral::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 6px; background: radial-gradient(circle 2.6px at 50% 50%, #23180f 2.4px, transparent 3px) 0 0 / 15px 6px repeat-x; }
.np-page { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 3px; border: 1.5px solid rgba(35,24,15,.45); background-color: #fffdf4; color: #23180f; padding: 10px 8px 6px 10px; overflow: hidden; transform-origin: 50% 0; }
.np-page.is-turned { animation: np-turn .5s cubic-bezier(.2,.8,.3,1) both; }
@keyframes np-turn { from { transform: perspective(700px) rotateX(-75deg); opacity: .2; } to { transform: none; opacity: 1; } }
/* papers */
.paper-lined { background-image: linear-gradient(90deg, transparent 22px, rgba(229,72,77,.45) 22px 24px, transparent 24px), repeating-linear-gradient(180deg, transparent 0 25px, rgba(44,86,201,.22) 25px 26px); background-position: 0 0, 0 4px; }
.paper-grid { background-image: linear-gradient(rgba(44,86,201,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(44,86,201,.16) 1px, transparent 1px); background-size: 13px 13px; }
.paper-dots { background-image: radial-gradient(circle 1.2px, rgba(35,24,15,.35) 1.1px, transparent 1.6px); background-size: 13px 13px; }
.paper-plain { background-image: none; }
.np-head { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; padding-left: 14px; }
.np-ico { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: var(--lc); color: #fff; border: 2px solid var(--ink); }
.np-ico .icon { width: 15px; height: 15px; }
.np-title { flex: 1; min-width: 0; font: 700 21px/1.05 var(--font-hand, cursive); color: #23180f; text-decoration: none; overflow: hidden; white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.np-title:hover, .np-title:focus-visible { text-decoration: underline; text-decoration-color: var(--lc); text-decoration-thickness: 3px; }
.np-count { flex: none; font-weight: 900; font-size: 12px; padding: 1px 7px; border-radius: 999px; background: #23180f; color: #fffdf7; }
.np-empty { margin: 8px 0 8px 14px; font-weight: 700; color: #5a4632; }
.np-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; margin: 0; padding: 0 2px 4px 0; list-style: none; scrollbar-width: thin; scrollbar-color: var(--lc) transparent; -webkit-overflow-scrolling: touch; }
/* one line */
.li-list { list-style: none; margin: 0; padding: 0; }
.li-row { position: relative; display: flex; align-items: flex-start; gap: 5px; min-height: 26px; padding: 2px 2px 1px 0; line-height: 21px; font-size: 15px; font-weight: 600; touch-action: pan-y; border-radius: 6px; }
.li-row .m-grip { flex: none; width: 16px; height: 22px; padding: 0; margin: 0 -2px 0 -2px; border: 0; background: transparent; color: rgba(35,24,15,.45); display: grid; place-items: center; cursor: grab; }
.li-row .m-grip .icon { width: 13px; height: 13px; }
.li-row:hover .m-grip, .li-row .m-grip:focus-visible { color: #23180f; }
.li-row.is-indent { margin-left: 24px; }
.li-row.is-indent::before { content: ""; position: absolute; left: -12px; top: 0; height: 12px; width: 9px; border-left: 2px solid rgba(35,24,15,.3); border-bottom: 2px solid rgba(35,24,15,.3); border-radius: 0 0 0 5px; }
.li-text { flex: 1; min-width: 0; overflow-wrap: anywhere; outline: none; border-radius: 4px; padding: 0 3px; cursor: text; }
.li-text:focus { background: rgba(255,241,92,.55); box-shadow: 0 0 0 2px var(--lc); }
.li-text:empty::before { content: "Type here…"; color: #8a7a62; font-weight: 500; }
.li-box { position: relative; flex: none; width: 22px; height: 22px; margin-top: 0; cursor: pointer; }
.li-box input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.li-tick { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid #23180f; border-radius: 5px; background: #fffdf7; color: transparent; transition: background-color .15s, transform .15s; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.li-tick .icon { width: 14px; height: 14px; stroke-width: 3.4; }
.li-box input:checked + .li-tick { background: var(--lc); color: #fff; transform: rotate(-6deg) scale(1.05); }
.li-box input:focus-visible + .li-tick { outline: 3px solid #29298e; outline-offset: 2px; }
.li-box:hover .li-tick { transform: scale(1.08); }
.li-row.is-done .li-text { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--lc); color: #6b5a45; }
.li-bullet { flex: none; min-width: 18px; text-align: center; font-weight: 900; color: var(--lc); font-size: 16px; }
.li-bullet.b-number { font-size: 14px; min-width: 22px; text-align: right; color: #23180f; }
.li-head-ico { flex: none; color: var(--lc); margin-top: 2px; } .li-head-ico .icon { width: 16px; height: 16px; }
.li-row.is-head { margin-top: 6px; }
.li-row.is-head .li-text { font: 700 19px/22px var(--font-hand, cursive); color: #23180f; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--lc) 28%, transparent) 62%); }
.li-row.is-hl .li-text { background: linear-gradient(100deg, transparent 2%, rgba(255,228,64,.85) 4% 94%, transparent 97%); }
.li-row.is-lifted { background: #fffdf4; box-shadow: 0 6px 14px rgba(0,0,0,.25); z-index: 3; }
/* add a line */
.np-add { display: flex; align-items: center; gap: 6px; margin: 4px 0 0 12px; }
/* the add field is always a light line on the paper with dark ink, whatever the world or the device's dark mode (draft 10, screenshot 04) */
.np-add input, .m-app .np-add input, .m-dialog .np-add input { flex: 1; min-width: 0; min-height: 0; width: auto; height: 32px; border: 0; border-bottom: 2px dashed rgba(35,24,15,.5); border-radius: 6px 6px 0 0; background: rgba(255, 253, 247, .92); color: #23180f; color-scheme: light; appearance: none; -webkit-appearance: none; box-shadow: none; font: inherit; font-size: 15px; font-weight: 600; padding: 0 6px; }
.np-add input:focus { outline: none; border-bottom-color: var(--lc); background: rgba(255,241,92,.35); }
.np-plus { flex: none; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--lc); color: #fff; cursor: pointer; box-shadow: 0 2px 0 var(--ink); }
.np-plus:active { transform: translateY(2px); box-shadow: none; }
/* tabs that stick out of the side (tall pad) or the top (wide pad) */
/* the side tabs start under the piece's ⋯ button, which sits in the top-right corner (draft 10, screenshot 14) */
.np-tabs { position: absolute; right: 2px; top: 42px; bottom: 14px; width: 30px; display: flex; flex-direction: column; gap: 4px; z-index: 0; }
.ob-notepad.is-wide .np-tabs { left: 18px; right: 44px; top: 2px; bottom: auto; width: auto; height: 30px; flex-direction: row; }
.np-tab { width: 30px; height: 30px; flex: none; display: grid; place-items: center; padding: 0 0 0 4px; border: 2px solid var(--ink); border-left: 0; border-radius: 0 9px 9px 0; background: var(--tc, #c9b48e); color: #fff; cursor: pointer; text-decoration: none; box-shadow: 2px 2px 0 rgba(0,0,0,.25); transition: transform .15s; }
.ob-notepad.is-wide .np-tab { padding: 0 0 4px; border: 2px solid var(--ink); border-bottom: 0; border-radius: 9px 9px 0 0; }
.np-tab .icon { width: 15px; height: 15px; }
.np-tab:hover, .np-tab:focus-visible { transform: translateX(3px); }
.ob-notepad.is-wide .np-tab:hover, .ob-notepad.is-wide .np-tab:focus-visible { transform: translateY(-3px); }
.np-tab.is-on { transform: translateX(4px); box-shadow: 3px 3px 0 rgba(0,0,0,.3), inset 0 0 0 2px #fff; }
.ob-notepad.is-wide .np-tab.is-on { transform: translateY(-4px); }
.np-more { background: #fffdf7; color: var(--ink); }
.w-grid[data-phone="1"] > .w-lists { grid-row: span 5 !important; }
.w-grid[data-phone="1"] .w-lists .li-row { font-size: 16px; min-height: 32px; }
@media (prefers-reduced-motion: reduce) { .np-page.is-turned { animation: none; } }

/* the full page */
.lp-wrap { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-5, 1.5rem); align-items: start; }
@media (max-width: 760px) { .lp-wrap { grid-template-columns: minmax(0, 1fr); } }
.lp-books { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 760px) { .lp-books { position: static; } .lp-book-list { flex-direction: row; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; } .lp-book-list > li { flex: 0 0 11rem; scroll-snap-align: start; } }
.lp-book-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lp-book-list > li { position: relative; display: flex; align-items: center; gap: 4px; }
.lp-book { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px 8px 14px; border: 2px solid #23180f; border-radius: 4px 12px 12px 4px; background: linear-gradient(90deg, rgba(0,0,0,.22) 0 7px, transparent 7px), var(--lc); color: #fff; text-decoration: none; box-shadow: 0 3px 0 #23180f; transition: transform .15s; }
.lp-book b { grid-column: 2; font-size: var(--step-0); line-height: 1.15; overflow-wrap: anywhere; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.lp-book small { grid-column: 2; font-weight: 700; opacity: .95; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.lp-book-ico { grid-row: 1 / span 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #fffdf7; color: var(--lc); border: 2px solid #23180f; }
.lp-book:hover, .lp-book:focus-visible { transform: translateX(4px); }
.lp-book.is-open { box-shadow: 0 3px 0 #23180f, 0 0 0 4px #fff15c; transform: translateX(6px); }
.lp-page { position: relative; --lc: #2c56c9; padding: 18px 10px 12px; border: 3px solid #23180f; border-radius: 10px 10px 14px 14px; background: var(--lc); box-shadow: 6px 8px 0 rgba(0,0,0,.2); }
.lp-page .np-spiral.is-top { top: -12px; height: 26px; }
.lp-sheet { position: relative; border-radius: 4px; border: 2px solid rgba(35,24,15,.5); background-color: #fffdf4; color: #23180f; padding: 18px 16px 12px 20px; min-height: 22rem; }
.lp-head { display: flex; align-items: center; gap: 10px; padding-left: 16px; }
.lp-ico { width: 38px; height: 38px; border-radius: 10px; } .lp-ico .icon { width: 22px; height: 22px; }
.lp-title { flex: 1; min-width: 0; font: 700 clamp(26px, 4vw, 36px)/1.1 var(--font-hand, cursive); border: 0; border-bottom: 2px dashed transparent; background: transparent; color: #23180f; padding: 2px 4px; }
.lp-title:hover { border-bottom-color: rgba(35,24,15,.35); } .lp-title:focus { outline: none; border-bottom-color: var(--lc); background: rgba(255,241,92,.35); }
.lp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px 16px; }
.lp-kind button { display: inline-flex; align-items: center; gap: .3em; }
.lp-opts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 8px 16px; font-weight: 700; font-size: var(--step--1); }
.lp-opt { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .lp-opt input { width: 20px; height: 20px; accent-color: #23180f; }
.lp-items .li-row { font-size: 17px; line-height: 24px; min-height: 30px; padding: 3px 4px 2px 0; }
.lp-items .li-row:hover { background: rgba(35,24,15,.04); }
.lp-items .li-row.is-head .li-text { font-size: 23px; line-height: 26px; }
.li-tools { flex: none; display: inline-flex; gap: 2px; opacity: .35; transition: opacity .15s; }
.li-row:hover .li-tools, .li-row:focus-within .li-tools { opacity: 1; }
@media (hover: none) { .li-tools { opacity: .8; } }
.li-tool { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1.5px solid rgba(35,24,15,.5); border-radius: 7px; background: #fffdf7; color: #23180f; cursor: pointer; }
.li-tool .icon { width: 15px; height: 15px; }
.li-tool[aria-pressed="true"] { background: #23180f; color: #fff15c; border-color: #23180f; }
.li-tool:hover, .li-tool:focus-visible { background: #fff15c; color: #23180f; }
.lp-add { margin: 10px 0 0 16px; flex-wrap: wrap; } .lp-add input { height: 38px; font-size: 17px; }
.lp-tips { margin: 14px 0 0 16px; } .lp-tips kbd { font-weight: 700; font-size: .85em; font-family: inherit; padding: 2px 5px; border: 1.5px solid #23180f; border-radius: 4px; background: #fffdf7; color: #23180f; } /* dark ink on its own light key, whatever the hint's colour (dark theme) */
.lp-del { margin: 14px 0 0 16px; }
.lp-sheet .paper-lined, .lp-sheet.paper-lined { background-position: 0 0, 0 10px; }
.lp-paper-demo { display: inline-block; width: 22px; height: 22px; border: 1.5px solid #23180f; border-radius: 3px; background-color: #fffdf4; vertical-align: middle; }
.lp-tpls .lp-tpl > span { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.lp-tpl .lp-book-ico { background: var(--lc); color: #fff; }
.lp-tpl strong, .lp-tpl small { grid-column: 2; }
.li-row .m-grip, .li-row .m-grip:active { border: 0; box-shadow: none; border-radius: 4px; transform: none; }
.ob-notepad .li-row .m-grip { opacity: .55; }
.lp-sheet input.lp-title { border: 0; border-bottom: 2px dashed transparent; border-radius: 0; background: transparent; box-shadow: none; min-height: 0; font: 700 clamp(26px, 4vw, 36px)/1.1 var(--font-hand, cursive); }
.lp-sheet input.lp-title:hover { border-bottom-color: rgba(35,24,15,.35); }
.lp-sheet input.lp-title:focus { border-bottom-color: var(--lc); background: rgba(255,241,92,.35); outline: none; }
.lp-tips kbd { display: inline-block; width: auto; height: auto; min-width: 0; line-height: 1.2; box-shadow: none; vertical-align: baseline; }

/* ---------- My goals: a little mountain per goal (trail of steps to the flag) and a tag that says what it is ---------- */
.ob-trail { --gc: #2f6f9d; display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 4px 8px; align-items: stretch; justify-content: stretch; padding: 2px 6px 4px 2px; }
.ob-trail.is-big { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 46%) minmax(0, 1fr) auto; }
.ob-trail .gt-scene { grid-row: 1 / span 2; display: block; min-height: 0; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #bfe6ff, #e6f6ff 70%); border: 2.5px solid #23180f; box-shadow: 0 4px 0 rgba(0,0,0,.2); transition: transform .2s; }
.ob-trail.is-big .gt-scene { grid-row: 1; }
.ob-trail.is-empty .gt-svg { grid-row: 1 / span 2; border-radius: 12px; border: 2.5px solid #23180f; background: linear-gradient(180deg, #bfe6ff, #e6f6ff 70%); }
.ob-trail .gt-scene:hover, .ob-trail .gt-scene:focus-visible { transform: translateY(-2px) rotate(-.6deg); }
.gt-svg { display: block; width: 100%; height: 100%; }
.gt-cloth { transform-box: fill-box; transform-origin: 0 50%; animation: gt-wave 2.4s ease-in-out infinite; }
@keyframes gt-wave { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-6deg) scaleX(.9); } }
.gt-hiker { transition: transform .5s cubic-bezier(.3,1.4,.5,1); }
.gt-hiker > * { animation: gt-bob 1.8s ease-in-out infinite; transform-box: fill-box; }
@keyframes gt-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.2px; } }
.gt-cloud { animation: gt-drift 9s ease-in-out infinite alternate; }
@keyframes gt-drift { from { translate: 0 0; } to { translate: 8px 0; } }
.ob-trail.is-summit .gt-sun { filter: drop-shadow(0 0 4px #ffd23f); }
.ob-trail .gd-card { position: relative; inset: auto; z-index: 1; min-height: 0; overflow: hidden; line-height: 1.25; display: flex; flex-direction: column; gap: 3px; padding: 7px 10px 8px 12px; border-radius: 4px 12px 12px 4px; border: 2.5px solid #23180f; background: #fffdf7; box-shadow: 3px 4px 0 rgba(0,0,0,.2); transform: rotate(.8deg); }
.ob-trail .gd-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--gc); }
.ob-trail .gd-card::after { content: ""; position: absolute; left: -7px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fffdf7; border: 2px solid #23180f; }
.ob-trail.is-big .gd-card { transform: none; border-radius: 12px; }
.ob-trail.is-big .gd-card::after { display: none; }
.ob-trail .gd-title { font-size: 15px; -webkit-line-clamp: 2; }
.ob-trail.is-big .gd-title { font-size: 17px; }
.ob-trail .gd-pct { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.ob-trail .gd-pct .icon { width: 13px; height: 13px; color: var(--gc); }
.ob-trail .gd-steps { font-size: 13px; }
.ob-trail .gd-steps span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
.ob-trail .gd-nav { grid-column: 2; }
.ob-trail.is-big .gd-nav { grid-column: 1; }
.ob-trail.is-empty .gd-card { grid-row: 1 / span 2; justify-content: center; }
.ob-trail .gd-card.is-from-right, .ob-trail .gd-card.is-from-left { transform-origin: 0 50%; }
@media (prefers-reduced-motion: reduce) { .gt-cloth, .gt-hiker > *, .gt-cloud { animation: none; } }
:root[data-motion="reduce"] .gt-cloth, :root[data-motion="reduce"] .gt-hiker > *, :root[data-motion="reduce"] .gt-cloud { animation: none; }
/* on its tool page (the stage) and on phones the mountain gets a bit more room */
.ob-stage .ob-trail { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
.w-grid[data-phone="1"] > .w-goals { grid-row: span 4 !important; }
/* library items on the shelf: the gadget's screen shows the item's own picture */
.gd-screen.is-art { background: #fdf6e6; padding: 2px; } .gd-screen.is-art svg { width: 100%; height: 100%; filter: none; }
/* phones (draft 10, screenshots 14 and 15): the paper tag takes the height its words need (title up to 2 lines, the next step up to 2) and the mountain gets what is left, never under 112px */
.w-grid[data-phone="1"] .ob-trail { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(112px, 1fr) auto auto; }
.w-grid[data-phone="1"] .ob-trail .gd-card { overflow: visible; }
.w-grid[data-phone="1"] .ob-trail .gd-steps span { -webkit-line-clamp: 3; }
.w-grid[data-phone="1"] .ob-trail .gt-scene { grid-row: 1; }
.w-grid[data-phone="1"] .ob-trail .gd-nav { grid-column: 1; }
.w-grid[data-phone="1"] .ob-trail .gd-card { transform: none; border-radius: 12px; }
.w-grid[data-phone="1"] .ob-trail .gd-card::after { display: none; }
.w-grid[data-phone="1"] .ob-trail .gt-svg { height: 100%; }
.ob-trail .gt-scene, .ob-trail.is-empty .gt-svg { background: linear-gradient(180deg, #bfe6ff 0%, #e6f6ff 86%, #9ccf6b 86%, #8cc35b 100%) !important; }
.np-add input::placeholder { color: #6b5a45; opacity: 1; }
/* "Now" and "Next" sit on a little tab above the note, so they never cover the time or the check box */
.ck-row > .tk { overflow: visible; margin-top: 10px; }
.tk .tk-flag { top: -11px; right: 8px; z-index: 2; font-size: 10px; line-height: 16px; border: 1.5px solid #23180f; }
.ck-row > .tk { width: clamp(136px, 19cqw, 178px); }
.tk-top .tk-time { font-size: 12.5px; letter-spacing: -.01em; white-space: nowrap; }

/* ---------- The timer (draft 10, item 23): a kitchen timer with a window you can read across the room ---------- */
.ob-timer { --tmc: #e5484d; --tmc2: #b71c1c; display: flex; flex-direction: row; align-items: flex-end; justify-content: center; gap: 10px; padding: 4px 6px 0; }
.tm-kitchen { position: relative; display: flex; flex-direction: column; align-items: center; width: min(70cqw, 128px); flex: none; }
.ob-timer .ob-go { top: 4px; right: 44px; bottom: auto; }
.tm-top { position: relative; width: 44%; height: 16px; margin-bottom: -4px; z-index: 2; }
.tm-dome { position: absolute; left: 50%; bottom: 2px; width: 30px; height: 15px; margin-left: -15px; border-radius: 15px 15px 2px 2px; background: linear-gradient(180deg, #f3f4f6, #9aa3ad); border: 2px solid var(--ink); border-bottom-width: 3px; transform-origin: 50% 100%; }
.tm-hammer { position: absolute; left: 50%; bottom: 4px; width: 5px; height: 14px; margin-left: 12px; border-radius: 3px; background: #4b5563; border: 1.5px solid var(--ink); transform-origin: 50% 100%; transform: rotate(28deg); }
.tm-dial { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--tmc) 55%, #fff), var(--tmc) 45%, var(--tmc2) 100%); border: 3px solid var(--ink); box-shadow: inset 0 -6px 0 rgba(0,0,0,.18), 0 6px 0 rgba(0,0,0,.25); }
.tm-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.tm-bezel { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 3; }
.tm-track { fill: none; stroke: rgba(0,0,0,.28); stroke-width: 7; }
.tm-prog { fill: none; stroke: #ffd34f; stroke-width: 7; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .9s linear; filter: drop-shadow(0 0 2px rgba(255,211,79,.8)); }
.tm-tick { stroke: rgba(255,255,255,.8); stroke-width: 2; } .tm-tick.is-big { stroke-width: 3; }
.tm-window { position: absolute; left: 50%; top: 50%; width: 72%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 4px; border-radius: 9px; background: #121a2b; border: 2px solid var(--ink); box-shadow: inset 0 2px 8px rgba(0,0,0,.7), inset 0 0 0 1.5px rgba(255,255,255,.08); }
.tm-digits { font: 900 clamp(20px, 22cqw, 34px)/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .02em; color: #ffd34f; text-shadow: 0 0 6px rgba(255,211,79,.75), 0 0 1px #000; font-variant-numeric: tabular-nums; }
.tm-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 800; color: #9fe1ff; letter-spacing: .04em; text-transform: uppercase; }
.tm-btns { display: flex; gap: 6px; margin-top: -8px; z-index: 2; }
.tm-btn { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid var(--ink); background: #fffaf0; color: var(--ink); font: 800 12px/1 var(--font-body, sans-serif); cursor: pointer; box-shadow: 0 2px 0 var(--ink); }
.tm-btn .icon { width: 14px; height: 14px; }
.tm-btn.is-go { width: 38px; height: 38px; background: #35b26d; color: #fff; border-width: 2.5px; } .tm-btn.is-go .icon { width: 18px; height: 18px; }
.tm-btn.is-go[aria-pressed="true"] { background: #ffd34f; color: var(--ink); }
.tm-btn:hover, .tm-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 3px 0 var(--ink); }
.tm-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--ink); }
.tm-btn:focus-visible { outline: 3px solid #29298e; outline-offset: 2px; }
.ob-timer.is-running .tm-digits { color: #a8ff9e; text-shadow: 0 0 7px rgba(140,255,120,.7), 0 0 1px #000; }
.ob-timer.is-done .tm-digits { color: #ff8e90; text-shadow: 0 0 7px rgba(255,120,120,.8), 0 0 1px #000; animation: tm-blink 1s steps(2, start) 6; }
.ob-timer.is-done .tm-dome { animation: tm-rattle .18s linear 14; } .ob-timer.is-done .tm-hammer { animation: tm-hammer .09s linear 28; }
@keyframes tm-blink { to { opacity: .35; } }
@keyframes tm-rattle { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes tm-hammer { 50% { transform: rotate(-26deg); } }
.tm-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-bottom: 36px; }
.tm-words { margin: 0; font-weight: 800; font-size: 13px; color: var(--ink); padding: 3px 8px; border-radius: 8px; background: rgba(255,250,240,.9); }
.tm-quick { display: flex; flex-wrap: wrap; gap: 5px; }
.tm-chip { padding: 2px 9px; border-radius: 999px; border: 2px solid var(--ink); background: #fffaf0; color: var(--ink); font: 800 12px/1.3 var(--font-body, sans-serif); cursor: pointer; box-shadow: 0 2px 0 var(--ink); }
.tm-chip[aria-pressed="true"] { background: #fff1b8; }
.ob-timer.is-wide .tm-kitchen { width: min(40cqw, 128px); }
.ob-timer.is-wide .ob-go { top: auto; right: 8px; bottom: 8px; }
.w-grid[data-phone="1"] .tm-kitchen { width: min(56cqw, 180px); }
.w-grid[data-phone="1"] .ob-timer.is-wide .tm-kitchen { width: min(44cqw, 150px); }
.w-grid[data-phone="1"] .ob-timer .ob-go { top: 6px; left: 8px; right: auto; }
.w-grid[data-phone="1"] .ob-timer.is-wide .ob-go { top: auto; left: auto; right: 8px; bottom: 8px; }
.w-grid[data-phone="1"] .ob-timer { padding-top: 10px; }
.w-grid[data-phone="1"] .tm-digits { font-size: clamp(26px, 15cqw, 46px); }
.w-grid[data-phone="1"] .tm-btn { width: 40px; height: 40px; } .w-grid[data-phone="1"] .tm-btn.is-go { width: 50px; height: 50px; }
@media (prefers-reduced-motion: reduce) { .ob-timer.is-done .tm-digits, .ob-timer.is-done .tm-dome, .ob-timer.is-done .tm-hammer { animation: none; } .tm-prog { transition: none; } }
:root[data-motion="reduce"] :is(.ob-timer.is-done .tm-digits, .ob-timer.is-done .tm-dome, .ob-timer.is-done .tm-hammer) { animation: none; }
:root[data-motion="reduce"] .tm-prog { transition: none; }