/* Long form article pages under /writing. Local draft, October 3 2026. */
.article-page { padding: var(--sp-8) 0; }
.article-page .prose ul,
.article-page .prose ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; max-width: 62ch; }
.article-page .prose li { margin-bottom: var(--sp-2); }
/* Disclaimer box at the end. Filled, so no border. */
.article-page .article-note { background: var(--surface); padding: var(--sp-4) var(--sp-6); margin: var(--sp-8) 0 0; max-width: none; }
.article-page .article-note p { margin: 0; font-size: 0.95rem; }
.article-page blockquote { margin: 0 0 var(--sp-4); padding-left: var(--sp-4); border-left: 2px solid var(--rule); font-family: 'Noto Serif', serif; font-style: italic; }

/* Figures. Filled boxes, no borders. Text inside figures is left aligned:
   short labels in narrow boxes justify into gaps. */
.article-figure { margin: var(--sp-8) 0; }
.article-figure :where(p, li) { text-align: left; hyphens: manual; -webkit-hyphens: manual; max-width: none; }
.article-figure h3 { font-family: 'Archivo', sans-serif; font-size: 1rem; margin: 0 0 var(--sp-2); }
.article-figure figcaption { margin-top: var(--sp-4); font-size: 0.9rem; color: var(--fg-muted); }
.fig-num { font-family: 'Archivo', sans-serif; font-weight: 700; color: var(--accent); margin-right: var(--sp-2); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; }

/* 1. Ladder: safest first, the fill deepens as the AI sees more. */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.article-page .prose .ladder { padding-left: 0; max-width: none; }
.lvl { position: relative; padding: var(--sp-4) var(--sp-6); margin: 0; background: var(--surface-2); }
.lvl p { margin: 0 0 var(--sp-2); font-size: 0.95rem; }
.lvl-2 { background: color-mix(in srgb, var(--surface) 45%, var(--surface-2)); }
.lvl-3 { background: color-mix(in srgb, var(--surface) 75%, var(--surface-2)); }
.lvl-4 { background: var(--surface); }
.lvl-1 { box-shadow: inset 4px 0 0 var(--link); }
.lvl-4 { box-shadow: inset 4px 0 0 var(--accent); }
.lvl-tag { float: right; font-family: 'Archivo', sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); }
.lvl-sees { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 0.85rem !important; margin: 0 !important; color: var(--fg-muted); }

/* 2. Checklist card. */
.fig-check .checklist { list-style: none; margin: 0; padding: var(--sp-6); background: var(--surface); display: grid; gap: var(--sp-2) var(--sp-6); }
.article-page .prose .checklist { padding-left: var(--sp-6); max-width: none; }
.checklist li { position: relative; padding-left: 1.75rem; margin: 0; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1rem; height: 1rem; box-shadow: inset 0 0 0 1.5px var(--fg-muted); }

/* 3. Who does what. */
.who { display: grid; gap: var(--sp-2); }
@media (min-width: 40rem) { .who { grid-template-columns: 1fr 1fr; } }
.who-col { padding: var(--sp-4); background: var(--surface-2); }
.who-me { background: var(--surface); }
.who-me h3 { color: var(--accent); }
.who-col ul { list-style: none; margin: 0; padding: 0; }
.article-page .prose .who-col ul { padding-left: 0; }
.who-col li { font-size: 0.9rem; margin: 0 0 var(--sp-2); }

/* 4. Flowchart. */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.article-page .prose .flow { padding-left: 0; max-width: none; }
.flow-step { position: relative; display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--sp-2) var(--sp-4); align-items: baseline; padding: var(--sp-2) var(--sp-4); margin: 0; background: var(--surface-2); }
.flow-step:not(:last-child)::after { content: ""; position: absolute; left: 1.6rem; bottom: calc(-1 * var(--sp-4)); height: var(--sp-4); width: 1.5px; background: var(--fg-muted); }
.flow-n { font-family: 'Archivo', sans-serif; font-weight: 700; color: var(--accent); min-width: 1.5rem; }
.flow-decision { background: var(--surface); }
.flow-decision .flow-t { font-weight: 600; }
.flow-fork { grid-column: 2; display: grid; gap: var(--sp-2); }
@media (min-width: 40rem) { .flow-fork { grid-template-columns: 1fr 2fr; } }
.flow-fork p { margin: 0; font-size: 0.9rem; padding: var(--sp-2) var(--sp-4); background: var(--bg); }
.fork-yes b { color: var(--link); }
.fork-no b { color: var(--accent); }

.article-page .article-colophon { margin-top: var(--sp-4); max-width: none; }
.article-page .article-colophon p { font-size: 0.85rem; color: var(--fg-muted); margin: 0; }

