/* AIDC Thermal Observatory pages (scripts/observatory/parts.mjs). Every rule is scoped to body.obs so the existing
   site styles keep their meaning. Tokens: /showcase/editorial-tokens.css. Rules: prototype/observatory/DESIGN.md. */
:root { --measure: 60ch;
  --page: min(1180px, calc(100% - 32px));
  --hot: var(--site-hot);
  --cool: var(--site-cool);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; }
.obs .head { padding-block: var(--s7) var(--s6); max-width: 920px; }
.obs .line-name { display: flex; align-items: center; gap: var(--s2); font: 500 12px/1.4 var(--site-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--site-muted); margin-bottom: var(--s3); }
html[lang=zh-CN] .obs .line-name { font: 500 14px/1.4 var(--site-sans); letter-spacing: .02em; }
.obs .question { font-size: 18px; color: var(--site-muted); max-width: var(--measure); }
.obs .conclusion { font: 500 clamp(26px, 3.05vw, 36px)/1.24 var(--site-display); letter-spacing: -.024em; margin-top: var(--s3); max-width: 42ch; }
html[lang=zh-CN] .obs:not(.home) .conclusion { font-size: clamp(24px, 2.75vw, 33px); line-height: 1.34; letter-spacing: -.01em; max-width: 27.5em; }
.obs .dek { font-size: 19px; line-height: 1.55; margin-top: var(--s3); max-width: 68ch; color: var(--site-muted); }
html[lang=zh-CN] .obs .dek { font-size: 18.5px; line-height: 1.65; max-width: 46em; }
.obs .nw { white-space: nowrap; }
@media (min-width: 701px) {
  .obs :is(.conclusion, .dek, .c-dek, .lines p.c) :is(.ph, .sent) { display: inline-block; max-width: 100%; }
}
/* Owner 2026-10-31: headings, questions and leads balance their lines; conclusions and deks break between phrases/sentences. */
.obs :is(h2, h3, h4, .question, .fig-title, .layer-title, .lead, summary) { text-wrap: balance; }
.obs :is(.card p, .legend-note) { text-wrap: pretty; }
.obs .asof { margin-top: var(--s4); font-size: 14px; color: var(--site-muted); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; }
.obs .tag { display: inline-block; font-size: 12.5px; line-height: 1.3; padding: 1px 7px; border: 1px solid var(--site-rule); border-radius: 3px; color: var(--site-muted); background: var(--site-surface); white-space: normal; max-width: 100%; text-align: left; }
.obs .tag.claim { border-style: dashed; }
.obs .tag.draft { color: var(--site-ink); border-color: var(--site-ink); font-weight: 600; }
.obs button.tag { cursor: help; }
.obs .strip { display: flex; gap: 2px; margin-top: var(--s5); font-size: 13px; max-width: 720px; }
.obs .strip > a, .obs .strip > span { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: 6px 8px; background: var(--site-soft); color: var(--site-muted); text-decoration: none; text-align: center; }
.obs .strip > .here { background: var(--site-ink); color: var(--site-paper); }
.obs .main { border-top: 2px solid var(--site-ink); padding-top: var(--s4); margin-bottom: var(--s7); }
.obs .fig-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); align-items: baseline; margin-bottom: var(--s4); }
.obs .fig-title { font-size: 17px; font-weight: 600; max-width: 60ch; }
.obs .views { display: flex; gap: 2px; font-size: 13px; }
.obs .views button { border: 1px solid var(--site-line); border-radius: 3px; background: var(--site-surface); padding: 3px 10px; }
.obs .views [aria-pressed=true] { background: var(--site-ink); color: var(--site-paper); border-color: var(--site-ink); }
.obs .view-pane { min-height: 40px; }
.obs :is(.view-pane, .mini).chart svg { width: 100%; max-width: var(--vw, none); height: auto; display: block; overflow: visible; }
.obs :is(.view-pane, .mini).chart text { font: 13px var(--site-sans); fill: var(--site-muted); }
.obs .r-wide svg { max-width: min(900px, var(--vw, 900px)); }
.obs :is(.view-pane, .mini).chart .lbl { fill: var(--site-ink); font-size: 13px; }
.obs :is(.view-pane, .mini).chart .axis { stroke: var(--site-rule); stroke-width: 1; }
.obs .fig-note { font-size: 13.5px; color: var(--site-muted); margin-top: var(--s3); max-width: var(--measure); }
.obs .sources ol { margin: 0; padding-left: 20px; font-size: 14px; }
.obs .sources li + li { margin-top: 6px; }
/* Side-by-side cards share row tracks (subgrid), so a label that wraps in one card moves the same part in every card.
   The rows of a grid have no gap of their own; each card adds its bottom margin. Check: scripts/qa/check_alignment.mjs. */
