/* Auremont Control Console — the small amount of CSS Tailwind does not cover. */

:root{
  --navy:#1F3864; --navy-deep:#152847; --navy-ink:#0E1B31;
  --pass:#0F7B4F; --pass-soft:#E6F4ED; --pass-line:#8FCFB2;
  --fail:#B3261E; --fail-soft:#FBEAE9; --fail-line:#E8A19C;
  --warn:#B57A00; --warn-soft:#FDF3DF; --warn-line:#E8CE86;
  --edge:#E2E6EE;
}

.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
.border-3{border-width:3px}

/* ---- navigation tabs ---- */
.tab{
  padding:.85rem 1rem; font-size:.9rem; font-weight:600; color:rgba(255,255,255,.55);
  border-bottom:3px solid transparent; white-space:nowrap; transition:.15s;
}
.tab:hover{color:#fff}
.tab-on{color:#fff; border-bottom-color:#fff}

/* ---- export menu ---- */
.xbtn{
  display:block; width:100%; text-align:left; padding:.9rem 1.1rem;
  font-weight:600; font-size:.9rem; color:var(--navy-ink); transition:.12s;
}
.xbtn:hover{background:#F1F4F9}
.xbtn span{display:block; font-weight:400; font-size:.78rem; color:rgba(14,27,49,.5); margin-top:.15rem}

/* ---- cards ---- */
.card{background:#fff; border:1px solid var(--edge); border-radius:1rem; padding:1.25rem; display:flex; flex-direction:column}
.card-h{font-size:.82rem; font-weight:600; color:rgba(14,27,49,.6); line-height:1.35; min-height:2.4rem}
.card-n{font-family:'IBM Plex Mono',monospace; font-size:2rem; font-weight:600; letter-spacing:-.02em; margin-top:.5rem; font-variant-numeric:tabular-nums}
.card-s{font-size:.8rem; color:rgba(14,27,49,.5); margin-top:.2rem; min-height:1.1rem}
.card-bar{height:6px; background:var(--edge); border-radius:99px; margin-top:.9rem; overflow:hidden}
.card-bar>div{height:100%; border-radius:99px; transition:width .5s ease, background .3s}

.mini-h{font-size:.75rem; font-weight:600; color:rgba(14,27,49,.5)}
.mini-n{font-family:'IBM Plex Mono',monospace; font-size:1.35rem; font-weight:600; margin-top:.15rem; font-variant-numeric:tabular-nums}

/* ---- chips ---- */
.chip{display:inline-flex; align-items:center; gap:.4rem; font-size:.75rem; font-weight:700;
  padding:.3rem .7rem; border-radius:99px; background:#EEF1F6; color:var(--navy); white-space:nowrap}
.chip-pass{background:var(--pass-soft); color:var(--pass)}
.chip-fail{background:var(--fail-soft); color:var(--fail)}
.chip-warn{background:var(--warn-soft); color:var(--warn)}

/* ---- big action buttons ---- */
.bigbtn{
  background:#fff; border:2px solid var(--edge); border-radius:1rem; padding:1.1rem 1rem;
  font-weight:700; font-size:1.02rem; color:var(--navy-ink); text-align:left; transition:.15s; line-height:1.25;
}
.bigbtn:hover{border-color:var(--navy); transform:translateY(-1px); box-shadow:0 6px 20px rgba(31,56,100,.12)}
.bigbtn span{display:block; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(14,27,49,.4); margin-bottom:.2rem}
.bigbtn-pass{border-color:var(--pass-line); background:var(--pass-soft)}
.bigbtn-pass:hover{border-color:var(--pass)}

/* ---- preset pills ---- */
.pbtn{border:2px solid var(--edge); background:#fff; border-radius:.75rem; padding:.6rem 1rem;
  font-weight:600; font-size:.88rem; transition:.13s}
.pbtn:hover{border-color:var(--navy)}
.pbtn-pass{border-color:var(--pass-line); background:var(--pass-soft); color:var(--pass)}
.pbtn-ghost{border-style:dashed; color:rgba(14,27,49,.55)}

/* ---- wizard steps ---- */
.step{display:flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border-radius:99px;
  background:#fff; border:2px solid var(--edge); color:rgba(14,27,49,.45); white-space:nowrap}
.step span{display:grid; place-items:center; width:1.5rem; height:1.5rem; border-radius:99px;
  background:var(--edge); color:rgba(14,27,49,.55); font-size:.78rem}
.step-on{border-color:var(--navy); color:var(--navy)}
.step-on span{background:var(--navy); color:#fff}
.step-arrow{color:rgba(14,27,49,.25)}

/* ---- tooltips ---- */
.tip{display:inline-grid; place-items:center; width:1.05rem; height:1.05rem; border-radius:99px;
  background:var(--edge); color:rgba(14,27,49,.6); font-size:.65rem; font-weight:700; margin-left:.3rem;
  vertical-align:middle; cursor:help; position:relative}
.tip:hover,.tip:focus{background:var(--navy); color:#fff}
.tip:focus{outline:none}
.tip:hover::after,.tip:focus::after{
  content:attr(data-tip); position:absolute; bottom:150%; left:50%; transform:translateX(-50%);
  width:min(280px,70vw); background:var(--navy-ink); color:#fff; font-weight:400; font-size:.78rem;
  line-height:1.45; padding:.7rem .85rem; border-radius:.6rem; text-align:left; z-index:60;
  box-shadow:0 8px 30px rgba(0,0,0,.25); pointer-events:none;
}

/* ---- sliders ---- */
.sl-wrap{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.4rem}
.sl-lab{font-size:.9rem; font-weight:600}
.sl-val{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:1rem; font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:99px;
  background:var(--edge); outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:28px; height:28px; border-radius:99px;
  background:var(--navy); border:4px solid #fff; box-shadow:0 2px 10px rgba(31,56,100,.35); cursor:pointer}
input[type=range]::-moz-range-thumb{width:28px; height:28px; border-radius:99px; background:var(--navy);
  border:4px solid #fff; box-shadow:0 2px 10px rgba(31,56,100,.35); cursor:pointer; border-width:4px}
input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid var(--navy); outline-offset:2px}
.sl-help{font-size:.78rem; color:rgba(14,27,49,.5); margin-top:.35rem; line-height:1.4}

/* ---- waterfall / bars ---- */
.wf-row{display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center; padding:.55rem 0;
  border-bottom:1px solid var(--edge)}
.wf-row:last-child{border-bottom:0}
.wf-lab{font-size:.9rem}
.wf-num{font-family:'IBM Plex Mono',monospace; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.wf-tot{font-weight:700; border-top:2px solid var(--navy); border-bottom:0; margin-top:.3rem; padding-top:.7rem}

.bar-row{margin-bottom:.85rem}
.bar-top{display:flex; justify-content:space-between; font-size:.85rem; margin-bottom:.28rem}
.bar-track{height:22px; background:#F1F4F9; border-radius:.4rem; overflow:hidden}
.bar-fill{height:100%; background:var(--navy); border-radius:.4rem; transition:width .4s}
.bar-fill.quoted{background:var(--pass)}

/* ---- quote lines ---- */
.qline{border:2px solid var(--edge); border-radius:.9rem; padding:1rem; transition:.15s}
.qline.on{border-color:var(--navy); background:#FAFBFD}
.qline input,.qline select{border:2px solid var(--edge); border-radius:.6rem; padding:.55rem .7rem;
  font-size:.88rem; width:100%; background:#fff}
.qline input:focus,.qline select:focus{border-color:var(--navy); outline:none}

/* ---- delta cards ---- */
.dcard{border:2px solid var(--edge); border-radius:1rem; padding:1rem}
.dcard .d-h{font-size:.78rem; font-weight:600; color:rgba(14,27,49,.55); min-height:2.2rem}
.dcard .d-row{display:flex; align-items:baseline; gap:.5rem; margin-top:.5rem;
  font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums}
.d-old{color:rgba(14,27,49,.4); font-size:1rem; text-decoration:line-through}
.d-new{font-size:1.5rem; font-weight:600}
.d-better{border-color:var(--pass-line); background:var(--pass-soft)}
.d-worse{border-color:var(--fail-line); background:var(--fail-soft)}

/* ---- advanced settings ---- */
.ag{background:#fff; border:1px solid var(--edge); border-radius:1rem; padding:1.25rem}
.ag h4{font-weight:700; margin-bottom:.9rem; font-size:1rem}
.arow{display:grid; grid-template-columns:1fr 130px; gap:.8rem; align-items:center; padding:.45rem 0}
.arow label{font-size:.86rem; line-height:1.3}
.arow input,.arow select{border:2px solid var(--edge); border-radius:.5rem; padding:.45rem .6rem;
  font-family:'IBM Plex Mono',monospace; font-size:.85rem; text-align:right; background:#fff; width:100%}
.arow select{text-align:left; font-family:'Inter',sans-serif}
.arow input:focus,.arow select:focus{border-color:var(--navy); outline:none}

/* ---- saved cards ---- */
.scard{background:#fff; border:1px solid var(--edge); border-radius:1rem; padding:1.25rem}
.scard:hover{border-color:var(--navy)}

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


/* ---- PHONE ----------------------------------------------------------------
   Two things break on a phone if you do not handle them explicitly:
   iOS zooms the whole page in whenever you tap a field whose text is under
   16px, and a tooltip anchored to the centre of a card falls off the screen. */
@media (max-width: 640px){
  input, select, textarea,
  .arow input, .arow select,
  .qline input, .qline select{ font-size:16px }

  .tip:hover::after,.tip:focus::after{
    left:auto; right:-8px; transform:none; width:min(300px, 88vw);
  }

  .card-n{ font-size:1.75rem }
  .bigbtn{ padding:.9rem .85rem; font-size:.95rem }
  .arow{ grid-template-columns:1fr 108px }
  .step{ padding:.45rem .7rem; font-size:.8rem }
  .step span{ width:1.3rem; height:1.3rem; font-size:.7rem }
}

/* Never let anything push the page sideways on a narrow screen. */
html, body{ overflow-x:hidden; -webkit-text-size-adjust:100% }