/* GMP web app. Everything below the two faces is HAM's catalog stylesheet, copied verbatim from
   ham/internal/catalog/html.go (baseCSS) at HAM commit d7eef0f so the matrices read the same in
   both places. GMP's own rules are in gmp.css, loaded right after this file, so this one stays
   byte-comparable to HAM's. */
@font-face{font-family:'Funnel Display';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/funnel-display-700.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/instrument-sans.woff2) format('woff2')}
/* The two themes are attribute-selected, not media-selected: the OS preference is no longer
   consulted at all, because the viewer's own choice has to be able to override it and a media
   query cannot be overridden. Dark is the BASE, so an unset data-theme resolves to dark in the
   stylesheet itself rather than waiting for script -- which is also what keeps the default off
   the critical path. The dark block names the explicit attribute beside the bare :root so both
   directions are legible here, and light follows it, so at equal specificity an explicit light
   wins. Nothing outside these two blocks differs between the themes. */
:root,:root[data-theme="dark"]{
  color-scheme:dark;
  --navy:#000514; --brand:#7d75ec; --sel:#2a1fd6; --accent:#a79ff5;
  --bg:#000514; --panel:#0b1224; --fg:#f3f3f9; --muted:#a6abbb; --faint:#7b8199;
  --line:#232a44; --line2:#141a2e; --shadow:none;
  --req:#a79ff5; --reqbg:#191634; --reqline:#3b3470;
  --s0:#34d399; --s1:#22d3ee; --s2:#fbbf24; --s3:#fb923c; --s4:#f87171;
  --s0b:#052e21; --s1b:#083344; --s2b:#3b2503; --s3b:#3a1c05; --s4b:#3f1414;
  --glow:radial-gradient(46% 38% at 50% 0%,rgba(125,117,236,.10) 0%,rgba(0,5,20,0) 62%);
}
:root[data-theme="light"]{
  color-scheme:light;
  --navy:#000514; --brand:#1300eb; --sel:#1300eb; --accent:#7d75ec;
  --bg:#f3f3f9; --panel:#fff; --fg:#000514; --muted:#5a6076; --faint:#666c81;
  --line:#e8eaee; --line2:#eef0f7; --shadow:0 1px 2px rgba(0,5,20,.07);
  --req:#5b4fd6; --reqbg:#f1effd; --reqline:#c9c3f5;
  --s0:#047857; --s1:#0e7490; --s2:#854d0e; --s3:#a83a0b; --s4:#b91c1c;
  --s0b:#dcfce7; --s1b:#cffafe; --s2b:#fef3c7; --s3b:#fff1e4; --s4b:#fee2e2;
  --glow:none;
}
/* Two registers, deliberately not blended. --display and --sans are the brand's own faces and
   belong to the hero and the chrome; --mono is the system stack and belongs to the data. A
   unit ID, a target and a level name are identifiers, and setting them in the brand face would
   say they are prose. */
:root{
  --sans:"Instrument Sans",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Funnel Display","Instrument Sans",ui-sans-serif,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);
  font:14px/1.55 var(--sans);-webkit-font-smoothing:antialiased;
  background-image:var(--glow);background-attachment:fixed}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono)}
