/* =====================================================================
   shell.css — OUR TAPES as an app. Loaded last.
   The page itself never scrolls, bounces or zooms, in any orientation: the den is exactly one screen.
   Only the shelves move, inside themselves (each shelf sideways; on a phone the stack of shelves up and down
   inside its own panel). Nothing selects, calls out or flashes blue on a long press.
   ===================================================================== */

html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html { height: 100vh; height: 100dvh; }
body { min-height: 0; touch-action: manipulation; -webkit-touch-callout: none; }
* { -webkit-tap-highlight-color: transparent; }
img, svg, a { -webkit-touch-callout: none; -webkit-user-drag: none; }
/* a shelf keeps its sideways scroll to itself (no back-swipe), but a vertical swipe on the tapes passes up to the
   shelves panel, which scrolls on a phone. Containing y here left most of the panel (the spines) dead to a thumb. */
.shelf-track, .hm-box-in { overscroll-behavior-x: contain; overscroll-behavior-y: auto; }

/* =====================================================================
   PHONE HELD UPRIGHT (and iPad portrait): a header strip (switches left, wordmark right), the TV with the tree
   beside it, the VCR, then the shelves panel, which fills the rest and scrolls inside itself.
   ===================================================================== */
@media (max-width: 820px) and (orientation: portrait), (max-width: 820px) and (min-height: 501px) {
  :root {
    --hdr: 40px;
    --ptv: min(calc(100vw - 104px - var(--sal) - var(--sar)), 520px,
      max(190px, calc((44dvh - 26px - var(--hdr) - var(--sat) - .345 * (100vw - 32px)) / .646)));
    --tvreg: calc(var(--sat) + var(--hdr) + 4px + .646 * var(--ptv));
  }
  html { scroll-padding-top: 0; }
  .den, body.bench-open .den { height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding-bottom: 0; }
  .unit { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .av { position: relative; top: auto; flex: 0 0 auto; max-height: none; padding-top: calc(var(--hdr) + var(--sat)); }
  .shelves { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x pan-y;
    padding-bottom: calc(60px + var(--sab)); }
  .shelves::-webkit-scrollbar { display: none; }
  #collection { min-height: 0; }
  /* spines size to the screen's height too, so a short phone still shows a shelf and a half */
  .collection { --sh: var(--shelf-h, clamp(128px, min(46vw, 23dvh), 186px)); }
  /* the whole tree stands beside the TV, pot on the cabinet top: a cropped top third read as a dark smudge */
  .tree-layer { --trh: min(calc(var(--tvreg) - var(--sat) - var(--hdr) + 2px), calc((var(--tvl) + 6px) * 1.75)); }
  .tree-svg { top: calc(var(--tvreg) - var(--trh) + 6px); height: var(--trh); left: calc(var(--tvl) * .5 - var(--trh) * .2857); }
  .switches { top: calc(3px + var(--sat)); }
  .brand { top: calc(3px + var(--sat)); }
  /* with the remote's peek tab or the hint bar up, the last shelf can still scroll clear of them */
  body.bench-open .shelves { padding-bottom: calc(100dvh - var(--av-h)); }
}
/* a tablet held upright: the same layout, but the TV gets big, the VCR sits under it at its own width (not a
   giant full-width deck) and the two bookcases stand side by side */
@media (min-width: 600px) and (max-width: 820px) and (orientation: portrait) {
  :root { --hdr: 46px;
    --ptv: min(calc(100vw - 220px), 600px, max(300px, calc((52dvh - 30px - var(--hdr) - var(--sat)) / .991))); }
  .vcr { width: var(--ptv); margin-left: auto; }
  .vcr-cubby { padding-right: calc(16px + var(--sar)); }
  .units { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  .shelves { padding-left: 16px; padding-right: 16px; }
  #holder { --ch: clamp(160px, calc(100dvh - var(--av-h) - 8px - 110px - var(--sab)), 440px); }
}

/* =====================================================================
   PHONE ON ITS SIDE: the switches move to a rail down the cabinet's left side (never over the box in your hands
   or the shelves), TV + VCR beside them, the shelves panel on the right scrolls inside itself.
   ===================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --rail: 40px;
    --tvw: min(calc(var(--avw) - 28px - var(--rail)), calc((100dvh - 46px) / .95)); }
  .den { height: 100vh; height: 100dvh; }
  .unit { height: 100%; }
  .av { padding-left: calc(10px + var(--rail) + var(--sal)); }
  .switches { top: 50%; left: calc(2px + var(--sal)); right: auto; transform: translateY(-50%); flex-direction: column; gap: 6px; }
  .shelves { height: 100vh; height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x pan-y; }
  .shelves::-webkit-scrollbar { display: none; }
  #collection { padding-bottom: calc(58px + var(--sab)); }
}

/* the wordmark at the foot of the shelves (phone on its side): js/brand.js moves it there */
.brand.brand-foot { position: static; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
  margin: 4px 0 calc(66px + var(--sab, 0px)); pointer-events: auto; opacity: .85; }
.brand.brand-foot .brand-by { margin: 0; }

/* =====================================================================
   NOTES AND BADGES never land on the picture, the box in your hands or its buttons
   ===================================================================== */
/* desktop: Mom's note sticks to the wall top-right, under the switches (the hint tray's PUT IT BACK stays clear) */
@media (min-width: 821px) and (min-height: 501px) {
  .eg-note { top: calc(86px + var(--sat)); bottom: auto; right: calc(20px + var(--sar)); width: min(260px, calc(var(--gut-r, 300px) + 60px)); }
  .eg-note.eg-sticky { width: min(230px, calc(var(--gut-r, 300px) + 40px)); }
}
/* phone upright: under the VCR, over the shelves (never on the TV) */
@media (max-width: 820px) and (orientation: portrait), (max-width: 820px) and (min-height: 501px) {
  .eg-note { top: calc(var(--av-h, 340px) + 14px); bottom: auto; right: calc(16px + var(--sar)); }
  /* the badge drops into the gap between the VCR and the box in your hands, never on the box art */
  .eg-badge { top: calc(var(--av-h, 340px) + 6px); bottom: auto; }
  /* Mom sticks her note on the TV (the screen is blue after EJECT): clear of the box, its buttons and the VCR slot */
  .eg-note.eg-sticky { top: calc(44px + var(--sat)); width: min(196px, 56vw); padding: 12px 11px 8px; right: calc(10px + var(--sar)); }
  .eg-note.eg-sticky .eg-sticky-text { font-size: 13.5px; line-height: 1.22; margin-bottom: 4px; }
  .eg-note.eg-sticky .eg-sig { font-size: 13px; }
}
/* phone on its side: over the shelves panel, never over the TV */
@media (orientation: landscape) and (max-height: 500px) {
  .eg-note { top: calc(12px + var(--sat)); left: calc(var(--avw) + var(--sal) + 14px); right: auto;
    width: min(270px, calc(100vw - var(--avw) - var(--sal) - 28px)); }
  /* Mom's sticky is a small square in the panel's corner, beside the box you're holding rather than on it */
  .eg-note.eg-sticky { left: calc(var(--avw) + var(--sal) + 10px); top: calc(10px + var(--sat)); width: min(150px, calc((100vw - var(--avw)) * .32)); padding: 12px 10px 8px; }
  .eg-note.eg-sticky .eg-sticky-text { font-size: 12.5px; line-height: 1.25; margin-bottom: 4px; }
  .eg-note.eg-sticky .eg-sig { font-size: 12px; }
  .eg-badge { top: auto; bottom: calc(60px + var(--sab)); left: calc(var(--avw) + var(--sal) + (100vw - var(--avw) - var(--sal)) / 2); }
}