/* base.css — element reset, document defaults, and the shared button primitives
 * (.ghost / .icon-btn) used by both the landing page and the model runner.
 * Loaded after tokens.css and before each page's own stylesheet. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font: var(--font-ui); color: var(--fg); background: var(--canvas);
  display: flex; flex-direction: column;
}
input, select, button, textarea { font: inherit; color: var(--fg); }
a { color: inherit; }
[hidden] { display: none !important; }

/* Keyboard focus is always visible (accessibility). Scoped to :focus-visible so a
   mouse click doesn't draw a ring, and to interactive elements so static content
   isn't outlined. A control with its own visible focus style (e.g. the landing
   search box) keeps it — its higher-specificity rule wins. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm);
}

/* Respect a reduced-motion preference: drop the panel caret rotation, card hover
   transitions, the landing status-dot pulse, etc. (Charts already set animation:false.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Brand mark — the Magnolia logo shown beside the app title on both surfaces.
 * The source PNG is a single-color flower on a transparent field; we use it as a
 * CSS mask and fill the shape with var(--accent), so the mark recolors itself to
 * the theme's accent (a deeper blue in light, a brighter blue in dark) instead of
 * staying a fixed-color raster. Same-origin asset → CSP-safe (default-src 'self'). */
.brand-mark {
  width: 40px; height: 28px; flex-shrink: 0;
  background-color: var(--accent);
  -webkit-mask: url(../assets/icon.png) center / contain no-repeat;
  mask: url(../assets/icon.png) center / contain no-repeat;
}

/* Shared button primitives (identical on both surfaces). */
button.ghost {
  padding: 6px 12px; border: 1px solid var(--accent); background: transparent;
  color: var(--accent); border-radius: var(--radius-sm); cursor: pointer; font-weight: 600;
}
button.icon-btn {
  padding: 6px; display: inline-flex; align-items: center; justify-content: center;
  border-color: var(--line); color: var(--muted);
}
button.icon-btn:hover { color: var(--fg); border-color: var(--muted); }