/* Buckingham Leasing house style: palette and fonts taken from buckinghamleasing.co.uk.
   Fonts are self-hosted (CSP is default-src 'self'). Both files are variable fonts, latin subset. */
@font-face { font-family:"Cormorant Garamond"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(fonts/cormorant-garamond-latin.woff2) format("woff2"); }
@font-face { font-family:"Karla"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url(fonts/karla-latin.woff2) format("woff2"); }

:root {
  --navy:#343f26; --sage:#8bbc6f; --sage-deep:#6fa055; --gold:#c9a227;
  --cream:#faf8f4; --hairline:#e4e1d8; --mist:#eef3e8; --pale:#e7eedc;
  --fg:#2a2c25; --muted:#5c5e55; --card:#fff; --err:#b3261e;
  --ok:#4a7a35; /* sage darkened to readable contrast on cream for confirmation text */
  --warn:#8a5300; /* amber dark enough to read on cream */
  --serif:"Cormorant Garamond", Cormorant, Georgia, serif;
  --sans:Karla, ui-sans-serif, system-ui, sans-serif;
  --radius:.375rem;
}
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; font:17px/1.55 var(--sans); color:var(--fg); background:var(--cream); }
main { max-width:960px; width:100%; margin:0 auto; padding:16px; flex:1 0 auto; }
/* Login: a bordered box centred on any viewport, with the FCA/copyright footer pinned to the bottom. */
body.login-page main { max-width:none; display:flex; align-items:center; justify-content:center; }
.login { width:100%; max-width:420px; padding:28px 24px; background:var(--card); border:1px solid var(--hairline); border-top:4px solid var(--sage); border-radius:var(--radius); box-shadow:0 2px 12px rgba(52,63,38,.08); }
.login-brand { display:block; line-height:0; text-align:center; }
.login-brand img { width:200px; max-width:70%; height:auto; }
.login h1 { text-align:center; font-size:1.7rem; margin:.7em 0 .5em; }
.login .stack { margin:12px 0; max-width:none; }
.login p { text-align:center; font-size:.95rem; }
.legal { width:100%; max-width:960px; margin:24px auto 0; padding:14px 16px 24px; border-top:1px solid var(--gold); font-size:.72rem; line-height:1.5; color:var(--muted); text-align:center; }
.legal p { margin:0 0 .6em; }
a { color:var(--navy); text-decoration-color:var(--sage-deep); text-underline-offset:3px; }
a:hover { color:var(--sage-deep); }
:focus-visible { outline:2px solid var(--sage-deep); outline-offset:2px; }
h1, h2 { font-family:var(--serif); color:var(--navy); font-weight:600; line-height:1.15; }
h1 { font-size:2.1rem; margin:.6em 0 .4em; } h2 { font-size:1.5rem; margin-top:28px; }

