/*
  Chrome for the /guides/ pages.
  ---------------------------------------------------------------------------
  A separate stylesheet rather than an addition to site.css, and rather than a
  copy of the handbook's inline <style>.

  Not site.css, because the handbook defines .doc, .doc-head and .note inline
  and those inline rules would win the cascade — so the same class would mean
  two slightly different things on two pages, which is the sort of divergence
  that goes unnoticed until one of them looks wrong.

  Not inline per guide, because there will be several guides and they must not
  drift apart.

  The layout half is deliberately the same as the handbook's: a guide and the
  handbook should feel like the same document set.
*/

/* ── Header ─────────────────────────────────────────────────────────────── */
.doc-head { padding: 64px 0 40px; border-bottom: 1px solid var(--border); }
.doc-head .wrap { display: flex; flex-direction: column; gap: 18px; }
.doc-head h1 { font-size: clamp(32px, 5vw, 50px); max-width: 20ch; }
.doc-head .standfirst { font-size: clamp(17px, 2.1vw, 20px); color: var(--muted); max-width: 62ch; }
.doc-head .standfirst strong { color: var(--text); font-weight: 500; }

/* A guide makes claims about a moving regulatory target, so it says when it
   was last checked. An undated compliance page is worth less than no page. */
.doc-head .stamp {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}

/* padding-block only — a `padding` shorthand would reset the horizontal
   padding .wrap sets and the page would run edge to edge. */
.doc-layout { display: grid; grid-template-columns: 1fr; gap: 0; padding-top: 48px; padding-bottom: 96px; }
@media (min-width: 1040px) {
  .doc-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 64px; }
}

/* ── Contents rail ──────────────────────────────────────────────────────── */
aside.toc { display: none; }
@media (min-width: 1040px) {
  aside.toc {
    display: block; position: sticky; top: 86px; align-self: start;
    max-height: calc(100vh - 110px); overflow-y: auto;
  }
}
aside.toc p {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin: 22px 0 8px;
}
aside.toc p:first-child { margin-top: 0; }
aside.toc ul { list-style: none; display: flex; flex-direction: column; gap: 1px; }
aside.toc a {
  display: block; font-size: 14px; color: var(--muted); text-decoration: none;
  padding: 4px 9px; margin-left: -9px; border-radius: 5px; line-height: 1.35;
}
aside.toc a:hover { color: var(--text); background: rgba(255,255,255,.05); }

/* ── Prose ──────────────────────────────────────────────────────────────── */
.doc { display: flex; flex-direction: column; gap: 52px; min-width: 0; }
.doc section { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 80px; }
.doc h2 { font-size: clamp(24px, 3.1vw, 32px); max-width: 24ch; }
.doc h3 { font-size: 18px; margin-top: 6px; }
.doc p { max-width: 68ch; color: var(--muted); }
.doc p strong { color: var(--text); font-weight: 500; }
.doc .lede { font-size: 17px; }
.doc a { color: var(--blue); }

.doc ul.points { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.doc ul.points > li {
  display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 14px;
  max-width: 68ch; color: var(--muted);
}
.doc ul.points > li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue); margin-top: 9px;
}
.doc ul.points > li strong { color: var(--text); font-weight: 500; }

/* The question a recall exercise has to answer, set apart because the whole
   page hangs off it. */
.doc blockquote {
  border-left: 3px solid var(--blue); padding: 4px 0 4px 20px;
  font-size: clamp(18px, 2.4vw, 22px); color: var(--text); max-width: 44ch;
  line-height: 1.4;
}

.note {
  border-left: 3px solid var(--blue); background: rgba(95,168,206,.07);
  border-radius: 0 8px 8px 0; padding: 14px 18px;
  display: flex; flex-direction: column; gap: 9px; max-width: 68ch;
}
.note.warn { border-left-color: var(--warn); background: rgba(217,164,65,.07); }
.note .lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue);
}
.note.warn .lbl { color: var(--warn); }
.note p { font-size: 15px; color: var(--muted); }
.note p strong { color: var(--text); font-weight: 500; }

/* ── Closing call to action ─────────────────────────────────────────────── */
.guide-cta {
  border: 1px solid var(--border); border-radius: 12px; background: var(--slate);
  padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; max-width: 68ch;
}
.guide-cta h2 { font-size: 21px; }
.guide-cta .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* ── The /guides index ──────────────────────────────────────────────────── */
.guide-list { display: flex; flex-direction: column; gap: 16px; max-width: 78ch; }

/* The whole card is the link. A "read more" at the end of a card gives the
   pointer a small target for no reason, and gives a screen reader a link whose
   text says nothing about where it goes. */
a.guide-item {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--slate);
  padding: 24px 26px; text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
a.guide-item:hover { border-color: var(--blue); background: rgba(95,168,206,.05); }
a.guide-item h2 { font-size: clamp(19px, 2.4vw, 23px); color: var(--text); max-width: 30ch; }
a.guide-item p { color: var(--muted); font-size: 15.5px; max-width: 68ch; }
a.guide-item .meta {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-top: 2px;
}

/* ── Foot of the article ────────────────────────────────────────────────── */
.doc-foot {
  border-top: 1px solid var(--border); padding-top: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.doc-foot p { font-size: 14px; color: var(--faint); max-width: 68ch; }
.doc-foot a { color: var(--muted); }