/* © Tax Policy Associates 2026 — LVT modeller */
:root{
  --blue:#1f4bd8; --blue-deep:#12163a; --blue-soft:#eef2ff;
  --ink:#151a2e; --ink-2:#3a4256; --muted:#6b7488; --faint:#9aa2b5;
  --line:#e6e9f2; --line-2:#eef0f6;
  --bg:#f4f6fb; --bg-2:#ffffff; --card:#ffffff;
  --good:#0f7a52; --good-bg:#e4f5ec; --bad:#c0392b; --bad-bg:#fbeae7;
  --shadow:0 1px 2px rgba(20,30,60,.04), 0 8px 24px rgba(20,30,60,.05);
  --radius:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.55;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1;}
.wrap{max-width:1160px;margin:0 auto;padding:26px 20px 72px;}
a{color:var(--blue);text-decoration:none}

/* header */
.top{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
.logo{height:38px;width:auto;border-radius:6px;}
.top h1{font-size:1.55rem;font-weight:700;margin:0;letter-spacing:-.01em;}
.top .spacer{flex:1}
.tools{display:flex;gap:8px;flex-wrap:wrap;}
.tool-btn{border:1px solid var(--line);background:var(--card);color:var(--ink-2);border-radius:10px;
  height:38px;padding:0 14px;cursor:pointer;font:inherit;font-size:.84rem;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.tool-btn:hover{color:var(--blue);border-color:var(--blue);background:var(--blue-soft);}
.tool-btn:disabled{opacity:.55;cursor:progress;}
.tool-btn .ic{font-size:1rem;line-height:1;}

.lede{font-size:1.06rem;color:var(--ink-2);max-width:74ch;margin:0 0 26px;}
.lede b{color:var(--ink)} .lede .eng{color:var(--blue);font-weight:700}

/* mode switch (what the LVT replaces) */
.mode-switch{display:flex;justify-content:center;margin:0 0 20px;}
.mode-switch .seg{max-width:100%;flex-wrap:wrap;}
@media(max-width:560px){.mode-switch .seg{width:100%}.mode-switch .seg button{flex:1}}

/* layout */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:900px){.hero{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);}
.card > h2{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);margin:0 0 16px;}
.card > h2 .n{color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0;font-size:.86rem;}

/* schedule designer */
.sched-grid{display:grid;grid-template-columns:1fr 1fr 34px;gap:9px;align-items:end;}
.sched-grid .lbl{font-size:.7rem;color:var(--muted);margin-bottom:4px;font-weight:600;letter-spacing:.02em;}
.field{position:relative;}
.field input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:.98rem;background:var(--bg-2);color:var(--ink);font-variant-numeric:tabular-nums;}
.field.pre input{padding-left:24px} .field.suf input{padding-right:26px}
.field .fx{position:absolute;top:50%;transform:translateY(-50%);color:var(--faint);font-size:.95rem;pointer-events:none}
.field.pre .fx{left:12px} .field.suf .fx{right:12px}
.field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.field input:disabled{background:var(--line-2);color:var(--muted)}
.xbtn{height:42px;border:1px solid var(--line);background:var(--bg-2);border-radius:10px;color:var(--faint);
  cursor:pointer;font-size:1.2rem;line-height:1}
.xbtn:hover{border-color:var(--bad);color:var(--bad)}
.rowgap{height:9px}
.addbtn{margin-top:12px;width:100%;border:1.5px dashed var(--blue);background:transparent;color:var(--blue);
  border-radius:11px;padding:11px;cursor:pointer;font:inherit;font-weight:600;font-size:.92rem;}
.addbtn:hover{background:var(--blue-soft)}
.rn{margin-top:16px;padding-top:15px;border-top:1px solid var(--line-2);font-size:.9rem;color:var(--muted)}
.rn b{color:var(--ink)}
.rn-btn{margin-left:2px;border:1px solid var(--blue);background:var(--blue-soft);color:var(--blue);
  border-radius:8px;padding:3px 10px;cursor:pointer;font:inherit;font-size:.82rem;font-weight:600}
