/* ---------- the Time Machine ----------
   public/rooms/mission.js draws it. Rebuilt 2026-08-20 from a long numbered
   column onto the house's side-nav pattern (components.css .sidenav-page).

   THE THREE BANDS, and the order matters:

     the plate      never scrolls. Where, when, the light there, the way out.
     the rail+pane  the four sections. One open, the rest readable from the rail
     the door bar   never scrolls. One primary action and its readiness.

   The old file's measuring note is kept because the PARTS did not change, only
   the frame around them: every size in a part was read off the glass rather
   than off the attribute it used to carry, because the bridge in components.css
   moved most of what this room typed. A written 15 and a written 16 both
   rendered at 16, which is why .mission-lead carries sites the original survey
   saw as two sizes. Corners: written 15/16/14/13 are --r-lg, 12 and 10 are
   --r-md, 7 is --r-sm, 17 is --r-xl. The say bubble's asymmetric corner is the
   one NOT snapped, because snapping it flattens the tail.

   Spacing inside the parts is still not swept: their gaps cluster odd (7, 9,
   11, 13) and the scale is even. The frame is on the scale, being new. */

/* THE FADE HAS A HOOK AND MOVING IT TO A CLASS WOULD BREAK IT SILENTLY.
   base.css suppresses a room's entrance animation on an UPDATE render by
   matching [style*="animation:fadeUp"] — a style-string selector. The moment
   these carry the fade in a class instead, that suppression stops reaching them
   and every keystroke in the brief re-runs the animation. Grep the string
   before moving it. */
[data-render-phase="update"] .mission,
[data-render-phase="update"] .mission-pane,
[data-render-phase="update"] .mission-poster{animation:none!important;}

/* ---------- the room ---------- */
.mission{display:flex; flex-direction:column; gap:var(--s6); padding:var(--s3) var(--s7) var(--s7);
  animation:fadeUp .35s ease both;}

/* ---------- the plate ---------- */
.mission-plate{display:flex; flex-direction:column; gap:var(--s3);
  padding:var(--s6) var(--s7);
  border:var(--bd) solid var(--edge); border-radius:var(--r-xl);
  background:var(--panel); box-shadow:var(--sh-card);}
.mission-plate-top{display:flex; align-items:center; gap:var(--s5);}
.mission-plate-kicker{flex:1; min-width:0;}
.mission-plate-back{display:flex; align-items:center; gap:var(--s2); flex:none;
  padding:var(--s2) var(--s4); border:var(--bd) solid var(--edge);
  border-radius:var(--r-pill); color:var(--muted);
  transition:color var(--mo-fast), border-color var(--mo-fast);}
.mission-plate-back:hover{color:var(--accent); border-color:var(--accent);}
.mission-plate-dest{display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--s5);}
.mission-plate-place{font-size:var(--t-room); font-weight:var(--w-semi); letter-spacing:var(--ls-head);}
.mission-plate-when{font-family:'IBM Plex Mono',monospace; font-size:var(--t-display);
  letter-spacing:.04em; color:var(--accent);}
.mission-plate-light{line-height:var(--lh-tight);}

/* ---------- the open section ----------
   One card, whatever is in it. Every pane is this box, so switching sections
   changes the contents and never the frame. */
.mission-pane{display:flex; flex-direction:column; gap:var(--s7); min-width:0;
  padding:var(--s7); border:var(--bd) solid var(--edge); border-radius:var(--r-xl);
  background:var(--panel); animation:fadeUp .25s ease both;}
.mission-row{display:flex; gap:8px;}
.mission-stack-3{display:flex; flex-direction:column; gap:3px;}
.mission-stack-left{text-align:left;}
.mission-lead{font-size:var(--t-lead); font-weight:var(--w-semi);}
.mission-note{line-height:1.6;}

/* ---------- destination ---------- */
.mission-band{display:flex; flex-direction:column; gap:11px;}
/* The rails run off both edges of the pane, which is what says there is more to
   the side than fits, and they FADE rather than clip so the cut reads as scroll
   instead of as a broken box.
   THE #000 IS NOT A COLOUR: a mask gradient uses it as an alpha channel, which
   the ratchet's own note names. It means "opaque here", and a theme has no
   opinion about it. */
.mission-rail{display:flex; gap:8px; overflow-x:auto;
  margin:0 calc(var(--s7) * -1); padding:0 var(--s7) 2px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);}
.mission-pick{flex:none; padding:10px 15px; border-radius:var(--r-md); white-space:nowrap;}
.mission-pick-word{font-size:var(--t-body); font-weight:var(--w-semi);}
.mission-add{flex:none; width:190px; padding:10px 15px; border-radius:var(--r-md);
  border:var(--bd) dashed var(--edge); font-size:var(--t-body);}
.mission-add-when{flex:none; width:250px; padding:10px 15px; border-radius:var(--r-md);
  border:var(--bd) dashed var(--edge);}
