/* 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; }
/* Reading redesign (owner 2026-11-05). First layer, the answer: one question line, one statement of up to three lines at
   1440 px, its dek, one line of conditions. */
.obs .head { padding-block: var(--s7) var(--s5); }
.obs .head + :is(.main, .sys, .atlas-wrap), .obs .head + .sys .main { margin-top: var(--s4); }
.obs .line-name { display: flex; align-items: center; gap: var(--s2); font-size: var(--site-t-note); line-height: 1.4; color: var(--site-muted); margin-bottom: var(--s2); }
.obs .question { font-size: var(--site-t-lead); line-height: 1.3; color: var(--site-muted); }
.obs .conclusion { font: 500 var(--site-t-statement)/1.05 var(--site-display); letter-spacing: -.033em; margin-top: var(--s3); max-width: none; text-wrap: balance; }
html[lang=zh-CN] .obs:not(.home) .conclusion { line-height: 1.16; letter-spacing: -.012em; }
.obs .dek { font-size: var(--site-t-lead); line-height: 1.4; margin-top: var(--s4); max-width: 44em; color: var(--site-ink); }
html[lang=zh-CN] .obs .dek { line-height: 1.6; }
.obs .head-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--s5); align-items: start; }
.obs .with-signature:not(.overlay) .conclusion { font-size: var(--site-t-statement-side); }
.obs .head-signature { min-width: 0; }
@media (max-width: 1000px) { .obs .head-grid { grid-template-columns: minmax(0, 1fr); } }
.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: var(--site-t-note); line-height: 1.5; color: var(--site-muted); max-width: 78ch; }
/* Conditions are sentences, not boxes (owner 2026-11-05): the words stay next to the number, the outlines go. */
.obs .tag { display: inline; font-size: var(--site-t-note); line-height: 1.5; padding: 0; border: 0; color: var(--site-muted); background: none; text-align: left; }
.obs .asof .tag::before { content: " "; }
.obs .asof .tag + .tag::before { content: ". "; }
.obs button.tag { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.obs .strip { display: flex; gap: 2px; margin-top: var(--s5); font-size: var(--site-t-note); 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); }
/* Second layer, the argument: one claim, one wide drawing, the sentences that say when it holds, one drawer. */
.obs .main { margin-block: var(--s8) var(--s8); scroll-margin-top: var(--s5); }
.obs .fig-title { display: block; font: 500 var(--site-t-claim)/1.14 var(--site-display); letter-spacing: -.022em; max-width: 30em; margin-bottom: var(--s5); text-wrap: balance; }
html[lang=zh-CN] .obs .fig-title { line-height: 1.32; letter-spacing: 0; }
.obs .fig-eyebrow { font-size: var(--site-t-note); color: var(--site-muted); margin-bottom: var(--s2); }
.obs .fig-body { min-width: 0; }
.obs .main.rail .fig-body { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: var(--s6); align-items: end; }
@media (max-width: 1000px) { .obs .main.rail .fig-body { grid-template-columns: minmax(0, 1fr); } }
.obs .figfoot { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s6); margin-top: var(--s4); }
.obs .main.rail .figfoot { flex-direction: column; gap: var(--s3); margin: 0 0 var(--s5); }
.obs .figfoot .fig-note { margin: 0; }
@media (max-width: 760px) { .obs .figfoot { flex-direction: column; gap: var(--s3); } }
.obs .datalink { flex: none; background: none; border: 0; padding: 0; font: inherit; font-size: var(--site-t-note); line-height: 1.5; color: var(--site-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; white-space: nowrap; }
.obs .datalink:hover { text-decoration-thickness: 2px; }
.obs .fig-note, .obs .legend-note { font-size: var(--site-t-note); line-height: 1.5; color: var(--site-muted); max-width: 74ch; }
/* Drawings keep their text size on screen whatever the scale: observatory.js sets --u (viewBox units per pixel). */
.obs .chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.obs .fig-plot svg, .obs .fig-plot .r-wide svg { max-width: min(100%, calc(var(--vw, 640px) * 2.1)); }
.obs .fig-plot svg.keep-size { max-width: var(--vw); }
.obs .chart text { font: var(--text-size, calc(var(--site-t-tick) * var(--u, 1))) var(--site-sans); fill: var(--site-muted); }
.obs .chart .lbl { font-size: calc(var(--site-t-label) * var(--u, 1)); fill: var(--site-ink); }
.obs .chart .axis { stroke: var(--site-rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.obs .mini.chart svg { max-width: min(100%, var(--vw, 440px)); }
/* The single drawer of a figure. */
.obs dialog.drawer { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(860px, 94vw); max-width: none; border: 0; border-left: 1px solid var(--site-rule); padding: var(--s6) var(--s6) var(--s8); background: var(--site-surface); color: var(--site-ink); overflow: auto; }
.obs dialog.drawer::backdrop { background: color-mix(in srgb, var(--site-ink) 28%, transparent); }
.obs .drawer h3 { margin: 0 72px var(--s4) 0; font: 500 var(--site-t-lead)/1.3 var(--site-display); }
.obs .drawer h4 { margin: var(--s6) 0 var(--s2); font-size: var(--site-t-note); font-weight: 500; color: var(--site-muted); }
.obs .drawer-x { position: absolute; right: var(--s5); top: var(--s5); background: none; border: 1px solid var(--site-rule); border-radius: var(--site-radius); padding: 4px 10px; font: inherit; font-size: var(--site-t-note); color: var(--site-ink); cursor: pointer; }
.obs .drawer-sources { margin: 0; padding-left: 20px; font-size: var(--site-t-note); line-height: 1.5; }
.obs .drawer-sources li + li { margin-top: 6px; }
.obs .drawer-note { font-size: var(--site-t-note); line-height: 1.6; max-width: none; }
/* Third layer: the closing section of tools and records. */
.obs .evidence { margin-top: var(--s8); padding-top: var(--s5); border-top: 2px solid var(--site-ink); }
.obs .evidence > h2 { font: 500 var(--site-t-claim)/1.14 var(--site-display); letter-spacing: -.02em; margin-bottom: var(--s5); }
.obs .evidence > .legend-note { margin-top: calc(-1 * var(--s3)); margin-bottom: var(--s5); }
.obs .evidence details { border-top: 1px solid var(--site-rule); margin: 0; padding: 0; }
.obs .evidence details:last-of-type { border-bottom: 1px solid var(--site-rule); }
.obs .evidence details > summary { display: flex; justify-content: space-between; gap: var(--s6); align-items: baseline; padding-block: var(--s4); cursor: pointer; font-weight: 500; list-style: none; text-wrap: pretty; }
.obs .evidence details > summary::-webkit-details-marker { display: none; }
.obs .evidence details > summary:hover { color: var(--site-muted); }
.obs .evidence details > summary .count { flex: none; font-weight: 400; font-size: var(--site-t-note); color: var(--site-muted); margin: 0; }
.obs .evidence .ev-body { padding-block: 0 var(--s6); }
.obs .evidence .ev-body > :first-child { margin-top: 0; }
/* 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; padding: 0; }
.obs .key .n { font: 300 var(--site-t-reading)/1 var(--site-sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.obs .key .n small { font-size: var(--site-t-claim); font-weight: 400; margin-left: 3px; color: var(--site-muted); letter-spacing: 0; }
.obs .key p { font-size: var(--site-t-body); line-height: 1.45; max-width: 34ch; }
.obs .keys.eyed > .key { grid-row: span 4; }
.obs .key .k-eye { font: 500 var(--site-t-note)/1.4 var(--site-sans); color: var(--site-muted); }
html[lang=zh-CN] .obs .key .k-eye { font: 500 var(--site-t-note)/1.4 var(--site-sans); letter-spacing: .02em; }
.obs .key .tags { display: flex; flex-wrap: wrap; align-content: start; gap: 2px var(--s3); margin-top: var(--s1); color: var(--site-muted); }
.obs .key .tags a { font-size: var(--site-t-note); }
@media (max-width: 760px) {
  .obs .keys { grid-template-columns: 1fr; }
  .obs .key { margin-bottom: var(--s5); }
}
.obs .layer-title { font: 500 var(--site-t-lead)/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: var(--site-t-lead); font-weight: 500; line-height: 1.25; margin-bottom: var(--s2); }
.obs .card p { font-size: var(--site-t-body); line-height: 1.45; max-width: 44ch; }
.obs .card p .c-dek { display: block; margin-top: 6px; font-size: var(--site-t-note); line-height: 1.5; color: var(--site-muted); }
.obs .card p.legend-note { font-size: var(--site-t-note); line-height: 1.5; }
.obs .card .tags { margin-top: var(--s3); display: flex; flex-wrap: wrap; align-content: start; gap: 2px var(--s3); color: var(--site-muted); }
.obs .card .tags a { font-size: var(--site-t-note); }
.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: var(--site-t-note); }
@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-block: var(--s8) var(--s7); }
.obs .related h2 { font-size: var(--site-t-note); 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: var(--site-t-note); }
.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: var(--site-t-note); }
.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, .ev-body, .db) table { border-collapse: collapse; font-size: var(--site-t-note); width: 100%; }
.obs :is(.view-pane, .ev-body, .db, table.projects) th, .obs :is(.view-pane, .ev-body, .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, .ev-body, .db) th { font-weight: 600; white-space: nowrap; }
.obs :is(.view-pane, .ev-body, .db) td.num, .obs :is(.view-pane, .ev-body, .db) th.num { text-align: right; font-variant-numeric: tabular-nums; }
.obs .dot { color: var(--site-muted); }
.obs .legend-note { font-size: var(--site-t-note); color: var(--site-muted); max-width: var(--measure); }
.obs .stage-count { font-size: var(--site-t-note); 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 .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: var(--site-t-note); 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: var(--site-t-note); 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: var(--site-t-note); }
.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 var(--site-t-note)/1.4 var(--site-sans); color: var(--site-muted); margin-bottom: var(--s2); }
html[lang=zh-CN] .obs .lines h2 { font: 500 var(--site-t-note)/1.4 var(--site-sans); letter-spacing: .02em; }
.obs .lines p.c { font: 500 var(--site-t-lead)/1.3 var(--site-display); letter-spacing: -.012em; }
html[lang=zh-CN] .obs .lines p.c { font-size: var(--site-t-lead); line-height: 1.45; letter-spacing: 0; }
.obs .lines p.c .c-dek { display: block; margin-top: var(--s2); font: 400 var(--site-t-body)/1.45 var(--site-sans); letter-spacing: 0; color: var(--site-muted); }
.obs .lines .more-row { margin-top: var(--s3); font-size: var(--site-t-note); }
@media (max-width: 760px) {
  .obs .lines { grid-template-columns: 1fr; }
}
.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: var(--site-t-note); }
.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-list { display: none; }
@media (max-width: 1000px) {
  .obs .sys .fig-plot svg { display: none; }
  .obs .sys-list { display: block; }
  .obs .sys-temp { display: none; }
}
.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 var(--site-t-lead)/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: var(--site-t-note); 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(5, 1fr); gap: 0 2px; }   /* five stages (owner 2026-11-02) */
/* 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: var(--site-t-note); }
.obs .stage .ind { display: block; font-size: var(--site-t-note); color: var(--site-muted); margin-top: 4px; }
.obs .stage .state { display: block; margin-top: var(--s3); font-size: var(--site-t-note); font-weight: 600; }
.obs .stage .val { display: block; font: 500 var(--site-t-lead)/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: var(--site-t-note); padding: 6px 9px; pointer-events: none; }
.obs .r-narrow { display: none; }
@media (max-width: 700px) {
  .obs .r-wide { display: none; }
  .obs .r-narrow { display: block; }
  .obs .strip { font-size: var(--site-t-note); }
  .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: var(--site-t-note); 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: var(--site-t-note); margin: 0; }
.obs .cmp-card dt { color: var(--site-muted); }
.obs .cmp-card dd { margin: 0; }
/* Owner 2026-11-02: the default heat path (T3 + F3) fits on one line at 1440 px; longer routes wrap. */
.obs .flow-text { font-size: var(--site-t-note); color: var(--site-muted); margin-top: var(--s3); }
/* Base inside observatory pages, on top of /showcase/styles.css. */
body.obs { font: var(--site-t-body)/1.55 var(--site-sans); }
html[lang=zh-CN] body.obs { line-height: 1.75; }
.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: var(--site-t-note); 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: var(--site-t-note); 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 .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: var(--site-t-note); }
.obs .region-grid .state { display: block; margin-top: var(--s2); font-size: var(--site-t-note); }
.obs .region-grid .ind { display: block; margin-top: 4px; font-size: var(--site-t-note); 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: var(--site-t-body); 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: var(--site-t-note); }
.obs .home-about { padding-block: var(--s6); border-top: 1px solid var(--site-rule); }
.obs .home-about p { font-size: var(--site-t-body); max-width: 62ch; }
.obs .home-about .legend-note { margin-top: var(--s3); font-size: var(--site-t-note); }
.obs main a.research-row { text-decoration: none; }
.obs .home-writing .research-row h3 { font: 500 var(--site-t-lead)/1.3 var(--site-display); letter-spacing: -.015em; }
.obs .home-writing .research-row p { font-size: var(--site-t-note); max-width: 62ch; }
.obs .home-writing .research-row time { font-size: var(--site-t-note); 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: var(--site-t-statement); max-width: none; }
.obs.home .head .conclusion small { display: block; margin-top: var(--s2); font-size: var(--site-t-claim); font-weight: 400; color: var(--site-muted); letter-spacing: -.02em; line-height: 1.2; }
.obs.home .head .asof { display: block; font-size: var(--site-t-lead); line-height: 1.4; color: var(--site-ink); max-width: 44em; margin-top: var(--s4); }
.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: var(--site-t-note); 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: var(--site-t-note); 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); }
/* Owner 2026-11-02: compressor-free hours as one small map per region. */
.obs .hm-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s2); font-size: var(--site-t-note); }
.obs .hm-k { color: var(--site-muted); }
.obs .hm-views { display: flex; gap: 2px; }
.obs .hm-views button { border: 1px solid var(--site-line); border-radius: 3px; background: var(--site-surface); padding: 3px 10px; }
.obs .hm-views [aria-pressed=true] { background: var(--site-ink); color: var(--site-paper); border-color: var(--site-ink); }
.obs .hm-views + .hm-k { margin-left: var(--s4); }
.obs .hm-legend, .obs .hm-shown { max-width: none; }
.obs .hm-legend .swatch { display: inline-block; width: 14px; height: 10px; margin: 0 4px 0 8px; vertical-align: -1px; border: 1px solid var(--site-rule); }
.obs .hm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5) var(--s4); margin-top: var(--s4); }
@media (max-width: 1100px) { .obs .hm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .obs .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.obs .hm-panel { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--s2); align-content: start; border-top: 1px solid var(--site-rule); padding-top: var(--s2); }
.obs .hm-panel h3 { font-size: var(--site-t-note); font-weight: 600; }
.obs .hm-panel h3 a { color: inherit; }
.obs .chart .hm-panel svg { width: 100%; height: auto; overflow: hidden; }
.obs .hm-land { fill: var(--site-soft); }
.obs .hm-region { fill: var(--site-rule); stroke: var(--site-line); stroke-width: .6; }
.obs .hm-dot circle { stroke: var(--site-ink); stroke-width: 1; }
.obs .chart .hm-dot text { font: 600 9px var(--site-sans); fill: var(--site-ink); stroke: var(--site-surface); stroke-width: 2.5px; paint-order: stroke; }
.obs .hm-list { list-style: none; padding: 0; margin: 0; font-size: var(--site-t-note); counter-reset: hm; }
.obs .hm-list li { display: grid; grid-template-columns: auto auto 1fr; column-gap: 6px; align-items: baseline; counter-increment: hm; }
.obs .hm-list li::before { content: counter(hm); font-weight: 600; font-size: var(--site-t-note); color: var(--site-muted); }
.obs .hm-sw { width: 10px; height: 10px; border: 1px solid var(--site-line); align-self: center; }
.obs .hm-city { grid-column: 3; }
.obs .hm-v { grid-column: 3; font-variant-numeric: tabular-nums; color: var(--site-muted); }
.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: var(--site-t-note); margin-bottom: var(--s2); }
.obs .fact-list { margin: 0; padding-left: 18px; font-size: var(--site-t-note); }
.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: var(--site-t-note); }
.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: var(--site-t-body); 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: var(--site-t-note); }
@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(.plan, .key, .card, .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: DC chiller = ink, other lines = outline. */
.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.dc rect { fill: var(--site-ink); } .obs .chart .rm-cap.dc text { fill: var(--site-paper); }
.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: var(--site-t-note); }
.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.dc { background: var(--site-ink); } .obs .rm-legend .sw.plan { border-style: dashed; background: var(--site-paper); }
.obs .rm-list { margin: 0; padding-left: 0; list-style: none; font-size: var(--site-t-note); }
.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 { color: var(--site-muted); } .obs .rm-list .dc { font-weight: 600; } .obs .rm-list small { color: var(--site-muted); font-weight: 400; }
.obs .r-narrow h4 { font-size: var(--site-t-note); 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 .lines h2 .steps { margin-left: auto; font: 500 var(--site-t-note)/1.4 var(--site-sans); 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: var(--site-t-note)/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 (owner 2026-11-06): one whole map at one scale, with names and PUE written on it and the key in the empty Pacific.
   Regions where power is the biggest constraint take an ink mix, the exceptions are outlined; blue and orange stay reserved for fluid. */
.obs .mapbox { position: relative; }
.obs .mapbox svg { display: block; width: 100%; height: auto;
  mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 96%, transparent); mask-composite: intersect; }
.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-paper)); stroke: var(--site-paper); }
.obs .cm-rg.other, .obs .cm-dot.other { fill: color-mix(in srgb, var(--site-ink) 14%, var(--site-paper)); stroke: var(--site-paper); }
.obs .cm-rg.hl, .obs .cm-dot.hl { fill: var(--site-data); }
.obs .cm-lead { stroke: var(--site-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.obs .ml { position: absolute; display: block; text-decoration: none; line-height: 1.12; white-space: nowrap; color: var(--site-ink); }
.obs .ml b { display: block; font-weight: 400; font-size: var(--site-t-note); }
.obs .ml > span { display: block; font-size: var(--site-t-claim); font-weight: 400; letter-spacing: -.03em; margin-top: 1px; }
.obs .ml > span.none { font-size: var(--site-t-note); letter-spacing: 0; color: var(--site-muted); margin-top: 2px; }
.obs .ml.land > span.none { color: var(--site-ink); }
.obs .ml.wrap > span { white-space: normal; width: 7.2em; }
.obs .ml:hover b, .obs .ml:focus-visible b { text-decoration: underline; }
.obs .map-key { position: absolute; left: 56%; top: 57%; width: 28%; font-size: var(--site-t-note); line-height: 1.4; color: var(--site-muted); }
.obs .map-key p { margin: 0 0 var(--s2); }
.obs .map-key .k { display: inline-block; width: 13px; height: 13px; margin-right: var(--s2); vertical-align: -1px; }
.obs .map-key .k.live { background: color-mix(in srgb, var(--site-ink) 32%, var(--site-paper)); }
.obs .map-key .k.other { background: color-mix(in srgb, var(--site-ink) 14%, var(--site-paper)); }
.obs .figfoot-end { justify-content: flex-end; }
@media (max-width: 760px) {
  .obs .cm-lead { display: none; }
  .obs .ml { position: static; }
  .obs .mapbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .obs .mapbox svg, .obs .map-key { grid-column: 1 / -1; }
  .obs .map-key { position: static; width: auto; }
}
.obs .glance { width: 100%; border-collapse: collapse; }
.obs .glance th { font-size: var(--site-t-note); font-weight: 400; color: var(--site-muted); text-align: left; padding: 0 var(--s5) var(--s2) 0; border-bottom: 2px solid var(--site-ink); white-space: normal; }
.obs .glance td { vertical-align: top; padding: var(--s4) var(--s5) var(--s4) 0; border-bottom: 1px solid var(--site-rule); font-size: var(--site-t-note); line-height: 1.45; color: var(--site-muted); }
.obs .glance td b { display: block; font-weight: 400; font-size: var(--site-t-body); line-height: 1.35; color: var(--site-ink); }
.obs .glance td:nth-child(2) b { font-weight: 600; }
.obs .glance .t2 { display: block; margin-top: 4px; }
.obs .glance tr:target td { background: var(--site-selected); }
.obs .hours-board { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.obs .hours-ctl { position: sticky; top: var(--s5); }
.obs .hours-ctl .sel { font-size: var(--site-t-body); margin-bottom: var(--s1); }
.obs .hours-ctl .read { font-size: var(--site-t-signature); }
.obs .hours-ctl .pct { font-size: var(--site-t-body); color: var(--site-muted); margin: var(--s3) 0 var(--s5); }
.obs .hours-ctl label, .obs .ctl-label { display: block; margin-bottom: var(--s2); font-size: var(--site-t-note); color: var(--site-muted); }
.obs .hours-ctl input[type=range] { width: 100%; margin: 0; accent-color: var(--site-ink); height: 28px; }
.obs .ticks { display: flex; justify-content: space-between; margin-bottom: var(--s5); }
.obs main .ticks button { background: none; border: 0; padding: 2px 0; font-size: var(--site-t-note); cursor: pointer; }
.obs .ticks button.on { font-weight: 600; }
.obs .hours-rows { position: relative; }
.obs .hrow { position: absolute; left: 0; right: 0; top: 0; height: 36px; display: grid; grid-template-columns: clamp(130px, 15vw, 210px) minmax(0, 1fr) 62px; align-items: center; gap: var(--s3); transition: transform .65s cubic-bezier(.3, .7, .2, 1); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.obs main .hrow { font-size: var(--site-t-note); }
.obs .hrow .bar { height: 18px; background: var(--site-rule); border-radius: 1px; position: relative; overflow: hidden; }
.obs .hrow .bar i { position: absolute; inset: 0 auto 0 0; background: var(--site-data); transition: width .65s cubic-bezier(.3, .7, .2, 1); }
.obs .hrow .n { text-align: right; font-variant-numeric: tabular-nums; }
.obs .hrow.on { font-weight: 600; } .obs .hrow.on .bar i { background: var(--site-ink); }
@media (max-width: 1000px) { .obs .hours-board { grid-template-columns: minmax(0, 1fr); } .obs .hours-ctl { position: static; } .obs .ml b { font-size: var(--site-t-tick); } .obs .ml > span { font-size: var(--site-t-note); } .obs .ml > span.none { font-size: var(--site-t-tick); } }
@media (prefers-reduced-motion: reduce) { .obs :is(.hrow, .hrow .bar i, .cm-rg, .cm-dot) { transition: none; } }
/* 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: var(--site-t-note); 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); }

/* Homepage (owner 2026-11-01): image-led, like a consulting firm's main site. The hero render's ground is --site-soft,
   so the image meets the page without an edge. */
.obs.front main { padding-top: 0; }
.obs.front .front-hero { position: relative; min-height: clamp(480px, 66vh, 680px); display: flex; align-items: center; isolation: isolate; }
.obs.front .front-hero::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); background: var(--site-soft); z-index: -1; }
.obs.front .front-hero > img { position: absolute; right: calc(50% - 50vw); top: 50%; transform: translateY(-50%); width: min(58vw, 1180px); height: auto; z-index: -1; }
/* The generated image fades into the page instead of showing its edges (only the mask's alpha is used). */
.obs.front .front-hero > img { -webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 50%, var(--site-ink) 55%, transparent 100%); mask-image: radial-gradient(ellipse 70% 70% at 60% 50%, var(--site-ink) 55%, transparent 100%); }
.obs.front .front-hero-text { padding-block: var(--s8); }
.obs.front .front-hero-text > * { max-width: 540px; }
.obs.front .eyebrow { font: 500 12px/1.4 var(--site-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--site-muted); }
html[lang=zh-CN] .obs.front .eyebrow { font: 500 14px/1.4 var(--site-sans); letter-spacing: .02em; }
.obs.front .front-hero h1 { font: 500 clamp(36px, 4vw, 54px)/1.08 var(--site-display); letter-spacing: -.032em; margin-top: var(--s4); max-width: none; }
.obs.front .front-hero h1 .ln { display: block; }
html[lang=zh-CN] .obs.front .front-hero h1 { line-height: 1.2; letter-spacing: -.01em; }
.obs.front .front-sub { font-size: 19px; line-height: 1.5; color: var(--site-muted); margin-top: var(--s4); text-wrap: balance; }
.obs.front .front-links { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.obs.front .btn { display: inline-block; padding: 11px 18px; border: 1px solid var(--site-ink); border-radius: var(--site-radius); font: 500 15px/1.2 var(--site-sans); color: var(--site-ink); text-decoration: none; background: var(--site-surface); }
.obs.front .btn.primary { background: var(--site-ink); color: var(--site-surface); }
.obs.front .btn:hover { background: var(--site-selected); color: var(--site-ink); }
.obs.front .btn.primary:hover { background: var(--site-muted); color: var(--site-surface); border-color: var(--site-muted); }
.obs.front .front-credit { position: absolute; right: 0; bottom: var(--s3); font-size: 12px; color: var(--site-muted); }
/* Three image tiles; their parts line up (subgrid). */
.obs.front .front-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s6); margin-block: var(--s8); }
.obs.front .front-tile { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; color: var(--site-ink); text-decoration: none; }
.obs.front .front-tile img { grid-row: 1; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--site-soft); border: 1px solid var(--site-rule); border-radius: var(--site-radius); }
.obs.front .front-tile .kicker { grid-row: 2; margin-top: var(--s4); font: 500 12px/1.4 var(--site-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--site-muted); }
html[lang=zh-CN] .obs.front .front-tile .kicker { font: 500 14px/1.4 var(--site-sans); letter-spacing: .02em; }
.obs.front .front-tile h2 { grid-row: 3; font: 500 24px/1.2 var(--site-display); letter-spacing: -.02em; margin-top: var(--s2); }
.obs.front .front-tile p { grid-row: 4; font-size: 16px; line-height: 1.55; color: var(--site-muted); margin-top: var(--s2); text-wrap: pretty; }
.obs.front .front-tile .more { grid-row: 5; margin-top: var(--s3); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.obs.front .front-tile:hover h2, .obs.front .front-tile:hover .more { text-decoration-thickness: 2px; color: var(--site-ink); }
.obs.front .front-tile:hover img { border-color: var(--site-line); }
@media (max-width: 900px) {
  .obs.front .front-hero { flex-direction: column; align-items: stretch; }
  .obs.front .front-hero > img { position: static; transform: none; width: 100%; order: 2; }
  .obs.front .front-hero-text { padding-block: var(--s6) var(--s4); }
  .obs.front .front-credit { position: static; order: 3; padding: 0 16px var(--s3); }
  .obs.front .front-tiles { grid-template-columns: 1fr; }
  .obs.front .front-tile { grid-row: auto; margin-bottom: var(--s6); }
}
/* Reading redesign (owner 2026-11-05): read-outs, the approach instrument, plans, the signature figure. */
.obs .read { font: 300 var(--site-t-signature)/.95 var(--site-sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.obs .read small { font-size: var(--site-t-claim); font-weight: 400; letter-spacing: -.01em; margin-left: .12em; color: var(--site-muted); }
.obs .lead { font-size: var(--site-t-lead); line-height: 1.4; }
.obs .seg { display: inline-flex; flex-wrap: nowrap; gap: 0; border: 1px solid var(--site-ink); border-radius: var(--site-radius); overflow: hidden; }
.obs .seg button { border: 0; border-radius: 0; background: none; padding: 8px 22px; font: inherit; font-size: var(--site-t-body); cursor: pointer; }
.obs .seg button + button { border-left: 1px solid var(--site-ink); }
.obs .seg [aria-pressed=true] { background: var(--site-ink); color: var(--site-paper); }
.obs .instrument { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s7); align-items: stretch; }
.obs .inst-read .lead { margin-top: var(--s4); min-height: 3em; }
.obs .inst-read .seg { margin-top: var(--s5); }
.obs .pipes { position: relative; height: 320px; background: var(--site-surface); border-radius: var(--site-radius); overflow: hidden; }
.obs .pipe { position: absolute; left: 0; right: 0; top: 0; height: 26px; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.obs .pipe.hot { background: var(--site-hot); } .obs .pipe.cool { background: var(--site-cool); }
.obs .pipe em { position: absolute; left: var(--s5); bottom: calc(100% + 7px); font-style: normal; font-size: var(--site-t-note); line-height: 1.2; white-space: nowrap; }
.obs .pipe.cool em { bottom: auto; top: calc(100% + 7px); }
.obs .pipe.hot em { color: var(--site-hot-text); } .obs .pipe.cool em { color: var(--site-cool); }
.obs .gap { position: absolute; right: 36px; width: 2px; background: var(--site-ink); transition: top .7s cubic-bezier(.3, .7, .2, 1), height .7s cubic-bezier(.3, .7, .2, 1); }
.obs .gap::before, .obs .gap::after { content: ""; position: absolute; left: -7px; width: 16px; height: 2px; background: var(--site-ink); } .obs .gap::before { top: 0; } .obs .gap::after { bottom: 0; }
.obs .gaplabel { position: absolute; right: 56px; font: 300 var(--site-t-reading)/1 var(--site-sans); letter-spacing: -.04em; transform: translateY(-50%); transition: top .7s cubic-bezier(.3, .7, .2, 1); }
.obs .track { margin-top: var(--s4); position: relative; height: 26px; background: var(--site-rule); border-radius: 2px; overflow: hidden; }
.obs .fill { position: absolute; inset: 0 auto 0 0; background: var(--site-data); transition: width .7s cubic-bezier(.3, .7, .2, 1); }
.obs .tracklab { display: flex; justify-content: space-between; font-size: var(--site-t-note); color: var(--site-muted); margin-top: var(--s2); }
@media (max-width: 1000px) { .obs .instrument { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .obs :is(.pipe, .gap, .gaplabel, .fill) { transition: none; } }
.obs .fit-band { fill: var(--site-data); opacity: .09; }
.obs .fit-limit { stroke: var(--site-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.obs .fit-dot { fill: var(--site-line); stroke: var(--site-line); stroke-width: 2.5; }
.obs .fit-dot.in { fill: var(--site-data); stroke: var(--site-data); }
.obs .fit-dot.hollow { fill: var(--site-paper); stroke: var(--site-data); }
.obs .plans-wrap { margin-block: var(--s8); }
.obs .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s5) var(--s5); border-top: 2px solid var(--site-ink); padding-top: var(--s4); }
.obs .plan { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.obs .plan-when { font-size: var(--site-t-lead); font-weight: 500; letter-spacing: -.01em; margin-bottom: var(--s1); }
.obs .plan p { font-size: var(--site-t-note); line-height: 1.5; }
.obs .plan .legend-note { margin-top: var(--s2); }
.obs .plans-wrap > .legend-note { margin-top: var(--s4); }
.obs .strip { display: flex; gap: 2px; margin-top: var(--s6); font-size: var(--site-t-note); max-width: 640px; }
.obs .strip > a, .obs .strip > span { flex: 1; min-width: 0; padding: var(--s2) var(--s2) 0 0; background: none; border-top: 2px solid var(--site-rule); color: var(--site-muted); text-decoration: none; text-align: left; overflow-wrap: anywhere; line-height: 1.3; }
.obs .strip > .here { background: none; border-top-color: var(--site-ink); color: var(--site-ink); font-weight: 500; }
/* The signature figure: the anatomy plate without its card, its pipes coloured by fluid (owner 2026-11-05). CDU: blue facility
   water, orange rack loop; chiller: blue chilled water, orange hot gas. The legend says which is which. */
.obs .head-signature .inside-figure { min-height: 480px; }
.obs .signature-cdu .iso-svg { max-height: 58vh; }
.obs .head-signature .iso-plate { display: flex; flex-direction: column; background: none; border: 0; box-shadow: none; padding: 0; }
.obs .head-signature .iso-plate-corners { position: static; order: 2; display: block; inset: auto; }
.obs .head-signature .iso-plate-corner { position: static; font: 400 var(--site-t-note)/1.4 var(--site-sans); letter-spacing: 0; text-transform: none; color: var(--site-ink); max-width: none; text-align: left; }
.obs .head-signature .iso-plate-corner:is([data-corner="fig"], [data-corner="title"], [data-corner="hint"]), .obs .head-signature .iso-legend { display: none; }
.obs .head-signature .inside-controls { margin-top: var(--s2); }
.obs .head-signature .inside-controls button { font-size: var(--site-t-note); }
.obs .head-signature .figfoot { margin-top: var(--s3); gap: var(--s3); }
.obs .with-signature:has(.signature-chillers) .head-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.obs .with-signature:has(.signature-wide) .head-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.obs :is(.signature-cdu .it[data-c="fws"], .signature-chillers .it[data-c="water"]) :is(.iso-fill, .iso-top, .tb-body, .tb-ring, .tb-shade, .iso-shade) { fill: var(--site-cool); }
.obs :is(.signature-cdu .it[data-c="fws"], .signature-chillers .it[data-c="water"]) :is(.iso-top, .tb-shine) { fill: color-mix(in srgb, var(--site-cool) 72%, var(--site-surface)); }
.obs :is(.signature-cdu .it[data-c="fws"], .signature-chillers .it[data-c="water"]) :is(.iso-edge, .tb-edge, .iso-line) { stroke: color-mix(in srgb, var(--site-cool) 70%, var(--site-ink)); }
.obs :is(.signature-cdu .it[data-c^="tcs"], .signature-chillers .it[data-c="hotgas"]) :is(.iso-fill, .iso-top, .tb-body, .tb-ring, .tb-shade, .iso-shade) { fill: var(--site-hot); }
.obs :is(.signature-cdu .it[data-c^="tcs"], .signature-chillers .it[data-c="hotgas"]) :is(.iso-top, .tb-shine) { fill: color-mix(in srgb, var(--site-hot) 72%, var(--site-surface)); }
.obs :is(.signature-cdu .it[data-c^="tcs"], .signature-chillers .it[data-c="hotgas"]) :is(.iso-edge, .tb-edge, .iso-line) { stroke: color-mix(in srgb, var(--site-hot) 70%, var(--site-ink)); }
.obs .rcard .inside.portrait .inside-figure { max-width: 560px; }
.obs .loop-key { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--site-t-note); line-height: 1.4; color: var(--site-muted); }
.obs .loop-key i.cool { background: var(--site-cool); } .obs .loop-key i.hot { background: var(--site-hot); }
.obs .loop-key i { display: inline-block; width: 26px; height: 6px; border-radius: 3px; margin-right: var(--s2); vertical-align: middle; }
/* Outlook: the capex drawing behind the statement, then the relay rail beside five stage figures. */
.obs .head.overlay { padding-bottom: 0; }
.obs .head.overlay .head-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
.obs .head.overlay .head-grid > * { grid-area: 1 / 1; }
.obs .head.overlay .head-text { position: relative; z-index: 1; max-width: 46%; }
.obs .head.overlay .conclusion { font-size: var(--site-t-statement); }
.obs .hero-foot { margin-top: var(--s3); }
.obs .sig-big { font-size: calc(var(--site-t-signature) * var(--u, 1)) !important; font-weight: 300; letter-spacing: -.05em; fill: var(--site-ink) !important; }
.obs .sig-mid { font-size: calc(var(--site-t-claim) * var(--u, 1)) !important; font-weight: 300; letter-spacing: -.03em; fill: var(--site-ink) !important; }
.obs .sig-mid.on-dark { fill: var(--site-surface) !important; }
.obs .sig-unit.strong { font-weight: 500; }
.obs .relay-story { display: grid; grid-template-columns: minmax(220px, 272px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); margin-top: var(--s8); }
.obs .relay-steps { min-width: 0; }
.obs .relay-steps .main:first-child { margin-top: 0; }
.obs .rail { position: sticky; top: var(--s5); align-self: start; }
.obs .rail h2 { font-size: var(--site-t-lead); font-weight: 500; margin-bottom: var(--s4); }
.obs .rail ol { list-style: none; margin: 0 0 var(--s4); padding: 0; border-left: 2px solid var(--site-rule); }
.obs .rail li { margin-left: -2px; border-left: 2px solid transparent; padding: 10px 0 10px var(--s4); color: var(--site-muted); transition: color .2s, border-color .2s; }
.obs .rail li a { display: block; text-decoration: none; color: inherit; }
.obs .rail li b { display: block; font-weight: 500; font-size: var(--site-t-note); line-height: 1.35; }
.obs .rail li .v { display: block; font-size: var(--site-t-note); line-height: 1.35; }
.obs .rail li.on { color: var(--site-ink); border-left-color: var(--site-ink); }
.obs .rail-data { margin-top: var(--s3); }
.obs .stage-panel.wide { display: block; margin: 0; }
.obs .stage-panel.wide svg { max-width: 100%; }
.obs .stage-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.obs .readouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.obs .reading { font: 300 var(--site-t-reading)/1 var(--site-sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.obs .reading small { font-size: var(--site-t-claim); font-weight: 400; margin-left: .12em; color: var(--site-muted); letter-spacing: 0; }
.obs .readouts .lead { margin-top: var(--s2); }
.obs .also { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--s2) var(--s5); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--site-rule); }
.obs .reading-sm { font-size: var(--site-t-claim); letter-spacing: -.03em; white-space: nowrap; }
.obs .also p { font-size: var(--site-t-note); line-height: 1.5; color: var(--site-muted); }
.obs .also p b { display: block; font-weight: 400; font-size: var(--site-t-body); color: var(--site-ink); margin-bottom: 4px; }
.obs .finale { margin-top: var(--s8); padding-block: var(--s7); border-top: 2px solid var(--site-ink); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s7); align-items: end; }
.obs .finale h2 { font: 500 var(--site-t-claim)/1.14 var(--site-display); letter-spacing: -.022em; }
.obs .keys:has(> .key:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s7); margin-top: var(--s8); }
.obs .keys:has(> .key:nth-child(2):last-child) .key p { max-width: 46ch; }
@media (max-width: 1000px) {
  .obs .head.overlay .head-grid > * { grid-area: auto; }
  .obs .head.overlay .head-text { max-width: none; }
  .obs .relay-story, .obs .finale, .obs .readouts, .obs .stage-grid.two { grid-template-columns: minmax(0, 1fr); }
  .obs .rail { position: static; }
}
/* Country pages: the thermal meaning is the page's argument. */
.obs .thermal-meaning { margin-block: var(--s8); padding-block: var(--s7); border-block: 1px solid var(--site-rule); }
.obs .thermal-text { font: 400 var(--site-t-claim)/1.22 var(--site-display); letter-spacing: -.02em; max-width: 30em; }
html[lang=zh-CN] .obs .thermal-text { line-height: 1.45; letter-spacing: 0; }
.obs .thermal-meaning .legend-note { margin-top: var(--s4); }
.obs .fig-cond { min-width: 0; } .obs .fig-cond > * + * { margin-top: var(--s2); }
.obs .seg-wrap { display: flex; flex-wrap: wrap; gap: 4px; }
.obs .seg-wrap button { border: 1px solid var(--site-rule); border-radius: var(--site-radius); background: var(--site-surface); padding: 4px 10px; font-size: var(--site-t-note); cursor: pointer; }
.obs .seg-wrap [aria-pressed=true] { background: var(--site-ink); color: var(--site-paper); border-color: var(--site-ink); }
/* Observatory entry cards: question only, with an arrow to the line. */
.obs .angles .q { font-size: var(--site-t-note); line-height: 1.45; color: var(--site-ink); }
.obs .angles .to .go { margin-left: auto; font-family: var(--site-sans); }
/* Industry delivery (2026-11-01): legend rows with a line swatch per group. */
.obs .legend-row { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: 4px; font-size: var(--site-t-note); color: var(--site-muted); }
.obs .legend-row .sw { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--c); vertical-align: middle; margin-right: 8px; }
.obs .legend-row .sw.dash { border-top-style: dashed; }

/* The Overview's signature (owner 2026-11-06, second design): a live heat field behind the five lines, one ink block where
   they end, and the record and schedule running out of it. One loop, only in view, with a pause control (observatory.js). */
.obs.home { overflow-x: clip; }
/* Colour of the report block and the schedule band. */
.ov { --ov-bg: color-mix(in srgb, var(--site-cool) 42%, var(--site-ink)); --ov-fg: var(--site-surface); --ov-sub: color-mix(in srgb, var(--site-surface) 76%, var(--site-cool)); --ov-rule: color-mix(in srgb, var(--site-surface) 40%, var(--site-cool)); }
.ov-time { --ov-bg: color-mix(in srgb, var(--site-selected) 72%, transparent); --ov-fg: var(--site-ink); --ov-sub: var(--site-muted); --ov-rule: var(--site-line); }
.obs.home .head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s6); align-items: end; padding-block: var(--s5) var(--s5); }
.obs.home .head .conclusion { white-space: nowrap; }
.obs.home .head .asof { max-width: none; margin: 0; }
.ov { position: relative; width: 100vw; margin-left: calc(50% - 50vw); background: var(--site-soft); overflow: clip; }
.ov-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.ov-lines { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.05fr); column-gap: 0; padding-top: var(--s5); }
.ov-line { grid-column: 1 / 4; font: 500 var(--site-t-note)/1.4 var(--site-sans); color: var(--site-ink); padding-bottom: var(--s2); }
.ov-b { margin-top: var(--s7); }
.ov-st, .ov-cross { position: relative; border-top: 2px solid var(--site-ink); padding: var(--s3) var(--s6) var(--s3) 0; }
.obs .ov a { text-decoration: none; }
.obs .ov a:hover { color: inherit; }
.ov-st { display: block; color: var(--site-ink); }
.ov :is(.ov-fig, .ov-cap, .ov-name, .ov-cross, .ov-line) { text-shadow: 0 0 6px var(--site-soft), 0 0 6px var(--site-soft), 0 0 2px var(--site-soft); }
.ov-report :is(.ov-fig, .ov-cap, .ov-name) { text-shadow: none !important; }
.ov-st::after, .ov-cross::after { content: ""; position: absolute; right: 0; top: -6px; width: 9px; height: 9px; border-top: 2px solid var(--site-ink); border-right: 2px solid var(--site-ink); transform: rotate(45deg); }
.ov-drop { position: absolute; left: 0; top: -2px; width: 2px; height: 34px; transform: translateY(-100%); background: var(--site-ink); }
.ov-drop::after { content: ""; position: absolute; left: -4px; bottom: 0; width: 9px; height: 9px; border-right: 2px solid var(--site-ink); border-bottom: 2px solid var(--site-ink); transform: rotate(45deg); }
.ov-cross { font-size: var(--site-t-note); line-height: 1.4; color: var(--site-muted); padding-top: var(--s4); }
.ov-name { display: flex; align-items: center; gap: var(--s2); font: 500 var(--site-t-body)/1.3 var(--site-sans); }
.ov-name .ic { width: 20px; height: 20px; }
.ov-fig { display: block; font: 300 var(--site-t-reading)/1 var(--site-sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-top: var(--s2); transition: color .4s; }
.ov-fig small { font-size: var(--site-t-lead); font-weight: 400; letter-spacing: 0; margin-left: .25em; color: var(--site-muted); }
.ov-fig small.u { margin-left: .04em; }
.ov-cap { display: block; margin-top: var(--s2); max-width: 19em; text-wrap: balance; font-size: var(--site-t-note); line-height: 1.4; color: var(--site-muted); }
.ov-st:hover .ov-name > span:last-child, .ov-report:hover .ov-open > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.ov-st.on .ov-name > span:last-child { box-shadow: 0 2px 0 var(--site-ink); }
.obs .ov .ov-report { grid-column: 4; grid-row: 1 / span 4; display: flex; flex-direction: column; margin-top: calc(-1 * var(--s5)); padding: var(--s5); background: var(--ov-bg); color: var(--ov-fg); }
.obs .ov .ov-report::after { content: ""; position: absolute; left: 100%; top: 0; bottom: 0; width: 50vw; background: var(--ov-bg); }
.obs .ov .ov-report { position: relative; }
.ov-report .ov-name .ic { color: var(--ov-fg); stroke: var(--ov-fg); }
.ov-report .ov-fig { font-size: var(--site-t-signature); margin-top: auto; }
.ov-report .ov-cap { color: var(--ov-fg); font-size: var(--site-t-body); max-width: 16em; }
.ov-report .ov-open { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--ov-rule); font-size: var(--site-t-note); }
.ov-report .legend-note { color: var(--ov-sub); font-size: var(--site-t-note); }
.ov-time { position: relative; background: var(--ov-bg); color: var(--ov-fg); }
.ov-time > .wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr) auto; gap: var(--s6); align-items: start; padding-block: var(--s3); }
.obs .ov-time-t b { display: block; font: 500 var(--site-t-body)/1.3 var(--site-sans); color: var(--ov-fg); }
.obs .ov-time-t p { display: block; margin-top: var(--s1); font-size: var(--site-t-note); line-height: 1.4; color: var(--ov-sub); }
.ov-time-r svg { display: block; width: 100%; height: auto; overflow: visible; margin-bottom: var(--s1); }
.ov-time-r text { font: 400 calc(var(--site-t-tick) * var(--u, 1))/1 var(--site-sans); fill: var(--ov-sub); }
.ov-time .base { stroke: var(--ov-rule); fill: none; }
.ov-time .tk { fill: none; stroke: var(--ov-fg); stroke-width: 1; }
.ov-time .tk.ed { stroke-width: 3; }
.ov-time .tk.sch { stroke: var(--ov-sub); }
.ov-time .tk.q { fill: var(--ov-bg); }
.ov-time .today { stroke: var(--ov-fg); fill: none; stroke-dasharray: 2 3; }
.ov-key { display: flex; flex-wrap: wrap; gap: 0 var(--s4); font-size: var(--site-t-note); line-height: 1.4; color: var(--ov-sub); }
.ov-key > span { display: inline-flex; align-items: center; gap: var(--s2); }
.ov-key .k { position: relative; display: block; flex: none; width: 10px; height: 18px; }
.ov-key .k::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1px; height: 8px; margin-top: -4px; background: var(--ov-sub); }
.ov-key .k.mid::before { height: 14px; margin-top: -7px; }
.ov-key .k.tall::before { width: 3px; height: 18px; margin: -9px 0 0 -1px; background: var(--ov-fg); }
.ov-key .k.q::before { width: 9px; height: 9px; margin: -5px 0 0 -5px; background: none; border: 1px solid var(--ov-sub); transform: rotate(45deg); }
.obs .ov-pause { padding: 0; border: 0; background: none; font: 400 var(--site-t-note)/1.4 var(--site-sans); color: var(--ov-sub); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ov-pause:hover { color: var(--ov-fg); }
@media (max-width: 1100px) {
  .ov-lines { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--s5); }
  .ov-line { grid-column: auto; }
  .ov-cross::after, .ov-drop, .ov-st::after { display: none; }
  .obs.home .head { grid-template-columns: minmax(0, 1fr); }
  .obs.home .head .conclusion { white-space: normal; }
  .obs .ov .ov-report { grid-column: auto; grid-row: auto; margin-top: var(--s5); }
  .obs .ov .ov-report::after { display: none; }
  .ov-time > .wrap { grid-template-columns: minmax(0, 1fr); }
  .ov-pause { display: none; }
}
.obs.home .ov-h { margin: var(--s7) 0 var(--s5); font: 500 var(--site-t-claim)/1.15 var(--site-display); letter-spacing: -.02em; }
.obs.home .lines { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 var(--s6); margin-bottom: var(--s6); }
.obs.home .lines article { display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); grid-column: span 2; grid-row: span 5; row-gap: 0; border: 0; padding: 0; margin: 0 0 var(--s7); }
.obs.home .lines article > .ov-pic { grid-row: 1; } .obs.home .lines article > h2 { grid-row: 2; } .obs.home .lines article > .c { grid-row: 3; } .obs.home .lines article > .tags { grid-row: 4; } .obs.home .lines article > .more-row { grid-row: 5; }
.obs.home .lines article.ov-c-countries { grid-column: span 4; }
.ov-pic { display: block; height: 270px; margin-bottom: var(--s4); text-decoration: none; overflow: hidden; }
.ov-c-outlook .ov-pic, .ov-c-countries .ov-pic { height: 430px; }
.ov-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ov-c-countries .atlas { width: 1296px; margin: 0; transform-origin: 0 0; transform: scale(var(--k, .64)); }
.ov-c-countries .ml b, .ov-c-countries .ml > span.none { font-size: var(--site-t-lead); }
.ov-pic svg { display: block; width: 100%; height: 100%; }
.ov-bars rect { fill: var(--site-rule); }
.ov-bars rect.now { fill: var(--site-data); }
.ov-bars text.unit { fill: var(--site-muted); }
.ov-bars text { font: 400 calc(var(--site-t-tick) * var(--u, 1))/1 var(--site-sans); fill: var(--site-muted); }
.ov-bars text.val { font: 300 calc(var(--site-t-claim) * var(--u, 1))/1 var(--site-sans); fill: var(--site-ink); letter-spacing: -.03em; }
.obs.home .lines h2 { margin: 0 0 var(--s2); color: var(--site-ink); }
.obs.home .lines .ov-c-outlook p.c, .obs.home .lines .ov-c-countries p.c { font: 500 var(--site-t-claim)/1.15 var(--site-display); letter-spacing: -.02em; }
.obs.home .lines p.c :is(.ph, .sent) { display: inline; }
.obs.home .lines .tags { margin-top: var(--s2); }
.obs.home .lines .more-row { margin-top: var(--s3); }
@media (max-width: 1100px) { .obs.home .lines article.ov-c-outlook, .obs.home .lines article.ov-c-countries { grid-column: 1 / -1; } .ov-c-countries .ov-pic { height: auto; aspect-ratio: 1296 / 670; } .ov-c-outlook .ov-pic { height: 300px; } }
@media (max-width: 760px) { .ov-c-countries .ov-pic { aspect-ratio: auto; height: auto; overflow: visible; } .ov-c-countries .atlas { width: auto; transform: none; } .ov-c-countries .ml b, .ov-c-countries .ml > span.none { font-size: var(--site-t-note); } }
@media (max-width: 800px) { .obs.home .lines { grid-template-columns: minmax(0, 1fr); } .obs.home .lines article, .obs.home .lines article.ov-c-outlook, .obs.home .lines article.ov-c-countries { grid-column: auto; grid-row: auto; grid-template-rows: none; } .obs.home .head { grid-template-columns: minmax(0, 1fr); } .obs.home .head .conclusion { white-space: normal; } }

