/* ---------- the loader ----------
   The front door of the Lounge: continue, take one up, or go somewhere new.
   public/rooms/loader.js draws it.

   WRITTEN ON THE SCALE, not swept onto it. Every size is a type token, every
   corner a radius token, every gap a step of --s1..--s8, and every colour a
   theme token. The rooms that came before this one were converted after the
   fact and carry the pixels they were born with; there was no reason for a new
   room to inherit that.

   The mono band is a class here rather than mono()'s three inline values. Same
   family, same --t-label, same letterspacing the rest of the app uses for a
   kicker; it just does not ride in a style attribute. */

.loader{display:flex; flex-direction:column; gap:var(--s8); padding:var(--s3) var(--s7) var(--s8);
  animation:fadeUp .35s ease both;}
[data-render-phase="update"] .loader{animation:none!important;}

.loader-head{display:flex; flex-direction:column; gap:var(--s2);}
.loader-title{font-size:var(--t-display); font-weight:var(--w-semi); letter-spacing:var(--ls-head);}
.loader-sub{max-width:52ch; font-size:var(--t-body); line-height:var(--lh-body); color:var(--muted);}

/* Five trips already taken, for a shelf that has nothing on it yet. It is here
   only while the log is thin and it leaves on its own at three, because a demo
   button that never goes away stops being a demo button and becomes furniture.
   Pressing it twice is safe; a sample already on the shelf is skipped. */
.loader-samples{align-self:flex-start; margin-top:var(--s2);
  padding:var(--s2) var(--s5); border:var(--bd) dashed var(--edge);
  border-radius:var(--r-pill); transition:border-color var(--mo-fast);}
.loader-samples:hover{border-color:var(--accent);}
.loader-samples:hover .loader-meta{color:var(--accent);}

.loader-sec{display:flex; flex-direction:column; gap:var(--s5);}
.loader-sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);}
.loader-stack{display:flex; flex-direction:column; gap:var(--s1);}

/* ---------- the mono band ---------- */
.loader-label,.loader-kicker,.loader-meta,.loader-scrub,.loader-stow{
  font-family:'IBM Plex Mono',monospace; font-size:var(--t-label);}
.loader-label{letter-spacing:var(--ls-wide); color:var(--muted);}
.loader-kicker{letter-spacing:var(--ls-label); color:var(--muted);}
.loader-kicker-on{color:var(--accent);}
.loader-meta{letter-spacing:var(--ls-label); color:var(--muted); line-height:var(--lh-tight);}

/* ---------- on the table ----------
   The one card that is not on the shelf. It is wider, it leads with the map at
   reading size, and its arrow is a play triangle rather than the log's chevron,
   because walking back into a room you are already standing in is a different
   act from opening a new one. */
.loader-live{display:flex; flex-direction:column; overflow:hidden;
  border:var(--bd) solid var(--accent); border-radius:var(--r-xl);
  background:var(--panel); box-shadow:var(--sh-card);}
.loader-live-face{display:flex; align-items:stretch; gap:0; width:100%; text-align:left;}
.loader-live-frame{flex:none; width:168px; align-self:stretch; position:relative; overflow:hidden;
  border-right:var(--bd) solid var(--edge);}
.loader-live-body{display:flex; flex-direction:column; justify-content:center; gap:var(--s5);
  flex:1; min-width:0; padding:var(--s7);}
.loader-live-title{font-size:var(--t-title); font-weight:var(--w-semi); letter-spacing:var(--ls-head);}
.loader-live-tools{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s4) var(--s7); border-top:var(--bd) solid var(--edge); background:var(--inset);}
.loader-stow{padding:var(--s2) var(--s5); border:var(--bd) solid var(--edge);
  border-radius:var(--r-pill); letter-spacing:var(--ls-label); color:var(--muted);}
.loader-stow:hover{border-color:var(--accent); color:var(--accent);}

/* ---------- the log ---------- */
.loader-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--s5);}
.loader-card{display:flex; flex-direction:column; overflow:hidden;
  border:var(--bd) solid var(--edge); border-radius:var(--r-lg);
  background:var(--panel); box-shadow:var(--sh-card); transition:border-color var(--mo-fast);}