.mission-map{position:relative; overflow:hidden; border:var(--bd) solid var(--edge);
  border-radius:var(--r-lg); background:var(--inset);}
.mission-frame{position:relative; width:100%; aspect-ratio:16/9;}
.mission-map-foot{display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; border-top:var(--bd) solid var(--edge);}
.mission-sweep{position:absolute; inset:0; pointer-events:none; width:45%;
  background:linear-gradient(90deg,transparent,var(--glow),transparent);
  animation:sweep 1.2s linear infinite;}
.mission-sweep-outfit{width:40%; animation:sweep 1.1s linear infinite;}

/* ---------- the job ---------- */
.mission-brief{display:flex; flex-direction:column; gap:10px; padding:14px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-lg); background:var(--inset);}
/* written for somewhere else: the box goes quiet until it is brought here */
.mission-brief-cold{border-color:var(--muted); opacity:.72;}
.mission-brief-body{font-size:var(--t-lead); line-height:1.5; color:var(--ink); cursor:text;}
.mission-brief-edit-link{align-self:flex-start;}
.mission-brief-edit{width:100%; padding:0; border:none; background:transparent;
  font-size:var(--t-lead); line-height:1.5; color:var(--ink); resize:vertical;}
.mission-brief-save{padding:9px 15px; border-radius:var(--r-md); background:var(--accent);}
.mission-brief-cancel{padding:9px 15px; border-radius:var(--r-md); border:var(--bd) solid var(--edge);}
.mission-dirs{display:flex; flex-wrap:wrap; gap:6px;}
.mission-dir{padding:9px 15px; border-radius:var(--r-pill);
  font-size:var(--t-small); font-weight:var(--w-semi);}

.mission-block{display:flex; flex-direction:column; gap:9px;}
.mission-block-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.mission-goals{display:flex; flex-direction:column; gap:1px; overflow:hidden;
  border:var(--bd) solid var(--edge); border-radius:var(--r-lg); background:var(--inset);}
.mission-goal{display:flex; align-items:flex-start; gap:12px; padding:13px 14px;
  border-bottom:var(--bd) solid var(--sel);}
.mission-goal-n{padding-top:3px;}
.mission-goal-main{display:flex; flex-direction:column; gap:4px; flex:1; min-width:0;}
.mission-goal-text{font-size:var(--t-body); line-height:1.4; color:var(--ink2); cursor:text;}
.mission-goal-edit{width:100%; padding:0; border:none; background:transparent;
  font-size:var(--t-body); color:var(--ink);}
.mission-goal-flag{align-self:flex-start;}
/* 24px is the size of a small square, and its corner is one of the four below
   the kit's floor, named in components.css */
.mission-goal-x{display:flex; align-items:center; justify-content:center; flex:none;
  width:24px; height:24px; border:var(--bd) solid var(--edge); border-radius:var(--r-sm);
  color:var(--muted); font-size:var(--t-tiny);}
.mission-goal-add{display:flex; align-items:center; gap:12px; padding:11px 14px;}
.mission-goal-new{flex:1; padding:0; border:none; background:transparent;
  font-size:var(--t-body); color:var(--ink);}
.mission-beats{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:9px; opacity:.55;}
.mission-beat{display:flex; flex-direction:column; gap:5px; padding:13px 14px;
  border:var(--bd) dashed var(--edge); border-radius:var(--r-lg); background:var(--inset);}
.mission-arts{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px;}
.mission-art{display:flex; flex-direction:column; overflow:hidden;
  border:var(--bd) solid var(--edge); border-radius:var(--r-lg); background:var(--inset);}
.mission-art-head{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 11px; border-bottom:var(--bd) solid var(--edge);}
.mission-art .mission-frame{aspect-ratio:4/3;}
.mission-art-body{display:flex; flex-direction:column; gap:7px; padding:11px;}
.mission-art-name{font-size:var(--t-body); font-weight:var(--w-semi); line-height:1.3;}
.mission-art-seen{line-height:1.5;}
.mission-reveal{padding:8px 11px; border:var(--bd) solid var(--edge); border-radius:var(--r-md);
  background:transparent; color:var(--muted); text-align:center;}
.mission-reveal-on{background:var(--sel); color:var(--accent);}

/* ---------- the crew ----------
   84px is the floor because 102 broke a company of six onto two rows, five and
   then one, which is part of what the room looked like when Mark called it a
   mess. */
.mission-cast{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:9px;}
.mission-crew{display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:11px 4px; border:var(--bd) solid var(--edge); border-radius:var(--r-lg);
  background:var(--inset);}
.mission-crew-on{border-color:var(--accent); background:var(--sel);}
/* 40px is the size of a face and 1.5px the ring: neither is a step */
.mission-face{display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; overflow:hidden; border-radius:var(--r-round);
  border:var(--bd-thick) solid var(--muted);
  font-size:var(--t-lead); font-weight:var(--w-semi); color:var(--ink4);}
