/* PAGE — the sheet the script-free static pages share: privacy/ and docs/.

   Both are build INPUTS rather than copies beside the build (see
   vite.config.ts), and this file is what that buys. They get the app's own
   colours from tokens.css, in both themes and every palette, and they get ONE
   prose style instead of a \3c style> block per page quietly drifting from its
   neighbour.

   The same two texts also render INSIDE the app — Landing.svelte imports each
   page's <main> raw — and that copy is styled by css/landing.css, which has to
   restate these rules under `.landing-prose` because it is the app's
   stylesheet the landing page is wearing. One text, two frames; this is the
   cold-URL frame. */
/* TOKENS — colour, elevation, geometry. The only place a literal lives.

   COLOUR IS DECLARED IN PAIRS AND BOUND IN ONE PLACE. Every palette writes
   `--l-<token>` and `--d-<token>` — its light value and its dark one, side by
   side on the same line — and the three binding blocks at the bottom of this
   file are the only thing that decides which half of each pair becomes the live
   `--<token>`. `[data-theme]` is what lets an explicit choice beat the media
   query in both directions (js/settings.ts writes it), exactly as before.

   The indirection buys one thing and it is worth the read: the dark values used
   to be written out TWICE, once media-scoped and once attribute-scoped, under a
   comment asking whoever came next to keep the copies in step. The named
   palettes in css/palettes.css would have made that three copies each, of five
   palettes — so the copies now carry token NAMES rather than colours, which
   means the worst a drift can do is leave a token unbound instead of leaving a
   colour subtly wrong. test/theme.test.ts holds the two dark blocks identical.

   Nothing here selects an element; everything below in the other files reads
   from the live tokens and never from a pair. */

