/* ==========================================================================
   Elions Logistics: free tool pages (calculators)
   Builds on site.css tokens. Inputs sit on the light band, results on an
   ink panel with amber figures, like a dashboard readout.
   ========================================================================== */

.tool-head .tag {
  display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1rem; letter-spacing: .08em; text-transform: uppercase;
  color: #0E1F30; background: var(--amber); padding: 4px 12px; border-radius: 2px; margin-bottom: 18px;
}

.calc { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 920px) { .calc { grid-template-columns: 1fr; } }

.calc-form { background: var(--paper); border: 1px solid var(--line-soft); padding: clamp(20px, 3vw, 32px); color: var(--text-dark); }
.calc-group + .calc-group { border-top: 1px solid var(--line-soft); margin-top: 22px; padding-top: 22px; }
.calc-group h2 {
  font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dark-mute); margin-bottom: 14px; font-weight: 700;
}
.calc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.calc-fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .calc-fields.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .calc-fields, .calc-fields.three { grid-template-columns: 1fr; } }

.calc-form label, .load-card label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: 6px; color: var(--text-dark); }
.inp { display: flex; align-items: center; background: #fff; border: 1px solid #C9CBC7; border-radius: 2px; }
.inp:focus-within { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); }
.inp span { padding: 0 11px; color: var(--text-dark-mute); font-size: .92rem; white-space: nowrap; }
.inp input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-dark);
  font: 600 1.05rem 'Barlow', system-ui, sans-serif; padding: 11px 11px;
  font-variant-numeric: tabular-nums;
}
.inp input:focus { outline: none; }

.types { display: flex; flex-wrap: wrap; gap: 8px; }
.types button {
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.08rem; font-weight: 600;
  padding: 8px 15px; border: 1px solid #C9CBC7; background: #fff; color: var(--text-dark);
  border-radius: 2px; cursor: pointer;
}
.types button:hover { border-color: var(--amber); }
.types button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: inset 0 -3px 0 var(--amber); }
.calc-note { font-size: .9rem; color: var(--text-dark-mute); margin: 12px 0 0; }
.calc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.calc-actions button {
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.05rem; font-weight: 600;
  padding: 8px 16px; border: 1px solid #C9CBC7; background: var(--paper-2); color: var(--text-dark);
  border-radius: 2px; cursor: pointer;
}
.calc-actions button:hover { border-color: var(--amber); }

