/*
 * Panel and chrome styling. The room itself is drawn by ui/home-stage.js and ui/dot-scene.js.
 *
 * Input:     the token custom properties ui/tokens.js cssVariables() writes, through web/index.html.
 * Transform: lay out the one-line header with its settings button, the stage
 *            and the sheet as a portrait phone surface, and paint every part
 *            both silos share — button, chip, field, sheet, note, toast — out
 *            of the design system's tokens. There is no action bar since
 *            Slice A, and no test drawer or member chip since Slice B.
 * Output:    the visual chrome around the room.
 * Consumer:  web/index.html.
 * Validation: verification/hearth-memory-home-prototype/dot-room.test.js checks
 *             this file writes no transform on .geometry and keeps the hidden
 *             rule, layout-viewport.test.js owns every rectangle a finger
 *             meets, and home-chrome.test.js holds every part to the tokens.
 *
 * One rule with teeth: nothing here may set a transform on `.geometry`. That
 * node carries the placement scale ui/layout.js computed, and a stylesheet
 * writing over it would move artwork away from its hit rectangle while every
 * in-process measurement still passed. Interaction states go on `.node`.
 */

* { box-sizing: border-box; }

/*
 * The `hidden` attribute has to win.
 *
 * Every panel below sets an explicit `display`, and a class or id rule outranks
 * the user-agent's `[hidden] { display: none }` — so `element.hidden = true` was
 * silently doing nothing and the onboarding pane stayed painted on top of the
 * room. The screenshot evidence caught it; this is the fix, and
 * dot-room.test.js asserts the rule is still here.
 */
[hidden] { display: none !important; }

/*
 * The chrome is painted out of the room's own tin, as one kit.
 *
 * Round 3 chose the dot direction, and a white button with a soft shadow
 * floating on a pixel room is the giveaway that the two were made by
 * different hands. So every part here is the kit the header first wore
 * (design/HEARTH_DESIGN_SYSTEM.md, 2026-10-22 판정 절, 조각 3): its depth is one
 * depth token — an outline, a light line where the light lands, its face and a
 * deeper line under it, whole grid cells drawn inside the box (--e-…) — its
 * corners are a corner role of the rounded board the Founder chose
 * (--corner-…), its letters a type role (--text-…), and its colours an ink on
 * a ground the tokens say may carry it (--ink-…, --ground-…). Nothing here is
 * composed by hand and nothing is cast outside a box: the offset shadow the
 * chrome used to throw is gone, so no part changed its size or its place.
 *
 * Honest limit, stated rather than hidden: the room is drawn on the art grid
 * and the Korean here is rendered by the OS font at whatever size the phone
 * chooses. The candidate drew its labels into the same low-resolution buffer as
 * the room; the product keeps real text so the controls stay real controls, and
 * a hand-authored Korean dot font is not in this delivery.
 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--d-wall);
  color: var(--d-ink);
  font-family: var(--font-family);
  font-size: var(--t-body);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#app {
  position: relative;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
}

/* ---- header: where and when, always both ------------------------------- */

/*
 * One line, inside the top reservation, never on the room.
 *
 * The room starts at safe-top + header-band (ui/layout.js roomRectFor), so the
 * header is held to that band: it sits under the status-bar reservation and
 * keeps to one row. Labels that do not fit scroll sideways rather than wrap
 * down onto the back wall. The right end holds 설정, where the test drawer's
 * toggle used to be (Slice B), so nothing new lies across the room.
 */
#header {
  position: absolute;
  top: var(--safe-top); left: 0; right: 0;
  height: calc(var(--header-band) - 4px);
  z-index: 3;
  padding: 0 var(--s-sm);
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  pointer-events: auto;
}

