/* The frame of every page: tokens, base, the bar, the sheet and the panel, the hero.
   One file so the pages cannot drift apart - that is what happened when each had its own copy. */
/* ==== TOKENS ==== */
:root {
  /* the ladder: a colour and a pixel size per rung, as in docs/visual-metaphor.md */
  --rung-2: #3d5a80;
  --rung-4: #5e8ca8;
  --rung-6: #9fd3c7;
  --rung-8: #f2c14e;

  --ground: #0e1526;
  --ground-deep: #090e1a;
  --panel: #141d33;
  --line: #24314f;
  --text: #e6ecf5;
  --muted: #93a2bc;
  --focus: var(--rung-8);

  --measure: 68ch;
  --gap: 1.5rem;
  --radius: 10px;

  /* the sheet-and-panel layout: its own set of names, kept apart from the page palette */
  --app-bg: var(--ground);
  --panel-2: #1b2540;
  --ink: var(--text);
  --barh: 53px;
  --panelw: 272px;
  --maxw: 920px;   /* narrow enough that an open panel still leaves the sheet a margin */
  --gut: 20px;
}

/* ==== BASE ==== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; overflow-x: hidden;
  background: var(--ground);
  color: var(--text);
  font: 400 17px/1.6 "IBM Plex Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.6em; }
h2 { font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--text); text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--focus); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
code, .num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.92em; }

/* The measure of the content and the gutter it keeps from the edge - the padding is what stops
   the text touching the border when an open panel narrows the sheet. */
/* The content column is drawn: a rule down each side, running the height of the page. Sections
   sit one under another, so their sides join into two unbroken lines. */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
        border-inline: 1px solid var(--line); }
/* Separators run at the width of the content, never across the whole sheet: a full-width rule
   reaches under the panel standing beside it and cuts the page in two. */
section { padding-block: 0 clamp(3rem, 7vw, 5.5rem); }
section > .wrap { padding-top: clamp(3rem, 7vw, 5.5rem); }
section + section > .wrap { border-top: 1px solid var(--line); }

/* ==== TOP BAR ==== */
/* The bar and the panel's head are one line across the page: same height, same ground, same rule
   under them. The height belongs to --barh and nothing else may add to it - the padding lives on
   .bar-inner, so that a stray padding here cannot push the two out of step. */
.bar { font-size: 0.95rem; }
.bar__mark { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; text-decoration: none; }
.bar__mark svg { width: 22px; height: 22px; flex: none; }
.bar a { text-decoration: none; color: var(--muted); padding: 0.3rem 0.55rem; border-radius: 6px; }
.bar a:hover { color: var(--text); background: var(--panel); }
.bar a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--focus); border-radius: 0; }
.bar__mark, .bar__mark:hover { color: var(--text); background: none; }

/* ==== LAYOUT: the sheet and the panel ========================================================
   A push panel, by the rules of the site layout spec: it slides out and moves the whole frame -
   header included - because moving only the middle would let the panel lie over the header, leaving
   the page both shifted and covered at once. The page yields the panel's width minus the free
   gutter, never less than zero; on a wide screen it yields nothing, there being nothing to yield.

   Layer order: the sheet sits above the panel, so the panel comes out from under its edge; the bar
   runs at the sheet's width and sits higher still; the footer is above the panel as well, or the
   panel would land on top of it.

   #below is the sheet - opaque, above the panel, so a closed panel hides exactly under its edge.
   #sidebar is the panel: a sticky column the browser keeps in place by itself, with no recomputing
   on scroll. Wide window (body.wide): the side gutter is wider than the panel, so the panel simply
   stands in it and the sheet never moves. Narrow: the panel sits under the sheet with a negative
   margin, taking no space, and opening slides the two apart to meet.

   The panel pushes the content, it never covers it - no scrim, no click trap, closed by the button
   that opened it. */
