/* =======================================================================
   hud.css — THE CHROME, IN ONE PLACE

   Every walked page floats the same chrome over its canvas: the bottom BAR
   (coin counter, hint, round buttons - built by js/frost-hud.js) and the
   drawn corner STICKERS (the newspaper, the map, the eye clock). The .plate
   and .back rules further down skin the older word-in-a-pill chrome, which
   survives only on the lounge's legacy isometric view and the _*.html
   harnesses - the walked pages gave those up; see THE THIRD PASS below.
   Before any of this, each page carried its own copy of the styling and the
   copies had already drifted - two different background colours, two
   different border alphas, two different naming schemes. Five copies of a
   look is five places to edit and four places to forget.

   THE LOOK LIVES HERE, AND SO DOES THE SEAT (2026-08-04). The old law was
   "the look lives here and the LAYOUT stays on the page", on the reasoning
   that where a plate sits is page-specific. It is not: twenty-two pages
   carried a byte-identical copy of the same `.hud`/`.hud--bot` rule, and two
   pages carried the markup with no rule at all and drew their chrome below
   the fold. So the seat moved in here too - see WHERE IT SITS.

   ONE THING STAYS ON THE PAGE, AND ONLY ONE: `display`. The lounge is three
   views on one document and its chrome has to appear and disappear with
   body.walked, which is commented at length in lounge.html. That is the half
   that is genuinely page-specific. Move any more of it and you break the
   lounge; move any less and the drift comes back.

   TWO NAMING SCHEMES, ONE SKIN. The blocks and the interiors call these
   .plate/.back/.hint; the walked lounge calls them .whud__plate/.whud__link/
   .whud__hint because it needed its own HUD that could hide behind body.walked.
   Renaming either would touch markup on pages other people are working in, for
   no gain, so both names are listed on every rule here instead.

   THE LOOK: CLUB PENGUIN. It used to be Y2K foil - dark glass, an iridescent
   rim, a sheen that travelled across it. Handsome, and wrong for what this
   site actually is: you walk a room, you click furniture, things happen. That
   is a children's virtual world, and the one that solved this HUD in 2005 was
   Club Penguin. Reference and the measurements taken off it are in
   reference/style/NOTES.txt; the five rules that matter are:

     1. EVERYTHING IS OUTLINED, thickly - about a tenth of the control's height.
     2. THE OUTLINE IS THE OBJECT'S OWN HUE GONE DARK, never black. CP outlines
        its gold badge in brown and its blue phone in navy. That is the rule
        that lets this stay per-room: --hud-accent mixed into near-black gives
        every place its own outline, so King Bee's chrome is gold plastic
        outlined in dark gold and the street's is ice outlined in navy.
     3. FILLS RUN LIGHT TO DARK with a hard white lip along the top edge. The
        lip is the entire reason a rectangle reads as a moulded object.
     4. RADII ARE HUGE. Pills, not rounded rectangles.
     5. A THING THAT DISPLAYS IS SUNKEN; a thing that PRESSES sticks up. CP's
        chat field is the only recessed element on its screen. Ours is .hint.

   And what CP does NOT do, which is most of what was here before: no glass,
   no backdrop blur, no translucency over the world, no travelling sheen. The
   chrome is opaque and sits ON the picture. The only animation is the press,
   and the press is real - the button drops the height of its own shadow.

   THE GEOGRAPHY WAS ALREADY RIGHT. CP pins its controls to the corners and
   runs one bar along the bottom centre; so do we. Where things stand after
   three same-day passes (the full record is reference/style/NOTES.txt):

     top left       the NEWS sticker - js/frost-news.js, the daily paper
     bottom left    the MAP sticker - js/frost-map.js
     bottom right   the eye clock, where a page loads js/time-machine.js
     bottom centre  the bar - js/frost-hud.js, built around the page's hint
     top right      NOTHING, on purpose. CP has no exit button and no
                    location plate, and neither do we any more: the room
                    tells you where you are by being the room, and leaving
                    is a door you walk, the map, or the bar's home button.

   THE SECOND PASS gave the material its OBJECTS. CP labels nothing with a
   font glyph - the map is a drawing of a map - so js/frost-hud.js carries a
   drawn icon kit (data-fh) and builds CP's bottom bar around each page's
   hint: coin counter, sunken field, round icon buttons. The bottom corners
   stopped being pills and became drawn stickers. THE THIRD PASS took the
   remaining words out of the corners - the plate and the exit links - and
   put the newspaper in the seat the plate held. Sections for all of it are
   at the foot of this file; construction notes in frost-hud.js,
   frost-news.js and NOTES.txt.

   --hud-accent is still the whole per-room API. Set it once on <body> and the
   plate, the links, the map button, the outlines and the fills all follow.
   ======================================================================= */

