:root { --paper:#f6f6f0; --ink:#090909; --muted:#4e4e4e; --line:#1a1a1a; --gray:#bebbb9; --green:#159b36; --dark:#0c0c0c; --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
* { box-sizing:border-box; }
html { background:var(--ink); }
body { margin:0; background:var(--ink); color:var(--ink); font-family:var(--mono); font-size:13px; min-width:320px; }
button,input,select { font:inherit; color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline:3px solid var(--green); outline-offset:2px; }
::selection { background:var(--green); color:#fff; }
.desktop-shell { width:min(100%, 1600px); margin:0 auto; padding:14px 16px 10px; background:var(--paper); min-height:100vh; }
.window { border:2px solid var(--line); background:var(--paper); box-shadow:2px 2px 0 rgba(0,0,0,.16); }
.chrome-header { min-height:108px; display:grid; grid-template-columns:1.1fr 2.6fr auto; gap:20px; align-items:center; padding:14px 18px 12px; position:relative; }
.brand-lockup { display:flex; align-items:center; gap:13px; min-width:240px; }
.brand-mark { width:47px; height:47px; display:grid; place-items:center; color:var(--green); }
.brand-mark svg { width:42px; height:42px; }
.wordmark { font-size:31px; line-height:1; font-weight:700; letter-spacing:-.06em; }
.tagline { margin-top:8px; font-size:11px; letter-spacing:-.03em; }
.workflow { display:flex; align-items:stretch; justify-content:center; gap:9px; height:66px; }
.workflow-step { background:var(--paper); border:2px solid var(--line); min-width:152px; display:flex; gap:11px; align-items:center; justify-content:center; text-align:left; padding:8px 12px; }
.workflow-step.active { background:var(--ink); color:var(--paper); }
.workflow-step .step-no { font-size:16px; align-self:flex-start; }
.workflow-step b { display:block; font-size:12px; }
.workflow-step small { display:block; margin-top:4px; font-size:10px; }
.workflow-arrow { font-size:28px; line-height:66px; }
.freshness-stamp { display:flex; flex-direction:column; gap:6px; border:1px solid var(--line); padding:9px 11px; font-size:10px; min-width:165px; }
.freshness-stamp strong { font-size:11px; }
.freshness-live { color:var(--green); font-weight:700; }
.freshness-live i { width:7px; height:7px; display:inline-block; background:var(--green); border-radius:50%; margin-right:5px; }
.window-controls { position:absolute; top:8px; right:10px; display:flex; gap:9px; font-size:16px; }
.tabs { display:flex; margin:10px 0 12px; border-bottom:2px solid var(--line); }
.tab { border:1px solid var(--line); border-bottom:0; background:var(--paper); padding:9px 16px; min-height:34px; font-size:11px; font-weight:700; letter-spacing:.02em; }
.tab.active { background:var(--ink); color:var(--paper); }
.tab-link { text-decoration:none; color:inherit; display:flex; align-items:center; }
.quote-layout { display:grid; grid-template-columns:minmax(230px, .92fr) minmax(420px, 1.52fr) minmax(290px, .9fr); gap:12px; align-items:stretch; }
.window-title { min-height:31px; padding:6px 9px; border-bottom:2px solid var(--line); background:var(--paper); font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:space-between; letter-spacing:-.02em; }
.dark-title { background:var(--ink); color:var(--paper); border-color:var(--paper); }
.mini-controls { font-size:14px; letter-spacing:4px; }
.route-window,.map-window,.ledger-window,.result-window { min-height:0; }
.route-form { padding:13px 14px 14px; display:flex; flex-direction:column; gap:12px; }
fieldset { border:0; padding:0 0 11px; margin:0; border-bottom:1px dashed var(--line); }
legend { font-weight:700; font-size:12px; margin-bottom:10px; }
label { display:flex; align-items:center; gap:8px; font-size:11px; margin-top:8px; }
label span { color:var(--muted); }
input,select { width:100%; min-height:34px; padding:7px 9px; border:2px solid var(--line); background:#fff; border-radius:0; }
select { appearance:auto; }
.location-field { position:relative; margin-top:6px; }
.input-with-addon { display:flex; position:relative; }
.input-with-addon input { padding-right:38px; }
.address-suggestions { position:absolute; z-index:20; top:100%; left:0; right:0; border:2px solid var(--line); border-top:0; background:#fff; box-shadow:2px 2px 0 rgba(0,0,0,.18); max-height:220px; overflow-y:auto; }
.address-suggestion { display:block; width:100%; padding:8px 10px; border:0; border-bottom:1px dotted #777; background:#fff; text-align:left; }
.address-suggestion:last-child { border-bottom:0; }
.address-suggestion:hover,.address-suggestion:focus-visible { background:#e8f4e9; outline:0; }
.address-suggestion strong,.address-suggestion small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.address-suggestion strong { font-size:10px; }
.address-suggestion small,.address-suggestion-status { margin-top:3px; color:var(--muted); font-size:9px; }
.address-suggestion-status { padding:9px 10px; }
.addon,.unit { position:absolute; right:0; top:0; height:100%; min-width:34px; border:0; border-left:2px solid var(--line); background:var(--paper); display:grid; place-items:center; }
.unit { pointer-events:none; font-size:11px; font-weight:700; }
.subline { margin:7px 0 0; color:var(--muted); font-size:10px; }
.coordinate-details { margin-top:10px; border-top:1px dotted #777; padding-top:8px; font-size:10px; }
.coordinate-details summary { cursor:pointer; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.coordinate-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px; }
.coordinate-grid label { display:grid; align-items:start; gap:5px; margin:0; font-size:9px; }
.coordinate-grid input { min-height:30px; padding:6px 7px; border-width:1px; }
.coordinate-details > .secondary-button { margin-top:8px; }
.delivery-selection-note { border-top:1px dotted #777; padding-top:5px; }
.route-lookup-button { margin-top:8px; }
.route-service-status { margin-top:6px; color:var(--muted); font-size:9px; line-height:1.4; }
.route-service-status[data-status="loading"] { color:#b27a00; }
.route-service-status[data-status="live"] { color:var(--green); font-weight:700; }
.route-service-status[data-status="error"] { color:#8a2d20; }
.check-row { margin-top:10px; justify-content:flex-start; }
.check-row input { width:16px; min-height:16px; accent-color:var(--green); }
.calculate-button { margin-top:1px; min-height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 12px 0 16px; background:var(--ink); color:var(--paper); border:2px solid var(--ink); font-weight:700; font-size:14px; }
.calculate-button b { display:grid; place-items:center; border-left:1px solid var(--paper); padding-left:17px; font-size:24px; font-weight:400; }
.calculate-button:hover,.calculate-button:active { background:var(--green); border-color:var(--green); }
.secondary-button { background:transparent; border:0; text-decoration:underline; text-underline-offset:3px; font-size:10px; color:var(--muted); align-self:flex-start; padding:1px 0; }.save-button { color:var(--green); font-weight:700; }
.center-stack { display:flex; flex-direction:column; gap:12px; }
.map-canvas { min-height:342px; position:relative; overflow:hidden; background-color:#efeee9; background-image:radial-gradient(#aaa 1px, transparent 1px); background-size:7px 7px; }
.map-canvas::before,.map-canvas::after { content:""; position:absolute; inset:10% 4%; border-top:1px solid #bab9b3; border-radius:50%; transform:rotate(14deg); opacity:.8; }
.map-canvas::after { inset:48% -12% 0 18%; transform:rotate(-25deg); }
.map-lines { position:absolute; inset:0; width:100%; height:100%; }
.route-line { fill:none; stroke:var(--ink); stroke-width:5; stroke-dasharray:1 0; }
.origin-dot { fill:var(--ink); }.destination-dot { fill:var(--paper); stroke:var(--ink); stroke-width:4; }
.map-label { position:absolute; z-index:2; max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:5px 7px; background:var(--ink); color:var(--paper); font-size:10px; font-weight:700; }
.map-label-origin { top:16%; left:8%; }.map-label-destination { right:8%; bottom:16%; }
.road-marker-layer { position:absolute; inset:0; z-index:3; pointer-events:none; }
.road-marker { position:absolute; transform:translate(-50%, -50%); max-width:25%; overflow:hidden; text-overflow:ellipsis; border:1px solid var(--line); background:var(--paper); padding:3px 6px; font-size:9px; font-weight:700; white-space:nowrap; box-shadow:2px 2px 0 var(--line); }
.road-marker::before { content:""; display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; background:var(--accent); vertical-align:1px; }
.route-roads { min-height:30px; padding:8px 12px; border-top:1px solid var(--line); background:var(--paper); color:var(--ink); font-size:10px; font-weight:700; }
.map-key { padding:7px 8px; display:flex; gap:12px; border:1px solid var(--line); background:var(--paper); font-size:10px; }.map-key i { display:inline-block; margin-right:5px; width:9px; height:9px; background:var(--ink); }.map-key .square { border-radius:0; }.map-key .dot { border-radius:50%; }.map-key .road-key { width:14px; height:3px; vertical-align:2px; }.map-key-inline { align-items:center; justify-content:flex-end; border-top:0; }
.scale-bar { position:absolute; z-index:3; right:11px; bottom:10px; display:grid; grid-template-columns:repeat(3,auto); gap:12px; padding:6px 7px 5px; border:1px solid var(--line); background:rgba(246,246,240,.92); font-size:9px; }.scale-bar b { grid-column:1/-1; height:5px; border:2px solid var(--ink); background:linear-gradient(90deg,var(--ink) 0 33%,var(--paper) 33% 66%,var(--ink) 66%); }
.ledger-window { flex:1; }
.title-action { background:transparent; border:0; text-decoration:underline; text-underline-offset:3px; font-size:10px; padding:0; }
.ledger-grid { display:grid; grid-template-columns:22px 1.15fr 1.35fr .7fr .9fr .65fr .7fr; font-size:9px; }
.ledger-grid>div:not(.ledger-row) { padding:7px 5px; background:#dfded9; border-bottom:1px solid var(--line); font-weight:700; }.ledger-row { grid-column:1/-1; display:grid; grid-template-columns:22px 1.15fr 1.35fr .7fr .9fr .65fr .7fr; border-bottom:1px dotted #73716f; }.ledger-row>* { padding:6px 5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.ledger-row strong { font-weight:600; }.ledger-total { display:flex; justify-content:space-between; gap:10px; align-items:center; border-top:2px solid var(--line); margin:0 8px; padding:10px 0 4px; font-size:11px; font-weight:700; }.ledger-total strong { font-size:13px; }.ledger-note { font-size:9px; color:var(--muted); padding:0 8px 5px; }
.result-window { background:var(--ink); color:var(--paper); border-color:var(--ink); }.result-body { padding:25px 20px 15px; min-height:540px; }.result-kicker { font-size:12px; font-weight:700; }.result-commodity { font-size:11px; margin-top:12px; }.net-value { color:var(--green); font-size:clamp(29px,3.2vw,47px); font-weight:700; letter-spacing:-.08em; white-space:nowrap; margin-top:8px; }.result-rule { border-top:1px dashed var(--paper); margin:22px 0 9px; }.result-list { margin:0; }.result-list>div { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px dotted #989896; }.result-list dt { color:#e0e0d9; }.result-list dd { margin:0; font-weight:700; text-align:right; white-space:nowrap; }.result-list .positive { color:var(--green); border-bottom:0; }.break-even { border-top:1px solid var(--paper); border-bottom:1px solid var(--paper); margin-top:21px; padding:13px 0; display:grid; gap:6px; }.break-even span,.margin-callout span { font-size:10px; }.break-even strong { font-size:25px; letter-spacing:-.06em; }.break-even small { color:#c9c9c0; font-size:9px; line-height:1.45; }.margin-callout { display:flex; justify-content:space-between; margin-top:18px; color:var(--green); font-weight:700; }.margin-callout strong { font-size:15px; }
.assumptions-panel { margin-top:12px; }.assumptions-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; padding:15px; }.assumptions-grid label { display:grid; grid-template-columns:1fr auto; gap:5px; align-items:center; margin:0; }.assumptions-grid label input { grid-column:1/-1; }.assumptions-grid label span { grid-column:2; grid-row:1; }.source-note { margin:0; padding:10px 15px 15px; color:var(--muted); font-size:10px; line-height:1.6; }.source-note a { color:var(--green); font-weight:700; }
.fuel-live-status { grid-column:1/-1; display:flex; align-items:center; gap:7px; min-height:23px; color:var(--muted); font-size:10px; margin-top:-6px; }.fuel-live-dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--green); }.fuel-live-status[data-status="loading"] .fuel-live-dot { background:#b27a00; }.fuel-live-status[data-status="fallback"] .fuel-live-dot,.fuel-live-status[data-status="manual"] .fuel-live-dot { background:#777; }.inline-action { margin-left:auto; border:1px solid var(--line); background:var(--paper); padding:4px 7px; font-size:9px; text-decoration:underline; text-underline-offset:2px; }.inline-action:hover { background:var(--ink); color:var(--paper); }
.status-bar { background:var(--ink); color:var(--paper); min-height:31px; margin-top:12px; padding:7px 10px; display:flex; align-items:center; gap:10px; font-size:10px; }.status-separator { width:1px; height:16px; background:var(--paper); opacity:.65; }.status-spacer { flex:1; }
.secondary-view { min-height:480px; }.market-table,.route-reference-table,.saved-quotes { padding:12px; }.market-row,.route-row,.saved-row { display:grid; grid-template-columns:1.3fr 1fr .7fr .7fr; gap:10px; border-bottom:1px dotted #777; padding:12px 6px; align-items:center; }.market-row.header,.route-row.header,.saved-row.header { background:#dfded9; font-size:10px; font-weight:700; border:0; }.market-row strong { font-size:16px; }.market-row small { color:var(--green); }.market-accordion { margin-bottom:10px; border:2px solid var(--line); background:#fff; }.market-accordion summary { display:grid; grid-template-columns:12px 1.1fr 1.5fr auto; gap:12px; align-items:center; padding:12px; cursor:pointer; list-style:none; }.market-accordion summary::-webkit-details-marker { display:none; }.market-accordion summary::before { content:'+'; font-weight:700; font-size:16px; width:12px; }.market-accordion[open] summary::before { content:'−'; }.market-accordion summary strong { grid-column:2; font-size:16px; }.market-accordion summary span { grid-column:3; color:var(--green); font-size:11px; }.market-accordion summary small { grid-column:4; color:var(--muted); font-size:10px; }.market-contract-header,.market-contract-row { display:grid; grid-template-columns:1fr 1.2fr 1fr .8fr; gap:10px; align-items:center; padding:9px 12px; border-top:1px dotted #777; font-size:10px; }.market-contract-header { background:#dfded9; font-weight:700; border-top:2px solid var(--line); }.market-contract-row.first-contract { background:#f0f0e9; }.market-contract-row strong { font-size:12px; }.positive-move { color:var(--green); }.negative-move { color:#9b2b20; }.market-empty { margin:0; padding:12px; color:var(--muted); font-size:11px; line-height:1.5; }.saved-row { grid-template-columns:1.4fr 1fr .8fr 1fr; }.directory-summary { border:2px solid var(--green); padding:11px 12px; margin:0 0 12px; line-height:1.6; color:var(--muted); font-size:11px; }.directory-summary strong { color:var(--ink); }.reference-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0 12px 12px; }.reference-card { border:2px solid var(--line); background:#fff; overflow:hidden; }.reference-card h2 { margin:0; padding:10px 11px; background:var(--ink); color:var(--paper); font-size:11px; }.reference-row { display:grid; grid-template-columns:1.35fr 1fr 1fr .8fr; gap:8px; align-items:center; padding:9px 10px; border-bottom:1px dotted #777; font-size:10px; }.reference-row.header { background:#dfded9; font-weight:700; font-size:9px; }.reference-row strong { font-size:10px; }.reference-card .source-note { padding:10px; }.settings-copy { max-width:680px; padding:20px; }.settings-copy h2 { font-size:18px; }.settings-copy p { color:var(--muted); line-height:1.65; }.settings-copy label { display:grid; gap:6px; align-items:start; margin-top:20px; }.settings-copy input { max-width:460px; }
[hidden] { display:none !important; }
@media (max-width:1100px) { .chrome-header { grid-template-columns:1fr auto; }.workflow { grid-column:1/-1; grid-row:2; justify-content:flex-start; order:3; }.freshness-stamp { grid-column:2; grid-row:1; }.quote-layout { grid-template-columns:minmax(230px,.85fr) minmax(360px,1.5fr); }.result-window { grid-column:1/-1; }.result-body { min-height:0; }.result-list { display:grid; grid-template-columns:repeat(2,1fr); column-gap:22px; }.break-even { max-width:440px; } }
@media (max-width:720px) { body { font-size:12px; }.desktop-shell { padding:8px; }.chrome-header { display:block; padding:12px 12px 10px; }.brand-lockup { min-width:0; }.wordmark { font-size:25px; }.tagline { margin-top:5px; }.freshness-stamp { margin-top:15px; display:grid; grid-template-columns:1fr 1fr; min-width:0; }.freshness-live { grid-column:1/-1; }.window-controls { top:7px; }.tabs { overflow-x:auto; margin:7px 0 9px; }.tab { white-space:nowrap; padding:9px 12px; }.workflow { margin-top:14px; width:100%; height:59px; gap:4px; }.workflow-step { flex:1; min-width:0; padding:7px 5px; gap:6px; }.workflow-step .step-no { font-size:12px; }.workflow-step b { font-size:9px; }.workflow-step small { font-size:8px; }.workflow-arrow { font-size:21px; line-height:59px; }.quote-layout { display:flex; flex-direction:column; gap:10px; }.route-form { padding:12px; }.map-canvas { min-height:280px; }.result-body { padding:18px 15px 15px; }.net-value { font-size:39px; }.result-list { display:block; }.ledger-grid { grid-template-columns:18px 1fr .8fr .65fr .9fr; }.ledger-grid>div:nth-child(3),.ledger-grid>div:nth-child(4),.ledger-grid>div:nth-child(6),.ledger-grid>div:nth-child(7),.ledger-row>*:nth-child(3),.ledger-row>*:nth-child(4),.ledger-row>*:nth-child(6),.ledger-row>*:nth-child(7) { display:none; }.ledger-row { grid-template-columns:18px 1fr .8fr .65fr .9fr; }.ledger-row>* { padding:6px 3px; }.assumptions-grid { grid-template-columns:1fr 1fr; }.status-bar { flex-wrap:wrap; gap:6px; }.status-spacer { display:none; }.status-bar span:last-child { margin-left:auto; }.market-row,.route-row,.saved-row { grid-template-columns:1fr 1fr; gap:4px; }.market-row.header,.route-row.header,.saved-row.header { display:none; }.reference-grid { grid-template-columns:1fr; padding:0 8px 8px; }.reference-row { grid-template-columns:1.3fr 1fr; }.reference-row.header { display:none; }.reference-row span:nth-child(3),.reference-row span:nth-child(4) { display:none; } }
@media (max-width:720px) { .market-accordion summary { grid-template-columns:12px 1fr auto; gap:8px; padding:10px; }.market-accordion summary strong { grid-column:2; grid-row:1; }.market-accordion summary span { grid-column:2; grid-row:2; font-size:10px; }.market-accordion summary small { grid-column:3; grid-row:1 / span 2; align-self:center; }.market-contract-header { display:none; }.market-contract-row { grid-template-columns:1fr 1fr; gap:5px; padding:9px 10px; }.market-contract-row span:nth-child(3)::before { content:'Move: '; color:var(--muted); }.market-contract-row span:nth-child(4)::before { content:'Volume: '; color:var(--muted); } }
@media (prefers-reduced-motion: no-preference) { .quote-layout.active { animation:boot-in .45s ease-out both; } .calculate-button b { transition:transform .2s ease-out; }.calculate-button:hover b { transform:translate(3px,-3px); } @keyframes boot-in { from { opacity:.35; transform:translateY(8px); } to { opacity:1; transform:none; } } }