/* AlbionSnipe - chrome shared by every article under /guides/.
   The shell (tokens, header, buttons, footer, light theme) comes from site.css; this file adds
   only the article furniture. It is a real stylesheet rather than an inline block on purpose:
   guides.html inlines its own copy of the whole shell and that duplication has to be kept in
   sync by hand, which is the mistake this avoids from the second article onwards. */

/* ---------- page head ----------
   Centred, and that is a reading decision rather than a taste one. The body below sits in the
   right-hand column of a two-column grid, so a left-aligned head started 280px to the left of
   the first paragraph and the page opened on two competing left edges. Centring the head gives
   the article one entrance, and it reads as an entrance instead of a stray block.

   No line engine here either. typeset.js ends every line where the sense ends, which is right
   for a card or a button but turned this lede into four short stacked lines. A centred block of
   two sentences wants the opposite: even lines, which is exactly what text-wrap:balance does.
   Balance alone would happily end a line on "the", so the terms that must not be split are held
   by .nb and the sentences are kept short enough that there is little left to get wrong. */
.ghead{padding:52px 0 34px;border-bottom:1px solid var(--border);position:relative;overflow:hidden;
  text-align:center}
.ghead::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(760px 300px at 50% -60px, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%)}
.ghead h1{font-family:var(--display);font-size:clamp(26px,4.2vw,40px);font-weight:700;
  letter-spacing:.4px;margin:12px auto 0;position:relative;text-wrap:balance}
/* No max-width: it forced a two-line title where one line fitted, and the second line was a
   single word. On a phone a short title still wraps, and there it breaks at the comma. */
.nb{white-space:nowrap}
.ghead .lede{color:var(--dim);max-width:640px;margin:18px auto 0;font-size:16.5px;line-height:1.55;
  position:relative;text-wrap:balance}
.ghead .lede .ll{display:block}
.ghead .lede .ll + .ll{margin-top:6px}

/* The article card, taken from what the dominant fansite does well: a reader sees at a glance
   who wrote it, when, and when it was last checked. A trading guide that is not re-checked
   after a patch is simply wrong, so the date is part of the content. */
