@font-face {
  font-family: "Stormhaven Serif";
  src: local("Iowan Old Style"), local("Palatino Linotype"), local("Book Antiqua");
}

:root {
  color-scheme: dark;
  --ink-0: #060b12;
  --ink-1: #09121d;
  --ink-2: #0e1b28;
  --slate: #142636;
  --slate-soft: #1a3040;
  --line: rgba(159, 184, 186, 0.2);
  --line-strong: rgba(205, 174, 100, 0.44);
  --parchment: #e8dfc9;
  --muted: #91a5aa;
  --muted-2: #6f838a;
  --gold: #d0ad5b;
  --gold-bright: #f1d283;
  --gold-dark: #80652c;
  --sea: #275866;
  --sea-bright: #67b9b0;
  --radiant: #f4cf69;
  --content: #6abcb1;
  --weary: #d6a354;
  --sick: #d66d54;
  --dark: #a94f50;
  --fog: #9baab0;
  --dormant: #788b94;
  --critical: #dc665d;
  --warning: #dfa64d;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  --serif: "Stormhaven Serif", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--ink-0); scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--parchment);
  background:
    radial-gradient(circle at 70% 18%, rgba(42, 91, 98, 0.15), transparent 31rem),
    radial-gradient(circle at 18% 72%, rgba(164, 121, 45, 0.08), transparent 35rem),
    linear-gradient(150deg, var(--ink-0), #08131e 52%, #070e17);
  font: 14px/1.5 var(--sans);
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

button, input { font: inherit; }
button { color: inherit; }

button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible,
.building-node:focus-visible, .isle-hitarea:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

.page-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 50;
  color: #101821;
  background: var(--gold-bright);
  padding: .7rem 1rem;
  border-radius: 0 0 .35rem .35rem;
  font-weight: 800;
}
.skip-link:focus { top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.masthead {
  width: min(1900px, 100%);
  margin: 0 auto;
  min-height: 94px;
  padding: 19px clamp(20px, 2.8vw, 54px);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.4fr) minmax(330px, 1fr);
  gap: 2rem;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10, 19, 29, 0.94), rgba(9, 18, 28, 0.74));
  backdrop-filter: blur(16px);
}

.brand-lockup { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-mark { width: 48px; height: 48px; flex: none; stroke: var(--gold); fill: none; stroke-width: 1.4; filter: drop-shadow(0 0 8px rgba(218,178,81,.18)); }
.brand-mark .brand-star { fill: var(--gold-bright); stroke: none; }
.kicker, .eyebrow { margin: 0 0 3px; color: var(--gold); text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 800; }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 500; }
h1 { font-size: clamp(24px, 2vw, 34px); letter-spacing: .07em; text-transform: uppercase; }
h2 { font-size: 24px; letter-spacing: .035em; }