.header-row {
  display: flex; gap: var(--s-sm); align-items: center;
  flex: 1 1 auto; min-width: 0;
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.header-row > * { flex: 0 0 auto; }

/*
 * The header's one button. It meets the touch floor, keeps to the band, and
 * reads as the room's paper-and-ink chip rather than as a floating control.
 */
.header-settings {
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 48px;
  padding: 0 var(--s-md);
  font: var(--text-section);
}

/*
 * The chrome belongs to the same world as the room.
 *
 * "It feels like a student practice app" was partly about the room and partly
 * about this: default white buttons on top of a drawn interior are two art
 * directions on one screen. Every part here is paper in the kit's outline,
 * one terracotta face for the single action that makes something happen,
 * mustard for what is chosen now, and paper with a terracotta word for the
 * one that takes something away.
 */

.chip {
  border: 0;
  border-radius: var(--corner-control);
  padding: var(--s-sm) var(--s-md);
  font: var(--text-caption);
  letter-spacing: var(--tr-tight);
  background: var(--ground-sheet);
  color: var(--ink-text);
  box-shadow: var(--e-paper-flat);
}

.chip.where { font-weight: var(--w-bold); }
.chip.when.is-today { background: var(--ground-chosen); color: var(--ink-text); }
/* A time being looked back on: its small light letters go on the deep terracotta, which carries them (DS-7). */
.chip.when.is-past { background: var(--ground-act-deep); color: var(--ink-light); }

/*
 * A button keeps the 48 px floor; its own step above and below its words only
 * shows when the phone's larger text wraps them, and keeps them off its foot.
 */
button {
  min-height: 48px;
  min-width: 48px;
  padding: var(--s-sm) var(--s-md);
  border: 0;
  border-radius: var(--corner-control);
  background: var(--ground-control);
  color: var(--ink-text);
  font: var(--text-control);
  letter-spacing: var(--tr-tight);
  box-shadow: var(--e-paper-raised);
}

/*
 * A press is a state, not a motion (DS-5): the part stands lower at once —
 * its light line goes dark and its foot thins — with no transition. Each kind
 * of button below names its own pressed depth after its raised one.
 */
button:active { box-shadow: var(--e-paper-pressed); }

/*
 * What a key or a switch is on shows on every part that can be pressed
 * (DS-11): one grid cell of terracotta, one cell off the part. A finger's
 * press does not draw it; a field a member is typing into always does.
 */
button:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/*
 * The one action that makes something happen. Its light letters on
 * terracotta are set large and bold (the `act` role), the size WCAG counts as
 * large text, which that pair carries (DS-7).
 */
button.primary {
  background: var(--ground-act);
  color: var(--ink-light);
  font: var(--text-act);
  box-shadow: var(--e-act-raised);
}
button.primary:active { box-shadow: var(--e-act-pressed); }

/* ---- sheets and panes -------------------------------------------------- */

#sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  max-height: 72%;
  overflow-y: auto;
  background: var(--ground-sheet);
  border-radius: 0;
  box-shadow: var(--e-sheet-edge);
}

/*
 * The sheet that rises from the foot of the screen — writing a record, a
 * card, 기록 보기, 설정 — rounds its two top corners (its foot sits on the
 * screen's edge) and slides up when it opens (DS-5, DS-10).
 *
 * The slide is armed by the press that opens the sheet and ends by itself
 * (`--m-sheet-open`); nothing loops. It is a screen state only: the shell
 * shows the sheet as it always has, and the slide is what the browser does
 * when a hidden element is shown — no key, no event, nothing saved (DS-6).
 * Under reduced motion the duration token is 0 ms wherever the stage says so
 * (ui/tokens.js cssVariables()), and the phone's own setting stops it too: the
 * sheet is simply there.
 *
 * The bookshelf's menu hangs on the wall instead and keeps the corners and the
 * stillness its own stylesheet gives it.
 */
#sheet[data-placement="bottom"] {
  border-radius: var(--corner-sheet) var(--corner-sheet) 0 0;
  animation: sheetRise var(--m-sheet-open) var(--m-sheet-open-ease) 1 backwards;
}
@keyframes sheetRise { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  #sheet[data-placement="bottom"] { animation: none; }
}

/*
 * Fields, in the room's materials.
 *
 * A default browser text box with its 1px inset border was the loudest piece of
 * "student practice app" left on the screen once the room was redrawn, and it
 * appears in the one place a member is being asked to write a memory down. So a
 * field is a well cut into the paper (--e-well), its letters the body's, and
 * what a member writes into a memory is set looser still (the `write` role):
 * the most careful place on the screen (DS-8). While a member types there, its
 * rim turns terracotta and the focus ring stands off it.
 */
