/* The black cab fare calculator only (templates/taxi/calculator.html.twig). Kept out of site.css,
   which sits at its 25 KB budget and loads on every page. Same tokens as site.css. */
.page--tool .lead{font-size:18px;line-height:1.55;margin:8px 0 18px;max-width:46em}
.fare-form{display:grid;gap:14px;max-width:640px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.ff-row{display:grid;gap:6px}
.ff-row label{font-weight:600}
.ff-opt{font-weight:400;color:var(--muted)}
.ff-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fare-form select,.fare-form input[type=date],.fare-form input[type=time],.fare-form input[type=number]{width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--card);font:inherit;font-size:16px;color:inherit}
.ff-hint{margin:0;color:var(--muted);font-size:14px}
.ff-check{display:flex;align-items:center;gap:10px;min-height:44px}
.ff-check input{width:20px;height:20px;accent-color:var(--accent)}
.fare-form button{justify-self:start;min-height:48px;padding:0 22px;border:0;border-radius:10px;background:var(--accent);color:#fff;font:600 16px var(--sans);cursor:pointer}
.fare-form button:hover{background:var(--accent-ink)}
.fare-error{max-width:640px;padding:12px 16px;border-radius:12px;background:#FBE9E7;color:#7A1F17}
.fare-result{max-width:640px;margin:20px 0 8px;padding:18px 20px;border-radius:16px;background:var(--panel)}
.fare-result h2{margin:0;font:600 17px/1.35 var(--sans)}
.fr-total{margin:8px 0 2px;font:650 38px/1.1 var(--serif);color:var(--accent)}
.fr-sub{margin:0 0 12px;color:var(--muted)}
.fr-facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0 0 10px}
.fr-facts dt{font-weight:600}
.fr-facts dd{margin:0}
.fr-note{margin:8px 0;padding:10px 12px;border-radius:10px;background:var(--card)}
.fr-small{margin:8px 0 0;color:var(--muted);font-size:14px}
.page--tool .table-wrap{overflow-x:auto;margin:8px 0 14px}
.page--tool table{border-collapse:collapse;min-width:520px;font-size:15px}
.page--tool th,.page--tool td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.page--tool th{font-weight:600;background:var(--panel)}
@media (max-width:480px){.ff-pair{grid-template-columns:1fr}.fr-total{font-size:32px}}