/* ---- layout grid ----------------------------------------------------------
   Two things live here. First, how wide the page is allowed to get: --maxcols
   is the cap in characters, it steps up at four breakpoints and js/10 reads it
   when it snaps main to a whole number of columns. Second, the component
   galleries: Components, Blocks and Charts flow into as many columns of at
   least 46ch as fit, so the page fills a monitor instead of a strip down the
   middle. A section that needs the full width says so with data-span; js/30
   sets it on anything holding a table, a picture or a phone, index.html sets it
   on the charts that draw to the page width, and the Code tab sets it while it
   is open. */

:root{
  --maxcols:80;      /* ~768px, the width the kit was designed at */
  --galmin:40ch;     /* narrowest a gallery column may get */
  --galgap:4ch;      /* gutter between gallery columns */
}
@media (min-width:1024px){:root{--maxcols:100}}   /* ~960px,  2 columns */
@media (min-width:1280px){:root{--maxcols:124}}   /* ~1190px, 2 columns */
@media (min-width:1600px){:root{--maxcols:165}}   /* ~1590px, 3 columns of 51ch */

/* css/02 caps main at 80ch, the cap now moves with the breakpoints */
main{max-width:calc(var(--maxcols)*1ch)}

#view-kit,#view-blocks,#view-charts{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(var(--galmin),100%),1fr));
  gap:0 var(--galgap);
  align-items:start;
}
/* full width by default, so anything untagged keeps the old single column */
#view-kit > *,#view-blocks > *,#view-charts > *{grid-column:1/-1;min-width:0}
#view-kit > section[aria-labelledby]:not([data-span]),
#view-blocks > section[aria-labelledby]:not([data-span]),
#view-charts > section[aria-labelledby]:not([data-span]){grid-column:span 1}

/* one column: the grid is a no-op and the old rhythm applies unchanged */
@media (max-width:1023px){
  #view-kit > section[aria-labelledby]:not([data-span]),
  #view-blocks > section[aria-labelledby]:not([data-span]),
  #view-charts > section[aria-labelledby]:not([data-span]){grid-column:1/-1}
}

/* Sections keep their document order: row by row, left to right, the same
   order the alphabetical index above them promises. A row is as tall as its
   tallest card, which leaves air under the short ones and is the price of that
   promise. Because every card in a row starts at the same height, the dashed
   rule reads as the top edge of a card again, so it goes on all of them and not
   only on the ones that follow another. One row of air, the rule, one row of
   air, then the title. Five was a hole and four still was. */
@media (min-width:1024px){
  #view-kit > section[aria-labelledby],
  #view-blocks > section[aria-labelledby],
  #view-charts > section[aria-labelledby]{margin-top:var(--r)}
  #view-kit > section[aria-labelledby]::before,
  #view-blocks > section[aria-labelledby]::before,
  #view-charts > section[aria-labelledby]::before{
    content:var(--h-faint);display:block;height:var(--r);overflow:hidden;
    white-space:nowrap;color:var(--muted);opacity:.5;margin-bottom:var(--r);
  }
}

/* text stays readable however wide the page gets */
.lede,section > p.muted{max-width:72ch}
#view-kit > section > p,#view-blocks > section > p,#view-charts > section > p{max-width:72ch}

/* the two block grids were pinned to fixed character columns at a viewport
   breakpoint, which is wrong inside a gallery column: the column is 46ch wide
   whatever the window is. They now fit as many tracks as the box allows. */
.grid2{grid-template-columns:repeat(auto-fit,minmax(min(37ch,100%),1fr));gap:var(--r) 2ch}
.grid3{grid-template-columns:repeat(auto-fit,minmax(min(24ch,100%),1fr));gap:var(--r) 2ch}
.grid2 .lift,.grid3 .lift{max-width:none}

/* the progress bar is a fixed run of characters, let it scroll in a narrow box */
.progress{max-width:100%;overflow-x:auto}

/* a popover belongs to its own card but is drawn over the next one, so the
   card that has something open comes forward */
#view-kit > section,#view-blocks > section,#view-charts > section{position:relative}
#view-kit > section:has(.menu.open),#view-blocks > section:has(.menu.open),
#view-kit > section:has([aria-expanded="true"]),#view-blocks > section:has([aria-expanded="true"]),
#view-kit > section:has(.tip:focus-within),#view-kit > section:has(.tip:hover){z-index:6}
.menu{box-shadow:0 0 0 1ch var(--bg)}

/* the footer game keeps its size, it just stops hugging the left edge */
#inv{margin-inline:auto}

/* ---- hero edges ----------------------------------------------------------
   The scene is drawn to the edge of its canvas, so streaks and the sides of
   the title used to stop mid character, a cut that reads as a mistake rather
   than as a frame. Six characters of fade on the sides and two rows top and
   bottom let them leave instead. The measurements are grid units, like
   everything else. On a phone six characters is a sixth of the canvas and ate
   the A of ASCII, so there it is two. layout() reads --fade and starts the
   words where the fade ends. */