.obs .keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--s6); margin-block: var(--s6) var(--s8); }
.obs .key { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--s2); align-content: start; border-left: 1px solid var(--site-rule); padding: 2px 0 2px var(--s4); }
.obs .key .n { font: 300 clamp(32px, 3.4vw, 42px)/1.05 var(--site-sans); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.obs .key .n small { font-size: .5em; font-weight: 400; margin-left: 3px; color: var(--site-muted); letter-spacing: 0; }
.obs .key p { font-size: 15px; max-width: 32ch; }
.obs .keys.eyed > .key { grid-row: span 4; }
.obs .key .k-eye { font: 500 11px/1.4 var(--site-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--site-muted); }
html[lang=zh-CN] .obs .key .k-eye { font: 500 12px/1.4 var(--site-sans); letter-spacing: .02em; }
.obs .key .tags { display: flex; flex-wrap: wrap; align-content: start; gap: 6px; margin-top: var(--s1); }
@media (max-width: 760px) {
  .obs .keys { grid-template-columns: 1fr; }
  .obs .key { margin-bottom: var(--s5); }
}
.obs .layer-title { font: 500 24px/1.3 var(--site-display); letter-spacing: -.015em; margin-bottom: var(--s5); }
.obs .views-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); margin-bottom: var(--s8); }
/* Heading, text, chart or note, tags: a card without a chart leaves its third row empty. */
.obs .card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; margin-bottom: var(--s7); }
.obs .card > h3 { grid-row: 1; } .obs .card > p:not(.legend-note) { grid-row: 2; } .obs .card > :is(.mini, .legend-note) { grid-row: 3; } .obs .card > .tags { grid-row: 4; }
.obs .card h3 { font-size: 18px; line-height: 1.35; margin-bottom: var(--s2); }
.obs .card p { font-size: 15.5px; max-width: 52ch; }
.obs .card p .c-dek { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--site-muted); }
.obs .card .tags { margin-top: var(--s3); display: flex; flex-wrap: wrap; align-content: start; gap: 6px; }
.obs .card .mini { margin-top: var(--s4); }
.obs .card > .legend-note { margin-top: var(--s2); }
.obs .card .mini svg { max-width: min(440px, var(--vw, 440px)); }
.obs .tags a, .obs .asof a { font-size: 13px; }
@media (max-width: 760px) {
  .obs .views-grid { grid-template-columns: 1fr; }
}
.obs .related { background: var(--site-soft); border-radius: var(--site-radius); padding: var(--s5); margin-bottom: var(--s7); }
.obs .related h2 { font-size: 16px; margin-bottom: var(--s3); }
.obs .related p { max-width: 62ch; }
.obs .related ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }
.obs .related li { display: grid; grid-template-columns: 13em 1fr; gap: var(--s4); font-size: 15px; }
.obs .related .bridge { color: var(--site-muted); }
@media (max-width: 760px) {
  .obs .related li { grid-template-columns: 1fr; gap: 2px; }
}
.obs .db { border-top: 1px solid var(--site-rule); padding-block: var(--s4); margin-bottom: var(--s5); }
.obs .db summary { cursor: pointer; font-weight: 600; }
.obs .db summary span.count { font-weight: 400; color: var(--site-muted); margin-left: var(--s2); }
.obs .db .tools { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-block: var(--s4); font-size: 14px; }
.obs .db input { font: inherit; padding: 4px 8px; border: 1px solid var(--site-line); border-radius: 3px; background: var(--site-surface); min-width: 220px; }
.obs .scroll { overflow-x: auto; }
.obs :is(.view-pane, .db) table { border-collapse: collapse; font-size: 14px; width: 100%; }
.obs :is(.view-pane, .db, table.projects) th, .obs :is(.view-pane, .db, table.projects) td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--site-rule); vertical-align: top; }
.obs :is(.view-pane, .db) th { font-weight: 600; white-space: nowrap; }
.obs :is(.view-pane, .db) td.num, .obs :is(.view-pane, .db) th.num { text-align: right; font-variant-numeric: tabular-nums; }
.obs .dot { color: var(--site-muted); }
.obs .legend-note { font-size: 13px; color: var(--site-muted); max-width: var(--measure); }
/* Long notes fold to one line (owner 2026-10-16); the reader opens them with "More". */
.obs details.fold { max-width: var(--measure); margin-top: var(--s2); margin-bottom: var(--s5); }
.obs .stage-count { font-size: 15px; font-weight: 600; margin: 0 0 var(--s2); display: flex; flex-wrap: wrap; gap: var(--s1); }
/* Research stage: one hue, light to dark as the technology matures (owner 2026-10-29). */
.obs .tag.maturity { color: var(--site-ink); border-color: var(--site-data-3); }
.obs .tag.maturity.m1 { background: var(--site-data-1); }
.obs .tag.maturity.m2 { background: var(--site-data-2); }
.obs .tag.maturity.m3 { background: var(--site-data-3); }
.obs .tag.maturity.m4 { background: var(--site-data-4); border-color: var(--site-data-4); }
.obs details.fold > summary { display: flex; align-items: baseline; gap: var(--s2); cursor: pointer; list-style: none; }
.obs details.fold > summary::-webkit-details-marker { display: none; }
.obs details.fold .fold-text { flex: 1; min-width: 0; margin: 0; }
.obs details.fold:not([open]) .fold-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obs details.fold .fold-btn { flex: none; font-size: 13px; color: var(--site-ink); text-decoration: underline; text-underline-offset: 2px; }
.obs details.fold[open] .fold-btn .more, .obs details.fold:not([open]) .fold-btn .less { display: none; }
.obs details.fold > summary:focus-visible { outline: 2px solid var(--site-focus); outline-offset: 2px; }
.obs .compare { margin-bottom: var(--s8); }
.obs .compare .pick { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s4); }
.obs .compare select { font: inherit; font-size: 14px; padding: 4px; max-width: 100%; }
.obs .tl { list-style: none; margin: 0 0 var(--s8); padding: 0; border-left: 1px solid var(--site-rule); }
.obs .tl li { position: relative; padding: 0 0 var(--s4) var(--s5); font-size: 15px; max-width: 64ch; }
.obs .tl li::before { content: ""; position: absolute; left: -4px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--site-ink); }
.obs .tl li.future::before { background: var(--site-paper); border: 1px solid var(--site-ink); }
.obs .tl time { display: inline-block; min-width: 6.5em; color: var(--site-muted); font-variant-numeric: tabular-nums; }
.obs .tl-wide time { display: block; min-width: 0; font-size: 13.5px; }
.obs .chain { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 2px; margin-block: var(--s6) var(--s8); }
.obs .chain a { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: var(--s4); background: var(--site-surface); border-top: 2px solid var(--site-ink); text-decoration: none; }
.obs .chain a:hover { background: var(--site-selected); color: inherit; }
.obs .chain b { display: block; font: 500 19px/1.25 var(--site-display); letter-spacing: -.015em; }
.obs .chain .q { display: block; font-size: 14px; color: var(--site-muted); margin-top: var(--s2); }
.obs .chain .to { display: flex; align-items: center; gap: 6px; font: 500 11.5px/1.4 var(--site-mono); letter-spacing: .06em; text-transform: uppercase; margin-top: var(--s3); color: var(--site-muted); }
html[lang=zh-CN] .obs .chain .to { font: 13px/1.4 var(--site-sans); letter-spacing: 0; }
@media (max-width: 900px) {
  .obs .chain { grid-template-columns: 1fr; }
  .obs .chain a { margin-bottom: 2px; }
}
.obs .lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); margin-bottom: var(--s8); }
/* Line name, conclusion, tags, link: publications have no tags and leave that row empty. */
.obs .lines article { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; border-top: 1px solid var(--site-ink); padding-top: var(--s4); margin-bottom: var(--s6); }
.obs .lines article > h2 { grid-row: 1; } .obs .lines article > .c { grid-row: 2; } .obs .lines article > .tags { grid-row: 3; } .obs .lines article > .more-row { grid-row: 4; }
.obs .lines h2 { display: flex; align-items: center; gap: var(--s2); font: 500 12px/1.4 var(--site-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--site-muted); margin-bottom: var(--s2); }
html[lang=zh-CN] .obs .lines h2 { font: 500 14px/1.4 var(--site-sans); letter-spacing: .02em; }
.obs .lines p.c { font: 450 20.5px/1.35 var(--site-display); letter-spacing: -.015em; }
html[lang=zh-CN] .obs .lines p.c { font-size: 20px; line-height: 1.45; letter-spacing: 0; }
.obs .lines p.c .c-dek { display: block; margin-top: var(--s2); font: 400 15.5px/1.55 var(--site-sans); letter-spacing: 0; color: var(--site-muted); }
.obs .lines .more-row { margin-top: var(--s3); font-size: 15px; }
@media (max-width: 760px) {
  .obs .lines { grid-template-columns: 1fr; }
}
.obs .sys-controls { display: flex; flex-wrap: wrap; gap: var(--s5); margin-bottom: var(--s4); font-size: 14px; }
.obs .seg { display: flex; flex-wrap: wrap; gap: 2px; }
.obs .seg button { border: 1px solid var(--site-line); border-radius: 3px; background: var(--site-surface); padding: 4px 10px; font-size: 14px; }
.obs .seg [aria-pressed=true] { background: var(--site-ink); color: var(--site-paper); border-color: var(--site-ink); }
.obs .sys svg { width: 100%; height: auto; display: block; }
.obs .sys .node rect { fill: var(--site-surface); stroke: var(--site-rule); }
.obs .sys .node text { font: 13px var(--site-sans); fill: var(--site-ink); }
.obs .sys .node .sub { fill: var(--site-muted); font-size: 11.5px; }
.obs .sys .node.on rect { stroke: var(--site-ink); stroke-width: 2; }
.obs .sys .node.off rect { stroke: var(--site-rule); fill: var(--site-paper); }
.obs .sys .node.off text { fill: var(--site-muted); }
.obs .sys .layer-name { font: 600 13px var(--site-sans); fill: var(--site-muted); }
.obs .sys .marker circle { fill: var(--site-accent); stroke: var(--site-paper); stroke-width: 2; cursor: pointer; }
.obs .sys .marker text { fill: var(--site-surface); font: 600 11px var(--site-sans); pointer-events: none; }
.obs .sys .marker:focus-visible circle { stroke: var(--site-focus); stroke-width: 3; }
.obs .sys .count { font: 600 12px var(--site-sans); fill: var(--site-accent); }
.obs .sys .band rect { fill: var(--site-soft); }
.obs .sys .band text { font: 12px var(--site-sans); fill: var(--site-muted); }
.obs .sys-list { display: none; }
@media (max-width: 1000px) {
  .obs .sys .view-pane svg:not(.keep) { display: none; }
  .obs .sys-list { display: block; }
}
.obs .sys-list ol { padding-left: 20px; }
.obs .sys-list li { margin-bottom: var(--s3); }
.obs .sys-list .off { color: var(--site-muted); }
.obs .research-card { border: 1px solid var(--site-ink); border-radius: var(--site-radius); background: var(--site-surface); padding: var(--s5); margin-top: var(--s4); max-width: 760px; }
.obs .research-card h2 { font: 500 22px/1.3 var(--site-display); letter-spacing: -.015em; margin-bottom: var(--s3); }
.obs .research-card dl { display: grid; grid-template-columns: 11em 1fr; gap: var(--s2) var(--s4); font-size: 15px; margin: 0; }
.obs .research-card dt { color: var(--site-muted); }
.obs .research-card dd { margin: 0; }
@media (max-width: 760px) {
  .obs .research-card dl { grid-template-columns: 1fr; }
}
.obs .relay { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 2px; }
/* Name, indicator, value, period, sparkline, signal: a stage without a sparkline leaves that row empty. */
.obs .stage { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; align-content: start; background: var(--site-surface); padding: var(--s4) var(--s3); border-top: 2px solid var(--site-rule); margin-bottom: 2px; }
.obs .stage > b { grid-row: 1; } .obs .stage > .ind { grid-row: 2; } .obs .stage > .val { grid-row: 3; } .obs .stage > .val + .ind { grid-row: 4; } .obs .stage > svg { grid-row: 5; } .obs .stage > .state { grid-row: 6; align-self: start; }
.obs .stage.live { border-top-color: var(--site-ink); }
.obs .stage b { display: block; font-size: 14px; }
.obs .stage .ind { display: block; font-size: 13px; color: var(--site-muted); margin-top: 4px; }
.obs .stage .state { display: block; margin-top: var(--s3); font-size: 13px; font-weight: 600; }
.obs .stage .val { display: block; font: 500 20px/1.2 var(--site-sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-top: var(--s2); }
.obs .stage svg { width: 100%; height: 34px; margin-top: var(--s2); }
.obs .stage.empty .state { font-weight: 400; color: var(--site-muted); }
@media (max-width: 900px) {
  .obs .relay { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .obs .relay { grid-template-columns: 1fr; }
}
.obs .tip { position: fixed; z-index: 20; max-width: 300px; background: var(--site-ink); color: var(--site-paper); font-size: 13px; padding: 6px 9px; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .obs .sys .node, .obs .sys .node rect { transition: opacity .2s, stroke .2s; }
}
.obs .r-narrow { display: none; }
@media (max-width: 700px) {
  .obs .r-wide { display: none; }
  .obs .r-narrow { display: block; }
  .obs .strip { font-size: 11.5px; }
  .obs .strip a, .obs .strip span { padding: 6px 4px; }
}
.obs .compare-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--s4); }
.obs .cmp-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--s2); align-content: start; border-top: 1px solid var(--site-ink); padding-top: var(--s3); margin-bottom: var(--s4); }
.obs .cmp-card h3 { font-size: 16px; grid-row: 1; }
.obs .cmp-card dl { grid-row: 2; }
.obs .cmp-card .legend-note { grid-row: 3; margin: 0; }
.obs .cmp-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s3); font-size: 14px; margin: 0; }
.obs .cmp-card dt { color: var(--site-muted); }
.obs .cmp-card dd { margin: 0; }
.obs .sys .flow-line { fill: none; stroke: var(--hot); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; opacity: .9; }
.obs .sys .flow-dot { fill: var(--hot); stroke: var(--site-paper); stroke-width: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .obs .sys .flow-line { animation: heat 0.9s linear infinite; }
}
@keyframes heat { to { stroke-dashoffset: -11; } }
.obs .flow-text { font-size: 14px; color: var(--site-hot-text); margin-top: var(--s3); max-width: 80ch; }
.obs .sys .flow-line.or { stroke-dasharray: 1 6; stroke-width: 2; animation: none; }
.obs .sys .flow-line.trim { stroke-dasharray: 6 5; stroke-width: 2; stroke: var(--site-hot-text); animation: none; opacity: .75; }
/* Base inside observatory pages, on top of /showcase/styles.css. */
body.obs { font: 17px/1.55 var(--site-sans); }
html[lang=zh-CN] body.obs { line-height: 1.7; }
.obs main h1, .obs main h2, .obs main h3, .obs main p, .obs main figure { margin: 0; }
.obs main a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.obs main button { font: inherit; color: inherit; cursor: pointer; }
.obs .obs-foot { border-top: 1px solid var(--site-rule); margin-top: var(--s8); padding-block: var(--s5); font-size: 14px; color: var(--site-muted); display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; }
.obs .tip { position: fixed; z-index: 40; max-width: 300px; background: var(--site-ink); color: var(--site-paper); font-size: 13px; padding: 6px 9px; pointer-events: none; }
/* Release A additions: master timeline, country coverage, homepage. */
.obs .master-tl text { font: 12px var(--site-sans); fill: var(--site-muted); }
.obs .master-tl .lbl { fill: var(--site-ink); font-size: 12.5px; }
.obs .master-tl .band-label { font: 600 12.5px var(--site-sans); fill: var(--site-ink); }
.obs .master-tl .tl-done { fill: var(--site-ink); stroke: var(--site-paper); stroke-width: 1.5; }
.obs .master-tl .tl-plan line { stroke: var(--site-ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
.obs .master-tl .tl-plan circle { fill: var(--site-paper); stroke: var(--site-ink); stroke-width: 1.5; }
.obs .r-wide .master-tl { max-width: 1100px; }
.obs .region-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 2px; }
.obs .region-grid li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; background: var(--site-surface); border-top: 2px solid var(--site-rule); padding: var(--s3); margin-bottom: 2px; }
.obs .region-grid li.live { border-top-color: var(--site-ink); }
.obs .region-grid b { display: block; font-size: 15px; }
.obs .region-grid .state { display: block; margin-top: var(--s2); font-size: 13px; }
.obs .region-grid .ind { display: block; margin-top: 4px; font-size: 12.5px; color: var(--site-muted); }
@media (max-width: 900px) { .obs .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.obs .status-tags { margin-top: var(--s3); }
.obs .pending-judgement { background: var(--site-surface); border: 1px dashed var(--site-rule); }
.obs .line-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
/* A tag row in a shared grid row keeps its own height; the tags never stretch to a taller neighbour's. */
.obs :is(.tags, .line-tags) { align-content: flex-start; align-items: flex-start; }
.obs .publications .c { font-size: 18px; text-wrap: pretty; }
.obs .home-writing { padding-top: 0; margin-bottom: var(--s4); }
.obs .home-writing .writing-type { margin-top: 8px; }
.obs .writing-more { margin-bottom: var(--s7); font-size: 15px; }
.obs .home-about { padding-block: var(--s6); border-top: 1px solid var(--site-rule); }
.obs .home-about p { font-size: 17px; max-width: 62ch; }
.obs .home-about .legend-note { margin-top: var(--s3); font-size: 14px; }
.obs main a.research-row { text-decoration: none; }
.obs .home-writing .research-row h3 { font: 500 21px/1.3 var(--site-display); letter-spacing: -.015em; }
.obs .home-writing .research-row p { font-size: 15px; max-width: 62ch; }
.obs .home-writing .research-row time { font-size: 15px; color: var(--site-muted); }
/* The master timeline switches to its narrow drawing below 1000 px, so its text never shrinks under 11.5 px. */
@media (max-width: 1000px) { .obs .tl-r .r-wide { display: none; } .obs .tl-r .r-narrow { display: block; } }
.obs .tl-r .r-narrow .master-tl { max-width: min(560px, var(--vw, 560px)); }
/* Owner 2026-10-29: the homepage title is two fixed lines, and the question breaks only between phrases. */
.obs.home .head .conclusion { font-size: clamp(22px, 6.2vw, 42px); max-width: none; }
.obs.home .head .conclusion small { display: block; margin-top: var(--s1); font-size: .55em; font-weight: 400; color: var(--site-muted); letter-spacing: -.012em; }
.obs.home .head .asof { display: block; }
.obs.home .head .asof .ln { display: block; }
.obs.home .head .asof .ph { display: inline-block; }
.obs .master-tl .tl-done-span { fill: var(--site-ink); }
/* Release B: deep dives on the category template. */
.obs .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.obs .rule-note { margin: calc(-1 * var(--s3)) 0 var(--s5); }
.obs .db h3 { font-size: 16px; margin: var(--s5) 0 var(--s2); }
.obs .cmp-card dd .sr-only { position: absolute; }
.obs .tablewrap, .obs .scroll { position: relative; }
/* Phase 4: one small chart per relay stage. */
.obs .stage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 0 var(--s5); }
.obs .stage-panel { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; margin-bottom: var(--s6); }
.obs .stage-panel h3 { font-size: 15px; margin-bottom: 2px; }
.obs .stage-panel .legend-note { margin-bottom: var(--s2); }
.obs .stage-panel svg { max-width: 420px; }
.obs .stage-panel .mini.chart text, .obs .stage-panel .mini.chart .lbl { font-size: 14px; }
.obs .stage-panel .ln { fill: none; stroke: var(--site-data); stroke-width: 2; }
.obs .stage-panel .ln.proj { stroke-dasharray: 5 4; }
.obs .stage-panel .pt { fill: var(--site-data); stroke: var(--site-paper); stroke-width: 1.5; }
.obs .stage-panel .pt.hollow { fill: var(--site-paper); stroke: var(--site-data); stroke-width: 2; }
.obs .stage-panel .range { stroke: var(--site-data); stroke-width: 8; stroke-linecap: round; }
.obs .stage-panel .range.forecast { stroke: var(--site-data); stroke-width: 2; stroke-dasharray: 5 3; }
.obs .stage-panel .cash { fill: var(--site-rule); }
.obs .stage-panel .bar { fill: var(--site-data); }
.obs td.nowrap { white-space: nowrap; }
.obs .stage-panel .link { stroke: var(--site-line); stroke-width: 2; }
.obs .stage-panel .pt.prior { fill: var(--site-line); stroke: var(--site-paper); stroke-width: 1.5; }
/* Phase 4: compressor-free hours heatmap and country sections. */
.obs .heat-grid table { width: auto; min-width: 100%; }
.obs .heat-grid th[scope=row] { font-weight: 500; white-space: normal; min-width: 12em; }
.obs .heat-grid td.heat { text-align: right; padding: 6px 8px; border-bottom: 2px solid var(--site-paper); border-right: 2px solid var(--site-paper); font-variant-numeric: tabular-nums; color: var(--site-ink); }
.obs .heat-legend .swatch { display: inline-block; width: 14px; height: 10px; margin: 0 4px 0 8px; vertical-align: -1px; border: 1px solid var(--site-rule); }
.obs .thermal-meaning p { max-width: 62ch; }
.obs .thermal-meaning .tags { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: 6px; }
.obs .country-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); margin-bottom: var(--s7); }
@media (max-width: 760px) { .obs .country-fields { grid-template-columns: 1fr; } }
.obs .country-field h3 { font-size: 16px; margin-bottom: var(--s2); }
.obs .fact-list { margin: 0; padding-left: 18px; font-size: 15px; }
.obs .fact-list li { margin-bottom: var(--s3); max-width: 62ch; }
.obs table.projects { min-width: 640px; }
.obs .gaps { margin-bottom: var(--s6); }
/* Research cards on Frontier (phase 4): one expandable card per marker. */
.obs .rcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); margin-bottom: var(--s7); }
.obs .rcard { min-width: 0; border: 1px solid var(--site-rule); border-radius: 4px; padding: var(--s2) var(--s3); background: var(--site-paper); }
.obs .rcard summary { cursor: pointer; font-weight: 600; }
.obs .rcard .rnum { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--site-accent); color: var(--site-surface); font-size: 0.85em; }
.obs .rcard dl { display: grid; grid-template-columns: minmax(8em, 12em) minmax(0, 1fr); gap: var(--s1) var(--s3); margin: var(--s3) 0; }
.obs .rcard dt { color: var(--site-muted); }
.obs .rcard dd { margin: 0; }
.obs .rcard dd ul { margin: 0; padding-left: 1.2em; }
.obs .rcard h3 { font-size: 1rem; margin: var(--s3) 0 var(--s1); }
.obs .rcard blockquote { margin: var(--s1) 0; padding-left: var(--s2); border-left: 2px solid var(--site-rule); color: var(--site-muted); font-size: 0.92em; }
@media (max-width: 600px) { .obs .rcard dl { grid-template-columns: minmax(0, 1fr); } .obs .rcard dt { margin-top: var(--s2); } }
/* dc-thermal icons (scripts/site/marks.mjs): lines follow the text colour; only fluid paths take cold and hot. */
.obs .ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--site-ink); }
.obs .ic .c { stroke: var(--site-cool); }
.obs .ic .h { stroke: var(--site-hot); }
/* Browsers without subgrid (some older in-app browsers) give each card its own rows: the layout holds and only the
   cross-card alignment is lost. */
