/* ---- the top bar ----------------------------------------------------------
   It sits outside main so it spans the window, and it is stuck to the top from
   the first pixel. Inside, a container the width of the content column keeps
   the name aligned with the page. The rule underneath runs the full width,
   faint, the way a header border does; the view you are in is the only heavy
   mark in it. Three zones:
     left    the name, which is Home
     middle  the views (Home's tab is not drawn, the name is the way there)
     right   the settings, pinned to the column's right edge:
             Search, then three glyphs: Glitch, Sound, Theme
   By width:
     under 768    [=] ascii/ui                     [/]  <)))  -O-
     768 to 1023  [=] ascii/ui  views              [/]  /\/  <)))  -O-
     1024 and up  ascii/ui  views       [ Search...  Ctrl K ]  |  /\/  <)))  -O-  */
.topbar{
  position:sticky;top:0;z-index:40;background:var(--bg);
  padding-top:env(safe-area-inset-top,0px);
}
.topbar-in{margin:0 auto;padding:0 2ch;position:relative}
.topbar::after{
  content:var(--h-faint);position:absolute;left:0;right:0;bottom:0;height:var(--r);
  overflow:hidden;white-space:nowrap;font-weight:500;color:var(--muted);opacity:.5;pointer-events:none;
}
html{scroll-padding-top:calc(var(--r)*3 + env(safe-area-inset-top,0px))}

/* the first thing a keyboard reaches. It is moved above the window rather than
   clipped, so it keeps a thumb's height, and it comes down when focused */
.skip{
  position:fixed;top:env(safe-area-inset-top,0px);left:2ch;z-index:120;
  padding:12px 1ch;line-height:var(--r);font-weight:700;text-decoration:none;
  background:var(--accent);color:var(--bg);outline:0;transform:translateY(-200%);
}
.skip:focus{transform:none}

.viewsbar{display:flex;align-items:flex-start;padding-bottom:var(--r)}
.viewsbar > *{flex:none}

/* one idiom for everything in the bar: ink text, a thumb tall. Magenta on
   hover, blue only for focus */
.bbtn{
  font:inherit;font-weight:700;line-height:var(--r);background:none;border:0;border-radius:0;
  color:var(--ink);padding:12px 0;margin:0;cursor:pointer;outline:0;
  white-space:nowrap;text-decoration:none;-webkit-tap-highlight-color:transparent;
}
.bbtn:focus-visible{background:var(--accent);color:var(--bg)}
@media (hover:hover){.bbtn:hover{color:var(--hot)}}

/* the name is Home, at every width */
.brand{
  font:inherit;font-weight:700;line-height:var(--r);background:none;border:0;border-radius:0;
  color:var(--ink);padding:12px 0;margin:0 2.5ch 0 0;
  cursor:pointer;outline:0;white-space:nowrap;
}
.brand .slash{color:var(--hot)}
.brand:focus-visible{background:var(--accent);color:var(--bg)}
.brand:focus-visible .slash{color:inherit}
@media (hover:hover){.brand:hover .slash{color:var(--pink)}}
.crumb{display:none}
#v-home{display:none!important}

/* the views: muted, the one you are in ink and bold with a heavy run of
   characters under it on the rule row. No fill, no magenta: weight is density */
