/* Luke's Stuff as cut paper. The top of the page is a stack of four sheets:
   paper, then sun (the finder), tomato and cobalt (the Featured well). Below
   it the directory is strata: each main line is a full-width band one step
   further down a single blue ramp, light to deep, so scrolling is descending.
   A line is a paper heading over a shelf of its rows; a row that holds more
   opens a pocket cut into a darker shade of its own band.
   Ink only ever sits on paper; colour belongs to the sheets underneath.
   CHAOS (canvas z-index 1) leaves the title on the top sheet, then slips
   under rows and cut edges; floors sit below it, and terraces.js tells the
   engine how deep each floor is. Nothing here may create a stacking context
   around the directory, or its rows would drop beneath the critter. */
html[data-terraces][data-board-style] {
  --paper:#f7f6f1; --ink:#151515; --muted:#55544f; --line:#d9d7cf;
  --sun:#f6c62b; --tomato:#e0432c; --cobalt:#1e50c8;
  --board:var(--paper); --slat:var(--paper); --slat2:var(--paper);
  --hover:#fff; --board-accent:var(--ink); --amber:var(--ink);
  --edge:drop-shadow(0 2px 2px rgba(0,0,0,.3)) drop-shadow(0 7px 9px rgba(0,0,0,.17));
  --rise:drop-shadow(0 -1px 2px rgba(0,0,0,.22));
  --slat-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 3px rgba(0,0,0,.24);
  --gutter:40px; --top:26px;
  --shallow:#c5ddf8; --deep:#15286c;
  overflow-x:clip;
  scroll-padding-top:120px;
  background:var(--paper);

  body { background:var(--paper); overflow-x:clip; }
  .hall { max-width:1200px; padding:var(--top) var(--gutter) 40px; }

  /* Sheets that run edge to edge keep their content on the page column. */
  .finder,#featured,.board { margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%); }
  .t-cut { position:relative; margin-inline:calc(50% - 50vw); }
  .t-lip { position:absolute; left:-28px; top:0; width:calc(100% + 56px); height:100%; z-index:2; pointer-events:none; filter:var(--edge); transform:translate3d(calc(var(--tx,0) * var(--k,0) * -1px),calc(var(--ty,0) * var(--k,0) * -.6px + var(--sy,0) * var(--k,0) * .8px),0); }
  .t-lip--rise { filter:var(--rise); }
  .t-paper { fill:var(--paper); } .t-sun { fill:var(--sun); } .t-tomato { fill:var(--tomato); }
  .t-lip--sun { --k:5; } .t-lip--tomato { --k:10; }
  .t-bubble { position:absolute; z-index:0; border-radius:50%; background:var(--paper); box-shadow:0 2px 3px rgba(0,0,0,.3); transform:translate3d(calc(var(--tx,0) * -16px),calc(var(--ty,0) * -10px),0); }

  /* Depth 0: who this is, and where else to find him. */
  .masthead { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"brand quick" "brand badges"; align-items:center; gap:8px 32px; padding:0 0 20px; }
  .brand-wrap { grid-area:brand; gap:16px; }
  .avatar { position:relative; width:64px; height:64px; box-shadow:none; }
  .avatar::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 3px 5px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.28); }
  h1 { margin:0; font-size:52px; }
  .quick-links { grid-area:quick; justify-self:end; margin:0; gap:0 24px; }
  .quick-links a { min-height:28px; background:none; font-size:14px; font-weight:500; }
  .profile-links { grid-area:badges; justify-self:end; padding:0; }
  /* Two rows of five beside the title: no extra height on wide screens. */
  .profile-links { max-width:690px; }
  .profile-links ul { justify-content:flex-end; gap:0 5px; }
  .profile-links a { min-height:24px; background:none; }
  .profile-links img { width:auto; height:18px; max-width:none; filter:none; opacity:1; }
  .profile-links a:hover img,.profile-links a:focus-visible img { transform:translateY(-1px); }
  .quick-links a:focus-visible,.profile-links a:focus-visible,.avatar:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
  .t-cut--top { height:34px; background:var(--sun); }
  .t-cut--top .t-lip { left:0; width:100%; }

  /* Depth 1: the finder is the edge of the sun sheet. It sticks, so its lip
     keeps overhanging whatever scrolls beneath. */
  .finder { top:0; z-index:5; gap:10px 20px; padding-block:6px 10px; border:0; background:var(--sun); }
  .finder .t-lip { top:calc(100% - 12px); height:44px; z-index:-1; }
  .search-field { flex-basis:280px; padding:0 4px 0 14px; border:0; background:var(--paper); box-shadow:var(--slat-shadow); }
  .search-field:focus-within { box-shadow:var(--slat-shadow),0 0 0 2px var(--ink); }
  .search-field input { min-height:44px; }
  .select-field { color:var(--ink); font-size:11px; font-weight:500; letter-spacing:.04em; }
  .select-field select { padding:8px 26px 8px 12px; background:var(--paper); box-shadow:var(--slat-shadow); }
  .select-field select:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
  .text-button { color:var(--ink); }

  /* Depth 3: Featured lies on the cobalt floor, two sheets below the finder. */
  #featured { position:relative; padding-block:0; background:var(--cobalt); }
  .t-well-top { height:58px; }
  .t-well-bottom { height:62px; margin-top:4px; }
  .t-well-bottom .t-lip--sun { height:calc(100% + 14px); }
  .t-bubble--a { left:62%; top:40px; width:14px; height:14px; }
  .t-bubble--b { right:11%; top:30px; width:9px; height:9px; z-index:3; }
  .t-bubble--c { right:5%; top:2px; width:12px; height:12px; }
  #featured h2 { margin:0 0 12px; color:#fff; font-size:13px; font-weight:500; }
  .featured-tiles { grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px 18px; }
  .featured-link { display:block; min-height:0; padding:0; border:0; background:none; color:#fff; }
  .featured-link:hover { background:none; }
  .featured-link:focus-visible { outline:2px solid #fff; outline-offset:5px; }
  .featured-art { width:100%; height:auto; aspect-ratio:16 / 9; flex:none; border:4px solid var(--paper); background:var(--paper); color:var(--ink); box-shadow:0 3px 4px rgba(0,0,0,.4); transform:rotate(var(--tilt,0deg)); }
  .featured-tiles li:nth-child(3n+1) .featured-art { --tilt:-1.4deg; }
  .featured-tiles li:nth-child(3n+2) .featured-art { --tilt:.9deg; }
  .featured-tiles li:nth-child(3n) .featured-art { --tilt:-.5deg; }
  .featured-link:hover .featured-art,.featured-link:focus-visible .featured-art { transform:translateY(-3px); box-shadow:0 8px 10px rgba(0,0,0,.4); }
  .featured-copy strong { margin-top:9px; color:#fff; font-size:15px; }
  .featured-purpose { display:none; }

  /* Depth 1 again: paper slats on the sun sheet, with seams for CHAOS. */
  .board { --band:var(--sun); --shade:#6b3200; padding-block:8px 6px; border:0; background:var(--sun); }
  .board:has(.stratum) { padding-bottom:0; }
  /* With Featured out of the way (search, review) the header clears the finder's lip. */
  #featured[hidden] ~ .board,.is-reviewing .board { padding-top:36px; }
  .board-columns,.route-link,.drawer-head { grid-template-columns:44px minmax(0,1.1fr) minmax(0,1fr) auto; gap:16px; padding:0 12px 0 6px; }
  .board-columns { position:relative; z-index:2; min-height:28px; margin-bottom:8px; box-shadow:0 2px 3px rgba(0,0,0,.24); }
  .board-columns > span:nth-child(3) { grid-column:1 / span 2; padding-left:6px; }
  .board-columns .h-views { grid-column:4; }
  .routes > li + li { margin-top:5px; }
  .route-link { min-height:56px; margin:0; border:0; background:var(--paper); box-shadow:var(--slat-shadow); }
  .route-link:hover,.route-link:focus-visible { background:#fff; }
  .route-art { display:grid; width:44px; height:44px; border-radius:0; box-shadow:none; background:color-mix(in srgb,var(--route-color) 62%,#fff); color:var(--ink); font-size:13px; font-weight:600; }
  .route-copy { padding:10px 0; }
  .route-traffic { position:relative; justify-self:end; min-width:5.4ch; padding:6px 7px 5px; background:var(--ink); color:var(--paper); font:600 12px/1 var(--numbers); letter-spacing:.02em; text-align:right; }
  /* Hinge pins at the sides, as on a flap display, without striking the number. */
  .route-traffic::before,.route-traffic::after { content:""; position:absolute; top:50%; width:3px; height:1px; background:rgba(247,246,241,.55); }
  .route-traffic::before { left:0; } .route-traffic::after { right:0; }
  .empty { position:relative; z-index:2; background:var(--paper); box-shadow:var(--slat-shadow); }

  /* Strata. terraces.js sets --t for a band and --pt for the band above,
     from 0 at the top to 1 at the bottom; the cut edge of the band above
     overhangs each one. */
  .stratum { --band:color-mix(in oklch,var(--shallow),var(--deep) calc(var(--t,0) * 100%)); --prev:color-mix(in oklch,var(--shallow),var(--deep) calc(var(--pt,0) * 100%)); --shade:#070f33;
    position:relative; margin-inline:calc(50% - 50vw); padding:32px calc(50vw - 50%) 16px; background:var(--band); }
  .stratum.is-first { --prev:var(--sun); }
  .routes > .stratum + .stratum { margin-top:0; }
  .stratum-lip { top:-12px; height:44px; fill:var(--prev); --k:6; }

  /* A line: one paper heading, the same shape whether it is a page of its
     own or a drawer, then its rows hanging beneath it. */
  .stratum-head { position:relative; }
  .line-head { margin:0; }
  .drawer-head { position:relative; z-index:2; display:grid; align-items:center; color:var(--ink); background:var(--paper); box-shadow:var(--slat-shadow); }
  .stratum-head .route-link,.drawer-head { grid-template-columns:44px 250px minmax(0,1fr) auto; min-height:56px; padding-right:84px; }
  /* On wide screens a shelf row's columns line up under its heading's. */
  @media(min-width:901px) {
    .shelf > li > .route-link { grid-template-columns:44px 228px minmax(0,1fr) auto; }
    .shelf .route-children > li > .route-link { grid-template-columns:44px 206px minmax(0,1fr) auto; }
    .shelf .route-children .route-children > li > .route-link { grid-template-columns:44px 184px minmax(0,1fr) auto; }
  }
  .stratum-head .route-name { font-size:20px; }
  .line-count { position:absolute; z-index:3; top:0; right:0; display:flex; align-items:center; justify-content:flex-end; width:84px; height:56px; padding-right:12px; pointer-events:none; font:600 12px/1 var(--numbers); }
  .line-count b { min-width:2.6ch; padding:5px 6px 4px; border:1.5px solid var(--ink); font-weight:600; text-align:center; }
  .drawer-stack { position:relative; background:none; }
  .drawer-stack img { position:absolute; inset:5px; width:34px; height:34px; border:2px solid var(--paper); object-fit:cover; box-shadow:0 1px 3px rgba(0,0,0,.4); }
  .drawer-stack img:nth-child(1) { transform:translate(-4px,2px) rotate(-9deg); }
  .drawer-stack img:nth-child(2) { transform:translate(4px,-2px) rotate(7deg); }
  .drawer-stack img:nth-child(3) { transform:rotate(-1deg); }
  .shelf { margin:5px 0 0 22px; }
  .shelf:not(.is-open) > li:nth-child(n+5) { display:none; }
  .shelf-more { position:relative; z-index:2; display:block; width:calc(100% - 22px); min-height:44px; margin:5px 0 0 22px; border:0; background:var(--paper); box-shadow:var(--slat-shadow); color:var(--ink); font:500 13px/1 inherit; cursor:pointer; }
  .shelf-more:hover,.shelf-more:focus-visible { background:#fff; }
  .shelf-more:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }
  .shelf-more[hidden] { display:none; }

  /* Every row has one shape: art, name, what it is, visitors, and where a
     row holds more, the boxed count that opens it. Removal review keeps the
     plain strip so its checkboxes have room. */
  .route-family > summary { position:relative; z-index:3; min-height:44px; padding:0 14px 0 56px; border:0; background:var(--paper); box-shadow:0 2px 3px rgba(0,0,0,.24); font-size:13px; }
  .route-family > summary:hover { background:#fff; }
  .hall:not(.is-reviewing) {
    .route-link,.board-columns { padding-right:84px; }
    .board-columns::after { content:"Inside"; position:absolute; right:12px; }
    .route-family > summary { position:absolute; top:0; right:0; width:84px; height:56px; min-height:0; padding:0 12px 0 0; justify-content:flex-end; gap:10px; background:none; box-shadow:none; font-size:0; }
    .route-family > summary:hover { background:none; }
    .route-family > summary:hover .family-count { background:var(--ink); color:var(--paper); }
    .route-family > summary .family-count { min-width:2.6ch; padding:5px 6px 4px; border:1.5px solid var(--ink); font:600 12px/1 var(--numbers); text-align:center; }
    .route-family > summary .family-noun { display:none; }
    .route-family > summary:focus-visible { outline-offset:-6px; }
  }

  /* A pocket is cut into a darker shade of the band it sits in, and a pocket
     inside a pocket darker again. Its rim is a sliver of the layer above
     that slides with the pointer, so the opening drifts over its floor. */
  .route-children { --k:5; --above:var(--band); --floor:color-mix(in oklch,var(--band),var(--shade) 30%);
    --rim:calc(var(--tx,0) * var(--k) * -1px); --rim-top:calc(4px + var(--ty,0) * var(--k) * -.6px);
    position:relative; margin:0; padding:16px 12px 12px 22px; border:0; background:var(--floor);
    box-shadow:inset var(--rim) 0 0 var(--above),inset calc(max(var(--rim),0px) + 7px) 0 6px -5px rgba(0,0,0,.34),inset calc(min(var(--rim),0px) - 5px) 0 5px -5px rgba(0,0,0,.16); }
  /* The top rim overhangs the pocket, above the critter's layer, so it ducks under the edge on its way in and out. */
  .route-children::before { content:""; position:absolute; z-index:2; inset:0 0 auto; height:var(--rim-top); background:var(--above); box-shadow:0 4px 6px rgba(0,0,0,.45); pointer-events:none; }
  .route-children .route-children { --k:8; --above:color-mix(in oklch,var(--band),var(--shade) 30%); --floor:color-mix(in oklch,var(--band),var(--shade) 54%); }
  .route-children .route-link { background:var(--paper); }
  .route-children .route-link:hover,.route-children .route-link:focus-visible { background:#fff; }

  /* Back up to depth 0. */
  .t-cut--bottom { height:42px; background:var(--sun); }
  &[data-strata] .t-cut--bottom { background:color-mix(in oklch,var(--shallow),var(--deep) calc(var(--last-t,1) * 100%)); }
  .t-cut--bottom .t-lip { left:0; width:100%; }
  footer { margin:0; padding-top:4px; border:0; }

  @media(prefers-reduced-motion:no-preference) {
    .t-lip,.t-bubble { transition:transform .16s ease-out; }
    .route-children { transition:box-shadow .16s ease-out; }
    .featured-art,.profile-links img { transition:transform .16s ease-out,box-shadow .16s ease-out; }
  }
  @media(prefers-reduced-motion:reduce) {
    .t-lip,.t-bubble { transform:none; }
  }

  @media(max-width:1100px) {
    --gutter:24px;
    .masthead { grid-template-areas:"brand brand" "quick badges"; gap:4px 14px; padding-bottom:4px; }
    .quick-links { justify-self:start; flex-wrap:nowrap; gap:0 16px; }
    .quick-links a { min-height:44px; }
    /* One row of full badges: swipe for the rest instead of five stacked rows. */
    .profile-links { justify-self:stretch; min-width:0; max-width:none; margin-inline:0 calc(var(--gutter) * -1); overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; scroll-padding-inline:12px; mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 44px),transparent); }
    .profile-links::-webkit-scrollbar { display:none; }
    .profile-links ul { display:flex; flex-wrap:nowrap; justify-content:flex-start; width:max-content; gap:0; padding-inline:8px 44px; }
    .profile-links img { height:20px; }
    .profile-links li { flex:none; max-width:none; scroll-snap-align:start; }
    .profile-links a { min-height:44px; padding-inline:4px; }
    .profile-links a:focus-visible { outline-offset:-3px; }
  }
  @media(max-width:700px) {
    .featured-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); }
  }
  @media(max-width:900px) {
    .search-field { flex-basis:100%; }
    .board-columns,.route-link,.drawer-head,.stratum-head .route-link { grid-template-columns:44px minmax(0,1fr) auto; gap:4px 14px; }
    .drawer-stack { grid-column:1; grid-row:1 / span 2; }
    .drawer-head .route-copy { grid-column:2; grid-row:1; padding:10px 0 0; }
    .drawer-head .route-remarks { grid-column:2; grid-row:2; padding:0 0 12px; }
    .board-columns > span:nth-child(3) { grid-column:1 / span 2; }
    .board-columns .h-views { grid-column:3; }
    .route-art { grid-column:1; grid-row:1 / span 2; }
    .route-copy { grid-column:2; grid-row:1; padding:10px 0 0; }
    .route-remarks { grid-column:2; grid-row:2; padding:0 0 10px; }
    .route-traffic { grid-column:3; grid-row:1 / span 2; }
    .route-children { padding-left:16px; padding-right:10px; }
  }
  @media(max-width:480px) {
    --gutter:16px;
    scroll-padding-top:150px;
    --top:16px;
    .masthead { gap:4px 12px; padding-bottom:2px; }
    .brand-wrap { gap:10px; }
    .avatar { width:44px; height:44px; }
    h1 { font-size:34px; }
    .quick-links a { font-size:13px; }
    .t-cut--top { height:28px; }
    .finder { gap:8px 12px; padding-block:4px 8px; }
    .select-field { flex:1 1 0; flex-wrap:wrap; gap:2px; font-size:10px; }
    .select-field select { width:100%; padding:8px 10px; font-size:14px; }
    .t-well-top { height:56px; }
    .featured-tiles { gap:14px 12px; }
    .featured-link { flex-direction:column; min-height:0; }
    .featured-art { flex-basis:auto; width:100%; height:auto; aspect-ratio:4 / 3; border-width:3px; }
    .featured-copy strong { margin-top:7px; font-size:13px; }
    .board-columns,.route-link,.drawer-head,.stratum-head .route-link { grid-template-columns:40px minmax(0,1fr) auto; gap:2px 10px; padding:0 8px 0 5px; }
    .hall:not(.is-reviewing) :is(.route-link,.board-columns),.stratum-head .route-link,.drawer-head { padding-right:62px; }
    .hall:not(.is-reviewing) .board-columns::after { right:8px; }
    .hall:not(.is-reviewing) .route-family > summary,.line-count { width:62px; gap:5px; padding-right:6px; }
    .stratum { padding-top:30px; padding-bottom:14px; }
    .stratum-head .route-name { font-size:19px; }
    .shelf,.shelf-more { margin-left:10px; }
    .shelf-more { width:calc(100% - 10px); }
    .shelf:not(.is-open) > li:nth-child(n+4) { display:none; }
    .route-art { width:40px; height:40px; font-size:12px; }
    .route-traffic { min-width:0; padding:5px 5px 4px; font-size:11px; }
    .route-children { --k:4; padding:14px 8px 10px 10px; }
    .route-children .route-children { --k:6; }
  }
  @media(forced-colors:active) {
    .t-cut,.t-lip,.t-bubble { display:none; }
    .finder,#featured,.board,.stratum,.route-children { background:Canvas; box-shadow:none; }
    .route-children::before { display:none; }
    #featured h2,.featured-link,.featured-copy strong { color:CanvasText; }
    .featured-art { transform:none; border-color:CanvasText; }
    .route-traffic { background:Canvas; color:CanvasText; }
  }
}