/* =====================================================================
   panels.css — surfaces added after the first pass. Kept separate from
   styles.css so two people can work on the HUD at once; fold it in when
   that stops being useful.

   This file owns: #desk, #jumpbtn, #nav .toggle, .src.fixture, and the
   reduced-motion block for the whole page. styles.css owns everything
   older. Do not add a rule here for a component styled there.

   Everything below uses the tokens declared in styles.css (--accent,
   --ink, --dim, --faint, --glass, --line, --r, --gut, --floor). The
   plate radius is --r on purpose: the desk inspector is the same object
   as the id card, just opened in the middle of the screen.
   ===================================================================== */

/* [hidden] is only a UA default of display:none, and ANY author display
   rule beats it. Every panel below therefore needs its own guard or it
   ships permanently open. This already happened once with #sheet. */
#desk[hidden] { display: none; }

#desk {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 46; width: min(330px, calc(100vw - 28px));
}

.desk-card {
  background: var(--glass-deep);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 15px 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--lift), var(--inset);
}

.desk-head { display: flex; align-items: baseline; gap: 10px; }

.desk-rank {
  font: 15px var(--mono);
  color: var(--accent);
  letter-spacing: -.005em;
}

#desk-close {
  margin-left: auto; font-size: 12px; color: var(--faint);
  line-height: 1; padding: 2px 4px;
  transition: color .2s;
}
#desk-close:hover { color: var(--ink); }

.desk-addr {
  margin: 5px 0 11px;
  font: 10px var(--mono);
  color: var(--dim);
  word-break: break-all;
  line-height: 1.45;
}

.desk-rows { margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; }
.desk-rows > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 7px 10px; background: #0c0f10;
}
.desk-rows dt {
  font: 9px var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint);
}
.desk-rows dd {
  margin: 0; font: 12px var(--mono); color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.desk-note {
  margin: 10px 0 0;
  font: 10.5px/1.5 var(--mono);
  color: var(--dim);
}

/* ------------------------------------------------------------------ *
   the tags toggle.

   #nav holds four lowercase nouns and two kinds of button: three open
   a sheet, one latches a setting on the room. Hovering to find out
   which is which is not a design. So the difference is carried by
   SHAPE, which is readable at rest and at a glance:

     ladder / book / terms   rectangle, 8px corners   a door
     tags                    pill with a lamp on it   a switch

   The lamp is dark when off and lit when on, which is the same idiom
   as the .pip on the room chip. Nothing here depends on hover.
 * ------------------------------------------------------------------ */

#nav .toggle {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 999px; padding-left: 11px; padding-right: 14px;
}
#nav .toggle::before {
  content: ""; flex: 0 0 auto;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(238, 243, 242, .30);
  transition: background .2s ease, box-shadow .2s ease;
}
#nav .toggle.on {
  color: var(--accent);
  border-color: rgba(205, 183, 136, .5);
  background: rgba(205, 183, 136, .10);
}
#nav .toggle.on::before {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

/* the same 400px squeeze styles.css applies to the other three nav
   buttons. The lamp and its gap stay: they are the reason this button
   is legible without a hover, which is the whole point of it. */
@media (max-width: 400px) {
  #nav .toggle { padding-left: 7px; padding-right: 9px; gap: 5px; }
}

/* a fixture is real data about a DIFFERENT token. It must never be mistaken
   for this coin's holder list, so it gets its own colour, not the demo one. */
.src.fixture { color: #7fd6f0; }

/* ------------------------------------------------------------------ *
   jump, for thumbs. Only on touch: a mouse has the space bar.

   On a phone it moves down to the floor row and sits opposite the
   thumb stick. Above 720px it keeps its old position, where the corner
   controls still own the floor. The phone bottom stack is documented
   in styles.css and this is the right hand end of its floor row.
 * ------------------------------------------------------------------ */

#jumpbtn {
  position: fixed; right: 22px; bottom: 130px; z-index: 22;
  width: 74px; height: 74px; border-radius: 50%;
  font-size: 11px; letter-spacing: .08em; color: var(--dim);
  background: rgba(8, 10, 12, .40);
  border: 1px solid var(--line);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  display: none;
  -webkit-tap-highlight-color: transparent; touch-action: none;
}
#jumpbtn:active { color: var(--accent); border-color: rgba(205, 183, 136, .5); }
@media (pointer: coarse) { #jumpbtn { display: block; } }

@media (pointer: coarse) and (max-width: 720px) {
  #jumpbtn {
    right: var(--gut); bottom: var(--floor);
    width: 72px; height: 72px;
  }
}