/* Results readout */
.readout { background: var(--ink); color: var(--text); border: 1px solid var(--line); padding: clamp(20px, 3vw, 28px); }
@media (max-width: 920px) { .readout { position: static; } }
.readout .label { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.readout .big { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); line-height: 1; color: var(--amber); font-variant-numeric: tabular-nums; margin: 6px 0 6px; }
.readout .sub { color: var(--text-mute); font-size: .95rem; margin: 0 0 16px; }
.rows .row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: .98rem; }
.rows .row:last-child { border-bottom: 0; }
.rows .row b { font-family: 'Barlow Condensed', sans-serif; font-size: 1.22rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rows .row.key b { color: var(--amber); }
.cbar { display: flex; height: 10px; overflow: hidden; background: var(--steel); margin: 16px 0 8px; }
.cbar i { display: block; height: 100%; }
.clegend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .86rem; color: var(--text-mute); }
.clegend span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; background: var(--c); }
.offer { margin-top: 18px; border-left: 3px solid var(--sky); background: var(--steel); padding: 12px 14px; font-size: .95rem; color: #D5DAE1; }
.pill { display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; padding: 2px 10px; color: #fff; margin-bottom: 4px; }
.p-good { background: #2E9E5E; } .p-warn { background: #C98A12; } .p-bad { background: #D2462F; }
.pos { color: #5CD08F !important; } .neg { color: #FF7A5C !important; }

/* Load profit: two loads side by side */
.loads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
@media (max-width: 920px) { .loads { grid-template-columns: 1fr; } }
.load-card { background: var(--paper); border: 1px solid var(--line-soft); color: var(--text-dark); }
.load-card.win { border-color: #2E9E5E; box-shadow: 0 0 0 2px #2E9E5E; }
.load-card .load-in { padding: clamp(18px, 3vw, 26px); }
.load-card .load-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.load-card .badge { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.15rem; background: var(--ink); color: #fff; padding: 3px 12px; box-shadow: inset 0 -3px 0 var(--amber); }
.load-card .winner { display: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #2E9E5E; color: #fff; padding: 3px 10px; }
.load-card.win .winner { display: inline-block; }
.load-card .readout { position: static; border: 0; border-top: 3px solid var(--amber); }
.verdict { margin-top: 24px; background: var(--paper); border: 1px solid var(--line-soft); border-left: 5px solid var(--amber); padding: 18px 22px; color: var(--text-dark); font-size: 1.05rem; }

/* Guide text under the calculator */
.formula {
  font: 500 .95rem/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--paper-2); border: 1px solid var(--line-soft); border-left: 4px solid var(--amber);
  padding: 14px 18px; overflow-x: auto; white-space: pre; color: var(--text-dark); margin: 1.4em 0;
}

/* Tools hub: cards look like the tools themselves */
.tool-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 820px) { .tool-list { grid-template-columns: 1fr; } }
.tool-card {
  position: relative; display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--line-soft); color: var(--text-dark); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tool-card:hover { transform: translateY(-3px); border-color: var(--amber); box-shadow: 0 14px 34px rgba(6,24,38,.14); color: var(--text-dark); }
.tool-card:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

.screen { background: var(--ink); border-bottom: 4px solid var(--amber); padding: 22px 24px; color: var(--text); min-height: 0; display: flex; flex-direction: column; }
.screen .mini-out { margin-top: auto; }
.screen .mini-fields + .mini-out, .screen .mini-vs + .mini-out { margin-top: auto; }
.screen-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.screen-top .ico { width: 42px; height: 42px; display: grid; place-items: center; background: var(--amber); color: #0E1F30; border-radius: 2px; flex: none; }
.screen-top .ico svg { width: 24px; height: 24px; }
.screen-top .ex { font-family: 'Barlow Condensed', sans-serif; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.mini-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mini-fields div { background: var(--steel); border: 1px solid var(--line); padding: 7px 10px; min-width: 0; }
.mini-fields small { display: block; font-size: .74rem; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-fields b { font-family: 'Barlow Condensed', sans-serif; font-size: 1.15rem; color: #fff; font-variant-numeric: tabular-nums; }
.mini-out { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 14px; min-height: 52px; padding-top: 12px; border-top: 1px dashed var(--line); }
.mini-out span { font-size: .9rem; color: var(--text-mute); }
.mini-out b { font-family: 'Barlow Condensed', sans-serif; font-size: 2.2rem; line-height: 1; color: var(--amber); font-variant-numeric: tabular-nums; }
.mini-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini-vs div { background: var(--steel); border: 1px solid var(--line); padding: 9px 12px; }
.mini-vs div.best { border-color: #2E9E5E; box-shadow: inset 0 0 0 1px #2E9E5E; }
.mini-vs small { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: .95rem; color: var(--text-mute); letter-spacing: .05em; }
.mini-vs b { font-family: 'Barlow Condensed', sans-serif; font-size: 1.7rem; color: #fff; font-variant-numeric: tabular-nums; }
.mini-vs em { font-style: normal; font-size: .8rem; color: var(--text-mute); }
.mini-vs .tagwin { display: inline-block; margin-left: 6px; background: #2E9E5E; color: #fff; font-size: .72rem; font-weight: 700; padding: 1px 6px; letter-spacing: .04em; vertical-align: middle; }

.tool-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.tool-body h2 { font-size: clamp(1.5rem, 1.25rem + .8vw, 1.9rem); margin-bottom: 8px; color: var(--text-dark); }
.tool-body p { color: var(--text-dark-mute); margin-bottom: 14px; }
.feat { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 20px; }
.feat li { font-size: .85rem; font-weight: 600; color: var(--text-dark); background: var(--paper-2); border: 1px solid var(--line-soft); padding: 3px 10px; }
.tool-body .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 680px) { .tool-body .btn { align-self: stretch; } .mini-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* keep both preview screens the same height */
.mini-fields div, .mini-vs div { min-height: 76px; }
.mini-vs div b { line-height: 1.1; }

/* Profit plan inside the cost per mile readout */
.plan { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.plan .label { margin-bottom: 10px; }
.plan-row { background: var(--steel); border: 1px solid var(--line); padding: 11px 13px; margin-bottom: 8px; }
.plan-row.goal { border-color: var(--amber); box-shadow: inset 3px 0 0 var(--amber); }
.plan-row.offer-row { border-color: var(--sky-dim); }
.plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.plan-head span { font-weight: 600; color: #fff; font-size: .95rem; }
.plan-head b { font-family: 'Barlow Condensed', sans-serif; font-size: 1.35rem; color: var(--amber); white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-head b small { font-size: .85rem; color: var(--text-mute); font-weight: 500; }
.plan-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.plan-stats small { display: block; font-size: .78rem; color: var(--text-mute); }
.plan-stats b { font-family: 'Barlow Condensed', sans-serif; font-size: 1.15rem; color: #fff; font-variant-numeric: tabular-nums; }
.plan-note { font-size: .85rem; color: var(--text-mute); margin: 6px 0 0; }

/* ==========================================================================
   Polish: guided steps, truck icons, sliders, gauge, animated readout
   ========================================================================== */
.calc-form { box-shadow: 0 18px 40px rgba(6,24,38,.07); }
.readout { box-shadow: 0 18px 40px rgba(6,24,38,.22); }

/* Numbered steps on the cost per mile form (a real sequence) */
#cpmForm { counter-reset: step; }
#cpmForm .calc-group h2 { display: flex; align-items: center; gap: 10px; }
#cpmForm .calc-group h2::before {
  counter-increment: step; content: counter(step);
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  background: var(--ink); color: var(--amber); border-radius: 50%;
  font-size: .95rem; letter-spacing: 0;
}

/* Truck type buttons with icons */
.types button { display: inline-flex; align-items: center; gap: 8px; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.types button svg { width: 22px; height: 22px; flex: none; color: var(--text-dark-mute); }
.types button[aria-pressed="true"] svg { color: var(--amber); }
.types button:active { transform: translateY(1px); }
.inp { transition: border-color .15s ease, box-shadow .15s ease; }
.inp:hover { border-color: #A9ADA8; }

/* Sliders under key inputs */
.slide { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 6px 0 0; cursor: pointer; --p: 50%; }
.slide:focus { outline: none; }
.slide::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--amber) var(--p), #E2E3DF var(--p)); }
.slide::-moz-range-track { height: 6px; border-radius: 3px; background: #E2E3DF; }
.slide::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--amber); }
.slide::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); margin-top: -6px; box-shadow: 0 2px 6px rgba(6,24,38,.25); }
.slide::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 2px 6px rgba(6,24,38,.25); }
.slide:hover::-webkit-slider-thumb { border-color: var(--amber); }

/* Numbers pulse briefly when they change */
@media (prefers-reduced-motion: no-preference) {
  .bump { animation: bump .45s ease; }
  @keyframes bump { 0% { text-shadow: 0 0 0 rgba(255,165,0,0); } 30% { text-shadow: 0 0 14px rgba(255,165,0,.55); } 100% { text-shadow: 0 0 0 rgba(255,165,0,0); } }
}

/* Rate gauge: a road from red (losing) to green (profit), the truck is the offer */
.gauge { position: relative; margin: 10px 0 22px; padding-top: 58px; }
.gauge-track { position: relative; height: 12px; background: var(--steel); overflow: visible; }
.gauge-track i { position: absolute; top: 0; bottom: 0; left: 0; }
.gauge-track .z-red { background: linear-gradient(90deg, #8E2A1E, #D2462F); }
.gauge-track .z-amb { background: #C98A12; }
.gauge-track .z-grn { right: 0; background: linear-gradient(90deg, #2E9E5E, #3FC27A); }
.gauge-track::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(255,255,255,.55); transform: translateY(-50%); }
.gauge-track .tick { position: absolute; top: -5px; bottom: -5px; width: 2px; background: #fff; transform: translateX(-1px); z-index: 1; }
.gauge-track .tick.goal { background: var(--amber); width: 3px; top: -8px; bottom: -8px; }
.gauge-truck { position: absolute; top: 0; z-index: 2; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; transition: left .5s cubic-bezier(.2,.8,.3,1); }
.gauge-truck b { font-family: 'Barlow Condensed', sans-serif; font-size: .95rem; white-space: nowrap; padding: 0 6px; background: var(--steel); border: 1px solid var(--line); color: #fff; }
.gauge-truck svg { width: 30px; height: 30px; color: #fff; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.gauge-truck.bad svg { color: #FF7A5C; } .gauge-truck.ok svg { color: var(--amber); } .gauge-truck.good svg { color: #5CD08F; }
.gauge-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; font-size: .84rem; color: var(--text-mute); }
.gauge-key span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: 0; }
.gauge-key .k-red::before { background: #D2462F; } .gauge-key .k-goal::before { background: var(--amber); } .gauge-key .k-grn::before { background: #2E9E5E; }

/* Phone bar */
.mbar { display: none; }
@media (max-width: 920px) {
  .mbar:not([hidden]) {
    display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: var(--ink); color: #fff; border-top: 3px solid var(--amber);
    padding: 10px 84px calc(10px + env(safe-area-inset-bottom, 0px)) 16px;
    box-shadow: 0 -8px 24px rgba(0,0,0,.25);
  }
  .mbar small { display: block; font-size: .72rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: .06em; }
  .mbar .mb-be { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; color: var(--amber); line-height: 1; }
  .mbar .mb-st { font-size: .85rem; color: var(--text-mute); flex: 1; min-width: 0; }
  .mbar .mb-st.good { color: #5CD08F; } .mbar .mb-st.bad { color: #FF7A5C; }
  .mbar .mb-go { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: #0E1F30; background: var(--amber); padding: 6px 10px; text-decoration: none; white-space: nowrap; }
}