/* =========================================================================
   Breakaway Breakeven - styles (mobile-first, no framework).

   BRAND: matched to breakawaybusiness.com (Breakaway Business Ventures).
   Change colours/fonts HERE ONLY; everything below uses these variables,
   including the chart (profit-chart.js reads the --chart-* values).

   Where each colour comes from:
     --bbv-navy    #0C2460  "Breakaway" script in the BBV logo (sampled from logo PNG)
     --bbv-brown   #6C3018  "BBV" letters in the logo (sampled from logo PNG)
     --bbv-gold    #99853F  site CSS: content band background rgb(153 133 63 / .96)
     --bbv-rope    #E4A860  rope ring in the logo (sampled from logo PNG)
     --bbv-text    #333333  site CSS: .wb-stl-normal body text colour
     --bbv-grey    #D1D1D1  site CSS: border colour
   Fonts (site CSS): Roboto Slab (headings + body text styles), Source Sans Pro
   (now "Source Sans 3") for UI text. Vendored in /static/fonts.

   Outdoor use: body text >= 12:1 contrast on white; profit green/red are
   darker than usual (>= 5:1 on white) and always paired with a +/- sign.
   ========================================================================= */
:root {
  /* Brand palette */
  --bbv-navy: #0C2460;
  --bbv-navy-dark: #071640;
  --bbv-brown: #6C3018;
  --bbv-gold: #99853F;
  --bbv-rope: #E4A860;
  --bbv-text: #333333;
  --bbv-grey: #D1D1D1;

  /* Roles (what the rest of the file uses) */
  --brand: var(--bbv-navy);         /* buttons, links, active nav, chart line */
  --brand-dark: var(--bbv-navy-dark);
  --accent: var(--bbv-gold);        /* stripes, borders, focus rings */
  --accent-soft: #F4EFE2;           /* light tint of the gold, for chips/selected */
  --banner: var(--bbv-brown);       /* best-day banner */
  --bg: #F7F5F0;                    /* page background: warm off-white */
  --card: #FFFFFF;
  --ink: #1F1F1F;                   /* slightly darker than site #333 for sunlight */
  --muted: #555555;
  --line: var(--bbv-grey);
  --pos: #1B6E2E;                   /* profit: 6.4:1 on white */
  --pos-soft: #E7F3EA;
  --neg: #B3261E;                   /* loss: 6.0:1 on white */
  --neg-soft: #FBE9E7;
  --hi: #FFF4D6;                    /* best-month row */
  --warn-bg: #FFF4D6;
  --warn-ink: #6B4A00;
  --bought: #1B6E2E;                /* the green Bought button */
  --bought-dark: #12501F;

  /* Chart (read by static/js/profit-chart.js) */
  --chart-line: var(--bbv-navy);
  --chart-fill-pos: rgba(27, 110, 46, 0.16);
  --chart-fill-neg: rgba(179, 38, 30, 0.16);
  --chart-crosshair: rgba(31, 31, 31, 0.55);
  --chart-marker: var(--bbv-brown);
  --chart-star: var(--bbv-gold);

  /* Type */
  --font-head: "Roboto Slab", Georgia, serif;
  --font-body: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --radius: 12px;
}