:root {
  /* ---- surfaces ------------------------------------- light | dark ------- */
  --l-bg: #ffffff;              --d-bg: #16181d;
  /* Menus and sheets float ABOVE the page, so they get their own surface —
     equal to --bg in light, deliberately lighter than it in dark, where a
     floating panel painted the page's colour reads as a hole. */
  --l-raised: #ffffff;          --d-raised: #1b1e25;
  /* NOT THE DARKEST INK AVAILABLE, and that is the point. Near-black on white
     is 15:1 — past the range the eye reads comfortably for long stretches, and
     it makes every glyph edge ring. Backing off to ~11:1 keeps body copy well
     clear of AAA (7:1) while letting the page feel like paper rather than a
     terminal. The quiet tier moves with it, but only as far as 4.5:1: notes and
     completed rows are CONTENT set in --text-dim, so AA for small text is the
     floor it is allowed to reach and not a step further.

     The dark halves are the same step down, mirrored: light-on-dark optically
     BLOOMS, so the softening matters more there, not less. */
  --l-text: #353c46;            --d-text: #c8cdd6;
  --l-text-dim: #717783;        --d-text-dim: #838c99;
  --l-dot: #6b7280;             --d-dot: #9aa4b2;
  /* Gutter controls are interactive, not de-emphasised text, so they get their
     own token: --text-dim is tuned for body copy and falls under 3:1 at glyph
     size. 4.0:1 on white here, 7.0:1 on the dark background. */
  --l-gutter-icon: #718096;     --d-gutter-icon: #9aa4b2;
  --l-accent: #4f7cf0;          --d-accent: #6b93f5;
  --l-line: #e6e9ee;            --d-line: #23272f;
  /* STATUS, not identity — which is why these two have no dark half here and
     none in most of the palettes either: a red that means "this failed" has a
     legibility floor to clear before it has a family to belong to, and the
     binding below falls back to the light value wherever a palette hasn't
     offered a better one. --warn is deliberately NOT --danger: nothing has gone
     wrong when an edit is safe in IndexedDB and waiting for a network. */
  --l-danger: #e53e3e;
  --l-warn: #b7791f;

  /* ---- elevation -------------------------------------------------------- */
  --l-shadow-1: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 16px rgba(16, 24, 40, .07);
  --d-shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px rgba(0, 0, 0, .3);
  --l-shadow-2: 0 8px 20px rgba(16, 24, 40, .08), 0 24px 48px rgba(16, 24, 40, .12);
  --d-shadow-2: 0 8px 20px rgba(0, 0, 0, .32), 0 24px 48px rgba(0, 0, 0, .42);

  /* ---- the tiers that are a step off another one -------------------------
     DERIVED RATHER THAN DECLARED, and so they appear exactly once — no pair, no
     palette. Each of these four is only ever "the same colour, nearly all the
     way back to the surface", which is a ratio and not a choice: the halo is
     the bullet's own grey at a whisper, the soft fill is the accent at a
     whisper, and an indent guide is a step quieter than a border because at
     --line weight the outline reads as a table. The percentages are the ones
     that reproduce the hand-picked values these used to be, in both modes,
     which is why they are these numbers and not round ones — and it is what
     lets a palette in css/palettes.css declare eight colours instead of twelve
     and still hold together. */
  --dot-halo: color-mix(in srgb, var(--dot) 22%, var(--bg));
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg));
  --guide: color-mix(in srgb, var(--line) 85%, var(--bg));
  --guide-lit: color-mix(in srgb, var(--text-dim) 35%, var(--bg));

  /* ---- geometry --------------------------------------------------------- */
  --bar-h: 57px;
  --docbar-h: 46px;
  --rail-w: 250px;
  --col: 720px;
  --col-pad: 28px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;
  /* One 28px grid for every icon button in the chrome, so the bars line up
     however many controls a state happens to show. */
  --hit: 28px;

  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* `system-ui` FIRST, and it is not decoration. The stack used to open with
     `-apple-system` / `BlinkMacSystemFont`, which name the Apple UI face and
     nothing else — on Android both miss, `"Segoe UI"` misses, and the text
     landed on whatever `Roboto` resolved to rather than on the platform's
     actual UI font at its actual optical size. `system-ui` is the one keyword
     every current engine answers with its real interface face (SF on Apple,
     Roboto on Android, Segoe UI Variable on Windows), and those are the faces
     tuned for reading at these sizes. The rest stays as the fallback it always
     was. */
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- the document's type ------------------------------------------------
     The OUTLINE's scale, kept out of the chrome's: a bullet, its note and the
     zoom title are the only things here that are being read rather than
     operated, and on a phone they are read at arm's length on a smaller
     screen. Naming them means the narrow override at the bottom of this file
     is four lines instead of a hunt through the document rules. */
  --doc-text: 16px;
  --doc-line: 22px;
  --doc-note: 13px;
  --doc-note-line: 19px;
  --doc-title: 27px;
  /* THE WEIGHT IS A TOKEN because it is not the same number on every screen.
     A phone is read at arm's length, usually one-handed, often in the dark
     theme — and light-on-dark optically THINS a face, which is why the same
     400 that is right on a laptop reads washed out on a handset. The coarse
     block lifts it; nothing else may set a weight on body copy. */
  --doc-weight: 400;

  /* ---- motion ------------------------------------------------------------
     Three speeds and two curves, and nothing in the app is allowed a fourth.
     The durations are duplicated in js/motion.ts, which is where the
     script-driven half of the same system lives; keep the two in step.

     FAST is for affordances — a hover, a focus ring, a control lighting up.
     BASE is a panel arriving. MOVE is reserved for the STRUCTURAL changes: a
     zoom, a branch unrolling, a row changing places. Anything that redraws the
     outline gets MOVE, so every one of them takes the same amount of time and
     the app has one tempo rather than a dozen. */
  --dur-fast: 90ms;
  --dur-base: 150ms;
  --dur-move: 200ms;
  /* Decelerate: things arrive and settle. The default for anything appearing. */
  --ease: cubic-bezier(.22, .7, .3, 1);
  /* Accelerate: for things LEAVING, which should pick up speed on the way out.
     A decelerating exit reads as hesitation. */
  --ease-exit: cubic-bezier(.5, 0, .85, .3);
}

/* ---- the binding -------------------------------------------------------
   Which half of every pair is live. THREE BLOCKS AND NOTHING ELSE MAY DO THIS:
   the light one is the default, and the system decides between them — unless
   data-theme says otherwise, in which case the choice wins in both directions.

   All three bind on `:root` alone, deliberately: a palette in css/palettes.css
   sets pairs and never a live token, so it can be one flat block per palette
   with no mode in its selector and nothing to outrank here.

   The dark body appears twice (media-scoped and attribute-scoped) because CSS
   has no way to write one rule for both. They are token NAMES, so keep the two
   identical — test/theme.test.ts fails if they diverge by a character. */