.fiche{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin:26px 0 0;
  position:relative;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.fiche b{color:var(--dim);font-weight:700}
.fiche .k{color:var(--brand);letter-spacing:.1em;text-transform:uppercase;font-size:11px;margin-right:6px}
.ghead .eyebrow{position:relative}

/* ---------- layout ---------- */
/* The horizontal padding is repeated on purpose: this element is also .wrap, and a padding
   shorthand here resets .wrap's 22px to zero. It did, and on a phone the text ran edge to edge. */
.cols{display:grid;grid-template-columns:232px 1fr;gap:48px;padding:40px 22px 70px;align-items:start}
/* A grid track defaults to min-width:auto, so the article column took the width of its widest
   child - the tables, which carry a min-width. That pushed the whole page sideways on a phone. */
.cols > *{min-width:0}
nav.toc{position:sticky;top:86px}
nav.toc .t{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px}
nav.toc a{display:block;padding:5px 0 5px 11px;border-left:2px solid var(--border);color:var(--dim);font-size:14px}
nav.toc a:hover{color:var(--text);border-left-color:var(--brand-dim)}
nav.toc a.on{color:var(--brand);border-left-color:var(--brand)}

/* ---------- the prose ---------- */
/* READ THIS BEFORE ADDING A LINE BREAKER HERE.
   The body of a guide is prose and it is NOT subtitled. The sense-cutting engine (typeset.js)
   is for facade copy - a hero lede, a card, a button, a short note - where a line is a unit and
   an orphan word is visible. Applied to running paragraphs it produced a staircase: "and that
   is the whole argument. Low tier pays the better percentage, by a wide margin" then "and
   consistently." alone on its own line. Correct by the rules of subtitling, unreadable as an
   article. Adil, 31/07: "ICI C'EST UN GUIDE... il faut que ce soit juste propre a lire, coupe
   logiquement par paragraphe."
   So the body wraps normally. text-wrap:pretty asks the browser to avoid a one-word last line
   without touching where the other lines break, which is exactly the amount of help prose wants. */
.body{max-width:none}
.body h2{font-family:var(--display);font-size:clamp(20px,2.7vw,26px);font-weight:700;letter-spacing:.3px;
  margin:44px 0 0;scroll-margin-top:82px}
.body h2:first-child{margin-top:0}
.body p{color:var(--dim);margin:16px 0 0;font-size:16.5px;line-height:1.65;text-wrap:pretty}
.body ul{color:var(--dim);margin:16px 0 0;padding-left:22px;font-size:16.5px;line-height:1.65}
.body li{margin:8px 0;text-wrap:pretty}
.body li::marker{color:var(--brand-dim);font-weight:700}
.body b{color:var(--text);font-weight:700}
.body a{color:var(--brand);border-bottom:1px solid color-mix(in srgb, var(--accent) 30%, transparent)}
.body a:hover{border-bottom-color:var(--brand)}
.body code{font-family:var(--mono);font-size:13.5px;background:var(--panel2);border:1px solid var(--border);
  border-radius:4px;padding:1px 6px;color:var(--text)}

/* ---------- tables ---------- */
/* Wide content scrolls inside its own box: the page body never scrolls sideways. */
.tw{overflow-x:auto;margin:20px 0 0;border:1px solid var(--border-strong);border-radius:var(--radius)}
.tw table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px}
.tw th,.tw td{padding:9px 14px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap}
.tw th:first-child,.tw td:first-child{text-align:left}
.tw thead th{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);background:var(--panel)}
.tw tbody tr:last-child td{border-bottom:0}
.tw tbody td{color:var(--dim)}
.tw tbody td:first-child{color:var(--text);font-weight:600}
.tw td.n{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tw td.yes{color:var(--payout);font-weight:700}
.tw td.no{color:var(--muted)}
.tw tr.hi td{background:color-mix(in srgb, var(--accent) 7%, transparent)}

/* ---------- notes and closing band ---------- */
.note{background:var(--panel);border:1px solid var(--border-strong);border-left:3px solid var(--brand-dim);
  border-radius:var(--radius);padding:18px 22px;color:var(--dim);font-size:15.5px;margin:24px 0 0}
.note b{color:var(--text)}
.note p{margin:10px 0 0;font-size:15.5px;line-height:1.6}
.note p:first-child{margin:0}

.cta-band{border:1px solid var(--border-strong);border-radius:16px;background:var(--panel);
  padding:30px;margin:56px 0 0}
.cta-band h2{margin:0;font-size:21px;font-family:var(--display)}
.cta-band p{margin:12px 0 20px;max-width:620px;color:var(--dim);line-height:1.6}
.cta-band .row{display:flex;gap:12px;flex-wrap:wrap}

@media(max-width:900px){
  .cols{grid-template-columns:1fr;gap:0;padding-top:26px}
  nav.toc{position:static;margin-bottom:32px;border-bottom:1px solid var(--border);padding-bottom:20px}
  nav.toc .lst{display:flex;flex-wrap:wrap;gap:6px}
  nav.toc a{border-left:0;border:1px solid var(--border);border-radius:6px;padding:6px 11px;font-size:13px}
}

/* Le libelle FR du bouton principal ("Telecharger") est plus long que l'anglais ("Download"),
   et sur un ecran de 375px il poussait la page de 7px sur le cote. La barre est partagee par
   toutes les langues, donc on la resserre ici plutot que de raccourcir le mot. */
@media(max-width:420px){
  .hdr-cta #hdrDl{padding:7px 7px}
  .hdr-cta #hdrDl span{font-size:12px}
  .hdr-cta{gap:4px}
  header .nav{gap:6px}
  .brand{font-size:16px}
}

/* Retour vers la liste des guides. Present en HAUT (avant le titre, la ou l'oeil arrive) et en
   BAS (la ou on se trouve apres avoir lu). Sans fleche: R27 les interdit dans le texte publie,
   donc le lien porte des mots. Signale par Adil, qui devait viser "Guides" dans la barre du
   haut, un lien de navigation parmi six qui ne se lit pas comme un retour. */
.gback { display: inline-block; font-family: var(--mono, monospace); font-size: 11.5px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.gback:hover { color: var(--brand); border-bottom-color: var(--brand); }
.ghead .gback { margin-bottom: 14px; }
.gback-end { margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--border); }