.loader-card:hover{border-color:var(--accent);}
.loader-card-face{display:flex; flex-direction:column; width:100%; text-align:left;}
.loader-frame{position:relative; width:100%; aspect-ratio:16/10; overflow:hidden;
  border-bottom:var(--bd) solid var(--edge);}
.loader-card-body{display:flex; flex-direction:column; gap:var(--s4); padding:var(--s5);}
.loader-card-title{font-size:var(--t-lead); font-weight:var(--w-semi); line-height:var(--lh-tight);}
/* two lines of the job and then the ellipsis: enough to know which trip this
   was, never enough to become a paragraph on a card */
.loader-card-brief{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-size:var(--t-small); line-height:var(--lh-body); color:var(--ink3);}
.loader-card-foot{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);}
.loader-card-tools{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s3) var(--s5); border-top:var(--bd) solid var(--edge); background:var(--inset);}
.loader-scrub{letter-spacing:var(--ls-label); color:var(--muted);}
.loader-scrub:hover{color:var(--text);}

/* ---------- who went ----------
   26px is the size of a face in a row of them, and 1px is the ring: neither is
   a step of a rhythm, so neither is a token. The overlap is what makes six of
   them read as a company rather than a list. */
.loader-faces{display:flex; align-items:center;}
.loader-face{position:relative; flex:none; width:26px; height:26px; overflow:hidden;
  border-radius:var(--r-round); border:var(--bd) solid var(--panel); margin-right:-6px;
  background:var(--inset);}
.loader-face:last-child{margin-right:0;}

/* ---------- somewhere new ----------
   Quiet under a log, a full plate when the room is empty. */
.loader-machine{display:flex; align-items:center; gap:var(--s7); width:100%; text-align:left;
  padding:var(--s6) var(--s7); border:var(--bd) solid var(--edge); border-radius:var(--r-lg);
  background:var(--panel); transition:border-color var(--mo-fast);}
.loader-machine:hover{border-color:var(--accent);}
.loader-machine-main{display:flex; flex-direction:column; gap:var(--s1); flex:1; min-width:0;}
.loader-machine-lead{font-size:var(--t-lead); font-weight:var(--w-semi);}
.loader-machine-note{max-width:56ch; font-size:var(--t-small); line-height:var(--lh-body); color:var(--muted);}
.loader-machine-side{display:flex; flex-direction:column; align-items:flex-end; gap:var(--s2); flex:none;}
/* The hero is the same card on a grid: the pitch takes the whole first row,
   and the light it is set to shares the second with the arrow. Stacking all
   three in a column put the one control at the bottom LEFT, under a paragraph,
   which is the corner nothing is ever looked for in. */
.loader-machine-hero{display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:var(--s6) var(--s5); padding:var(--s8) var(--s8) var(--s7);
  border-color:var(--accent); box-shadow:var(--sh-panel);
  animation:hum 4s ease-in-out infinite;}
.loader-machine-hero .loader-machine-main{grid-column:1 / -1;}
.loader-machine-hero .loader-machine-lead{font-size:var(--t-room); letter-spacing:var(--ls-head);}
.loader-machine-hero .loader-machine-note{font-size:var(--t-body);}
.loader-machine-hero .loader-machine-side{flex-direction:row; align-items:center; gap:var(--s5);}
.loader-machine-hero .loader-arrow{justify-self:end;}

/* 34px is the size of the disc. The house draws this same one at 38 in the
   mission foot and at 30 in a composer; none of the three is a step. */
.loader-arrow{display:flex; align-items:center; justify-content:center; flex:none;
  width:34px; height:34px; border-radius:var(--r-round);
  background:var(--accent); color:var(--onAccent);}
.loader-arrow-on{align-self:center; margin-right:var(--s7);}

@media (max-width:900px){
  .loader{padding:var(--s3) var(--s5) var(--s7);}
  .loader-live-face{flex-direction:column;}
  .loader-live-frame{width:100%; aspect-ratio:16/9; border-right:none;
    border-bottom:var(--bd) solid var(--edge);}
  .loader-arrow-on{align-self:flex-start; margin:0 0 var(--s6) var(--s7);}
  .loader-machine{flex-direction:column; align-items:flex-start; gap:var(--s5);}
  .loader-machine-side{align-items:flex-start;}
}