#hero{
  --fade:6;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 calc(var(--fade)*1ch),#000 calc(100% - var(--fade)*1ch),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 calc(var(--r)*2),#000 calc(100% - var(--r)*2),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,#000 calc(var(--fade)*1ch),#000 calc(100% - var(--fade)*1ch),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 calc(var(--r)*2),#000 calc(100% - var(--r)*2),transparent 100%);
  mask-composite:intersect;
}
@media (max-width:719px){#hero{--fade:2}}

/* ---- the hero fold --------------------------------------------------------
   Home's header says one thing: the headline, a short lede, two ways in, and
   one quiet line for feeding the ring a photo. One column with one left edge,
   the same edge as the name in the bar. The Grid and Glitch switches live in
   the bar's settings now; their inputs stay here, hidden, because four
   scripts read them. */
.hero-h{font-weight:700;color:var(--ink);margin:var(--r) 0 0}
main > header > .lede{max-width:64ch;margin-top:0}
main > header > #heroGo{margin-top:var(--r);flex-wrap:wrap;column-gap:2ch}
.hero-src{margin-top:var(--r);align-items:baseline;column-gap:2ch;flex-wrap:wrap}
.hero-src .status{margin:0}
/* a text button: ink, underlined, magenta on hover, a thumb tall */
.linkbtn{
  font:inherit;line-height:var(--r);background:none;border:0;border-radius:0;color:var(--muted);
  padding:12px 0;margin:-12px 0;cursor:pointer;outline:0;text-decoration:underline;text-underline-offset:3px;
}
@media (hover:hover){.linkbtn:hover{color:var(--hot)}}
.linkbtn:focus-visible{background:var(--accent);color:var(--bg);text-decoration:none}

main > header > .hero-facts{margin:var(--r) 0 0}
/* ---- Home, under the hero --------------------------------------------------
   Bands with a plain bold label, so the ASCII/UI bitmap stays the only big
   title on the page. */
.band{font:inherit;font-weight:700;color:var(--ink);margin:0 0 var(--r);text-transform:uppercase;letter-spacing:0}
#view-home > section{margin-top:var(--r)}
#view-home{margin-top:0!important}
#view-home > section::before{margin-bottom:var(--r)!important}
/* the proof: four live parts, each with the way to its code */
.tries{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(34ch,100%),1fr));gap:calc(var(--r)*2) 4ch;align-items:start}
.try{min-width:0}
.try-h{display:flex;justify-content:space-between;gap:2ch;margin:0 0 var(--r)}
.try .row,.try .group,.try .stack,.try .slider{margin:0}
#view-home .stats{grid-template-columns:repeat(auto-fit,minmax(min(20ch,100%),1fr))}
#view-home > section[aria-labelledby="s-ideas"]{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(44ch,100%),1fr));gap:var(--r) 4ch}
#view-home > section[aria-labelledby="s-ideas"] > h2{grid-column:1/-1;margin:0}
#view-home > section[aria-labelledby="s-ideas"] > .demo{margin:0}
/* the way in: four tiles, each one a frame of = that thickens to # under the
   pointer and to a blue @ with the keyboard. The whole tile is the link */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(26ch,100%),1fr));gap:var(--r) 2ch}
.tile{display:block;color:var(--ink);text-decoration:none;outline:0}
.tile .mid{height:100%}
.tile-in{display:flex;flex-direction:column;flex:1;min-width:0;padding:0 1ch;min-height:calc(var(--r)*4)}
.tile-in b{line-height:var(--r)}
.tile-in .go{margin-top:auto;color:var(--hot);font-weight:700;align-self:flex-end}
@media (hover:hover){.tile:hover{--h:var(--h-mid);--s:var(--s-mid);--frame-color:var(--hot)}.tile:hover b{color:var(--hot)}}
.tile:focus-visible{--h:var(--h-heavy);--s:var(--s-heavy);--frame-color:var(--accent)}
.tile:focus-visible b{color:var(--accent)}

/* ---- the docs pages: one bitmap, in the header ------------------------------
   Components, Blocks, Charts and Themes open the same way: the view's name as
   the only big title on the page, one line on what is in it, a faint rule.
   Each section below is a bold word, not another bitmap: thirty posters in a
   row was a wall of shouting. */
.dochead{grid-column:1/-1}
.dochead .ptitle{margin:0}
.dochead .lede{margin:var(--r) 0 0;max-width:72ch;color:var(--muted)}
.dochead + *{margin-top:var(--r)!important}
.inl{color:var(--ink);text-underline-offset:3px;outline:0;padding:12px 0;margin:-12px 0}
@media (hover:hover){.inl:hover{color:var(--hot)}}
.inl:focus-visible{background:var(--accent);color:var(--bg);text-decoration:none}
/* the group a run of components belongs to, on the page as in the sidebar */
.grouph{grid-column:1/-1;font-weight:700;color:var(--muted);text-transform:uppercase;line-height:var(--r);margin:calc(var(--r)*2) 0 0}
/* a jump lands the section's title under the bar, not behind it */
#main section[aria-labelledby]{scroll-margin-top:calc(var(--r)*3)}
/* title, caption and tabs close up: the title row, the caption, the tabs */
#view-kit > section > h2.vh + p,#view-blocks > section > h2.vh + p,
#view-charts > section > h2.vh + p,#view-themes > section > h2.vh + p{margin-top:0}
#view-kit > section > pre.ptitle,#view-blocks > section > pre.ptitle,
#view-charts > section > pre.ptitle,#view-themes > section > pre.ptitle{display:none}
#view-kit > section > h2.vh,#view-blocks > section > h2.vh,
#view-charts > section > h2.vh,#view-themes > section > h2.vh{
  position:static;width:auto;height:auto;margin:0;padding:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;
  font:inherit;font-weight:700;color:var(--ink);text-transform:uppercase;line-height:var(--r);
}
/* Blocks are page-sized: one per row, so a card shows at the width it is for */
#view-blocks > section[aria-labelledby]{grid-column:1/-1!important}

/* Only Home has the header. Every other view starts with its own
   content one row under the bar: no hero margin, no section margin. */
main > header[hidden]{display:none}
main > header[hidden] ~ #sidenav,main > header[hidden] ~ [role="tabpanel"]{margin-top:0}
main > header[hidden] ~ [role="tabpanel"] > :first-child{margin-top:0}
#foot > .foot{margin-top:calc(var(--r)*3)}