/* ============================================================
   Belmay Network Tariff Optimiser - wizard styles (DARK)
   The dark instrument design system. Tokens, chrome and
   components are copied from step5_result.html (the critic-
   approved dark reference) so the wizard chrome matches the
   readout. Rules: red on the ONE thing that matters per view;
   restrained squared corners (2-6px); slab headings, Inter
   body, IBM Plex Mono for ALL data/figures; AA contrast on
   graphite; visible red focus rings; Australian English.
   ============================================================ */

/* ============================================================
   BAND 1 - TOKENS
   step5's verbatim dark set, plus every legacy --belmay-* /
   --success-bg / --warning / --danger name re-pointed to a dark
   equivalent so no rule silently keeps a light colour.
   ============================================================ */
:root {
  /* tell the UA to paint native controls (file button, unchecked radios/
     checkboxes, unfilled range track) on the dark scheme, not light */
  color-scheme: dark;

  /* step5 dark palette (verbatim) */
  --red:#ED3237;
  --red-dark:#C41E23;
  --ink:#2A2A2C;
  --charcoal:#4B4B4D;
  --steel:#7A7A7D;
  --white:#FFFFFF;
  --paper:#F5F5F4;
  --mist:#E7E7E6;
  --graphite:#1C1C1E;
  --success:#46B377;
  --panel:#232326;
  --panel-2:#2A2A2E;
  --hairline:#37373B;
  --body:#C9C9CC;   /* ~11:1 on graphite, AA+ */
  --dim:#A0A0A4;    /* AA on graphite / panel / panel-2 */

  /* type */
  --font-display:'Roboto Slab',Georgia,serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* radius - restrained, engineered */
  --radius-sm:2px;
  --radius-md:4px;
  --radius-lg:6px;
  --radius-full:999px;

  /* legacy --belmay-* names, RE-POINTED to dark equivalents so any
     rule still referencing them resolves to the dark surface */
  --belmay-red:#ED3237;
  --belmay-red-dark:#C41E23;
  --belmay-ink:#fff;            /* ink-role text becomes white on dark */
  --belmay-charcoal:var(--body);
  --belmay-steel:var(--dim);
  --belmay-white:var(--panel);
  --belmay-paper:var(--panel-2);
  --belmay-mist:var(--hairline);
  --belmay-graphite:#1C1C1E;

  /* legacy semantic names, re-pointed dark */
  --success-bg:rgba(70,179,119,.10);
  --warning:#E7B36b;
  --warning-bg:rgba(199,134,26,.14);
  --danger:#ED3237;
  --danger-bg:rgba(237,50,55,.10);

  /* elevation: dark depth is hairline borders, no shadows */
  --shadow-sm:none;
  --shadow-md:none;
}

* { box-sizing: border-box; }

/* ============================================================
   BAND 2 - CHROME
   ============================================================ */

/* textured graphite: red glow top-right + faint 48px grid (step5 verbatim) */
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--graphite);
  color: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(1200px 520px at 80% -10%, rgba(237,50,55,.10), transparent 60%),
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}