/* 1. Tools. */
.tools { margin: 0; display: grid; gap: var(--sp-2); }
@media (min-width: 40rem) { .tools { grid-template-columns: 1fr 1fr; } }
.tools div { padding: var(--sp-2) var(--sp-4); background: var(--surface-2); }
.tools dt { font-family: 'Archivo', sans-serif; font-weight: 700; color: var(--accent); }
.tools dd { margin: 0; font-size: 0.9rem; }

/* What I use AI for: a filled box, so the list does not read like body text. */
.article-page .use-box { background: var(--surface); padding: var(--sp-4) var(--sp-6); margin: 0 0 var(--sp-6); }
.article-page .use-box p { font-family: 'Archivo', sans-serif; font-weight: 600; margin: 0 0 var(--sp-2); }
.article-page .prose .use-box ul { margin: 0; padding-left: 1.1rem; max-width: none; }
.article-page .use-box li { text-align: left; hyphens: manual; -webkit-hyphens: manual; font-size: 0.95rem; margin-bottom: var(--sp-1, 0.25rem); }
/* Tool names as small subheads inside the tools passage. */
.article-page .prose h3.tool-h { font-family: 'Archivo', sans-serif; font-size: 1rem; color: var(--accent); margin: var(--sp-6) 0 var(--sp-2); }
/* Highlighted paragraph. Filled, so no border. */
.article-page .prose p.callout { background: var(--surface); padding: var(--sp-4) var(--sp-6); font-family: 'Noto Serif', serif; font-size: 1.1rem; max-width: none; margin: var(--sp-6) 0; border: 0; }
/* Highlighted quote, same fill as the callout, no border. */
.article-page .prose blockquote.callout-quote { background: var(--surface); padding: var(--sp-4) var(--sp-6); margin: var(--sp-6) 0; border: 0; }
.article-page .prose blockquote.callout-quote p { font-size: 1.1rem; margin: 0; max-width: none; }

/* Guide width rule (Felix, September 27 2026): all text runs the full column. */
.article-page .prose > p, .article-page .prose > ul, .article-page .prose > ol, .article-page .prose .article-colophon p, .article-page .prose .article-note p { max-width: none; }

/* Section bar, copied from guides/phd-countries.css so both guides share one look. */
.g-guidebar { top: 65px; z-index: 45; }
.g-guidebar .guide-bar-inner a { font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--fg-muted); text-decoration: none; padding: var(--sp-2) 0.7rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.g-guidebar .guide-bar-inner a:hover { color: var(--fg); }
.g-guidebar .guide-bar-inner a.is-current { color: var(--fg); border-bottom-color: var(--accent); }
.article-page h2[id] { scroll-margin-top: 120px; }

/* Rail: the section menu bar only. A horizontal scroller with fading edges and arrow buttons. */
.g-rail { position: relative; min-width: 0; max-width: 100%; }
.g-rail-track { overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.g-rail-track::-webkit-scrollbar { display: none; }
.g-rail-track:focus, .g-rail-track:focus-visible { outline: none; }
.g-rail:not(.at-end) .g-rail-track { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.g-rail:not(.at-start):not(.at-end) .g-rail-track { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.g-rail.at-end:not(.at-start) .g-rail-track { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px); mask-image: linear-gradient(to right, transparent, #000 56px); }
.g-rail.no-scroll .g-rail-track { -webkit-mask-image: none; mask-image: none; }
.g-rail-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 28px; height: 28px; padding: 0; margin: 0;
  border-radius: var(--radius-control); border: 1px solid var(--rule-strong);
  background: var(--bg-deep); color: var(--fg); line-height: 0; letter-spacing: 0;
  cursor: pointer; display: grid; place-items: center;
  transition: opacity .2s;
}
.g-rail-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.g-rail-btn:hover { background: var(--surface-2); }
.g-prev { left: 4px; } .g-next { right: 4px; }
.g-rail.at-start .g-prev, .g-rail.at-end .g-next, .g-rail.no-scroll .g-rail-btn { opacity: 0; pointer-events: none; }
.g-rail-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: none) { .g-rail-bar .g-rail-btn { display: none; } }
/* Read-later link in the section bar: a plain text link, no pill */
.g-bar-row { display: flex; align-items: center; gap: var(--sp-4); }
.g-bar-row .g-rail { flex: 1 1 auto; min-width: 0; }
.g-readlater { flex: none; display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--fg-muted); white-space: nowrap; padding: 0 var(--sp-2); }
.g-readlater .g-rl-q { color: var(--fg-muted); }
.g-readlater .g-rl-a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.g-readlater:hover .g-rl-q { color: var(--fg); }
.g-readlater:hover .g-rl-a { color: var(--link-hover); }
@media (max-width: 720px) { .g-readlater .g-rl-q { display: none; } }