:root {
  color-scheme: light;
  --bg: var(--l-bg);
  --raised: var(--l-raised);
  --text: var(--l-text);
  --text-dim: var(--l-text-dim);
  --dot: var(--l-dot);
  --gutter-icon: var(--l-gutter-icon);
  --accent: var(--l-accent);
  --line: var(--l-line);
  --danger: var(--l-danger);
  --warn: var(--l-warn);
  --shadow-1: var(--l-shadow-1);
  --shadow-2: var(--l-shadow-2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--d-bg);
    --raised: var(--d-raised);
    --text: var(--d-text);
    --text-dim: var(--d-text-dim);
    --dot: var(--d-dot);
    --gutter-icon: var(--d-gutter-icon);
    --accent: var(--d-accent);
    --line: var(--d-line);
    --danger: var(--d-danger, var(--l-danger));
    --warn: var(--d-warn, var(--l-warn));
    --shadow-1: var(--d-shadow-1);
    --shadow-2: var(--d-shadow-2);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--d-bg);
  --raised: var(--d-raised);
  --text: var(--d-text);
  --text-dim: var(--d-text-dim);
  --dot: var(--d-dot);
  --gutter-icon: var(--d-gutter-icon);
  --accent: var(--d-accent);
  --line: var(--d-line);
  --danger: var(--d-danger, var(--l-danger));
  --warn: var(--d-warn, var(--l-warn));
  --shadow-1: var(--d-shadow-1);
  --shadow-2: var(--d-shadow-2);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--sans);
}
main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}
h1 {
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
}
h2 {
  font-size: 1.05rem;
  margin: 2rem 0 0.5rem;
}
/* A SUBHEADING HAS TO BE SMALLER THAN THE HEADING ABOVE IT, and without this
   rule it was not: h2 here is 1.05rem while a browser's default h3 is 1.17em,
   so every `###` in the docs rendered LARGER than the section it sat under.
   One did (docs/07-making-it-yours.md), which was easy to miss; the questions in
   docs/11-faq.md are eight more, which would not have been. */
h3 {
  font-size: 0.95rem;
  margin: 1.5rem 0 0.25rem;
}
p,
li {
  margin: 0.5rem 0;
}
ul {
  padding-left: 1.25rem;
}
.updated {
  color: var(--text-dim);
  margin: 0 0 2rem;
}
a {
  color: inherit;
}

/* ---------------------------------------------------------------- docs */
/* The docs are two columns: the contents, which stays put, and the prose. The
   privacy policy is one column and keeps `main`'s own width above. */