#main{position:relative;z-index:10}
  #cols{display:flex;align-items:flex-start}
  #below{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;min-height:100vh;
    background:var(--app-bg);
    transform:translateX(var(--shift,0px));transition:transform .25s}
  #sidebar{position:sticky;top:0;height:100vh;width:var(--panelw);flex:none;order:2;z-index:1;
    display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line);
    margin-left:calc(-1 * var(--panelw));
    transform:translateX(var(--panel-shift,0px));transition:transform .25s}
  body.side-left #sidebar{order:0;margin-left:0;margin-right:calc(-1 * var(--panelw));
    border-left:0;border-right:1px solid var(--line)}
  body.no-anim #sidebar,body.no-anim #below{transition:none}
  body.wide #sidebar{margin-left:0;margin-right:0}
  body.wide.side-left #sidebar{margin-left:var(--gapend,0px);margin-right:0}
  /* the button lives on the side the panel comes from, so the hand goes where the panel will be */
  /* the bar is the flex row the ordering depends on: without it `order` does nothing at all */
  .bar{position:sticky;top:0;z-index:30;min-height:var(--barh);box-sizing:border-box;
    background:color-mix(in srgb,var(--ground-deep) 82%,transparent);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .bar-inner{display:flex;align-items:center;gap:10px;padding-top:9px;padding-bottom:9px;flex-wrap:nowrap}
  #burger{order:9}
  body.side-left #burger{order:-1}
  body.wide #below{flex:0 0 auto;width:var(--bw);max-width:none;margin:0;transform:none}
  body.wide .wrap{width:var(--maxw);max-width:none;margin-left:var(--cl,0px);margin-right:0}
  body.wide .bar .wrap,body.wide .doc{padding-inline:var(--gut)}
  body.wide .ribbon .wrap{margin-left:var(--gutter,0px)}
  body.wide .bar{width:var(--maxw);margin-left:var(--cl,0px)}
  body.wide .bar .wrap{width:100%;margin-left:0}
  body.wide #burger{display:none}
  .spacer{flex:1}
  /* the head of the panel: the title takes the room, the two buttons sit against the far edge */
  .side-head{flex:none;display:flex;align-items:center;gap:6px;padding:10px 12px;
    min-height:var(--barh);box-sizing:border-box;
    background:color-mix(in srgb,var(--ground-deep) 82%,transparent);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line)}
  .side-head #side-swap{margin-left:auto}
  #burger,#side-swap,#side-close{flex:none;width:34px;height:34px;font-size:16px;line-height:1;
    background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:8px;
    cursor:pointer;font-family:inherit}
  #burger:hover,#side-swap:hover,#side-close:hover{background:var(--panel-2)}
  #side-swap,#side-close{width:28px;height:28px;font-size:13px}
  body.wide #side-close{display:none}
  .side-title{flex:1;min-width:0;font-weight:600;font-size:15px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .side-body{flex:1;min-height:0;overflow-y:auto;padding:10px 12px 16px}
  .side-body > .side-h:first-child{margin-top:2px}

/* ==== HERO: the filter itself ==== */
.hero { position: relative; height: calc(100svh - var(--bar-h)); min-height: 420px; display: grid; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.hero__veil {
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 35%, transparent 30%, var(--ground-deep) 100%);
  pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; align-content: center; justify-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(2rem, 6vw, 4rem) 1.25rem;
  text-align: center;
  pointer-events: none;
}
.hero__inner > * { pointer-events: auto; }
.logo-head { margin: 0; }
.logo { display: block; width: min(440px, 80vw); height: auto; filter: drop-shadow(0 8px 30px rgba(9, 14, 26, 0.9)); }
.hero__line { max-width: 46ch; margin: 0; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); color: var(--text); }
.hero__line b { font-weight: 600; color: var(--focus); }

/* ==== CONTENT ==== */
.lede { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem); }
.cols { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rules { font-family: "IBM Plex Mono", monospace; font-size: 0.86rem; line-height: 1.75; margin: 0; padding: 1.2rem 1.3rem; overflow-x: auto; background: var(--ground-deep); border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); }
.rules b { color: var(--text); font-weight: 500; }

table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.7rem 0.8rem 0.7rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 500; color: var(--muted); font-size: 0.85rem; }
.scroller { overflow-x: auto; }
.tag { display: inline-block; font-size: 0.78rem; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.tag--open { color: var(--rung-6); }
.tag--yes { color: var(--rung-8); }
.tag--no { color: #e08d79; }
.tag--legacy { color: var(--muted); }

/* The rule above the footer runs at the width of the content, not of the window: a line across
   the whole page would cut the sheet off from the panel standing beside it. */
footer { padding-block: 0 4rem; color: var(--muted); font-size: 0.9rem; }
footer .wrap { border-top: 1px solid var(--line); padding-top: 2.5rem; }
footer p { max-width: var(--measure); }

@media (max-width: 700px) {
  body { font-size: 16px; }
  /* on a phone the reading comes first and the field last: the name, then the controls a thumb can
     hit, then a clear area to tap lenses into */
  .hero { min-height: auto; display: flex; flex-direction: column; }
  .hero canvas { position: static; order: 2; width: 100%; height: 52svh; }
  .hero__veil { display: none; }
  .hero__inner { order: 1; align-content: start; padding: 1.5rem 1.25rem 1.25rem; gap: 0.9rem; }
  .logo { width: min(260px, 62vw); }
  .hero__line { font-size: 0.95rem; }
  /* one control, one line: the label on the left, the field on the right */
  .panel { gap: 0.7rem 1rem; grid-template-columns: 1fr; }
  .control { grid-template-columns: 8.5rem 1fr; align-items: center; gap: 0.8rem; }
  .control:has(select) { grid-template-columns: 8.5rem minmax(6.5rem, auto); }
  .control span { font-size: 0.9rem; display: block; }
  .control input, .control select { width: 100%; }
  .control select { padding: 0.4rem 0.5rem; }
  /* a thumb needs a taller track than a mouse */
  .control input[type="range"] { height: 2rem; }
  .panel { padding: 0.85rem 1rem; gap: 0.7rem 1.2rem; }
  .control span { font-size: 0.78rem; }
  .readout { gap: 0.3rem 1rem; padding-top: 0.7rem; font-size: 0.84rem; }
  .cols { gap: 0.5rem; }
  .rules { font-size: 0.76rem; padding: 1rem 0.9rem; }
  th, td { padding-right: 0.6rem; }
}
@media (min-width: 1600px) {
  .wrap { width: min(100% - 4rem, 1240px); }
  body { font-size: 18px; }
}
@media (pointer: coarse) {
  .hero__inner { padding-bottom: 2rem; }
}