/* System map console (owner direction 2026-11-06): one panel with the route rails, read-outs, map and temperature view.
   Selected states use the soft fill and a rule, not a black box. Blue and orange are for fluid only. */
.obs .sys-console { background: var(--site-surface); border: 1px solid var(--site-rule); border-radius: var(--site-radius); }
.obs .sys-rail { display: grid; grid-template-columns: 158px 1fr; border-bottom: 1px solid var(--site-rule); font-size: var(--site-t-note); }
.obs .sys-rail[hidden] { display: none; }
.obs .sys-rail > span { padding: 9px 0 0 14px; color: var(--site-muted); line-height: 1.25; }
.obs .sys-keys { display: flex; flex-wrap: wrap; align-items: stretch; }
.obs .sys-key { flex: 1 1 auto; text-align: left; padding: 8px 11px; background: none; border: 0; border-left: 1px solid var(--site-rule); color: var(--site-muted); font: inherit; font-size: var(--site-t-note); line-height: 1.3; cursor: pointer; transition: background .12s; }
.obs .sys-key b { font-weight: 500; color: var(--site-ink); margin-right: 3px; }
.obs .sys-key:hover:not(:disabled) { background: var(--site-soft); }
.obs .sys-key[aria-pressed=true] { background: var(--site-selected); color: var(--site-ink); box-shadow: inset 0 -2px 0 var(--site-line); }
.obs .sys-key:disabled { cursor: default; opacity: .45; }
.obs .sys-key:focus-visible { outline: 2px solid var(--site-focus); outline-offset: -2px; }
.obs .sys-hint { flex: 2 1 340px; align-self: center; padding: 6px 14px; color: var(--site-muted); }
.obs .sys-rail .sys-keys > .sys-key[data-src] { flex: 0 0 auto; }
.obs .sys-read { display: grid; grid-template-columns: 1.1fr 1.5fr 1.1fr 1fr; grid-template-rows: auto auto; margin: 0; border-bottom: 1px solid var(--site-rule); font-size: var(--site-t-note); }
.obs .sys-read div { display: grid; grid-row: span 2; grid-template-rows: subgrid; padding: 7px 14px 9px; border-left: 1px solid var(--site-rule); min-width: 0; }
.obs .sys-read div:first-child { border-left: 0; }
.obs .sys-read dt { color: var(--site-muted); }
.obs .sys-read dd { margin: 0; font-weight: 500; }
.obs .sys-read dd::first-letter { text-transform: capitalize; }
.obs .sys-draw[hidden] { display: none; }
.obs .sys-temp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: 7px 14px; border-top: 1px solid var(--site-rule); font-size: var(--site-t-note); color: var(--site-muted); }
.obs .sys-temp input { flex: 1 1 160px; min-width: 120px; accent-color: var(--site-line); }
.obs .sys-temp output { color: var(--site-ink); font-weight: 500; min-width: 3.4em; font-variant-numeric: tabular-nums; }
.obs .sys-seg { border: 1px solid var(--site-rule); border-radius: 3px; flex-wrap: nowrap; }
.obs .sys-seg .sys-key { padding: 3px 9px; flex: 0 0 auto; }
.obs .sys-seg .sys-key:first-child { border-left: 0; }
.obs .sys svg text { font-family: var(--site-sans); fill: var(--site-ink); font-variant-numeric: tabular-nums; }
.obs .sys svg .hdr { font-size: var(--site-t-tick); fill: var(--site-muted); }
.obs .sys svg .hdrl { stroke: var(--site-rule); }
.obs .sys svg .tile > rect { fill: var(--site-surface); stroke: var(--site-line); stroke-width: 1.1; }
.obs .sys svg .tile.alt > rect { stroke-dasharray: 3 3; }
.obs .sys svg .tile.chip > rect { fill: var(--site-selected); stroke: var(--site-line); }
.obs .sys svg .tile text { font-size: var(--site-t-tick); }
.obs .sys svg .tile.off text, .obs .sys svg .tile .sub, .obs .sys svg .cnt { fill: var(--site-muted); }
.obs .sys svg .tile .sub { font-size: 12px; }
.obs .sys svg .tile .chipt { font-size: 12px; }
.obs .sys svg .cnt { font-size: var(--site-t-tick); font-weight: 500; text-anchor: end; }
.obs .sys svg .tile.off .glyph { stroke: var(--site-muted); }
.obs .sys svg .glyph { fill: none; stroke: var(--site-ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.obs .sys svg .glyph .c { stroke: var(--site-cool); }
.obs .sys svg .glyph .h { stroke: var(--site-hot); }
.obs .sys svg .block > rect { fill: var(--site-surface); stroke: var(--site-line); stroke-width: 1.1; }
.obs .sys svg .p-wall { fill: none; stroke: var(--site-line); stroke-opacity: .46; }
.obs .sys svg .p-bore { fill: none; stroke: var(--site-surface); }
.obs .sys svg .p-fluid { fill: none; }
.obs .sys svg .refr { stroke-dasharray: 2.2 3.2; stroke-linecap: round; }
.obs .sys svg .p-shine { fill: none; stroke: var(--site-surface); stroke-opacity: .7; stroke-linecap: round; stroke-dasharray: 11 45; animation: sys-flow 1.2s linear infinite; }
.obs .sys svg .p-shine.back { stroke-opacity: .42; }
.obs .sys svg .band { fill: none; stroke-opacity: .26; }
.obs .sys svg .band-move { fill: none; stroke-opacity: .8; stroke-dasharray: 3 15; animation: sys-flow2 .9s linear infinite; }
.obs .sys svg .draw { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); animation: sys-draw .7s cubic-bezier(.55, .05, .25, 1) forwards; }
.obs .sys svg .late { opacity: 0; animation: sys-fade .3s .6s forwards, sys-flow 1.2s linear infinite; }
.obs .sys svg .late.band-move { animation: sys-fade .3s .6s forwards, sys-flow2 .9s linear infinite; }
.obs .sys svg .ghost { fill: none; stroke-opacity: .5; animation: sys-ghost .7s ease-out forwards; pointer-events: none; }
.obs .sys svg .branch { fill: none; stroke: var(--site-line); stroke-width: 1.5; stroke-dasharray: 1.5 5; stroke-linecap: round; }
.obs .sys svg .jdot { stroke: var(--site-surface); stroke-width: 1.5; }
.obs .sys svg .tag { font-size: 12px; font-weight: 500; paint-order: stroke; stroke: var(--site-surface); stroke-width: 4px; }
.obs .sys svg .share, .obs .sys svg .leg text { font-size: 12px; fill: var(--site-muted); }
.obs .sys svg .plume { fill: none; stroke: var(--site-hot); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 4 5; animation: sys-plume .8s linear infinite; }
.obs .sys svg .pill { cursor: pointer; }
.obs .sys svg .pill rect { fill: var(--site-surface); stroke: var(--site-line); }
.obs .sys svg .pill text { font-size: 12px; font-weight: 500; fill: var(--site-muted); text-anchor: middle; pointer-events: none; }
.obs .sys svg .pill:hover rect, .obs .sys svg .pill.open rect { fill: var(--site-selected); }
.obs .sys svg .pill:hover text, .obs .sys svg .pill.open text { fill: var(--site-ink); }
.obs .sys svg .pill:focus-visible { outline: none; }
.obs .sys svg .pill:focus-visible rect { stroke: var(--site-focus); stroke-width: 2; }
.obs .sys svg .grid { stroke: var(--site-rule); }
.obs .sys svg .grid.dot { stroke-dasharray: 1 4; }
.obs .sys svg .gridt { font-size: var(--site-t-tick); fill: var(--site-muted); text-anchor: end; }
.obs .sys svg .wc { font-size: 12px; fill: var(--site-muted); }
.obs .sys svg .wct { stroke: var(--site-line); }
.obs .sys svg .tline { fill: none; stroke-width: 2.4; }
.obs .sys svg .val { font-size: 12px; font-weight: 500; text-anchor: middle; paint-order: stroke; stroke: var(--site-surface); stroke-width: 3px; }
.obs .sys svg .val.lo { fill: var(--site-muted); }
.obs .sys svg .stepl { fill: none; stroke: var(--site-hot); stroke-width: 1.5; }
.obs .sys svg .stepl.a { stroke-opacity: .55; }
.obs .sys svg .app { font-size: 12px; fill: var(--site-muted); paint-order: stroke; stroke: var(--site-surface); stroke-width: 3px; }
.obs .sys svg .app.big { fill: var(--site-ink); font-weight: 500; }
.obs .sys svg .app.end { text-anchor: end; }
.obs .sys svg .downa { fill: none; stroke: var(--site-hot); stroke-width: 1.8; stroke-dasharray: 4 3; }
.obs .sys svg .downa.solid { stroke-dasharray: none; }
.obs .sys svg .lift { fill: none; stroke: var(--site-ink); stroke-width: 2.4; }
.obs .sys svg .lift.heat { stroke-dasharray: 7 4; }
.obs .sys svg .ah { fill: var(--site-ink); }
.obs .sys svg .liftt { font-size: 12px; font-weight: 500; text-anchor: end; paint-order: stroke; stroke: var(--site-surface); stroke-width: 4px; }
.obs .sys svg .liftt.r { text-anchor: start; }
.obs .sys svg .eqn { font-size: 12px; font-weight: 500; text-anchor: middle; paint-order: stroke; stroke: var(--site-surface); stroke-width: 3.5px; }
.obs .sys svg .outl { stroke: var(--site-ink); stroke-width: 1.5; }
.obs .sys svg .outd { fill: var(--site-surface); stroke: var(--site-ink); stroke-width: 1.5; }
.obs .sys svg .outzone { cursor: ns-resize; fill: transparent; }
.obs .sys svg .outtag { font-size: var(--site-t-tick); font-weight: 500; paint-order: stroke; stroke: var(--site-surface); stroke-width: 4px; }
@keyframes sys-flow { to { stroke-dashoffset: -56; } }
@keyframes sys-flow2 { to { stroke-dashoffset: -18; } }
@keyframes sys-draw { to { stroke-dashoffset: 0; } }
@keyframes sys-fade { to { opacity: 1; } }
@keyframes sys-ghost { to { stroke-opacity: 0; } }
@keyframes sys-plume { to { stroke-dashoffset: -9; } }
@media (prefers-reduced-motion: reduce) {
  .obs .sys svg .p-shine, .obs .sys svg .late, .obs .sys svg .band-move, .obs .sys svg .ghost { animation: none; opacity: 0; }
  .obs .sys svg .draw { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .obs .sys svg .plume { animation: none; }
}
@media (max-width: 760px) {
  .obs .sys-rail { grid-template-columns: 1fr; }
  .obs .sys-rail > span { padding: 8px 14px 4px; }
  .obs .sys-key { border-left: 0; }
  .obs .sys-read { grid-template-columns: 1fr; grid-template-rows: none; }
  .obs .sys-read div { border-left: 0; }
}