/* Feature 13 (2026-10-02): top-left buttons stay visible on desktop, smaller news panel, replay hidden. Owner: chrome helper. */

/* ---- Item 1a: stop fading #chrome-top-left when the open pane does not
   actually cover it. style.css still carries the old unconditional
   body.pc-settings-open/pc-live-open #chrome-top-left { opacity:.15 } rule;
   this flips the DEFAULT to "stay visible" (same specificity, later in the
   cascade, so it wins) and only re-applies the old fade through the
   .f13-tl-dim class chrome-controls.js's PC.chromeFade adds -- and only on
   a MEASURED overlap between the pane's real rect and this one's (falls
   back to the existing 600px phone breakpoint only when a rect can't be
   measured yet). Rollback: delete this whole block -- style.css's
   unconditional fade returns untouched. */
body.pc-settings-open #chrome-top-left,
body.pc-live-open #chrome-top-left {
  opacity: 1;
  pointer-events: auto;
}
body.pc-settings-open #chrome-top-left.f13-tl-dim,
body.pc-live-open #chrome-top-left.f13-tl-dim {
  opacity: .15;
  pointer-events: none;
}

/* ---- Item 1b/3 (2026-10-02): NYC Live shrinks to fit its sections AND
   spawns about its own button the way Settings does (founder: "give
   #live-panel the same relationship to its own open button" as settings).
   Desktop: style.css already draws #live-panel at the SAME left/bottom
   offset Settings uses (left:20px, bottom:92px -- .pc-setp carries the
   identical pair) -- it only ALSO pins a fixed top:89px, stretching the
   panel into the old fixed-height box instead of letting it hang from the
   bottom edge like Settings does. Dropping top (bottom stays inherited)
   and copying `.pc-pane`'s `zoom: var(--pc-ui-scale)` (#live-panel never
   had it) puts both panels at the identical measured real-pixel anchor --
   see check.mjs. max-height keeps the OLD footprint as a growth ceiling,
   same as before. Phone: Settings' phone layout (style.css ~2196) is a
   full bottom sheet -- left/right:8px, bottom:8px, max-height: calc(100vh
   - 80px) -- with every OTHER chrome corner except chrome-top-right
   hidden via `:has(#settings-panel:not([hidden]))` while it is open. This
   file is not scoped to add a `:has()` selector to style.css, so a
   `body.pc-live-open` rule (this file's own allowed class) does the same
   corner-hiding, and #live-panel gets the identical 8px/8px/calc(100vh-80px)
   sheet geometry. Rollback: delete this whole block -- #live-panel falls
   back to style.css's fixed top:89px/top:66px full-height box and the
   phone corners stay visible under the pane (the pre-Item-3 look). */
body #live-panel.pc-live-panel {
  top: auto;
  zoom: var(--pc-ui-scale, 1);
  /* Top edge stays one gap below the lowest top-left button (full-rankings.js measures it
     into --rk-top-clear), so info, zoom and 3D stay clickable while NYC Live is open. */
  max-height: calc(100vh - 92px - var(--rk-top-clear, 228px));
}
/* Pass 2 P7 round 3: NYC Live uses the Rankings pane's anchor rule. Left edge on its own tile, bottom
   one 8 px gap above it (full-rankings.js writes --rk-live-left / --rk-live-bottom from the tile's
   measured rect on open and on every resize). The card's height ends one gap below the top-left
   button column and the body scrolls inside it, so every row and the "All rankings" link stay
   reachable on a short window. */
@media (min-width: 601px) {
  html body #live-panel.pc-live-panel {
    left: var(--rk-live-left, 58.4px); bottom: var(--rk-live-bottom, 92px);
    max-height: calc(100vh - var(--rk-live-bottom, 92px) - var(--rk-top-clear, 224px));
  }
}
/* The last row of the card (the "All rankings" link) keeps 8 px under it when scrolled to the end, and the
   sections sit a little closer so it shows without scrolling on a 900 px window. */
