/* Latest test page (stage 3, 9 Oct 2026): every piece, newest first. Page-only styles on top of shared/ratc.css.
   The opening is the archive as a city, drawn from the data: one building per month, one window per piece,
   empty months as empty lots (Rachel's ruling). Choosing a room or typing a title lights only the matching
   windows and narrows the list. Motion: the buildings rise and the windows switch on in publish order, once,
   on load; all of it finished and still under Still, reduced motion, and with scripts off. */

/* ---------- 1. Opening: the city as an index ---------------------------- */
.lt-open { padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); }
.lt-open__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.lt-open__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; }
.lt-title { margin: 0; }
.lt-count { margin: 0; }
.lt-tools { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; }
.lt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lt-chip { min-height: 40px; }
.lt-find { display: grid; gap: 6px; flex: 0 1 320px; min-width: 0; }
.lt-find__label { margin: 0; }
.lt-find__input {
  width: 100%; min-height: 44px; padding: 8px 12px;
  background: var(--ground-black); color: var(--cream);
  border: 2px solid var(--bone); border-radius: 0;
  font: 400 1.125rem/1.2 var(--font-body);
}
.lt-find__input::placeholder { color: #c9b08c; opacity: 1; } /* the shared search's placeholder colour, 8.9:1 on black */
.lt-find__input:focus-visible { outline-offset: 2px; border-color: var(--mustard); }

/* the skyline: an SVG at its own drawn size, scaled to the wrapper; on a phone it scrolls sideways inside itself, starting at the newest month */
.sky { margin-top: 6px; }
.sky__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 4px; }
.sky__svg { display: block; width: 100%; height: auto; min-width: 760px; overflow: visible; }
.sky__body { fill: rgb(14 8 13 / .58); stroke: var(--scene-mp, rgb(232 195 146 / .25)); stroke-width: 1; }
.sky__w { fill: var(--mustard); transition: fill 220ms var(--ease-out), opacity 220ms var(--ease-out); }
.sky__w:nth-child(3n) { fill: #E8B96F; }   /* lit windows in warm inks, mustard to bone, as on the homepage city */
.sky__w:nth-child(5n+1) { fill: var(--bone); }
.sky__w.is-off { fill: var(--dusk-violet); opacity: .55; }
.sky__lab { font: 600 13px/1 var(--font-mono); letter-spacing: .04em; fill: var(--text); text-anchor: middle; }
.sky__lab--first { text-anchor: start; }
.sky__ground { stroke: var(--bone); stroke-width: 2; }
.sky__lot-r { fill: none; stroke: var(--bone); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sky__b, .sky__lot { cursor: pointer; }
.sky__b:hover .sky__body, .sky__b:focus-visible .sky__body { fill: rgb(14 8 13 / .85); stroke: var(--bone); stroke-width: 2; }
.sky__b:focus-visible, .sky__lot:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sky__b.is-here .sky__body { stroke: var(--mustard); stroke-width: 2.5; }
.sky__b.is-here .sky__lab { fill: var(--display); }

/* ---------- 2. The list: a month to a floor -------------------------------- */
.lt-list { padding-top: 4.5rem; }
.lt-list__bar { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; min-height: 0; }
.lt-list__bar:has(> :not([hidden])) { margin-bottom: 18px; }
.lt-none { margin: 0; }
.floor { border-top: 2px solid var(--bone); scroll-margin-top: calc(var(--header-h) + 16px); }
.floor:last-child { border-bottom: 2px solid var(--bone); }
.floor[hidden] { display: none; }
.floor__sum {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: center; gap: 8px 24px;
  padding: 18px 0 16px;
}
.floor__sum::-webkit-details-marker { display: none; }
.floor__sum:focus-visible { outline-offset: 2px; }
.floor__h { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.floor__month { font: 400 var(--fs-h2)/1 var(--font-display); text-transform: uppercase; color: var(--display); }
.floor__n { color: var(--text); }
/* a strip of the month's windows: one square per piece (drawn with a repeating gradient, nothing to read) */
.floor__wins {
  height: 10px; max-width: calc(var(--n) * 14px); width: 100%;
  background: repeating-linear-gradient(90deg, var(--mustard) 0 8px, transparent 8px 14px);
  opacity: .9;
}
.floor__toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.floor__toggle::after { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 200ms var(--ease-out); }
.floor[open] .floor__toggle::after { transform: translateY(2px) rotate(-135deg); }
.floor__close-l, .floor[open] .floor__open-l { display: none; }
.floor[open] .floor__close-l { display: inline; }
.floor__sum:hover .floor__month { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); text-underline-offset: .1em; }

.floor__list { list-style: none; padding-bottom: 18px; }
.lt-row {
  display: grid; grid-template-columns: 128px 5.5rem minmax(0, 1fr) auto; align-items: center; gap: 4px 20px;
  padding: 10px 0; border-top: 1px solid var(--dusk-violet);
}
/* each post's own picture (Rachel, 9 Oct: "why can't i have images on all of them?"). The test page packs one
   month's pictures into one sheet (assets/thumbs/YYYY-MM.webp) and shows its square of it; the sheet loads only
   when the month is open. Posts with no picture get a dark tile with three lit windows. */
.lt-row__pic {
  grid-column: 1; grid-row: 1; align-self: center;
  width: 128px; aspect-ratio: 16 / 9; border-radius: 3px;
  background-color: var(--ground-black); background-repeat: no-repeat;
  background-size: calc(var(--cols) * 100%) calc(var(--rows) * 100%);
  background-position: calc(var(--c) / max(var(--cols) - 1, 1) * 100%) calc(var(--r) / max(var(--rows) - 1, 1) * 100%);
}
.lt-row__pic--none {
  background-image:
    linear-gradient(var(--mustard), var(--mustard)), linear-gradient(var(--bone), var(--bone)), linear-gradient(var(--mustard), var(--mustard));
  background-size: 8px 8px; background-position: 42% 40%, 58% 40%, 42% 62%;
  outline: 1px solid var(--dusk-violet); outline-offset: -1px;
}
.lt-row__date { grid-column: 2; }
.lt-row__t { grid-column: 3; }
.lt-row__room { grid-column: 4; }
.lt-row[hidden] { display: none; }
.lt-row__date { color: var(--label); white-space: nowrap; }
.lt-row__t { font: 700 1.1875rem/1.3 var(--font-body); color: var(--cream); text-decoration: none; text-wrap: pretty; }
.lt-row__t:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.lt-row__room { color: var(--text); white-space: nowrap; text-align: right; }
.lt-row__new { grid-column: 2 / span 2; grid-row: 2; justify-self: start; display: none; margin-top: 2px; }
.lt-row.is-new .lt-row__new { display: inline-flex; }
.lt-row.is-hit .lt-row__t { color: var(--display); }

.floor--lot { padding: 18px 0 20px; }
.floor--lot .floor__h { margin-bottom: 8px; }
.floor--lot .floor__month { color: var(--text); }
.floor__lot { margin: 0; display: inline-block; padding: 6px 10px; border: 2px dashed var(--bone); }

/* ---------- Motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* on load, once: the buildings rise left to right, then the windows switch on in publish order. Art only. */
  :root.ratc-ready:not([data-motion="still"]) .sky.is-building .sky__rise {
    transform-box: fill-box; transform-origin: 50% 100%;
    animation: lt-rise 700ms var(--ease-out) both; animation-delay: calc(var(--k) * 45ms);
  }
  :root.ratc-ready:not([data-motion="still"]) .sky.is-building .sky__w {
    animation: lt-switch 1ms step-end both; animation-delay: calc(900ms + var(--j) * 4ms);
  }
}
@keyframes lt-rise { from { transform: scaleY(0); } to { transform: none; } }
@keyframes lt-switch { from { fill: var(--dusk-violet); opacity: .55; } to { } }

/* ---------- Phone and tablet -------------------------------------------------- */
@media (max-width: 899px) {
  .lt-tools { align-items: stretch; }
  .lt-find { flex: 1 1 100%; }
  /* room buttons in one row that slides sideways, so the city stays on the first screen */
  .lt-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .lt-chip { flex: none; }
  .sky { margin-inline: calc(-1 * var(--gutter)); }
  .sky__scroll { padding-inline: var(--gutter); }
  .floor__sum { grid-template-columns: minmax(0, 1fr) auto; }
  .floor__wins { grid-column: 1 / -1; grid-row: 2; }
  .lt-row { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
  .lt-row__pic { width: 96px; grid-row: 1 / span 3; align-self: start; }
  .lt-row__date { grid-column: 2; grid-row: 1; }
  .lt-row__room { grid-column: 3; grid-row: 1; }
  .lt-row__t { grid-column: 2 / -1; grid-row: 2; font-size: 1.0625rem; }
  .lt-row__new { grid-column: 2 / -1; grid-row: 3; }
}