/* BuildWise design tokens.
   Calm, precise: flat surfaces + one warm accent + soft-shadow depth.
   No gradients, no glass, no grain.

   THEME: light is the default; dark is opt-in and remembered. The palette below
   is the light one, and the dark values are restated under
   :root[data-theme="dark"] further down. Both are the same tokens borrowed from
   rmprice.co rather than invented here, so the demo and the site it is served
   from cannot drift apart.

   Deliberately NOT keyed to prefers-color-scheme: the default is light for
   everyone, and the toggle is what changes it. */
:root {
  /* ---- Palette (light) ---- */
  --bg: #f7f5f1;
  --surface: #ffffff;
  --card: #ffffff;
  --text: #16161a;        /* primary */
  --text-dim: #4c4b54;    /* secondary */
  --text-faint: #77757f;  /* labels, meta */
  --accent: #9a6633;      /* copper, darkened so it holds contrast on a light ground */

  /* ---- Hairline borders (black at very low alpha on light) ---- */
  --border: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.14);

  /* ---- Radii ---- */
  --r-card: 16px;
  --r-el: 12px;
  --r-pill: 24px;   /* buttons / badges */
  --r-toast: 6px;

  /* ---- Depth: soft layered shadows, not borders ----
     Lighter on a light ground: the same 0.35 alpha that reads as depth against
     near-black reads as dirt against off-white. */
  --shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.12);
  --accent-glow: 0 0 10px rgba(154, 102, 51, 0.45);   /* live-status dot pulse */

  /* ---- Motion: one shared curve everywhere ---- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* ---- Typography ---- */
  --font-display: "Fraunces", Georgia, serif;            /* headings, weight 300 (card h3 -> 400) */
  --font-body: "Inter", system-ui, sans-serif;           /* body / UI, 400-700 */
  --font-mono: "JetBrains Mono", ui-monospace, monospace; /* meta + slicer values in the settings table */

  /* ---- Layout ---- */
  --maxw: 1100px;   /* roomy, calm vertical rhythm */
}

/* ---- Dark theme: opt-in, remembered, applied before first paint ----
   The original BuildWise palette, restated as an override rather than left as
   the default. Only tokens are redefined here - no component ever styles itself
   inside this block, so a new component gets both themes for free. */
:root[data-theme="dark"] {
  --bg: #0a0a0c;
  --surface: #131316;
  --card: #16161a;
  --text: #e8e8ec;
  --text-dim: #a8a8b0;
  --text-faint: #7a7a85;
  --accent: #d4a574;

  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.08);

  --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 14px 40px rgba(0, 0, 0, 0.5);
  --accent-glow: 0 0 12px var(--accent);
}

/* ---- The toggle itself ---- */
.theme-btn {
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.55rem;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.theme-btn:hover { color: var(--accent); border-color: var(--accent); }
.theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-btn svg { width: 18px; height: 18px; display: block; }

/* Show the icon for the theme you would switch TO, not the one you are in. */
:root[data-theme="dark"] .theme-btn .sun { display: none; }
:root:not([data-theme="dark"]) .theme-btn .moon { display: none; }

/* Keep the eyebrow where it was: grouping it with the toggle means the header
   still reads brand-left / status-right rather than spreading three items. */
.header-right { display: flex; align-items: center; gap: 14px; }

/* ---- STL preview ----
   Sized by aspect-ratio rather than a fixed height so it holds its shape on a
   phone. The canvas is transparent; the card behind it supplies the ground. */
.preview-wrap { margin: 4px 0 26px; }
#stlView {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--r-el);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
}
.preview-legend {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 2px 0;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint);
}
.preview-legend .swatch {
  width: 11px; height: 11px; border-radius: 3px; display: inline-block;
  border: 1px solid var(--border);
}
.preview-legend .swatch.base { background: #b4aca3; }
.preview-legend .swatch.over { background: var(--accent); margin-left: 12px; }
:root[data-theme="dark"] .preview-legend .swatch.base { background: #6f6a66; }

/* The `hidden` attribute is only a UA-stylesheet `display:none`, so ANY author
   rule that sets display beats it. .reasoning-toggle sets display:flex, so
   marking it hidden did nothing and the control stayed on screen looking
   functional. Make the attribute mean what it says, everywhere. */
[hidden] { display: none !important; }

/* Picture beside the parameters, once there is room for both. Below that the
   preview stacks above the numbers rather than shrinking into a stamp. */
@media (min-width: 900px) {
  .result-card:has(.preview-wrap:not([hidden])) .result-body { margin-top: 0; }
  .result-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
  .result-split .preview-wrap { margin: 0; position: sticky; top: 12px; }
  .result-split #stlView { aspect-ratio: 4 / 3; }
}
#stlView { cursor: grab; touch-action: none; }
#stlView.grabbing { cursor: grabbing; }

/* The key field inherited no width rule, so it rendered as a stub barely wider
   than its own placeholder. Match the other inputs. */
#apikey { width: 100%; box-sizing: border-box; }

/* Says why a result is missing its settings. Deliberately prominent: it is the
   answer to the first question a disappointed visitor has. */
.fallback-note {
  border-left: 3px solid var(--accent);
  padding: 10px 0 10px 14px;
  margin: 0 0 22px;
  color: var(--text-dim);
}

/* The part, the verdict on it, and the settings - all three visible together.
   The render sits beside the Reality Check because they are about the same
   thing, and the settings table runs full width underneath because at half
   width its third column is squeezed off the edge. */
@media (min-width: 900px) {
  .result-card.has-advice .result-split { display: block; }
  .result-card.has-advice .result-top {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-bottom: 8px;
  }
  .result-card.has-advice .preview-wrap { position: static; margin: 0; }
  .result-card.has-advice #stlView { aspect-ratio: 4 / 3; }
  /* The lifted section should not re-introduce its own top margin. */
  .result-card.has-advice #rcSlot .md-section { margin-top: 0; }
  .result-card.has-advice #rcSlot h2 { margin-top: 0; }
}
/* Long values should never widen the table past its container. */
#resultBody table.settings { width: 100%; table-layout: auto; }
#resultBody { overflow-x: auto; }