body #live-panel.pc-live-panel .pc-live-body { padding-bottom: 8px; }
body #live-panel.pc-live-panel .pc-live-sec { padding: 10px 0; }
body #live-panel.pc-live-panel .pc-live-sec.pc-live-last { padding-bottom: 0; }
body #live-panel.pc-live-panel .pc-live-cap { margin-bottom: 6px; }
/* The scroll box was height:100% of a box with no definite height, so it grew to its content and never
   scrolled. As a flex column it takes only the room the card leaves. */
body #live-panel.pc-live-panel .pc-live-scroll { display: flex; flex-direction: column; }
body #live-panel.pc-live-panel .pc-live-body { flex: 1 1 auto; height: auto; min-height: 0; }
/* No text under 12 px in the compact Live card (the LATER tag was 11 px). */
body #live-panel.pc-live-panel .pc-full-later { font-size: 12px; }
@media (max-width: 600px) {
  body.pc-live-open .chrome-corner:not(.pc-bottom-dock):not(.chrome-top-right),
  body.pc-live-open #pc-bottom-dock {
    display: none;
  }
  body #live-panel.pc-live-panel {
    position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-width: none;
    max-height: calc(100vh - 80px); box-sizing: border-box; transform: none; zoom: 1;
  }
}

/* Settings pane is opaque at every width: its pinned header takes the pane's background (full-view.css
   .pc-pane > .pc-ph), and a .9-alpha pane under a header that repeats that .9 showed a lighter band on phone
   and a seam on scroll on desktop. */
#settings-panel.pc-pane { background: rgb(from var(--v-surf) r g b / 1); }

/* Pass 2 P7 round 5: Info, Settings and Live follow the Rankings anchor rule (full-rankings.js writes the
   numbers from measured rects on open and on every resize). Desktop only; the phone keeps its bottom sheets.
   - Settings: left edge on its own tile, bottom one 8 px gap above it, top one gap below the top-left
     button column. The pane scrolls inside that box with its header pinned, so it never reaches the
     zoom / 3D / Info column and that column is neither dimmed nor disabled while Settings is open.
   - Info: it hangs from the Info button (pane-manager.js places left/top); its bottom edge stops one gap
     above the highest bottom tile (--rk-bottom-clear), so Live and Rankings stay clear.
   - Live and Rankings share one close-button style: the .pc-hcb square. */
@media (min-width: 601px) {
  html body #settings-panel.pc-pane:not([hidden]) { display: block; }
  html body #settings-panel.pc-pane {
    left: var(--rk-set-left, 14px); bottom: var(--rk-set-bottom, 58px);
    max-height: calc(100vh - var(--rk-set-bottom, 58px) - var(--rk-top-clear, 224px));
    padding-top: 0; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
  html body #settings-panel.pc-pane > .pc-ph {
    margin-bottom: 0; padding: 17.3px 0 16.1px; background: rgb(from var(--v-surf) r g b / 1);
  }
  html body #info-modal.pc-info-pop .pc-modal-box {
    max-height: calc(100vh - var(--pc-info-top, 20px) - var(--rk-bottom-clear, 92px));
  }
}
body #live-panel .pc-live-head .pc-live-close {
  flex: none; width: 33.1px; height: 33.1px; border-radius: 9.4px; place-items: center;
  background: var(--v-surf2); color: var(--v-ic); margin-left: -4.2px;
}
body #live-panel .pc-live-head .pc-live-close .pc-icon { width: 17.3px; height: 17.3px; }
/* Phone: every sheet and full-view header button is the Rankings 44 px square (one tap target size). */
@media (max-width: 600px) {
  #live-panel .pc-hcb, body #live-panel .pc-live-head .pc-live-close, #settings-panel .pc-hcb,
  #info-modal .pc-hcb, .pc-full-head .pc-hcb { width: 44px; height: 44px; }
}

