/* Today: Sandy's room (approved preview: docs/previews/today-room-live.html).
   One scene band with one floor line; everything stands on it. The tall floor lamp on the left is the room's light and
   the sofa is her bed (both switches: assets/today-room.js), the page title sits to the lower right of its shade, Sandy sits inside the sofa with her line
   to her upper right, and the fridge at the right end opens the snack row under the floor. Phone sizes are the base;
   the room grows when the page is ≥560px wide and moves beside the plan at ≥900px (container queries on .today-app).
   The line art is fixed brown, so in dark mode it is turned light with --room-art-filter. */

:root {
  --room-art-filter: brightness(1);      /* light: unchanged (not `none`, so a drop-shadow can be appended on hover) */
  --room-light: 255 200 120;             /* the lamp's warm light, as r g b */
  --room-light-a: .42;
  --room-ink: #7a5a44;                   /* the drawings' own brown, for the pull chain */
}
:root[data-page-tone="dark"],
:root[data-theme="dark"] {
  --room-art-filter: invert(1) hue-rotate(180deg) brightness(.92) saturate(.9);
  --room-light: 255 226 170;
  --room-light-a: .25;
  --room-ink: #b39478;
}

.today-app { container: today / inline-size; }
.today-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; }
.today-layout > .welcome-note { margin: 0 0 12px; }
.today-layout > .plan { margin-top: 22px; }

/* ── Scene ── */
.today-hero { position: relative; isolation: isolate; width: 100%; max-width: 420px; height: 290px; margin: 0; }
.today-hero > * { position: absolute; margin: 0; }
.room-floor { left: -24px; right: 0; bottom: 0; height: 1.5px; background: var(--color-line-strong); box-shadow: 0 6px 0 var(--tint-3); pointer-events: none; }
.room-art { pointer-events: none; user-select: none; filter: var(--room-art-filter); transition: filter .5s ease, opacity .5s ease; }

/* one soft cone from the shade's mouth, leaning a little toward the fridge, and the bulb glowing inside the shade */
/* (phone: the preview's 384px cone box cut to its lit 88%, 338px, so it never runs past a 360px screen; same shape) */
.room-beam { --cone: polygon(32.3% 5.8%, 43.2% 0, 100% 100%, 20.5% 100%); --cone-at: 37.8% 2%; --cone-rx: 125%; left: -10px; bottom: 0; width: 338px; height: 233px; filter: blur(7px); transition: opacity .5s ease; pointer-events: none; z-index: -1; }
.room-beam::before { content: ""; position: absolute; inset: 0; clip-path: var(--cone); background: radial-gradient(ellipse var(--cone-rx) 125% at var(--cone-at), rgb(var(--room-light) / var(--room-light-a)), rgb(var(--room-light) / calc(var(--room-light-a) * .5)) 40%, rgb(var(--room-light) / calc(var(--room-light-a) * .15)) 78%, transparent 100%); }
.room-bulb { left: 102px; bottom: 212px; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, rgb(var(--room-light) / calc(var(--room-light-a) * 2.2)), rgb(var(--room-light) / calc(var(--room-light-a) * .8)) 45%, transparent 70%); transition: opacity .5s ease; pointer-events: none; }
.room-lamp { left: -40px; bottom: -2px; width: 178px; height: 290px; }
/* the pull chain hangs from the shade's lower rim: the visible cue that the lamp is a switch */
.room-chain { left: 107px; bottom: 184px; width: 1px; height: 32px; background: var(--room-ink); pointer-events: none; transform-origin: top; transition: transform .25s ease; }
.room-chain::after { content: ""; position: absolute; left: -3px; bottom: -6px; width: 7px; height: 7px; border-radius: 50%; background: var(--room-ink); }
/* the whole lamp is the switch: the button covers the pole and base (stopping short of Sandy, so a tap on her still pets her),
   and its ::before reaches right over the shade and the chain */
.room-lamp-switch { left: -14px; bottom: 0; z-index: 1; width: 64px; height: 100%; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.room-lamp-switch::before { content: ""; position: absolute; left: 100%; top: 0; width: 100px; height: 130px; }
.room-lamp-switch:active ~ .room-chain { transform: scaleY(1.2); }
/* a press anywhere on the lamp lights the whole lamp up for a moment */
.room-lamp-switch:active ~ .room-lamp { filter: var(--room-art-filter) drop-shadow(0 0 7px rgb(var(--room-light) / .95)); transition: none; }

/* the page title, to the lower right of the shade: eyebrow at the top, 今天 and the countdown above Sandy's line */
.app .today-hero > .page-header.room-header { left: 150px; right: 0; top: 34px; bottom: 156px; display: flex; flex-direction: column; margin: 0; }
.room-header .page-eyebrow { margin: 0; font-size: var(--text-xs); line-height: 18px; }
.room-header .page-title { margin: auto 0 4px; font-size: 28px; line-height: 34px; }
.room-header .countdown { margin: 0; font-size: 14px; line-height: 22px; white-space: nowrap; }
.room-header .countdown .days { margin: 0 4px; font-size: 18px; line-height: 22px; }

.room-sofa { left: 52px; bottom: -1px; z-index: 1; width: 190px; height: 104px; }
/* the sofa is her bed: the button lies over the sofa drawing (same box), under Sandy, so a tap on her still pets her */
.room-sofa-switch { left: 52px; bottom: -1px; z-index: 1; width: 190px; height: 104px; padding: 0; border: 0; border-radius: 18px; background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.room-sofa-switch:active ~ .room-sofa { filter: var(--room-art-filter) drop-shadow(0 0 7px rgb(var(--room-light) / .95)); transition: none; }
.today-hero .today-sandy { left: 90px; bottom: 20px; z-index: 2; width: 111px; height: 111px; transition: filter .5s ease; }
img.today-sandy { object-fit: contain; }
/* her sleeping pose's z z z (assets/sandy.css), at a readable size */
.today-hero .today-sandy.sandy-sprite-shell::after { font-size: 12px; }

/* her line: a soft cream bubble to her upper right, never more than two lines (it would reach the title or the fridge) */
/* (the top and bottom padding is a border in the bubble's colour, so a clamped third line can't peek through it) */
.today-hero .sandy-line { left: 212px; bottom: 96px; z-index: 3; max-width: 146px; padding: 0 12px; border-block: 6px solid var(--note-cream); border-radius: 14px; background: var(--note-cream); color: var(--ink-2); font-size: 15px; line-height: 24px; text-wrap: balance; line-break: strict; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* the tail is its own element beside the bubble (the two-line clamp clips anything drawn outside the bubble) */
.sandy-line-tail { left: 208px; bottom: 106px; z-index: 3; width: 10px; height: 10px; background: var(--note-cream); transform: rotate(45deg); pointer-events: none; }
/* asleep: a quiet narration line instead of a bubble */
.today-hero .sandy-line.is-narration { border-color: transparent; background: transparent; color: var(--muted); }
.today-hero .sandy-line.is-narration + .sandy-line-tail { display: none; }

/* ── The fridge is the snack button; open, it shows its shelves (decoration) and the snack row appears under the floor ── */
.room-fridge { right: -2px; bottom: -1px; z-index: 2; width: 62px; height: 96px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.room-fridge img { display: block; width: 100%; height: 100%; }
.room-fridge .room-fridge-open, .room-fridge.is-open .room-fridge-closed { display: none; }
.room-fridge.is-open .room-fridge-open { display: block; }
.room-fridge.is-open { right: -2px; bottom: -1px; width: 116px; height: 100px; }
.room-fridge-shelves { position: absolute; inset: 0; font-size: 11px; line-height: 1; pointer-events: none; }
.room-fridge:not(.is-open) .room-fridge-shelves { display: none; }
.room-fridge-shelves span { position: absolute; left: 7%; width: 45%; overflow: hidden; font-size: 10px; letter-spacing: 0; text-align: center; white-space: nowrap; }
.room-fridge-shelves span:nth-child(1) { top: 22%; }
.room-fridge-shelves span:nth-child(2) { top: 45%; }
.room-fridge-shelves span:nth-child(3) { top: 63%; }

/* hover / focus: the lamp and the fridge glow a little */
@media (hover: hover) {
  .room-lamp-switch:hover ~ .room-lamp, .room-sofa-switch:hover ~ .room-sofa, .room-fridge:hover img { filter: var(--room-art-filter) drop-shadow(0 0 6px rgb(var(--room-light) / .9)); }
}
.room-lamp-switch:focus-visible ~ .room-lamp, .room-sofa-switch:focus-visible ~ .room-sofa, .room-fridge:focus-visible img { filter: var(--room-art-filter) drop-shadow(0 0 6px rgb(var(--room-light) / .9)); }
.room-lamp-switch:focus-visible, .room-sofa-switch:focus-visible, .room-fridge:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }

/* ── Lamp off (html.room-lamp-off, assets/today-room.js): the light goes, nothing else; she sleeps only from the sofa ── */
.room-lamp-off .room-beam, .room-lamp-off .room-bulb { opacity: 0; }
.room-lamp-off .room-lamp { opacity: .8; }
/* ── Asleep (html.sandy-asleep, assets/sandy.js): only the room dims; the title, her line and the plan stay as they are ── */
.sandy-asleep .room-sofa, .sandy-asleep .room-fridge img { filter: var(--room-art-filter) saturate(.85) brightness(.96); }
.sandy-asleep .today-hero .today-sandy { filter: saturate(.85) brightness(.96); }

/* ── Snack row: in the flow under the floor, 44px cells, everyday snacks first, earned treats after with a count ── */
.room-tray { min-width: 0; }
.room-tray .sandy-pack.is-inline { width: auto; max-width: none; margin: 16px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.room-tray .sandy-pack.collapsed { display: none; }
.room-tray .sandy-pack-list { flex-wrap: wrap; gap: 6px; overflow: visible; padding: 8px 0 0; -webkit-mask-image: none; mask-image: none; }
.room-tray .sandy-snack, .room-tray .sandy-snack.is-special { border: 1px solid var(--color-line); border-radius: 12px; background: var(--surface); font-size: 22px; line-height: 1; }
.room-tray .sandy-snack .sandy-count { top: -7px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--color-primary); color: var(--color-on-primary); font-size: 12px; font-weight: 600; line-height: 20px; }
.room-tray .sandy-pack-hint { display: none; }

@media (prefers-reduced-motion: reduce) {
  .room-art, .room-beam, .room-bulb, .room-chain, .today-hero .today-sandy { transition: none; }
}

/* very narrow phones: the countdown drops its greeting; her line gets a little more room */
@media (max-width: 374px) {
  .room-header .time-hello { display: none; }
  .today-hero .sandy-line { left: 206px; max-width: calc(100% - 206px); padding: 0 10px; font-size: 14px; line-height: 22px; }
  .room-fridge.is-open { width: 92px; height: 80px; }
  .room-sofa, .room-sofa-switch { left: 50px; width: 176px; height: 96px; }
  .sandy-line-tail { left: 202px; }
}

/* phones in English: 「Good afternoon · JLPT in 55 days」 is too long for the room, so the greeting goes */
@container today (max-width: 559px) {
  :root[lang="en"] .room-header .time-hello { display: none; }
}

/* ── Wider pages: the room at full size ── */
@container today (min-width: 560px) {
  .today-hero { max-width: 560px; height: 362px; }
  .room-beam { --cone: polygon(22.4% 3.4%, 30.7% 0, 88% 100%, 18% 100%); --cone-at: 26.4% 1.5%; --cone-rx: 110%; width: 572px; height: 290px; }
  .room-bulb { left: 122px; bottom: 272px; width: 38px; height: 38px; }
  .room-lamp { left: -60px; bottom: -3px; width: 228px; height: 371px; }
  .room-chain { left: 129px; bottom: 236px; height: 40px; }
  .room-lamp-switch { left: -19px; width: 92px; }
  .room-lamp-switch::before { width: 104px; height: 154px; }
  .app .today-hero > .page-header.room-header { left: 178px; top: 66px; bottom: 196px; }
  .room-header .page-title { margin: auto 0 6px; font-size: 34px; line-height: 42px; }
  .room-header .countdown { font-size: 16px; line-height: 26px; }
  .room-header .countdown .days { font-size: 22px; line-height: 26px; }
  .room-sofa, .room-sofa-switch { left: 76px; bottom: -1px; width: 244px; height: 134px; }
  .today-hero .today-sandy { left: 127px; bottom: 26px; width: 143px; height: 143px; }
  .today-hero .sandy-line { left: 300px; bottom: 128px; max-width: 250px; padding: 0 16px; border-block-width: 7px; font-size: 17px; line-height: 26px; }
  .sandy-line-tail { left: 296px; bottom: 140px; }
  .room-fridge { right: -3px; bottom: -1px; width: 79px; height: 122px; }
  .room-fridge.is-open { right: -3px; bottom: -1px; width: 150px; height: 130px; }
  .room-fridge-shelves span { font-size: 14px; }
}
/* ── Desktop: the room on the left, the plan on the right with its bottom on the floor line, the snacks under the room ── */
@container today (min-width: 900px) {
  .today-layout { grid-template-columns: 560px minmax(0, 1fr); grid-template-areas: "note note" "room plan" "tray ."; column-gap: 40px; }
  .today-layout > .welcome-note { grid-area: note; }
  .today-hero { grid-area: room; }
  .room-tray { grid-area: tray; }
  .today-layout > .plan { grid-area: plan; margin: 0; }
}