:root{
  --hud-accent:#ffd800;          /* ice, and the default everywhere */
  --hud-ink:#000000;             /* what is printed on a bright fill — BLACK since the
                                    accent went yellow (2026-09-15): the pill's lit/accent/deep
                                    fills give white 1.2-2.3:1 and black 9-17:1 (WCAG 2.x) */
  --hud-dim:#d8bc50;             /* the hint's ink, down in its sunken field */
}

/* ===================== WHERE IT SITS =====================
   THE SEAT LIVES HERE NOW, NOT ON THE PAGE. This rule used to be written out
   in full on every world page, and twenty-two byte-identical copies is
   twenty-two places to edit and twenty-one to forget. Which is exactly what
   happened: comal.html and eastsixth.html shipped the MARKUP with no rule at
   all, so their whole chrome laid out in flow under `overflow:hidden` and sat
   below the fold - a HUD that was simply not on the screen, on two pages, for
   as long as they have existed.

   THE ONE THING THAT IS GENUINELY PER-PAGE IS `display`, AND IT IS NOT
   DECLARED HERE ON PURPOSE. lounge.html is three views on one document, and
   its own `.hud{display:none}` plus `body.walked .hud{display:block}` is what
   makes the chrome appear and disappear with the view. Adding a display value
   to this rule would either break that or start a specificity fight with it. */
