/* ---------- the Door ----------
   The one big transition: destination, crew, brief, the light there, and the
   lever. public/rooms/modals/door.js draws it.

   40 style attributes to zero, all of them from a single block.

   SIZES READ OFF THE GLASS. The one that would have caught a careless
   conversion is the title: it is WRITTEN 24px and renders at 22, because the
   bridge sends 24 to --t-head. Copying the attribute would have grown it.

     written 24   -> 22  --t-head      written 13.5 -> 14  --t-small
     written 22   -> 22  --t-head      written 13   -> 14  --t-small
     written 17   -> 18  --t-sub       written 12.5 -> 13  --t-tiny
     written 16   -> 16  --t-lead      mono 12.5    -> 13  --t-tiny
     written 14   -> 15  --t-body      mono 13      -> 14  --t-small
                                       mono 7.5-9   -> 11  --t-label

   Corners: written 20 is --r-xl, 15 and 13 are --r-lg, 12 and 11 are --r-md,
   9 is --r-sm, 100px is --r-pill.

   ONE LETTERSPACING SNAP: the title's -.02em to --ls-head. The three -.012em
   sites are deliberately left alone — a hair of tracking on a 16px or 17px
   line is not a heading, and --ls-head would more than double it. Same call as
   the Lounge's machine plate.

   Spacing is not swept, and the 0 30px 80px shadow stays literal: it is the
   deepest thing in the app and matches no step. */

[data-render-phase="update"] .door-scrim{animation:none!important;}

/* the door draws its own scrim rather than components.css's .modal-scrim: it
   sits at z-index 80 under the house dialog's 95, and its padding is 16 */
.door-scrim{position:fixed; inset:0; z-index:80; display:flex; align-items:center;
  justify-content:center; padding:16px; pointer-events:none;
  animation:fadeUp .25s ease both;}
.door-scrim>*{pointer-events:auto;}
.door{width:100%; max-width:560px; max-height:92vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:16px; padding:20px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-xl); background:var(--panel);
  box-shadow:0 30px 80px var(--shad);}

.door-head{display:flex; align-items:center; justify-content:space-between;}
.door-head-label{display:flex; flex-direction:column; gap:2px;}
.door-title{font-size:var(--t-head); font-weight:var(--w-semi); letter-spacing:var(--ls-head);}
/* 32px is the size of the close square */
.door-x{display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--r-sm);
  border:var(--bd) solid var(--edge); color:var(--muted);}

.door-block{display:flex; flex-direction:column; gap:8px;}
.door-block-9{display:flex; flex-direction:column; gap:9px;}
.door-row{display:flex; align-items:center; gap:10px;}
.door-row-base{display:flex; align-items:baseline; justify-content:space-between;}
.door-wrap{display:flex; flex-wrap:wrap; gap:7px;}
.door-note{line-height:1.5;}
.door-note-goals{line-height:1.6;}

/* where and when. The WHERE chips carry their own word size; the WHEN chips
   are mono labels and mono() owns theirs, so the shape is shared and the size
   is not. */
.door-pick{padding:8px 13px; border-radius:var(--r-md);}
.door-pick-word{font-size:var(--t-small); font-weight:var(--w-semi);}
.door-add{padding:9px 13px; border-radius:var(--r-md); border:var(--bd) dashed var(--edge);}
.door-add-word{font-size:var(--t-small);}
.door-genre{padding:8px 13px; border-radius:var(--r-pill);
  font-size:var(--t-small); font-weight:var(--w-semi);}

/* the vibe dials. The two labels light up at the ends of their own travel, so
   the colour is per-render data and stays on mono()'s third argument. */
.door-dial{display:flex; align-items:center; gap:10px;}
.door-dial-l{width:72px; text-align:right;}
.door-dial-r{width:88px;}
.door-range{flex:1; accent-color:var(--accent);}

/* the missions */
.door-charting{position:relative; overflow:hidden; padding:14px;
  border:var(--bd) dashed var(--edge); border-radius:var(--r-md);}
.door-sweep{position:absolute; inset:0; pointer-events:none; width:40%;
  background:linear-gradient(90deg,transparent,var(--glow),transparent);
  animation:sweep 1.1s linear infinite;}
.door-mission{width:100%; display:flex; flex-direction:column; gap:6px; padding:13px 14px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-lg); background:var(--inset);
  text-align:left;}
/* -.012em stays: a hair of tracking on a 16px line is not a heading */
.door-mission-title{font-size:var(--t-lead); font-weight:var(--w-semi); letter-spacing:-.012em;}
.door-mission-brief{font-size:var(--t-small); line-height:1.5; color:var(--ink2);}
.door-chart{padding:13px 14px; border:var(--bd) dashed var(--edge);
  border-radius:var(--r-md); text-align:center;}

.door-brief{width:100%; padding:11px 13px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-md); background:var(--inset);
  font-size:var(--t-body); line-height:1.5; color:var(--ink); resize:vertical;}

/* the crew. 56px is the size of a tile and 34px the size of a face. */
.door-crew{display:flex; flex-wrap:wrap; gap:8px;}
.door-crew-btn{display:flex; flex-direction:column; align-items:center; gap:4px;
  width:56px; padding:6px 2px; border-radius:var(--r-md);
  border:var(--bd) solid var(--edge); background:transparent;}
.door-crew-btn-on{border-color:var(--accent); background:var(--sel);}
.door-face{display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; overflow:hidden; border-radius:var(--r-round);
  border:var(--bd-thick) solid var(--muted);
  font-size:var(--t-small); font-weight:var(--w-semi); color:var(--ink4);}
.door-face-on{border-color:var(--accent);}

.door-outfit{position:relative; overflow:hidden; display:flex; align-items:center;
  justify-content:space-between; gap:10px; padding:11px 14px;
  border-radius:var(--r-md); border:var(--bd) dashed var(--edge); background:var(--inset);}

/* the lever */
.door-lever{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:17px 18px; border-radius:var(--r-lg);
  background:var(--accent); color:var(--onAccent); box-shadow:0 14px 34px var(--shad);}
.door-lever-label{display:flex; flex-direction:column; gap:2px; text-align:left;}
.door-lever-title{font-size:var(--t-sub); font-weight:var(--w-semi); letter-spacing:-.012em;}
.door-lever-mark{font-size:var(--t-head);}
.door-home{padding:12px 14px; border-radius:var(--r-md);
  border:var(--bd) solid var(--edge); text-align:center;}