/*
 * Elsewhere, the public website: the state banner (site.js: statePlaque, weatherIcon and the
 * seasons), loaded by every page that carries it.
 */

/* The Steward's Ledger's header.top, in the site's own faces (site.js: statePlaque), hung as a
   banner since the administrator's request of 2026-10-08: first under the Realm's map, then,
   the same day, at the head of the Realm, the Chronicle, the Voices, the College and the
   Operators' hall in place of the test-world strip. A cloth on a gilt rod with a dagged hem,
   dressed for the world's season. Its styles are here, apart from site.css, so the Gate stays
   light, and apart from realm.css, so no other page takes on the Realm's.
   Its figures are set in the reading face with lining figures, as longhands: a font
   shorthand would reset them.
   Each season gives its cloth (--sb-top, --sb-mid, --sb-low), its inks and its trim; every ink
   on a cloth reads at 4.5 to 1 or better against the darkest of its three. A season the page
   does not know wears the plain parchment cloth below. */
.state-banner {
  --sb-top: #f4ead3; --sb-mid: #e6d6b2; --sb-low: #d8c497;
  --sb-ink: #2a1c06; --sb-soft: #3d2a10; --sb-warn: #5a0a0f; --sb-trim: #8a6a3a;
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 1.5rem;
  width: calc(100% - 24px); max-width: 980px; margin: 1.3rem auto 1.4rem;
  padding: 0.65rem 5.2rem 0.6rem;
  box-sizing: border-box;
  color: var(--sb-ink);
  font-family: var(--read);
  font-size: 1rem;
  line-height: 1.35;
  font-variant-numeric: lining-nums tabular-nums;
  background: linear-gradient(170deg, var(--sb-top) 0%, var(--sb-mid) 55%, var(--sb-low) 100%);
  border: 3px double var(--sb-trim);
  border-radius: 3px 3px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 8px rgba(60, 35, 10, 0.25), 0 10px 22px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
/* Under the gold plaque it hangs from the plaque itself, with no gap: the top of its rod runs
   behind the plaque's lower edge (the administrator's request of 2026-10-08). */
.plaque + .state-banner { margin-top: 5px; }
/* The gilt rod it hangs from, a little wider than the cloth. */
.state-banner::before {
  content: ""; position: absolute; left: -10px; right: -10px; top: -9px; height: 8px;
  background: linear-gradient(180deg, #ffe9a6 0%, #c9a227 45%, #7a5c10 100%);
  border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
}
/* The dagged hem, in the season's trim. */
.state-banner::after {
  content: ""; position: absolute; left: -3px; right: -3px; bottom: -13px; height: 10px;
  background:
    linear-gradient(135deg, var(--sb-trim) 50%, transparent 50%) 0 0 / 14px 10px repeat-x,
    linear-gradient(225deg, var(--sb-trim) 50%, transparent 50%) 0 0 / 14px 10px repeat-x;
}
/* --season-ring: each season's own colour, on whatever wears season-<name> (the administrator's
   requests of 2026-10-08): the ring round the banner's clock and round the Realm at a glance's
   dial, set once here for both. --sb-ring is the banner's: the season's, or the plain cloth's
   trim for a season not known. */
.season-spring { --season-ring: #e488a8; }
.season-summer { --season-ring: #eaa51c; }
.season-autumn { --season-ring: #c4561f; }
.season-winter { --season-ring: #7fb2da; }
.state-banner { --sb-ring: var(--season-ring, var(--sb-trim)); }
.state-banner.season-spring {
  --sb-top: #f2f8e8; --sb-mid: #ddedc8; --sb-low: #c9e0ad;
  --sb-ink: #1c2e12; --sb-soft: #2a4219; --sb-warn: #6b1016; --sb-trim: #5f8040;
}
.state-banner.season-summer {
  --sb-top: #fff3c9; --sb-mid: #fbe08f; --sb-low: #f2c662;
  --sb-ink: #2c1b02; --sb-soft: #452a04; --sb-warn: #6b1016; --sb-trim: #a8730f;
}
.state-banner.season-autumn {
  --sb-top: #f8dcb8; --sb-mid: #edb987; --sb-low: #e09a62;
  --sb-ink: #2a1003; --sb-soft: #3c1806; --sb-warn: #5a0a0f; --sb-trim: #8f4317;
}
.state-banner.season-winter {
  --sb-top: #f5f9fd; --sb-mid: #dfeaf5; --sb-low: #c8daec;
  --sb-ink: #0f2238; --sb-soft: #1b3352; --sb-warn: #6b1016; --sb-trim: #4d7398;
}
.state-banner p { margin: 0; }
.sp-state { display: contents; }
/* Before the first report, or when none came, the lamp is all the banner says. */
.sp-state:empty + .sp-lamp, .state-banner > .sp-lamp:first-child { padding-top: 0; border-top: 0; }
/* The season's ornament at either end of the cloth, the right one turned to face the left. */
.sb-ends { display: contents; }
.sb-ornament { position: absolute; top: 50%; width: 60px; height: 60px; margin-top: -30px; overflow: visible; pointer-events: none; }
.sb-left { left: 10px; }
.sb-right { right: 10px; transform: scaleX(-1); }
.sb-stem { fill: none; stroke: #5b4526; stroke-width: 1.6; stroke-linecap: round; }
.sb-vein { fill: none; stroke: rgba(50, 22, 6, 0.55); stroke-width: 0.8; stroke-linecap: round; }
.sb-leaf { stroke: rgba(40, 20, 5, 0.55); stroke-width: 0.8; }
.season-spring .sb-leaf { fill: #6f9a45; }
.sb-petal { fill: #f4b3c8; stroke: #b5476f; stroke-width: 0.7; }
.sb-heart { fill: #f2c53d; stroke: #8a5a10; stroke-width: 0.6; }
.sb-glow { fill: rgba(255, 214, 102, 0.5); }
.sb-ray { fill: none; stroke: #b86a0c; stroke-width: 2.2; stroke-linecap: round; }
.sb-sun { fill: #ffd23f; stroke: #9a5a08; stroke-width: 1.4; }
.sb-sun-core { fill: #ffe98a; }
.season-autumn .sb-tone-a { fill: #b8401c; }
.season-autumn .sb-tone-b { fill: #d9822b; }
.season-autumn .sb-tone-c { fill: #8a5a17; }
.sb-frost { fill: none; stroke: #3f6c99; stroke-width: 1.6; stroke-linecap: round; }
.sb-frost.sb-frost-fine { stroke: #6d94bd; stroke-width: 1.1; }
.sp-clock { display: flex; align-items: center; gap: 0.45rem; }
/* The clock in a ring of the season's own colour (--sb-ring), and nothing brown round it: the
   administrator's requests of 2026-10-08 (a seasonal border, then the gilt-brown edge outside
   it replaced by the same season colour, then a black stroke on either side of that ring,
   3 pixels and then 1). The inner stroke is the padding, black under the dial; the outer is
   a shadow, so the clock takes no more room than it did. A soft shadow under it all. */
.sp-clock .draw-dial {
  box-sizing: border-box; padding: 1px; border: 5px solid var(--sb-ring); border-radius: 50%;
  background: #000; box-shadow: 0 0 0 1px #000;
}
.sp-clock .draw-dial { width: 58px; height: 58px; flex: none; filter: drop-shadow(0 1px 1px rgba(60, 35, 10, 0.4)); }
.sp-num { font-family: var(--read); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.sp-hour .sp-num { font-size: 1.25rem; }
.sp-phase { margin-left: 0.4rem; font-style: italic; color: var(--sb-soft); }
.sp-season { font-weight: 700; }
.sp-people { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem 0.9rem; }
.sp-people b { font-weight: 700; }
.sp-lamp {
  flex-basis: 100%;
  padding-top: 0.3rem;
  font-size: 0.9rem; font-style: italic; text-align: center; color: var(--sb-soft);
  border-top: 1px solid var(--sb-trim);
}
.sp-light {
  display: inline-block; width: 11px; height: 11px; margin-right: 0.45rem; border-radius: 50%; vertical-align: -1px;
  background: radial-gradient(circle at 35% 30%, #d8d2c6, #7d776d 60%, #3e3a34);
}
.sp-lamp.fresh .sp-light { background: radial-gradient(circle at 35% 30%, #d4ffd9, #3ccf5a 55%, #16702a); box-shadow: 0 0 8px rgba(60, 207, 90, 0.8); }
.sp-lamp.stale .sp-light { background: radial-gradient(circle at 35% 30%, #fff3c4, #e0b43c 55%, #8a5a10); box-shadow: 0 0 8px rgba(224, 180, 60, 0.8); }
.sp-lamp.unreachable .sp-light { background: radial-gradient(circle at 35% 30%, #ffd0d0, #e0343d 55%, #7a1016); box-shadow: 0 0 8px rgba(224, 52, 61, 0.8); }
.sp-stale { font-style: normal; font-weight: 700; color: var(--sb-ink); }
.sp-warn { font-style: normal; color: var(--sb-warn); }

/* The sky over Ember, in colour, its words for a screen reader alone. Every part is edged in a
   darker ink, so it stands clear on every season's cloth. */
.sp-sky { display: flex; align-items: center; }
.sp-weather { display: block; width: 38px; height: 38px; flex: none; overflow: visible; }
.sp-weather path, .sp-weather circle { stroke-linecap: round; stroke-linejoin: round; }
.wx-glow { fill: #ffe39a; opacity: 0.7; }
.wx-rays { fill: none; stroke: #f59a12; stroke-width: 1.6; }
.wx-rays.wx-edge { stroke: #7a3d06; stroke-width: 3; }
.wx-sun { fill: #ffc83a; stroke: #a35a06; stroke-width: 1.3; }
.wx-sun-core { fill: #ffe680; }
.wx-cloud { fill: #f4f7fa; stroke: #45525f; stroke-width: 1.5; }
.wx-cloud.wx-cloud-back { fill: #b6c1cd; stroke: #56636f; stroke-width: 1.1; }
.wx-cloud.wx-cloud-rain { fill: #dce4ec; }
.wx-cloud.wx-cloud-storm { fill: #8794a6; stroke: #28323f; }
.wx-drop { fill: none; stroke: #1660b3; stroke-width: 1.8; }
.wx-bolt { fill: #ffd23f; stroke: #7a4a00; stroke-width: 0.9; }
.wx-flake { fill: none; stroke: #1d5fa8; stroke-width: 1.4; }
.wx-wind { fill: none; stroke: #47698c; stroke-width: 1.7; }
.wx-wind.wx-wind-fine { stroke-width: 1.15; }
.wx-fog { fill: none; stroke: #55616e; stroke-width: 1.8; }
.wx-mist { fill: none; stroke: #78838f; stroke-width: 1.2; }
.wx-glow.wx-glow-heat { fill: #ffc078; }
.wx-rays.wx-rays-heat { stroke: #ff6a1a; }
.wx-rays.wx-rays-heat.wx-edge { stroke: #7a2306; }
.wx-sun.wx-sun-heat { fill: #ff8f1f; stroke: #9a3306; }
.wx-wave { fill: none; stroke: #ff6a1a; stroke-width: 1.5; }
.wx-wave.wx-edge { stroke: #7a2306; stroke-width: 2.9; }
/* Gentle, looping and small; never for a reader who asks for stillness, who sees it still. */
@media (prefers-reduced-motion: no-preference) {
  .sp-weather .wx-turning { transform-box: fill-box; transform-origin: center; animation: wx-turn 20s linear infinite; }
  .sp-weather .wx-glow { animation: wx-breathe 3.2s ease-in-out infinite alternate; }
  .sp-weather .wx-drift { animation: wx-drift 5s ease-in-out infinite alternate; }
  .sp-weather .wx-drift-back { animation: wx-drift 6.5s ease-in-out infinite alternate-reverse; }
  .sp-weather .wx-drop { animation: wx-fall 1.1s linear infinite; }
  .sp-weather .wx-drop.wx-d2 { animation-delay: -0.37s; }
  .sp-weather .wx-drop.wx-d3 { animation-delay: -0.74s; }
  .sp-weather .wx-bolt { animation: wx-flash 3.6s linear infinite; }
  .sp-weather .wx-flake { animation: wx-snow 3.6s ease-in-out infinite; }
  .sp-weather .wx-flake.wx-gust { animation: wx-gust 1.5s linear infinite; }
  .sp-weather .wx-flake.wx-d2 { animation-delay: -1.2s; }
  .sp-weather .wx-flake.wx-d3 { animation-delay: -2.4s; }
  .sp-weather .wx-flake.wx-gust.wx-d2 { animation-delay: -0.5s; }
  .sp-weather .wx-flake.wx-gust.wx-d3 { animation-delay: -1s; }
  .sp-weather .wx-wind { animation: wx-sway 1.8s ease-in-out infinite alternate; }
  .sp-weather .wx-slide { animation: wx-slide 4.5s ease-in-out infinite alternate; }
  .sp-weather .wx-slide-back { animation: wx-slide 4.5s ease-in-out infinite alternate-reverse; }
  .sp-weather .wx-shimmer { animation: wx-shimmer 1.6s ease-in-out infinite alternate; }
  .sp-weather .wx-shimmer.wx-d2 { animation-delay: -0.8s; }
}
@keyframes wx-turn { to { transform: rotate(360deg); } }
@keyframes wx-breathe { from { opacity: 0.4; } to { opacity: 0.9; } }
@keyframes wx-drift { from { transform: translateX(-1.3px); } to { transform: translateX(1.3px); } }
@keyframes wx-fall {
  0% { transform: translate(0.7px, -3px); opacity: 0; }
  25%, 75% { opacity: 1; }
  100% { transform: translate(-0.9px, 3.2px); opacity: 0; }
}
@keyframes wx-flash {
  0%, 82%, 100% { opacity: 1; fill: #ffd23f; }
  84% { opacity: 0.25; }
  86% { opacity: 1; fill: #fff6c0; }
  88% { opacity: 0.4; }
  90% { opacity: 1; fill: #fff6c0; }
  94% { fill: #ffd23f; }
}
@keyframes wx-snow {
  0% { transform: translate(-0.8px, -2px); opacity: 0; }
  20%, 80% { opacity: 1; }
  50% { transform: translate(0.9px, 0.4px); }
  100% { transform: translate(-0.4px, 2.6px); opacity: 0; }
}
@keyframes wx-gust {
  0% { transform: translate(-3.5px, -0.8px); opacity: 0; }
  25%, 75% { opacity: 1; }
  100% { transform: translate(3.5px, 1px); opacity: 0; }
}
@keyframes wx-sway { from { transform: translateX(-0.9px); } to { transform: translateX(1.1px); } }
@keyframes wx-slide { from { transform: translateX(-1.8px); } to { transform: translateX(1.8px); } }
@keyframes wx-shimmer { from { transform: translateY(0.6px); opacity: 0.55; } to { transform: translateY(-0.6px); opacity: 1; } }
@media (max-width: 640px) {
  .state-banner { gap: 0.2rem 1rem; padding: 0.55rem 2.5rem 0.55rem; font-size: 0.95rem; }
  .sb-ornament { top: 6px; width: 30px; height: 30px; margin-top: 0; }
  .sb-left { left: 5px; }
  .sb-right { right: 5px; }
  .sp-clock .draw-dial { width: 50px; height: 50px; }
  .sp-weather { width: 32px; height: 32px; }
}