/* how.css: the How it works page and the example brief page.
   Loaded after theme.css and pages.css. Colours and type come from theme.css tokens. The four outcome colours in the
   diagram are the verdict colours, written out in the diagram's own markup so the picture reads the same on any screen. */

/* ---------- the diagram ---------- */

.how-section { margin: 0; }
.how-section > h2 { margin-top: 56px; }
.how-section > h2::after { content: ""; display: block; width: 36px; height: 3px; margin-top: 8px; background: var(--amber); border-radius: 2px; }
.how-section > p { margin: 12px 0 0; }

.journey-fig { margin: 24px 0 0; padding: 20px 16px 14px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.journey-fig figcaption { margin: 10px 0 0; color: var(--muted); font-size: 0.92rem; }

.journey { position: relative; max-width: 100%; margin: 0 auto; }
.journey-svg { display: block; width: 100%; height: auto; }
.journey-wide { display: none; }
.journey-narrow { max-width: 26rem; }
.journey-narrow .stage-name { font-size: 13.5px; }
.journey-narrow .out-t { font-size: 12px; }
@media (max-width: 47.99rem) { .journey-fig { padding: 16px 6px 12px; } .journey-fig figcaption { padding: 0 10px; } }
@media (min-width: 48rem) {
    .journey-wide { display: block; }
    .journey-narrow { display: none; }
    .journey-fig { padding: 24px 24px 16px; }
}

/* the links sit over the boxes as ordinary HTML, so the picture can stay one image for assistive technology */
.hot a { position: absolute; display: block; border-radius: 10px; text-decoration: none; }
.hot a:hover { background: var(--tint); }
.hot a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.stage { fill: #ffffff; stroke: var(--navy); stroke-width: 2; }
.stage-name { font: 700 15.5px/1 var(--serif); fill: var(--navy); }
.chip { fill: var(--pill-bg); }
.chip-t { font: 500 12px/1 var(--sans); fill: var(--navy); }
.arrow { stroke: var(--navy); stroke-width: 2; fill: none; }
.arrow-out { stroke-width: 3; fill: none; }
.out-t { font: 600 12.5px/1 var(--sans); }
.ah-main { fill: var(--navy); }
.ah-exit { fill: #6b7280; }
.exit { fill: #ffffff; stroke: #6b7280; stroke-width: 1.5; stroke-dasharray: 6 4; }
.exit-t { font: 500 13px/1 var(--sans); fill: #4b5563; }
.exit-line { fill: none; stroke: #6b7280; stroke-width: 1.5; stroke-dasharray: 6 4; }
.after { fill: var(--strip-bg); stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 1 5; stroke-linecap: round; }
.after-t { font: 500 13px/1 var(--sans); fill: var(--muted); }
.after-line { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 1 5; stroke-linecap: round; }
.return { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 1 5; stroke-linecap: round; }
.ret-t { font: italic 500 13px/1 var(--sans); fill: var(--muted); }
.bracket { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }

/* ---------- the stages ---------- */

.stage-list { display: grid; gap: 16px; margin-top: 20px; }
.stage-card { scroll-margin-top: 16px; padding: 18px 20px 18px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.stage-card:target { border-left-color: var(--green); box-shadow: var(--shadow); }
.prose .stage-card h3 { margin: 0 0 6px; font-size: 1.2rem; }
.prose .stage-card p { margin: 0; max-width: 46rem; }
.stage-after { background: var(--strip-bg); border-left-style: dotted; }
@media (min-width: 64rem) {
    .stage-list { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ---------- three ways in, differences, questions ---------- */

.prose .ways, .prose .diffs { display: grid; gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; max-width: none; }
.ways + p { margin-top: 18px; }
.prose .way { margin: 0; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.prose .way h3 { margin: 0 0 4px; font-size: 1.1rem; }
.prose .way p { margin: 0; }
.way a { color: var(--navy); }
.prose .diff { margin: 0; padding: 18px 20px 20px; }
.prose .diff h3 { margin: 0 0 6px; font-size: 1.1rem; }
.prose .diff p { margin: 0; }
@media (min-width: 48rem) {
    .prose .ways { grid-template-columns: repeat(3, 1fr); }
    .prose .diffs { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64rem) {
    .prose .diffs { grid-template-columns: repeat(3, 1fr); }
}

.qa-list { display: grid; gap: 14px; margin-top: 20px; }
.qa { padding: 14px 0 0; border-top: 1px solid var(--line); }
.prose .qa h3 { margin: 0 0 4px; font-size: 1.08rem; }
.prose .qa p { margin: 0; }
@media (min-width: 64rem) {
    .qa-list { grid-template-columns: 1fr 1fr; gap: 14px 48px; }
}
.how-section .qa-list + p { margin-top: 20px; }

/* ---------- example brief ---------- */

.brief-tabs { max-width: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.brief-tabs[hidden] { display: none; }
.brief-tabs .pill-toggle { text-decoration: none; }
.brief-tabs .pill-toggle:hover { color: var(--navy); }
.brief-tabs .pill-toggle[aria-pressed="true"], .brief-tabs .pill-toggle[aria-pressed="true"]:hover { color: #ffffff; }
.brief-panel { margin: 24px 0 0; scroll-margin-top: 16px; }
.brief-panel[hidden] { display: none; }
.brief-caption { margin: 0 0 10px; color: var(--muted); font-size: 0.95rem; }
.brief-mount { max-width: 52rem; }
.brief-mount:empty::before { content: "Loading the example."; color: var(--muted); }
@media print {
    .bar, .foot, .browse-intro, .brief-tabs, .brief-caption, .brief-more, .brief-needs-script { display: none !important; }
    html, body { display: block; min-height: 0; overflow: visible; }
    .wrap { display: block; max-width: none; padding: 0; }
    .page { padding: 0; max-width: none; }
    .brief-panel { margin: 0; }
    .brief-mount { max-width: none; }
}
.brief-more.prose { margin-top: 32px; }