/* The trial page around the app (docs/design/design_system.md): neutral greys,
   one accent (Strata teal), quiet type, 4/8 px rhythm. */
:root {
  --ink: #1D2125; --muted: #5B636E; --faint: #9AA1AA; --panel: #FFFFFF; --canvas: #F4F5F7;
  --border: #DEE1E6; --track: #EDEFF2; --accent: #1F6F8B; --accent-fill: #1F6F8B; --accent-soft: #E2EFF3;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E3E6EA; --muted: #9BA3AD; --faint: #646C77; --panel: #17191D; --canvas: #0F1114;
    --border: #2D3138; --track: #282C32; --accent: #6CC4CC; --accent-fill: #23798A; --accent-soft: #1C3640;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #E3E6EA; --muted: #9BA3AD; --faint: #646C77; --panel: #17191D; --canvas: #0F1114;
  --border: #2D3138; --track: #282C32; --accent: #6CC4CC; --accent-fill: #23798A; --accent-soft: #1C3640;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--canvas); color: var(--ink);
  font: 13px/1.4 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  display: flex; flex-direction: column;
}
button { font: inherit; color: inherit; }

.bar {
  flex: 0 0 36px; display: flex; align-items: center; gap: 4px; padding: 0 12px;
  background: var(--panel); border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden;
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 600; margin-right: 12px; }
.tag { font-weight: 400; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 6px; font-size: 12px; }
.spacer { flex: 1; }
.link {
  background: none; border: 0; border-radius: 4px; padding: 4px 8px; color: var(--ink); cursor: pointer; text-decoration: none;
}
.link:hover { background: var(--track); }
.link:focus-visible, .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.seg { display: inline-flex; background: var(--track); border-radius: 4px; padding: 2px; margin-right: 4px; }
.seg button { background: none; border: 0; border-radius: 3px; padding: 2px 10px; cursor: pointer; color: var(--muted); }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--border); }

#stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#canvas { display: block; outline: none; }

#loader {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--canvas);
}
#loader .card { width: min(440px, calc(100% - 32px)); }
#loader h1 { font-size: 22px; font-weight: 600; margin: 12px 0 4px; }
#loader p { color: var(--muted); margin: 0 0 16px; }
.progress { height: 4px; background: var(--track); border-radius: 2px; overflow: hidden; }
#progress-fill { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
#loader .status { font-size: 12px; margin-top: 8px; }
#loader.failed .status { color: #CC2929; }

#drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 340px; max-width: 100%; overflow-y: auto;
  background: var(--panel); border-left: 1px solid var(--border); padding: 12px 16px 16px;
  box-shadow: -8px 0 24px rgba(0, 0, 0, .08);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
#drawer h2 { font-size: 16px; font-weight: 600; margin: 4px 0; }
.x { background: none; border: 0; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); border-radius: 4px; padding: 0 6px; }
.x:hover { background: var(--track); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.steps { padding-left: 20px; margin: 12px 0; }
.steps li { margin: 0 0 12px; color: var(--faint); }
.steps button {
  display: block; background: none; border: 0; padding: 0; margin: 0 0 2px; cursor: pointer;
  color: var(--accent); font-weight: 600; text-align: left;
}
.steps button:hover { text-decoration: underline; }
.steps span { color: var(--muted); }

#toast {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); max-width: calc(100% - 32px);
  background: var(--ink); color: var(--panel); border-radius: 4px; padding: 8px 12px; font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

@media (max-width: 900px) {
  .bar .link[href], #dl-project { display: none; }
}