/* Section 3: the module shelf (owner: the modules agent; contract in
   scratch/site-reimagine-2026-10-28/build/site/SECTIONS.md). Eight small scenes, each a
   module doing its job, drawn at one texel per cell (build/site/tools/gen-shelf.mjs):
   a 4 x 2 grid on wide screens, a native horizontal row with scroll snap (on the row only,
   never the page) everywhere else, the next card peeking. Each card's poster (with its
   labels baked in) is the art's background; while a scene plays (modules-shelf.js) one
   small canvas over the cells that change draws the frame and the live plates.
   Light lives in the art, in ramp steps. */
@property --scell{syntax:"<length>";inherits:true;initial-value:2px}
.sh{--scell:var(--cell);padding-block:calc(var(--sec-gap) / 2)}
/* The row: cards in a native horizontal scroller, the first card on the gutter. */
.sh-scroll{margin-top:clamp(28px,3.4vw,48px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none}
.sh-scroll::-webkit-scrollbar{display:none}
@media (pointer:fine){
  .sh-scroll{scrollbar-width:thin;scrollbar-color:var(--deep) transparent;padding-bottom:12px}
  .sh-scroll::-webkit-scrollbar{display:block;height:8px}
  .sh-scroll::-webkit-scrollbar-thumb{background:var(--deep)}
}
.sh-row{display:flex;gap:calc(8 * var(--scell));width:max-content;padding-inline:var(--gutter);list-style:none}
.sh-c{flex:none;width:calc(128 * var(--scell));scroll-snap-align:start}
.sh-c figure{margin:0}
/* The art: 128 x 80 cells. Until it loads, the frame's own night. */
.sh-art{position:relative;width:calc(128 * var(--scell));height:calc(80 * var(--scell));background:var(--night) no-repeat 0 0/100% 100%;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated;contain:strict}
/* A playing scene's canvas: the changing cells and the live plates (modules-shelf.js). */
.sh-cv{position:absolute;visibility:hidden;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
.sh-c.is-play .sh-cv{visibility:inherit}
/* The name and its one line. */
.sh-name{margin-top:14px;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.015em;color:var(--tx)}
.sh-line{margin-top:4px;font-size:15px;line-height:1.45;color:var(--tx2);max-width:36ch;text-wrap:pretty}
.sh-more{margin-top:clamp(32px,3.4vw,48px);font-size:17px}
@media (max-width:759px),(max-aspect-ratio:4/5){
  .sh-name{margin-top:12px;font-size:16px}
  .sh-line{font-size:14.5px}
}
/* Wide screens: the grid, 4 x 2, across the page's content width. */
/* From 1400px the page cell is 2.5px or more (site.css), so four cards fit the content
   width; below it the scrolling row. */
@media (min-width:1400px) and (min-aspect-ratio:4/5){
  /* Four cards across the page's content width (site.css --content) with gaps of at least
     16px: the largest half-pixel cell that fits (whole device pixels on sharp screens, so
     the moving overlay lands exactly on the card's texels), the gaps taking the rest. */
  .sh{--scell:2px}
  @supports (width:round(nearest,1px,1px)){
    .sh{--scell:clamp(2px,round(down,(var(--content) - 48px) / 512,.5px),3px)}
  }
  /* 1x screens: whole pixels. A half-pixel cell there costs Firefox frames over 33 ms on
     scroll (measured in Zen at 1440 x 900); whole pixels cost none and keep every texel even. */
  @media (max-resolution:1.49dppx){
    @supports (width:round(nearest,1px,1px)){
      .sh{--scell:clamp(2px,round(down,(var(--content) - 48px) / 512,1px),3px)}
    }
  }
  .sh-scroll{overflow:visible;scroll-snap-type:none;padding-bottom:0}
  .sh-row{display:grid;grid-template-columns:repeat(4,calc(128 * var(--scell)));justify-content:space-between;column-gap:16px;row-gap:clamp(36px,3.4vw,52px);width:auto}
}
/* gen:shelf */
.sh.is-near .sh-status .sh-art{background-image:url(assets/shelf/status-base-ebc3422816.webp)}
.sh.is-near .sh-notify .sh-art{background-image:url(assets/shelf/notify-base-e78f6f0364.webp)}
.sh.is-near .sh-finish .sh-art{background-image:url(assets/shelf/finish-base-301ab2a86a.webp)}
.sh.is-near .sh-reset .sh-art{background-image:url(assets/shelf/reset-base-af0f71a6b1.webp)}
.sh.is-near .sh-screen .sh-art{background-image:url(assets/shelf/screen-base-e7345fd9be.webp)}
.sh.is-near .sh-budget .sh-art{background-image:url(assets/shelf/budget-base-cca84d99eb.webp)}
.sh.is-near .sh-homeserver .sh-art{background-image:url(assets/shelf/homeserver-base-8aafd40efe.webp)}
.sh.is-near .sh-keepawake .sh-art{background-image:url(assets/shelf/keepawake-base-21c73245dc.webp)}
@media (scripting:none){
  .sh-status .sh-art{background-image:url(assets/shelf/status-base-ebc3422816.webp)}
  .sh-notify .sh-art{background-image:url(assets/shelf/notify-base-e78f6f0364.webp)}
  .sh-finish .sh-art{background-image:url(assets/shelf/finish-base-301ab2a86a.webp)}
  .sh-reset .sh-art{background-image:url(assets/shelf/reset-base-af0f71a6b1.webp)}
  .sh-screen .sh-art{background-image:url(assets/shelf/screen-base-e7345fd9be.webp)}
  .sh-budget .sh-art{background-image:url(assets/shelf/budget-base-cca84d99eb.webp)}
  .sh-homeserver .sh-art{background-image:url(assets/shelf/homeserver-base-8aafd40efe.webp)}
  .sh-keepawake .sh-art{background-image:url(assets/shelf/keepawake-base-21c73245dc.webp)}
}
/* /gen:shelf */
/* Touch: the link to the full list is a 44px touch target, its text where it was. */
@media (max-width:759px),(pointer:coarse){
  .sh-more{margin-top:calc(clamp(32px,3.4vw,48px) - 11px)}
  .sh-more .link{display:inline-block;padding-block:11px}
}
/* Phones: the cards never drop below a 2px cell on short screens (the page cell there is
   capped by the screen's height, which a sideways row does not need). */
@media (max-width:759px){
  .sh{--scell:max(2px,var(--cell))}
}