/*
 * The memory silo's look: 기록 보기 — its frame, its lists, its calendar, the views it offers and making a
 * memory — in the record sheets 아이와 함께 and the line that says a water drop came, and a memory's picture.
 *
 * 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 memory'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). Nothing a rule says changed; only the file it is in. The memory's
 *            own work orders add theirs at the end (a memory's picture, WO-HEARTH-MEMORY-VALUE-002).
 * Output:    how the memory silo's parts look.
 * Consumer:  web/index.html, which links ui/styles.css, then ui/home-styles.css, then this file.
 * Validation: architecture-regression.test.js holds the name rule below; archive-frame.test.js and
 *             memory-archive-structure.test.js read every stylesheet the entry page links, in its order.
 *
 * The name rule, a contract between the two silos: every selector here names at least one word of the
 * memory'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 home's (one ui/home-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.
 */

/*
 * 기록 보기: the bottom sheet grown to the top of the room, one height on every
 * step (ui/app.js renderArchiveFrame). It covers the room and leaves the header
 * above it, which still says where and when. Its top row never scrolls — 뒤로
 * at the left end, the name in the middle, 닫기 at the right end, in the same
 * place on every step — and only the page under it does.
 */
#sheet[data-view="archive"] {
  top: calc(var(--safe-top) + var(--header-band));
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.archive-frame { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.archive-bar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-sm);
  padding: calc(var(--d-grid) * 2 + var(--s-xs)) var(--s-md) var(--s-sm);
  box-shadow: inset 0 calc(var(--d-grid) * -1) 0 0 var(--d-frame-wood-light);
}
.archive-bar .archive-back { justify-self: start; }
.archive-bar .archive-close { justify-self: end; font-weight: 700; }
.archive-bar .archive-back-slot { min-height: 48px; }
.archive-name { font-size: var(--t-caption); font-weight: 700; color: var(--c-ink-soft); }
.archive-page {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: var(--safe-bottom);
}
.archive-empty { margin: 0; color: var(--c-ink-soft); }

/*
 * 아이와 함께 (MV-12): a full-width row that says whether it is on, the way
 * 설정's rows do, filled like a chosen scope when it is. The line that says a
 * water drop came (MV-19) sits in the sheet's flow, never over its buttons.
 */
button.with-child { width: 100%; text-align: left; }
button.with-child[aria-pressed="true"] { background: var(--d-chip-active); font-weight: 700; }
.water-receipt {
  margin: 0; padding: var(--s-sm) var(--s-md);
  background: var(--c-glow-faint);
  box-shadow: inset calc(var(--d-grid) * 2) 0 0 0 var(--d-primary-edge);
  color: var(--d-ink); font-size: var(--t-caption); font-weight: 700;
}

ul.fragment-list, ul.drill, ul.traces {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: var(--s-xs);
}
ul.fragment-list li { padding: 6px 0; border-bottom: 1px solid var(--c-wall-shade); font-size: var(--t-caption); }
ul.drill li button { width: 100%; text-align: left; }

/*
 * A record in 기록 보기 opens its card; it reads as a line, not a button. What
 * was written first, and under it when it happened and who wrote it.
 */
ul.fragment-list li button.fragment-open {
  width: 100%; min-height: 48px; padding: 6px 0;
  background: none; border: 0; box-shadow: none; border-radius: 0;
  text-align: left; font: inherit; font-size: var(--t-caption); color: inherit;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px;
}
ul.fragment-list li:has(> button.fragment-open) { padding: 0; }
.fragment-open .line-text { font-size: var(--t-body); }
.fragment-open .line-meta { color: var(--c-ink-soft); }
/*
 * A record that is in the living room, in a view that also lists ones that
 * are not: a small tag at the right of the line's second row, not a row of
 * its own.
 */
ul.fragment-list li button.fragment-open { position: relative; }
.fragment-open .line-place {
  position: absolute;
  right: 0;
  bottom: 6px;
  padding: 0 6px;
  font-size: var(--t-caption);
  color: var(--d-ink);
  background: var(--d-chip-active);
}

/*
 * 기록 보기's pages (the second work order): the living room's view and
 * everything as two buttons, this month's calendar, the way into a chosen
 * range, a week or a month read part by part, and making a memory.
 */
.archive-scope { display: flex; gap: var(--s-sm); }
.archive-scope .scope-choice { flex: 1 1 0; font-size: var(--t-caption); }
.archive-scope .scope-choice[aria-pressed="true"] { background: var(--d-chip-active); font-weight: 700; }

/*
 * Seven columns that are never under the 48 px touch floor (A-4): at 360 px
 * the calendar reaches out past the page's own padding to --s-sm from each
 * edge, which leaves 344 px, 49 px a column. Rows are ISO weeks, Monday first.
 */
.archive-calendar {
  margin: var(--s-xs) calc(var(--s-sm) - var(--s-lg)) 0;
  display: flex; flex-direction: column; gap: var(--s-xs);
}
.calendar-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: var(--s-xs);
}
.calendar-month { justify-self: center; font-weight: 700; }
span.calendar-month { font-size: var(--t-body); }
.calendar-step { padding: 0; }
.calendar-step-slot { min-height: 48px; }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(48px, 1fr));
  gap: 0;
}
.calendar-weekday {
  text-align: center;
  font-size: var(--t-caption);
  color: var(--c-ink-soft);
  padding: 2px 0;
}
.calendar-day {
  min-width: 48px;
  min-height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-body);
  color: var(--c-ink-soft);
}
button.calendar-day {
  padding: 0;
  color: var(--d-ink);
  font-weight: 700;
  box-shadow: inset 0 0 0 var(--d-grid) var(--d-frame-wood);
}
.calendar-day.today { text-decoration: underline; text-underline-offset: 4px; }

.archive-entry { width: 100%; text-align: left; }
.archive-part { display: flex; flex-direction: column; gap: var(--s-xs); }
.archive-part > .archive-step { width: 100%; text-align: left; font-weight: 700; }
.archive-make {
  margin-top: var(--s-sm);
  padding-top: var(--s-sm);
  display: flex; flex-direction: column; gap: var(--s-sm);
  box-shadow: inset 0 var(--d-grid) 0 0 var(--d-frame-wood-light);
}
button.make { align-self: flex-start; font-weight: 700; }
/* An offer, not a task: a plain outline, never the filled primary. */
button.quiet { align-self: flex-start; font-size: var(--t-caption); }

/*
 * A memory's picture (2026-09-27 Steward 판정 — 기억 가치, WO-2, MV-6, MV-7): the
 * top of its card, drawn on the art grid at one size for every memory and
 * centred, never wider than the page. Inside 기록 보기 the whole picture is the
 * press that opens the memory's records, with the line that says so under it.
 * Its cells stay hard-edged; the figures' picture files keep their own
 * smoothing, as in the room.
 */
.memory-picture {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-xs);
}
button.memory-picture { padding: var(--s-sm); }
.memory-picture-art { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }
.memory-picture-art image { image-rendering: auto; }
.memory-picture-hint { font-size: var(--t-caption); color: var(--c-ink-soft); font-weight: 400; }