/* Vendored web fonts (latin subset, variable weight 400-800) */
@font-face {
  font-family: "Roboto Slab"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/roboto-slab-latin-var.fee1dc1edf94.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/source-sans-3-latin-var.9ef356ea553a.woff2") format("woff2");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }  /* app is light-only; stop OS dark from darkening native controls */
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.45 var(--font-body);
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--brand); }
h1, h2, .best-date, .mart-btn b { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
h1 { font-size: 1.4rem; margin: 0 0 .5rem; }
h2 { font-size: 1.12rem; margin: 0 0 .5rem; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.center { text-align: center; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }

/* ---- Top bar: white like the client's site, so the logo reads; gold rope stripe ---- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .35rem .7rem; padding-top: calc(.35rem + env(safe-area-inset-top));
  background: var(--card); border-bottom: 4px solid var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--brand); }
.brand img { height: 44px; width: auto; display: block; }
.brand span { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; white-space: nowrap; }
.topbar nav { display: flex; gap: .15rem; flex-wrap: nowrap; }
.topbar nav a {
  color: var(--brand); text-decoration: none; font-weight: 600; font-size: .92rem;
  padding: .4rem .55rem; border-radius: 999px;
}
.topbar nav a.on { background: var(--brand); color: #fff; }
@media (max-width: 560px) { .brand span { display: none; } }
@media (max-width: 380px) { .topbar nav a { padding: .35rem .4rem; font-size: .85rem; } .brand img { height: 38px; } }

main { max-width: 760px; margin: 0 auto; padding: .7rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; margin-bottom: .7rem; }
.card.narrow { max-width: 420px; margin: 1.2rem auto; }
.logo-hero { display: block; margin: .2rem auto .8rem; width: 190px; max-width: 70%; height: auto; }

/* ---- Forms ---- */
.deal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .7rem; }
@media (min-width: 640px) { .deal-grid { grid-template-columns: repeat(3, 1fr); } }
.deal-grid .full { grid-column: 1 / -1; }
.deal-grid h2.full { margin: .4rem 0 0; font-size: 1rem; color: var(--banner); }
.field { display: flex; flex-direction: column; gap: .2rem; font-size: .88rem; color: var(--muted); font-weight: 600; }
.field small { font-size: .78rem; font-weight: 400; }
/* Text-like controls only — radios/checkboxes keep native size (no stretched oval). */
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="image"]):not([type="file"]):not([type="range"]),
select, textarea {
  width: 100%; font: inherit; font-size: 1.08rem; color: var(--ink);
  padding: .55rem .6rem; border: 1.5px solid #B9B9B9; border-radius: 8px; background: #fff;
}
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):focus,
select:focus, textarea:focus { outline: 3px solid var(--accent); outline-offset: 0; border-color: var(--brand); }
input[type="radio"], input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem; margin: .15rem .35rem 0 0; padding: 0;
  border: none; border-radius: 0; background: transparent; flex-shrink: 0;
  accent-color: var(--brand); vertical-align: middle;
}
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.stack { display: flex; flex-direction: column; gap: .5rem; }
.code-input { font-size: 1.6rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }

.button {
  display: inline-block; border: 0; border-radius: 10px; background: var(--brand); color: #fff;
  font: inherit; font-weight: 700; padding: .7rem 1rem; text-decoration: none; cursor: pointer; text-align: center;
}
.button:hover { background: var(--brand-dark); }
.button.big { width: 100%; padding: .9rem 1rem; font-size: 1.08rem; }
.button.ghost { background: #fff; color: var(--brand); border: 2px solid var(--brand); }
.linkish { background: none; border: 0; color: var(--brand); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }

.flash { padding: .6rem .8rem; border-radius: 8px; margin-bottom: .7rem; background: var(--pos-soft); border: 1px solid #B7D9BF; }
.flash.error { background: var(--neg-soft); border-color: #F0C2BD; color: var(--neg); }
ul.errorlist { margin: 0; padding: 0; list-style: none; color: var(--neg); font-size: .86rem; }

/* ---- Best-day banner (logo brown) ---- */
.best { background: var(--banner); color: #fff; border: 0; border-bottom: 4px solid var(--accent); }
.best .best-date { color: #fff; font-size: 1.5rem; }
.best-label { text-transform: uppercase; letter-spacing: .08em; font-size: .76rem; opacity: .9; font-weight: 700; }
.best-sub { font-size: .92rem; }
.best .pos { color: #C8F0D0; }  /* light tints: still >= 7:1 on the brown */
.best .neg { color: #FFD3CF; }

/* ---- Readout above the chart ---- */
.readout { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-bottom: .5rem; }
.readout div { background: var(--bg); border-radius: 8px; padding: .35rem .45rem; min-width: 0; }
.readout span { display: block; font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.readout span i { font-style: normal; }
.readout b { display: block; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Results swaps must not drag the scroll position (Safari scroll anchoring). */
#results { overflow-anchor: none; }

/* Chart: fixed height; pan-y lets the page scroll vertically while sideways drags scrub.
   min-height matches height so the box never collapses while Chart.js measures. */
.chart-wrap { position: relative; height: 260px; min-height: 260px; touch-action: pan-y; user-select: none; -webkit-user-select: none; overflow: hidden; }
@media (min-width: 640px) { .chart-wrap { height: 340px; min-height: 340px; } }

/* ---- Month-end table ---- */
.table-scroll { overflow-x: auto; }
table.months { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.months th, .months td { padding: .4rem .35rem; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.months th:first-child, .months td:first-child { text-align: left; }
.months th { font-size: .72rem; text-transform: uppercase; color: var(--muted); }
.months tr.hi td { background: var(--hi); font-weight: 700; }
@media (max-width: 420px) { table.months { font-size: .82rem; } .months th, .months td { padding: .35rem .2rem; } }

.notice h1 { color: var(--banner); }
.foot {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: 1rem; font-size: .86rem; color: var(--muted); text-align: center;
}
.foot-meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem;
  justify-content: center; align-items: center;
}
.foot form { margin: 0; }

/* ---- Bid bar: pinned to the bottom for one-handed use at the sale ---- */
body:has(.bidbar) main { padding-bottom: 175px; }
body:has(.bidbar) .foot { padding-bottom: 180px; }
.bidbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--card); border-top: 4px solid var(--accent);
  box-shadow: 0 -4px 16px rgba(0,0,0,.12);
  padding: .45rem .6rem calc(.55rem + env(safe-area-inset-bottom));
}
.bidbar > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.bid-top { display: grid; grid-template-columns: 1fr auto; gap: .4rem; align-items: stretch; margin-bottom: .45rem; }
.bid-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.bid-summary > div { border-radius: 10px; padding: .2rem .5rem; border-left: 6px solid currentColor; }
.bid-summary span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.bid-summary b { display: block; font-size: 1.18rem; line-height: 1.15; }
.bid-summary b small { font-size: .7rem; font-weight: 600; }
.bid-summary em { display: block; font-style: normal; font-size: .72rem; }
.bid-summary .pos { color: var(--pos); background: var(--pos-soft); }
.bid-summary .neg { color: var(--neg); background: var(--neg-soft); }
.bid-row { display: grid; grid-template-columns: 76px 1fr 76px; gap: .5rem; align-items: stretch; }
.step {
  font-size: 2.3rem; font-weight: 700; line-height: 1; border: 0; border-radius: 14px;
  background: var(--brand); color: #fff; min-height: 58px; cursor: pointer;
  box-shadow: inset 0 -4px 0 var(--brand-dark);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.step:active { background: var(--brand-dark); transform: scale(.97); }
.bid-field { display: flex; flex-direction: column; justify-content: center; text-align: center; font-size: .74rem; color: var(--muted); font-weight: 700; }
.bid-field input { text-align: center; font-size: 1.6rem; font-weight: 800; padding: .25rem; font-variant-numeric: tabular-nums; border: 2px solid var(--brand); }

.bought-btn {
  border: 0; border-radius: 12px; background: var(--bought); color: #fff; font: inherit; font-weight: 800;
  font-size: 1.02rem; padding: 0 .8rem; min-width: 78px; cursor: pointer; touch-action: manipulation;
  box-shadow: inset 0 -4px 0 var(--bought-dark);
}
.bought-btn:active { background: var(--bought-dark); }
.bought-card { border: 2px solid var(--pos); background: var(--pos-soft); border-radius: 12px; padding: .55rem .7rem; margin-bottom: .45rem; font-size: .96rem; }
.bought-actions { display: flex; gap: .5rem; margin-top: .45rem; }
.bought-actions .button { flex: 1; padding: .7rem; }
.warn { margin-top: .35rem; padding: .35rem .5rem; border-radius: 8px; background: var(--warn-bg); color: var(--warn-ink); font-size: .86rem; }

/* ---- Mart picker ---- */
.mart-list { display: flex; flex-direction: column; gap: .6rem; margin-top: .6rem; }
.mart-list form { margin: 0; }
.mart-btn {
  position: relative; display: block; width: 100%; min-height: 76px; text-align: left; cursor: pointer;
  border: 2px solid var(--line); border-left: 8px solid var(--brand); border-radius: 14px; background: #fff;
  color: var(--ink); padding: .75rem 1rem; font: inherit; text-decoration: none; touch-action: manipulation;
}
.mart-btn b { display: block; font-size: 1.22rem; color: var(--brand); }
.mart-btn span { display: block; color: var(--muted); font-size: .9rem; }
.mart-btn i { position: absolute; right: .8rem; top: .8rem; font-style: normal; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; background: var(--accent); color: #fff; padding: .15rem .5rem; border-radius: 999px; }
.mart-btn.on { border-color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); }
.mart-btn.ghost { border-style: dashed; border-left-style: solid; border-left-color: var(--accent); }
.mart-btn:active { transform: scale(.99); }

/* Chip on the calculator showing the current mart */
.mart-chip { display: flex; align-items: center; gap: .35rem; margin: 0 0 .6rem; padding: .5rem .8rem;
  border-radius: 999px; background: var(--accent-soft); border: 1.5px solid var(--accent); color: var(--ink);
  text-decoration: none; font-size: .95rem; }
.mart-chip b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--brand); }
.mart-chip .pin { color: var(--accent); font-size: .7rem; }
.mart-chip .change { margin-left: auto; color: var(--brand); font-weight: 700; text-decoration: underline; }

/* ---- Contact screen ---- */
.contact-list { display: flex; flex-direction: column; gap: .8rem; margin: .6rem 0; }
.contact { border: 2px solid var(--line); border-left: 8px solid var(--accent); border-radius: 14px; padding: .7rem .8rem; }
.contact-name b { font-family: var(--font-head); font-size: 1.2rem; color: var(--brand); display: block; }
.contact-name span { color: var(--muted); font-size: .9rem; }
.contact-actions { display: flex; flex-direction: column; gap: .45rem; margin-top: .55rem; }
.contact-actions .button { word-break: break-all; }
.topbar nav { overflow-x: auto; scrollbar-width: none; }
.contact-name span { display: block; }
.topbar nav { min-width: 0; }
.brand { flex-shrink: 0; }
@media (max-width: 420px) { .topbar nav a { padding: .38rem .42rem; font-size: .88rem; } .topbar { gap: .25rem; } }
@media (max-width: 360px) { .topbar nav a { padding: .35rem .3rem; font-size: .8rem; } }

/* Software & technical support block on the Contact page */
.contact-support h2 { font-family: var(--font-head); color: var(--brand); font-size: 1.25rem; margin: 0 0 .35rem; }
.contact-support .contact { border-left-color: var(--brand); }

/* ---- Trucking card (IN / OUT, 4-mode selector) ---- */
.trucking-card h2 { margin-bottom: .2rem; }
.trucking-leg { border-top: 1px solid var(--line); padding-top: .7rem; margin-top: .7rem; }
.trucking-leg:first-of-type { border-top: 0; padding-top: 0; margin-top: .4rem; }
.trucking-leg h3 { font-family: var(--font-head); font-size: 1.05rem; color: var(--brand); margin: 0 0 .45rem; }
.trucking-leg h3 small { font-family: var(--font-body); font-weight: 400; color: var(--muted); }
/* Segmented mode selector: visually-hidden radio + styled label (navy when checked). */
.mode-toggle { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .55rem; }
.mode-opt {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .55rem .9rem; border: 1.5px solid var(--line);
  border-radius: 10px; background: #fff; font-size: .9rem; font-weight: 600;
  color: var(--ink); cursor: pointer; user-select: none; -webkit-user-select: none;
}
.mode-opt input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; pointer-events: none;
}
.mode-opt span { pointer-events: none; }
.mode-opt:has(input:checked) {
  border-color: var(--brand); background: var(--brand); color: #fff; font-weight: 700;
}
.mode-opt:has(input:focus-visible) {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
/* Hide mode panels that are not selected (CSS :has — no JS). */
.trucking-leg .mode-fields { display: none; }
.trucking-leg:has(input[value="per_head"]:checked) .mode-per_head { display: grid; }
.trucking-leg:has(input[value="loaded_mile"]:checked) .mode-loaded_mile { display: grid; }
.trucking-leg:has(input[value="per_hour"]:checked) .mode-per_hour { display: grid; }
.trucking-leg:has(input[value="per_load"]:checked) .mode-per_load { display: grid; }
.trucking-leg:has(input[value="loaded_mile"]:checked) .mode-needs-load,
.trucking-leg:has(input[value="per_hour"]:checked) .mode-needs-load,
.trucking-leg:has(input[value="per_load"]:checked) .mode-needs-load { display: grid; }
.trucking-more { margin: .45rem 0; }
.trucking-more summary { cursor: pointer; color: var(--brand); font-weight: 600; padding: .25rem 0; }
.trucking-break, .trucking-total { margin: .35rem 0 0; font-size: .9rem; }
.trucking-from-settings { margin: .45rem 0 0; }
.trucking-from-settings a { font-weight: 700; }
.card > .trucking-card { margin: .7rem 0 0; padding: .7rem; background: var(--bg); }
.card > .trucking-card > .trucking-leg:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.trucking-total { color: var(--brand); }
.field.check { flex-direction: row; align-items: flex-start; gap: .4rem; }
.field.check span { display: flex; align-items: flex-start; gap: .4rem; }
.field.full { grid-column: 1 / -1; }

/* Private marts on the picker */
.mart-row { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .55rem; }
.mart-select-form { margin: 0; }
.mart-copy { display: inline-block; align-self: flex-start; border: 0; background: none; color: var(--brand);
  font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: .15rem .1rem; font-size: .9rem; }
.mart-delete { margin-top: .8rem; }
.mart-list h2, .card > h2 { margin-top: .9rem; }

/* ---- Where the money goes (cost breakdown under the readout) ---- */
.money-flow { margin: .55rem 0 .35rem; border: 1.5px solid var(--line); border-radius: 10px; padding: .35rem .55rem .5rem; background: var(--bg); }
.money-flow > summary { cursor: pointer; font-weight: 700; color: var(--brand); list-style-position: outside; }
.money-flow > summary .muted { font-weight: 500; }
.money-flow[open] > summary { margin-bottom: .35rem; }
table.breakdown { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.breakdown th { text-align: right; color: var(--muted); font-weight: 600; padding: .2rem .25rem; border-bottom: 1px solid var(--line); }
table.breakdown th:first-child { text-align: left; }
table.breakdown td { padding: .22rem .25rem; border-bottom: 1px solid #eee; vertical-align: top; }
table.breakdown td:first-child { text-align: left; color: var(--ink); padding-right: .4rem; }
table.breakdown td:nth-child(2), table.breakdown td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.breakdown tr.total td { font-weight: 800; border-top: 2px solid var(--brand); border-bottom: none; padding-top: .4rem; }
table.breakdown tr[hidden] { display: none; }

/* Projection disclaimer (footer + sign-in): own full-width centred line above the meta row */
.disclaimer { max-width: 36rem; width: 100%; margin: 0 auto; text-align: center; line-height: 1.35; font-size: .78rem; }
.foot .disclaimer { order: 0; }

.range-line {
  margin: .15rem 0 .35rem; text-align: center; font-variant-numeric: tabular-nums;
  line-height: 1.3; min-height: 1.3em; /* reserve one line so show/hide never shifts the chart */
}
.range-line[hidden] { display: none; }           /* band off: take no space */
.range-line.has-band { display: block; }         /* band on: always occupy the line */
.range-line.has-band.is-blank { visibility: hidden; } /* scrub day-0: keep height, hide glyphs */
/* Never fade the results block during an HTMX bid swap (no opacity jank). */
#results.htmx-swapping, #results.htmx-settling { opacity: 1; }