/* while the pointer is captured, the cursor is gone: stop advertising
   things that want one */
body.locked #nav, body.locked .you { opacity: .55; transition: opacity .2s; }

/* ------------------------------------------------------------------ *
   reduced motion, for the whole page.

   Chrome only SETS prefers-reduced-motion under --force-prefers-
   reduced-motion; the page has to honour it. Without this block every
   still is caught part way through a transition and reads as a layout
   bug. It is also correct for anyone who has asked their machine to
   calm down.

   This is the page's only copy. styles.css used to carry a second one,
   which is why the eq pin below lives here rather than beside the
   sound button: one owner per block.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  /* the eq bars are mid-animation at rest, so pin them somewhere honest
     rather than leaving four 3px stubs in every still. */
  #soundbtn.on .eq i { height: 8px; }
}

/* ------------------------------------------------------------------ *
   the lever, collapsible

   At 375x812 the expanded lever plus the id card plus the nav row plus the
   thumb stick took about 55% of the screen and the floor was a letterbox
   between them. Closed, the lever is one line and the room gets the space.
 * ------------------------------------------------------------------ */

.you-head {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  text-align: left; padding: 0; background: none; border: 0;
  cursor: default;
}
.you-caret { display: none; }

.you-body { display: block; }

/* The 0fr grid trick collapses ONE row. This body has four children, so
   three of them stayed at auto height and the shut panel still reserved
   120px of nothing. Measured at 375x812 before this was changed. */

@media (max-width: 720px), (pointer: coarse) {
  .you-head { cursor: pointer; }
  .you-caret {
    display: block; margin-left: auto; width: 9px; height: 9px;
    border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease, border-color .12s ease;
  }
  .you-head:hover .you-caret { border-color: var(--accent); }
  .you.shut .you-caret { transform: rotate(-135deg) translate(-3px, -3px); }

  .you.shut .you-body { display: none; }
  .you.shut { padding-bottom: 10px; }

  /* the id card carries a second row that repeats the chip. one line is
     enough on a phone. */
  .card-bot #token { display: none; }

  /* 115px and 130px discs are a games console, not a website */
  #stick { width: 74px; height: 74px; }
  #knob { width: 34px; height: 34px; }
  #jumpbtn {
    width: 58px; height: 58px; font-size: 10px;
    right: 16px; bottom: calc(var(--floor) + 16px);
  }
}

/* ------------------------------------------------------------------ *
   sheets: the ladder as a shape, and the book with a lead figure
 * ------------------------------------------------------------------ */

/* the headcount column doubles as the distribution, so the pyramid is
   visible rather than something you have to read off eight numbers */
#sheet-body table.lad td.bar {
  position: relative;
  padding-right: 2px;
  min-width: 78px;
}
#sheet-body table.lad td.bar i {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  height: 7px; max-width: 46px;
  background: rgba(205, 183, 136, .26);
  border-right: 1px solid rgba(205, 183, 136, .5);
}
#sheet-body table.lad td.bar b {
  position: relative; font-weight: 400; color: var(--dim);
}
#sheet-body table.lad tr.me td { color: var(--ink); }
#sheet-body table.lad tr.me td:first-child { color: var(--accent); }
#sheet-body table.lad tr.me td.bar i { background: rgba(205, 183, 136, .5); }
.youtag {
  display: inline-block; margin-left: 7px; padding: 1px 5px;
  font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #10140a; background: var(--accent); border-radius: 2px;
  vertical-align: 1px;
}

/* the book's lead figure */
.potlead {
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  padding: 11px 13px 12px; margin-bottom: 10px;
  background: rgba(205, 183, 136, .04);
}
.pvbig {
  display: block; margin: 3px 0 4px;
  font: 30px/1 var(--mono); color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.pvbig em { font: 12px var(--mono); font-style: normal; color: var(--dim); margin-left: 4px; }

.desk-record{width:100%;padding:11px 0;margin-top:8px;border-top:1px solid var(--line);font:11px var(--mono);color:var(--accent);text-align:left}.desk-record[hidden]{display:none}