/* radar.html: the page's own styles, moved out of an inline <style> so the Content-Security-Policy needs no exception (W3-11). */
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-900); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 64px); }
.kicker { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-600); }
header.r-head { padding: 96px 0 26px; border-bottom: 1px solid var(--color-divider); }
header.r-head h1 { margin: 8px 0 12px; font-family: var(--font-heading); font-weight: 600; font-size: clamp(34px, 5vw, 58px); line-height: 1.02; letter-spacing: -0.01em; }
header.r-head p { margin: 0; max-width: 760px; font-size: 17px; line-height: 1.5; color: var(--color-neutral-800); }
section.r-sec { padding: 40px 0 8px; }
section.r-sec h2 { margin: 0 0 6px; font-family: var(--font-heading); font-weight: 600; font-size: 30px; line-height: 1.1; }
section.r-sec .lede { margin: 0 0 22px; color: var(--color-neutral-800); max-width: 760px; }
.themes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.theme { border: 1px solid var(--color-divider); padding: 18px 18px 20px; display: grid; gap: 8px; align-content: start; }
.theme h3 { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 20px; }
.theme p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--color-neutral-800); }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.spark i { flex: 1; max-width: 12px; background: var(--color-accent-500); min-height: 2px; height: var(--h, 2px); }
.spark i.z { background: var(--color-chart-empty); }
.theme .meta { font-size: 12.5px; color: var(--color-neutral-700); }
/* Fixed column widths, so opening a note does not re-lay out the table. */
table.topics { width: 100%; border-collapse: collapse; font-size: 14.5px; table-layout: fixed; }
table.topics th:nth-child(1) { width: 3em; }
table.topics th:nth-child(3) { width: 4.5em; }
table.topics th:nth-child(4) { width: 206px; }
table.topics td { overflow-wrap: anywhere; }
table.topics th { text-align: left; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-700); padding: 8px 10px; border-bottom: 1px solid var(--color-text); }
table.topics td { padding: 12px 10px; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
table.topics td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.parts { display: grid; grid-template-columns: repeat(5, 34px); gap: 4px; }
.parts span { font-size: 10.5px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }
.parts i { display: block; height: 4px; background: var(--color-neutral-200); position: relative; }
.parts i b { position: absolute; inset: 0 auto 0 0; background: var(--color-accent-600); width: var(--w, 0%); }
/* A topic's theme under its label (was a style attribute). */
.theme-name { font-size: 12px; color: var(--color-neutral-700); }
.srcs { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 13px; }
.srcs .cls { color: var(--color-neutral-700); font-size: 12px; }
/* A row source's '·' is held to its class's first word, so a line breaks before the separator, never after it. */
.srcs .sep-run { white-space: nowrap; }
/* A row that stands for two or more ranks (D-099): the further ranks under the first, and a line saying why. */
table.topics td.n .also { font-size: 12.5px; color: var(--color-neutral-700); }
table.topics .merged { margin-top: 2px; font-size: 12.5px; color: var(--color-neutral-700); }
details.note { margin: 10px 0 2px; max-width: 680px; }
/* At least 44px tall, so the fold is easy to open on a phone. */
details.note summary { display: list-item; box-sizing: border-box; min-height: 44px; padding: 12px 0; line-height: 20px; cursor: pointer; font-size: 14px; letter-spacing: 0.02em; color: var(--color-accent-700); }
details.note summary:hover { color: var(--color-accent-900); }
details.note p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--color-text); }
details.note p.note-src { font-size: 12.5px; color: var(--color-neutral-700); }
details.note sup { font-size: 12px; line-height: 0; }
/* Each citation marker is padded, and an invisible 44px square centred on it takes the tap. Next to another marker
   ('¹,²') the squares overlap and the later one wins, so each marker still keeps at least half of its square. */
/* Only 1px of padding, so the marker sits against the word before it and the full stop after it. */
details.note sup a { position: relative; padding: 0 1px; }
details.note sup a::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.note-srcs .when { white-space: nowrap; }
/* A note source's site, class and date sit on their own line under its title, and wrap only between the words of the
   site or the class: each '·' is held to the words either side of it, and the date to the word before it. */