.rn-btn:hover{background:var(--blue);color:#fff}
.opts{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2);display:flex;flex-direction:column;gap:10px;}
.opt{display:flex;align-items:flex-start;gap:9px;font-size:.9rem;color:var(--ink-2);cursor:pointer;line-height:1.4;}
.opt input{margin:2px 0 0;width:17px;height:17px;accent-color:var(--blue);cursor:pointer;flex:0 0 auto;}
.opt:hover{color:var(--ink);}
.skew{margin-top:14px;}
.skew-head{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem;color:var(--ink-2);margin-bottom:6px;}
.skew-head span:first-child{font-weight:600;}
.skew-val{font-size:.82rem;color:var(--blue);font-weight:600;}
.skew input[type=range]{width:100%;accent-color:var(--blue);cursor:pointer;height:20px;}
.skew-ends{display:flex;justify-content:space-between;font-size:.72rem;color:var(--faint);margin-top:2px;}

/* result card */
.result{display:flex;flex-direction:column;}
.bignum{font-size:3.1rem;font-weight:700;line-height:1;letter-spacing:-.02em;
  background:linear-gradient(120deg,var(--blue),#7a3ff0);-webkit-background-clip:text;background-clip:text;color:transparent;}
.result .cap{color:var(--muted);font-size:.95rem;margin-top:4px}
.delta{margin-top:16px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.95rem;color:var(--ink-2)}
.pill{display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums}
.pill.good{background:var(--good-bg);color:var(--good)} .pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.neutral{background:var(--blue-soft);color:var(--blue)}
.phase-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:.68rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--bad-bg);color:var(--bad);
  vertical-align:middle;white-space:nowrap;}
/* plain-English takeaway under the headline */
.takeaway{margin-top:18px;padding-top:15px;border-top:1px solid var(--line-2);font-size:.96rem;
  line-height:1.5;color:var(--ink-2);}
.takeaway b{color:var(--ink);}
/* discoverability hint for the hover/tap price tooltips */
.cap-hint{font-size:.75rem;color:var(--faint);margin-top:9px;font-style:italic;}
/* reset link by the schedule */
.sched-tools{margin-top:12px;text-align:right;}
.reset-btn{border:0;background:transparent;color:var(--muted);font:inherit;font-size:.82rem;font-weight:600;
  cursor:pointer;padding:4px 6px;border-radius:8px;transition:color .15s,background .15s;}
.reset-btn:hover{color:var(--blue);background:var(--blue-soft);}
.baseline{color:var(--muted);font-size:.86rem;margin-top:10px}
.baseline b{color:var(--ink-2)}
.policy-lines{margin-top:8px;display:flex;flex-direction:column;gap:5px;}
.policy-lines .pl{font-size:.86rem;color:var(--ink-2);display:flex;align-items:baseline;gap:7px;}
.policy-lines .pl .amt{font-weight:700;color:var(--bad);font-variant-numeric:tabular-nums;}
.policy-lines .pl .tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--blue);background:var(--blue-soft);border-radius:5px;padding:1px 6px;}
/* winners bar */
.winbar-wrap{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-2)}
.winbar-top{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);margin-bottom:7px}
.winbar-top b{color:var(--ink)}
.winbar{height:12px;border-radius:999px;overflow:hidden;display:flex;background:var(--line-2)}
.winbar .w{background:var(--good)} .winbar .l{background:var(--bad)}
.winbar .w,.winbar .l{transition:width .45s cubic-bezier(.22,1,.36,1);}
.bignum{transition:none;}
.tool-btn,.seg button,.addbtn,.rn-btn,.xbtn,.mode-switch .seg button{transition:color .15s,background .15s,border-color .15s;}
.winlabels{display:flex;justify-content:space-between;font-size:.78rem;margin-top:6px}
.winlabels .lo{color:var(--good);font-weight:600} .winlabels .hi{color:var(--bad);font-weight:600}