#views{position:static;margin-top:0;padding-bottom:0;flex:0 1 auto;min-width:0;display:flex;gap:0 1ch;overflow:visible}
#views::after{display:none}
#views .tab{
  display:block;flex:none;white-space:nowrap;position:relative;
  padding:12px .5ch;margin:0;line-height:var(--r);
  text-transform:none;text-decoration:none;color:var(--muted);font-weight:500;
  background:none;box-shadow:none;
}
#views .tab[aria-selected="true"]{color:var(--ink);font-weight:700;background:none;box-shadow:none}
#views .tab[aria-selected="true"]::after{
  content:var(--h-heavy);position:absolute;left:.5ch;right:.5ch;top:100%;
  height:var(--r);overflow:hidden;white-space:nowrap;color:var(--ink);background:var(--bg);z-index:1;
  font-weight:700;pointer-events:none;
}
@media (hover:hover){#views .tab:hover{color:var(--hot)}}
#views .tab:focus-visible{background:var(--accent);color:var(--bg)}

/* the settings, on the right edge. Search looks like a field from 1024px; the
   rest are glyphs 5 characters wide with a thumb of bleed each side */
.barctl{margin-left:auto;display:flex;align-items:flex-start;gap:0 1ch}
.barctl .sep{color:var(--muted);padding:12px 1ch;line-height:var(--r)}
.gbtn{display:block;width:5ch;padding:12px .5ch;margin:0 -.5ch;box-sizing:content-box;text-align:center;gap:0}
/* from 1280px each glyph carries its word, so nobody has to guess. Below
   that there is no room; the label and the title still say it */
.gw{display:none}
@media (min-width:1280px){
  .gbtn{width:auto;min-width:5ch;display:flex;gap:1ch;margin:0}
  .gw{display:inline;font-weight:500}
  .barctl{gap:0 2ch}
}
#soundBar{font-weight:700;line-height:var(--r)}
#soundBar input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
#soundToggle:not(:checked) ~ .lbl,#glitchBar[aria-pressed="false"]{color:var(--muted)}
#soundBar:has(#soundToggle:focus-visible){background:var(--accent);color:var(--bg)}
#soundBar:has(#soundToggle:focus-visible) .lbl{color:inherit}
#soundBar:has(#soundToggle:disabled){cursor:not-allowed;color:var(--muted)}
@media (hover:hover){#soundBar:hover .lbl{color:var(--hot)}}

.sfield{display:flex;justify-content:space-between;width:22ch;color:var(--muted);font-weight:500}
.sfield b{font-weight:500}
.sf-g{display:none}
@media (hover:hover){.sfield:hover,.sfield:hover b{color:var(--hot)}}
.sfield:focus-visible b{color:inherit}
@media (min-width:1280px){.sfield{width:28ch}}

@media (min-width:1024px){#menuBtn{display:none}}
@media (max-width:1023px){
  .brand{margin-right:1.5ch}
  .barctl .sep,.sf-l,.sf-k{display:none}
  .sfield{width:5ch;padding:12px .5ch;margin:0 -.5ch;box-sizing:content-box;justify-content:center;color:var(--ink);font-weight:700}
  .sf-g{display:inline}
  #menuBtn{display:block;min-width:44px;text-align:left;padding:12px 1ch 12px 0}
}
@media (max-width:767px){#views,#glitchBar{display:none}}

/* ---- the sidebar ----------------------------------------------------------
   From 1024px a sidebar lists the sections of the view you are in, sticky
   under the bar, with the one you are reading marked. Below that there is no
   room, so the [=] menu carries the same list. Everything is measured in
   characters and rows: the sidebar is 26 wide with a 4 gutter, which leaves
   whole columns for the gallery beside it (66 at 1024px, 43 at 1280px, 41 at
   1600px). */
#sidenav{display:none}

@media (min-width:1024px){
  main{
    display:grid;
    grid-template-columns:26ch 1fr;
    column-gap:4ch;
    align-items:start;
  }
  /* rows, in order: the hero, then the sidebar beside the panels, then the
     footer. The panels are pinned because they all share one cell, and once a
     row is pinned the rest have to be too or they flow into the gap */
  main > header{grid-column:1/-1;grid-row:1}
  main > footer{grid-column:1/-1;grid-row:3}
  main > [role="tabpanel"]{grid-column:2;grid-row:2;min-width:0}
  /* a view with nothing to list gives the width back to the content */
  main:has(#sidenav[hidden]){grid-template-columns:1fr}
  main:has(#sidenav[hidden]) > [role="tabpanel"]{grid-column:1/-1}
  /* Chrome keeps a sticky grid item inside the grid, not inside its row, so a
     sticky nav rode down over the footer's title. The nav is a plain cell as
     tall as its row, and the list inside it is what sticks, so it stops where
     the row does */
  #sidenav{display:block;grid-column:1;grid-row:2;align-self:stretch}
  #sidenav .side-in{
    position:sticky;top:calc(var(--r)*3 + env(safe-area-inset-top,0px));
    max-height:calc(100vh - var(--r)*4 - env(safe-area-inset-top,0px));overflow:auto;
    scrollbar-width:thin;padding-bottom:var(--r);
  }
  /* two rows between the hero and what comes after, so the sidebar title
     does not read as the last line of the hint */
  #sidenav,main > [role="tabpanel"]{margin-top:calc(var(--r)*2)}
  /* the chip index says the same thing twice once the sidebar is there */
  #view-kit > .toc,#view-blocks > .toc,#view-charts > .toc,
  #view-kit > section:has(> .toc),#view-blocks > section:has(> .toc),
  #view-charts > section:has(> .toc){display:none}
}

/* the list, shared by the sidebar and the menu: the view and its count first,
   then Start, the counted sections, About */
.navh{font:inherit;font-weight:700;color:var(--ink);margin:0 0 var(--r);line-height:var(--r)}
.navcount{color:var(--muted);font-weight:500}
/* the heading stays put while the list scrolls under it */
#sidenav .navh{position:sticky;top:0;z-index:1;background:var(--bg);margin:0;padding-bottom:var(--r)}
.navgroup + .navgroup{margin-top:var(--r)}
.navlabel{margin:0;padding-left:1ch;line-height:var(--r);color:var(--muted);text-transform:uppercase}
.navgroup ul{list-style:none;margin:0;padding:0}
.navgroup li{line-height:var(--r)}
/* A row is one row. With a mouse that is the target; 12px of extra hit area
   above and below made every entry overlap its neighbours, so the bottom half
   of Alert opened Avatar. A thumb gets a whole 48px row instead: always in the
   menu, and in the sidebar on a touch screen (a tablet held sideways). */
.navlink{
  display:block;width:100%;text-align:left;color:var(--muted);text-decoration:none;
  padding:0 1ch;margin:0;cursor:pointer;outline:0;line-height:var(--r);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-tap-highlight-color:transparent;
}
#menuSecs .navlink{padding:12px 1ch}
@media (pointer:coarse){#sidenav .navlink{padding:12px 1ch}}
/* a link reached by Tab is not left under the sticky heading */
#sidenav .side-in{scroll-padding-top:calc(var(--r)*2)}
.navlink::before{content:"  ";white-space:pre}
@media (hover:hover){.navlink:hover{color:var(--ink)}}
.navlink:focus-visible{background:var(--accent);color:var(--bg)}
.navlink[aria-current]{color:var(--ink);font-weight:700}
.navlink[aria-current]::before{content:"> ";color:var(--hot)}
.navlink[aria-current]:focus-visible,.navlink:focus-visible::before{color:var(--bg)}
/* a section reached from a list takes the focus, quietly */
[role="tabpanel"] > section[tabindex="-1"]:focus{outline:0}

/* ---- small screens --------------------------------------------------------
   Fixes that only matter under a phone's width. */

/* the tooltip is one long line, which on a 320px screen pushes the page
   sideways even while it is clipped out of sight */
.tip{max-width:calc(100vw - 4ch);white-space:normal}

/* ---- sheets ----------------------------------------------------------------
   The Filters sheet scrolls inside itself, and the way out is the [x] in its
   title row or the strip of page above it. */
dialog.sheet{max-height:82vh;max-height:82dvh;flex-direction:column}
dialog.sheet[open]{display:flex}
dialog.sheet > .lift,dialog.sheet .card{min-height:0;display:flex;flex-direction:column;flex:1}
dialog.sheet .body{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain}
/* nothing behind a dialog scrolls while it is open */
body:has(dialog[open]){overflow:hidden}

/* the way out sits in the title row, where it is always visible */
.sheet-x{
  /* the box is a thumb tall, centred on the one row it draws in */
  position:absolute;top:calc(var(--r)*-0.5);right:2ch;z-index:4;
  font:inherit;font-weight:700;background:var(--bg);border:0;border-radius:0;
  color:var(--ink);padding:12px 1ch;line-height:var(--r);
  cursor:pointer;outline:0;
}
.sheet-x:focus-visible{background:var(--accent);color:var(--bg)}
@media (hover:hover){.sheet-x:hover{color:var(--hot)}}
/* the Filters sheet closes the same way, from its own [x] or the page above it.
   Its body is 80 characters, so on a wide screen the [x] sits on that column's
   edge rather than the window's, and the body takes the whole 80 rather than
   shrinking to its checkboxes */
#sheetDlg .body{width:100%}
#sheetDlg .sheet-x{right:max(2ch,calc(50% - 40ch))}
/* the frame rows get a background so the list disappears under them instead
   of showing half a row through the characters */
dialog.sheet .card::before,dialog.sheet .card::after{background:var(--bg)}

/* ---- the [=] menu -----------------------------------------------------------
   Below 1024px this is the index: the whole screen, opaque, in rows.
     MENU                                  [x]
     Components Blocks Charts ...              (scrolls sideways)
     Components 30
       Button
     > Card                                    (the one you are reading)
     [ ] Show grid  [@@..] Glitch  [@@..] Sound  [Light]
   Picking a view up top only refills the list; the page changes when you pick
   a section. It comes in and goes out with the same four steps. */
#menuDlg{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
  background:var(--bg);color:var(--ink);overflow:hidden;
}
#menuDlg[open]{display:flex;animation:menuin .16s steps(4) both}
#menuDlg.out{animation:menuout .16s steps(4) both}
@keyframes menuin{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes menuout{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@media (prefers-reduced-motion:reduce){#menuDlg[open],#menuDlg.out{animation:none}}
/* nothing shows through while it steps in */
#menuDlg::backdrop{background:var(--bg)}
.menu-in{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;max-width:80ch;margin:0 auto;padding:0 2ch}
.menu-top{display:flex;justify-content:space-between;align-items:flex-start;flex:none}
.menu-slab{
  font:inherit;font-weight:700;line-height:var(--r);margin:calc(var(--r)/2) 0;padding:0 1ch;
  background:var(--hot);color:var(--bg);text-transform:uppercase;
  box-shadow:-2px 0 0 var(--violet),2px 0 0 var(--warn);
}
.menu-x{padding:calc(var(--r)/2) 1ch;margin-right:-1ch}
.menu-views{flex:none;overflow-x:auto;scrollbar-width:none;margin-top:var(--r)}
.menu-views::-webkit-scrollbar{display:none}
.menu-views .tab{flex:none;white-space:nowrap;padding:calc(var(--r)/2) 1ch;text-transform:none;line-height:var(--r)}
/* on a phone the seven views wrap to two rows rather than scroll sideways and
   cut a word in half; the menu has the height */
@media (max-width:767px){.menu-views{flex-wrap:wrap;overflow:visible}}
.menu-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;position:relative;padding:var(--r) 0}
.menu-h{font:inherit;font-weight:700;color:var(--ink);margin:0 0 var(--r);line-height:var(--r)}
.menu-foot{
  flex:none;display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 3ch;
  position:relative;padding:var(--r) 0 calc(var(--r)/2);
}
.menu-foot::before{
  content:var(--h-faint);position:absolute;left:0;right:0;top:0;height:var(--r);
  overflow:hidden;white-space:nowrap;color:var(--muted);opacity:.5;
}
.menu-foot .check{padding:12px 0;margin:0}
.menu-foot .bbtn{padding:12px 0}

/* A jump lands the section's title in the first row under the bar: the
   landing is measured in js/70-nav.js from the title itself, so the rule and
   the margin above it do not push it down. Native jumps (focus, find) get no
   extra margin either. Under 768px sections are also closer together. */
@media (max-width:1023px){
  [role="tabpanel"] > section[aria-labelledby]{scroll-margin-top:0}
}
@media (max-width:767px){
  [role="tabpanel"] > section[aria-labelledby]{margin-top:calc(var(--r)*2)}
  [role="tabpanel"] > section[aria-labelledby] + section[aria-labelledby]::before{margin-bottom:var(--r)}
}

/* Hit areas a thumb can find. The rule is 44px, these were 20 to 40. Seven
   calendar columns and six code cells at 44px each do not fit on the narrowest
   phones, so there the brackets step aside rather than the target shrinking. */
@media (max-width:1023px){
  .cal-grid button{padding:12px 0}
  .rampcells input{min-width:3ch}
  .menu [role="menuitem"]{padding:12px 0}
  .pager button,.pager a,.stepper button{padding:12px 1ch;margin:-12px 0}
  .feed .bell,.feed .like,.feed .rt{padding:12px 1ch;margin:-12px 0}
  .otp{flex-wrap:wrap}
}
@media (min-width:384px) and (max-width:1023px){.cal-grid{grid-template-columns:repeat(7,5ch)}}
/* the brackets move inside the 5ch target, so a cell reads [ _ ] and is
   still 48px wide. Six of them and five gaps are 35 columns, which fits from
   384px. Below that the gaps go and it is 30. */
@media (max-width:1023px){
  .otp{flex-wrap:nowrap}
  .otp span{position:relative}
  .otp span::before,.otp span::after{position:absolute;top:0;pointer-events:none}
  .otp span::before{left:0}.otp span::after{right:0}
  .otp input{width:5ch}
}
@media (max-width:383px){.otp{gap:0}}

/* Landscape on a phone has no height to spare: the bar loses its rule row and
   the hero keeps a third of the screen. */
@media (max-height:480px) and (orientation:landscape){
  .topbar::after{display:none}
  /* a third of 390px showed the top of one word and the edge of the torus,
     which reads as broken; the hero, its photo buttons and its glow step out,
     and Play still has it on its own stage */
  main > header > #hero,main > header > #heroSrc > .btn{display:none}
  body{background:var(--bg)}
}

/* The REC counter is the only text under 12px and on a small screen it lands on
   top of the chart axis and the calendar. */
@media (max-width:479px){.hud{display:none}}

/* A phone reads one column, so an open popover covers the section under it
   rather than blending into its dotted rule. */
[role="tabpanel"] > section:has(.menu.open),[role="tabpanel"] > section:has([aria-expanded="true"]){position:relative;z-index:6}
.menu{box-shadow:0 0 0 1ch var(--bg)}

/* A table wider than the phone scrolls sideways with nothing to say so: no
   scrollbar on touch, no fade, and the last column simply missing. */
@media (max-width:767px){
  .tablewrap{position:relative}
  .tablewrap[data-wide]::after{
    content:"scrolls sideways";display:block;color:var(--muted);
    line-height:var(--r);height:var(--r);position:sticky;left:0;
  }
}

/* On the narrowest phones the two hero buttons were 10px too wide together and
   stacked, which cost three rows. The label loses its side space there, the
   frame still reads. */
@media (max-width:399px){
  #heroSrc{gap:var(--r) 1ch}
  #heroSrc .btn .label{padding:0}
}

/* A two column list with a 10ch label does not fit a 320px screen once the
   value is a bar of characters. */
@media (max-width:399px){
  .kv{grid-template-columns:1fr}
  .kv dd{margin-bottom:var(--r)}
  .statbars{max-width:100%}
}

/* A progress bar is a fixed run of characters next to its percentage. On a
   320px screen the run is wider than the row and pushed the number off the
   edge, so there the number wraps under it and the run clips. */
@media (max-width:479px){
  .progress{flex-wrap:wrap}
  .progress .bar,.progress .glyph{max-width:100%;overflow:hidden}
}

/* a select is a control, it gets a thumb's worth of height on touch */
@media (max-width:1023px){.field select,select{min-height:calc(var(--r)*2)}}

/* The camera and photo messages print under their own buttons, not a grid row
   further down beside the poster button. Empty, the line gives its row back. */
#heroSrc > #heroStatus{flex-basis:100%;margin:0}
#heroSrc > #heroStatus:empty{min-height:0;margin-top:calc(var(--r)*-1)}