/* Republic scene: fixed, inert and local. The flag keeps official 30:18
   geometry at 97vw unless a wide/short viewport needs more world around it. */
.trinbago-scene { display: none; }
:root[data-palette="republic"] body { isolation: isolate; background: #02050c; }
:root[data-palette="republic"] .trinbago-scene {
  --trinbago-flag-width: min(calc((100vw - var(--drag-bar-width, 10px)) * .97), 136.6667vh);
  --trinbago-flag-height: min(calc((100vw - var(--drag-bar-width, 10px)) * .582), 82vh);
  --trinbago-sow-y: calc(100dvh - 66px);
  position: fixed; inset: 0; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh;
  z-index: -1; display: block; overflow: hidden; box-sizing: border-box;
  pointer-events: none; contain: strict; background: #061020;
  /* Soften the one scene, never individual panes: stripe edges stay aligned. */
  filter: blur(var(--background-blur, 6px));
}
.trinbago-scene-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.trinbago-flag-stage { position: absolute; z-index: 2; inset: 0 auto auto 0; width: var(--trinbago-flag-width); height: var(--trinbago-flag-height); }
.trinbago-flag {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  filter: saturate(1.04) contrast(1.02); shape-rendering: geometricPrecision;
}
.trinbago-flag-pole {
  position: absolute; z-index: 2; left: 0; top: 0; width: clamp(5px, .65vw, 12px);
  height: calc(var(--trinbago-flag-height) + max(16vh, 120px));
  border-radius: 0 0 999px 0; background: linear-gradient(90deg, #6f7377, #e5e8e8 42%, #777c80 68%, #323538);
  box-shadow: 2px 0 8px #0008;
}
.trinbago-world-extent {
  position: absolute; z-index: 1; inset: 0;
  overflow: hidden; background: #102345;
}
.trinbago-world-progressive { display: block; width: 100%; height: 100%; }
.trinbago-sow-grass {
  position: absolute; z-index: 3; left: 0; right: 0; top: var(--trinbago-sow-y); bottom: 0;
  min-height: 58px; opacity: .72;
  background:
    linear-gradient(165deg, transparent 0 35%, #1f663b 36% 42%, transparent 43%) 0 0 / 27px 34px repeat-x,
    linear-gradient(195deg, transparent 0 35%, #358044 36% 43%, transparent 44%) 12px 2px / 31px 38px repeat-x,
    linear-gradient(180deg, transparent, #164d31 72%);
}
.trinbago-sow-plot {
  position: absolute; z-index: 4; top: calc(var(--trinbago-sow-y) - 34px);
  right: var(--trinbago-garden-right, calc(var(--drag-bar-width, 10px) + 85px));
  width: clamp(116px, 18vw, 260px); height: clamp(82px, 12vh, 148px);
  border-radius: var(--radius, .85rem); overflow: visible;
  background: linear-gradient(160deg, rgb(93 61 39 / 74%), rgb(54 35 27 / 86%));
  box-shadow: 0 5px 14px rgb(0 0 0 / 28%), inset 0 0 0 2px rgb(173 125 72 / 35%);
}
.tb-plot-soil { position: absolute; inset: 10px 10px 8px; border-radius: 46% 54% 42% 58%; background: repeating-linear-gradient(168deg, #69462d 0 4px, #543521 4px 8px); opacity: .92; }
.trinbago-sow-garden { position: absolute; z-index: 1; right: 18%; bottom: 8%; width: 62px; height: 48px; }
.tb-garden-soil { position: absolute; left: 2px; right: 2px; bottom: 0; height: 17px; border-radius: 50%; background: #4c3021; box-shadow: 0 2px 0 #261d16; }
.tb-garden-sprout { position: absolute; left: 29px; bottom: 9px; width: 3px; height: 30px; background: #a1c862; border-radius: 3px; }
.tb-garden-sprout::before, .tb-garden-sprout::after { content: ""; position: absolute; bottom: 13px; width: 17px; height: 10px; border-radius: 100% 0; background: #a7d46a; }
.tb-garden-sprout::before { right: 2px; transform: rotate(27deg); }
.tb-garden-sprout::after { left: 2px; transform: rotate(-57deg) scaleX(-1); }
.trinbago-scene[data-scene-phase="day"] .tb-sky-night,
.trinbago-scene[data-scene-phase="day"] .tb-stars,
.trinbago-scene[data-scene-phase="day"] .tb-moon { opacity: 0; }
.trinbago-scene[data-scene-phase="day"] .tb-sky-day,
.trinbago-scene[data-scene-phase="day"] .tb-sun { opacity: 1; }
.trinbago-scene[data-scene-phase="twilight"] .tb-sky-day { opacity: .38; }
.trinbago-scene[data-scene-phase="twilight"] .tb-sky-night { opacity: .72; }
.trinbago-scene[data-scene-phase="twilight"] .tb-stars { opacity: .56; }
.trinbago-scene[data-scene-phase="twilight"] .tb-sun { opacity: .34; }
.trinbago-scene[data-scene-phase="twilight"] .tb-moon { opacity: .75; }
.trinbago-scene[data-scene-phase="night"] .tb-sky-day,
.trinbago-scene[data-scene-phase="night"] .tb-sun { opacity: 0; }
.trinbago-scene[data-scene-phase="night"] .tb-sky-night,
.trinbago-scene[data-scene-phase="night"] .tb-stars,
.trinbago-scene[data-scene-phase="night"] .tb-moon { opacity: 1; }
.trinbago-scene .tb-sky,
.trinbago-scene .tb-stars,
.trinbago-scene .tb-sun,
.trinbago-scene .tb-moon { transition: opacity 1.2s ease; }

/* Application glass stays readable while the single scene remains continuous. */
/* One translucent layer per surface. Never blur or repaint the flag here: a
   backdrop filter bends stripe edges at each panel boundary. */
:root[data-palette="republic"] :is(.sidebar, .lime-top-nav, .navigation-dock, .composer, .wave-view-shell) {
  background-image: none;
  background-color: rgb(16 13 16 / 55%);
}
:root[data-palette="republic"] :is(.sidebar, .main, .lime-top-nav, .navigation-dock, .settings-panel, .composer, .wave-view-shell, .panel, .mw-window, .mw-chrome, .settings-header, .lime-swipe-surface, .lime-multitask-header) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
:root[data-palette="republic"] .main { background-image: none; background-color: transparent; }
:root[data-palette="republic"] body:not(.single-tab-active):not(.multi-window-has-content) .main {
  background-color: rgb(16 13 16 / 62%);
}
:root[data-palette="republic"] .settings-panel {
  background-image: none;
  background-color: rgb(16 13 16 / 58%);
}
:root[data-palette="republic"] .panel:not(.warn) {
  background-image: none;
  background-color: rgb(16 13 16 / 55%);
}
:root[data-palette="republic"] .panel-multitask-workspace { background: transparent; }
:root[data-palette="republic"] .panel-multitask-workspace > .mw-window { background: rgb(16 13 16 / 18%); }
:root[data-palette="republic"] .lime-list-item { background: transparent; }
:root[data-palette="republic"] .lime-swipe-surface { background: rgb(16 13 16 / 46%); }
:root[data-palette="republic"] .lime-list-item:is(.selected, .bulk-selected) .lime-swipe-surface { background: rgb(16 13 16 / 61%); }
:root[data-palette="republic"] :is(.mw-chrome, .settings-header, .lime-multitask-header) { background: color-mix(in srgb, #100d10 var(--tab-section-opacity, 62%), transparent) !important; }
:root[data-palette="republic"] .panel.warn {
  background-image: none;
  background-color: color-mix(in srgb, var(--warn-surface) 82%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .trinbago-scene .tb-sky, .trinbago-scene .tb-stars, .trinbago-scene .tb-sun, .trinbago-scene .tb-moon { transition: none; }
}
@media (max-height: 520px) {
  :root[data-palette="republic"] .trinbago-scene { --trinbago-sow-y: calc(100dvh - 66px); }
}

/* Republic chrome is clear glass. Text/borders identify controls without
   repainting, blurring or restarting any part of the continuous flag/world. */
:root[data-palette="republic"] :is(.primary-nav, .navigation-dock, .lime-top-nav-actions, #global-chip-actions,
 .nav-tab, .ghost-btn, .composer-collapse-btn, .scope-select, .multi-layout-select) {
  background: transparent !important; box-shadow: none;
}
:root[data-palette="republic"] :is(.sidebar, .lime-top-nav, .settings-panel, .composer, .wave-view-shell, .panel:not(.warn)) {
  background-color: rgb(16 13 16 / 22%);
}
:root[data-palette="republic"] :is(.lime-swipe-surface, .lime-list-item:is(.selected, .bulk-selected) .lime-swipe-surface) { background: rgb(16 13 16 / 18%); }
:root[data-palette="republic"] .nav-tab:is(.nav-tab-active,[aria-expanded="true"],[aria-selected="true"]) {
  border-color: var(--accent); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent);
}

/* Roadmap live evidence changes in place. Keep its sticky chrome fully
   visible; the shared panel refresh fade is a visual flash during SSE reads. */
:root[data-palette="republic"] #roadmap-panel.panel-refreshing,
:root[data-palette="republic"] #roadmap-body.panel-refreshing {
  opacity: 1;
  transition: none;
}