/* Coastal palette for the hosted Yuzora app. Local DevSim keeps its own theme. */
.yuzora-app {
  color-scheme: light dark;
  --bg: light-dark(#f1f2f3, #151719);
  --panel: light-dark(#fcfbf9, #22262a);
  --surface-raised: light-dark(#e7ebee, #2b3136);
  --text: light-dark(#1b1e21, #f2efeb);
  --muted: light-dark(#4d555c, #a5adb3);
  --dim: light-dark(#5e676f, #a5adb3);
  --accent: light-dark(#435563, #adbbc7);
  --on-accent: light-dark(#ffffff, #151719);
  --line: light-dark(#cdd2d7, #3b4146);
  --line-strong: light-dark(#a8b1b9, #59636c);
  --selected: color-mix(in srgb, var(--accent) 12%, var(--panel));
  --accent-border: color-mix(in srgb, var(--accent) 42%, var(--line));
  --pass: light-dark(#315749, #a8c9b2);
  --fail: light-dark(#963f35, #ffb4a9);
  --error: light-dark(#8e3656, #f1a9c0);
  --fault: light-dark(#775516, #f1cf92);
  --inconclusive: var(--fault);
  --notrun: var(--dim);
  background: var(--bg);
}

:root[data-theme="light"] .yuzora-app { color-scheme: light; }
:root[data-theme="dark"] .yuzora-app { color-scheme: dark; }
.yuzora-app::before { display: none; }
.yuzora-app .bar { position: relative; z-index: 3; background: var(--panel); }
.yuzora-app .run-bar { overflow: visible; }
.yuzora-app .preference-bar { justify-content: space-between; }
.yuzora-app .workspace-nav { gap: 4px; height: auto; }
.yuzora-app .workspace-nav a {
  position: relative;
  min-height: 44px;
  justify-content: center;
  font: 550 14px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
}
.yuzora-app .workspace-nav a:hover { color: var(--text); background: var(--selected); }
.yuzora-app .workspace-nav a[aria-current] { color: var(--text); }
.yuzora-app .workspace-nav a[aria-current]::after {
  content: '';
  position: absolute;
  inset: auto calc(50% - 18px) 0;
  height: 2px;
  background: var(--accent);
}
.yuzora-app .auth { width: min(calc(100% - 32px), 440px); }
.yuzora-app .wordmark img { filter: url(#app-wordmark-tone); mask-image: none; }
.app-brand-filter { position: absolute; }
.app-brand-filter feFlood { flood-color: var(--text); }

.yuzora-app input, .yuzora-app select, .yuzora-app textarea {
  accent-color: var(--accent);
}
.yuzora-app input:not([type="checkbox"], [type="radio"]) { background: var(--panel); }
.yuzora-app button.primary,
.yuzora-app .results-panel button.wide.primary,
.yuzora-app .seg-ctl button.on:not(.soft) { color: var(--on-accent); }
.yuzora-app :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app-preferences { display: flex; align-items: center; gap: 2px; flex: none; margin-left: auto; }
.app-preferences[hidden], .app-icon-control svg[hidden] { display: none; }
.yuzora-app .app-icon-control {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.app-icon-control::-webkit-details-marker { display: none; }
.app-icon-control svg { width: 20px; height: 20px; }
.yuzora-app .app-icon-control:hover, .app-language[open] > summary {
  background: var(--selected);
  border-color: var(--line);
}
.app-language { position: relative; }
.app-language-options {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  padding: 4px;
  min-width: 110px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 8px 22px #0003;
}
.yuzora-app .app-language-options button {
  width: 100%;
  min-height: 44px;
  padding: 5px 12px;
  border: 0;
  background: var(--selected);
  color: var(--text);
  font: 500 14px var(--sans);
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
}

/* Hosted reports reuse DevSim templates. Keep the map dark for the recorded
   white true-position and blue estimate paths, while theming its controls. */
.yuzora-app.run-page :is(.rows-panel, .strip, .scen-block, .side, .panel-box, .map, .crumb-row) {
  background: var(--panel);
  border-color: var(--line);
}
.yuzora-app.run-page .map:not(.flight-path-panel), .yuzora-app.run-page #map {
  background: #181d23;
}
.yuzora-app.run-page .map:not(.flight-path-panel) .panel-head {
  --text: #f2efeb;
  --muted: #c1c9d0;
  --dim: #b4bdc6;
}
.yuzora-app.run-page .picture .panel-head {
  --text: #f2efeb;
  --muted: #c1c9d0;
  --dim: #b4bdc6;
}
.yuzora-app.run-page :is(.srow.kw-when, .srow.lit, .nowbox) { background: var(--selected); }
.yuzora-app.run-page .nowbox { border-color: var(--accent-border); }
.yuzora-app.run-page .srow.failed .sent { color: var(--fail); }
.yuzora-app.run-page .lane .mode-text { fill: var(--text); }
.yuzora-app.run-page :is(.lane .mode-text.active, .axis .knob text) { fill: var(--on-accent); }
.yuzora-app.run-page :is(.bar-gauge, .mbar) { background: var(--line); }
.yuzora-app.run-page .flight-path-controls button[aria-pressed="true"] { background: var(--selected); }
.yuzora-app.run-page .sw.drone { background: #eef2f5; box-shadow: 0 0 0 3px #617684; }
.yuzora-app.run-page :is(.lane, .chart) [stroke="#5CE1FF"] { stroke: var(--accent); }
.yuzora-app.run-page .lane [fill="#5CE1FF"] { fill: var(--accent); }
.yuzora-app.run-page :is(.lane, .axis) [fill="#8A96A3"] { fill: var(--dim); }
.hosted-replay-scroll-hint { display: none; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .yuzora-app :is(#app, main.rep, main.run-main3) { view-transition-name: yuzora-content; }
  .yuzora-app #app:has(.add-drone-intro) { view-transition-name: none; }
  .add-drone-intro ~ #drone-form { animation: workspace-arrive 200ms cubic-bezier(.22, 1, .36, 1) both; }
  ::view-transition-group(root), ::view-transition-group(yuzora-content) { animation: none; }
  ::view-transition-old(root), ::view-transition-old(yuzora-content) { animation: none; opacity: 0; }
  ::view-transition-new(root) { animation: none; }
  ::view-transition-new(yuzora-content) { animation: workspace-arrive 140ms cubic-bezier(.22, 1, .36, 1) both; }
  .yuzora-app .workspace-nav a { transition: background-color 120ms ease-out, color 120ms ease-out; }
}
@keyframes workspace-arrive {
  from { opacity: .78; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .yuzora-app .bar .app-preferences { order: 1; }
  .yuzora-app .run-bar {
    height: auto;
    min-height: 62px;
    flex-wrap: wrap;
    padding-block: 8px;
  }
  .yuzora-app .run-bar .wordmark { order: -2; margin-right: auto; }
  .yuzora-app .run-bar .app-preferences { order: -1; }
  .yuzora-app .run-bar nav { order: 4; width: 100%; height: 36px; }
  .yuzora-app.run-page .scen-name { flex-wrap: wrap; gap: 4px 12px; }
  .yuzora-app.run-page .scen-name .mono { margin-left: 0; white-space: normal; }
  .yuzora-app.run-page .picture .panel-head { flex-wrap: wrap; gap: 3px 10px; }
  .yuzora-app.run-page .picture .panel-head .mono { white-space: normal; }
  .hosted-replay-scroll-hint { display: block; margin: 12px 20px 0; color: var(--muted); font-size: 12px; }
  .yuzora-app.run-page:not(.report-page) .rows-panel { overflow-x: auto; }
  .yuzora-app.run-page:not(.report-page) :is(.rows-head, .rows-window) { min-width: 850px; }
}