/* Sill — the surfaces that layer over the room: the naming input, the shelf, and
 * the reader. Split out of sill.css when that file passed the ~300-line limit
 * (`ENG-3.1`); they are also a different reason to change (`ENG-3.2`) — the room is
 * the world, these are the things placed on top of it.
 *
 * Tokens live in sill.css. The `[hidden]` guard is repeated here rather than
 * inherited: this sheet sets `display` on three selectors that the markup hides with
 * the attribute, and a guard that works only because another file happened to load
 * first is not a guard. Repeating one idempotent `!important` rule is the cheap side
 * of that trade. */

[hidden] { display: none !important; }

/* --- the naming (§7) ------------------------------------------------------ */

.naming {
  position: absolute;
  left: 50%;
  bottom: 26%;
  transform: translateX(-50%);
  width: min(70vw, 260px);
  opacity: 0;
  transition: opacity 1400ms ease-in;   /* it arrives; it does not interrupt */
}

.naming.is-offered { opacity: 1; }

.naming-input {
  width: 100%;
  padding: 6px 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--tarnish);
  border-radius: 0;                     /* iOS rounds text inputs by default */
  color: var(--vellum);
  font: inherit;
  font-size: 1.05rem;
  text-align: center;
  caret-color: var(--tarnish);
  appearance: none;
  outline: none;
}

/* --- the shelf ------------------------------------------------------------ */

.shelf {
  position: absolute;
  inset: 0;
  background: var(--night);
  overflow-y: auto;                 /* the shelf scrolls; the room never does */
  -webkit-overflow-scrolling: touch;
  padding: max(48px, env(safe-area-inset-top)) 20px max(48px, env(safe-area-inset-bottom));
}

.shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 14px;
  align-items: end;
}

.shelf-item {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  min-width: 44px;
  min-height: 44px;                 /* §9: nothing smaller than a thumb */
  aspect-ratio: 1;
  -webkit-tap-highlight-color: transparent;
}

.shelf-item svg { width: 100%; height: 100%; display: block; }

.shelf-empty {
  min-height: 60vh;
  display: grid;
  place-items: center;
}

/* --- one thing, larger ---------------------------------------------------- */

.reader {
  position: absolute;
  inset: 0;
  background: var(--night);
  display: grid;
  place-items: center;
  padding: 12vh 28px;
}

.reader-object { width: min(56vw, 240px); height: min(56vw, 240px); }

.scrap-text {
  margin: 0;
  max-width: 26ch;
  color: var(--vellum);
  font-size: 1.05rem;
  line-height: 1.75;
  text-align: left;
}

/* --- which view is showing ------------------------------------------------ */

.scene[data-view="shelf"] .room,
.scene[data-view="shelf"] .cat,
.scene[data-view="shelf"] .furniture,
.scene[data-view="reader"] .room,
.scene[data-view="reader"] .cat,
.scene[data-view="reader"] .furniture { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  /* Story 2.4.3: the enlarged view cross-fades rather than scaling. */
  .reader, .shelf { transition: opacity 700ms ease-in-out; }
}