/* Luke's Stuff in the style guide's "Depth": color says how far down you are.
   Paper is the page. Sun holds the tools (the finder). Cobalt, deepest, holds
   the main thing (Featured). Tomato holds the list. Ink only ever sits on
   paper, so everything you read on a colored sheet is a paper slip.
   CHAOS (canvas z-index 1) walks on the sheets and under the slips and cut
   edges. Nothing here may create a stacking context around the list, or its
   rows would drop beneath the critter. */
html[data-depth][data-board-style] {
  /* ---- From the style guide (~/workspace/style-guide/index.html, option A).
     Tokens, slip, sheet roles and the cut edge are copied unchanged; keep
     this block in step with the guide. ---- */
  --paper:#f7f6f1; --ink:#151515; --muted:#55544f; --line:#d9d7cf;
  --sun:#f6c62b; --tomato:#e0432c; --cobalt:#1e50c8;
  --slip-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 3px rgba(0,0,0,.24);
  --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));
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  /* The guide's rule for a full-width page: the wave grows with the window. */
  --lip:clamp(14px,1.25vw,26px);
  .sheet { position:relative; background:var(--bg); color:var(--fg); --bg:var(--paper); --fg:var(--ink); --fg2:var(--muted); }
  .sheet[data-role="tools"] { --bg:var(--sun); }
  .sheet[data-role="list"] { --bg:var(--tomato); }
  .sheet[data-role="main"] { --bg:var(--cobalt); --fg:var(--paper); --fg2:#d5def5; --focus:var(--paper); }
  .sheet.deep { padding-block:calc(30px + var(--lip)) calc(22px + var(--lip)); }
  .slip { background:var(--paper); color:var(--ink); box-shadow:var(--slip-shadow); }
  .on { margin:0 0 10px; color:var(--fg); font-size:13px; line-height:1.45; font-weight:500; letter-spacing:0; }
  .lip { position:absolute; left:-28px; width:calc(100% + 56px); height:var(--lip); fill:var(--c); filter:var(--edge); pointer-events:none; }
  .lip.d { top:-1px; } .lip.d.n1 { z-index:4; } .lip.d.n2 { top:calc(var(--lip) * .5 - 1px); z-index:3; } .lip.d.n3 { top:calc(var(--lip) - 1px); z-index:2; }
  .lip.u { bottom:-1px; filter:var(--rise); } .lip.u.n1 { z-index:4; } .lip.u.n2 { bottom:calc(var(--lip) * .5 - 1px); z-index:3; } .lip.u.n3 { bottom:calc(var(--lip) - 1px); z-index:2; }
  [data-c="paper"] { --c:var(--paper); } [data-c="sun"] { --c:var(--sun); } [data-c="tomato"] { --c:var(--tomato); }
  /* ---- End of the style guide block. ---- */

  --board:var(--paper); --slat:var(--paper); --slat2:var(--paper); --hover:#fff; --board-accent:var(--ink); --amber:var(--ink); --red:var(--ink); --numbers:var(--mono);
  --gutter:24px;
  --i-design:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='5'/%3E%3Crect x='11' y='11' width='9' height='9'/%3E%3C/svg%3E");
  --i-language:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H11l-4 4v-4H4z'/%3E%3C/svg%3E");
  --i-games:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16'/%3E%3Cg fill='black' stroke='none'%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3Ccircle cx='15.5' cy='15.5' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  --i-accessibility:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M5 9.5h14M12 9.5V14M12 14l-4 6M12 14l4 6'/%3E%3C/svg%3E");
  --i-developers:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E");
  --i-writing:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M5 7h14M5 12h14M5 17h8'/%3E%3C/svg%3E");
  --i-about:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c0-4 3-6 7-6s7 2 7 6'/%3E%3C/svg%3E");
  --i-apps:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18'/%3E%3Cpath d='M11 17.5h2' stroke-linecap='round'/%3E%3C/svg%3E");
  color-scheme:light;
  overflow-x:clip;
  scroll-padding-top:96px;
  background:var(--paper);

  body { background:var(--paper); overflow-x:clip; }
  .hall { max-width:1120px; padding:22px var(--gutter) 40px; }
  .lip-defs { position:absolute; }
  /* Sheets run edge to edge and keep their content on the page column. */
  .sheet { margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%); }
  /* The cut edges slide a few pixels with the pointer, lower ones further. */
  .lip { transform:translate3d(calc(var(--tx,0) * var(--k,4) * -1px),0,0); }
  .lip.n2 { --k:8; } .lip.n3 { --k:12; }
  [data-cat="design"] { --icon:var(--i-design); } [data-cat="language"] { --icon:var(--i-language); }
  [data-cat="games"] { --icon:var(--i-games); } [data-cat="accessibility"] { --icon:var(--i-accessibility); }
  [data-cat="developers"] { --icon:var(--i-developers); } [data-cat="writing"] { --icon:var(--i-writing); }
  [data-cat="about"] { --icon:var(--i-about); } [data-cat="apps"] { --icon:var(--i-apps); }
  .cat-icon { display:block; flex:none; width:1.15em; height:1.15em; background:currentColor; -webkit-mask:var(--icon) center / contain no-repeat; mask:var(--icon) center / contain no-repeat; }

  /* Paper: 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:6px 32px; padding:0 0 20px; }
  .brand-wrap { grid-area:brand; gap:14px; }
  .avatar { width:56px; height:56px; box-shadow:0 0 0 2px var(--ink); }
  h1 { margin:0; font-size:44px; line-height:.95; letter-spacing:-.045em; }
  .quick-links { grid-area:quick; justify-self:end; margin:0; gap:0 24px; }
  /* 44px to press, without making the masthead any taller. */
  .quick-links a { min-height:44px; margin-block:-8px; background:none; font-size:14px; font-weight:500; }
  .profile-links { grid-area:badges; justify-self:end; max-width:690px; padding:0; }
  .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; }
  .quick-links a:focus-visible,.profile-links a:focus-visible,.avatar:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }

  /* Sun: the tools. The finder sticks, so its cut edge keeps overhanging
     whatever passes beneath. */
  .finder { position:sticky; top:0; z-index:5; gap:10px; padding-block:14px; border:0; background:var(--sun); }
  .finder .lip.under { top:calc(100% - 1px); z-index:0; }
  .search-field { flex:1 1 280px; min-height:44px; padding:0 4px 0 14px; border:0; border-radius:0; background:var(--paper); box-shadow:var(--slip-shadow); }
  .search-field:focus-within { border:0; box-shadow:var(--slip-shadow); outline:2px solid var(--ink); outline-offset:2px; }
  .search-field input { min-height:44px; padding:0; color:var(--ink); font-size:15px; }
  .select-field[for="cat"] { display:none; }
  &.has-picks .select-field[for="order"] { display:none; }
  .picks { display:flex; gap:10px; margin:0; padding:0; border:0; }
  .pick { display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:0; border-radius:0; font:500 14px/1 inherit; cursor:pointer; }
  .pick[aria-pressed="true"] { background:var(--ink); color:var(--paper); }
  .pick:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
  .select-field { color:var(--ink); font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; }
  .select-field select { min-height:44px; padding:8px 28px 8px 12px; background:var(--paper); box-shadow:var(--slip-shadow); font-size:14px; }
  .select-field select:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
  .text-button { color:var(--ink); font-size:13px; }

  /* Cobalt: the main thing. One paper card per group, a short list on each. */
  &.has-depth #featured { display:none; }
  #groups[hidden] { display:none; }
  .cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
  .card { position:relative; z-index:2; padding:14px 14px 8px; }
  .card h3 { display:flex; align-items:center; gap:8px; margin:0 0 4px; font-size:16px; line-height:1.3; font-weight:700; letter-spacing:-.015em; }
  .card ul { margin:0; padding:0; list-style:none; }
  .card a { display:flex; align-items:center; min-height:36px; color:var(--ink); font-size:15px; line-height:1.2; text-decoration:none; }
  .card a:hover { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
  .card a:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
  /* Without JavaScript the catalog's own six sit in the same well. */
  #featured { position:relative; margin-inline:calc(50% - 50vw); padding:36px calc(50vw - 50%) 30px; background:var(--cobalt); }
  #featured h2 { margin:0 0 10px; color:var(--paper); font-size:13px; font-weight:500; }
  .featured-link { min-height:64px; padding:8px 12px 8px 8px; border:0; background:var(--paper); box-shadow:var(--slip-shadow); }
  .featured-purpose { display:none; }

  /* Tomato: the list. Every destination is a paper slip: picture, name, what
     it is, its section, visitors, and a boxed count where it holds more. */
  .board { padding-block:26px calc(26px + var(--lip)); border:0; background:var(--bg); }
  #groups[hidden] ~ .board,.is-reviewing .board { padding-top:calc(20px + var(--lip)); }
  .board-columns { position:relative; z-index:2; display:flex; justify-content:space-between; min-height:30px; margin-bottom:8px; padding:0 96px 0 64px; background:var(--ink); color:var(--paper); font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; }
  .board-columns > span:not(:nth-child(3),.h-views) { display:none; }
  .board-columns::after { content:"Inside"; position:absolute; right:14px; }
  .routes { display:grid; gap:8px; }
  .route-link { grid-template-columns:40px minmax(0,1fr) auto minmax(5ch,auto); gap:2px 14px; min-height:60px; margin:0; padding:10px 96px 10px 10px; border:0; background:var(--paper); box-shadow:var(--slip-shadow); }
  .route-link:hover,.route-link:focus-visible { background:#fff; }
  .route-link:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
  .route-art { grid-column:1; grid-row:1 / span 2; display:grid; width:40px; height:40px; border-radius:0; box-shadow:none; background:var(--line); color:var(--ink); font-size:12px; font-weight:700; }
  /* No picture: the section's glyph stands in, not initials. */
  .route[data-cat] > .route-link > .route-art:not(:has(img)) .monogram { display:none; }
  .route[data-cat] > .route-link > .route-art:not(:has(img))::after { content:""; width:22px; height:22px; background:var(--ink); -webkit-mask:var(--icon) center / contain no-repeat; mask:var(--icon) center / contain no-repeat; }
  .route-copy { grid-column:2; grid-row:1; align-self:end; padding:0; }
  .route-name { font-size:16px; line-height:1.25; font-weight:700; letter-spacing:-.015em; }
  .route-remarks { grid-column:2; grid-row:2; align-self:start; font-size:13px; line-height:1.4; }
  .route-cat { grid-column:3; grid-row:1 / span 2; display:inline-flex; align-items:center; gap:6px; padding:5px 7px; border:1.5px solid var(--ink); font:500 12px/1 inherit; white-space:nowrap; }
  .route-traffic { grid-column:4; grid-row:1 / span 2; font:500 13px/1 var(--numbers); text-align:right; }
  .route-family > summary { position:absolute; z-index:3; top:0; right:0; width:96px; height:60px; min-height:0; padding:0 14px 0 0; justify-content:flex-end; gap:8px; border:0; background: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:4px 6px; 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:2px solid var(--ink); outline-offset:-8px; }
  /* A row's own pages come out as a handful of small slips. */
  .route-children { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 6px 24px; padding:0; border:0; background:none; }
  .route-children .route-link { display:inline-flex; align-items:center; min-height:40px; padding:0 13px; background:var(--paper); }
  .route-children .route-link:hover,.route-children .route-link:focus-visible { background:#fff; }
  .route-children :is(.route-art,.route-remarks,.route-cat,.route-traffic) { display:none; }
  .route-children .route-copy { align-self:center; }
  .route-children .route-name { font-size:14px; font-weight:500; letter-spacing:0; }
  /* Sorted by category the list becomes a table: each section is a block of
     paper tiles under an ink head, and the blocks pack into rows, largest
     first. A tile is the row folded up: its picture, its name, what it is. */
  &[data-grouped] .board-columns { display:none; }
  .table { grid-template-columns:repeat(var(--columns,6),minmax(0,1fr)); gap:22px 16px; align-items:start; }
  .block { grid-column:span var(--span,2); min-width:0; }
  .block-head { position:relative; z-index:2; display:flex; align-items:center; gap:8px; min-height:34px; margin-bottom:8px; padding:0 10px; background:var(--ink); color:var(--paper); }
  .block-head h2 { margin:0; font-size:14px; line-height:1.2; font-weight:700; letter-spacing:-.01em; }
  .block-head code { margin-left:auto; font:600 12px/1 var(--mono); }
  .element-grid { grid-template-columns:repeat(var(--span,2),minmax(0,1fr)); grid-auto-flow:dense; }
  .element-grid > .route { --tile:100%; min-width:0; }
  .element-grid > .route > .route-link { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto 1fr; gap:0; align-content:start; min-height:0; height:100%; padding:10px 10px 12px; }
  .element-grid > .route > .route-link > :is(.route-cat,.route-traffic) { display:none; }
  .element-grid > .route > .route-link > .route-art { grid-column:1; grid-row:1; }
  .element-grid > .route > .route-link > .route-copy { grid-column:1; grid-row:2; align-self:start; padding-top:9px; }
  .element-grid > .route > .route-link .route-name { font-size:15px; line-height:1.2; }
  /* Four lines of description at most, so one long entry cannot stretch a row. */
  .element-grid > .route > .route-link > .route-remarks { grid-column:1; grid-row:3; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; overflow:hidden; padding:4px 0 0; font-size:12.5px; line-height:1.4; }
  .element-grid > .route > .route-family > summary { left:calc(var(--tile) - 48px); right:auto; width:48px; height:48px; padding:0; justify-content:center; }
  .element-grid .family-chevron { display:none; }
  .element-grid > .route > .route-family[open] > summary .family-count { background:var(--ink); color:var(--paper); }
  /* An open tile takes a whole row of its block: the tile, then its own
     pages as slips beside it. */
  .element-grid > .route:has(> .route-family[open]) { --tile:calc((100% - (var(--span,2) - 1) * 8px) / var(--span,2)); grid-column:1 / -1; display:grid; grid-template-columns:var(--tile) minmax(0,1fr); gap:8px; align-items:start; }
  .element-grid > .route:has(> .route-family[open]) > .route-link { height:auto; }
  .element-grid > .route:has(> .route-family[open]) > .route-family { grid-column:2; }
  .element-grid .route-children { margin:0; }
  .empty { position:relative; z-index:2; padding:20px 16px; background:var(--paper); box-shadow:var(--slip-shadow); }

  /* Back up to paper. */
  footer { margin:0; padding-top:10px; border:0; }

  @media(prefers-reduced-motion:no-preference) {
    .lip { transition:transform .16s ease-out; }
  }
  @media(prefers-reduced-motion:reduce) {
    .lip { transform:none; }
  }

  @media(max-width:1100px) {
    .masthead { grid-template-areas:"brand brand" "quick badges"; gap:4px 14px; padding-bottom:6px; }
    .quick-links { justify-self:start; flex-wrap:nowrap; gap:0 16px; }
    .quick-links a { margin-block:0; }
    /* One row of full badges: swipe for the rest. */
    .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:900px) {
    /* The cards become one row you swipe through. */
    .cards { display:flex; gap:10px; margin-inline:calc(var(--gutter) * -1); padding:2px var(--gutter) 6px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; scroll-padding-inline:var(--gutter); }
    .cards::-webkit-scrollbar { display:none; }
    .card { flex:none; width:208px; scroll-snap-align:start; }
    .card a { min-height:44px; }
  }
  @media(max-width:700px) {
    --gutter:16px;
    .hall { padding-top:16px; }
    .brand-wrap { gap:10px; }
    .avatar { width:44px; height:44px; }
    h1 { font-size:34px; }
    .quick-links a { font-size:13px; }
    /* One line of tools: the search and a compact order menu. */
    .finder { flex-wrap:nowrap; padding-block:10px; }
    .search-field { flex:1 1 auto; }
    .picks { display:none; }
    &.has-picks .select-field[for="order"] { display:flex; flex:none; }
    .select-field[for="order"] > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
    #reset { display:none; }
    .board-columns { padding:0 62px 0 60px; }
    .board-columns::after { right:10px; }
    .route-link { grid-template-columns:40px minmax(0,1fr) auto; gap:2px 12px; padding:10px 62px 10px 10px; }
    .route-cat { display:none; }
    /* The number sits on the row's first line, level with the boxed count. */
    .route-traffic { grid-column:3; align-self:start; display:flex; align-items:center; justify-content:flex-end; height:40px; }
    .route-family > summary { width:62px; gap:4px; padding-right:8px; }
    .route-children { margin-left:12px; }
  }
  @media(forced-colors:active) {
    .lip { display:none; }
    .sheet,#featured { background:Canvas; }
    .slip,.route-link,.empty { box-shadow:none; border:1px solid CanvasText; }
    .on { color:CanvasText; }
    .pick[aria-pressed="true"] { background:Highlight; color:HighlightText; }
  }
}