.note-srcs .meta-line { display: block; }
.note-srcs .meta-line > span { white-space: nowrap; }
/* A merged row's notes (D-113): each under its own heading, set apart from the one before by a rule. */
details.note .note-part + .note-part { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-divider); }
details.note p.note-head { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--color-neutral-800); }
.note-srcs { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 2px; font-size: 13px; overflow-wrap: anywhere; }
.note-srcs .cls { color: var(--color-neutral-700); font-size: 12px; }
.research { display: grid; gap: 16px; max-width: 820px; }
.update { border: 1px solid var(--color-divider); padding: 18px 18px 16px; }
.update h3 { margin: 0 0 8px; font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 1.25; }
section.r-sec .lede.lead { font-style: italic; }
section.r-sec .lede.away { margin-top: -14px; font-size: 14px; color: var(--color-neutral-700); }
.carried { display: grid; gap: 22px; max-width: 760px; }
.carried-note + .carried-note { padding-top: 18px; border-top: 1px solid var(--color-divider); }
.carried-note h3 { margin: 0 0 4px; font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 1.25; text-wrap: balance; }
.carried-note .origin { margin: 0 0 6px; font-size: 13px; color: var(--color-neutral-700); }
.carried-note .note-body p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; max-width: 72ch; }
.carried-note .note-body p.note-src { font-size: 12.5px; color: var(--color-neutral-700); }
.carried-note sup { font-size: 12px; line-height: 0; }
/* The week's public perspective (W3-08): one piece, set like a carried note, with its own numbered sources. */
.perspective { max-width: 760px; overflow-wrap: anywhere; scroll-margin-top: calc(var(--sc-topbar-h, 0px) + 20px); }
.perspective h3 { margin: 0 0 4px; font-family: var(--font-heading); font-weight: 600; font-size: 22px; line-height: 1.25; text-wrap: balance; }
.perspective .meta { margin: 0 0 6px; font-size: 13px; color: var(--color-neutral-700); }
.perspective .note-body p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; max-width: 72ch; }
.perspective sup { font-size: 12px; line-height: 0; }
.perspective sup a { position: relative; padding: 0 1px; }
.perspective sup a::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.findings { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; overflow-wrap: anywhere; }
.findings .finding { display: block; margin: 0; font-size: 14.5px; line-height: 1.55; }
.findings .by { margin-top: 2px; font-size: 13px; color: var(--color-neutral-700); }
.update .meta { margin: 0 0 12px; font-size: 12.5px; color: var(--color-neutral-700); }
.concepts { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); border-top: 1px solid var(--color-divider); }
.concept { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 4px; border-bottom: 1px solid var(--color-divider); }
.concept b { font-weight: 600; }
.concept .v { font-size: 12.5px; color: var(--color-neutral-700); grid-column: 1 / -1; }
.dir { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.dir.rising { color: var(--color-accent-700); } .dir.falling { color: var(--color-neutral-700); }
.method { font-size: 14px; line-height: 1.55; color: var(--color-neutral-800); max-width: 820px; }
/* The index preview: one stacked block per theme, no table, so nothing scrolls sideways on a phone. */
.index { display: grid; gap: 18px; max-width: 820px; font-variant-numeric: tabular-nums; }
.index-theme { border-top: 1px solid var(--color-divider); padding-top: 14px; display: grid; gap: 6px; }
.index-theme h3 { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 1.25; }
.index-theme p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.index-theme .meta, .index-theme .trend, .index-theme .spark-cap, .index-theme .parts-cap { font-size: 13px; color: var(--color-neutral-700); }
.index-theme { scroll-margin-top: calc(var(--sc-topbar-h, 0px) + 20px); }
.index-parts { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2px 18px; font-size: 13px; color: var(--color-neutral-800); }
.index-method { margin-top: 18px; }
.empty { padding: 40px 0; color: var(--color-neutral-800); }
footer.r-foot { padding: 40px 0 60px; font-size: 13px; color: var(--color-neutral-700); }
@media (max-width: 720px) { table.topics .hide-s { display: none; } }
/* On a phone a note source's date has its own line under the site and class, in place of the '·' before it. */
@media (max-width: 560px) { .note-srcs { padding-left: 18px; } .note-srcs .meta-line .sep-when { display: none; } .note-srcs .meta-line .when { display: block; } }