/* FISHER monitor. Loaded only on /monitor/.
   Colours and type come from site.css; this file adds the instrument
   readout: scoreboard cells, chip switches, and the forest tracks.
   Everything is HTML/CSS — no SVG — so text stays at real CSS sizes
   and reflows on a phone instead of scaling down with a viewBox. */

:root{
  /* window series: a ramp inside one hue so the order reads as order */
  --w30:#6E5326; --w45:#8E6A2E; --w60:#B08238; --w90:#D09A42; --w120:#E5A03C;
  --mwp:#8FA9C4;      /* baseline, cool so it cannot be mistaken for a window */
  --mbbb:#9B8AA6;
  --truth:#F2ECDE;    /* reference: brightest thing on the page */
}

.monitor-shell{max-width:80rem;margin:0 auto}

/* ---------------- scoreboard ---------------- */
.board{display:grid;gap:1px;background:var(--score);border:1px solid var(--score);margin:0 0 .9rem}
@media(min-width:40rem){.board{grid-template-columns:repeat(3,1fr)}}
.cell{background:var(--panel);padding:1rem 1.15rem}
.cell h3{font-family:var(--sans);font-size:.6rem;font-weight:500;margin:0 0 .75rem;
         letter-spacing:.18em;text-transform:uppercase}
.cell.m h3{color:var(--amber)} .cell.p h3{color:var(--mwp)} .cell.b h3{color:var(--mbbb)}
.stat{display:flex;justify-content:space-between;align-items:baseline;
      font-family:var(--mono);font-size:.76rem;padding:.22rem 0;color:var(--letter)}
.stat .k{color:var(--letter-fnt);font-size:.66rem;letter-spacing:.04em}
.stat .v{font-variant-numeric:tabular-nums}
.stat .v.na{color:var(--letter-fnt);font-style:italic;font-family:var(--serif)}
.bnote{font-family:var(--mono);font-size:.66rem;color:var(--letter-fnt);
       line-height:1.75;margin:0 0 1.8rem;max-width:60rem}

/* ---------------- controls ---------------- */
.ctls{display:flex;flex-wrap:wrap;gap:1.1rem 2.2rem;padding:1rem 0 1.2rem;
      border-bottom:1px solid var(--score);margin:0}