.hud{
  position:fixed; z-index:2; pointer-events:none;
  /* clear of a phone's notch and its home bar */
  padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
          max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.hud--bot{ bottom:0; left:0; right:0; text-align:center; }

/* ===================== THE MATERIAL =====================
   Four shades mixed off the one accent, declared on the elements themselves
   rather than in :root so that an element carrying its OWN --hud-accent
   recolours entirely - kingbee.html's .back--alt is one blue link in a row of
   gold ones, and it only works because these recompute per element. */
.plate,
.back,
.whud__plate,
.whud__link{
  --cp-line: color-mix(in srgb, var(--hud-accent) 24%, #0e0e0e);
  --cp-lit:  color-mix(in srgb, var(--hud-accent) 52%, #ffffff);
  --cp-deep: color-mix(in srgb, var(--hud-accent) 76%, #161616);

  position:relative;
  overflow:hidden;                /* clips the lip and the gloss to the pill */
  display:inline-flex;
  align-items:center;
  padding:8px 16px;
  border:3px solid var(--cp-line);
  border-radius:999px;
  background:linear-gradient(180deg,
    var(--cp-lit)    0%,
    var(--hud-accent) 46%,
    var(--cp-deep)  100%);
  color:var(--hud-ink);
  text-decoration:none;
  /* Burbank is CP's and not ours. Arial Rounded lands on a Mac, Trebuchet
     everywhere else; both are heavier and friendlier than the Courier the
     rest of the site is set in, which is the point - the HUD is the only
     part of this site that is UI rather than world. */
  font-family:"Arial Rounded MT Bold", "Trebuchet MS", Verdana, system-ui, sans-serif;
  font-weight:800;
  text-transform:uppercase;
  /* white letters on a bright fill need the outline the fill cannot give
     them; one hard drop in the object's own dark reads as CP's lettering
     without the cost of four-way shadows on every glyph. */
  text-shadow:0 2px 0 var(--cp-line);
}

/* THE TOP LIP. A hard white edge along the top and a soft dark one along the
   bottom. This is rule 3 and it is doing more work than the gradient - take
   it away and every control flattens into a coloured rectangle. */
.plate::after,
.back::after,
.whud__plate::after,
.whud__link::after,
.fbar::after{
  content:"";
  position:absolute; left:0; right:0; top:0; bottom:0;
  border-radius:inherit;
  box-shadow:
    inset 0  2px 0 rgba(255,255,255,.72),
    inset 0 -5px 0 rgba(4,4,4,.20);
  pointer-events:none;
}

/* type, which differs between a plate and a link and always has. Tracking
   comes DOWN from the old values: Courier at .74rem needed 3px of air, a
   heavy rounded face at the same size reads as a fashion logo with it. */
.plate,
.whud__plate{ font-size:.72rem; letter-spacing:1.4px; gap:6px; }
.back,
.whud__link{ font-size:.68rem; letter-spacing:1px; gap:7px; }

/* THE PLACE NAME, in a recessed chip. The old rule painted it in the accent
   and glowed it, which worked on dark glass and is invisible now that the
   accent is the fill it sits on. CP's answer to "a number on a button" is the
   coin counter: sink a hole and print into it. */
.plate b,
.whud__plate b{
  font-weight:800;
  color:#fff;
  margin-left:6px;
  padding:1px 9px 2px;
  border-radius:999px;
  background:rgba(12,12,12,.30);
  box-shadow:inset 0 2px 3px rgba(4,4,4,.42);
  text-shadow:0 1px 0 rgba(4,4,4,.55);
}

/* ===================== THINGS YOU CAN PRESS =====================
   A plate is a label - it has no hover, so it sits flat on a soft shadow. The
   links and the corner buttons stand up on a 5px lip of their own outline
   colour, which is the thickness they later sink through. */
.back,
.whud__link{
  cursor:pointer;
  box-shadow:
    0 5px 0 var(--cp-line),
    0 9px 14px rgba(0,0,0,.45);
  transition:transform .07s ease-out, box-shadow .07s ease-out, filter .12s ease-out;
}
.plate,
.whud__plate{
  box-shadow:0 4px 10px rgba(0,0,0,.45);
}

/* touched: the plastic brightens and lifts a hair. No sheen - CP never had
   one, and a corner of the screen that glints while you are trying to walk
   somewhere is a distraction rather than a flourish. */
.back:hover,  .back:focus-visible,
.whud__link:hover, .whud__link:focus-visible{
  outline:none;
  filter:brightness(1.12);
  transform:translateY(-1px);
  box-shadow:
    0 6px 0 var(--cp-line),
    0 11px 16px rgba(0,0,0,.5);
}
/* keyboard focus still has to be VISIBLE and not merely bright, so the ring
   goes outside the outline rather than replacing it. */
.back:focus-visible,
.whud__link:focus-visible{
  box-shadow:
    0 6px 0 var(--cp-line),
    0 11px 16px rgba(0,0,0,.5),
    0 0 0 3px #fff;
}

/* pressed: it goes down the full height of its lip and lands on nothing. This
   is the whole interaction and it is worth the four rules. */
.back:active,
.whud__link:active{
  transform:translateY(4px);
  filter:brightness(.97);
  box-shadow:
    0 1px 0 var(--cp-line),
    0 2px 5px rgba(0,0,0,.5);
}
.back:active::after,
.whud__link:active::after{
  box-shadow:
    inset 0  2px 0 rgba(255,255,255,.45),
    inset 0 -5px 0 rgba(4,4,4,.28);
}

/* ===================== THE HINT =====================
   Rule 5, and the one element on screen built the other way up. It is a whole
   sentence of instruction that changes as you walk - it DISPLAYS, it does not
   accept a press - so it is CP's chat field: a hole in the bottom of the
   screen, dark inside, with the pale lip of the accent around it and the dark
   outline around that. Wrapping the running commentary in the same moulded
   plastic as the exits would flatten the difference between "here is how to
   leave" and "here is what is going on".

   It is also WIDE on purpose. One bar along the bottom centre is the single
   most recognisable thing about the HUD this is taken from, and a three-word
   hint in a bar that stays put reads far better than a pill that changes
   width every time you walk past something.

   THE 300px IN BOTH CLAMPS IS THE TWO BOTTOM CORNERS. js/frost-map.js parks
   the MAP button bottom-left and js/time-machine.js parks its clock bottom-
   right, both of them fixed, both about 120px wide with their inset. A bar
   that simply took the width it wanted ran straight under them at any
   viewport between about 700 and 1300 - wide enough that the corner buttons
   are still on the bar's line, narrow enough that a centred 780px bar reaches
   them. Leaving 150px of air each side is what keeps the bottom row readable,
   and it is a LOOK constraint rather than a layout one: those two buttons
   choose their own corners, this only declines to grow into them. Below 560px
   they step up out of the way in their own files, which is why the small-
   screen block further down can go back to a full-width bar. */
.hint,
.whud__hint{
  --cp-line: color-mix(in srgb, var(--hud-accent) 24%, #0e0e0e);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-width:min(520px, calc(100vw - 300px));
  max-width:min(1000px, calc(100vw - 300px));
  padding:9px 22px;
  border:3px solid var(--cp-line);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(14,14,14,.94), rgba(6,6,6,.94));
  color:var(--hud-dim);
  font-family:"Arial Rounded MT Bold", "Trebuchet MS", Verdana, system-ui, sans-serif;
  font-weight:700;
  font-size:.66rem; letter-spacing:.6px;
  text-transform:uppercase;
  box-shadow:
    /* the lip of the hole, in the room's own colour */
    inset 0 0 0 3px color-mix(in srgb, var(--hud-accent) 46%, transparent),
    /* and the shadow the lip casts down into it */
    inset 0 5px 9px rgba(0,0,0,.65),
    0 4px 0 var(--cp-line),
    0 9px 14px rgba(0,0,0,.4);
}

/* ===================== THE DRAWINGS =====================
   js/frost-hud.js stamps an SVG into every element carrying data-fh, and the
   two corner buttons draw their own. The kit's construction rules live in
   that file; all that lives here is how big a drawing is in each seat. */
.fh-ic{ display:inline-flex; flex:0 0 auto; }
.fh-ic svg{ display:block; width:18px; height:18px; }
.plate .fh-ic svg,
.whud__plate .fh-ic svg{ width:20px; height:20px; }
.back .fh-ic svg,
.whud__link .fh-ic svg{ width:16px; height:16px; }

/* ===================== THE CORNER STICKERS =====================
   CP's corners hold no pills: the newspaper, the map book and the spy phone
   are DRAWN OBJECTS sitting straight on the world, each wearing a thick
   white sticker rim. Ours are the paper (top left, js/frost-news.js), the
   map (bottom left, js/frost-map.js draws the stack of maps) and the time
   room's eye clock (bottom right). The rim is four hard one-directional
   drop-shadows, which compound into a clean edge around any silhouette
   without knowing the shape; the fifth shadow is the soft one the object
   stands on. These are <button>s, so the UA pill has to be stripped before
   the drawing can be the whole control. */
.fmap-open,
.tmach-open,
.fnews-open{
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  border-radius:14px;
  -webkit-tap-highlight-color:transparent;
  /* ⚠ NO WHITE RIM. These were four white drop-shadows tracing the artwork,
     a die-cut sticker edge — and the owner's reading of it, 2026-08-19, was
     "the maps and news have white boxes around them". He is right about what
     it looks like: both icons are broadly rectangular, so an outline hugging
     them IS a white box, and on a dark page it is the loudest thing in the
     corner.

     THE RIM WAS DOING A REAL JOB and it is not simply deleted: it kept the
     icons legible over a bright, busy scene — the city's orange sky, a lit
     room. What replaces it is a dark halo, which separates them from a light
     background just as well and disappears into a dark one instead of
     glowing on it. Both icons already carry their own black and navy
     keylines, so the shape survives either way. */
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,.85))
    drop-shadow(0 0 3px rgba(0,0,0,.55))
    drop-shadow(0 5px 7px rgba(0,0,0,.45));
  transition:transform .07s ease-out, filter .12s ease-out;
}
.fmap-open svg,
.tmach-open svg,
.fnews-open svg{ display:block; }
.fmap-open:hover, .fmap-open:focus-visible,
.tmach-open:hover, .tmach-open:focus-visible,
.fnews-open:hover, .fnews-open:focus-visible{
  outline:none;
  transform:translateY(-2px) rotate(-2deg);
  /* the hover and press states carried their own copy of the white rim, so
     the box the owner reported came straight back the moment you touched it.
     Same dark halo as the rest state — see the note over it. */
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,.85))
    drop-shadow(0 0 3px rgba(0,0,0,.55))
    drop-shadow(0 7px 9px rgba(0,0,0,.5)) brightness(1.08);
}
.fmap-open:focus-visible,
.tmach-open:focus-visible,
.fnews-open:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.fmap-open:active,
.tmach-open:active,
.fnews-open:active{
  transform:translateY(3px);
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,.85))
    drop-shadow(0 0 3px rgba(0,0,0,.55))
    drop-shadow(0 2px 3px rgba(0,0,0,.5)) brightness(.97);
}