.bar { display:flex; gap:16px 24px; align-items:center; flex-wrap:wrap; padding:10px 16px; background:var(--cream); border-bottom:1px solid var(--gold); }
.brand { display:block; line-height:0; }
.brand img { height:48px; width:auto; }
.bar { position:relative; }
.bar nav { display:flex; gap:6px 20px; flex:1; flex-wrap:wrap; align-items:center; }
.bar nav a { text-decoration:none; font-weight:500; padding:4px 0; border-bottom:2px solid transparent; }
.bar nav a:hover { border-bottom-color:var(--sage); color:var(--navy); }
.bar nav form { margin-left:auto; }
/* Burger menu without JavaScript: a visually hidden (still focusable) checkbox drives the nav. */
.nav-toggle { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.burger { display:none; flex-direction:row; align-items:center; gap:10px; font-size:1rem; margin-left:auto; min-height:44px; padding:0 14px; border:1px solid var(--hairline); border-radius:var(--radius); background:#fff; color:var(--navy); font-weight:600; cursor:pointer; user-select:none; }
.burger i { display:block; width:18px; height:2px; background:currentColor; box-shadow:0 -6px 0 currentColor, 0 6px 0 currentColor; }
.nav-toggle:focus-visible + .burger { outline:2px solid var(--sage-deep); outline-offset:2px; }
.nav-toggle:checked + .burger { background:var(--mist); border-color:var(--sage-deep); }
@media (max-width: 759px) {
  .brand img { height:40px; }
  .burger { display:flex; }
  .bar nav { display:none; flex-basis:100%; flex-direction:column; align-items:stretch; gap:0; border-top:1px solid var(--hairline); }
  .nav-toggle:checked ~ nav { display:flex; }
  .bar nav a { display:flex; align-items:center; min-height:48px; padding:0; border-bottom:1px solid var(--hairline); }
  .bar nav form { margin-left:0; }
  .bar nav button.link { min-height:48px; }
}

.row { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; align-items:end;
  background:var(--card); border:1px solid var(--hairline); border-radius:var(--radius); padding:12px; margin:8px 0; }
.row .head { grid-column:1/-1; display:flex; flex-direction:column; }
.row .head span, small, .margin { color:var(--muted); font-size:.85rem; }
.muted { color:var(--muted); font-style:italic; }
.warn { color:var(--warn); font-weight:600; }
.list small.rateset { display:block; margin-top:2px; }
.search { display:flex; gap:8px; max-width:520px; margin:12px 0 4px; }
.search input { flex:1; min-width:0; }
.terms { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; margin:0; padding:0; border:0; }
.terms legend { padding:0; margin-bottom:4px; font-size:.85rem; font-weight:500; color:var(--navy); }
.terms legend small { display:block; font-weight:400; }
.rates { display:flex; flex-wrap:wrap; gap:4px 14px; margin:4px 0; font-size:.9rem; }
.pager { display:flex; justify-content:space-between; gap:12px; margin:16px 0; }
.pager a { display:inline-flex; align-items:center; min-height:44px; font-weight:600; }
label { display:flex; flex-direction:column; font-size:.85rem; font-weight:500; gap:2px; color:var(--navy); }
/* 16px minimum: iPhones zoom the page in when a field with smaller text is tapped. */
input, select, textarea { font:inherit; font-size:max(16px, 1rem); padding:8px; border:1px solid var(--hairline); border-radius:var(--radius); background:#fff; color:var(--fg); min-height:44px; }
input:focus, select:focus { border-color:var(--sage-deep); }
input:disabled { background:transparent; border-style:dashed; color:var(--muted); }
button { font:inherit; font-weight:600; padding:8px 18px; min-height:44px; border:0; border-radius:var(--radius); background:var(--sage); color:var(--navy); cursor:pointer; }
button:hover { background:var(--sage-deep); }
button.link { background:none; color:var(--navy); text-decoration:underline; text-decoration-color:var(--sage-deep); text-underline-offset:3px; font-weight:500; padding:8px 0; }
button.link:hover { color:var(--sage-deep); }
button.danger { background:var(--err); color:#fff; }
button.danger:hover { background:#8f1e17; }
.stack { display:flex; flex-direction:column; gap:12px; max-width:420px; margin:12px 0; }
.error { color:var(--err); }
.list { list-style:none; padding:0; } .list li { padding:12px; background:var(--card); border:1px solid var(--hairline); border-radius:var(--radius); margin:8px 0; }
/* Filter menu above a list: underlined tabs, scrolling sideways on narrow screens rather than wrapping. */
.tabs { display:flex; gap:4px; margin:4px 0 16px; border-bottom:1px solid var(--hairline); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tabs a { display:inline-flex; align-items:center; gap:6px; flex:none; min-height:44px; padding:0 12px; margin-bottom:-1px;
  border-bottom:2px solid transparent; color:var(--muted); font-weight:500; text-decoration:none; white-space:nowrap; }
.tabs a:hover { color:var(--navy); border-bottom-color:var(--hairline); }
.tabs a.on { color:var(--navy); font-weight:600; border-bottom-color:var(--sage-deep); }
.tabs .count { min-width:20px; padding:0 6px; border-radius:10px; background:var(--pale); color:var(--navy);
  font-size:.75rem; font-weight:600; line-height:20px; text-align:center; font-variant-numeric:tabular-nums; }
.tabs a.on .count { background:var(--sage); }
/* Status shown on a row. */
.badge { display:inline-block; padding:1px 8px; border-radius:10px; background:var(--mist); color:var(--navy);
  font-size:.75rem; font-weight:600; line-height:1.5; vertical-align:middle; white-space:nowrap; }
/* Labels may wrap but never take more than 45%: a max-content label column pushed values off a phone screen. */
.facts { display:grid; grid-template-columns:fit-content(45%) minmax(0,1fr); gap:4px 16px; }
.facts dt { color:var(--muted); } .facts dd { margin:0; word-break:break-word; }
/* Money summaries read like a statement: label left (wraps on phones), amount right-aligned in tabular figures. */
.facts.sums { grid-template-columns:minmax(0,1fr) auto; gap:0; max-width:480px; margin:12px 0; padding:4px 14px;
  background:var(--card); border:1px solid var(--hairline); border-radius:var(--radius); }
.sums dt, .sums dd { padding:8px 0; border-top:1px solid var(--hairline); }
.sums > :nth-child(-n+2) { border-top:0; }
.sums dd { padding-left:16px; text-align:right; white-space:nowrap; word-break:normal; font-variant-numeric:lining-nums tabular-nums; }
.sums dt small { display:block; font-size:.8rem; }
.sums .total { border-top:2px solid var(--navy); color:var(--navy); }
table { width:100%; border-collapse:collapse; font-size:.9rem; display:block; overflow-x:auto; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--hairline); }
th { color:var(--navy); font-weight:600; }
.htmx-request { opacity:.6; }
.banner, .hint { padding:8px 12px; border-radius:var(--radius); background:var(--card); border:1px solid var(--hairline); }
.banner { border-color:var(--err); }
.ok { color:var(--ok); font-weight:600; }
.url { overflow-wrap:anywhere; }
.inputs { display:grid; gap:12px; max-width:420px; margin-bottom:12px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px; margin:12px 0; }
.card { position:relative; display:flex; flex-direction:column; gap:2px; padding:12px; border:2px solid var(--hairline); border-radius:var(--radius); background:var(--card); font-size:1rem; cursor:pointer; }
/* .sel marks the agreed term on a saved quote. On the quote form only the checked radio counts:
   a server-rendered class would stay on the default term after the salesperson picks another. */
.card.sel, .card:has(input:checked) { border-color:var(--sage-deep); background:var(--mist); }
.card:has(input:focus-visible) { outline:2px solid var(--sage-deep); outline-offset:2px; }
.card input { position:absolute; opacity:0; pointer-events:none; }
.card .term { font-size:.85rem; color:var(--muted); }
.card .monthly { font-size:1.9rem; font-weight:700; line-height:1.1; color:var(--navy); font-variant-numeric:lining-nums tabular-nums; }
.card .monthly small { font-size:.9rem; font-weight:400; color:var(--muted); }
.card .sub { font-size:.85rem; color:var(--muted); }
.check { flex-direction:row; align-items:center; gap:10px; min-height:44px; font-size:.95rem; cursor:pointer; }
.check input { min-height:auto; width:22px; height:22px; margin:0; accent-color:var(--sage-deep); }
.ref { font-size:1.2rem; font-family:var(--serif); color:var(--navy); }
@media (max-width: 700px) {
  .quote-form .cards { grid-template-columns:1fr; }
  .quote-form .card { flex-direction:row; flex-wrap:wrap; align-items:baseline; justify-content:space-between; }
  .quote-form .card .sub { flex-basis:100%; }
}
/* Print keeps the logo as a letterhead (the customer quote page is printed to PDF). */
@media print { .bar nav, .burger, .nav-toggle, button, form, nav { display:none !important; } .bar { border:0; padding-left:0; } body { background:#fff; color:#000; } }