/* ==========================================================================
   The room: the homepage's first screen. A full-viewport rendered picture with click areas,
   live clock/watch hands and screen times. The picture and the SVG overlay share one frame
   sized to cover the section, so the overlay's coordinates (the render's pixels) always line
   up with the picture. Loaded only on pages with the room (home/_includes/room.njk).
   ========================================================================== */

@font-face { font-family: "IBM Plex Mono"; src: url("/blog/assets/fonts/ibm-plex-mono-normal-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

[hidden] { display: none !important; }

.room {
  --r-ink: #ece5d8;
  --r-accent: #ffffff;   /* hover outlines: bright white */
  position: relative; height: 100vh; height: 100svh; min-height: 22rem; overflow: hidden;
  background: #0e1014; color: var(--r-ink);
  font: 400 13px/1.4 var(--f-mono);
}
.room a { color: inherit; }
.room :focus-visible { outline: 2px solid var(--r-accent); outline-offset: 3px; }

/* ---------- the frame: covers the section at the render's aspect ratio ---------- */
.room__stage { position: absolute; inset: 0; overflow: hidden; }
/* When the screen is wider or taller than the picture, crop mostly from the bottom (floor) and
   little from the top (clock, shelves): the frame's 20% line sits on the section's 20% line. */
.room__frame {
  position: absolute; left: 50%; top: 20%;
  width: max(100vw, 177.78svh); aspect-ratio: 16 / 9;
  transform: translate(-50%, -20%);
}
.room__frame picture, .room__frame img { display: block; width: 100%; height: 100%; }
.room__overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.room__overlay--portrait { display: none; }
@media (max-aspect-ratio: 1/1) {
  .room__frame { width: max(100vw, 56.25svh); aspect-ratio: 9 / 16; }
  .room__overlay--landscape { display: none; }
  .room__overlay--portrait { display: block; }
}

/* ---------- click areas ---------- */
.spot { cursor: pointer; outline: none; }
.spot path { fill: transparent; stroke: transparent; vector-effect: non-scaling-stroke; transition: fill .15s, stroke .15s; }
.spot:hover path, .spot:focus-visible path, .spot.is-active path {
  fill: rgb(255 255 255 / 0.07); stroke: var(--r-accent); stroke-width: 2;
}

/* ---------- live hands and screen times, drawn over the render ---------- */
.hand { stroke: #141414; stroke-linecap: round; fill: none; }
.hand--hour { stroke-width: 0.075; }
.hand--minute { stroke-width: 0.045; }
.hand--second { stroke: #a64b2a; stroke-width: 0.018; }
.hand-pin { fill: #141414; }
.hands--watch .hand { stroke: #e7e5de; stroke-width: 0.11; }
.hands--watch .hand--minute { stroke-width: 0.08; }
.hands--watch .hand-pin { fill: #d9d7cf; }
html[data-time="night"] .hands--watch .hand { stroke: #bfe9cf; } /* lume */
.screen-time text { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 500; }
.screen-time--monitor text { fill: #f1ece2; }
.screen-time--phone text { fill: #b9b4aa; }

/* ---------- top bar ---------- */
.room__bar {
  position: absolute; inset: 0 0 auto 0; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
  padding: max(10px, env(safe-area-inset-top)) 16px 28px;
  background: linear-gradient(rgb(10 11 14 / 0.62), rgb(10 11 14 / 0));
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}
/* the bar's fade overlaps the picture: let taps through to the objects beneath, except on its controls */
.room__bar { pointer-events: none; }
.room__bar a, .room__bar button { pointer-events: auto; }
.room__name { font: 600 18px/1 var(--f-display); display: inline-flex; align-items: center; min-height: 44px; }
.room__time { color: #d9d2c4; }
.room__actions { display: flex; gap: 8px; }
.room__btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font: 500 12px/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  color: var(--r-ink); background: rgb(14 16 20 / 0.45); border: 1px solid rgb(236 229 216 / 0.45); border-radius: 3px; cursor: pointer;
}
.room__btn:hover, .room__btn[aria-pressed="true"] { border-color: var(--r-accent); color: #fff; }
@media (max-width: 30rem) {
  .room__bar { padding-bottom: 16px; }
  .room__name { font-size: 16px; }
  .room__time { order: 3; width: 100%; }
  .room__actions { gap: 6px; }
  .room__btn { padding: 0 10px; font-size: 11px; letter-spacing: 0.03em; }
}

.room__hint, .room__down {
  position: absolute; z-index: 2; bottom: max(14px, env(safe-area-inset-bottom)); margin: 0;
  color: rgb(236 229 216 / 0.85); text-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
}
.room__hint { left: 16px; }
.room__down {
  right: 16px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  text-decoration: none; border-radius: 3px; background: rgb(14 16 20 / 0.45);
}
.room__down:hover { color: #fff; }
@media (max-width: 30rem) { .room__hint { display: none; } }

/* ---------- hover label and info card (fixed, so they stay put while scrolling) ---------- */
.room-tip {
  position: fixed; z-index: 5; pointer-events: none;
  padding: 6px 10px; border-radius: 3px; background: rgb(14 16 20 / 0.88); color: #fff;
  font: 500 12px/1.2 var(--f-mono); white-space: nowrap; transform: translate(-50%, calc(-100% - 10px));
}
.room-card {
  position: fixed; right: 16px; bottom: 16px; z-index: 6; width: min(24rem, calc(100vw - 32px));
  padding: 20px 22px 18px; border-radius: 4px; background: #f4efe6; color: #1d1b18;
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.45);
  font: 400 16px/1.5 var(--f-body);
}
.room-card__title { margin: 0 32px 6px 0; font: 600 22px/1.15 var(--f-display); }
.room-card__text { margin: 0 0 14px; }
.room-card__when, .room-card__line { display: block; }
.room-card__when { font: 500 12px/1.4 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #8e3f23; margin-bottom: 4px; }
.room-card__line + .room-card__line { margin-top: 6px; }
.room-card__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 3px;
  background: #a64b2a; color: #fff; text-decoration: none; font: 500 13px/1 var(--f-mono);
}
.room-card__link:hover { color: #fff; background: #8e3f23; }
.room-card__link::after { content: " →"; white-space: pre; }
.room-card__close {
  position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: none;
  font: 400 24px/1 var(--f-mono); color: #5b554c; cursor: pointer;
}
.room-card__times { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.room-card__time {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid #b5aa97; border-radius: 3px;
  font: 400 12px/1 var(--f-mono); text-decoration: none; color: #1d1b18;
}
.room-card__time:hover { color: #1d1b18; border-color: #1d1b18; }
.room-card__time[aria-current="true"] { background: #1d1b18; border-color: #1d1b18; color: #fff; }

/* short screens (phones held sideways): a more compact card */
@media (max-height: 32rem) {
  .room-card { width: min(27rem, calc(100vw - 32px)); padding: 12px 16px 12px; font-size: 14px; bottom: 10px; }
  .room-card__title { font-size: 18px; margin-bottom: 2px; }
  .room-card__text { margin-bottom: 8px; }
  .room-card__times { flex-wrap: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .spot path { transition: none; }
  .hand--second { display: none; }
}