.mission-face-on{border-color:var(--accent);}
.mission-crew-name{font-size:var(--t-tiny); font-weight:var(--w-semi);}
.mission-poster{overflow:hidden; border:var(--bd) solid var(--edge);
  border-radius:var(--r-lg); background:var(--inset); animation:fadeUp .45s ease both;}
.mission-poster-head{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); padding:16px 15px 13px; border-bottom:var(--bd) solid var(--edge);}
.mission-poster-title{font-size:var(--t-head); font-weight:var(--w-semi);}
.mission-poster-strip{display:flex; gap:1px;}
.mission-poster-cell{position:relative; flex:1; aspect-ratio:3/4; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;}
/* THE RAW COLOUR HERE IS THE DOCUMENTED KIND and it came with the markup: the
   caption is printed ON the painted portrait, so its shadow stays black
   whatever the theme is. A token would follow the theme and dissolve the
   caption into a pale picture in Day. */
.mission-poster-cap{position:relative; z-index:1; padding:0 3px 10px; text-align:center;
  text-shadow:0 1px 6px rgba(0,0,0,.7);}

/* ---------- the plan ----------
   Talking it over before you leave. It was called "the table" and is not called
   that any more (Mark, 2026-08-20, and he was blunt about it). */
.mission-pane-plan{gap:var(--s5);}
.mission-log{display:flex; flex-direction:column; gap:11px;
  min-height:200px; max-height:46vh; overflow-y:auto;}
.mission-log-empty{line-height:1.7;}
.mission-thinking{animation:pulse 1.2s ease-in-out infinite;}
/* the corner is asymmetric on purpose — the 4px is the tail — so it stays
   written out rather than joining the radius scale */
.mission-say-you{align-self:flex-end; max-width:88%; padding:9px 12px;
  border:var(--bd) solid var(--edge); border-radius:14px 14px 4px 14px;
  background:var(--inset); font-size:var(--t-small); line-height:1.45;}
.mission-say{display:flex; flex-direction:column; gap:3px;}
.mission-say-who{display:flex; align-items:baseline; gap:7px;}
.mission-say-name{font-size:var(--t-tiny); font-weight:var(--w-semi); color:var(--accent);}
.mission-say-body{font-size:var(--t-small); line-height:1.5; color:var(--ink2);}
.mission-composer{display:flex; align-items:center; gap:8px; padding:6px 6px 6px 13px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-lg); background:var(--inset);}
.mission-composer-input{font-size:var(--t-small);}
/* 30px is the size of a disc, not a step of a rhythm */
.mission-send{display:flex; align-items:center; justify-content:center; flex:none;
  width:30px; height:30px; border-radius:var(--r-round);
  background:var(--accent); color:var(--onAccent);}

/* ---------- the door bar ----------
   The one primary action, and it never scrolls away. Sticky rather than fixed,
   so it rides inside the canvas rather than over the whole window. */
.mission-door-bar{position:sticky; bottom:var(--s4); z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s6);
  padding:var(--s5) var(--s6); border:var(--bd) solid var(--edge);
  border-radius:var(--r-xl); background:var(--panel); box-shadow:var(--sh-panel);}
.mission-door-state{display:flex; flex-direction:column; gap:2px; min-width:0;}
.mission-door-acts{display:flex; align-items:center; gap:var(--s3); flex:none;}
.mission-outfit{position:relative; overflow:hidden; padding:var(--s4) var(--s6);
  border:var(--bd) solid var(--accent); border-radius:var(--r-pill);
  background:var(--accent); color:var(--onAccent);
  font-size:var(--t-body); font-weight:var(--w-semi); white-space:nowrap;}
.mission-outfit-busy{opacity:.75;}
.mission-door{display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4) var(--s6); border:var(--bd) solid var(--edge);
  border-radius:var(--r-pill); color:var(--muted);
  font-size:var(--t-body); font-weight:var(--w-semi); white-space:nowrap;}
/* Dressed: the door becomes the primary and hums, and the outfit button is
   GONE rather than greyed, because a finished step is not a disabled one. The
   door is never itself disabled — the machine will take an unfitted crew if
   that is what you want, and the state line says so in words. */
.mission-door-on{border-color:var(--accent); background:var(--accent);
  color:var(--onAccent); animation:hum 4s ease-in-out infinite;}

.mission-debrief{width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 16px; border:var(--bd) dashed var(--edge);
  border-radius:var(--r-lg); background:var(--inset);}
.mission-debrief-note{text-align:right;}

@media (max-width:900px){
  .mission{padding:var(--s3) var(--s5) var(--s6);}
  .mission-plate-place{font-size:var(--t-display);}
  .mission-plate-when{font-size:var(--t-title);}
  .mission-pane{padding:var(--s6);}
  .mission-rail{margin:0 calc(var(--s6) * -1); padding:0 var(--s6) 2px;}
  .mission-door-bar{flex-direction:column; align-items:stretch; gap:var(--s4);}
  .mission-outfit,.mission-door{flex:1; justify-content:center;}
}