@supports not (grid-template-rows: subgrid) {
  .obs :is(.key, .card, .chain a, .lines article, .stage, .region-grid li, .stage-panel, .cmp-card) { grid-row: auto; }
}
/* Products: the roadmap edition and the heat-path anchors that the deep dives' layer strip links to. */
/* Roadmaps drawn from the evidence base. Capsules: done = soft fill, plan = dashed; chillers: magnetic = ink, other = outline, unstated = dotted. */
.obs .rm-intro { margin: calc(-1 * var(--s3)) 0 var(--s5); }
.obs .chart .roadmap-svg text { font: 12px var(--site-sans); fill: var(--site-muted); }
.obs .chart .roadmap-svg .lbl { fill: var(--site-ink); font-size: 13px; }
.obs .chart .roadmap-svg :is(.band-label, .rm-gutter-title) { font: 600 12.5px var(--site-sans); fill: var(--site-ink); }
.obs .roadmap-svg .rm-row { stroke: var(--site-rule); stroke-width: 1; }
.obs .rm-cap rect { fill: var(--site-surface); stroke: var(--site-ink); stroke-width: 1; }
.obs .chart .rm-cap text { fill: var(--site-ink); }
.obs .rm-cap.done rect { fill: var(--site-soft); }
.obs .rm-cap.plan rect { fill: var(--site-paper); stroke-dasharray: 4 3; }
.obs .rm-cap.magnetic rect { fill: var(--site-ink); } .obs .chart .rm-cap.magnetic text { fill: var(--site-paper); }
.obs .rm-cap.unstated rect { stroke: var(--site-muted); stroke-dasharray: 2 2; }
.obs .rm-cap:focus-visible rect { stroke: var(--site-focus); stroke-width: 2; outline: none; }
.obs .rm-checked { stroke: var(--site-muted); stroke-dasharray: 3 3; } .obs .chart .roadmap-svg .rm-checked-label { font-size: 12px; }
.obs .rm-legend .sw { display: inline-block; width: 22px; height: 12px; border-radius: var(--site-radius); border: 1px solid var(--site-ink); vertical-align: -1px; margin: 0 4px 0 10px; background: var(--site-surface); }
.obs .rm-legend .sw:first-child { margin-left: 0; } .obs .rm-legend .sw.magnetic { background: var(--site-ink); } .obs .rm-legend .sw.unstated { border: 1px dashed var(--site-muted); }
.obs .rm-list { margin: 0; padding-left: 0; list-style: none; font-size: 14.5px; }
.obs .rm-list > li { margin-bottom: var(--s3); } .obs .rm-list ul { list-style: none; padding: 0; margin: var(--s1) 0 0; }
.obs .rm-list li li, .obs .rm-list.flat li { padding: 2px 0; } .obs .rm-list time { display: inline-block; min-width: 6.5em; color: var(--site-muted); font-variant-numeric: tabular-nums; }
.obs .rm-list .plan, .obs .rm-list .unstated { color: var(--site-muted); } .obs .rm-list .magnetic { font-weight: 600; } .obs .rm-list small { color: var(--site-muted); font-weight: 400; }
.obs .r-narrow h4 { font-size: 15px; margin: var(--s4) 0 var(--s1); }
.obs .rm-editions { margin-bottom: var(--s8); }
.obs [id^="layer-"] { scroll-margin-top: var(--s5); }
.obs .card[id^="layer-"]:target, .obs .main[id^="layer-"]:target { outline: 2px solid var(--site-focus); outline-offset: 8px; }
/* Homepage: the five steps are numbered, and each line card names the steps it answers (owner 2026-10-15). */
.obs .chain .n { display: block; font: 500 12px/1.4 var(--site-mono); color: var(--site-muted); margin-bottom: var(--s2); }
.obs .chain .to .ic { width: 16px; height: 16px; }
.obs .lines h2 .steps { margin-left: auto; font: 500 11.5px/1.4 var(--site-mono); letter-spacing: .06em; padding: 1px 7px; border: 1px solid var(--site-rule); border-radius: var(--site-radius); background: var(--site-surface); }
html[lang=zh-CN] .obs .lines h2 .steps { font: 12.5px/1.4 var(--site-sans); letter-spacing: 0; }
.obs .layer-title.with-icon { display: flex; align-items: center; gap: var(--s2); }
.obs .layer-title.with-icon .ic { width: 24px; height: 24px; }
.obs .rm-legend { max-width: none; margin-block: var(--s3) var(--s2); }
.obs .pw-pt :is(circle, rect, path) { fill: var(--site-ink); stroke: var(--site-paper); stroke-width: 2; }
.obs .pw-pt.plan :is(circle, rect, path) { fill: var(--site-paper); stroke: var(--site-ink); }
.obs .pw-pt:focus-visible :is(circle, rect, path) { stroke: var(--site-focus); outline: none; }
.obs .chart svg.pw-key { display: inline; width: 14px; height: 14px; vertical-align: -2px; margin: 0 4px 0 8px; }
.obs .pw-lead { stroke: var(--site-muted); stroke-width: 1; }
/* Countries map (plan 2026-10-29; ten callouts and 5 × 2 cards, plan 2026-10-30): Pacific-centred map at full width
   with numbered markers, one aligned card per region below.
   Covered regions take an ink mix, uncovered ones are outlined; blue and orange stay reserved for fluid. */
