/* THE SCREENING ROOM — 2026-10-19. Styles for screening.js; see the note at the top of that
   file. Kept in its own sheet so styles.css (shared with other sessions) is untouched.
   The room is the one dark surface on the case pages: near-black, the picture as large as
   the screen allows and never cropped, paper-coloured mono for the furniture, and the
   Guild red for the one way on. Red on this ground is 5.4:1, so it holds at mono size. */

/* The expand button: for the keyboard only. A click on the picture opens the room, so a
   visible square would be clutter (and Filippos's cursor covered it anyway). It stays in
   the tab order and appears on the frame's corner only when it has keyboard focus. */
.tile figure{position:relative}
.tile-view{
  position:absolute;top:10px;right:10px;z-index:2;
  width:34px;height:34px;display:grid;place-items:center;padding:0;
  appearance:none;border:0;cursor:pointer;
  background:var(--ink);color:var(--paper);
  opacity:0;pointer-events:none;
}
.tile-view svg{width:16px;height:16px}
.tile-view:focus-visible{opacity:1;pointer-events:auto;outline:2px solid var(--red);outline-offset:2px}

html.has-screen{overflow:hidden}
.screen{
  border:0;padding:0;margin:0;max-width:none;max-height:none;
  width:100vw;height:100dvh;background:#0E0E0E;color:var(--paper);
}
.screen::backdrop{background:#0E0E0E}
.screen[open]{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  grid-template-columns:minmax(0,1fr);
}
.screen-bar{
  display:flex;align-items:baseline;gap:24px;padding:18px var(--pad-x);
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;
}
.screen-name{margin:0;display:flex;flex-wrap:wrap;gap:4px 14px;min-width:0}
.screen-client{color:rgba(242,240,234,.6)}
.screen-count{margin:0 0 0 auto;color:rgba(242,240,234,.6);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
.screen-close{flex-shrink:0}
.screen-close{
  appearance:none;border:0;background:none;color:var(--paper);cursor:pointer;padding:0;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
}
.screen-close:hover{color:var(--red)}
.screen-stage{
  display:grid;place-items:center;min-height:0;padding:0 calc(var(--pad-x) + 40px) 28px;
}
/* The picture and its one link, as a unit: the plate shrinks to the picture's width and
   the link ranges right under it. */
.screen-plate{display:flex;flex-direction:column;align-items:flex-end;gap:16px;max-width:100%;min-height:0}
.screen-media{
  display:block;max-width:100%;max-height:calc(100dvh - 150px);width:auto;height:auto;
  object-fit:contain;background:#000;user-select:none;-webkit-user-drag:none;
}
img.screen-media{cursor:pointer}
.screen-step{
  position:fixed;top:50%;translate:0 -50%;z-index:1;
  appearance:none;border:0;background:none;color:var(--paper);cursor:pointer;
  font-family:var(--font-mono);font-size:28px;line-height:1;padding:18px 14px;
}
.screen-step:hover{color:var(--red)}
.screen-step--prev{left:max(6px,calc(var(--pad-x) - 22px))}
.screen-step--next{right:max(6px,calc(var(--pad-x) - 22px))}
.screen-step[hidden]{display:none}
.screen-case{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);text-transform:uppercase;
  color:var(--red);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.screen-case:hover{color:var(--paper)}
.screen-case[hidden]{display:none}
.screen :focus-visible{outline:2px solid var(--red);outline-offset:3px}
.screen-close:focus:not(:focus-visible),.screen-step:focus:not(:focus-visible){outline:none}

/* Phones: the picture takes the full width, the arrows sit low beside the foot line, and a
   swipe does the rest. */
@media (max-width:700px){
  .screen-stage{padding:0 0 56px}
  .screen-case{margin-right:var(--pad-x)}
  .screen-step{top:auto;bottom:6px;translate:none;font-size:24px}
  .screen-step--prev{left:6px}
  .screen-step--next{left:56px;right:auto}
}
@media (prefers-reduced-motion:no-preference){
  .screen[open] .screen-media{animation:screen-in .5s cubic-bezier(.22,.61,.36,1) both}
  @keyframes screen-in{from{opacity:0;scale:.985}to{opacity:1;scale:1}}
}

/* The Guild cursor in the room: it is ink on paper everywhere else, which would vanish on
   this ground, so here it inverts — a paper dot with ink lettering, still see-through when
   open. */
.screen .swg-cursor{background:var(--paper)}
.screen .swg-cursor.is-over{background:rgba(242,240,234,.82)}
.screen .swg-cursor-say{color:var(--ink)}