/* Guide-only components. Loaded *after* /privacy.css, which supplies the
   palette, the two typefaces, the gutter, the header and the footer. Nothing
   in here redefines those — this file is the table of contents, the step
   lists, the key caps and the comparison table, and nothing else.

   --amber and --teal are declared here because privacy.css carries only eight
   of the palette's ten tokens; the other two live in index.html's inline
   <style>. Copying the whole palette would be two sources of truth for the six
   tokens that already work. */

:root{
  --amber:#E09A2C;
  --teal:#1E8B7D;
}

/* ---------- two-column shell ---------- */
/* One column on a phone, where the contents list simply sits at the top and
   scrolls away like any other block. The sidebar only becomes sticky once
   there is width to spare for it. */
.guide{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(28px,4vh,44px);
}
@media (min-width:1020px){
  .guide{
    grid-template-columns:210px minmax(0,44em);
    gap:clamp(36px,5vw,76px);
    align-items:start;
  }
  .toc{position:sticky;top:28px;max-height:calc(100vh - 56px);overflow-y:auto}
}

/* ---------- contents ---------- */
.toc h2{
  font-family:Karla,ui-sans-serif,system-ui,sans-serif;
  font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:600;color:var(--ink-2);
  margin:0;padding:0;border-top:0;
}
.toc ol{margin:14px 0 0;padding-left:0;list-style:none;counter-reset:toc}
/* On a phone the sidebar is just a block at the top of the page, and eight
   entries in one column pushed the h1 below the fold — the reader met a list of
   links before they met the page. Two columns halves it. Above the sidebar
   breakpoint it goes back to one, where it is a real sidebar with height to
   spare. */
@media (max-width:1019px){
  .toc ol{columns:2;column-gap:20px}
  .toc li{break-inside:avoid}
}
.toc li{margin-top:0;counter-increment:toc}
.toc a{
  display:block;padding:5px 0 5px 26px;position:relative;
  font-size:14.5px;line-height:1.4;
  color:var(--ink-2);text-decoration:none;
  transition:color .2s;
}
.toc a::before{
  content:counter(toc);position:absolute;left:0;top:5px;
  font-size:12px;font-weight:600;color:var(--line);
  font-variant-numeric:tabular-nums;
}
.toc a:hover{color:var(--ink)}
.toc a:hover::before{color:var(--rasp)}

/* The first h2 in the content column would otherwise draw a rule directly
   under the lead paragraph it belongs to. */
.guide-body > h2:first-of-type{border-top:0;padding-top:0}

/* ---------- steps ---------- */
.steps{margin:22px 0 0;padding:0;list-style:none;counter-reset:step}
.steps > li{
  counter-increment:step;
  position:relative;
  margin-top:0;
  padding:22px 0 22px 52px;
  border-top:1px solid var(--line);
}
.steps > li:first-child{border-top:0;padding-top:6px}
.steps > li::before{
  content:counter(step);
  position:absolute;left:0;top:22px;
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--paper-2);
  font-size:14px;font-weight:600;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.steps > li:first-child::before{top:6px}
.steps h3{margin-top:0}
.steps p:first-of-type{margin-top:8px}

/* ---------- platform panels ---------- */
/* `minmax(0,1fr)`, not the implicit `auto`. A grid item's min-width defaults to
   min-content, and this panel contains the `xattr` line as `white-space:pre`,
   so an `auto` track refused to shrink below that command's full width (537px)
   and the whole page scrolled sideways on every phone. The explicit 0 floor is
   what lets `.cmd`'s own `overflow-x:auto` do the scrolling instead. Same rule
   `.guide` above already uses, for the same reason. */
.panels{margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.panel{
  border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;
  background:var(--paper);
}
.panel h3{margin-top:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.panel p:first-of-type{margin-top:10px}
.pill{
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;
  padding:2px 9px;white-space:nowrap;
}
.pill-mac{color:var(--violet);border-color:color-mix(in srgb,var(--violet) 34%,transparent)}
.pill-win{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 40%,transparent)}
.pill-web{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 46%,transparent)}

/* A command the reader has to type. It *wraps* rather than scrolls, unlike the
   copy on beta.html — that page has a Copy button, this one has no JS at all,
   so a command scrolled off the right edge of a phone hides the end of the
   path, which is the half that matters. Wrapping is safe for copy-paste
   precisely because it is visual: the source has no newline in it, so a
   selection still yields one line and the shell receives one command.
   `overflow-wrap:anywhere` because a long path has no spaces to break at, and
   `overflow-x:auto` stays as the backstop for anything unbreakable. */
.cmd{
  margin-top:14px;padding:12px 14px;
  background:var(--paper-2);border-radius:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;line-height:1.5;
  overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;
}
.cmd code{background:none;padding:0;font-size:inherit}

/* ---------- key caps ---------- */
kbd{
  font-family:Karla,ui-sans-serif,system-ui,sans-serif;
  font-size:12.5px;font-weight:600;line-height:1;
  display:inline-block;padding:4px 7px;
  border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;
  background:var(--paper);color:var(--ink-2);
  white-space:nowrap;
}

/* ---------- rating / comparison tables ---------- */
/* Every table here scrolls inside its own box; the page body never does. */
.scroll{overflow-x:auto;margin-top:20px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:30em}
th,td{
  text-align:left;vertical-align:top;
  padding:11px 16px 11px 0;
  border-bottom:1px solid var(--line);
}
th{
  font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--ink-2);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
td strong{font-weight:600}
.yes{color:var(--teal);font-weight:600}
.no{color:var(--rasp);font-weight:600}

/* ---------- next / prev ---------- */
.next{
  margin-top:clamp(44px,7vh,76px);
  padding-top:26px;border-top:1px solid var(--line);
  display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;
}
.next a{
  font-family:Fraunces,Georgia,serif;
  font-variation-settings:'opsz' 48,'SOFT' 100,'WONK' 1;
  font-size:1.15rem;text-decoration:none;
}
.next a:hover{text-decoration:underline}

/* An anchored heading must not land under the sticky header on jump. */
[id]{scroll-margin-top:24px}