.obs .cm-frame { position: relative; }
.obs .chart .cmap svg { display: block; width: 100%; max-width: none; height: auto; overflow: hidden; }
.obs .cm-sea { fill: var(--site-surface); }
.obs .cm-land { fill: var(--site-rule); }
.obs .cm-rg, .obs .cm-dot { stroke-width: .6; vector-effect: non-scaling-stroke; transition: fill .15s; }
.obs .cm-rg.live, .obs .cm-dot.live { fill: color-mix(in srgb, var(--site-ink) 32%, var(--site-surface)); stroke: var(--site-surface); }
.obs .cm-rg.todo, .obs .cm-dot.todo { fill: var(--site-rule); stroke: var(--site-ink); }
.obs .cm-rg.live.hl, .obs .cm-dot.live.hl { fill: color-mix(in srgb, var(--site-ink) 60%, var(--site-surface)); }
.obs .cm-rg.todo.hl, .obs .cm-dot.todo.hl { fill: color-mix(in srgb, var(--site-ink) 14%, var(--site-surface)); stroke-width: 1.5; }
.obs .cm-lead { stroke: var(--site-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.obs .cm-pin { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 600 12px/1 var(--site-sans); font-variant-numeric: tabular-nums; text-decoration: none; box-sizing: border-box; }
.obs .cm-pin.live { background: var(--site-ink); color: var(--site-paper); border: 2px solid var(--site-surface); }
.obs .cm-pin.todo { background: var(--site-surface); color: var(--site-ink); border: 1.5px solid var(--site-ink); }
.obs .cm-pin.hl, .obs .cm-pin:focus-visible { outline: 2px solid var(--site-focus); outline-offset: 2px; }
.obs .cm-call { position: absolute; margin: 0; max-width: 15em; padding: 3px 7px; font-size: 12px; line-height: 1.35; color: var(--site-ink); background: var(--site-surface); border: 1px solid var(--site-rule); border-radius: var(--site-radius); transform: translateY(-50%); }
.obs .cm-call.hl { border-color: var(--site-ink); }
.obs .cm-call-lead { stroke: var(--site-line); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.obs .cm-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 2px; margin-top: var(--s5); }
.obs .cmap > .cm-gt { display: none; }
.obs .cm-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; background: var(--site-surface); border-top: 2px solid var(--site-rule); padding: var(--s3); margin-bottom: 2px; color: var(--site-ink); text-decoration: none; scroll-margin-top: var(--s6); }
.obs .cm-card.live { border-top-color: var(--site-ink); }
.obs .cm-card.hl, .obs .cm-card:target { background: var(--site-selected); }
.obs a.cm-card:focus-visible { outline: 2px solid var(--site-focus); outline-offset: -2px; }
.obs .cm-card > p { margin: 0; font-size: 13.5px; line-height: 1.4; }
.obs .cm-card > p + p { margin-top: var(--s3); }
.obs .cm-h b { display: inline; font-size: 15px; }
.obs .cm-n { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; border: 1.5px solid var(--site-ink); font: 600 11.5px/1 var(--site-sans); vertical-align: 1px; box-sizing: border-box; }
.obs .cm-card.live .cm-n { background: var(--site-ink); color: var(--site-paper); }
.obs .cm-st { display: block; margin-top: var(--s1); font-size: 12.5px; color: var(--site-muted); }
.obs .cm-k { display: block; font: 500 11px/1.4 var(--site-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--site-muted); }
html[lang=zh-CN] .obs .cm-k { font: 500 12px/1.4 var(--site-sans); letter-spacing: .02em; }
.obs .cm-v { font-size: 15px; font-weight: 600; }
.obs .cm-t2 { display: block; color: var(--site-muted); }
.obs .cm-card .tag { margin-top: var(--s1); }
.obs .cm-rec { font-size: 12.5px; color: var(--site-muted); }
.obs .fig-fold { border-top: 2px solid var(--site-ink); padding-top: var(--s4); margin-bottom: var(--s7); }
.obs .fig-fold > summary { cursor: pointer; font-size: 17px; font-weight: 600; }
.obs .fig-fold > summary:focus-visible { outline: 2px solid var(--site-focus); outline-offset: 2px; }
.obs .fig-fold > .main { border-top: 0; margin: var(--s4) 0 0; }
/* Below 1000 px the ten callouts would crowd the map: markers only, cards in two columns. */
@media (max-width: 999.98px) {
  .obs .cm-call, .obs .cm-call-lead { display: none; }
  .obs .cm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones: map, then the regions stacked by group (headings and cards ordered by --o). */
@media (max-width: 700px) {
  .obs .cm-pin { width: 18px; height: 18px; font-size: 11.5px; }
  .obs .cmap { display: flex; flex-direction: column; }
  .obs .cmap .cm-cards { display: contents; }
  .obs .cmap :is(.cm-gt, .cm-card) { order: var(--o); }
  .obs .cmap > .cm-gt { display: block; font-size: 15px; margin: var(--s4) 0 var(--s2); }
  .obs .cm-card { display: block; }
}
@supports not (grid-template-rows: subgrid) { .obs .cm-card { grid-row: auto; } }
/* Country pages carry four key numbers (owner 2026-10-30: PUE, WUE, build-out, biggest constraint): one row on wide
   screens, 2 × 2 below 1100 px, one column on phones. */
.obs .keys:has(> .key:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--s5); }
@media (max-width: 1100px) {
  .obs .keys:has(> .key:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); }
  .obs .keys:has(> .key:nth-child(4)) > .key { margin-bottom: var(--s6); }
}
@media (max-width: 760px) { .obs .keys:has(> .key:nth-child(4)) { grid-template-columns: 1fr; } }
/* Research-card figures (scripts/observatory/figures/; plan 2026-10-29). Static SVG, one text size in the drawing
   (15 viewBox units: at least 11.5 px on a 320 px phone). Parts draw in currentColor; blue and orange only on cold and
   hot fluid and on heat. Two figures sit side by side and share row tracks (subgrid), stacking on phones. */