input[type="text"], input[type="date"], textarea, select {
  width: 100%;
  min-height: 48px;
  padding: calc(var(--s-sm) + var(--d-grid) * 2) calc(var(--s-md) + var(--d-grid));
  border: 0;
  border-radius: var(--corner-control);
  background: var(--ground-control);
  color: var(--ink-text);
  font: var(--text-body);
  box-shadow: var(--e-well);
}
textarea { min-height: 88px; resize: none; font: var(--text-write); }
input::placeholder, textarea::placeholder { color: var(--ink-soft); opacity: 1; }
input:focus, textarea:focus, select:focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: var(--e-well-focus);
}
.field, label {
  font: var(--text-label);
  color: var(--ink-soft);
  letter-spacing: var(--tr-tight);
}

.sheet-body {
  padding: var(--rhythm-sheet-edge);
  display: flex; flex-direction: column; gap: var(--rhythm-in-group);
  font: var(--text-body);
  letter-spacing: var(--tr-tight);
  color: var(--ink-text);
}

/*
 * The vertical rhythm of a rising sheet, in the rhythm tokens (DS-10): the
 * parts of one group sit `in-group` apart, the lines of one statement `line`
 * apart, and a new group — a field's label, a section, the row of actions —
 * starts `group` below the last. Above the first line the sheet keeps its
 * edge and the four cells of its wooden rim (--e-sheet-edge); at its foot, its
 * own step above the safe area.
 */
#sheet[data-placement="bottom"] > .sheet-body {
  gap: 0;
  padding: calc(var(--rhythm-sheet-edge) + var(--d-grid) * 4) var(--rhythm-sheet-edge)
    calc(var(--rhythm-sheet-foot) + var(--safe-bottom));
}
#sheet[data-placement="bottom"] > .sheet-body > * + * { margin-top: var(--rhythm-in-group); }
#sheet[data-placement="bottom"] > .sheet-body > p + p { margin-top: var(--rhythm-line); }
#sheet[data-placement="bottom"] > .sheet-body > * + label,
#sheet[data-placement="bottom"] > .sheet-body > * + section,
#sheet[data-placement="bottom"] > .sheet-body > * + .row { margin-top: var(--rhythm-group); }
#sheet[data-placement="bottom"] > .sheet-body > label + * { margin-top: var(--rhythm-in-group); }

.sheet-body h2 { margin: 0; font: var(--text-title); color: var(--ink-text); }
.sheet-body h3 { margin: var(--rhythm-group) 0 0; font: var(--text-section); color: var(--ink-soft); }
.row { display: flex; gap: var(--rhythm-in-group); flex-wrap: wrap; }
/* The one action under a field a member writes in takes the rest of its row. */
.sheet-body > textarea ~ .row > button.primary { flex: 1 1 auto; }
.muted { margin: 0; font: var(--text-caption); color: var(--ink-soft); }
.strong { margin: 0; font-weight: var(--w-bold); }
/* An invitation, never a block: a slip of lighter paper, no rim and no depth. */
.nudge {
  margin: 0; padding: var(--rhythm-in-group) var(--s-md);
  background: var(--ground-control); border-radius: var(--corner-control);
  font: var(--text-label); color: var(--ink-soft);
}

/*
 * 설정: two full-width rows and a way out. Wiping is written in the deep
 * terracotta on paper rather than filled with it, so it never reads as the
 * thing to press next; the confirmation's own 모두 지우기 is the only filled
 * one, and it sits after 취소.
 */
.settings > button.setting { width: 100%; text-align: left; }

/*
 * A row of a sheet that is on or off (움직임 줄이기, 아이와 함께): its words at
 * the left and its state as a small well at the right end, filled with ink
 * when it is on; on, the row is the chosen colour.
 */
.sheet-body > button[aria-pressed] {
  display: flex; align-items: center; justify-content: space-between; gap: var(--rhythm-in-group);
  text-align: left;
}
.sheet-body > button[aria-pressed]::after {
  content: '';
  flex: 0 0 auto;
  width: var(--s-lg); height: var(--s-lg);
  border-radius: var(--corner-mark);
  background: var(--ground-sheet);
  box-shadow: var(--e-well);
}
.sheet-body > button[aria-pressed="true"] {
  background: var(--ground-chosen);
  font-weight: var(--w-bold);
  box-shadow: var(--e-chosen-raised);
}
.sheet-body > button[aria-pressed="true"]:active { box-shadow: var(--e-chosen-pressed); }
.sheet-body > button[aria-pressed="true"]::after { background: var(--ink-text); box-shadow: none; }

