/* ============================================================
   Marque Publishing — Calculator styles
   Self-contained: mirrors the site palette (Ink / Brass /
   Oxblood / Paper) so the folder works standalone or embedded.
   ============================================================ */

:root {
  --ink:#15212E; --brass:#B68A4E; --brass-hover:#A07A42;
  --brass-soft:rgba(182,138,78,.12); --oxblood:#7C2A33;
  --paper:#FBFAF7; --paper-alt:#F4F1EB;
  --bg:var(--paper); --bg-alt:var(--paper-alt);
  --text:var(--ink); --text-muted:#4A5968; --text-subtle:#6B7785;
  --accent:var(--brass); --accent-soft:var(--brass-soft);
  --border:rgba(21,33,46,.12); --card-bg:#fff;
  --good:#2C6E49; --bad:#9B2D2D;
  --serif:'Cormorant','EB Garamond',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --radius:14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0E1820; --bg-alt:#141F2A; --text:#E8E4DC;
    --text-muted:#9AA4AE; --text-subtle:#6B7785;
    --accent:#CDA465; --accent-soft:rgba(205,164,101,.12);
    --border:rgba(232,228,220,.10); --card-bg:#1A2630;
    --good:#5FB98A; --bad:#D2716B; --oxblood:#C45A64;
  }
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:var(--sans); color:var(--text); background:var(--bg);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}

.calc-wrap { max-width:60rem; margin-inline:auto; padding:clamp(2rem,5vw,3.5rem) 1.5rem 4rem; }
.calc-head { max-width:38rem; }
.calc-head h1 {
  font-family:var(--serif); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(1.9rem,4vw,2.6rem); line-height:1.1; margin-bottom:.4rem;
}
.calc-head h1 span { color:var(--accent); }
.calc-head .sub { color:var(--text-muted); font-size:1.05rem; }

/* mode toggle */
.modes {
  display:inline-flex; gap:.25rem; margin:1.75rem 0 1.5rem;
  background:var(--bg-alt); border:1px solid var(--border);
  border-radius:999px; padding:.3rem;
}
.modes button {
  font:inherit; font-weight:600; cursor:pointer; border:0;
  background:transparent; color:var(--text-muted);
  padding:.55rem 1.15rem; border-radius:999px; transition:.15s;
}
.modes button.active {
  background:var(--card-bg); color:var(--accent);
  box-shadow:0 1px 3px rgba(21,33,46,.14);
}

.panel { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start; }
@media (max-width:48rem){ .panel{ grid-template-columns:1fr; gap:1.25rem; } }
.col { display:flex; flex-direction:column; gap:1.5rem; }
@media (min-width:48rem){ .results-card { position:sticky; top:1.5rem; } }

.card {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.5rem;
}
.card h2 {
  font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--text-subtle); font-weight:600; margin-bottom:1.1rem;
}
.card-note { font-size:.85rem; color:var(--text-subtle); margin:-.4rem 0 1.1rem; }

/* itemized up-front fields */
.fields2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.25rem; }
@media (max-width:26rem){ .fields2{ grid-template-columns:1fr; } }
.subtotal {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:1.1rem; padding-top:.85rem; border-top:2px solid var(--border);
  font-weight:700;
}
.subtotal .amt { color:var(--accent); font-variant-numeric:tabular-nums; font-size:1.15rem; }

/* inputs */
.field { margin-bottom:1.1rem; }
.field:last-child { margin-bottom:0; }
label { display:block; font-weight:600; font-size:.95rem; margin-bottom:.25rem; }
label .hint { display:block; font-weight:400; color:var(--text-subtle); font-size:.82rem; }
.inputbox {
  display:flex; align-items:center; background:var(--bg);
  border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:.15s;
}
.inputbox:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.inputbox .pre { padding-left:.85rem; color:var(--text-subtle); font-weight:600; }
input[type=number] {
  width:100%; border:0; outline:0; background:transparent;
  font:inherit; color:var(--text); padding:.7rem .85rem;
}
select {
  width:100%; font:inherit; color:var(--text); cursor:pointer;
  background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:.7rem .85rem;
}
select:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* worked-math results */
.results { font-variant-numeric:tabular-nums; }
.step {
  display:grid; grid-template-columns:1.4rem 1fr auto;
  align-items:baseline; gap:.6rem; padding:.5rem 0;
}
.step .op { color:var(--text-subtle); font-weight:600; text-align:center; }
.step .step-label { color:var(--text-muted); font-size:.95rem; }
.step .step-val { font-weight:600; font-size:1.05rem; }
.step.lead .step-val { font-size:1.15rem; }
.step.sub {
  border-top:1px solid var(--border); margin-top:.15rem; padding-top:.6rem;
}
.step.sub .step-label { color:var(--text); font-weight:600; }
.step.sub .step-val { color:var(--accent); }
.step.group { border-top:1px solid var(--border); margin-top:.4rem; padding-top:.65rem; }
.step.be .step-label { color:var(--text); }
.step.be .step-val { color:var(--text); }
.step.total {
  border-top:2px solid var(--border); margin-top:.35rem; padding-top:.75rem;
}
.step.total .step-label { color:var(--text); font-weight:700; }
.step.total .step-val { font-family:var(--serif); font-weight:600; font-size:1.9rem; color:var(--accent); }
.step.neg .step-val, .step .step-val.neg { color:var(--bad) !important; }

.note {
  margin-top:1.1rem; background:var(--bg-alt); border-radius:10px;
  padding:.8rem .9rem; font-size:.85rem; color:var(--text-muted);
}
.note.warn { background:rgba(124,42,51,.08); color:var(--oxblood); }
.note strong { color:var(--text); }

/* CTA + footnote */
.cta {
  margin-top:1.75rem; padding:1.35rem 1.5rem;
  background:var(--accent-soft); border:1px solid var(--accent-soft);
  border-radius:var(--radius);
}
.cta h3 { font-family:var(--serif); font-size:1.2rem; color:var(--accent); margin-bottom:.2rem; }
.cta p { color:var(--text); font-size:.95rem; }
.cta a { color:var(--accent); font-weight:600; }
.foot { margin-top:1.75rem; max-width:38rem; font-size:.78rem; color:var(--text-subtle); }
.foot a { color:var(--accent); }