.obs .figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 400px)); gap: 0 var(--s6); }
.obs .fig { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--s2); align-content: start; margin: 0 0 var(--s4); min-width: 0; }
.obs .fig-cap { font-size: 14.5px; font-weight: 600; }
.obs .fig-svg { width: 100%; max-width: 360px; height: auto; display: block; overflow: visible; color: var(--site-ink); }
.obs .fig-svg text { font: 15px var(--site-sans); font-variant-numeric: tabular-nums; fill: var(--site-ink); }
.obs .fig-svg .pin text { font-family: var(--site-mono); }
.obs .fig-svg text.muted { fill: var(--site-muted); }
.obs .fig-svg .part { stroke: currentColor; stroke-width: 1.5; }
.obs .fig-svg .axis line { stroke: var(--site-line); stroke-width: 1; }
.obs .fig-svg .zone { stroke: var(--site-muted); }
.obs .fig-svg .hatch { stroke: var(--site-muted); stroke-width: .8; }
.obs .fig-svg .hop { stroke: var(--site-paper); }
.obs .fig-svg .pin circle { fill: var(--site-ink); } .obs .fig-svg .pin line { stroke: var(--site-ink); stroke-width: 1; } .obs .fig-svg .pin text { fill: var(--site-surface); }
.obs .fig-svg .fx-cool { color: var(--site-cool); } .obs .fig-svg .fx-hot { color: var(--site-hot); } .obs .fig-svg .fx-data { color: var(--site-data); }
.obs .fig-svg .fx-data3 { color: var(--site-data-3); } .obs .fig-svg .fx-ink { color: var(--site-ink); } .obs .fig-svg .fx-muted { color: var(--site-muted); }
.obs .fig-svg .sig { fill: none; stroke: var(--site-ink); stroke-width: 1.2; stroke-dasharray: 4 3; }
.obs .fig-svg .m-data1 { fill: var(--site-data-1); } .obs .fig-svg .m-data2 { fill: var(--site-data-2); } .obs .fig-svg .m-data3 { fill: var(--site-data-3); } .obs .fig-svg .m-data4 { fill: var(--site-data-4); } .obs .fig-svg .m-data5 { fill: var(--site-data-5); }
.obs .fig-svg .st-cool { stop-color: var(--site-cool); } .obs .fig-svg .st-hot { stop-color: var(--site-hot); }
.obs .fig-svg .m-surface, .obs .fig-svg .m-si { fill: var(--site-surface); } .obs .fig-svg .m-soft, .obs .fig-svg .m-metal { fill: var(--site-soft); }
.obs .fig-svg .m-line, .obs .fig-svg .m-tim { fill: var(--site-line); } .obs .fig-svg .m-sub { fill: var(--site-rule); }