h1, h2, h3 { font-family: var(--font-display); color: #fff; line-height: 1.2; }
strong { font-weight: 600; color: #fff; }

/* ---- eyebrow: mono label + short rule. Red is hero-only; demoted to
   dim/steel here so red stays meaningful on the wizard ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
  margin-bottom: .5rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--steel); }

/* ---- header: topbar lets the graphite + glow show through ---- */
.site-header {
  background: transparent;
  border-bottom: 1px solid var(--hairline);
  padding: .9rem 1.25rem;
}
.brand { display: flex; align-items: center; gap: 14px; max-width: 880px; margin: 0 auto; }
.brand svg { display: block; flex: none; }
.brand-logo { height: 30px; width: auto; display: block; flex: none; }
.logo-word { font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; line-height: 1; font-size: 1.3rem; }
.logo-word .bel { color: var(--body); }
.logo-word .may { color: var(--red); }
.brand-name {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em; color: var(--dim);
  padding-left: 14px; border-left: 1px solid var(--hairline);
}

/* ---- progress: red marks the live step only; done is neutral steel ---- */
.progress { max-width: 880px; margin: 1.5rem auto 0; padding: 0 1.25rem; }
.progress ol { list-style: none; display: flex; gap: .4rem; margin: 0; padding: 0; }
.progress .step { flex: 1; min-width: 0; }
.progress a, .progress .step-static {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  text-decoration: none; color: var(--dim); padding: .5rem .2rem;
  border-top: 3px solid var(--hairline);
}
.progress a:hover { color: #fff; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: var(--radius-full);
  background: #34343a; color: var(--dim);
  font-family: var(--font-mono); font-weight: 600; font-size: .82rem;
}
.step-label { font-size: .76rem; text-align: center; font-weight: 500; color: inherit; }
/* live step = the ONE red in the rail */
.step.is-current a, .step.is-current .step-static { color: #fff; border-top-color: var(--red); }
.step.is-current .step-num { background: var(--red); color: #fff; }
/* completed = neutral, settled/inset, NOT red */
.step.is-done a { color: var(--body); border-top-color: var(--steel); }
.step.is-done .step-num { background: var(--panel-2); color: var(--body); }
.step.is-future .step-static { opacity: .8; }

/* ============================================================
   BAND 3 - COMPONENTS
   ============================================================ */

/* ---- main / panels ---- */
.wizard { max-width: 880px; margin: 1.75rem auto; padding: 0 1.25rem; }
.card {
  background: var(--panel); border: 1px solid var(--hairline);
  border-radius: var(--radius-md); box-shadow: none; padding: 1.9rem;
}
.card.featured { border-top: 2px solid var(--red); }
.card-center { text-align: center; }
.card-title { font-family: var(--font-display); margin: 0 0 .9rem; font-size: 1.7rem; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.lead { color: var(--body); margin: 0 0 1.25rem; font-size: 1.1rem; }
.muted { color: var(--dim); font-size: .92rem; }
.detected {
  background: var(--panel-2); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: .6rem .85rem; margin: 0 0 1.25rem;
  font-size: .95rem; color: var(--body);
}

/* ---- forms ---- */
.stack > * + * { margin-top: 1.1rem; }
.field { display: block; }
.field-label { display: block; font-weight: 600; color: #fff; margin-bottom: .3rem; }
.field-hint { color: var(--dim); font-size: .85rem; margin: .1rem 0 .5rem; }
.req { color: var(--red); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-family: var(--font-mono); }
.opt { color: var(--dim); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-family: var(--font-mono); }

/* GAP FIX: input[type=text] (step1 #site_name) grouped with file/select */
input[type=file], input[type=text], select {
  width: 100%; padding: .55rem .7rem;
  background: var(--panel-2); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); font-size: .95rem; color: var(--body);
  font-family: var(--font-body);
}
input[type=text]::placeholder { color: var(--dim); }
input[type=file]:focus, input[type=text]:focus, select:focus {
  outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red);
}
fieldset { border: 0; padding: 0; margin: 0; }
legend { padding: 0; }
.radio-row { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: .4rem; }
.radio, .check { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; color: var(--body); }
.radio input, .check input { accent-color: var(--red); }

/* ---- buttons: red primary (the single CTA), ghost secondary ---- */
.actions { margin-top: 1.6rem; display: flex; gap: .75rem; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  padding: .6rem 1.4rem; border: 2px solid transparent; border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); }
.btn-primary:disabled { background: var(--panel-2); color: var(--dim); cursor: not-allowed; border-color: var(--hairline); }
.btn-ghost { background: transparent; color: #E0E0E2; border-color: var(--hairline); }
.btn-ghost:hover { border-color: var(--dim); color: #fff; }
.btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ---- alerts ---- */
.alert { border-radius: var(--radius-sm); padding: .75rem .9rem; margin: 0 0 1rem; font-size: .92rem; border: 1px solid transparent; }
/* genuine error = red is allowed; AA-lightened red text on graphite */
.alert-error { background: rgba(237,50,55,.10); color: #F2A0A2; border-color: rgba(237,50,55,.45); }
/* caveat = amber, NOT red (reserve red) */
.alert-warn { background: rgba(199,134,26,.14); color: #E7B36b; border-color: rgba(199,134,26,.4); }

/* ---- badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 600;
  border-radius: var(--radius-sm); padding: .65rem .9rem; margin: 1.1rem 0 0;
  font-size: .92rem; border: 1px solid transparent;
}
.badge::before { content: ""; width: 9px; height: 9px; border-radius: var(--radius-full); flex: none; }
/* validated = dark-safe success */
.badge-pass { background: rgba(70,179,119,.10); color: #C6D6CB; border-color: rgba(70,179,119,.32); }
.badge-pass::before { background: var(--success); }
/* blocked failure = the one red when stopped; AA-lightened red text */
.badge-fail { background: rgba(237,50,55,.10); color: #F2A0A2; border-color: rgba(237,50,55,.45); }
.badge-fail::before { background: var(--red); }
/* estimate / NMI-mismatch = neutral, never green, never red */
.badge-estimate { background: rgba(255,255,255,.03); color: var(--dim); border-color: var(--hairline); }
.badge-estimate::before { background: var(--dim); }

/* ---- step 3 reconciliation: data is mono, cells sit on panel-2 (inset) ---- */
.recon-grid { display: flex; gap: .75rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.recon-cell {
  flex: 1; min-width: 150px; background: var(--panel-2); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: .8rem .95rem; display: flex; flex-direction: column; gap: .25rem;
}
.recon-k { color: var(--dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-family: var(--font-mono); }
.recon-v { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 600; color: #fff; }
.gate-list { list-style: none; padding: 0; margin: 0 0 .75rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.gate { padding: .4rem .75rem; border-radius: var(--radius-sm); font-size: .88rem; font-family: var(--font-mono); }
.gate.ok { background: rgba(70,179,119,.10); color: #C6D6CB; border: 1px solid rgba(70,179,119,.32); }
.gate.bad { background: rgba(237,50,55,.10); color: #F2A0A2; border: 1px solid rgba(237,50,55,.45); }

/* ---- step 4 slider: the slider carries red (the thing being set) ---- */
.slider-field { margin-top: .5rem; }
.slider-readout { font-family: var(--font-mono); font-size: 1.8rem; font-weight: 600; color: #fff; margin: .3rem 0; }
input[type=range] { width: 100%; accent-color: var(--red); }
.slider-scale { display: flex; justify-content: space-between; color: var(--dim); font-size: .76rem; margin-top: .35rem; font-family: var(--font-mono); }
.slider-scale span { text-align: center; }
.slider-scale span:first-child { text-align: left; }
.slider-scale span:last-child { text-align: right; }
.slider-scale small { color: var(--dim); }
.cost-readout {
  margin-top: 1rem; padding: .9rem 1rem; background: var(--panel-2);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm); min-height: 2.6rem;
}
/* JS-INJECTED by slider.js - MUST be styled for the dark surface */
.cost-readout .cost-main { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 600; color: #fff; }
.cost-readout .cost-save { font-family: var(--font-mono); font-weight: 600; color: var(--red); }
.lock-row { display: flex; align-items: center; gap: .75rem; margin-top: .9rem; }
.caption { color: var(--dim); font-size: .83rem; margin-top: 1rem; line-height: 1.55; }

/* ---- coming soon: status chip, neutral (status, not the win) ---- */
.soon-mark {
  display: inline-block; background: var(--panel-2); color: var(--dim);
  font-family: var(--font-mono); font-weight: 600; padding: .3rem .8rem;
  border-radius: var(--radius-sm); border: 1px solid var(--hairline); margin-bottom: .75rem;
  text-transform: uppercase; letter-spacing: .06em;
}

/* ---- step1 aside / footer ---- */
.note { max-width: 880px; margin: 1rem auto 0; padding: .8rem 1.25rem; color: var(--dim); font-size: .88rem; }
.site-footer { border-top: 1px solid var(--hairline); max-width: 880px; margin: 2rem auto 0; padding: 1.25rem; color: var(--dim); font-size: .82rem; }
.site-footer .mono { font-family: var(--font-mono); }

/* ---- step1 drag-and-drop upload zones (progressive enhancement over the native file input) ---- */
.dropzone {
  border: 1px dashed var(--hairline); border-radius: var(--radius-md);
  background: var(--panel-2); padding: .8rem .9rem;
  transition: border-color .15s, background .15s;
}
.dropzone.is-dragover { border-color: var(--red); border-style: solid; background: rgba(237,50,55,.06); }
/* the zone provides the box now, so the nested input drops its own border/background */
.dropzone input[type=file] { background: transparent; border: 0; padding: .15rem 0; }
.dropzone input[type=file]:focus { outline: 2px solid var(--red); outline-offset: 2px; }
.dropzone-hint { color: var(--dim); font-size: .8rem; margin: .35rem 0 0; }
.dropzone-file {
  margin: .4rem 0 0; font-family: var(--font-mono); font-size: .82rem; color: var(--success);
  word-break: break-all;
}

@media (max-width: 680px) { .brand-name { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }