/* ==========================================================================
   sc2.eole.me — Build Order Forge
   eole.me brand guidelines: see www/DESIGN_SYSTEM.md and www/CSS_TOPOLOGY.md.
   A standalone sub-page, so a local stylesheet reusing the guidelines' token
   *names*, the way trail-mapper (gpx.eole.me) does.
   Persona: business mode (Julien) — the tool is analytical, and the guidelines'
   neon blue is also the colour of Terran interfaces.
   ========================================================================== */

:root {
  /* Business mode — dark theme (DESIGN_SYSTEM.md §4) */
  --bg-color:        #080b11;
  --bg-elevated:     #0d1420;
  --card-bg:         rgba(15, 23, 42, 0.40);
  --card-hover-bg:   rgba(15, 23, 42, 0.70);
  --text-color:      #f1f5f9;
  --text-muted:      #94a3b8;
  --text-faint:      #64748b;

  --accent-color:    #38bdf8;
  --accent-hover:    #7dd3fc;
  --accent-glow:     rgba(56, 189, 248, 0.25);
  --accent-ink:      #061018;

  /* Game figures: supply, timings, income */
  --secondary-color: #f59e0b;
  --secondary-hover: #fbbf24;

  --border-color:    rgba(255, 255, 255, 0.08);
  --border-hover:    rgba(255, 255, 255, 0.16);
  --error-color:     #ef4444;
  --error-bg:        rgba(239, 68, 68, 0.12);

  /* Guidelines typography (DESIGN_SYSTEM.md §3). Fira Code is the mono of the
     standalone sub-pages, hence Google Fonts here rather than self-hosting. */
  --font-title: 'Outfit', 'Inter', system-ui, sans-serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;

  --theme-transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 10px;
  --container: 1000px;
}

/* Business mode — light theme (DESIGN_SYSTEM.md §4).
   Three states, like trail-mapper: light, dark, system. The script stamps
   `theme-light` or `theme-dark` on <html> and <body> before first paint; the
   media query is only a fallback for when JavaScript is absent. The `:not`
   guarantees an explicit dark choice beats a light system. */
@media (prefers-color-scheme: light) {
  :root:not(.theme-dark) {
    /* The guidelines document #f8fafc here. On a full page of tables that reads
       as glare, so the ground is pulled down and tinted toward the accent, and
       the surfaces stop being pure white. A deliberate departure. */
    --bg-color:        #e8edf3;
    --bg-elevated:     #f7f9fb;
    --card-bg:         rgba(252, 253, 255, 0.72);
    --card-hover-bg:   rgba(255, 255, 255, 0.92);
    --text-color:      #131c2b;
    --text-muted:      #4a5568;
    --text-faint:      #6b7688;

    --accent-color:    #0284c7;
    --accent-hover:    #0369a1;
    --accent-glow:     rgba(2, 132, 199, 0.18);
    --accent-ink:      #ffffff;

    --secondary-color: #b45309;
    --secondary-hover: #92400e;

    --border-color:    rgba(15, 23, 42, 0.10);
    --border-hover:    rgba(15, 23, 42, 0.20);
    --error-bg:        rgba(239, 68, 68, 0.10);
  }
}

:root.theme-light {
    /* The guidelines document #f8fafc here. On a full page of tables that reads
       as glare, so the ground is pulled down and tinted toward the accent, and
       the surfaces stop being pure white. A deliberate departure. */
    --bg-color:        #e8edf3;
    --bg-elevated:     #f7f9fb;
    --card-bg:         rgba(252, 253, 255, 0.72);
    --card-hover-bg:   rgba(255, 255, 255, 0.92);
    --text-color:      #131c2b;
    --text-muted:      #4a5568;
    --text-faint:      #6b7688;

    --accent-color:    #0284c7;
    --accent-hover:    #0369a1;
    --accent-glow:     rgba(2, 132, 199, 0.18);
    --accent-ink:      #ffffff;

    --secondary-color: #b45309;
    --secondary-hover: #92400e;

    --border-color:    rgba(15, 23, 42, 0.10);
    --border-hover:    rgba(15, 23, 42, 0.20);
    --error-bg:        rgba(239, 68, 68, 0.10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;              /* CSS_TOPOLOGY.md §6: dvh as a progressive upgrade */
  background: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--theme-transition), color var(--theme-transition);
}

/* Ambient halo, like the "ambient glows" in layouts.css. Decorative and inert. */
body::before {
  content: "";
  position: fixed;
  inset: -20% 0 auto 0;
  height: 60vh;
  background: radial-gradient(60% 60% at 50% 0%, var(--accent-glow), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

h1, h2, .title { font-family: var(--font-title); font-weight: 600; margin: 0; text-wrap: balance; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- masthead ---------- */

.masthead { position: relative; z-index: 1; border-bottom: 1px solid var(--border-color); }
.masthead-in {
  max-width: var(--container);
  margin: 0 auto;
  padding: 30px 24px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--font-title);
  font-size: 30px;
  font-weight: 800;               /* Outfit 800: the guidelines' heading weight */
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 11px;
}
.wordmark .chev {
  color: var(--accent-color);
  font-size: 20px;
  filter: drop-shadow(0 0 10px var(--accent-glow));
}
.tagline { color: var(--text-muted); font-size: 14px; margin: 4px 0 0; max-width: 56ch; }

/* ---------- theme and language controls ---------- */

.controls { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.seg {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.seg button {
  font-family: var(--font-title);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.seg button + button { border-left: 1px solid var(--border-color); }
.seg button:hover { color: var(--text-color); background: var(--card-hover-bg); }
.seg button[aria-pressed="true"] { background: var(--accent-color); color: var(--accent-ink); }
.seg button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-glow); }
.seg .glyph { display: block; width: 15px; height: 15px; }
.seg .glyph svg { display: block; width: 100%; height: 100%; }

.iconbtn {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.iconbtn svg { width: 17px; height: 17px; }
.iconbtn:hover { color: var(--accent-color); border-color: var(--accent-color); }
.iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }

/* ---------- layout ---------- */

main {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.panel {
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: border-color .3s ease, background-color .3s ease;
}
.panel:hover { border-color: var(--border-hover); }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}
.panel-head h2 { font-size: 16px; letter-spacing: -0.01em; }

/* ---------- drop zone ---------- */

.drop {
  margin: 20px;
  border: 1.5px dashed var(--border-hover);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  background: transparent;
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.drop:hover, .drop:focus-visible {
  border-color: var(--accent-color);
  background: var(--accent-glow);
  outline: none;
}
.drop.over { border-style: solid; border-color: var(--accent-color); background: var(--accent-glow); transform: scale(1.005); }
.drop .big { font-family: var(--font-title); font-size: 20px; font-weight: 600; }
.drop .small { color: var(--text-muted); font-size: 13.5px; margin-top: 7px; }
.drop .file { margin-top: 12px; font-family: var(--font-mono); font-size: 13px; color: var(--accent-color); }
input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- fields ---------- */

.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px 20px; padding: 0 20px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

input[type=text], select {
  font: inherit;
  font-size: 14px;
  color: var(--text-color);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 9px 12px;
  width: 100%;
  min-width: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input[type=text]::placeholder { color: var(--text-faint); }
input[type=text]:hover, select:hover { border-color: var(--border-hover); }
input[type=text]:focus, select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
select {
  appearance: none;
  cursor: pointer;
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select option { background: var(--bg-elevated); color: var(--text-color); }

.check { display: flex; align-items: center; gap: 10px; align-self: end; padding-bottom: 10px; }
.check input { accent-color: var(--accent-color); width: auto; }
.check span { font-size: 13.5px; color: var(--text-color); }
.check-wrap { display: flex; flex-direction: column; gap: 4px; align-self: end; padding-bottom: 6px; }
.check-wrap .check { align-self: start; padding-bottom: 0; }

.linkbtn {
  align-self: start;
  font: inherit; font-size: 12px;
  background: none; border: 0; padding: 0;
  color: var(--accent-color);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-style: dotted;
}
.linkbtn:hover { color: var(--accent-hover); }
.linkbtn:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; border-radius: 2px; }

/* The prompt itself, served by the API so the page never restates it. */
.prompt-box {
  margin: 0 20px 18px;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-elevated);
}
.prompt-box p { margin: 0 0 10px; font-size: 12.5px; color: var(--text-muted); }
.prompt-box pre {
  margin: 0; max-height: 240px; overflow: auto;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.65;
  color: var(--text-color); white-space: pre-wrap;
}

/* ---------- buttons ---------- */

.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 18px 20px; border-top: 1px solid var(--border-color); }

.btn {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid var(--border-hover);
  background: var(--bg-elevated);
  color: var(--text-color);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .1s ease;
}
.btn:hover:not(:disabled) { border-color: var(--accent-color); background: var(--card-hover-bg); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
.btn.primary {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--accent-ink);
  box-shadow: 0 4px 16px var(--accent-glow);
}
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-sm { font-size: 12.5px; padding: 7px 13px; }

.btn:disabled {
  /* At 45% the accent still reads as a live button on a dark ground; the button
     has to look unavailable, not merely quiet. */
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  background: var(--bg-elevated);
  border-color: var(--border-color);
  color: var(--text-faint);
}

.hint { font-size: 13px; color: var(--text-faint); margin-left: auto; text-align: right; }

/* ---------- result ---------- */

.meta { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
.chip {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 5px 11px;
  border-radius: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}
.chip b { color: var(--secondary-color); font-weight: 600; }

/* ---------- build order rendering ---------- */

.head-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.view { padding: 4px 20px 20px; }

.rep-head { padding: 16px 0 8px; border-bottom: 1px solid var(--border-color); }
.rep-head h3 { font-family: var(--font-title); font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.rep-head h3 .mu {
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  color: var(--accent-ink); background: var(--accent-color);
  padding: 3px 9px; border-radius: 6px; vertical-align: 3px; margin-left: 6px;
}
.facts { margin: 10px 0 0; display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.facts b { color: var(--text-color); font-weight: 500; }
.roster { list-style: none; margin: 12px 0 0; padding: 0; display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: 14px; }
.roster li { display: flex; align-items: center; gap: 7px; }
.race { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }
.tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); border: 1px solid var(--border-color); border-radius: 4px; padding: 1px 5px;
}
.verdict { font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: 5px; }
.verdict.win { color: #10b981; background: rgba(16, 185, 129, 0.14); }
.verdict.loss { color: var(--error-color); background: var(--error-bg); }
.cut { margin: 12px 0 0; font-size: 13px; color: var(--secondary-color); }

.sect { padding-top: 26px; margin-top: 26px; border-top: 1px solid var(--border-color); }
.sect:first-of-type { border-top: 0; margin-top: 0; padding-top: 20px; }
.sect h4 { font-family: var(--font-title); font-size: 17px; font-weight: 600; margin: 0 0 12px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sect h5 { font-family: var(--font-title); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin: 20px 0 8px; }

/* CSS_TOPOLOGY.md §6: overflow is handled inside its own container, never by
   letting the page scroll sideways. */
.scroll { overflow-x: auto; max-height: 42vh; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 8px; }

.view table { border-collapse: collapse; width: 100%; font-size: 13px; }
.view tbody tr { height: 44px; }
.view thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-elevated);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 500; text-align: left;
  padding: 9px 12px; border-bottom: 1px solid var(--border-color); white-space: nowrap;
}
.view td { padding: 6px 12px; border-bottom: 1px solid var(--border-color); }

/* Supply et Time tiennent en deux ou trois caractères. Sans cette contrainte le
   navigateur leur donne un tiers de la table chacune et repousse l'action au
   milieu, derrière un couloir vide. */
.view table.bo th:nth-child(-n+2),
.view table.bo td:nth-child(-n+2) { width: 1%; white-space: nowrap; }

.view tbody tr:last-child td { border-bottom: 0; }
.view tbody tr:hover td { background: var(--card-hover-bg); }
.view th.num, .view td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.view td.sup { color: var(--secondary-color); font-weight: 600; }
.view td.t { color: var(--text-faint); }
.view td.num.bad { color: var(--error-color); font-weight: 600; }
.view tr.wk td { color: var(--text-faint); }
.chrono { color: var(--secondary-color); }

/* Unit icons. Sized down from the game's 76px buttons; the slot keeps its width
   when we have no icon, so the action column never jitters. */
.view td.act { display: flex; align-items: center; gap: 11px; }
.view .ico {
  width: 32px; height: 32px; flex: none;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
}
.view .ico-none {
  border-style: dashed;
  opacity: .45;
}

.line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; }
.line .lbl {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint);
}
.chip.warn { color: var(--secondary-color); border-color: var(--secondary-color); }
.muted { font-size: 12.5px; color: var(--text-muted); margin: 12px 0 0; font-style: italic; }

pre.out {
  margin: 0;
  padding: 20px;
  max-height: 58vh;
  overflow: auto;
  white-space: pre;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
}
pre.out::-webkit-scrollbar { width: 10px; height: 10px; }
pre.out::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 5px; }

.error { margin: 0; padding: 18px 20px; color: var(--error-color); background: var(--error-bg); font-size: 14px; }

/* A utility class has to beat whatever display the component sets, whichever
   comes later in the sheet. Without this, .overlay's display:flex won the cascade
   and the dialog opened on page load. */
.hidden { display: none !important; }
.spinner {
  display: inline-block; width: 13px; height: 13px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
  vertical-align: -2px; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- about dialog ---------- */

.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(4, 8, 12, .62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.dialog {
  width: 100%; max-width: 520px;
  max-height: 88vh; overflow: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hover);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.dialog-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border-color);
}
.dialog-head h2 { font-size: 16px; }
.dialog-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.dialog-body p { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.dialog-brand { display: flex; align-items: center; gap: 12px; }
.dialog-brand .chev { color: var(--accent-color); font-size: 17px; }
.dialog-brand strong {
  display: block; font-family: var(--font-title);
  font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--text-color);
}
.dialog-brand .ver { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }
.dialog-brand .ver b { color: var(--secondary-color); }

.facts-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 13px; }
.facts-list dt {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint); padding-top: 2px;
}
.facts-list dd { margin: 0; color: var(--text-color); overflow-wrap: anywhere; }
.facts-list a { color: var(--accent-color); text-decoration: none; }
.facts-list a:hover { text-decoration: underline; }

.dialog-body .fine { font-size: 11.5px; }
.dialog-body .salute {
  font-family: var(--font-title); font-size: 14px; font-weight: 600;
  color: var(--accent-color); margin-top: 2px;
}

footer {
  position: relative; z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px 48px;
  color: var(--text-faint);
  font-size: 13px;
}
footer a { color: var(--accent-color); text-decoration: none; }
footer a:hover { text-decoration: underline; }
.attribution { margin: 14px 0 0; font-size: 12px; color: var(--text-muted); max-width: 78ch; }

/* CSS_TOPOLOGY.md §7: the pair is 767.98px / 768px, never 768px on both sides. */
@media (max-width: 767.98px) {
  .masthead-in { padding: 22px 18px 18px; }
  .wordmark { font-size: 25px; }
  main { padding: 20px 18px 60px; }
  .drop { margin: 16px; padding: 34px 18px; }
  .opts { padding: 0 16px 16px; }
  .actions { padding: 16px; }
  .hint { margin-left: 0; width: 100%; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, body { animation: none !important; transition: none !important; }
  body::before { display: none; }
}