/* ------------------------------------------------------------------ docs
   Shared by /method, /guide and /download. The tokens, base type, buttons,
   header and footer are the landing page's own, copied rather than
   extracted: index.html keeps its styles inline so the hero can be tuned
   without a second file in play, and a change to these long-form pages should
   not be able to move it. Keep the first blocks in step with the top of
   index.html. */
:root{
  color-scheme:dark;
  --bg:#111110; --surface-1:#191918; --surface-2:#222221;
  --fill-hover:rgb(255 255 255 / .06); --fill-selected:rgb(255 255 255 / .09);
  --fill-press:rgb(255 255 255 / .12);
  --ink:#f2f0eb; --body:#d6d3cc; --ink-2:#b5b3ad; --ink-3:#9a9891;
  --border-subtle:rgb(255 255 255 / .08); --border:#3b3a37; --border-control:#7c7b74;
  --primary:#f2f0eb; --primary-hover:#dcd9d2; --on-primary:#111110;
  --focus:#6b9bff;
  --radius-md:8px; --radius-lg:12px;
  --ease:cubic-bezier(.2,0,0,1);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;

  /* The reader's highlight colours as they land on a white page: its default
     blue and amber at their default strengths (colors, newAlpha and seenAlpha
     in lib/constants.js), laid over white, and the line under levels 3 and 4,
     which is the amber a quarter darker (darken() in content/reader.js).
     Level 4 has no fill at all, only the line. Worked out by hand, so a change
     to those defaults has to be copied here. Only ever drawn on white -- see
     .sw below. */
  --new-bg:#d8e6fd; --l1:#facb66; --l2:#fcdc99; --l3:#fdeac2; --l-line:#a87200;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--body);
  font:400 17px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;
}
h1,h2{
  margin:0; font-family:var(--serif); font-style:italic; font-weight:400;
  letter-spacing:-.015em; color:var(--ink); text-wrap:balance;
}
h1{font-size:clamp(2.5rem,5vw,3.9rem); line-height:1.04; max-width:18ch}
h2{font-size:clamp(1.85rem,3vw,2.45rem); line-height:1.1; max-width:26ch}
h3{margin:2.2rem 0 .6rem; font:600 18px/1.4 var(--sans); letter-spacing:-.005em; color:var(--ink); text-wrap:balance}
p{margin:0; text-wrap:pretty}
b,strong{color:var(--ink); font-weight:600}
em{color:var(--ink)}
a{color:var(--ink)}
p a,li a,td a,figcaption a{text-decoration:underline; text-decoration-color:rgb(242 240 235 / .4); text-decoration-thickness:1px; text-underline-offset:.2em}
p a:hover,li a:hover,td a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
::selection{background:rgb(107 155 255 / .35)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

.wrap{max-width:1168px; margin:0 auto; padding:0 24px}
@media (max-width:640px){ .wrap{padding:0 16px} }

/* An overline, three words at most. Capitals are allowed here and nowhere
   else, so they are kept small, a little tracked and no wider than that. */
.eyebrow{
  margin:0 0 14px;
  font:600 12px/1.3 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3);
}

/* ------------------------------------------------------------------ buttons
   The spec's button: 36px, 14px sans at 500, sentence case. .btn-lg is the
   one size the product's own screens do not have, kept for the buttons that
   start a download or a purchase. */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:36px; padding:0 16px; border:0; border-radius:var(--radius-md);
  font:500 14px/1 var(--sans); letter-spacing:0; white-space:nowrap;
  text-decoration:none; cursor:pointer;
  transition:background-color .15s var(--ease), color .15s var(--ease);
}
.btn-primary{background:var(--primary); color:var(--on-primary)}
.btn-secondary{background:var(--fill-selected); color:var(--ink)}
@media (hover:hover){
  .btn-primary:hover{background:var(--primary-hover)}
  .btn-secondary:hover{background:var(--fill-press)}
}
.btn-bar{padding:0 14px}
.btn-lg{height:46px; padding:0 22px; font-size:16px}
/* The header's Download on the download page itself: pressed, not offered. */
.bar .btn[aria-current]{background:var(--fill-press)}
/* What the button costs or weighs rides inside it, set off by a rule rather
   than made a second button. */
