/*
 * The home silo's look: the room as drawn, the figure, the pot and its moments, the bookshelf's menu, the
 * names over the room, the first launch, and the room's motion.
 *
 * Input:     the token custom properties written by web/index.html, over the shared frame of ui/styles.css.
 * Transform: the rules ui/styles.css held for the home's screens, moved here byte for byte and in the order
 *            they were written (design/HEARTH_SHARED_FILES.md, 2026-10-16 판정 절 '화면 모양',
 *            WO-HEARTH-SHARED-SPLIT-001). Since then the design system's home piece
 *            (design/HEARTH_DESIGN_SYSTEM.md, 2026-10-22 판정 절 조각 4, WO-HEARTH-DS-HOME-001) sets their
 *            weights and leading, the bookshelf menu's corners and its buttons' depth from the token layer.
 * Output:    how the home silo's parts look.
 * Consumer:  web/index.html, which links ui/styles.css, then this file, then ui/memory-styles.css.
 * Validation: architecture-regression.test.js holds the name rule below; dot-room.test.js, home-kit.test.js
 *             and the other home checks read every stylesheet the entry page links, in its order;
 *             home-screen-style.test.js holds this file's letters, corners and depth to the tokens.
 *
 * The name rule, a contract between the two silos: every selector here names at least one word of the
 * home's own — an id, a class, an [attribute=value] or a @keyframes name that ui/styles.css does not use —
 * and no word of the memory's (one ui/memory-styles.css uses and ui/styles.css does not). A bare element
 * or the shared frame alone is never styled from here; that is ui/styles.css, which both silos share.
 */

#stage { position: absolute; inset: 0; z-index: 1; }
#stage svg { display: block; }

/* A room control shows where it can be pressed only when focused by keyboard. */
.room-control { cursor: pointer; }
.room-control:focus { outline: none; }
.room-control:focus-visible rect.hit {
  stroke: var(--d-primary-edge);
  stroke-width: 2px;
  stroke-dasharray: 4 3;
}

#onboarding {
  position: absolute; inset: 0; z-index: 6;
  background: var(--c-plaster);
  display: flex; align-items: center; justify-content: center;
}
.pane { padding: var(--s-xl); display: flex; flex-direction: column; gap: var(--s-md); text-align: center; }
.pane h1 { margin: 0; font: var(--text-display); }
.pane p { margin: 0; color: var(--c-ink-soft); }
.character-choice { display: flex; gap: var(--s-md); justify-content: center; }
.character-choice button { padding: var(--s-sm); height: auto; min-width: 48px; }

/*
 * The turn place inside 설정 (design/HEARTH_CHILD_ACCOUNT.md, 2026-10-10 Steward 판정 — 아이 계정 설계 확정,
 * CT-2). Each account is a row of its figure, its name, and the one press to do with it — in a column with a
 * gap, so no two touch rectangles overlap. Every button keeps the 48px floor from styles.css, and is given a
 * matching min-width so a short label is still a full target.
 */
.turn-place { display: flex; flex-direction: column; gap: var(--s-sm); margin: var(--s-sm) 0; }
.turn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-sm); }
.turn-row { display: flex; align-items: center; gap: var(--s-sm); flex-wrap: wrap; }
.turn-figure { flex: 0 0 auto; display: inline-flex; }
.turn-figure svg { image-rendering: pixelated; }
.turn-name { flex: 1 1 auto; min-width: 6rem; }
.turn-here { color: var(--c-ink-soft); margin-left: var(--s-sm); font-size: var(--t-caption); }
.turn-row button, .turn-make, .turn-mine button { min-width: 48px; padding: 0 var(--s-md); }
.turn-care { display: flex; gap: var(--s-sm); flex-wrap: wrap; align-items: center; }
.turn-rest { color: var(--c-ink-soft); }
.turn-mine { display: flex; flex-direction: column; gap: var(--s-sm); margin-top: var(--s-sm); }
.turn-guardians { margin: 0; color: var(--c-ink); }
.child-make .character-choice button { min-height: 48px; }

.node-label {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: var(--w-bold);
  fill: var(--d-ink);
  paint-order: stroke;
  stroke: var(--d-chip);
  stroke-width: 4px;
}
/* Names sit over the character and must never take a tap meant for the floor. */
.room-labels { pointer-events: none; }

/*
 * The pot's window (2026-09-30 Steward 판정 — 화분 창): its words in the room's
 * own type. The fill is written on each line from the tokens; only the face
 * is set here. The words never catch a tap of their own: inside a button the
 * button takes it, outside one the room does.
 */
.pot-window-text {
  font-family: var(--font-family);
  font-weight: var(--w-bold);
  pointer-events: none;
}

/*
 * The bookshelf's menu: two things to do, big enough for a thumb, and a way to
 * put it away. It opens when the member is standing at the shelf.
 *
 * It hangs on the wall above the shelf, not across the floor (ui/app.js
 * shelfMenuPlacement writes top, left, width, max-height and --tail-x). `top`
 * is where the card's lower edge sits and the card grows upwards from there,
 * which is what the translate is for. The stepped tail points down at the
 * shelf and, like the card, stops short of the doors, the shelf and the floor,
 * so a press anywhere in the room still reaches the room.
 *
 * The card is a sheet that does not sit on the screen's edge, so all four of
 * its corners take the rounded board's sheet corner (--corner-sheet). The tail
 * meets the card on the straight run of its lower edge, clear of the corners.
 *
 * The box-shadow below is the card from before the kit and no longer shows: the
 * kit's rule further down paints over it, outer shadow and all. It is that old
 * shadow colour's last use, which dot-room.test.js (an invariant regression)
 * still asks a stylesheet to make, so it stays until a Steward says what that
 * check should ask now (WO-HEARTH-DS-HOME-001 delivery report).
 */
#sheet[data-placement="shelf"] {
  right: auto;
  bottom: auto;
  transform: translateY(-100%);
  overflow: visible;
  display: flex;
  flex-direction: column;
  border-radius: var(--corner-sheet);
  box-shadow: inset 0 0 0 var(--d-grid) var(--d-frame-wood),
    calc(var(--d-grid) * 2) calc(var(--d-grid) * 2) 0 0 var(--d-shadow);
}
#sheet[data-placement="shelf"] > .sheet-body {
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-sm) var(--s-md);
  gap: var(--s-xs);
}
#sheet[data-placement="shelf"]::before,
#sheet[data-placement="shelf"]::after {
  content: '';
  position: absolute;
  background: var(--d-frame-wood);
  pointer-events: none;
}
#sheet[data-placement="shelf"]::before {
  top: 100%;
  left: calc(var(--tail-x) - var(--d-grid) * 4);
  width: calc(var(--d-grid) * 8);
  height: calc(var(--d-grid) * 2);
}
#sheet[data-placement="shelf"]::after {
  top: calc(100% + var(--d-grid) * 2);
  left: calc(var(--tail-x) - var(--d-grid) * 2);
  width: calc(var(--d-grid) * 4);
  height: calc(var(--d-grid) * 2);
}
.shelf-menu h2 { font-size: var(--t-body); }
.shelf-menu .row { flex-wrap: nowrap; }
/*
 * A button's own step above and below its words only shows when the phone's larger text wraps them, and
 * keeps them off the button's foot, as the shared buttons do; at the usual size the 56 px floor sets the height.
 */
.shelf-menu .row button { flex: 1 1 0; min-height: 56px; padding: var(--s-sm); }
.shelf-menu .row button.shelf-menu-close { flex: 0 0 auto; padding: var(--s-sm) var(--s-md); }

/*
 * The room is a pixel grid and must not be resampled.
 *
 * `crispEdges` on the SVG covers the shapes; this covers the case where a
 * browser decides to composite the whole layer at a fractional offset.
 */
#stage svg { image-rendering: pixelated; }
.character-choice button svg { image-rendering: pixelated; }
/*
 * A picture file is not a grid of art cells (design/HEARTH_ART_DIRECTION.md,
 * 그림 조각 1): the room's plate and the pictures of the door, the bookshelf
 * and the pot are made larger than they are drawn and brought down to the
 * screen smoothly. Left to `pixelated` a picture brought down drops rows and
 * columns and comes out ragged. What the code draws on the grid stays crisp.
 */
#stage svg image.home-art { image-rendering: auto; }
/* The figure is a picture file too (그림 조각 2), in the room and where a member first chooses one. */
.character-choice button svg image.home-art { image-rendering: auto; }

/* ---- motion: two loops, four tap-armed responses, and an off switch ---- */

@keyframes hearthGlow { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.85; } }
@keyframes ambientDust { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes recentMemoryBreath { 0%, 100% { opacity: 1; } 50% { opacity: 0.82; } }
@keyframes destinationPulse {
  0% { opacity: 0.4; }
  50% { opacity: 0.14; }
  100% { opacity: 0.4; }
}
@keyframes doorTransition {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

.hearth-glow { animation: hearthGlow 5200ms ease-in-out infinite; }
.ambient-dust { animation: ambientDust 11000ms ease-in-out infinite; }
.node.recent-memory-breath { animation: recentMemoryBreath 1400ms ease-in-out 2; }
.destination-pulse { animation: destinationPulse 900ms ease-in-out infinite; }
.stage-svg.door-transition { animation: doorTransition 420ms ease-out 1; }
/*
 * walk_transition is carried by the gait frames, not by a CSS tween.
 *
 * An interpolated transform was the obvious implementation and is the wrong
 * one: `.geometry` holds the placement ui/layout.js computed, and easing it
 * would put the drawing somewhere the hit rectangle is not for the duration of
 * every step — which the browser harness measures and would rightly fail. The
 * figure changes pose and position together, once per step, and the alternating
 * stride is what reads as walking.
 */
.node.role-CHARACTER.walk-transition { opacity: 1; }

/*
 * Reduced motion removes every loop and every response animation. State still
 * changes and stays readable: a walk arrives at once, the destination mark is
 * still drawn, the turn still applies, and the door crossing still happens —
 * only the movement between two legible states is removed.
 */
[data-reduced-motion="true"] .hearth-glow,
[data-reduced-motion="true"] .ambient-dust,
[data-reduced-motion="true"] .node.recent-memory-breath,
[data-reduced-motion="true"] .destination-pulse,
[data-reduced-motion="true"] .door-transition,
[data-reduced-motion="true"] .node.walk-transition { animation: none; }
[data-reduced-motion="true"] .node.role-CHARACTER { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .hearth-glow, .ambient-dust, .node.recent-memory-breath,
  .destination-pulse, .door-transition, .node.walk-transition { animation: none; }
  .node.role-CHARACTER { transition: none; }
}

/*
 * The pot's own moments (TOKENS.motion.pot; design/HEARTH_GAME_LAYER.md 단계 1:
 * 물 주기 손맛, 등장 연출 문법, 화분 둘레 밤낮 연출).
 *
 * Each class is drawn only in the paint that plays it and plays once. The
 * resting style of each is where its moment ends — the can gone, the old
 * picture gone, the new one there, the fireflies still — so with no animation
 * at all the pot simply shows the end. Every step is a whole switch or a
 * whole art pixel (steps), never a blur between two, and none of it moves a
 * touch rectangle: the drawing moves inside the pot node, the hit does not.
 *
 * The grammar: the water falls (0-360 ms), a light (360-720 ms), the new
 * picture (720-1080 ms). A watering that grows nothing new sways the plant
 * once the water has landed instead.
 */
.pot-stream { opacity: 0; animation: potStream 600ms steps(1, end) 1 both; }
.pot-drip { opacity: 0; animation: potDrip 360ms steps(1, end) 1 both; }
.pot-drip-2 { animation-delay: 120ms; }
.pot-drip-3 { animation-delay: 240ms; }
.pot-sway { animation: potSway 480ms steps(1, end) 360ms 1 both; }
.pot-appear-before { opacity: 0; animation: potBefore 720ms steps(1, end) 1 both; }
.pot-appear-light { opacity: 0; animation: potLight 360ms steps(1, end) 360ms 1 both; }
.pot-appear-after { animation: potAfter 360ms steps(3, end) 720ms 1 both; }
.pot-firefly-flight { animation: potFirefly 1200ms steps(1, end) 2 both; }
.pot-firefly-2.pot-firefly-flight { animation-delay: 200ms; }
.pot-firefly-3.pot-firefly-flight { animation-delay: 400ms; }

@keyframes potStream { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes potDrip { 0% { opacity: 0; } 34% { opacity: 1; } 100% { opacity: 0; } }
@keyframes potSway {
  0% { transform: translateX(0); }
  25% { transform: translateX(1px); }
  50% { transform: translateX(0); }
  75% { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}
@keyframes potBefore { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes potLight { 0% { opacity: 0; } 1% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 0; } }
@keyframes potAfter { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes potFirefly {
  0% { transform: translate(0, 0); opacity: 1; }
  25% { transform: translate(1px, -1px); opacity: 0.55; }
  50% { transform: translate(0, -2px); opacity: 1; }
  75% { transform: translate(-1px, -1px); opacity: 0.55; }
  100% { transform: translate(0, 0); opacity: 1; }
}

[data-reduced-motion="true"] .pot-stream,
[data-reduced-motion="true"] .pot-drip,
[data-reduced-motion="true"] .pot-sway,
[data-reduced-motion="true"] .pot-appear-before,
[data-reduced-motion="true"] .pot-appear-light,
[data-reduced-motion="true"] .pot-appear-after,
[data-reduced-motion="true"] .pot-firefly-flight { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .pot-stream, .pot-drip, .pot-sway, .pot-appear-before, .pot-appear-light,
  .pot-appear-after, .pot-firefly-flight { animation: none; }
}

/* ---- the kit: the names over the room and the bookshelf's menu --------- */

/*
 * The kit's rules for the home's parts (design/HEARTH_ART_DIRECTION.md, 2026-10-10 판정 — 그림 조각 3,
 * AQ-12), as they stood in ui/styles.css under its own kit heading; the header's chips stay there with the
 * shared frame. Every rule from here to the end of the file names `.node-label`,
 * `#sheet[data-placement="shelf"]` or `.shelf-menu …` and nothing else.
 */

/*
 * A name over the room: the kit's ink, edged in the paper of the plate it is
 * written on (ui/home-stage.js draws the plate with the thing it names). Over
 * the plate the edge does not show; over a member standing in front of the
 * plate it is what keeps the name readable, as before.
 */
.node-label {
  fill: var(--d-kit-ink);
  stroke: var(--d-kit-paper);
  stroke-linejoin: round;
}

/*
 * The bookshelf's menu: the kit's frame around a paper card, in the place and
 * at the size it had. The frame is four inset shadows — the outline, the
 * wood's light line along the top and its dark one along the foot, the wood,
 * and the frame's shadow on the paper — inside the card's own padding.
 *
 * The tail is the frame's wood inside its outline, joined to the frame where
 * it leaves the card, and ends four grid steps under the card as it did.
 *
 * The menu's buttons take the design system's depth tokens (--e-…, ui/tokens.js
 * `dot.depth`), whose layers are the ones written here by hand before them. The
 * frame and the tail are still written by hand: the token layer has no framed
 * card and no tail to take (WO-HEARTH-DS-HOME-001 delivery report).
 */
#sheet[data-placement="shelf"] {
  background: var(--d-kit-paper);
  box-shadow: inset 0 0 0 var(--d-grid) var(--d-kit-outline),
    inset 0 calc(var(--d-grid) * 2) 0 0 var(--d-kit-wood-light),
    inset 0 calc(var(--d-grid) * -2) 0 0 var(--d-kit-wood-dark),
    inset 0 0 0 calc(var(--d-grid) * 3) var(--d-kit-wood),
    inset 0 calc(var(--d-grid) * 4) 0 0 var(--d-kit-paper-shade);
}
#sheet[data-placement="shelf"]::before,
#sheet[data-placement="shelf"]::after {
  background: var(--d-kit-wood);
  box-shadow: inset var(--d-grid) 0 0 0 var(--d-kit-outline),
    inset calc(var(--d-grid) * -1) 0 0 0 var(--d-kit-outline),
    inset 0 calc(var(--d-grid) * -1) 0 0 var(--d-kit-outline);
}
#sheet[data-placement="shelf"]::before {
  top: calc(100% - var(--d-grid));
  height: calc(var(--d-grid) * 3);
}
#sheet[data-placement="shelf"]::after {
  top: calc(100% + var(--d-grid));
  height: calc(var(--d-grid) * 3);
}
.shelf-menu h2 { color: var(--d-kit-ink); }
.shelf-menu .row button {
  background: var(--d-kit-paper-light);
  color: var(--d-kit-ink);
  box-shadow: var(--e-paper-raised);
}
.shelf-menu .row button:active { box-shadow: var(--e-paper-pressed); }
/* 기록 남기기 is the one press here that makes something happen. */
.shelf-menu .row button.primary {
  background: var(--d-kit-act);
  color: var(--d-kit-ink-light);
  box-shadow: var(--e-act-raised);
}
.shelf-menu .row button.primary:active { box-shadow: var(--e-act-pressed); }