button.danger {
  color: var(--ink-danger);
  font-weight: var(--w-bold);
  box-shadow: var(--e-danger-raised);
}
button.danger:active { box-shadow: var(--e-danger-pressed); }
.erase-confirm p { margin: 0; }
.erase-confirm .row button { flex: 1 1 0; }
.erase-confirm button.danger {
  background: var(--ground-act);
  color: var(--ink-light);
  font: var(--text-act);
  box-shadow: var(--e-act-raised);
}
.erase-confirm button.danger:active { box-shadow: var(--e-act-pressed); }

#toast {
  position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 24px); transform: translateX(-50%);
  z-index: 7; padding: var(--s-sm) var(--s-md); border-radius: var(--corner-toast);
  background: var(--ground-toast); color: var(--ink-toast); font: var(--text-caption);
}
.sheet-body h2 .muted { font: var(--text-caption); }

/* ---- the kit: a wood frame and a paper face ---------------------------- */

/*
 * The header's parts, the names over the room, the pot's window and the
 * bookshelf's menu are one kit (design/HEARTH_ART_DIRECTION.md, 2026-10-10
 * 판정 — 그림 조각 3, AQ-12): wood and paper in the kit's own token colours
 * (ui/tokens.js `dot.surface.kit…`, written here as --d-kit-…). The pot's
 * window is drawn in the room's SVG by ui/home-stage.js and takes nothing
 * from this file but its type.
 *
 * Every rule from here to the end of the file names one of those parts and
 * nothing else: `#header …`, `.node-label`, `#sheet[data-placement="shelf"]`
 * and `.shelf-menu …`. The kit the header first wore became the design
 * system's depth tokens (ui/tokens.js `dot.depth`, written as --e-…), and the
 * parts above this block — writing a record, 기록 보기, a memory's card, 설정,
 * the first launch — now wear it too (조각 3). The header's rules here take
 * the same tokens; the layers each token draws are the ones written here by
 * hand before it.
 *
 * A part is its outline, a light line where the light lands, its face and a
 * deeper line under it, each a whole number of grid steps. All of it is drawn
 * inside the box the part already had: an inset shadow takes no room, so no
 * chip, button, card or touch rectangle changes its size or its place, and
 * the hard offset shadow the old chrome cast outside its box is gone.
 *
 * A button that is being pressed stands lower: its light line goes and its
 * foot thins. That is a state, with no transition and no animation.
 */

/* The header: where you are on a wood plate, the time on its own colour, 설정 a paper button. */
#header .chip {
  background-color: var(--d-kit-paper);
  color: var(--d-kit-ink);
  box-shadow: var(--e-paper-flat);
}
/* The name of the room, nailed up: a brass nail at each end of the plate. */
#header .chip.where {
  background-color: var(--d-kit-plate);
  background-image: linear-gradient(var(--d-kit-brass), var(--d-kit-brass)),
    linear-gradient(var(--d-kit-brass), var(--d-kit-brass));
  background-repeat: no-repeat;
  background-size: var(--d-grid) var(--d-grid);
  background-position: left calc(var(--d-grid) * 3) center, right calc(var(--d-grid) * 3) center;
  color: var(--d-kit-ink-light);
  box-shadow: var(--e-wood-flat);
}
/*
 * Today is what is chosen now; a time being looked back on is the one thing here that is not now —
 * its small light letters on the deep terracotta, which carries them (DS-7).
 */
#header .chip.when.is-today {
  background-color: var(--d-kit-chosen);
  color: var(--d-kit-ink);
  box-shadow: var(--e-chosen-flat);
}
#header .chip.when.is-past {
  background-color: var(--d-kit-act-dark);
  color: var(--d-kit-ink-light);
  box-shadow: var(--e-act-flat);
}
#header .header-settings {
  background-color: var(--d-kit-paper-light);
  color: var(--d-kit-ink);
  box-shadow: var(--e-paper-raised);
}
#header .header-settings:active {
  box-shadow: var(--e-paper-pressed);
}