.world-readout { text-align: center; min-width: 0; }
.connection { display: inline-flex; align-items: center; gap: .65rem; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; }
.connection-orbit { width: 11px; height: 11px; border: 1px solid currentColor; border-radius: 50%; position: relative; }
.connection-orbit::after { content: ""; position: absolute; inset: 2px; background: currentColor; border-radius: 50%; box-shadow: 0 0 11px currentColor; }
.connection[data-state="live"] { color: var(--sea-bright); }
.connection[data-state="stale"] { color: var(--warning); }
.connection[data-state="offline"] { color: var(--critical); }
.connection[data-state="connecting"] .connection-orbit { animation: orbit-pulse 1.5s ease-in-out infinite; }
.world-message { margin: 6px auto 0; max-width: 46rem; font-family: var(--serif); color: #c8c1ae; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.masthead-actions { justify-self: end; display: flex; align-items: center; gap: 9px; }
.clock-block { text-align: right; padding-right: 12px; border-right: 1px solid var(--line); min-width: 155px; }
.clock-block span { display: block; font: 17px var(--serif); font-variant-numeric: tabular-nums; color: #ded3ba; }
.clock-block small { display: block; color: var(--muted-2); font-size: 10px; margin-top: 2px; }

.quiet-button, .primary-button, .close-button {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(20, 38, 54, .72);
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s;
}
.quiet-button { display: inline-flex; align-items: center; gap: 8px; color: #b7c3c3; }
.quiet-button:hover, .close-button:hover { border-color: var(--line-strong); background: rgba(31, 51, 65, .92); }
.primary-button { color: #17160f; background: var(--gold); border-color: var(--gold-bright); font-weight: 800; }
.primary-button:hover { background: var(--gold-bright); transform: translateY(-1px); }
.button-glyph { width: 15px; height: 15px; position: relative; display: inline-block; opacity: .85; }
.glyph-cartography { border: 1px solid currentColor; border-radius: 50%; }
.glyph-cartography::before, .glyph-cartography::after { content: ""; position: absolute; background: currentColor; }
.glyph-cartography::before { width: 1px; height: 17px; left: 6px; top: -2px; transform: rotate(40deg); }
.glyph-cartography::after { width: 3px; height: 3px; border-radius: 50%; left: 5px; top: 5px; }
.glyph-almanac { border: 1px solid currentColor; border-radius: 2px; }
.glyph-almanac::before { content: ""; position: absolute; left: 2px; right: 2px; top: 4px; border-top: 1px solid currentColor; box-shadow: 0 3px 0 rgba(255,255,255,.45), 0 6px 0 rgba(255,255,255,.45); }

.observatory {
  width: min(1900px, 100%);
  margin: 0 auto;
  min-height: calc(100vh - 145px);
  padding: clamp(18px, 2.5vw, 42px) clamp(18px, 2.8vw, 54px) 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 21vw, 378px);
  gap: clamp(16px, 1.8vw, 30px);
}
.world-panel, .rail-card { border: 1px solid var(--line); background: rgba(10, 20, 30, .58); box-shadow: var(--shadow); }
.world-panel { min-width: 0; align-self: start; }
.panel-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.panel-heading.compact { padding-bottom: 14px; }
.chart-metrics { display: flex; gap: 20px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.chart-metrics strong { color: var(--parchment); font-size: 13px; font-variant-numeric: tabular-nums; }

.map-frame {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  aspect-ratio: 16 / 9;
  isolation: isolate;
  background:
    radial-gradient(circle at 68% 33%, rgba(52, 106, 112, .1), transparent 29%),
    linear-gradient(#08131e, #07111b 60%, #081620);
}
#world-map { display: block; width: 100%; height: 100%; min-height: 620px; }
.forming-card { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--muted); background: rgba(7, 15, 23, .78); text-align: center; transition: opacity .35s; }
.forming-card strong { font: 24px var(--serif); color: var(--parchment); }
.forming-card.is-hidden { opacity: 0; pointer-events: none; }
.forming-card[hidden] { display: none; }
.forming-instrument { width: 62px; height: 62px; border: 1px solid var(--gold-dark); border-radius: 50%; position: relative; animation: spin-slow 9s linear infinite; }
.forming-instrument::before, .forming-instrument::after { content: ""; position: absolute; background: var(--gold); left: 50%; top: 50%; transform-origin: left center; }
.forming-instrument::before { width: 24px; height: 1px; transform: rotate(-38deg); }
.forming-instrument::after { width: 3px; height: 3px; border-radius: 50%; transform: translate(-1px,-1px); }

.map-legend { position: absolute; z-index: 6; left: 18px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 7px 12px; max-width: calc(100% - 36px); padding: 8px 11px; background: rgba(5, 12, 19, .82); border: 1px solid rgba(154,177,178,.14); color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; backdrop-filter: blur(8px); }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-mark { width: 8px; height: 8px; border-radius: 50%; display: inline-block; border: 1px solid currentColor; }
.mark-clear { color: var(--content); background: currentColor; box-shadow: 0 0 6px currentColor; }
.mark-weary { color: var(--weary); background: currentColor; }
.mark-dark { color: var(--dark); background: transparent; }
.mark-dormant { color: var(--dormant); border-radius: 1px; }
.mark-fog { color: var(--fog); background: repeating-linear-gradient(45deg, transparent 0 2px, currentColor 2px 3px); }

.world-index { position: absolute; right: 14px; bottom: 14px; z-index: 8; }
.world-index summary { cursor: pointer; list-style: none; border: 1px solid var(--line); background: rgba(6, 13, 20, .9); padding: 8px 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; font-size: 10px; }
.world-index summary::-webkit-details-marker { display: none; }
.world-index[open] summary { border-color: var(--line-strong); color: var(--parchment); }
.world-index-content { position: absolute; right: 0; bottom: calc(100% + 6px); width: min(360px, calc(100vw - 42px)); max-height: 55vh; overflow: auto; background: rgba(7, 15, 23, .98); border: 1px solid var(--line-strong); padding: 12px; box-shadow: var(--shadow); }
.index-isle + .index-isle { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 9px; }
.index-isle h3 { margin: 0 0 5px; font: 15px var(--serif); color: var(--gold-bright); }
.index-isle ul { margin: 0; padding: 0; list-style: none; }
.index-isle button { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 5px 4px; color: #b9c2c0; text-align: left; background: none; border: 0; cursor: pointer; }
.index-isle button:hover { color: white; background: rgba(255,255,255,.035); }
.index-state { color: var(--muted-2); text-transform: uppercase; font-size: 9px; }

.right-rail { align-self: start; display: grid; gap: 18px; }
.rail-card { min-width: 0; }
.bell-mark { width: 28px; height: 24px; border: 1px solid var(--gold-dark); border-radius: 14px 14px 4px 4px; position: relative; opacity: .75; }
.bell-mark::before { content: ""; position: absolute; width: 7px; height: 3px; border-radius: 50%; left: 9px; bottom: -5px; background: var(--gold); }
.crier-list { margin: 0; padding: 8px 18px 18px; list-style: none; max-height: min(46vh, 460px); overflow: auto; }
.crier-item, .crier-empty { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 13px 2px; border-bottom: 1px solid rgba(146,170,172,.12); }
.crier-item:last-child, .crier-empty:last-child { border-bottom: 0; }
.event-seal { width: 24px; height: 24px; margin-top: 2px; border: 1px solid currentColor; border-radius: 50%; color: var(--muted-2); position: relative; }
.event-seal::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: currentColor; }
.crier-item[data-severity="critical"] .event-seal { color: var(--critical); box-shadow: 0 0 10px rgba(220,102,93,.18); }
.crier-item[data-severity="warning"] .event-seal { color: var(--warning); }
.crier-item[data-category="power"] .event-seal { color: var(--gold-bright); }
.crier-item strong, .crier-empty strong { display: block; font: 15px/1.3 var(--serif); font-weight: 500; color: #ddd4c0; }
.crier-item span, .crier-empty span { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.crier-item time { color: var(--muted-2); }
.conditions-card { padding-bottom: 14px; }
.condition-grid { margin: 0; padding: 16px 20px 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; }
.condition-grid div { min-width: 0; }
.condition-grid dt { color: var(--muted-2); text-transform: uppercase; letter-spacing: .11em; font-size: 9px; }
.condition-grid dd { margin: 3px 0 0; font: 21px var(--serif); color: #ddd3bd; font-variant-numeric: tabular-nums; }
.condition-rule { height: 1px; margin: 12px 20px; background: linear-gradient(to right, var(--gold-dark), transparent); }
.condition-note { margin: 0; padding: 0 20px 7px; color: var(--muted); font: italic 13px/1.55 var(--serif); }

.footer-line { width: min(1900px, 100%); margin: 0 auto; padding: 0 clamp(18px, 2.8vw, 54px) 20px; display: flex; justify-content: space-between; gap: 1rem; color: var(--muted-2); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }

/* SVG world */
.chart-ocean { fill: url(#oceanGradient); }
.chart-grid { opacity: .16; }
.chart-vignette { fill: url(#vignetteGradient); pointer-events: none; }
.chart-star { fill: #d9cfad; opacity: .32; }
.compass-rose { opacity: .36; color: var(--gold); }
.compass-rose text { fill: currentColor; font: 14px var(--serif); letter-spacing: .15em; }
.compass-rose path, .compass-rose circle { stroke: currentColor; fill: none; }
.route-line { fill: none; stroke: rgba(89, 153, 155, .21); stroke-width: 2; stroke-dasharray: 4 11; }
.route-line.tailnet { stroke: rgba(205,174,100,.19); stroke-dasharray: 1 10; }
.route-pulse { fill: var(--sea-bright); opacity: .45; }
.isle-group { --isle-accent: var(--content); }
.isle-group[data-state="degraded"] { --isle-accent: var(--weary); }
.isle-group[data-state="down"] { --isle-accent: var(--dark); }
.isle-group[data-state="dormant"] { --isle-accent: var(--dormant); }
.isle-group[data-visibility="fogbound"], .isle-group[data-state="unknown"] { --isle-accent: var(--fog); }
.isle-shadow { fill: rgba(0,0,0,.4); filter: blur(11px); }
.isle-rock { fill: url(#rockGradient); stroke: rgba(119,152,151,.36); stroke-width: 2; }
.isle-rim { fill: none; stroke: var(--isle-accent); stroke-width: 2; opacity: .44; }
.isle-waterline { fill: rgba(44,100,109,.48); }
.isle-waterline.hot { fill: rgba(140,83,47,.28); }
.isle-label { fill: #d8d0bc; font: 500 18px var(--serif); letter-spacing: .055em; text-anchor: middle; }
.isle-subtitle { fill: #71868b; font: 700 9px var(--sans); letter-spacing: .14em; text-transform: uppercase; text-anchor: middle; }
.isle-weather-readout { fill: #829598; font: 9px var(--sans); text-anchor: middle; letter-spacing: .05em; }

.weather-cloud { fill: #3e5561; opacity: .16; filter: blur(3px); }
.weather-cloud.heavy { fill: #566370; opacity: .42; }
.weather-fog { fill: url(#fogGradient); opacity: 0; pointer-events: none; }
.weather-rain { stroke: #6ca8b0; stroke-width: 2; opacity: .35; }
.weather-lightning { fill: none; stroke: #ffd67a; stroke-width: 4; filter: drop-shadow(0 0 9px #f8c75c); animation: lightning-flash 3.2s steps(1,end) infinite; }
.weather-heat { fill: none; stroke: #d78b4a; stroke-width: 3; opacity: .35; }
.weather-aurora { fill: none; stroke: url(#auroraGradient); stroke-width: 9; stroke-linecap: round; opacity: .45; filter: blur(5px); }
.isle-dim { fill: rgba(2, 6, 10, .48); pointer-events: none; }

.building-node { cursor: pointer; color: var(--content); }
.building-node[data-mood="radiant"] { color: var(--radiant); }
.building-node[data-mood="content"] { color: var(--content); }
.building-node[data-mood="weary"] { color: var(--weary); }
.building-node[data-mood="sick"] { color: var(--sick); }
.building-node[data-mood="dark"], .building-node[data-state="down"] { color: var(--dark); }
.building-node[data-state="dormant"] { color: var(--dormant); }
.building-node[data-visibility="fogbound"], .building-node[data-state="unknown"] { color: var(--fog); }
.building-halo { fill: currentColor; opacity: .1; filter: blur(6px); transition: opacity .2s; }
.building-node:hover .building-halo, .building-node:focus .building-halo { opacity: .32; }
.building-base { fill: #162935; stroke: currentColor; stroke-width: 1.6; }
.building-roof { fill: #1d3540; stroke: currentColor; stroke-width: 1.4; }
.building-window { fill: currentColor; opacity: .72; filter: drop-shadow(0 0 4px currentColor); }
.building-node[data-state="down"] .building-window, .building-node[data-state="unknown"] .building-window { opacity: .08; filter: none; }
.building-node[data-state="dormant"] .building-window { opacity: .18; filter: none; }
.building-node[data-quality="stale"] .building-base { stroke-dasharray: 3 3; }
.building-label { fill: #c8c2b1; font: 10px var(--sans); text-anchor: middle; pointer-events: none; }
.building-status-ring { fill: #08131e; stroke: currentColor; stroke-width: 2; }
.building-status-core { fill: currentColor; }
.wear-mark { stroke: #8c7863; fill: none; stroke-width: 1; opacity: .8; }
.creature-eye { fill: currentColor; }
.creature-body { fill: #0c1822; stroke: currentColor; stroke-width: 1.2; }
.watchtower .building-base { fill: #172d3e; stroke-width: 2.2; }
.watchtower .building-roof { fill: #253748; }
.watchtower .building-window { opacity: .9; }
.watchtower-beam { fill: url(#watchtowerBeam); opacity: .22; pointer-events: none; }
.watchtower[data-mood="radiant"] .watchtower-beam { opacity: .5; animation: lamp-breathe 2.6s ease-in-out infinite; }
.raven { fill: none; stroke: #d8c98f; stroke-width: 1.5; opacity: .7; }
.lighthouse-beam {
  fill: url(#lighthouseBeam);
  opacity: calc(.16 + var(--activity-intensity, 0) * .36);
  transform-origin: 8px -25px;
  animation: beam-sweep var(--activity-duration, 8s) linear infinite;
  animation-delay: var(--activity-phase, 0s);
  pointer-events: none;
}
.lighthouse-beam.parked { animation: none; transform: rotate(-23deg); opacity: .22; }
.skiff-hull { fill: #172a35; stroke: var(--dormant); stroke-width: 2; }
.skiff-sail { fill: rgba(112,137,145,.13); stroke: var(--dormant); }
.far-beacon { fill: currentColor; filter: drop-shadow(0 0 5px currentColor); }
.campfire-flame { fill: currentColor; opacity: .8; }
.campfire-flame.sleeping { opacity: .17; filter: none; }

/* Operational motion: only engine-published Building.activity may animate. */
.building-node[data-activity-state="none"] .lighthouse-beam,
.building-node[data-activity-state="unobserved"] .lighthouse-beam,
.building-node[data-activity-state="unobserved"] .theater-reel,
.building-node[data-activity-state="unobserved"] .projector-arm,
.building-node[data-activity-state="unobserved"] .harbor-crane,
.building-node[data-activity-state="unobserved"] .harbor-wake,
.building-node[data-activity-state="unobserved"] .power-flywheel,
.building-node[data-activity-state="idle"] .theater-reel,
.building-node[data-activity-state="idle"] .projector-arm,
.building-node[data-activity-state="idle"] .harbor-crane,
.building-node[data-activity-state="idle"] .harbor-wake,
.building-node[data-activity-state="idle"] .power-flywheel {
  animation: none;
}
.theater-motion,
.harbor-motion,
.power-flywheel { color: currentColor; pointer-events: none; }
.projector-arm { transform-origin: 0 0; animation: projector-work var(--activity-duration, 7s) ease-in-out infinite; animation-delay: var(--activity-phase, 0s); }
.projector-arm path { fill: currentColor; opacity: calc(.18 + var(--activity-intensity, 0) * .55); }
.theater-reel {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin-slow var(--activity-duration, 7s) linear infinite;
  animation-delay: var(--activity-phase, 0s);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  opacity: calc(.3 + var(--activity-intensity, 0) * .62);
}
.transcode-reel {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin-slow var(--accent-duration, 5s) linear infinite reverse;
  animation-delay: var(--accent-phase, 0s);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  opacity: calc(.18 + var(--accent-intensity, 0) * .72);
}
.building-node[data-accent-state="idle"] .transcode-reel,
.building-node[data-accent-state="unobserved"] .transcode-reel { animation: none; }
.harbor-crane {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  transform-origin: -14px 18px;
  animation: crane-work var(--activity-duration, 8s) ease-in-out infinite;
  animation-delay: var(--activity-phase, 0s);
  opacity: .72;
}
.harbor-ship { fill: rgba(8,19,30,.92); stroke: currentColor; stroke-width: 1.2; }
.harbor-wake {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 7 7;
  animation: harbor-wake var(--activity-duration, 8s) linear infinite;
  animation-delay: var(--activity-phase, 0s);
  opacity: calc(.1 + var(--activity-intensity, 0) * .75);
}
.power-flywheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin-slow var(--activity-duration, 9s) linear infinite;
  animation-delay: var(--activity-phase, 0s);
  fill: rgba(8,19,30,.7);
  stroke: currentColor;
  stroke-width: 1.1;
  opacity: calc(.3 + var(--activity-intensity, 0) * .58);
}
.building-node[data-power-source="battery"] .power-flywheel { animation: none; opacity: .28; stroke-dasharray: 2 2; }
.hall-presences { pointer-events: none; }
.presence-light { fill: #09131d; stroke: currentColor; stroke-width: .7; opacity: .24; }
.presence-light[data-lit="true"] { fill: currentColor; opacity: .9; filter: drop-shadow(0 0 3px currentColor); }
.hall-presences[data-count="unknown"] .presence-light { fill: none; stroke-dasharray: 1.5 1.5; opacity: .45; }
.activity-gauge { color: currentColor; pointer-events: none; }
.activity-gauge-track { fill: none; stroke: rgba(154,174,176,.35); stroke-width: 1.4; }
.activity-gauge-fill { fill: none; stroke: currentColor; stroke-width: 1.7; }
.activity-gauge-marker { fill: currentColor; filter: drop-shadow(0 0 2px currentColor); }
.activity-gauge-unknown { fill: none; stroke: var(--fog); stroke-width: 1.2; }

/* Dialogs */
.observatory-dialog { width: min(640px, calc(100vw - 28px)); max-height: min(86vh, 850px); padding: 0; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--parchment); background: #09131d; box-shadow: 0 30px 100px #000; }
.observatory-dialog::backdrop { background: rgba(2, 7, 12, .78); backdrop-filter: blur(5px); }
.dialog-frame { overflow: auto; max-height: min(86vh, 850px); }
.observatory-dialog.wide-dialog { width: min(860px, calc(100vw - 28px)); }
.almanac-dialog-frame { min-height: 470px; }
.dialog-header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 20px 22px; border-bottom: 1px solid var(--line); background: rgba(9,19,29,.96); backdrop-filter: blur(12px); }
.close-button { color: var(--muted); }
.dialog-content, .sources-grid, .almanac-content { padding: 22px; }
.dialog-intro { color: var(--muted); margin: 0; }
.inspector-status { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 15px; border: 1px solid var(--line); background: rgba(20,39,53,.55); }
.mood-portrait { width: 68px; height: 68px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; color: var(--content); background: rgba(5,12,18,.7); }
.mood-portrait[data-mood="radiant"] { color: var(--radiant); }
.mood-portrait[data-mood="weary"] { color: var(--weary); }
.mood-portrait[data-mood="sick"] { color: var(--sick); }
.mood-portrait[data-mood="dark"] { color: var(--dark); }
.mood-portrait[data-mood="none"] { color: var(--fog); }
.mood-face { width: 28px; height: 21px; border: 1px solid currentColor; border-radius: 48% 48% 42% 42%; position: relative; }
.mood-face::before, .mood-face::after { content: ""; position: absolute; top: 6px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.mood-face::before { left: 7px; } .mood-face::after { right: 7px; }
.status-copy strong { display: block; font: 19px var(--serif); color: #e2d8c1; }
.status-copy span { display: block; margin-top: 3px; color: var(--muted); }
.axis-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.axis-pill { border: 1px solid var(--line); padding: 4px 7px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.fact-heading { margin: 24px 0 10px; color: var(--gold); font-size: 10px; text-transform: uppercase; letter-spacing: .15em; }
.fact-list { margin: 0; border-top: 1px solid var(--line); }
.fact-row { display: grid; grid-template-columns: minmax(120px, 1fr) 1.4fr; gap: 16px; padding: 11px 2px; border-bottom: 1px solid rgba(144,168,170,.12); }
.fact-row dt { color: var(--muted); }
.fact-row dd { margin: 0; text-align: right; color: #e0d7c3; overflow-wrap: anywhere; }
.fact-row[data-quality="stale"] dd::after { content: "  · old truth"; color: var(--warning); font-size: 10px; }
.fact-time { display: block; color: var(--muted-2); font-size: 9px; margin-top: 2px; }
.wear-meter { height: 5px; margin-top: 8px; background: #081019; border: 1px solid var(--line); }
.wear-meter span { display: block; height: 100%; background: linear-gradient(to right, var(--gold-dark), var(--critical)); }
.sources-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.source-card { border: 1px solid var(--line); padding: 12px; background: rgba(18,34,46,.52); }
.source-card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.source-card h3 { margin: 0; font: 15px var(--serif); }
.source-state { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--content); }
.source-card[data-state="stale"] .source-state { color: var(--warning); }
.source-card[data-state="unavailable"] .source-state { color: var(--fog); }
.source-card[data-state="disabled"] .source-state { color: var(--dormant); }
.source-meta { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 5px 10px; color: var(--muted-2); font-size: 10px; }
.almanac-form { padding: 20px 22px; border-bottom: 1px solid var(--line); }
.almanac-form label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.date-row { display: flex; gap: 9px; }
.date-row input { flex: 1; min-width: 0; color: var(--parchment); background: #07111a; border: 1px solid var(--line); border-radius: 5px; padding: 10px 11px; color-scheme: dark; }
.almanac-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.almanac-entry { min-height: 90px; border: 1px solid var(--line); padding: 13px; background: rgba(17,33,45,.48); }
.almanac-entry span { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; font-size: 9px; }
.almanac-entry strong { display: block; margin-top: 5px; font: 24px var(--serif); color: #dfd4bc; }
.almanac-entry small { color: var(--muted); }
.error-card { color: #e3b2a8; border: 1px solid rgba(220,102,93,.35); padding: 14px; }

@keyframes orbit-pulse { 50% { opacity: .35; transform: scale(.78); } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes lamp-breathe { 50% { opacity: .26; } }
@keyframes beam-sweep { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(24deg); } }
@keyframes projector-work { 50% { transform: rotate(5deg); opacity: .86; } }
@keyframes crane-work { 50% { transform: rotate(7deg); } }
@keyframes harbor-wake { to { stroke-dashoffset: -28; } }
@keyframes lightning-flash { 0%, 5%, 8%, 100% { opacity: 0; } 3%, 7% { opacity: 1; } }
@keyframes drift { 50% { transform: translateX(8px); } }

@media (max-width: 1150px) {
  .masthead { grid-template-columns: 1fr auto; }
  .world-readout { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  .world-message { margin-left: 0; }
  .observatory { grid-template-columns: 1fr; }
  .right-rail { grid-template-columns: 1.4fr 1fr; }
  .map-frame, #world-map { min-height: 540px; }
}

@media (max-width: 720px) {
  .masthead { padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 13px; }
  .brand-lockup { flex: 1; }
  .brand-mark { width: 40px; height: 40px; }
  h1 { font-size: 22px; }
  .masthead-actions { width: 100%; justify-content: space-between; }
  .clock-block { margin-right: auto; text-align: left; min-width: 0; }
  .world-readout { width: 100%; text-align: left; order: 3; }
  .world-message { white-space: normal; }
  .observatory { padding: 12px; }
  .chart-heading { align-items: flex-start; }
  .chart-metrics { flex-direction: column; gap: 4px; align-items: flex-end; }
  .map-frame { aspect-ratio: auto; min-height: 520px; }
  #world-map { min-width: 900px; min-height: 520px; transform-origin: top left; }
  .map-frame { overflow: auto hidden; }
  .map-legend { position: sticky; width: max-content; left: 8px; bottom: 8px; }
  .world-index { position: sticky; float: right; width: max-content; right: 8px; bottom: 8px; }
  .right-rail { grid-template-columns: 1fr; }
  .sources-grid, .almanac-grid { grid-template-columns: 1fr; }
  .footer-line { padding: 0 14px 16px; flex-direction: column; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .lighthouse-beam { transform: rotate(-23deg); opacity: calc(.18 + var(--activity-intensity, 0) * .42); }
  .activity-gauge { opacity: 1; }
  .presence-light[data-lit="true"] { filter: none; }
}

@media (prefers-contrast: more) {
  :root { --line: rgba(225,230,218,.48); --muted: #bdc9c8; --muted-2: #a8b6b8; }
  .world-panel, .rail-card { background: #08131d; }
  .building-base, .building-roof { stroke-width: 2.5; }
}
.map-frame::before,
.map-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  transition: background .8s, opacity .8s;
}
.map-frame::before { background: rgba(4, 9, 15, .08); }
body[data-sky="day"] .map-frame::before { background: rgba(49, 88, 91, .045); }
body[data-sky="twilight"] .map-frame::before { background: linear-gradient(135deg, rgba(157, 103, 55, .075), rgba(14, 43, 55, .05)); }
body[data-sky="night"] .map-frame::before { background: rgba(1, 5, 11, .16); }
.map-frame::after { opacity: 0; background: radial-gradient(circle at 68% 36%, transparent, rgba(0,0,0,.68)); }
.map-frame[data-dimmed="true"]::after { opacity: 1; }
.traffic-bird { fill: none; stroke: #a7c0bc; stroke-width: 1.25; stroke-linecap: round; }
.kind-sigil { fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; opacity: .52; }
.creature-mouth { fill: none; stroke: currentColor; stroke-width: .9; stroke-linecap: round; }
.building-node[data-mood="radiant"] .creature-body { filter: drop-shadow(0 0 4px currentColor); }
.mood-portrait::after { content: ""; position: absolute; width: 14px; height: 6px; border-bottom: 1px solid currentColor; border-radius: 50%; transform: translateY(13px); }
.mood-portrait[data-mood="weary"]::after { height: 0; border-radius: 0; }
.mood-portrait[data-mood="sick"]::after,
.mood-portrait[data-mood="dark"]::after { border-bottom: 0; border-top: 1px solid currentColor; transform: translateY(16px); }

/* Causal inspector and Isle Observatory */
.isle-hitarea {
  fill: transparent;
  stroke: transparent;
  stroke-width: 5;
  cursor: pointer;
  pointer-events: all;
  vector-effect: non-scaling-stroke;
}
.isle-hitarea:hover,
.isle-hitarea:focus-visible {
  stroke: color-mix(in srgb, var(--isle-accent) 54%, transparent);
}
.weather-seal { color: var(--gold); cursor: pointer; }
.weather-seal circle {
  fill: rgba(7, 16, 25, .94);
  stroke: currentColor;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.weather-seal path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.weather-seal:hover,
.weather-seal:focus-visible { color: var(--gold-bright); }

.index-isle-button {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 5px 4px;
  border: 0;
  color: var(--gold-bright);
  background: none;
  text-align: left;
  cursor: pointer;
}
.index-isle-button:hover { background: rgba(255,255,255,.035); color: white; }
.index-isle-button strong { font: 15px var(--serif); }
.index-isle-button + ul { margin-top: 2px; }

.inspector-dialog { width: min(920px, calc(100vw - 28px)); }
.inspector-dialog .dialog-content { display: grid; gap: 22px; }
.inspector-dialog .dialog-content > section {
  min-width: 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.inspector-dialog .dialog-content > section:first-child {
  padding-top: 0;
  border-top: 0;
}
.section-heading {
  margin: 0 0 11px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.cause-none,
.state-explanation,
.threshold-none,
.fiction-lede { margin: 0; color: var(--muted); }
.cause-card {
  min-width: 0;
  border: 1px solid var(--line);
  background: rgba(17, 33, 45, .62);
}
.cause-primary {
  padding: 17px;
  border-left: 4px solid var(--warning);
  background: linear-gradient(110deg, rgba(93, 61, 31, .2), rgba(17, 33, 45, .68));
}
.cause-primary[data-impact="down"] { border-left-color: var(--critical); }
.cause-primary[data-impact="fogbound"] { border-left-color: var(--fog); }
.cause-primary[data-active="false"] {
  border-left-color: var(--sea-bright);
  background: linear-gradient(110deg, rgba(39, 88, 102, .19), rgba(17, 33, 45, .68));
}
.cause-card-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 14px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cause-disposition { color: var(--warning); }
.cause-card[data-active="false"] .cause-disposition { color: var(--sea-bright); }
.cause-summary {
  margin: 8px 0 5px;
  color: #eee2c9;
  font: 22px/1.25 var(--serif);
  overflow-wrap: anywhere;
}
.cause-contributor .cause-summary { font-size: 16px; }
.cause-code,
.reading-axis {
  color: var(--muted-2);
  font: 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
}
.cause-evidence,
.reading-detail { margin: 13px 0 0; }
.cause-evidence > div,
.reading-detail > div {
  display: grid;
  grid-template-columns: minmax(80px, .55fr) minmax(0, 1.45fr);
  gap: 12px;
  padding: 5px 0;
  border-top: 1px solid rgba(144,168,170,.1);
}
.cause-evidence dt,
.reading-detail dt { color: var(--muted-2); }
.cause-evidence dd,
.reading-detail dd { margin: 0; color: #d9d1be; overflow-wrap: anywhere; }
.contributor-heading {
  margin: 15px 0 8px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cause-contributors { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cause-contributor { padding: 12px; }
.state-section .axis-row { margin-top: 0; }
.state-explanation { margin-top: 10px; }

.reading-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.reading-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--content);
  background: rgba(17, 33, 45, .48);
}
.reading-card[data-severity="1"] { border-top-color: var(--warning); }
.reading-card[data-severity="2"] { border-top-color: #d9844d; }
.reading-card[data-severity="3"] { border-top-color: var(--critical); }
.reading-card[data-severity="unobserved"] { border-top-color: var(--fog); }
.reading-card header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.reading-card h4 { margin: 0; color: #ddd4c0; font: 16px var(--serif); }
.reading-value { min-width: 105px; text-align: right; }
.reading-value strong { display: block; color: #f0e4c9; font: 19px var(--serif); }
.reading-band { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.threshold-list { margin: 13px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.threshold-list li {
  display: grid;
  grid-template-columns: minmax(74px, .7fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid rgba(144,168,170,.1);
}
.threshold-list span { color: var(--muted); font-variant-numeric: tabular-nums; }
.threshold-list strong { color: #d9d1be; font-weight: 600; }
.threshold-list small { color: var(--muted-2); }
.reading-provenance { margin: 11px 0 0; color: var(--muted-2); font-size: 10px; overflow-wrap: anywhere; }
.threshold-none { margin-top: 12px; font-size: 11px; }
.reading-detail { font-size: 11px; }
.fiction-lede { margin-bottom: 10px; color: #d4cbb8; font: 17px var(--serif); }

.cause-detail-block { margin-top: 14px; padding-top: 11px; border-top: 1px solid rgba(144,168,170,.15); }
.cause-detail-heading { margin: 0 0 7px; color: var(--muted); font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }
.cause-detail-list,
.notice-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.cause-detail-row {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: baseline;
  padding: 7px 9px;
  border: 1px solid rgba(144,168,170,.13);
  background: rgba(5,13,20,.26);
}
.cause-detail-row[data-severity="error"] { border-left: 3px solid var(--critical); background: rgba(113,48,44,.14); }
.cause-detail-row[data-severity="warning"] { border-left: 3px solid var(--warning); }
.cause-detail-severity { color: var(--muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.cause-detail-row[data-severity="error"] .cause-detail-severity,
.cause-detail-row[data-severity="error"] strong { color: #edb1a6; }
.cause-detail-count { color: var(--muted); font-size: 10px; }
.cause-detail-note { margin: 7px 0 0; color: var(--muted-2); font-size: 9px; }
.activity-reading-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.activity-reading { padding: 13px; border: 1px solid var(--line); border-top: 3px solid var(--sea-bright); background: rgba(17,33,45,.48); }
.activity-reading[data-state="idle"] { border-top-color: var(--muted-2); }
.activity-reading[data-state="unobserved"] { border-top-color: var(--fog); border-top-style: dashed; }
.activity-reading header { display: flex; justify-content: space-between; gap: 14px; }
.activity-reading h4 { margin: 0; color: #ddd4c0; font: 16px var(--serif); }
.activity-code { color: var(--muted-2); font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; }
.activity-value { text-align: right; }
.activity-value strong { display: block; color: #f0e4c9; font: 19px var(--serif); }
.activity-value span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.activity-meter { height: 5px; margin: 12px 0 7px; border: 1px solid var(--line); background: #071019; }
.activity-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--sea), var(--sea-bright)); }
.activity-meter[data-unknown="true"] { border-style: dashed; background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(155,170,176,.1) 5px 9px); }
.activity-evidence { margin: 0; }
.activity-evidence > div { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 10px; padding: 4px 0; border-top: 1px solid rgba(144,168,170,.1); }
.activity-evidence dt { color: var(--muted-2); }
.activity-evidence dd { margin: 0; color: #d9d1be; overflow-wrap: anywhere; }
.activity-none { margin: 0; color: var(--muted); }
.notice-list { margin-top: 11px; }
.notice-row { display: grid; grid-template-columns: 185px minmax(0,1fr) auto; gap: 10px; padding: 9px 11px; border: 1px solid rgba(103,185,176,.28); background: rgba(39,88,102,.12); }
.notice-label { color: var(--sea-bright); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.notice-count { color: var(--muted); font-size: 10px; }

@media (max-width: 720px) {
  .inspector-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .inspector-dialog .dialog-frame { max-height: calc(100vh - 16px); }
  .inspector-dialog .dialog-content { padding: 16px; gap: 18px; }
  .reading-grid,
  .activity-reading-grid { grid-template-columns: 1fr; }
  .cause-detail-row,
  .notice-row { grid-template-columns: 1fr; gap: 3px; }
  .activity-reading header { gap: 8px; }
  .reading-card header { gap: 8px; }
  .threshold-list li { grid-template-columns: minmax(72px, .7fr) minmax(0, 1fr); }
  .threshold-list small { grid-column: 2; }
  .cause-card-heading { display: grid; }
  .cause-evidence > div,
  .reading-detail > div { grid-template-columns: 74px minmax(0, 1fr); }
  .fact-row { grid-template-columns: 1fr; gap: 3px; }
  .fact-row dd { text-align: left; }
}

@media (prefers-contrast: more) {
  .cause-card,
  .reading-card { background: #0b1721; }
  .isle-hitarea:focus-visible { stroke: var(--gold-bright); }
}