.btn .sub{
  padding-left:10px; border-left:1px solid rgb(17 17 16 / .22);
  color:rgb(17 17 16 / .68); font-variant-numeric:tabular-nums;
}
/* A finger needs 44px. The header's two buttons keep their size, so the bar
   stays a bar, and grow an invisible margin instead that still takes a thumb. */
@media (pointer:coarse){
  .btn{min-height:44px}
  .btn-bar{min-height:0}
  .btn-bar::after{content:""; position:absolute; inset:-4px 0}
}
/* On the narrowest phones a long label wraps inside its button rather than
   pushing the whole page sideways. */
@media (max-width:420px){
  .btn:not(.btn-bar){max-width:100%; height:auto; min-height:44px; padding-block:11px; white-space:normal; line-height:1.3; text-align:center}
}

/* ------------------------------------------------------------------ header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgb(17 17 16 / .82);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--border-subtle);
}
.bar{display:flex; align-items:center; gap:8px; height:60px}
/* 44px tall though the word is 21: it is a link home, and a thumb finds it. */
.brand{
  display:inline-flex; align-items:center; gap:9px; min-height:44px; margin-right:auto;
  font:italic 400 21px/1 var(--serif); letter-spacing:-.01em;
  color:var(--ink); text-decoration:none;
}
.brand .dot{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}
.nav{display:flex; align-items:center; gap:2px}
.nav a:not(.btn){
  padding:9px 12px; border-radius:var(--radius-md);
  font:500 14px/1 var(--sans); color:var(--ink-2); text-decoration:none; white-space:nowrap;
  transition:color .15s var(--ease), background-color .15s var(--ease);
}
@media (hover:hover){ .nav a:not(.btn):hover{color:var(--ink); background:var(--fill-hover)} }
/* The page you are on: brighter, and sitting in a pill, no hover needed. */
.nav a[aria-current]:not(.btn){color:var(--ink); background:var(--fill-selected)}
.nav .btn{margin:0 2px 0 10px}

/* ------------------------------------------------------------------ menu
   Below 860px the links go behind one button. It is a <details>, so it opens
   and shuts with no script at all; the script at the foot of each page only
   tidies up after it -- Escape and a tap outside. */
.menu{display:none}
.menu > summary{
  display:grid; place-items:center; width:44px; height:44px; margin-right:-10px;
  border-radius:var(--radius-md); color:var(--ink); cursor:pointer; list-style:none;
}
.menu > summary::-webkit-details-marker{display:none}
.menu[open] > summary{background:var(--fill-selected)}
.menu .i-close, .menu[open] .i-open{display:none}
.menu[open] .i-close{display:block}
/* Hung from the header, which is sticky and so a positioned box: the sheet
   runs the full width of the screen, not just the width of the bar. */