.docs {
  display: grid;
  grid-template-columns: 12rem minmax(0, 40rem);
  gap: 3rem;
  max-width: 55rem;
}
.docs-toc {
  position: sticky;
  top: 2rem;
  align-self: start;
  font-size: 0.9rem;
}
.docs-toc b {
  color: var(--text-dim);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.docs-toc ol {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}
.docs-toc a {
  display: block;
  padding: 0.25rem 0 0.25rem 0.75rem;
  border-left: 2px solid var(--line);
  color: var(--text-dim);
  text-decoration: none;
}
.docs-toc a:hover {
  color: var(--text);
}
/* Set by js/docs-toc.ts — the section you have scrolled to. */
.docs-toc a[aria-current="true"] {
  color: var(--text);
  border-left-color: var(--accent);
}
.docs-body > *:first-child {
  margin-top: 0;
}
.docs-body h2 {
  scroll-margin-top: 1.5rem;
}

/* One column, contents first: a phone has no room beside the text. */
@media (max-width: 760px) {
  .docs {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
  .docs-toc {
    position: static;
  }
}

/* The shortcut table. `overflow-x` on the wrapper, never on the page: three
   columns of key glyphs are wider than a phone and the body must not scroll
   sideways because of them. */
.keys {
  overflow-x: auto;
}
.keys table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}
.keys th {
  text-align: left;
  font-weight: 600;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.keys th,
.keys td {
  padding: 0.35rem 0.75rem 0.35rem 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.keys caption {
  text-align: left;
  font-weight: 600;
  padding: 1.25rem 0 0.35rem;
}
kbd {
  font: inherit;
  font-size: 0.9em;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  background: var(--raised);
}

footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------- methods */
/* The note-taking series — /methods and /methods/<slug>, emitted by
   web/vite/methods.ts (spec 011). These are the only pages of the site written
   to be arrived at COLD, from a link in a post, by somebody who has never heard
   of this app: everything below is in service of that reader getting to the end
   of the article and finding one obvious thing to do next.

   The prose keeps `main`'s own measure from the top of this file. What is added
   here is the furniture around it — the standfirst, the template offer, and the
   two links to the rest of the series. */
/* THE ARTICLE PAGE IS TWO COLUMNS on a wide screen: the series, and the piece
   being read. Narrow, the series becomes a row of pills above the headline —
   still the first thing on the page, because a reader who arrived from a post
   does not know the other eight exist. Same arrangement, and the same reason,
   as the docs page's contents column above. */
main.method {
  max-width: 58rem;
}
/* ONE WIDTH FOR THE WHOLE PAGE, and it is the reading measure. Widening the hub
   for the two-column cards left its intro ending eight rem short of them — a
   paragraph and a card that disagree about where the page ends read as a
   mistake, and the cards are the half that can give. */
main.method-hub {
  max-width: 40rem;
}
.method-doc {
  min-width: 0;
}
.method-rail {
  margin: 0 0 2.25rem;
  font-size: 0.9rem;
}
.method-rail-head {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  margin-bottom: 0.6rem;
}
.method-rail-head a {
  text-decoration: none;
}
.method-rail-head a:hover {
  color: var(--accent);
}
.method-rail ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}
.method-rail li {
  margin: 0;
}
.method-rail ol a {
  display: block;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.85rem;
}
.method-rail ol a:hover {
  color: var(--text);
  border-color: var(--accent);
}
.method-rail ol a[aria-current="page"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
@media (min-width: 62rem) {
  main.method {
    display: grid;
    grid-template-columns: 11.5rem minmax(0, 40rem);
    gap: 3rem;
  }
  /* The hub is one column at any width: its cards ARE the list, and a rail
     beside them would be the same nine names twice. */
  main.method-hub {
    display: block;
  }
  .method-rail {
    position: sticky;
    top: 2.5rem;
    align-self: start;
    margin: 0;
  }
  /* Vertical, and set as the docs contents column is: a rule down the side,
     the one you are reading marked on it. Pills stack badly. */
  .method-rail ol {
    display: block;
  }
  .method-rail ol a {
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    padding: 0.25rem 0 0.25rem 0.7rem;
  }
  .method-rail ol a:hover {
    border-color: var(--line);
  }
  .method-rail ol a[aria-current="page"] {
    background: none;
    border-left-color: var(--accent);
  }
  /* The footer belongs under the article, not under the whole grid. */
  .method-foot {
    max-width: 58rem;
    padding-left: 15.75rem;
  }
}

.method h1 {
  font-size: 1.9rem;
  line-height: 1.25;
  margin: 0.4rem 0 0.6rem;
  letter-spacing: -0.015em;
}
.method-kicker {
  margin: 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.method-kicker a {
  text-decoration: none;
}
.method-kicker a:hover {
  color: var(--accent);
}
/* The one line under the headline: what the method is, before the reader has
   decided whether to read the rest. */
.method-standfirst {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0 0 0.75rem;
}
/* Credit, and it stays visually quiet on purpose: these are other people's
   ideas and the article says whose in its first paragraph too. */
.method-who {
  font-size: 0.85rem;
  color: var(--text-dim);
  /* NO RULE OF ITS OWN. The facts strip below draws one, and the two together
     were a pair of hairlines with a gap between them — the credit line is part
     of the same block, not a section that has ended. */
  margin: 0 0 1.6rem;
}
.method-body h2 {
  font-size: 1.15rem;
  margin: 2.25rem 0 0.5rem;
}
.method-body blockquote {
  margin: 1.25rem 0;
  padding: 0.1rem 0 0.1rem 1rem;
  border-left: 2px solid var(--accent);
  color: var(--text-dim);
}
/* The signifier table in the bullet-journal article, and any other. Scrolls
   inside its own box rather than taking the page sideways with it. */
.method-body table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.95rem;
}
.method-body th,
.method-body td {
  text-align: left;
  padding: 0.35rem 1.25rem 0.35rem 0;
  border-bottom: 1px solid var(--line);
}
.method-body th {
  font-weight: 600;
  color: var(--text-dim);
}
.method-body a {
  color: var(--accent);
}
/* A key pair, `⌘⏎ / Ctrl+Enter` — the slash between them is punctuation, not a
   key, and should not be read as one. */
.keys-or {
  color: var(--text-dim);
  padding: 0 0.1em;
}

/* THE THREE FACTS a skimming reader wants, under the standfirst: when the
   method is from, whose problem it solves, what it costs every week. A strip
   rather than a paragraph because it is read in one movement of the eye, and
   because most readers get no further than this. */
.method-facts {
  /* A COLUMN EACH, sized by what is in it. "Best for" and "Upkeep" are phrases
     and share what is left; the year is four characters and takes four
     characters' worth — on an equal share it left a hole in the middle of the
     strip. Each phrase still wraps inside its own column rather than under the
     next label, which is what the flex-basis is for, and the method with no
     year (the Feynman technique) simply has one column fewer. */
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin: 0 0 2rem;
  padding: 0.9rem 0 1.1rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.method-facts > div {
  flex: 1 1 11rem;
  min-width: 0;
}
.method-facts > .method-fact-year {
  flex: 0 0 auto;
}
/* WHAT YOU GET TAKES THE WHOLE FIRST LINE of the strip, which is the one piece
   of layout this row needed to be worth adding. Sharing a row with "From" and
   "Upkeep" it read as the third of four equal facts — and it is not one of
   four, it is the reason to read any of the others. `flex-basis: 100%` puts the
   three short facts underneath it rather than beside it, and the sentence gets
   the width to be a sentence. */
.method-facts > .method-fact-gain {
  flex: 1 1 100%;
}
.method-facts > .method-fact-gain dd {
  font-size: 1.05rem;
  color: var(--text);
}
.method-facts dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.method-facts dd {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
}

/* THE TEMPLATE ITSELF, drawn from the same seed the app inserts. It wears the
   outline's own clothes — the dot, the guide line down each level, the note in
   smaller dim type, the halo on a folded bullet — because the claim it makes is
   "this is what you will be looking at", and a generic list would be a picture
   of some other outliner. */
.method-preview {
  margin: 1.75rem 0;
  padding: 1.1rem 1.25rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raised);
}
.method-preview figcaption {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 0.9rem;
}
.method-preview-foot {
  margin: 1rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--text-dim);
}
.method-preview-foot a {
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.method-preview-foot a:hover {
  text-decoration: underline;
}
.tree,
.tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tree ul {
  margin-left: 0.32rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--guide);
}
.tree li {
  position: relative;
  margin: 0;
  padding: 0.16rem 0 0.16rem 1.05rem;
  font-size: 0.95rem;
  line-height: 1.45;
}
.tree-dot {
  position: absolute;
  left: 0.1rem;
  top: 0.62rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot);
}
/* The halo means FOLDED — there is more under this — exactly as it does in the
   app (css/document.css, `.item.collapsed > .row .dot i`). */
.tree li.folded > .tree-dot {
  box-shadow: 0 0 0 4px var(--dot-halo);
}
/* …and a bullet carrying a document is a rounded square, as it is there. */
.tree li.doc > .tree-dot {
  border-radius: 2px;
  width: 7px;
  height: 8px;
}
.tree li.done > .tree-text {
  text-decoration: line-through;
  color: var(--text-dim);
}
.tree-star {
  color: var(--accent);
  font-size: 0.8em;
}
.tree-note {
  display: block;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-dim);
}