/* ---- Item 2: hide every replay entry point for now (founder: "let's hide
   the replay features as well for now, can bring that back later"). The
   icon button, the chrome-tabs tab, the phone more-menu row, and the panel
   itself. replay.js's own logic is untouched -- chrome-controls.js's
   PC.replayHidden only swallows the "R" hotkey (the one thing CSS can't
   stop) behind the same flag. Rollback: delete this block AND flip
   PC.replayHidden's REPLAY_HIDDEN to false in chrome-controls.js. */
#replay-btn,
.tab-btn[data-mode="replay"],
[data-more="replay"],
#replay-panel {
  display: none !important;
}

/* ---- #23 (2026-10-04): toolbar grouping, desktop only. The two icon-only
   button rows (top-left: info/zoom/3D, bottom-left: display options/NYC Live)
   sit on one shared card instead of floating as separate tiles, so each row
   reads as one tool group. Theme tokens only. Phone (<=600px) is untouched.
   The pressed/active look is kept (the :not() guards). Rollback: delete this
   block. */
@media (min-width: 601px) {
  /* Pass 2 (D-2026-10-04-011): only + / - / 3D share a card. Info, Settings and Live are
     their own tiles. Daily drawing lives in the right column. */
  body .chrome-btn-group {
    display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden;
    background: var(--v-surf); border: 0; border-radius: 14px;
    box-shadow: 0 0 0 1px var(--v-edge), inset 0 0 0 1px var(--v-hair), var(--v-sh);
  }
  body .chrome-btn-group .icon-btn:not(.active):not([aria-pressed="true"]) {
    background: transparent; border-color: transparent; box-shadow: none;
  }
}

/* ---- Pane ease (site-wide "panes snap" item): Live, Settings, Info and Shop open and close over the
   Rankings pane's own ease (rk-pane-in/out): opacity + a 10 px rise + scale .97, --v-dur-base, --v-ease-out in,
   --v-ease-in out. [hidden] keeps display (transition-behavior allow-discrete) until the fade finishes, and
   takes no pointer events meanwhile. A browser without @starting-style/allow-discrete just snaps as before.
   Rankings is excluded: full-rankings.js animates it. Layout is untouched. Rollback: delete this block. */
@media (prefers-reduced-motion: no-preference) {
  body #live-panel.pc-live-panel, #settings-panel.pc-pane {
    transform-origin: 0 100%;
    transition: opacity var(--v-dur-base) var(--v-ease-out), translate var(--v-dur-base) var(--v-ease-out),
      scale var(--v-dur-base) var(--v-ease-out), display var(--v-dur-base) allow-discrete;
  }
  body #live-panel.pc-live-panel[hidden], #settings-panel.pc-pane[hidden] {
    opacity: 0; translate: 0 10px; scale: .97; pointer-events: none;
    transition: opacity var(--v-dur-base) var(--v-ease-in), translate var(--v-dur-base) var(--v-ease-in),
      scale var(--v-dur-base) var(--v-ease-in), display var(--v-dur-base) allow-discrete;
  }
  #info-modal.pc-modal-overlay, #pc-shop-modal.pc-modal-overlay {
    transition: opacity var(--v-dur-base) var(--v-ease-out), display var(--v-dur-base) allow-discrete;
  }
  #info-modal.pc-modal-overlay[hidden], #pc-shop-modal.pc-modal-overlay[hidden] {
    opacity: 0; pointer-events: none;
    transition: opacity var(--v-dur-base) var(--v-ease-in), display var(--v-dur-base) allow-discrete;
  }
  @starting-style {
    body #live-panel.pc-live-panel, #settings-panel.pc-pane { opacity: 0; translate: 0 10px; scale: .97; }
    #info-modal.pc-modal-overlay, #pc-shop-modal.pc-modal-overlay { opacity: 0; }
  }
}