/* ===================== THE BAR =====================
   The one long pill along the bottom, straight off the reference: bright
   plastic outside, a sunken navy well inside, and everything - the coin
   counter, the hint, the round buttons - sits down in the well. Built by
   js/frost-hud.js around the page's own hint element; the clamps that used
   to be the hint's are the bar's now, and they still exist to keep the two
   corner stickers off the bottom line at middling viewports. */
.fbar{
  --cp-line: color-mix(in srgb, var(--hud-accent) 24%, #0e0e0e);
  --cp-lit:  color-mix(in srgb, var(--hud-accent) 52%, #ffffff);
  --cp-deep: color-mix(in srgb, var(--hud-accent) 76%, #161616);

  position:relative;
  pointer-events:auto;
  display:inline-flex;
  align-items:stretch;
  min-width:min(560px, calc(100vw - 300px));
  max-width:min(1000px, calc(100vw - 300px));
  padding:4px;
  border:3px solid var(--cp-line);
  border-radius:999px;
  background:linear-gradient(180deg,
    var(--cp-lit)    0%,
    var(--hud-accent) 46%,
    var(--cp-deep)  100%);
  font-family:"Arial Rounded MT Bold", "Trebuchet MS", Verdana, system-ui, sans-serif;
  box-shadow:
    0 5px 0 var(--cp-line),
    0 9px 14px rgba(0,0,0,.45);
}
.fbar__well{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  padding:3px 5px;
  border-radius:999px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--hud-accent) 14%, #080808),
    color-mix(in srgb, var(--hud-accent) 22%, #121212));
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,.7),
    inset 0 -1px 0 rgba(255,255,255,.10);
}

/* the hint, once it lives in the well: the well is the sunken thing now,
   so the pill the hint wears on pages without the bar all comes off */
.fbar .hint,
.fbar .whud__hint{
  flex:1 1 auto;
  min-width:0; max-width:none;
  display:block;
  padding:2px 8px;
  border:0; background:none; box-shadow:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* the coin counter. Gold in every room - the wallet does not take the
   accent - printed into its own darker pocket at the well's left end. */
.fbar__coin{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 11px 3px 5px;
  border-radius:999px;
  background:rgba(4,4,4,.5);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.6);
  color:#ffd84d;
  font-size:.66rem; font-weight:800; letter-spacing:.5px;
}
.fbar__coin .fh-ic svg{ width:17px; height:17px; }
.fbar__coin b{ font-weight:800; }

/* the round buttons: CP's two-ring circle - bright plastic ring, dark gap,
   a lit disc, the drawing in the middle. They press DOWN INTO the well
   rather than dropping onto the page, because they are already sunk. */
.fbar__btns{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; }
.fbar__btn{
  flex:0 0 auto;
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; margin:0;
  cursor:pointer;
  border:2px solid var(--cp-line);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 28%,
      var(--cp-lit) 0%,
      var(--hud-accent) 55%,
      var(--cp-deep) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    0 2px 0 var(--cp-line);
  transition:transform .07s ease-out, box-shadow .07s ease-out, filter .12s ease-out;
  -webkit-tap-highlight-color:transparent;
}
.fbar__btn svg{ display:block; width:19px; height:19px; }
/* A round button can be TAKEN OUT of the row without leaving the row: the
   skyline (AUSTIN IN 3D) stands down while a taxi is parked outside, and
   the taxi that replaces it goes when the note does. This rule is what
   makes hidden actually hide - the UA sheet's [hidden]{display:none} loses
   to the author `display:inline-flex` above it, every time. */
.fbar__btn[hidden]{ display:none; }
.fbar__btn:hover, .fbar__btn:focus-visible{
  outline:none;
  filter:brightness(1.12);
  transform:translateY(-1px);
}
.fbar__btn:focus-visible{ box-shadow:inset 0 2px 0 rgba(255,255,255,.55), 0 2px 0 var(--cp-line), 0 0 0 3px #fff; }
.fbar__btn:active{
  transform:translateY(2px);
  filter:brightness(.96);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.5);
}

/* the panels that open above the bar - the ?'s speech bubble and the quest
   log. White paper, the room's dark line, a tail down to the button that
   opened it. The one place the chrome speaks lowercase.

   ONE CLASS, because they are one object. Two panels that drifted into two
   looks would be two pieces of chrome; the log is .fbar__pop with a modifier
   and it says only what a LIST needs that a sentence does not. */
.fbar__pop{
  position:absolute;
  right:6px; bottom:calc(100% + 14px);
  /* BORDER-BOX, SAID OUT LOUD. This file sets no reset and no page in the
     network sets a global one, so every width below was being measured
     content-box on the real site: the 440 cap was really 470 across, and the
     log's 342 measured 365 in the lounge. On a 1280 screen that is invisible;
     on a 320 phone the cap is what stands between the paper and the edge of
     the glass, and a cap that is 30px short of the object it caps is not one.
     Found by measuring a framed lounge, not by looking at it. */
  box-sizing:border-box;
  width:max-content;
  max-width:min(440px, 92vw);
  padding:11px 15px;
  border:3px solid var(--cp-line);
  border-radius:16px;
  background:#fff;
  color:#262626;
  font-size:.7rem; font-weight:700; letter-spacing:.2px;
  line-height:1.9; text-align:left; text-transform:none;
  box-shadow:0 6px 14px rgba(0,0,0,.45);
}
/* the tail. --fbar-tail is MEASURED off the button that opened the panel by
   js/frost-hud.js; the 22px fallback is the middle of the ? at desktop size,
   which is where this number came from when there were only two buttons. */
.fbar__pop::after{
  content:"";
  position:absolute;
  right:var(--fbar-tail, 22px); bottom:-9px;
  width:14px; height:14px;
  background:#fff;
  border-right:3px solid var(--cp-line);
  border-bottom:3px solid var(--cp-line);
  transform:rotate(45deg);
  border-bottom-right-radius:4px;
}
.fbar__pop b{ color:#8a7000; margin-right:2px; }
.fbar__pop[hidden]{ display:none; }

/* ===================== THE QUEST LOG =====================
   Built by js/frost-hud.js off js/frost-quests.js, which is the ledger and
   still draws nothing but its own nudge. One row per job: what it is called,
   what it wants, how far along you are, what it pays. A LOCKED job shows
   that it exists and names the one before it, and nothing else - this is a
   record of your night, not a walkthrough of it.

   The chip on the left of each row is the ledger's own state, in the ledger's
   own five words, so a row can never disagree with what the man will say when
   you walk back up to him. GOLD IS THE ONLY LOUD COLOUR IN HERE and it means
   exactly one thing, on the chip and on the button's dot alike: he owes you. */
.fbar__pop--log{
  width:min(342px, 88vw);
  max-width:min(342px, 88vw);
  padding:9px 5px 10px 12px;
  line-height:1.55;
}
.fbar__logtop{
  margin:0 7px 6px 0;
  padding-bottom:5px;
  border-bottom:2px solid color-mix(in srgb, var(--cp-line) 26%, #fff);
  font-size:.66rem; letter-spacing:.4px;
  color:#8a7a20;
}
.fbar__logtop b{ color:#262626; }

/* the list scrolls, the panel does not: the tail is pinned to the panel's
   bottom edge and a panel that grew past the viewport would carry it off the
   screen. Three jobs fit with room to spare; the ninth one will not. */
.fbar__quests{
  list-style:none; margin:0;
  padding:0 8px 0 0;
  max-height:min(46vh, 300px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.fbar__q{
  padding:7px 0 8px;
  border-top:2px dotted color-mix(in srgb, var(--cp-line) 24%, #fff);
}
.fbar__q:first-child{ border-top:0; padding-top:1px; }

/* the state chip */
.fbar__qtag{
  display:inline-block;
  margin-bottom:3px;
  padding:1px 7px 2px;
  border-radius:999px;
  background:#f0eacc; color:#6b5a10;
  font-size:.54rem; font-weight:800; letter-spacing:.9px;
  text-transform:uppercase;
}
.fbar__q--onit  .fbar__qtag{ background:#8a7000; color:#fff; }
.fbar__q--ready .fbar__qtag{ background:#ffd84d; color:#5a3a08; }
.fbar__q--done  .fbar__qtag{ background:#cfe0cf; color:#000; }

.fbar__qname{
  display:block;
  color:#262626;
  font-size:.72rem; font-weight:800; letter-spacing:.5px;
}
.fbar__qtask{
  display:block;
  color:#7a6600;
  font-size:.64rem; font-weight:600; letter-spacing:.1px;
}
.fbar__qpay{
  display:block;
  margin-top:1px;
  color:#a07414;
  font-size:.6rem; font-weight:800; letter-spacing:.3px;
}
/* a finished job goes quiet. It stays on the list - it is the record - but it
   stops competing with the one you are actually carrying. */
.fbar__q--done{ opacity:.62; }
.fbar__q--done .fbar__qname{ font-weight:700; }
.fbar__q--locked .fbar__qname{ color:#bdb69a; letter-spacing:2px; }
.fbar__q--locked .fbar__qtask{ color:#bdb69a; }

/* the meter, for the conditions that COUNT. Sunk into the paper like the
   well is sunk into the bar, filled to --at, which frost-hud.js sets from
   the ledger's own progress() and nothing else. */
.fbar__qrow{ display:flex; align-items:center; gap:7px; margin-top:3px; }
.fbar__qbar{
  flex:1 1 auto; position:relative;
  height:9px; border-radius:999px;
  background:#f0eacc;
  box-shadow:inset 0 2px 3px rgba(38,38,38,.28);
  overflow:hidden;
}
.fbar__qbar i{
  position:absolute; left:0; top:0; bottom:0;
  width:calc(var(--at, 0) * 100%);
  border-radius:999px;
  background:linear-gradient(180deg,#ffe040,#8a7000);
}
.fbar__qnum{
  flex:0 0 auto;
  color:#8a7a20;
  font-size:.56rem; font-weight:800; letter-spacing:.5px;
}

/* GO. Not a round plastic button - it is printed on the paper, so it is a
   flat card the colour of the ink. It hands the trip to js/frost-map.js. */
.fbar__qgo{
  display:inline-block;
  margin-top:5px;
  padding:3px 10px 4px;
  cursor:pointer;
  border:2px solid #262626;
  border-radius:8px;
  background:#fff6d0;
  color:#262626;
  font-family:inherit;
  font-size:.58rem; font-weight:800; letter-spacing:.7px;
  text-transform:uppercase;
  box-shadow:0 2px 0 #262626;
  transition:transform .07s ease-out, box-shadow .07s ease-out;
}
.fbar__qgo:hover, .fbar__qgo:focus-visible{ outline:none; background:#fff; }
.fbar__qgo:focus-visible{ box-shadow:0 2px 0 #262626, 0 0 0 3px #ffe040; }
.fbar__qgo:active{ transform:translateY(2px); box-shadow:0 0 0 #262626; }

/* THE DOT ON THE BUTTON. Gold, because gold means he owes you everywhere
   else in here too. It is the only thing in the chrome that appears without
   being asked for, so it only ever appears for a job you have FINISHED and
   not been paid for - the one state you can lose by walking away from. */
.fbar__btn--log{ position:relative; }
.fbar__btn--log.is-ready::after{
  content:"";
  position:absolute; top:-3px; right:-3px;
  width:11px; height:11px;
  border-radius:50%;
  background:#ffd84d;
  border:2px solid var(--cp-line);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.45);
}

/* ===================== CHROME OFF =====================
   HANDING THE SCREEN TO AN OVERLAY. A pool table, a dartboard, the show
   archive, the gig board, the talk box: every one of them is a WASH over the
   room rather than a fill, because keeping the bar dimly behind the cloth is
   the whole reason it is an overlay and not a page. That is also why the
   chrome has to GO while one is up - a gold plate or a lit MAP button reads
   straight through the wash as ghost text lying over the table.

   Each room used to sweep its own chrome away with its own list of selectors,
   and eight copies of that list had drifted into five different answers. Two
   of them - js/hole-in-the-wall.js and the lounge's talk box - had each
   separately noticed that #fmap-open is fixed to the corner by js/frost-map.js
   and so escapes a .hud sweep, and each had patched only itself. The other six
   were still leaving the MAP button lit under the wash. A list nobody shares
   is a list that gets fixed once and stays broken everywhere else.

   So the list lives HERE, next to the rules that skin the same things, and a
   room says only WHEN: document.body.classList.toggle("chrome-off", !on).
   New chrome gets hidden in every room the day it is added to this rule.

   !important, deliberately. body.walked .whud and body.instudio .whud in
   lounge.html are (0,2,1) in a page <style> that loads after this file, so an
   even-specificity rule here would lose to them and the walked lounge would
   keep its HUD up through the wash. Off is a state that has to win: same
   reason lounge.html's own body.walked > #hud already says it.

   Pages with chrome of their own - the lounge's h1, #hud and .roombar - add
   their names to this same class in their own <style>. Shared chrome here,
   page chrome on the page, exactly the split the top of this file describes. */
body.chrome-off .hud,
body.chrome-off .whud,
body.chrome-off .plate,
body.chrome-off .back,
body.chrome-off .hint,
body.chrome-off .whud__plate,
body.chrome-off .whud__link-row,
body.chrome-off .whud__link,
body.chrome-off .whud__hint,
body.chrome-off .fmap-open,
body.chrome-off .tmach-open,
body.chrome-off .fnews-open{ display:none !important; }

/* ===================== SMALL SCREENS =====================
   The block is narrow and the chrome competes with the scene for room, so it
   all comes down a size and the outlines thin with it - 3px on a 26px control
   is a different object from 3px on a 34px one.

   The bar STAYS, unlike the old hint, which threw its box away below 560px on
   the grounds that a sentence in a bordered pill is mostly border at 390px
   wide. That was true of a pill sized to its text. A bar pinned to 94vw is
   not mostly border, and it is the thing that makes this read as the HUD it
   is taken from - CP's bar is full width on any screen it has ever run on.
   Its height is held down to ~28px so the map and time-machine buttons still
   clear it on the 34px step-up they take in their own files. */
@media (max-width:560px){
  .plate, .whud__plate{ font-size:.6rem; letter-spacing:.8px; padding:5px 11px; border-width:2px; }
  .back, .whud__link{
    font-size:.58rem; letter-spacing:.6px; padding:5px 11px; border-width:2px;
    box-shadow:0 4px 0 var(--cp-line), 0 7px 11px rgba(0,0,0,.45);
  }
  .plate b, .whud__plate b{ padding:1px 7px 2px; margin-left:4px; }
  .back:active, .whud__link:active{
    transform:translateY(3px);
    box-shadow:0 1px 0 var(--cp-line), 0 2px 5px rgba(0,0,0,.5);
  }
  .plate .fh-ic svg, .whud__plate .fh-ic svg{ width:16px; height:16px; }
  .back .fh-ic svg, .whud__link .fh-ic svg{ width:13px; height:13px; }
  .hint, .whud__hint{
    min-width:94vw; max-width:94vw;
    font-size:.54rem; letter-spacing:.3px;
    padding:6px 12px; border-width:2px;
    box-shadow:
      inset 0 0 0 2px color-mix(in srgb, var(--hud-accent) 46%, transparent),
      inset 0 4px 7px rgba(0,0,0,.65),
      0 3px 0 var(--cp-line),
      0 6px 10px rgba(0,0,0,.4);
  }
  /* THE BAR IS THE FULL-WIDTH THING NOW; the hint inside it gives up its
     own 94vw claim or the well could never be narrower than the screen.
     Total height lands at ~40px over the 10px inset - the two corner
     stickers step up past 50, and their files carry that number (60). */
  .fbar{ min-width:94vw; max-width:94vw; padding:3px; border-width:2px;
    box-shadow:0 4px 0 var(--cp-line), 0 7px 11px rgba(0,0,0,.45); }
  .fbar .hint, .fbar .whud__hint{
    min-width:0; max-width:none; padding:2px 6px; box-shadow:none; border:0;
  }
  .fbar__btn{ width:27px; height:27px; }
  .fbar__btn svg{ width:16px; height:16px; }
  .fbar__coin{ font-size:.56rem; padding:2px 8px 2px 4px; }
  .fbar__coin .fh-ic svg{ width:14px; height:14px; }
  .fbar__pop{ font-size:.62rem; line-height:1.8; right:-6px; }
  /* the log restates its line-height because the rule above it is the same
     weight and lands later in the file - a 1.8 list is a list you scroll for
     three jobs. The list itself gives up height, not width: a task in his own
     words wrapping to four lines is worse than a shorter window on it. */
  .fbar__pop--log{
    width:min(306px, 92vw); max-width:min(306px, 92vw);
    padding:8px 4px 9px 10px; line-height:1.5;
  }
  .fbar__quests{ max-height:40vh; }
  .fbar__logtop{ font-size:.6rem; }
  .fbar__qname{ font-size:.66rem; }
  .fbar__qtask{ font-size:.58rem; }
  .fbar__qpay{ font-size:.56rem; }
  .fbar__btn--log.is-ready::after{ width:10px; height:10px; top:-3px; right:-3px; }
}

/* Reduced motion keeps every bit of structure - the outline, the lip, the
   fill, the sunken hint - and only stops things moving. The press still has
   to READ as a press, so it keeps the shadow collapse and loses the travel. */
@media (prefers-reduced-motion:reduce){
  .back, .whud__link, .fmap-open, .tmach-open, .fnews-open, .fbar__btn{ transition:none; }
  .back:hover, .whud__link:hover, .fmap-open:hover, .tmach-open:hover,
  .back:active, .whud__link:active, .fmap-open:active, .tmach-open:active,
  .fnews-open:hover, .fnews-open:active,
  .fbar__btn:hover, .fbar__btn:active{
    transform:none;
  }
}