/* =====================================================================
   Visora — presentation ("fullscreen") mode and the Fleet bulletin.
   ---------------------------------------------------------------------
   Presentation is CSS-driven (html.viz-fs) and independent of the OS
   Fullscreen API, so the bulletin still appears when the app is embedded
   in an iframe and requestFullscreen() is refused.

   The bar is one flex row that degrades gracefully:
      [ clock · donut · status tiles ]   [ ——— bulletin ——— ]   [ exit ]
   The bulletin owns the elastic space and keeps a fixed height, so the
   calendar underneath never jumps when a card with more text rotates in.
   ===================================================================== */

/* Fullscreen no longer hides the sidebar. Folding the left panel is the « / » button's job and
   only its job, in both modes — the two used to fight each other, which is why collapsing while
   presenting tore the layout apart. */
.viz-fs .topbar{position:sticky;top:0}
.viz-fs .fl-wrap{padding:10px 14px}

/* The header strip is PERMANENT — clock, donut, live status and the bulletin are what the
   calendar is read against, not a presentation extra. Its height is capped so the matrix
   underneath always keeps roughly two thirds of the screen. */
/* The strip GROWS to fit rather than clipping. It used to be a fixed height, which was fine
   when it only held the clock and the donut — but the filters live here now, and on a narrower
   screen they need a second row. Below ~460px of free space they drop onto their own full-width
   line underneath instead of being squeezed into an ellipsis. */
#flFsBar{
  display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap;
  margin-bottom:10px; padding:10px 13px;
  background:var(--surface2); border:1px solid var(--line); border-radius:14px;
  flex:0 0 auto; min-height:130px;
}
/* the clock/donut/counts keep their size; the filters beside them take the rest */
.fsb-left{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;flex:0 0 auto;min-width:0;overflow:hidden}
/* the filters, in the space the bulletin used to occupy. 460px is the width at which they still
   read properly on two rows; under that they take a full line of their own. */
.fsb-filters{flex:1 1 460px;min-width:0;display:flex;align-items:flex-start;
  padding-inline-start:14px;border-inline-start:1px solid var(--line);align-self:stretch}
@media (max-width:1100px){
  .fsb-filters{flex-basis:100%;padding-inline-start:0;border-inline-start:0;
    border-top:1px solid var(--line);padding-top:9px}
}
.fsb-clock{text-align:center;flex:none;cursor:pointer;border-radius:12px;padding:2px 6px 4px;
  transition:background .15s,box-shadow .15s}
.fsb-clock:hover{background:var(--raise);box-shadow:0 0 0 1px var(--line)}
.fsb-clock .clkt{font-size:16px;font-weight:800;font-family:var(--mono);letter-spacing:.8px;margin-top:1px}
.fsb-clock .clkd{font-size:10.5px;color:var(--faint);margin-top:1px}
/* which zone the clock is showing — the whole point is that it is NOT the machine's time */
.fsb-clock .clkz{margin-top:2px;font-size:10px;font-weight:700;color:var(--accent);white-space:nowrap}
.fsb-clock .clkz span{display:block;font-size:9.5px;font-weight:600;color:var(--faint);
  text-transform:uppercase;letter-spacing:.5px;opacity:0;transition:opacity .15s}
.fsb-clock:hover .clkz span{opacity:1}
.fsb-donut{width:104px;height:104px;flex:none}
/* the status tiles fill downward first, then into a second column — they must never force the
   strip taller, so they wrap instead of stacking into infinity */
.fsb-rep{display:flex;flex-direction:column;flex-wrap:wrap;gap:4px 16px;flex:0 1 auto;
  min-width:0;max-height:100%;align-content:flex-start}
.fsb-stat{font-size:13px;color:var(--muted);white-space:nowrap}
.fsb-stat i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-inline-end:6px;vertical-align:-1px}
.fsb-stat b{color:var(--txt);font-family:var(--mono);font-size:15px;margin-inline-start:4px}
.fsb-note{font-size:12.5px;color:var(--muted);margin-inline-end:6px;align-self:center}

/* ---------- the bulletin: its own screen ----------
   Sized to fill a laptop and be read from a few metres away — one card at a time, the photo
   large, the numbers large. It fills whatever height the view gives it and never scrolls. */