/* One ring for everything focusable, in a token because the two themes need different
   colours to stay visible. The topbar keeps its own dark ground in BOTH themes, so the light
   theme's indigo would vanish on it -- it gets the violet instead. */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.topbar :focus-visible{outline-color:#a79ff5}

/* The bar keeps the brand ground in BOTH themes, which in dark is also the page's ground, so
   it needs an edge of its own or it stops being a bar at all. */
.topbar{background:var(--navy);color:#f3f3f9;padding:0 20px;height:52px;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.09);
  display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20}
.mark{height:24px;width:auto;flex:none}
.topbar b{font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.topbar .sep{color:#8189a6}
.topbar .meta{margin-left:auto;font-size:11.5px;color:#a6abbb;font-variant-numeric:tabular-nums}

.app{display:flex;align-items:flex-start}
aside{width:264px;flex:none;position:sticky;top:52px;height:calc(100vh - 52px);
  overflow:auto;border-right:1px solid var(--line);background:var(--panel);padding:14px 12px 28px}
/* The measure caps the PROSE, not the page. A 1180px cap on main was costing a 2152px
   viewport 972px of unused width while 640px of the matrix sat scrolled off the right --
   a paragraph needs a measure, a data grid needs the room. So main runs full width and the
   cap moves to the section's own children, which .wide then opts back out of for the
   scrollers that hold a table. */
:root{--measure:1180px}
main{flex:1;min-width:0;padding:26px 30px 90px}
.view>*{max-width:var(--measure)}
/* The scrollers also take main's own side padding back. Those 60px were the difference
   between five of six role columns on screen and all six: the grid wants 1890px, and without
   this it gets 1813. A table that runs to the edge of its column is a normal full-bleed, and
   the prose beside it keeps both the measure and the padding. */
.view>.wide{max-width:none;margin-left:-30px;margin-right:-30px}

.search{width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--fg);font:inherit;font-size:13px}
.navgrp{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);margin:16px 0 5px 8px}
.navlink{display:flex;gap:8px;align-items:baseline;padding:5px 9px;border-radius:7px;
  font-size:13px;cursor:pointer}
.navlink:hover{background:var(--line2)}
.navlink[aria-current=true]{background:var(--sel);color:#fff}
.navlink[aria-current=true] .n{color:rgba(255,255,255,.75)}
.navlink .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navlink .n{margin-left:auto;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.tool{display:block;padding:6px 9px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer}
.tool:hover{background:var(--line2)}
.tool[aria-current=true]{background:var(--sel);color:#fff}

h1{font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}
h2{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.015em;
  color:var(--fg);margin:34px 0 8px}
.sub{color:var(--muted);font-size:13px;margin:0 0 20px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow)}

/* ---- hero, the brand's other register ------------------------------
   Dark ground, radial glow and the arcs, in BOTH themes: this is a hero band inside a
   product page, not the page's own surface. It stops at the overview and the empty
   states. */
.hero{position:relative;overflow:hidden;border-radius:16px;background:#000514;color:#f3f3f9;
  background-image:radial-gradient(52% 46% at 50% 8%,rgba(125,117,236,.20) 0%,rgba(0,5,20,0) 64%);
  padding:38px 34px 104px;margin:0 0 30px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* A FIXED band at the bottom, cropped rather than scaled ("slice"). Letting the height
   follow the width meant the fan's apex rose as the viewport narrowed and cut straight
   through the stat row at 1120px -- which is what the screenshots showed and the CSS did
   not. A fixed band cannot do that at any width. */
.arcs{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:126%;min-width:1000px;height:124px;pointer-events:none;opacity:.85}
.hero>.in{position:relative;z-index:1;max-width:640px}
.hero .owl{height:52px;width:auto;display:block;margin:0 0 18px}
.hero h1{font-size:38px;line-height:1.12;letter-spacing:-.025em;margin:0 0 10px;color:#fff}
.hero .lede{color:#cfd3e0;font-size:14.5px;margin:0;max-width:520px}
.hero .lede .mono{color:#fff}
.heronums{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:34px;margin:26px 0 0}
.heronums .stat b{color:#fff}
.heronums .stat span{color:#a6abbb}

/* ---- the estate, at a glance ---------------------------------------
   The page's subject is access, so the overview opens with the access: every grant counted
   into its privilege band, per service. It also teaches the ramp, which nothing else on the
   page does before you need it. */
.shape{display:grid;grid-template-columns:max-content 1fr max-content;gap:10px 14px;
  align-items:center;margin:14px 0 4px}
.shape .n{font-family:var(--mono);font-size:12.5px;font-weight:600}
.shape .bar{display:flex;height:22px;border-radius:6px;overflow:hidden;background:var(--line2);
  box-shadow:inset 0 0 0 1px var(--line)}
.shape .bar i{display:block;min-width:2px}
.shape .bar i.b0{background:var(--s0)} .shape .bar i.b1{background:var(--s1)}
.shape .bar i.b2{background:var(--s2)} .shape .bar i.b3{background:var(--s3)}
.shape .bar i.b4{background:var(--s4)}
.shape .c{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.shape .c b{color:var(--fg);font-weight:650}
.split{display:flex;gap:0;height:10px;border-radius:5px;overflow:hidden;margin:16px 0 6px;
  box-shadow:inset 0 0 0 1px var(--line)}
.split i.st{background:var(--brand)}
.split i.rq{background:repeating-linear-gradient(45deg,var(--req) 0 3px,transparent 3px 6px),var(--reqbg)}

/* ---- roles ---------------------------------------------------------
   Rows, not cards. Four identical bordered boxes was the stock card kit, and it cost a
   border, a radius and a shadow to say something a hairline says: these are separate roles.
   Aligned columns also let a reader compare two roles' headlines, which the boxes did not. */
.roles{margin:14px 0 4px;border-top:1px solid var(--line)}
.role{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:2px 20px;
  padding:9px 2px;border-bottom:1px solid var(--line)}
.role>b{font-family:var(--mono);font-size:13px;font-weight:650}
.role .h{color:var(--muted);font-size:12.5px}
.role .inh{grid-column:2;color:var(--faint);font-size:12px}
.pill{display:inline-block;padding:0 7px;border:1px solid var(--line);border-radius:999px;
  font-size:10.5px;color:var(--muted);margin-left:6px;vertical-align:1px}

.jumps{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.jump{padding:4px 11px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;
  font-weight:600;background:var(--panel)}
.jump:hover{border-color:var(--brand);color:var(--brand)}
.jump .c{color:var(--faint);font-weight:500}
/* The band that opens a service block. It spans the table, so left:0 on the cell itself
   would do nothing -- the cell is already as wide as the row, and sticky can only move an
   element within its containing block. The LABEL sticks instead, which keeps the service
   name on screen however far right the grid is scrolled. */
tr.band td{background:var(--line2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  height:30px;padding:0 10px}
tr.band .n{position:sticky;left:10px;display:inline-block;font-family:var(--mono);
  font-size:12.5px;font-weight:650;color:var(--fg)}
tr.band .c{position:sticky;left:96px;display:inline-block;font-size:11.5px;color:var(--muted);
  margin-left:9px}
tbody tr:first-child td{border-top:0}
.ladders{margin-top:12px;font-size:12px;color:var(--muted)}
.ladders summary{cursor:pointer}
.lad{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:9px 0 0}
.lad .mono{min-width:84px;font-weight:600;color:var(--fg)}
.tabbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 13px}
.tab{cursor:pointer;padding:5px 13px;border:1px solid var(--line);border-radius:999px;
  font-size:12.5px;font-weight:600;background:var(--panel);color:inherit;font-family:inherit}
.tab[aria-selected=true]{background:var(--sel);color:#fff;border-color:var(--sel)}
.tab .c{color:var(--faint);font-weight:500}
.tab[aria-selected=true] .c{color:rgba(255,255,255,.72)}

/* Narrowing one unit's grid, as a filter-chip row rather than a search box: a reader asking
   "who has admin on prod" has two terms, and a single box makes them choose one. Each
   committed term is a removable chip and they AND together. */
.mbar{gap:6px;align-items:center;margin:0 0 10px;
  padding:4px 5px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 4px 2px 9px;border-radius:999px;
  background:var(--reqbg);color:var(--req);border:1px solid var(--reqline);
  font-size:12px;font-weight:600;white-space:nowrap}
.chip button{all:unset;cursor:pointer;line-height:1;padding:2px 4px;border-radius:999px;
  color:inherit;opacity:.75;font-size:12px}
.chip button:hover{opacity:1;background:rgba(125,117,236,.18)}
.filter{flex:1 1 150px;min-width:120px;padding:5px 6px;border:0;background:none;
  color:var(--fg);font:inherit;font-size:12.5px}
.filter:focus{outline:none}
.mbar:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--reqbg)}
.fcount{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  padding-right:6px;white-space:nowrap}

.scroll{overflow:auto;max-height:72vh;border:1px solid var(--line);border-radius:11px;
  background:var(--panel);box-shadow:var(--shadow)}
/* width:auto, not 100%: a unit with one role would otherwise strand its single
   column against the right edge, metres from the target it belongs to. */
table{width:auto;min-width:min(100%,520px);border-collapse:separate;border-spacing:0;font-size:13px}
th,td{text-align:left;padding:0 10px;height:34px;border-bottom:1px solid var(--line2)}
thead th{position:sticky;top:0;background:var(--panel);z-index:2;font-weight:600;font-size:10.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--line2)}
/* Capped and wrapping rather than sized to the worst case. One vault path
   (secret|preprod|dagster|*) was setting a 470px column that every "prod - ml-detector" then
   paid for. Wrapping, not ellipsis: these are identifiers people match by eye, and half of
   one is worse than two lines of it.
   The width is stated rather than left at width:1%, which looks like the obvious pairing and
   is a trap: overflow-wrap:anywhere drops min-content to a single character, width:1% then
   asks for exactly that, and the column collapsed to 39px with every target wrapping one
   letter per line -- a 36720px matrix. Measured, not read. */
td.tgt,th.tgt{position:sticky;left:0;background:var(--panel);z-index:1;font-size:12.5px;
  border-right:1px solid var(--line);width:190px;min-width:190px;max-width:190px;
  padding-right:16px;overflow-wrap:anywhere;line-height:1.45}
tbody tr:hover td.tgt{background:var(--line2)}
thead th.tgt{z-index:3}

.hm{text-align:left;padding:0 10px;white-space:nowrap}

/* A cell states the level and colours it. Colour alone scans well but says nothing until you
   hover it, which is no good for the reader this page exists for. Compact mode drops back to
   colour only, for someone sweeping many units at once. */
/* 280px per role column, measured rather than guessed. The cell's height is set by how many
   pills fit on a line, so column width is the lever on vertical cost -- and the curve has a
   knee here: sq-sre's matrix is 4828px tall before this change, 3167px at 260 and 2563px at
   280, and only 2519px at 320. It buys that with horizontal scroll on a narrow window, which
   is the cheaper axis to give up now that both label columns are frozen -- and compact mode
   collapses the columns entirely for anyone sweeping many units. */
td.cellv,th.hm{min-width:280px}
td.cellv{padding:4px 8px;vertical-align:top;line-height:1.72}

/* A level is a PILL, tinted on its own severity: the whole chip is the privilege signal, not
   an 11px dot beside a name that got all the weight. That inverts the old emphasis, and it
   buys back the vertical cost at the same time -- pills flow along the line where the old
   labelled list stacked one level per row and made a single row 180px tall.
   Standing and on-request are told apart structurally, by the pill itself: standing is
   filled, on-request is hollow and dashed and carries its approval tier. That replaces the
   two tracked-out caps labels the cell used to stack above each list, which is two lines of
   height and a generic tell for one bit of information. */
.grp{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.grp.req{border-left:2px dashed var(--reqline);padding-left:7px;margin-left:3px}
.lvl{display:inline-flex;align-items:center;gap:4px;margin:0 3px 0 0;padding:0 6px;
  border:1px solid currentColor;border-radius:999px;font-size:11px;font-weight:600;
  background:var(--sb);white-space:nowrap;vertical-align:1px}
.lvl b{color:inherit;font-weight:inherit}
.lvl u,.lvl s{text-decoration:none;font-size:9.5px;font-weight:600;opacity:.9}
.lvl.v0{color:var(--s0);--sb:var(--s0b)}
.lvl.v1{color:var(--s1);--sb:var(--s1b)}
.lvl.v2{color:var(--s2);--sb:var(--s2b)}
.lvl.v3{color:var(--s3);--sb:var(--s3b)}
.lvl.v4{color:var(--s4);--sb:var(--s4b)}
/* Hollow and dashed, and the only pill that ever carries a tier badge -- so it labels itself
   and needs no heading. */
.lvl.req{background:none;border-style:dashed}
.lvl.req u::before{content:"\21BB "}
.lvl u{border:1px solid currentColor;border-radius:999px;padding:0 4px;margin-left:1px}

/* Authored, implied and inherited are three different facts and used to look like one. The
   two derived ones drop the pill's FILL rather than fading its text, which would have cost
   the text its contrast. That keeps the encoding orthogonal and two-dimensional: fill says
   authored or derived, border style says standing or on-request, and neither reads the other.
   A third border style for provenance was tried and rejected -- dotted, dashed and solid in
   one grid is a ragged wall, and the glyph already says which kind of derived it is: down for
   a level closure fanned down from a higher one on this same role, a corner for one that
   arrives from a role this one inherits. */
.lvl[data-via]{font-weight:500;background:none}
.lvl[data-via]::after{font-size:10.5px;font-weight:700;line-height:1;margin-left:1px}
.lvl[data-via=implied]::after{content:"\2193"}
.lvl[data-via=inherited]::after{content:"\21B3"}

.compact .lvl b,.compact .lvl u,.compact .lvl s{display:none}
.compact .lvl{width:24px;height:15px;padding:0;border-radius:4px;margin:0 3px 0 0}
.compact .lvl[data-via]::after{display:none}
.compact td.cellv,.compact th.hm{min-width:0}
.compact td.cellv{padding:4px 7px;line-height:1.6}
.compact .grp.req{padding-left:6px}
.densebtn{margin-left:14px;background:none;border:1px solid #2f3557;color:#a6abbb;
  border-radius:999px;padding:3px 11px;font:inherit;font-size:11.5px;cursor:pointer}
/* The 14px separates the controls from the wordmark, once, not each button from the last. */
.densebtn+.densebtn{margin-left:0}
.densebtn:hover{color:#f3f3f9;border-color:#5b6284}
/* The theme control is a toggle rather than an action, so its label stays "dark" in both
   states and the fill says which one is on -- the same thing aria-pressed tells a screen
   reader. It is read against the topbar's own ground, which is the same in both themes, so
   one pair of colours serves both. */
.densebtn[aria-pressed=true]{background:rgba(255,255,255,.12);color:#f3f3f9;border-color:#5b6284}
.sq{display:inline-block;width:24px;height:15px;border-radius:4px;cursor:default;
  background:var(--sb);border:1px solid currentColor}
.sq.v0{color:var(--s0);--sb:var(--s0b)}
.sq.v1{color:var(--s1);--sb:var(--s1b)}
.sq.v2{color:var(--s2);--sb:var(--s2b)}
.sq.v3{color:var(--s3);--sb:var(--s3b)}
.sq.v4{color:var(--s4);--sb:var(--s4b)}
.sq.req{background:none;border-style:dashed}
.none{color:var(--faint)}

/* The key sits in every unit rather than once on the overview: a reader arrives at a unit by
   deep link, from a Slack message, and never passes the overview at all. */
.legend{display:flex;flex-wrap:wrap;gap:6px 15px;align-items:center;margin:0 0 11px;
  color:var(--muted);font-size:11.5px}
.legend .ky{display:inline-flex;align-items:center;gap:5px}
.legend em,.sub em{font-style:normal;color:var(--fg);font-weight:600}
.legend .g,.sub .g{font-weight:700;font-size:12.5px;color:var(--fg)}
/* The key uses real pills, in the neutral, so it is a sample of the thing and not a drawing
   of it -- and so it cannot drift from the cells it explains. */
.legend .sw{padding:0 8px;border:1px solid var(--muted);border-radius:999px;
  background:var(--line2);color:var(--muted);font-size:11px;font-weight:600}
.legend .sw.req{background:none;border-style:dashed;border-color:var(--req);color:var(--req)}
.legend .sw.hollow{background:none}
.lg{display:inline-flex;align-items:center;padding:0 7px;border:1px solid;border-radius:999px;
  font-size:11px;font-weight:600}
.lg.v0{background:var(--s0b);border-color:var(--s0);color:var(--s0)}
.lg.v1{background:var(--s1b);border-color:var(--s1);color:var(--s1)}
.lg.v2{background:var(--s2b);border-color:var(--s2);color:var(--s2)}
.lg.v3{background:var(--s3b);border-color:var(--s3);color:var(--s3)}
.lg.v4{background:var(--s4b);border-color:var(--s4);color:var(--s4)}

/* An empty unit is the page's other empty surface, so it gets the hero register too -- at a
   quarter of the size, because it is an answer and not an entrance. */
.empty{position:relative;overflow:hidden;border-radius:14px;background:#000514;color:#cfd3e0;
  background-image:radial-gradient(60% 70% at 50% 0%,rgba(125,117,236,.16) 0%,rgba(0,5,20,0) 68%);
  padding:26px 26px 30px;margin:12px 0 0;font-size:13px}
.empty .in{position:relative;z-index:1;display:flex;align-items:center;gap:14px}
.empty .owl{height:30px;width:auto;flex:none;opacity:.9}
.empty b{color:#fff;font-weight:650;display:block;font-size:14px}

.row{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:14px}
select{padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);
  color:var(--fg);font:inherit;font-size:13px;max-width:260px}
.stat{display:inline-block;margin-right:22px}
.stat b{display:block;font-size:22px;font-weight:650;letter-spacing:-.02em}
.stat span{font-size:11.5px;color:var(--muted)}
.chk{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);cursor:pointer}
tr.diff td.tgt{box-shadow:inset 3px 0 0 var(--brand)}
.hit{display:block;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:13px}
.hit:hover{background:var(--line2)}
.hit .w{color:var(--muted);font-size:11.5px}
.add{color:var(--s0);font-weight:600}
.rem{color:var(--s4);font-weight:600}
.foot{margin-top:38px;color:var(--faint);font-size:11.5px;line-height:1.7}
/* Without scripting nothing adds .on, so views must default to VISIBLE and only become a
   one-at-a-time router once the script has run. The reverse -- hiding by default -- renders a
   blank page to anyone with JS off. */
/* Every link on this page is a fragment, and the header is sticky, so without this a jump
   parks its target 52px under the header -- which on the overview hid the owl and the top of
   the headline. Found by measuring the rendered page, not by reading this file. */
.view,tr.blk{scroll-margin-top:64px}
.view{display:block}
.js .view{display:none}
.js .view.on{display:block}
/* js-only is for controls that do nothing without the script; it must never land on a .view,
   where it would out-specify the router above. */
.js-only{display:none}
.js .js-only{display:block}
.js button.js-only{display:inline-block}
/* After .js .js-only, which would otherwise win the tie and stack the filter on two lines. */
.js .mbar{display:flex;flex-wrap:wrap}
.js .nojs{display:none}