/* Sootfall's palette, so the game reads as part of the site rather than a
   bolt-on. Written phone-up: every rule here is the mobile rule, and the only
   media query widens it. */
:root{
  --ink:#1B1A20; --paper:#E8E6E1; --surface:#DCD9D3; --grime:#5C5A62;
  --faint:#85828C; --rule:#C4C1BC; --signal:#9AB237; --signal-ink:#14141A;
  --bad:#B4432F; --bad-ink:#A33A28;
  /* Furniture that is dark in BOTH themes: the hero, the coal bar, the tabs,
     the bench, the pick-a-department sheet. These sit over dark room art or are
     the app's own chrome, so inverting them would fight the illustrations. In
     dark mode the slab lifts slightly so it still separates from the page. */
  --slab:#1B1A20; --slab-ink:#E8E6E1;
  /* .91 left the secondary grey at 4.46 against the darkest part of the art,
     just under AA. Measured, not guessed: .94 is the first value that clears it
     with a little room. Dark mode has no such problem, the art is already dark. */
  --scrim:rgba(232,230,225,.94);
  /* The heavy outline the whole design is built on. Its own token because at
     full strength in dark mode it shouts. */
  --edge:#1B1A20;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --display:"Big Shoulders Display",Impact,sans-serif;
}

/* The site follows the visitor rather than picking a side, and these are its
   values, so the game matches it in both modes by construction rather than by
   somebody keeping two palettes in step by hand. See _site_template.html in the
   enjin-misfits repo. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EAE8E4; --paper:#1B1A20; --surface:#2E2D32; --grime:#DEDCE2;
    --faint:#C5C2CB; --rule:#3A383F; --signal:#AEC63C; --signal-ink:#14141A;
    --bad:#B4432F; --bad-ink:#E67C68;
    --slab:#26252C; --slab-ink:#E8E6E1;
    --scrim:rgba(27,26,32,.90);
    --edge:#43414B;
  }
}
:root[data-theme="dark"]{
  --ink:#EAE8E4; --paper:#1B1A20; --surface:#2E2D32; --grime:#DEDCE2;
  --faint:#C5C2CB; --rule:#3A383F; --signal:#AEC63C; --signal-ink:#14141A;
  --bad:#B4432F; --bad-ink:#E67C68;
  --slab:#26252C; --slab-ink:#E8E6E1;
  --scrim:rgba(27,26,32,.90);
  --edge:#43414B;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font:15px/1.5 var(--mono);
  padding:0 16px env(safe-area-inset-bottom);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px;margin:0 auto;padding-block:16px 48px}

/* The works, so the game opens on a place rather than a heading. Full bleed on
   a phone: the 16px body gutter is cancelled with a negative margin. */
.hero{position:relative;margin:0 -16px 0;background:var(--slab);overflow:hidden}
/* If the header <img> comes back: display:block;width:100%;height:auto;
   max-height:34vh;object-fit:cover;object-position:center 62%. height:auto is
   load bearing, or the 900px height attribute stays in force and it stretches. */