#newsView{padding:0;min-height:0}
.nw-page{height:100%;min-height:0;display:flex;flex-direction:column;padding:16px 22px 18px;gap:0}
/* ---- header: title + count, clock + controls ---- */
.nw-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex:none}
.nw-h1{font-size:21px;font-weight:800;color:var(--txt);letter-spacing:.2px;line-height:1.1}
.nw-h2{font-size:12.5px;color:var(--muted);margin-top:4px}
.nw-htools{display:flex;align-items:center;gap:14px;flex:none}
.nw-clock{font-family:var(--mono);text-align:end;line-height:1.15;color:var(--txt)}
.nw-clock b{font-size:20px;font-weight:800;letter-spacing:1px}
.nw-clock i{display:block;font-style:normal;font-size:9.5px;color:var(--faint);letter-spacing:.4px}
.nw-nav{display:flex;gap:5px}
.nw-nav button{background:var(--surface2);border:1px solid var(--line);color:var(--txt2);border-radius:8px;
  width:30px;height:28px;font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.nw-nav button:hover{border-color:var(--accent-line);color:var(--accent)}
.nw-nav button.on{background:var(--accent-dim);border-color:var(--accent-line);color:var(--accent)}
/* ---- filter chips (with live counts) + rotation hint ---- */
.nw-chrow{display:flex;align-items:center;gap:12px;margin:14px 0 10px;flex:none;flex-wrap:wrap}
.nw-types{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.nwt{display:inline-flex;align-items:center;gap:7px;background:var(--surface2);border:1px solid var(--line);
  color:var(--txt2);border-radius:20px;padding:5px 13px;font-size:12.5px;cursor:pointer;white-space:nowrap;transition:all .15s}
.nwt .nwt-dot{width:7px;height:7px;border-radius:50%;background:var(--cc);flex:none;opacity:.55}
.nwt b{font-family:var(--mono);font-weight:700;color:var(--faint)}
.nwt:hover{border-color:var(--line2);color:var(--txt)}
.nwt.on{border-color:var(--cc);color:var(--cc);background:color-mix(in srgb,var(--cc) 12%,transparent)}
.nwt.on .nwt-dot{opacity:1} .nwt.on b{color:var(--cc)}
.nw-hint{margin-inline-start:auto;font-size:11.5px;color:var(--faint);white-space:nowrap}
.nw-prog{height:3px;border-radius:3px;background:var(--line);overflow:hidden;margin-bottom:14px;flex:none}
.nw-prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .12s linear}
/* ---- the split: big card + up-next queue ---- */
.nw-main{flex:1;min-height:0;display:grid;grid-template-columns:1fr minmax(280px,340px);
  grid-template-rows:minmax(0,1fr);gap:16px}
.nw-body{position:relative;min-height:0;display:flex;cursor:pointer;overflow:hidden;
  background:var(--surface);border:1px solid var(--nw-bord,var(--line));border-radius:16px;padding:0}
.nw-body:hover{border-color:var(--nw-accent,var(--accent-line))}
.nw-body::before{content:"";position:absolute;top:0;inset-inline:0;height:4px;
  background:var(--nw-accent,var(--accent));border-start-start-radius:16px;border-start-end-radius:16px}
.nw-card{display:flex;gap:clamp(16px,2vw,30px);align-items:stretch;width:100%;min-width:0;padding:22px 24px}
.nw-cmain{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.nw-catrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nw-catlab{font-size:12px;font-weight:800;letter-spacing:.8px;display:inline-flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nw-catdot{width:8px;height:8px;border-radius:50%;flex:none}
.nw-cnt{font-family:var(--mono);font-size:12.5px;color:var(--faint);flex:none}
.nw-nm{font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:.2px;line-height:1.12;margin-top:14px;
  color:var(--txt);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nw-sub{font-family:var(--mono);font-size:13px;color:var(--faint);margin-top:8px}
.nw-headline{font-size:clamp(17px,1.7vw,23px);font-weight:600;line-height:1.4;margin-top:16px;color:var(--txt2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nw-headline b{color:var(--nw-text,var(--accent))}
.nw-spacer{height:clamp(14px,3vh,30px);flex:none}
.nw-stats{display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap;margin-top:18px}
.nw-stat span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--faint)}
.nw-stat b{display:block;font-size:26px;font-weight:800;color:var(--txt);margin-top:3px;line-height:1}
.nw-stat b i{font-style:normal;font-size:13px;color:var(--muted);font-weight:600}
.nw-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}
.nw-act{background:var(--accent);border:1px solid var(--accent);color:var(--on-accent);border-radius:9px;
  padding:8px 15px;font-size:13px;font-weight:700;cursor:pointer}
.nw-act:hover{filter:brightness(1.08)}
.nw-act.ghost{background:transparent;color:var(--accent);border-color:transparent;padding-inline:2px}
.nw-act.ghost:hover{text-decoration:underline;filter:none}
.nw-jump{margin-inline-start:auto;font-size:11.5px;color:var(--faint)}
/* the right side of the card: photo + the 30-day split bar */
.nw-cside{flex:0 0 clamp(240px,30%,400px);min-width:0;display:flex;flex-direction:column;gap:10px}
.nw-img{flex:1;min-height:120px;border-radius:12px;overflow:hidden;background:var(--surface2);
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.nw-img img{width:100%;height:100%;object-fit:cover}
.nw-ph{font-size:64px;opacity:.35}
.nw-bars{display:flex;gap:5px;flex:none}
.nw-b{flex:1;height:9px;background:var(--chart-grid);border-radius:5px;overflow:hidden}
.nw-b i{display:block;height:100%}
.nw-blab{font-size:12px;color:var(--muted);font-family:var(--mono);line-height:1.5;flex:none}
.nw-blab i{font-style:normal;color:var(--faint)}
.nw-empty{font-size:16px;color:var(--muted);padding:40px 8px;text-align:center;line-height:1.7;margin:auto}
/* ---- UP NEXT queue ---- */
.nw-next{position:relative;min-width:0;min-height:0;height:100%;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:14px 14px 12px;overflow:hidden}
.nwn-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:800;
  letter-spacing:1px;color:var(--faint);text-transform:uppercase;padding-bottom:8px;border-bottom:1px solid var(--line)}
.nwn-more{font-weight:600;letter-spacing:0;text-transform:none;color:var(--faint)}
.nwn-list{flex:1;min-height:0;overflow:auto;margin-top:4px}
.nwn-row{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:start;background:none;border:0;
  border-inline-start:3px solid var(--cc);cursor:pointer;padding:11px 8px 11px 12px;border-radius:0 8px 8px 0}
.nwn-row:hover{background:var(--surface2)}
.nwn-i{font-family:var(--mono);font-size:12px;color:var(--faint);flex:none;padding-top:1px}
.nwn-tx{min-width:0}
.nwn-nm{display:block;font-size:13.5px;font-weight:700;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nwn-nm i{font-style:normal;font-weight:400;color:var(--faint);font-family:var(--mono);font-size:12px}
.nwn-note{display:block;font-size:12px;margin-top:2px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nwn-foot{font-size:11px;color:var(--faint);padding-top:9px;border-top:1px solid var(--line);margin-top:4px;line-height:1.5}
.nwn-empty{color:var(--faint);font-size:13px;padding:16px 4px}

/* ===== category colour — the top bar + the border tint per kind ===== */
.nw-body.nw-k-lateret {--nw-accent:#e0a23c;--nw-bord:rgba(224,162,60,.5);--nw-text:#b47a19}
.nw-body.nw-k-overfine{--nw-accent:#e5595f;--nw-bord:rgba(229,89,95,.5);--nw-text:#c0392f}
.nw-body.nw-k-maintover{--nw-accent:#e5595f;--nw-bord:rgba(229,89,95,.45);--nw-text:#c0392f}
.nw-body.nw-k-maint {--nw-accent:#e0862f;--nw-bord:rgba(224,134,47,.42);--nw-text:#b4661a}
.nw-body.nw-k-rent  {--nw-accent:#189e80;--nw-bord:rgba(24,158,128,.42);--nw-text:#189e80}
.nw-body.nw-k-free  {--nw-accent:#8a93a6;--nw-bord:var(--line);--nw-text:var(--muted)}
:root[data-theme="dark"] .nw-body.nw-k-overfine,
:root[data-theme="dark"] .nw-body.nw-k-maintover{--nw-text:#e5595f}
:root[data-theme="dark"] .nw-body.nw-k-lateret{--nw-text:#e0a23c}
:root[data-theme="dark"] .nw-body.nw-k-rent{--nw-text:#46c9a8}
.nw-orient.on{background:var(--accent-dim);border-color:var(--accent-line);color:var(--accent)}

/* ===== forced / responsive layout ===== */
/* portrait = a centred narrow column (a vertical TV / phone), so the stacked photo keeps a good
   shape instead of stretching into a wide, empty band across a landscape screen */
.nw-page.nw-port .nw-main{grid-template-columns:1fr;grid-auto-rows:minmax(0,auto);max-width:720px;margin-inline:auto;width:100%}
.nw-page.nw-port .nw-card{flex-direction:column}
.nw-page.nw-port .nw-cmain{justify-content:flex-start}
.nw-page.nw-port .nw-cside{flex:none;min-height:0}
.nw-page.nw-port .nw-img{height:clamp(240px,38vh,460px);min-height:0}
.nw-page.nw-port .nw-next{max-height:34vh}
@media (max-width:1080px){
  .nw-main{grid-template-columns:1fr minmax(240px,300px)}
  .nw-cside{flex-basis:34%}
}
@media (max-width:820px){
  .nw-main{grid-template-columns:1fr;grid-auto-rows:minmax(0,auto)}
  .nw-card{flex-direction:column}
  .nw-cside{flex:none;min-height:180px}
  .nw-next{max-height:32vh}
  .nw-page{padding:12px 14px 14px}
}
@media (hover:none){ .nw-body{cursor:default} }