/* ==========================================================================
   The Library room, embedded in the project page.

   The room itself is dark and draws its own world, so this file only builds the
   well it sits in and the chrome around it. The chrome is the room's own dark
   glass, not the page's soft UI: on the dark side a panel lifted off the wall by
   a white highlight is a contradiction, because the highlight has nowhere to
   come from. Dark chrome gets a translucent fill and a hairline of light along
   the top edge only.
   ========================================================================== */

.nos .room {
  --room-bg:     #14100c;
  --room-ink:    #e6ddcd;
  --room-muted:  #9c8f79;
  --room-glass:  rgba(255, 236, 205, .08);
  --room-edge:   rgba(255, 236, 205, .13);
  --room-accent: #8a5a28;

  /* Bottom margin is not optional here. Paragraphs on this site only get space
     from `p + p`, so the first paragraph of the block after the room has no top
     margin of its own and sits straight against the canvas. */
  margin: 2.4rem 0 clamp(2.2rem, 4vw, 3.2rem);
}

/* The stage keeps the screenshot's own 2200x1242, so nothing on the page moves
   when the poster is swapped for a canvas. */
.nos .room-stage {
  position: relative;
  aspect-ratio: 2200 / 1242;
  border-radius: var(--nos-r-panel);
  overflow: hidden;
  background: var(--room-bg);
  box-shadow: var(--nos-sink);
}
/* The sink shadow is cast by the page onto the well, so it has to sit above the
   dark content rather than under it. */
.nos .room-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--nos-sink);
  pointer-events: none;
  z-index: 3;
}

.nos .room-poster,
.nos .room-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.nos .room-poster { object-fit: cover; }
.nos .room-canvas { touch-action: none; }

/* Everything the reader is offered before the room loads. */
.nos .room-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  gap: .9rem;
  justify-items: center;
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(rgba(20, 16, 12, .34), rgba(20, 16, 12, .62));
}

.nos .room-start {
  font: inherit;
  font-size: .85rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--room-accent);
  border: 0;
  border-radius: var(--nos-r-ctl);
  padding: .85em 1.5em;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 246, 225, .22) inset;
  transition: filter .18s ease, transform .18s ease;
}
.nos .room-start:hover { filter: brightness(1.12); transform: translateY(-1px); }
.nos .room-start:active { transform: translateY(0); filter: brightness(.94); }
.nos .room-start:focus-visible { outline: 2px solid #f0d9b5; outline-offset: 3px; }
.nos .room-start[disabled] { opacity: .7; cursor: default; transform: none; filter: none; }

.nos .room-cover p {
  margin: 0;
  max-width: 34ch;
  color: var(--room-ink);
  font-size: .82rem;
  line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* The bar along the top of the room once it is running. */
.nos .room-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .8rem;
  background: linear-gradient(rgba(20, 16, 12, .72), rgba(20, 16, 12, 0));
  color: var(--room-muted);
  font-size: .72rem;
  line-height: 1.45;
}
.nos .room-hint { margin: 0; }
.nos .room-exit {
  font: inherit;
  font-size: .72rem;
  font-weight: 650;
  color: var(--room-ink);
  background: var(--room-glass);
  box-shadow: inset 0 1px 0 var(--room-edge);
  border: 0;
  border-radius: 8px;
  padding: .45em .9em;
  cursor: pointer;
  flex: none;
}
.nos .room-exit:hover { color: #fff; }
.nos .room-exit:focus-visible { outline: 2px solid #f0d9b5; outline-offset: 2px; }

/* The card that opens when a book comes off the shelf. In the app this is the
   full record and a link to the note canvas; here it is what the demo data
   honestly holds, and it says so. */
.nos .room-card {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  width: min(30rem, calc(100% - 2rem));
  padding: 1rem 1.15rem;
  border-radius: 12px;
  background: rgba(26, 21, 16, .93);
  box-shadow: inset 0 1px 0 var(--room-edge), 0 10px 30px rgba(0, 0, 0, .5);
  color: var(--room-ink);
}
.nos .room-card h4 { margin: 0 0 .15rem; font-size: 1rem; font-weight: 650; line-height: 1.25; }
.nos .room-card .who { color: var(--room-muted); font-size: .8rem; }
.nos .room-card .meta {
  margin-top: .6rem;
  color: var(--room-muted);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.nos .room-card .close {
  position: absolute;
  top: .5rem; right: .5rem;
  font: inherit;
  font-size: .9rem;
  line-height: 1;
  color: var(--room-muted);
  background: none;
  border: 0;
  padding: .35rem .45rem;
  cursor: pointer;
}
.nos .room-card .close:hover { color: #fff; }

/* The on-screen movement stick room.js appends to <body> on a touch device.
   Lifted from the app's library.css unchanged. */
.stick {
  position: fixed;
  z-index: 14;
  width: 108px; height: 108px;
  margin: -54px 0 0 -54px;
  border-radius: 50%;
  background: rgba(255, 236, 205, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 205, 0.13);
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  display: grid; place-items: center;
}
.stick i {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 226, 180, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 246, 225, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .nos .room-start { transition: none; }
  .nos .room-start:hover { transform: none; }
}

/* Every box in the stage sets its own display, and a `display` declaration beats
   the UA sheet's [hidden] rule, so without this the exit button and the canvas
   are both on screen before the room has loaded. */
.nos .room [hidden] { display: none; }