/* map */
.mapcard{margin-top:20px}
.map-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.map-head h2{margin:0;flex:1}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--bg-2)}
.seg button{border:0;background:transparent;padding:9px 14px;font:inherit;font-size:.86rem;cursor:pointer;color:var(--muted);font-weight:500}
.seg button + button{border-left:1px solid var(--line)}
.seg button.active{background:var(--blue);color:#fff;font-weight:600}
.map-body{display:grid;grid-template-columns:1.55fr 1fr;gap:18px}
@media(max-width:900px){.map-body{grid-template-columns:1fr}}
#map{height:600px;border-radius:14px;border:1px solid var(--line);background:var(--bg-2);z-index:0}
@media(max-width:900px){#map{height:440px}}
.leaflet-container{font:inherit;background:var(--bg-2)!important}
.legend{background:var(--card);color:var(--ink);padding:10px 12px;border-radius:10px;
  box-shadow:var(--shadow);border:1px solid var(--line);font-size:.78rem;line-height:1.6}
.legend .lt{font-weight:700;margin-bottom:5px;color:var(--ink)}
.legend .ramp{display:flex;height:11px;border-radius:3px;overflow:hidden;margin:5px 0}
.legend .ramp i{flex:1}
.legend .ends{display:flex;justify-content:space-between;color:var(--muted);font-size:.72rem}
.legend .row{display:flex;align-items:center;gap:7px;margin:2px 0}
.legend .row i{width:15px;height:12px;border-radius:3px;display:inline-block}

/* la panel */
.panel{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:18px;min-height:100%}
.panel .pin{float:right;font-size:.72rem;color:var(--faint)}
.panel h3{margin:0 0 3px;font-size:1.15rem;letter-spacing:-.01em}
.panel .meta{color:var(--muted);font-size:.84rem;margin-bottom:14px}
.panel .meta b{color:var(--ink-2)}
.summ{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.summ .box{background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:11px 12px}
.summ .box .k{font-size:.7rem;color:var(--muted);font-weight:600}
.summ .box .v{font-size:1.2rem;font-weight:700;margin-top:1px;font-variant-numeric:tabular-nums}
.summ .box .v.blue{color:var(--blue)}
table.bands{width:100%;border-collapse:collapse;font-size:.8rem;font-variant-numeric:tabular-nums}
table.bands th,table.bands td{padding:5px 4px;text-align:right;border-bottom:1px solid var(--line-2)}
table.bands th{color:var(--muted);font-weight:600;font-size:.68rem;letter-spacing:.01em}
table.bands td.sdlt{color:var(--muted)}
table.bands td.b,table.bands th.b{text-align:left;font-weight:700}
table.bands td.up{color:var(--bad);font-weight:600} table.bands td.down{color:var(--good);font-weight:600}
table.bands tr.tot td{border-top:2px solid var(--line);border-bottom:0;font-weight:700;padding-top:9px}
table.bands tr:hover td{background:var(--bg)}
.pnote{font-size:.78rem;color:var(--muted);font-style:italic;margin-top:9px;padding-left:2px;}
/* capitalisation tooltip (hover on desktop, tap on mobile; dismissed by clicking elsewhere) */
.caprow{cursor:help;}
.cap-tip{position:fixed;z-index:4000;max-width:300px;pointer-events:none;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 16px 48px rgba(20,26,46,.26);padding:18px 20px;
  opacity:0;transform:translateY(5px) scale(.97);transition:opacity .13s ease, transform .13s ease;}
.cap-tip.show{opacity:1;transform:none;}
.cap-tip .num{font-size:2.7rem;font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.cap-tip .num.pos{color:var(--good);} .cap-tip .num.neg{color:var(--bad);}
.cap-tip .lbl{font-size:.82rem;color:var(--muted);font-weight:600;margin-top:5px;}
.cap-tip .note{font-size:.82rem;color:var(--ink-2);line-height:1.5;margin-top:11px;}

/* region impact table */
.regions{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
.regions-title{font-size:1rem;margin:0 0 12px;letter-spacing:-.01em;}
.regions-title .n{font-weight:400;color:var(--muted);font-size:.85rem;letter-spacing:0;}
.region-scroll{overflow-x:auto;}
.region-table{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums;min-width:440px;}
.region-table th,.region-table td{padding:8px 9px;text-align:right;border-bottom:1px solid var(--line-2);white-space:nowrap;}
.region-table th{color:var(--muted);font-weight:600;font-size:.76rem;letter-spacing:.02em;text-transform:uppercase;}
.region-table td.b,.region-table th.b{text-align:left;font-weight:600;}
.region-table td.up{color:var(--bad);font-weight:700;} .region-table td.down{color:var(--good);font-weight:700;}
.region-table tr:hover td{background:var(--bg);}
.region-table tr.tot td{border-top:2px solid var(--line);border-bottom:0;font-weight:700;padding-top:11px;background:var(--bg-2);}
.region-table tr.tot td.up{color:var(--bad);} .region-table tr.tot td.down{color:var(--good);}
.regions-note{font-size:.8rem;color:var(--ink-2);margin-top:12px;}
.app-footer{text-align:right;color:#8a8f9c;font-size:.78rem;font-weight:600;margin-top:16px;}
.app-footer a{color:inherit;text-decoration:none;}
.app-footer a:hover{color:var(--blue);text-decoration:underline;}

.foot{color:var(--muted);font-size:.82rem;line-height:1.65;margin-top:30px;border-top:1px solid var(--line);padding-top:18px}
.foot b{color:var(--ink-2)}

/* ---------- council search (custom autocomplete) ---------- */
.la-find{position:relative;display:flex;align-items:center}
.la-find .find-ic{position:absolute;left:11px;font-size:.85rem;opacity:.55;pointer-events:none}
.la-find input{width:250px;max-width:60vw;padding:9px 12px 9px 32px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:.92rem;background:var(--bg-2);color:var(--ink)}
.la-find input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.la-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:1000;list-style:none;margin:0;padding:5px;
  min-width:100%;width:max-content;max-width:min(360px,85vw);
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px rgba(20,26,46,.18);max-height:302px;overflow-y:auto;display:none}
.la-menu.open{display:block}
.la-menu li{padding:9px 11px;border-radius:8px;font-size:.9rem;color:var(--ink-2);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.la-menu li b{color:var(--blue);font-weight:700}
.la-menu li.active{background:var(--blue-soft);color:var(--ink)}
.la-menu li.pc-msg{color:var(--muted);cursor:default}
.la-menu li.pc-lookup b{color:var(--blue)}

/* ---------- regional impact: mini map (left) + table ---------- */
.regions-wrap{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:start}
@media(max-width:760px){.regions-wrap{grid-template-columns:1fr}}
.mini-map{height:220px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.mini-legend{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-top:6px}
.mini-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:2px}
.mini-legend i.lo{background:#1f6cb0}.mini-legend i.hi{background:#b2182b}

/* keep the regional table as a compact table on narrow screens (rather than tall stacked cards):
   shrink the type, let the region names and headers wrap, keep the numbers on one line, and fall
   back to horizontal scroll (via .scroll-x) only if it still doesn't fit. */
@media(max-width:620px){
  .region-table{min-width:0;font-size:.72rem}
  .region-table th,.region-table td{padding:6px 5px}
  .region-table td{white-space:nowrap}
  .region-table th{font-size:.6rem;white-space:normal;letter-spacing:0;line-height:1.1;vertical-align:bottom}
  .region-table td.b,.region-table th.b{white-space:normal;line-height:1.15;min-width:74px}
}

/* ---------- basis labels ---------- */
.basis-strip{margin-top:12px;background:var(--bg-2);color:var(--ink);font-size:.9rem;font-weight:600;
  line-height:1.4;padding:11px 13px;border-radius:9px;border:1px solid var(--line-2)}
.winnote{margin-top:9px;font-size:.78rem;color:var(--muted);line-height:1.45}

/* ---------- illustrative-figures caveat ---------- */
/* stands out from the neutral basis-strip so the "not precise" warning reads as a warning,
   and is always present on every results surface (see CAVEAT_HTML in app.js) */
.caveat{margin-top:14px;background:#fff7ed;color:#7c4a12;font-size:.82rem;line-height:1.5;
  padding:11px 13px;border-radius:9px;border:1px solid #f3d9b0;}
.caveat b{color:#5e3708}
.caveat a{color:#b3540a;text-decoration:underline;font-weight:600}
.caveat.firm{background:#fdeee0;border-color:#eecba0}

/* ---------- schedule summary ---------- */
.sched-summary{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.82rem;color:var(--muted);margin:11px 0 2px}
.sched-summary b{color:var(--ink-2);font-weight:600}
.sched-summary .sep{color:var(--faint)}

/* ---------- horizontal-scroll shadow ---------- */
.scroll-x{overflow-x:auto;
  background:
    linear-gradient(90deg, var(--card) 30%, rgba(255,255,255,0)) 0 0/34px 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0), var(--card) 70%) 100% 0/34px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(20,26,46,.14), rgba(20,26,46,0)) 0 0/13px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(20,26,46,.14), rgba(20,26,46,0)) 100% 0/13px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;}

/* ---------- loading spinner ---------- */
.loading{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;z-index:9999}
.loading-txt{color:var(--muted);font-size:.9rem;font-weight:600}
.spinner{width:38px;height:38px;border:4px solid var(--line);border-top-color:var(--blue);border-radius:50%;
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}