/* The card's own five-line version, on the hub: the top level of the same seed,
   which is as much as a card has room to say and more than another sentence
   would manage. */
.tree-mini {
  margin: 0.7rem 0 0.8rem;
}
.tree-mini li {
  padding: 0.1rem 0 0.1rem 1.05rem;
  font-size: 0.9rem;
}
.tree-mini .tree-dot {
  top: 0.55rem;
}

/* THE DRAWINGS, for the four methods that are genuinely about a shape. Inlined
   SVG rather than an <img> so they take the page's colours in both themes —
   everything in them is currentColor, --accent or --line, and nothing is a
   baked-in hex that would go invisible on a dark background. */
.method-figure {
  margin: 1.75rem 0;
}
.method-figure svg {
  width: 100%;
  height: auto;
  display: block;
  color: var(--text);
}
.method-figure .cell rect {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}
.method-figure .cell rect.lift {
  fill: var(--accent-soft);
  stroke: var(--accent);
}
.method-figure text {
  font-family: var(--sans);
  fill: var(--text-dim);
  font-size: 11px;
}
.method-figure .label {
  fill: var(--text);
  font-size: 13px;
  font-weight: 650;
}
.method-figure .lift-label {
  fill: var(--accent);
}
.method-figure .step {
  fill: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.method-figure .axis text,
.method-figure .em {
  font-style: italic;
}
/* A column heading inside a drawing — the same small-caps label the facts strip
   uses, so the two kinds of furniture on the page read as one family. */
.method-figure .head {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.09em;
}
.method-figure .link path,
.method-figure .cell line {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}
.method-figure .link path {
  stroke-dasharray: 3 3;
}
/* An arrowhead is a filled triangle, not a stroked one — the dash pattern above
   would otherwise chew three sides of a 6px shape into dots. */
.method-figure .link path.tip {
  stroke: none;
  stroke-dasharray: none;
  fill: var(--line);
}

/* THE OFFER. Every article ends on the same one: the template, in the real app,
   with no account in the way. Set as a card rather than a paragraph because it
   is the only thing on the page that is not reading. */
.method-cta {
  margin: 2.5rem 0 2rem;
  padding: 1.25rem 1.25rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raised);
}
.method-cta b {
  font-size: 1.05rem;
}
.method-cta p {
  color: var(--text-dim);
  margin: 0.4rem 0 1rem;
}
.method-cta-act {
  display: inline-block;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  background: var(--accent);
  /* #fff, as every other button on an accent fill in this app is
     (css/landing.css, css/screens.css): the accent is a mid-dark colour in all
     nine palettes and there is no token for its foreground. */
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.method-cta-act:hover {
  filter: brightness(1.08);
}

/* Where to go next. Two links, side by side, each naming the article rather
   than saying "next" and leaving the reader to guess. */
.method-nav {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
}
.method-nav a {
  flex: 1;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
}
.method-nav a:hover {
  border-color: var(--accent);
}
.method-nav span {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
}
.method-nav-next {
  text-align: right;
}
.method-all {
  margin: 1rem 0 0;
  font-size: 0.9rem;
}
.method-all a {
  color: var(--accent);
}

/* THE HUB — the nine, as cards. It is a contents page, so the tagline does the
   choosing and the two links do the rest. */
.method-list {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.method-card {
  margin: 0;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  /* One column until there is room for two: the outline goes UNDER the sentence
     on a phone, where 14rem beside it would be four words per line. */
  display: grid;
  gap: 0.9rem;
}
.method-card-main {
  min-width: 0;
}
.method-card-eg {
  min-width: 0;
}
.method-card-eg-head {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
@media (min-width: 44rem) {
  .method-card {
    /* 13rem, not 15: the card lives inside the page's own measure now, and the
       sentence on the left needs the width more than the four short lines on
       the right do. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 13rem);
    gap: 1.25rem;
  }
  /* A hairline between the two halves rather than a box around the second: it
     is the same card, read across. */
  .method-card-eg {
    border-left: 1px solid var(--line);
    padding-left: 1.25rem;
  }
}
.method-card-name {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.method-card-name:hover {
  color: var(--accent);
}
/* A BYLINE, ON ITS OWN LINE. Beside the name it was a phrase of unpredictable
   length hanging off a heading of unpredictable length: "Dwight D. Eisenhower,
   by way of Stephen Covey" wrapped one word onto a second line and pushed the
   tagline down, so no two cards began at the same height. Under the name it is
   the same information, the same size, and the same shape on all nine. */
.method-card-who {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.method-card p {
  color: var(--text-dim);
  margin: 0.55rem 0 0.6rem;
}
/* THE PAYOFF, IN THE BODY COLOUR, above the tagline's dim grey. The two lines
   answer different questions — what this gets you, then how it works — and the
   contrast between them is what makes that reading order visible rather than
   merely true of the source order. */
.method-card-gain {
  color: var(--text);
  margin: 0.5rem 0 0;
  font-size: 1.02rem;
}
.method-card-gain + p {
  margin-top: 0.3rem;
  font-size: 0.92rem;
}
.tree-mini {
  margin-top: 0.45rem;
}
.method-card-upkeep {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: 0 0 0.6rem;
  opacity: 0.85;
}
.method-card-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.method-card-act {
  font-size: 0.9rem;
  color: var(--accent);
  text-decoration: none;
}
.method-card-act:hover {
  text-decoration: underline;
}

/* The way back into the product, on every page of the series — and for a great
   many readers the first link to it they will see. */
.method-foot {
  display: flex;
  gap: 1.25rem;
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 3rem;
  border-top: 0;
  font-size: 0.9rem;
}
.method-foot a {
  color: var(--text-dim);
  text-decoration: none;
}
.method-foot a:hover {
  color: var(--accent);
}