.clab{font-size:.58rem;color:var(--letter-fnt);margin:0 0 .55rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{font-family:var(--mono);font-size:.72rem;padding:.4rem .7rem;
      border:1px solid var(--score-lit);background:transparent;color:var(--letter-fnt);
      cursor:pointer;border-radius:1px;line-height:1.2;transition:all 120ms ease}
.chip:hover{border-color:var(--amber-dim);color:var(--letter-dim)}
.chip[aria-pressed=true]{color:#12100D;border-color:transparent}
.chip.w30[aria-pressed=true]{background:var(--w30);color:var(--letter)}
.chip.w45[aria-pressed=true]{background:var(--w45);color:var(--letter)}
.chip.w60[aria-pressed=true]{background:var(--w60)}
.chip.w90[aria-pressed=true]{background:var(--w90)}
.chip.w120[aria-pressed=true]{background:var(--w120)}
.chip.mwp[aria-pressed=true]{background:var(--mwp)}
.chip.mbbb[aria-pressed=true]{background:var(--mbbb)}
select{font-family:var(--mono);font-size:.72rem;padding:.4rem .5rem;
       border:1px solid var(--score-lit);background:var(--panel);color:var(--letter);
       border-radius:1px}

/* ---------------- event cards ---------------- */
details.ev{border-bottom:1px solid var(--score)}
details.ev>summary{list-style:none;cursor:pointer;padding:1.1rem 0 .95rem;display:block}
details.ev>summary::-webkit-details-marker{display:none}
details.ev>summary:hover .ev-name{color:var(--amber-lit)}
details.ev>summary:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.sum-top{display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:baseline}
.ev-name{font-family:var(--sans);font-size:1rem;font-weight:500;letter-spacing:-.02em;
         color:var(--letter);transition:color 130ms ease}
.ev-mag{font-family:var(--mono);font-size:.9rem;color:var(--amber-dim);
        font-variant-numeric:tabular-nums}
.caret{font-family:var(--mono);font-size:.62rem;color:var(--letter-fnt);
       margin-left:auto;white-space:nowrap;letter-spacing:.06em}
details[open] .caret::after{content:"− collapse"}
details:not([open]) .caret::after{content:"+ stations"}
.ev-meta{font-family:var(--mono);font-size:.64rem;color:var(--letter-fnt);
         margin:.3rem 0 0;line-height:1.7}
.badge{font-family:var(--sans);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;
       padding:.14rem .42rem;border:1px solid var(--score-lit);color:var(--letter-fnt);
       border-radius:1px}
.ev-body{padding:.3rem 0 1.6rem}

.grp{margin:1.5rem 0 0}
.grp:first-child{margin-top:.4rem}
.grp-h{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;color:var(--letter-fnt);
       margin:0 0 .4rem;display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.grp-h b{color:var(--letter);font-weight:500;font-size:.74rem;letter-spacing:.02em}

/* ---------------- forest tracks ---------------- */
.row{display:grid;grid-template-columns:3.6rem 1fr 9rem;gap:0 .6rem;align-items:stretch}
.rlab{font-family:var(--mono);font-size:.66rem;color:var(--letter-fnt);text-align:right;
      white-space:nowrap;font-variant-numeric:tabular-nums;align-self:center}
.track{position:relative;height:1.4rem;background:#100E0B;
       box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.grid-i{position:absolute;top:0;bottom:0;width:1px;background:var(--score-lit);opacity:.7}
.truth-i{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;
         background:var(--truth);z-index:4;box-shadow:0 0 4px rgba(242,236,222,.35)}
.band{position:absolute;top:.2rem;bottom:.2rem;opacity:.30;z-index:1}
.band i{position:absolute;top:0;bottom:0;width:1px;background:currentColor;opacity:.85}
.mark{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;z-index:3}
.rnum{font-family:var(--mono);font-size:.68rem;font-variant-numeric:tabular-nums;
      white-space:nowrap;align-self:center;letter-spacing:-.01em;color:var(--letter)}
.rnum .res{color:var(--letter-fnt);margin-left:.35rem}
.rnum.nosig{color:var(--letter-dim)}
.row.absent .rnum{font-family:var(--serif);font-style:italic;font-size:.76rem;
                  color:var(--letter-fnt)}

.axis{position:relative;height:1.8rem;margin-top:.3rem;border-top:1px solid var(--score-lit)}
.tick{position:absolute;top:0;transform:translateX(-50%);text-align:center}
.tick i{display:block;width:1px;height:4px;background:var(--score-lit);margin:0 auto}
.tick b{font-family:var(--mono);font-size:.62rem;font-weight:400;color:var(--letter-fnt);
        display:block;line-height:1.5}
.tick s{font-family:var(--mono);font-size:.54rem;color:var(--letter-fnt);opacity:.7;
        text-decoration:none;display:block;line-height:1.2}
.spanlab{font-family:var(--mono);font-size:.58rem;color:var(--letter-fnt);
         opacity:.8;letter-spacing:.05em}

@media(max-width:36rem){
  .row{grid-template-columns:1fr;gap:.08rem;padding:.35rem 0}
  .rlab{text-align:left;order:1;font-size:.68rem;color:var(--letter-dim)}
  .rnum{order:2;font-size:.74rem}
  .track{order:3;height:1.55rem;margin-top:.2rem}
}

/* ---------------- rejected stations, notes, states ---------------- */
.rej{margin:1.4rem 0 0;font-family:var(--mono);font-size:.64rem;color:var(--letter-fnt);
     line-height:1.75}
.rej b{color:var(--letter-dim);font-weight:500;display:block;margin-bottom:.4rem;font-size:.66rem}
.rej ul{margin:0;padding:0;list-style:none}
.rej li{padding:.14rem 0;border-bottom:1px dotted var(--score);display:flex;gap:.8rem;flex-wrap:wrap}
.rej li:last-child{border:0}
.rej li span:first-child{color:var(--letter-dim);min-width:5.5rem}
.notes{font-family:var(--mono);font-size:.68rem;line-height:1.8;color:var(--letter-fnt);
       margin:1.4rem 0 0;max-width:56rem}
.stamps{font-family:var(--mono);font-size:.6rem;color:var(--letter-fnt);margin:.8rem 0 0;
        letter-spacing:.03em}
.loadmsg{font-family:var(--mono);font-size:.76rem;color:var(--letter-fnt);line-height:1.8;
         padding:2.5rem 0;max-width:46rem;border-top:1px solid var(--score)}
.genstamp{font-family:var(--mono);font-size:.62rem;color:var(--letter-fnt);
          letter-spacing:.04em;margin:1.6rem 0 0}
/* ------------------------------------------------------------------
   Append to static/css/monitor.css
   Filter bar, paging control and the two new badges. Uses the existing
   variables only; nothing here introduces a colour.
   ------------------------------------------------------------------ */

.filters{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:.9rem 1.1rem;
  margin:1.6rem 0 1.4rem; padding:.9rem 1rem;
  border:1px solid var(--rule); border-radius:2px;
  background:rgba(255,255,255,.015);
}
.filters .fl{ display:flex; flex-direction:column; gap:.3rem; }
.filters .fl.grow{ flex:1 1 12rem; min-width:9rem; }
.filters .fl > span{
  font-family:Helvetica,Arial,sans-serif; font-size:.62rem;
  text-transform:uppercase; letter-spacing:.18em; color:var(--dim);
}
.filters select,
.filters input[type=search]{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8rem;
  color:var(--fg); background:var(--panel);
  border:1px solid var(--rule); border-radius:2px;
  padding:.32rem .5rem; min-width:7.5rem;
}
.filters input[type=search]{ width:100%; min-width:0; }
.filters select:focus,
.filters input[type=search]:focus{
  outline:none; border-color:var(--amber); box-shadow:0 0 0 1px var(--amber);
}
.filters #fclear{ align-self:flex-end; }

/* Pushed to its own line on narrow screens so it never squeezes the search
   box, which is the control most likely to be used. */
.filters .fcount{
  margin-left:auto; align-self:flex-end;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem; color:var(--dim); white-space:nowrap;
}
@media (max-width:640px){
  .filters .fcount{ margin-left:0; width:100%; }
}

.morewrap{ display:flex; justify-content:center; margin:1.4rem 0 .4rem; }
.chip.more{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:.5rem 1.1rem; letter-spacing:.02em;
}

/* Ten cards at a time is a deliberate ceiling. The file can carry thousands
   of events without trouble -- it is a few hundred kilobytes gzipped -- but
   each card is dozens of nodes plus a plot, and a few hundred of them at once
   makes the page stutter on scroll. The limit is the DOM, not the data. */

.badge.pending{
  border-color:color-mix(in srgb, var(--dim) 55%, transparent);
  color:var(--dim);
}
  color:var(--dim);
}

/* Pager. Ten cards exist at a time and paging replaces them rather than
   appending, so the DOM stays small however long the record gets. */
.morewrap{ gap:1rem; align-items:center; }
.chip.more[disabled]{ opacity:.32; cursor:default; }
.pagepos{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.74rem; color:var(--dim); letter-spacing:.02em;
  min-width:7.5rem; text-align:center;
}