.heroin{
  position:absolute;left:0;right:0;bottom:0;padding:16px;
  background:linear-gradient(to top,rgba(20,20,26,.92),rgba(20,20,26,.55) 55%,transparent);
  color:var(--slab-ink);
}
.heroin h1{margin:0}
.heroin p{margin:2px 0 0;font-size:12.5px;color:#C9C6C0}

h1{font:800 34px/0.95 var(--display);letter-spacing:.01em;margin:0 0 4px;text-transform:uppercase}
.sub{color:var(--grime);font-size:13px;margin:0 0 20px}

.bar{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  background:var(--slab);color:var(--slab-ink);
  padding:14px 16px;border-radius:2px;margin-bottom:20px;
}
.right{text-align:right}
.bar b{
  font:800 30px/1 var(--display);font-variant-numeric:tabular-nums;
  display:flex;align-items:center;gap:8px;
}
.bar>div>span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#A9A6A0}

button{font:700 13px var(--mono);cursor:pointer}
.btn{
  background:var(--ink);color:var(--paper);border:0;
  padding:14px 18px;border-radius:2px;min-height:48px;width:100%;
  text-transform:uppercase;letter-spacing:.08em;
}
.btn.ghost{background:transparent;color:var(--ink);border:3px solid var(--edge)}
.btn[disabled]{opacity:.4;cursor:not-allowed}

.btn.collect{background:var(--signal);color:var(--signal-ink);margin-bottom:8px}
.btn.collect[disabled]{background:var(--surface);color:var(--faint);opacity:1}
.store{height:6px;background:var(--surface);border:2px solid var(--edge);border-radius:2px;overflow:hidden}
.store i{display:block;height:100%;width:0;background:var(--ink);transition:width .4s}
.store i.full{background:var(--bad)}
.storeNote{font-size:12px;color:var(--grime);margin:6px 0 18px;min-height:1.2em}

.deptfoot{border-top:3px solid var(--edge);padding:10px 14px}
.up{
  width:100%;min-height:44px;border:3px solid var(--edge);background:transparent;
  color:var(--ink);border-radius:2px;padding:10px;text-transform:uppercase;
  letter-spacing:.06em;
}
.up.afford{background:var(--ink);color:var(--paper)}
.up[disabled]{opacity:.45;cursor:not-allowed}
.up.maxed{border-style:dashed;opacity:.6}

.start{
  background:var(--signal);color:var(--signal-ink);
  border:3px solid var(--edge);border-radius:2px;
  padding:16px;margin-bottom:20px;
}
.start h2{font:800 22px/1 var(--display);margin:0 0 6px;text-transform:uppercase}
.start p{font-size:13px;line-height:1.45;margin:0 0 12px}
.start .btn{background:var(--ink);color:var(--paper)}

.dept{border:3px solid var(--edge);border-radius:2px;margin-bottom:14px;background:var(--surface)}
/* The header stays solid so the numbers are always legible; the room goes behind
   the crew, so a Grimp looks like it is standing in the place it works. */
.dept > header{
  padding:12px 14px;border-bottom:3px solid var(--edge);
  background:var(--slab);color:var(--slab-ink);
  position:relative;              /* the crew bonus bar hangs off this */
}
.dept .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.dept h2{font:800 21px/1 var(--display);margin:0;text-transform:uppercase}
.dept .rate{font:800 21px/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
/* On the slab in both themes, so it cannot take the page's grey. */
.dept .rate i{font:400 11px var(--mono);font-style:normal;color:#A9A6A0;margin-left:3px}
.dept .meta{font-size:11px;color:#A9A6A0;margin-top:5px;letter-spacing:.04em;text-transform:uppercase}
.dept.working{background:var(--paper)}
.dept.bonus > header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--signal);transform-origin:left;
}
/* Only on the render where the bonus was newly earned. Crossing into it is a
   25% jump and the only other signal is a line of text quietly changing, which
   is exactly how people miss the mechanic. */
.dept.justbonus > header::after{animation:bonusin .45s cubic-bezier(.2,.8,.2,1)}
@keyframes bonusin{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.dept.bonus .meta{color:var(--signal)}
.dept.bonus .rate{color:var(--signal)}

/* Empty departments stay out of the way instead of filling the screen with
   dashed boxes: one quiet line until somebody works there. */
/* An empty room still shows the room, just darker, so it reads as somewhere to
   send people rather than a missing panel. */
.dept .hint{
  padding:26px 14px;font-size:12px;color:#C9C6C0;text-align:center;
  background-image:linear-gradient(rgba(20,20,26,.72),rgba(20,20,26,.72)),var(--art,none);
  background-size:cover;background-position:center 60%;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}

/* auto-fill so the row is always full, whatever the screen. Fixed widths
   left 75px of dead gutter on a 375px phone. */
/* align-items:start matters: stretched to the row height, the button was exactly
   as tall as its thumbnail and the label underneath rendered OUTSIDE the box,
   landing on the row below. Let each card size to its own content instead. */
.slots{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));
  gap:12px 10px;padding:14px;align-items:start;
}
/* The floor the crew stands on. A lighter scrim than the empty state: the
   thumbnails carry their own dark borders and do not need much help. */
.dept .slots{
  background-image:linear-gradient(rgba(20,20,26,.42),rgba(20,20,26,.58)),var(--art,none);
  background-size:cover;background-position:center 60%;
}
.dept .slots .slot{border-color:rgba(232,230,225,.45);color:#C9C6C0}
.dept .slots .grimp .job{color:#D8D5CF}
.dept .slots .grimp.suited .job{color:var(--signal)}
.slot{
  aspect-ratio:1;border:2px dashed var(--rule);border-radius:2px;
  display:grid;place-items:center;color:var(--faint);font-size:11px;
}
.grimp{
  border:0;padding:0;background:none;text-align:left;width:100%;
  display:flex;flex-direction:column;   /* so the card is thumbnail PLUS label */
}
/* The mint tile at the end of the bench. An anchor wearing .grimp, so it sits
   in the same grid at the same size, with a dashed square where the artwork
   would be: the same shape the departments use for a slot nobody is standing
   in, which is what this is. */
.mintmore{text-decoration:none;color:inherit}
/* Fixed light values, not --grime. The tray is dark artwork in both themes, so
   a theme-following grey turns dark-on-dark in light mode: measured at 3.09.
   These are the same values an empty department slot uses on room art, and
   .tray .grimp .job already handles the label the same way. */
.mintmore .slot{
  width:100%;height:100%;
  font:700 26px/1 var(--mono);
  color:#C9C6C0;border-color:rgba(232,230,225,.45);
}
.mintmore:hover .slot,.mintmore:focus-visible .slot{
  border-color:var(--signal);color:var(--signal);
}
.thumb{position:relative;width:100%;aspect-ratio:1}
.grimp img{
  width:100%;height:100%;display:block;border-radius:2px;
  border:2px solid var(--edge);background:var(--rule);object-fit:cover;
}
.grimp.suited img{border-color:var(--signal);border-width:3px}
.grimp.sel img{outline:3px solid var(--edge);outline-offset:2px}
/* On the image, not over the label. */
.grimp .id{
  position:absolute;left:0;bottom:0;background:var(--slab);color:var(--slab-ink);
  font-size:10px;padding:1px 4px;border-radius:0 2px 0 2px;
}
/* The department a Grimp belongs in, on the card. This is the whole game and it
   used to be hidden behind a tap. */
.grimp .job{
  display:block;font-size:10px;line-height:1.25;margin-top:4px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--grime);
}
.grimp.suited .job{color:var(--signal-ink);font-weight:700}

/* The break room, where the crew waits. Same treatment as a department floor so
   the bench reads as somewhere rather than as leftover space. */
.tray{
  border:3px solid var(--edge);border-radius:2px;padding:14px;margin-bottom:20px;
  background-image:linear-gradient(rgba(20,20,26,.58),rgba(20,20,26,.72)),url(art/break.webp);
  background-size:cover;background-position:center 55%;
  color:var(--slab-ink);
}
.tray h2{font:800 20px/1 var(--display);margin:0 0 2px;text-transform:uppercase}
.tray .sub{margin:0 0 12px;color:#C9C6C0}
.tray .slots{padding:0;background:none}
.tray .grimp .job{color:#D8D5CF}
.tray .grimp.suited .job{color:var(--signal)}

.picked{
  position:sticky;bottom:0;background:var(--slab);color:var(--slab-ink);
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  margin:0 -16px;display:none;z-index:5;
}
.picked.on{display:block}
.picked p{margin:0 0 10px;font-size:12px}
.picked .row{display:flex;flex-wrap:wrap;gap:8px}
.picked button{
  flex:1 1 auto;min-width:96px;min-height:44px;
  background:var(--paper);color:var(--ink);border:0;border-radius:2px;
  padding:10px 12px;text-transform:uppercase;letter-spacing:.06em;
}
/* The department this Grimp is actually for, called out so nobody has to read
   five options and remember which garment goes where. */
.picked button.best{background:var(--signal);color:var(--signal-ink)}
.picked button.best::after{content:" \2605"}
.picked button.off{background:transparent;color:var(--slab-ink);border:2px solid var(--slab-ink)}
.picked button[disabled]{opacity:.35}

/* ---------- toasts ----------
   Messages used to be a block at the top of the page, so every one of them
   shoved the whole page down on the way in and yanked it back up on the way
   out, while you were reading or mid-tap. These float clear of the flow: nothing
   below them ever moves.

   They sit at the bottom, above the pick-a-department bar when it is open
   (--picked-h), which is the one thing that could hide them. */
.toasts{
  position:fixed;left:0;right:0;bottom:var(--picked-h,0px);z-index:20;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:0 16px calc(14px + env(safe-area-inset-bottom));
  pointer-events:none;              /* never blocks a tap on the page beneath */
}
.toast{
  pointer-events:auto;width:100%;max-width:520px;box-sizing:border-box;
  padding:12px 14px;border:3px solid var(--edge);border-radius:2px;
  box-shadow:0 4px 0 rgba(27,26,32,.22);
  font-size:13px;
  animation:toastin .22s cubic-bezier(.2,.8,.2,1);
}
.toast.info{background:var(--signal);color:var(--signal-ink)}
.toast.err{background:var(--bad);color:#fff}
.toast.out{animation:toastout .2s ease-in forwards}

/* The rise only, never a fade in. A toast has to be legible even if the
   animation never runs: frames stop in a backgrounded tab while the timer that
   expires the toast does not, and a keyframe starting at opacity 0 would leave
   it invisible for its whole life. Frozen, this one is simply 12px low. */
@keyframes toastin{
  from{transform:translateY(12px)}
  to{transform:translateY(0)}
}
@keyframes toastout{
  from{transform:translateY(0);opacity:1}
  to{transform:translateY(8px);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .toast{animation:none}
  .toast.out{animation:none;opacity:0}
}

.clockin{border:3px solid var(--edge);border-radius:2px;background:var(--surface);padding:20px;margin-bottom:16px}
.clockin h2{font:800 28px/1 var(--display);margin:0 0 10px;text-transform:uppercase}
.clockin p{font-size:13.5px;line-height:1.55;margin:0 0 14px}
.clockin .sub{margin:12px 0 0;text-align:center}
/* The clocking-in-soon screen borrows the clock-in card; only the count is new. */
.maint .count{
  font:800 34px/1 var(--display);letter-spacing:.02em;
  margin:0 0 16px;color:var(--ink);font-variant-numeric:tabular-nums;
}

.assure{list-style:none;margin:0 0 18px;padding:0;font-size:12.5px}
.assure li{padding:7px 0 7px 24px;position:relative;border-top:1px solid var(--rule);color:var(--grime)}
.assure li:first-child{border-top:0}
.assure li::before{
  content:"";position:absolute;left:2px;top:13px;width:9px;height:9px;
  background:var(--signal);border:2px solid var(--edge);border-radius:50%;
}

.qrcard{border:3px solid var(--edge);border-radius:2px;background:var(--slab);color:var(--slab-ink);padding:20px;text-align:center}
.steps{list-style:none;counter-reset:s;margin:0 0 18px;padding:0;text-align:left;font-size:12.5px}
.steps li{counter-increment:s;padding:8px 0 8px 32px;position:relative;line-height:1.45;color:#C9C6C0}
.steps li b{color:var(--slab-ink)}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:7px;
  width:21px;height:21px;border-radius:50%;
  background:var(--signal);color:var(--signal-ink);
  font:700 11px/21px var(--mono);text-align:center;
}
.qrcard img{width:230px;max-width:72vw;image-rendering:pixelated;background:#fff;padding:10px;border-radius:2px}
.orlink{font-size:12.5px;color:#C9C6C0;margin:14px 0 0}
.waiting{font-size:12px;color:var(--signal);margin:10px 0 0;letter-spacing:.06em;text-transform:uppercase}
a{color:inherit}

@media (min-width:600px){
  .slots{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
  h1{font-size:48px}
}


.board{border:3px solid var(--edge);border-radius:2px;padding:14px;background:var(--surface);margin-bottom:20px}
.board h2{font:800 20px/1 var(--display);margin:0 0 4px;text-transform:uppercase}
.board .sub{margin:0 0 12px}
/* The prize, above the ranking it is paid on. The signal colour, because it
   is the one line on this page that is about ENJ rather than coal. */
.board .poolLine{
  background:var(--signal);color:var(--signal-ink);
  border:3px solid var(--edge);border-radius:2px;
  padding:10px 12px;margin:0 0 12px;
  font-size:12px;font-weight:700;letter-spacing:.02em;
}
.board ol{list-style:none;margin:0;padding:0}
.board li{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-top:1px solid var(--rule);font-size:13px}
.board li:first-child{border-top:0}
.board li.you{font-weight:700}
.board .pos{width:28px;color:var(--grime);font-variant-numeric:tabular-nums}
.board li.you .pos{color:var(--ink)}
.board .who{flex:1}
.board .amt{font-variant-numeric:tabular-nums}
.board .none{color:var(--grime);padding:8px 0}

.nogrimps{border:3px solid var(--edge);border-radius:2px;padding:18px;background:var(--surface);margin-bottom:20px}
.nogrimps h2{font:800 22px/1 var(--display);margin:0 0 10px;text-transform:uppercase}
.nogrimps p{font-size:13px;line-height:1.5;margin:0 0 14px}
.nogrimps b{word-break:break-all;font-weight:700}
.nogrimps .sub{margin:12px 0 0}

/* ---------- motion ----------
   Small and few. A number that moves when it changes reads as production; a
   page that is always moving reads as noise. */
@keyframes bank{
  0%{transform:translateY(6px);opacity:.3}
  60%{transform:translateY(-2px)}
  100%{transform:translateY(0);opacity:1}
}
.bar .banked{display:inline-block;animation:bank .45s cubic-bezier(.2,.8,.2,1)}

@keyframes ready{
  0%,100%{box-shadow:0 0 0 0 rgba(154,178,55,0)}
  50%{box-shadow:0 0 0 4px rgba(154,178,55,.35)}
}
/* Only once the store is worth emptying, so it is a nudge and not a strobe. */
.btn.collect.ready{animation:ready 2.4s ease-in-out infinite}

.store i{transition:width .9s linear,background .3s}

@media (prefers-reduced-motion:reduce){
  .bar .banked,.btn.collect.ready{animation:none}
  .dept.justbonus > header::after{animation:none}
  .store i{transition:none}
}

/* ---------- tabs ----------
   Three places, not one endless page. Top rather than bottom: the pick-a-
   department bar is already stuck to the bottom and two bars fighting for the
   same thumb is worse than a scroll. */
/* The attribute has to win. `hidden` works through the user agent's
   [hidden]{display:none}, so any author rule that sets display beats it: the
   tabs were showing on the clock-in screen because this said flex. */
.tabs[hidden]{display:none}
.tabs{
  display:flex;gap:0;margin:0 -16px 16px;
  background:var(--slab);border-bottom:3px solid var(--signal);
  position:sticky;top:0;z-index:6;
}
.tabs a{
  flex:1 1 0;text-align:center;text-decoration:none;
  color:#A9A6A0;font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:15px 8px;min-height:48px;
}
.tabs a.on{background:var(--signal);color:var(--signal-ink)}

/* ---------- account ---------- */
.panel{border:3px solid var(--edge);border-radius:2px;background:var(--surface);padding:18px;margin-bottom:16px}
.panel h2{font:800 22px/1 var(--display);margin:0 0 6px;text-transform:uppercase}
.panel .sub{margin:0 0 14px}
.panel .sub b{color:var(--ink);word-break:break-all}
.fieldlabel{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grime);margin-bottom:6px}
.btn.danger{border-color:var(--bad-ink);color:var(--bad-ink)}
.boardfoot{margin-top:-4px}

/* Naming, shown once when a wallet first clocks in. */
.naming{border:3px solid var(--edge);border-radius:2px;background:var(--signal);color:var(--signal-ink);padding:18px;margin-bottom:20px}
.naming h2{font:800 24px/1 var(--display);margin:0 0 6px;text-transform:uppercase}
.naming p{font-size:13px;margin:0 0 14px;line-height:1.45}
.namerow{display:flex;gap:8px}
.namerow input{
  flex:1 1 auto;min-width:0;min-height:48px;padding:10px 12px;
  border:3px solid var(--edge);border-radius:2px;background:var(--paper);
  color:var(--ink);font:700 15px var(--mono);
}
.namerow .btn{width:auto;flex:0 0 auto;padding:14px 20px}
.namehint{font-size:11.5px;margin:10px 0 0;opacity:.8}
.namehint.bad{color:var(--bad-ink);background:var(--paper);padding:6px 8px;border-radius:2px;opacity:1;font-weight:700}
.skip{background:none;border:0;color:var(--signal-ink);text-decoration:underline;padding:10px 4px;min-height:44px;margin-top:8px}
.board li .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- the coal mark ----------
   Inline so it inherits colour: the same glyph sits on the dark bar, the green
   collect button and the light board without a second file. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{
  width:1em;height:1em;vertical-align:-0.13em;
  display:inline-block;flex:0 0 auto;
}
/* Against the big number, where the facets are actually visible. Ten pixels
   beside a caption was just a dot. */
.bar .ico{width:.78em;height:.78em}
.btn.collect .ico{width:1.15em;height:1.15em;vertical-align:-0.2em;margin:0 1px}
.board .amt .ico{width:.95em;height:.95em;margin-right:5px}
.up .ico{width:1em;height:1em;vertical-align:-0.15em;margin:0 2px}

/* ---------- the payout pick ----------
   The same crew tile as the shift, marked differently on purpose: selection on
   the shift is momentary and this is a standing choice. */
#payoutPick{padding:0;margin-bottom:2px}
/* Every tile keeps room for the chip, so moving the choice does not reflow the
   grid under the thumb that just tapped it. */
#payoutPick .grimp .job{min-height:1.65em}
#payoutPick .grimp.sel img{border-color:var(--signal);outline:3px solid var(--signal);outline-offset:2px}
#payoutPick .grimp.sel .job{
  background:var(--signal);color:var(--signal-ink);font-weight:700;
  text-align:center;border-radius:2px;padding:2px 0;
}

/* ---------- the two boards ----------
   Week and all time, side by side rather than on separate pages: they answer
   the same question over two different spans, and a player comparing them
   should not have to navigate. */
.boardtabs{display:flex;gap:8px;margin:0 0 14px}
.boardtabs button{
  flex:1 1 0;min-height:44px;padding:11px 8px;
  background:transparent;color:var(--grime);
  border:3px solid var(--rule);border-radius:2px;
  text-transform:uppercase;letter-spacing:.08em;
}
.boardtabs button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* What the crew bonus still needs. Quieter than the meta line above it: this is
   a thing to aim at, not a thing that happened. */
.dept .goal{
  font-size:11px;letter-spacing:.02em;color:var(--signal);
  margin-top:4px;
}

/* Coal the store could not hold. Said plainly rather than in red: it is a
   nudge to come back sooner, not an error. */
.storeNote.lost{color:var(--bad-ink);font-weight:700}

/* ---------- today's demand ----------
   Loud enough to be the reason someone opened the app, quiet enough that it is
   not competing with the collect button. */
/* The deadline the whole week hangs off. Deliberately quieter than the demand
   strip below it: demand is today's opportunity, this is the clock, and two
   shouting bars stacked on each other means neither gets read. It goes loud
   only in the last day, when it stops being context and starts being a warning
   that the store is about to be emptied. */
.weekLine{
  background:var(--surface);color:var(--ink);
  border:3px solid var(--edge);border-radius:2px;
  padding:10px 12px;margin:0 0 12px;
  font-size:12px;font-weight:700;letter-spacing:.02em;
}
.weekLine.soon{background:var(--bad);color:#F4F1EC}
/* The streak, under the store it depends on. Quiet as a nudge; the signal
   colour once there is a streak to lose. */
.streakLine{
  background:var(--surface);color:var(--grime);
  border:3px solid var(--edge);border-radius:2px;
  padding:10px 12px;margin:-8px 0 18px;
  font-size:12px;font-weight:700;letter-spacing:.02em;
}
.streakLine.on{background:var(--signal);color:var(--signal-ink)}
.demandLine{
  background:var(--signal);color:var(--signal-ink);
  border:3px solid var(--edge);border-radius:2px;
  padding:10px 12px;margin:0 0 16px;
  font-size:12px;font-weight:700;letter-spacing:.02em;
}
.dept.demand{box-shadow:0 0 0 3px var(--signal)}

/* ---------- the draw ---------- */
.panel.draw .odds{margin:0 0 14px}
.panel.draw .odds div{
  display:flex;justify-content:space-between;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--rule);
}
.panel.draw .odds div:last-child{border-bottom:0}
.panel.draw .odds .k{color:var(--grime);font-size:12px}
.panel.draw .odds .v{font-weight:700}

.drawWarn{
  background:var(--paper);border-left:3px solid var(--bad-ink);
  padding:9px 11px;margin:0 0 14px;font-size:12px;font-weight:700;color:var(--bad-ink);
}

/* ---------- the guide ----------
   A reference page, so it is built to be scanned rather than read: short
   sections under headings you can find, and a jump bar because eleven sections
   on a phone is a lot of thumb.

   The jump links scroll rather than setting a hash. The router reads the hash
   to decide which view is showing, so an in-page anchor would navigate the
   whole app back to the shift. */
.gback{margin-bottom:14px}
.gjump{
  display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;
}
/* 44px because that is the rule everywhere else in this page, and short
   labels because the headings spelled out took five rows and pushed the guide
   itself below the fold on a phone. */
.gjump button{
  background:var(--surface);color:var(--ink);
  border:3px solid var(--edge);border-radius:2px;
  padding:8px 10px;min-height:44px;
  font:700 10.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;
}
.panel.guide{scroll-margin-top:60px}
.panel.guide p{font-size:13.5px;line-height:1.55;margin:0 0 12px}
.panel.guide p:last-child{margin-bottom:0}
.panel.guide p b{color:var(--ink)}
.guide .gsub{color:var(--grime);font-size:12.5px}
.guide .gsub b{color:var(--ink)}

/* The one thing people get wrong, so it does not read as another paragraph. */
.guide .gwarn{
  background:var(--paper);border-left:3px solid var(--signal);
  padding:10px 12px;margin:0 0 12px;font-size:12.5px;font-weight:700;
}

/* Rows of "thing -> what it is worth". Same shape as the draw's odds block. */
.gtable{margin:4px 0 12px}
.gtable div{
  display:flex;justify-content:space-between;gap:14px;
  padding:8px 0;border-bottom:1px solid var(--rule);
}
.gtable div:last-child{border-bottom:0}
.gtable .k{font-weight:700;font-size:12.5px;flex:0 0 auto}
.gtable .v{color:var(--grime);font-size:12px;text-align:right}

/* The crew bonus worked through on real garments, pulled from the same table
   the game scores with. Yes and no need to be told apart at a glance. */
.gex{margin:0 0 12px}
.gex div{
  display:flex;gap:10px;align-items:baseline;
  padding:9px 11px;margin-bottom:6px;border-radius:2px;
  border:3px solid var(--edge);font-size:12.5px;line-height:1.45;
}
.gex .mark{font-weight:700;flex:0 0 auto}
.gex .yes{background:var(--signal);color:var(--signal-ink)}
.gex .no{background:var(--surface);color:var(--ink)}
.gex .yes b,.gex .no b{font-weight:700}

/* ---------- the works, behind everything ----------
   Fixed rather than scrolling, so the page moves over the place instead of the
   place moving with it. Behind a scrim in the page's own colour, because text
   sits directly on this in a few spots and a busy picture under small type is
   how a page stops being readable. -1 keeps it out of the way of every stacking
   context the app already uses. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(var(--scrim),var(--scrim)),
    url(art/backdrop.webp) center center / cover no-repeat;
}

/* ---------- no header image ----------
   The band is gone and the title sits straight on the backdrop. The <img> is
   out of the markup too, because a hidden image is still downloaded (161 KB,
   first). Putting it back is the one-line <img> noted in index.html plus
   deleting this block.

   The colours have to change with it: the heading and caption were written for
   light text over dark art, and the page behind them is now light in light
   mode. */
.hero{background:none;overflow:visible}
.heroin{
  position:static;background:none;
  padding:26px 16px 16px;
  color:var(--ink);
}
.heroin p{color:var(--grime)}