.menu-panel{
  position:absolute; left:0; right:0; top:100%;
  max-height:calc(100dvh - 60px); overflow-y:auto;
  padding:4px 16px 12px; background:var(--surface-1);
  border-bottom:1px solid var(--border-subtle); box-shadow:0 24px 48px rgb(0 0 0 / .6);
}
.menu-panel a{
  display:flex; align-items:center; justify-content:space-between; min-height:52px;
  border-bottom:1px solid var(--border-subtle);
  font:500 17px/1.2 var(--sans); color:var(--ink); text-decoration:none;
}
.menu-panel a:last-child{border-bottom:0}
/* The page you are on, marked with a dot as well as the words. */
.menu-panel a[aria-current]::after{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
/* The bar needs about 790px with all five links (Scoreboard included) and a
   wider font on a Mac, so the menu takes over with room to spare. */
@media (max-width:860px){
  .nav{display:none}
  .menu{display:block}
}

/* ------------------------------------------------------------------ footer */
.site-footer{margin-top:clamp(4rem,8vw,7rem); border-top:1px solid var(--border-subtle); padding:40px 0 56px}
.frow{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px}
.frow .brand{font-size:24px; margin-right:0}
.flinks{display:flex; flex-wrap:wrap; gap:10px 24px}
.flinks a{font-size:14px; line-height:1.4; color:var(--ink-2); text-decoration:none}
@media (hover:hover){ .flinks a:hover{color:var(--ink)} }
/* On a touch screen each link is a 44px row of its own height. */
@media (pointer:coarse){ .flinks{row-gap:0} .flinks a{display:inline-flex; align-items:center; min-height:44px} }
.fnote{margin-top:28px; max-width:40rem; font-size:14px; line-height:1.6; color:var(--ink-3)}

/* ------------------------------------------------------------------ the page
   One reading column, the width of a comfortable line: 40rem is about 75
   characters of this face at 17px. Figures may run wider than the text so a
   screenshot of a whole panel stays legible. */
.doc{counter-reset:sec}
.doc-head{padding:clamp(3rem,6vw,5rem) 0 clamp(2.5rem,4vw,3.5rem); border-bottom:1px solid var(--border-subtle)}
.doc-head .eyebrow{margin-bottom:18px}
.doc-head .lede{margin-top:22px; max-width:40rem; font-size:19px; line-height:1.6; color:var(--ink-2); text-wrap:pretty}
.col{max-width:40rem}
/* A phone's column is a third of that, so the text comes down a size to keep
   a line at forty-odd characters instead of thirty-odd. */
@media (max-width:640px){
  body{font-size:16px}
  .doc-head .lede{font-size:17px}
}

/* Where the screen is wide enough, the contents follow you down the page in
   a rail beside the column. The rail is filled from the list at the top by
   the page's script, so the two cannot disagree -- and without a script it
   stays empty and takes no room. */
.rail{display:none}
@media (min-width:1180px){
  .doc-grid{display:grid; grid-template-columns:minmax(0,1fr) 13.5rem; column-gap:4rem}
  .doc-main{min-width:0}
  .rail{
    display:block; position:sticky; top:60px; align-self:start;
    max-height:calc(100vh - 60px); overflow-y:auto;
    padding:clamp(2.5rem,4.5vw,3.5rem) 0 2rem;
  }
  .rail:empty{display:none}
}
/* The rail scrolls when it is taller than the screen, and a scroller clips
   anything hung outside it -- so the marker bar sits inside the rail's own
   edge, and the title is indented to line up with the links beside it. */
.rail-title{margin:0 0 10px; padding-left:14px; font:600 12px/1.3 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.doc .rail .toc{columns:1; margin:0; max-width:none}
.rail .toc li{padding:0; border:0}
.rail .toc a{
  grid-template-columns:1.9rem 1fr; gap:.25rem; padding:5px 0 5px 12px;
  border-left:2px solid var(--border-subtle); font-size:14px; line-height:1.4; color:var(--ink-3);
}
.rail .toc a::before{font-size:12px}
@media (hover:hover){ .rail .toc a:hover{color:var(--ink)} }
.rail .toc a[aria-current]{color:var(--ink); border-left-color:var(--ink)}

.doc section{
  padding-top:clamp(2.5rem,4.5vw,3.5rem); counter-increment:sec; scroll-margin-top:60px;
}
.doc section + section{margin-top:clamp(2.5rem,4.5vw,3.5rem); border-top:1px solid var(--border-subtle)}
.doc section .eyebrow::before{content:counter(sec,decimal-leading-zero) " \00B7  "}
.doc section > .col > p, .doc .col > p{margin-top:1.1rem}
.doc h2 + .col > p:first-child, .doc h2 + p{margin-top:1.4rem}
.doc .col > p:first-child{margin-top:1.4rem}
.doc ul, .doc ol{margin:1.1rem 0 0; padding-left:1.3rem}
.doc li{margin:.5rem 0; text-wrap:pretty}
.doc li::marker{color:var(--ink-3)}
.doc li b{display:inline}

/* Contents: the section numbers, so the eyebrows and the list agree. */
.doc .toc{margin:2.25rem 0 0; padding:0; list-style:none; columns:2; column-gap:3rem; max-width:50rem; counter-reset:toc}
@media (max-width:640px){ .doc .toc{columns:1} }
.toc li{break-inside:avoid; margin:0; border-top:1px solid var(--border-subtle)}
.toc a{
  display:grid; grid-template-columns:2.4rem 1fr; gap:.5rem; align-items:baseline;
  padding:.6rem 0; font-size:16px; line-height:1.45; color:var(--body); text-decoration:none;
}
.toc a::before{
  content:counter(toc,decimal-leading-zero); counter-increment:toc;
  font:600 13px/1 var(--sans); color:var(--ink-3); font-variant-numeric:tabular-nums;
}
@media (hover:hover){ .toc a:hover{color:var(--ink)} }
@media (pointer:coarse){ .toc a{padding:.7rem 0} }

/* A pulled statement: one thought, set like the quote on the landing page. */
.pull{
  margin:2.25rem 0 .5rem; padding:2px 0 2px 20px; border-left:2px solid var(--border-control);
  max-width:32ch; font:italic 400 clamp(1.4rem,2.2vw,1.75rem)/1.3 var(--serif); color:var(--ink);
}
.pull cite{display:block; margin-top:12px; max-width:46ch; font:400 14px/1.5 var(--sans); color:var(--ink-3)}

/* Numbered rows, the landing page's .points. */
.doc .points{list-style:none; padding:0; margin:2rem 0 0; max-width:44rem; counter-reset:row}
.points li{
  display:grid; grid-template-columns:2.5rem 1fr; align-items:start;
  padding:1.1rem 0; margin:0; border-top:1px solid var(--border-subtle); counter-increment:row;
}
.points li:last-child{border-bottom:1px solid var(--border-subtle)}
.points li::before{
  content:counter(row,decimal-leading-zero); grid-column:1;
  font:600 13px/1.75 var(--sans); color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.points li > div{grid-column:2}
.points b{display:block; margin-bottom:.2rem; font-size:17px; line-height:1.45}
.points p{font-size:16px; color:var(--ink-2); margin:0}

/* Aside: a fact about Sluka set against the method, or a warning in the
   guide. A quiet card, so it reads as beside the text rather than in it. */
.note{
  margin:1.75rem 0 0; padding:16px 20px; border-radius:var(--radius-lg);
  background:var(--surface-1); border:1px solid var(--border-subtle);
  font-size:16px; line-height:1.65; color:var(--ink-2);
}
.note b{color:var(--ink)}

/* Tables: hairlines, no fills, a firmer rule under the header row. */
table{border-collapse:collapse; width:100%; margin:1.4rem 0 0; font-size:15.5px; line-height:1.55}
th,td{text-align:left; vertical-align:top; padding:.7rem 1rem .7rem 0; border-top:1px solid var(--border-subtle)}
th{font:600 12px/1.5 var(--sans); color:var(--ink-3); border-top:0; padding-top:0; padding-bottom:.55rem}
tr:first-child + tr td{border-top-color:var(--border)}
tr:last-child td{border-bottom:1px solid var(--border-subtle)}
td{color:var(--body)}
td:first-child{color:var(--ink); white-space:nowrap}
.table-wrap{overflow-x:auto; max-width:100%}
.keys td:first-child{white-space:normal}
/* On a phone the first column gives up its no-wrap, or the table is the one thing wider than the screen. */
@media (max-width:640px){ td:first-child{white-space:normal} th,td{padding-right:.6rem} table{font-size:15px} }

kbd{
  display:inline-block; min-width:1.7em; padding:2px 6px; margin:0 1px;
  border:1px solid var(--border); border-bottom-width:2px; border-radius:5px;
  background:var(--surface-2); color:var(--ink);
  font:500 .78em/1.35 var(--mono); text-align:center; vertical-align:1px; white-space:nowrap;
  /* A key in a caption or a table would otherwise shrink under the floor. */
  font-size:max(12px,.78em);
}
/* A command, a folder, a file name: each is one token and never breaks
   inside -- "sluka-extension" split over two lines reads as two words. Only a
   long one (.long: brave://flags/#file-system-access-api, a checksum) may
   break anywhere, since it has no spaces and would otherwise push the page
   sideways on a phone; and where a chip does wrap, each piece keeps its own
   padding and rounded ends instead of being cut open at the line break. */
code{
  padding:1px 5px; border-radius:5px; background:var(--surface-1); border:1px solid var(--border-subtle);
  font:.86em var(--mono); color:var(--ink); white-space:nowrap;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
code.long{white-space:normal; overflow-wrap:anywhere}

/* Screenshots. Every one sits in the same frame -- a matte a step lighter
   than the page, the picture centred on it -- whether it shows the reader on a
   white article or the dashboard on its own dark ground.

   The frame is wider than the text: it runs to the edge of the page's main
   column (100cqw, the column being a container), so a shot of a panel is seen
   near the size it really is rather than squeezed to the width of a line of
   text, where its 14px labels came out at nine. A picture is never drawn
   larger than it was taken, though: each img's width attribute is its size at
   1x, half the pixels guide-shots.mjs writes at 2x, and max-width only ever
   makes it smaller.

   Below 640px a figure shows its phone version instead (the <source> in its
   <picture>): the same scene taken again in a phone-width window, so it is
   read at its real size, whole, rather than a desktop shot at a third of it. */
.doc-main{container-type:inline-size}
.doc figure{
  width:100%; width:min(56rem, 100cqw);
  margin:2rem 0 0; padding:14px;
  background:var(--surface-1); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
}
figure picture{display:block}
figure img{
  display:block; max-width:100%; height:auto; margin:0 auto;
  border-radius:var(--radius-md); box-shadow:0 0 0 1px rgb(255 255 255 / .08);
}
figcaption{margin-top:12px; padding:0 2px; max-width:40rem; font-size:14px; line-height:1.6; color:var(--ink-3)}
@media (max-width:640px){ .doc figure{padding:8px} figcaption{margin-top:10px} }

/* Colour swatches, drawn the way the reader draws a word on a white page: a
   patch of page with a letter on it, and the letter painted in its state. New
   and levels 1 and 2 are fills; level 3 a light fill with a line under it;
   level 4 the line alone -- the last two levels change shape rather than only
   getting paler, as they do on the page. White, because those colours are
   only true on white. */
.sw{
  display:inline-block; margin-right:6px; padding:2px 3px; vertical-align:1px;
  border-radius:5px; background:#fff; box-shadow:0 0 0 1px rgb(255 255 255 / .12);
}
.sw::before{
  content:"a"; display:block; padding:0 4px; border-radius:2px;
  font:400 13px/17px Georgia,"Iowan Old Style",serif; color:#1a1c1f;
  background:var(--sw-fill, transparent); box-shadow:var(--sw-line, none);
}
.sw.new{--sw-fill:var(--new-bg)}
.sw.l1{--sw-fill:var(--l1)}
.sw.l2{--sw-fill:var(--l2)}
.sw.l3{--sw-fill:var(--l3); --sw-line:inset 0 -2px 0 var(--l-line)}
.sw.l4{--sw-line:inset 0 -2px 0 var(--l-line)}

/* The step list in the guide: what to press, then what happens. */
.doc .steps{list-style:none; padding:0; margin:1.4rem 0 0; counter-reset:step}
.steps li{
  position:relative; margin:0; padding:.8rem 0 .8rem 2.6rem;
  border-top:1px solid var(--border-subtle); counter-increment:step;
}
.steps li:last-child{border-bottom:1px solid var(--border-subtle)}
/* Absolutely placed rather than a grid cell: a grid would put each <b> in the
   step into a cell of its own and scatter the sentence. */
.steps li::before{
  content:counter(step); position:absolute; left:0; top:calc(.8rem + 1px);
  display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:var(--fill-selected); color:var(--ink);
  font:600 12px/1 var(--sans); font-variant-numeric:tabular-nums;
}

/* Cross-links between the pages and back to the landing page. */
.next{margin-top:3.5rem; padding-top:2rem; border-top:1px solid var(--border-subtle); display:flex; flex-wrap:wrap; gap:12px}

.sources{font-size:15px; color:var(--ink-2)}
.sources li{margin:.45rem 0}
.sources a{color:var(--body)}