/* self-hosted latin variable fonts (no external round-trip; preloaded in ) */ @font-face{font-family:'Fraunces';font-style:normal;font-weight:500 900;font-display:optional;src:url(/fonts/fraunces.woff2) format('woff2')} @font-face{font-family:'Fraunces';font-style:italic;font-weight:500 900;font-display:optional;src:url(/fonts/fraunces-italic.woff2) format('woff2')} @font-face{font-family:'Work Sans';font-style:normal;font-weight:400 700;font-display:optional;src:url(/fonts/worksans.woff2) format('woff2')} :root{ --cream:#f5ecd6; --paper:#faf3e2; --ink:#22301c; --muted:#67674f; --green:#356239; --green-d:#20421f; --tomato:#bd3720; --ochre:#cf9319; --line:#ddceac; --serif:"Fraunces",Georgia,"Times New Roman",serif; --sans:"Work Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* vivid brand — map dots/pins/coverage/legend + badge backgrounds */ --pns:#FFD400; --pns-ink:#161200; --nw:#E11B22; --wool:#0A8A3F; /* accessible brand shades for coloured TEXT on cream (WCAG AA ≥4.5:1) */ --pns-text:#7d6410; --nw-text:#c81820; --wool-text:#0a7a38; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.5;padding-bottom:56px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E")} /* ---------- map hero (the location picker) ---------- */ .maphero{position:relative;height:min(46vh,380px);background:#d3e3c4;overflow:hidden} #map{position:absolute;inset:0} .maplibregl-ctrl-attrib{font-size:10px} .mapbar{position:absolute;z-index:5;top:16px;left:0;right:0;display:flex;justify-content:center;gap:8px;padding:0 16px} .field{position:relative;width:min(520px,100%);display:flex;align-items:center;gap:9px;background:var(--paper); border:1.5px solid var(--green);border-radius:100px;padding:12px 18px;font-size:15px;box-shadow:0 6px 20px rgba(0,0,0,.14)} .field .pin{flex:none} .field input{border:none;outline:none;background:transparent;font:inherit;width:100%;color:var(--ink)} .field input::placeholder{color:var(--muted)} .ghostbtn{flex:none;width:46px;border:1.5px solid var(--green);background:var(--paper);color:var(--green); border-radius:50%;font-size:20px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.14)} .ghostbtn:hover{background:var(--win,#e8f3ec)} .drop{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1.5px solid var(--line); border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.16);max-height:250px;overflow:auto} .drop button{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line); color:var(--ink);padding:11px 16px;font:inherit;font-size:14px;cursor:pointer} .drop button:last-child{border-bottom:none} .drop button:hover,.drop button:focus{background:#f3ead4} .expand{position:absolute;right:16px;bottom:16px;z-index:5;background:var(--green-d);color:var(--paper);border:none; border-radius:100px;padding:11px 18px;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.2)} .err{position:absolute;z-index:6;left:16px;bottom:16px;background:var(--tomato);color:#fff;font-size:12.5px;font-weight:600; padding:8px 12px;border-radius:8px;max-width:60%} /* fullscreen picker */ body.picking{overflow:hidden} .maphero.expanded{position:fixed;inset:0;z-index:1000;height:100dvh} .maphero.expanded .expand{background:var(--tomato)} /* ---------- "cheapest by area" coverage overlay control ---------- */ .cov-ctrl{position:absolute;z-index:5;left:16px;bottom:16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:calc(100% - 32px)} .cov-toggle{display:inline-flex;align-items:center;gap:7px;background:var(--paper);color:var(--ink); border:1.5px solid var(--green);border-radius:100px;padding:9px 14px;font-family:var(--sans);font-weight:700; font-size:12.5px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.2);white-space:nowrap} .cov-toggle:hover{background:#e8f3ec} .cov-toggle[aria-pressed="true"]{background:var(--green-d);color:var(--paper);border-color:var(--green-d)} .cov-legend{background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:9px 12px; box-shadow:0 6px 18px rgba(0,0,0,.16);font-size:11.5px;line-height:1.35} .cov-legend .cap{color:var(--muted);margin-bottom:6px;max-width:200px} .cov-legend .sw{display:flex;align-items:center;gap:7px;margin:3px 0;font-weight:600;color:var(--ink)} .cov-legend .dot{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(0,0,0,.18);flex:none} /* ---------- masthead ---------- */ .masthead{text-align:center;padding:24px 16px 4px;border-bottom:2px solid var(--ink);max-width:940px;margin:0 auto} .kicker{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)} h1{font-family:var(--serif);font-weight:900;font-size:clamp(46px,12vw,104px);line-height:.84;margin:.06em 0 .1em; letter-spacing:-.03em;color:var(--green-d);text-wrap:balance} h1 em{font-style:italic;color:var(--tomato)} .dateline{display:flex;justify-content:space-between;gap:12px;max-width:940px;margin:0 auto;padding:9px 16px; font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)} /* ---------- lead ---------- */ .wrap{max-width:940px;margin:0 auto;padding:22px 16px} .lead{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:start} @media(max-width:760px){.lead{grid-template-columns:1fr;gap:22px}} .story .prompt{font-size:16px;color:#3d4a34;margin:0} .story .tag{display:inline-block;background:var(--ochre);color:#3a2c05;font-weight:800;font-size:11px;letter-spacing:.08em; text-transform:uppercase;padding:4px 11px;border-radius:100px;margin-bottom:10px} .story .drop-cap{font-family:var(--serif);font-weight:900;font-size:clamp(30px,4.2vw,46px);line-height:1; letter-spacing:-.015em;color:var(--green-d);text-wrap:balance;margin:0} .story p.body{font-size:16px;color:#3d4a34;margin:.75em 0 0} .story p.body b{color:var(--green-d)} /* brand wordmark (nominative name + colour, not the trademarked logo) */ .brand{display:inline-flex;align-items:center;gap:.32em;font-weight:800;letter-spacing:-.01em;border-radius:7px; padding:.12em .5em;line-height:1.15;white-space:nowrap;font-family:var(--sans);font-size:.66em;vertical-align:.06em} .brand .mk{display:grid;place-items:center;width:1.2em;height:1.2em;border-radius:50%;font-size:.82em;font-weight:900} .brand.pns{background:var(--pns);color:var(--pns-ink)} .brand.pns .mk{background:var(--pns-ink);color:var(--pns)} .brand.nw{background:var(--nw);color:#fff} .brand.nw .mk{background:#fff;color:var(--nw)} .brand.wool{background:var(--wool-text);color:#fff} .brand.wool .mk{background:#fff;color:var(--wool-text)} /* ---------- verdict board: one card per chain, inline cost equation ---------- */ /* Each chain reads: groceries $X + transport $Y + time $Z = $Total on one line. The = $Total (all-in) is the dominant figure; components lead up to it. Brand shown via TEXT COLOUR — PNS uses ochre (its yellow is illegible on cream). */ .cards{display:flex;flex-direction:column;gap:10px} .ccard{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:12px 15px} .ccard.win{background:#fff8e8;border-color:var(--ochre)} .cc-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:7px} .c-name{font-weight:800;font-size:15px;letter-spacing:-.01em} .c-name.pns{color:var(--pns-text)} .c-name.nw{color:var(--nw-text)} .c-name.wool{color:var(--wool-text)} .c-sub{color:var(--muted);font-size:12px} /* inline equation of label-over-figure terms with + / = between; wraps gracefully. All four figures share one style; all-in is the biggest. */ .cc-eq{display:flex;flex-wrap:wrap;align-items:flex-end;gap:5px 4px;font-variant-numeric:tabular-nums} .cc-term{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0} .cc-lab{font-size:9px;text-transform:uppercase;letter-spacing:.01em;color:var(--muted);font-weight:600} .cc-fig{font-family:var(--serif);font-weight:700;font-size:16px;line-height:1;font-variant-numeric:tabular-nums} .cc-fig.pns{color:var(--pns-text)} .cc-fig.nw{color:var(--nw-text)} .cc-fig.wool{color:var(--wool-text)} .cc-fig.cc-groc{font-size:19px} .cc-fig.cc-tot{font-size:23px} .ccard.win .cc-fig{font-weight:900} /* transport + time read as the lesser components — lighter than groceries/all-in */ .cc-fig:not(.cc-groc):not(.cc-tot){font-weight:500} .ccard.win .cc-fig:not(.cc-groc):not(.cc-tot){font-weight:500} .cc-op{align-self:flex-end;color:var(--muted);font-size:14px;font-weight:600;padding-bottom:1px} /* pin the "= $Total" (all-in) hard right; groceries + transport + time stay left */ .cc-eq .cc-eq-sep{font-size:17px;color:var(--ink);margin-left:auto} .cc-eq .cc-term:last-child{align-items:flex-end} .cc-pending{color:var(--muted);font-style:italic;font-size:13px;padding:4px 0} /* ---------- strip / levers (directly above the basket, side by side) ---------- */ .strip{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:14px 0} @media(max-width:520px){.strip{grid-template-columns:1fr}} .lever{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:15px} .lever h2{font-family:var(--serif);font-weight:600;margin:0 0 9px;font-size:15px;color:var(--green-d)} .lever h2 span{color:var(--muted);font-weight:500} .seg{display:flex;gap:6px} .seg button{flex:1;background:#fff;border:1.5px solid var(--line);color:var(--muted);border-radius:8px;padding:9px 3px; font:inherit;font-size:12.5px;font-weight:600;line-height:1.15;cursor:pointer} .seg button small{display:block;font-size:12px;font-weight:700;margin-top:2px;color:var(--ink);font-variant-numeric:tabular-nums} .seg button[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fff} .seg button[aria-pressed=true] small{color:#fff} .more{margin-top:10px;background:none;border:none;color:var(--green);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:0} .more:hover{text-decoration:underline} .detail{margin-top:10px;padding-top:10px;border-top:1px dotted var(--line)} .detail .custom{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)} .detail .custom input{width:88px;font:inherit;font-size:14px;padding:7px 9px;border:1.5px solid var(--line);border-radius:8px; font-variant-numeric:tabular-nums} .detail .hint{margin:9px 0 0;font-size:12px;color:var(--muted);line-height:1.5} .basketcard p{margin:0 0 10px;font-size:13px;color:var(--muted)} .linkbtn{background:none;border:none;color:var(--green);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;padding:0} .linkbtn:hover{text-decoration:underline} /* ---------- basket ---------- */ details.basket{margin-top:18px;background:var(--paper);border:1px solid var(--line);border-radius:12px} details.basket summary{cursor:pointer;padding:14px 16px;font-family:var(--serif);font-weight:700;font-size:15px;list-style:none;color:var(--green-d)} details.basket summary::-webkit-details-marker{display:none} details.basket summary::after{content:"▾";float:right;color:var(--muted)} details.basket[open] summary::after{content:"▴"} .tblwrap{overflow-x:auto;padding:0 6px 6px} table{border-collapse:collapse;width:100%;font-size:13px;min-width:520px} th,td{text-align:right;padding:7px 11px;border-bottom:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums} th:first-child,td:first-child{text-align:left;white-space:normal;font-variant-numeric:normal} thead th{position:sticky;top:0;background:var(--paper);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} tfoot th,tfoot td{border-top:2px solid var(--ink);font-weight:700} td.lo{color:var(--tomato);font-weight:700} td.i-cell .i-brand{color:var(--muted);font-weight:400;font-size:12px} th.del-col,td.del-col{width:34px;text-align:center;padding:4px 6px;white-space:nowrap} .tbl-del{background:none;border:none;cursor:pointer;font-size:14px;line-height:1;opacity:.5;padding:3px 5px;border-radius:6px} .tbl-del:hover{opacity:1;background:#f6e3dd} .btn{background:var(--green-d);color:var(--paper);border:none;border-radius:100px;font:inherit;font-weight:700;padding:11px 18px;cursor:pointer} /* ---------- custom basket builder ---------- */ .builder-panel{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:18px} .basket-actions{display:flex;flex-wrap:wrap;gap:7px} .chipbtn{background:#fff;border:1.5px solid var(--line);border-radius:100px;color:var(--green-d);font:inherit; font-size:12.5px;font-weight:700;padding:7px 12px;cursor:pointer;white-space:nowrap} .chipbtn:hover{border-color:var(--green);background:#fff8e8} .chipbtn.tpl{background:var(--green-d);color:var(--paper);border-color:var(--green-d)} .chipbtn.tpl:hover{background:var(--green)} .act-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);align-self:center;margin-right:2px} .act-sep{width:1px;align-self:stretch;background:var(--line);margin:2px 4px} .credits{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:11.5px} .credits .built{font-weight:700;color:var(--green-d)} .credits .built a{color:var(--green-d)} .credits .lic{color:var(--muted)} .builder{border-top:1px dashed var(--line);margin:0 12px;padding:14px 4px 16px} .builder-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap} .builder-head .bh{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--green-d);margin:0} .disclaimer{margin:3px 0 0;font-size:12px;color:var(--muted)} .disclaimer strong{color:var(--green-d)} .builder-search{position:relative;display:block;margin-top:12px} .builder-search input{width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1.5px solid var(--green);border-radius:12px;background:#fff;color:var(--ink)} .builder-search input:focus{outline:2px solid var(--green);outline-offset:1px} .builder-search .drop button{display:flex;justify-content:space-between;gap:12px;align-items:center} .li-name{font-size:14px}.li-name em{color:var(--muted);font-style:normal;font-size:12.5px} .i-unit{color:var(--green);font-weight:600;font-size:12px;white-space:nowrap} .li-chips,.mb-chips{display:flex;gap:5px;flex:none} .chip{font-size:11px;font-weight:700;border-radius:6px;padding:3px 6px;font-variant-numeric:tabular-nums;white-space:nowrap} .chip.pns{background:var(--pns);color:var(--pns-ink)} .chip.nw{background:var(--nw);color:#fff} .chip.wool{background:var(--wool-text);color:#fff} .basket-cta{margin:13px 0 0;font-size:14px;color:var(--muted);line-height:1.55} .basket-cta .cta-add{color:var(--green-d);font-weight:700;white-space:nowrap} .basket-cta strong{color:var(--green-d);font-weight:700} .cta-manage{background:none;border:none;padding:0;margin:0;font:inherit;font-size:14px;font-weight:700;color:var(--green);cursor:pointer;text-decoration:underline;text-underline-offset:2px} .cta-manage:hover{color:var(--tomato)} .basket-utils{margin-top:14px;padding-top:12px;border-top:1px dotted var(--line)} .my-basket{margin-top:12px} .mb-hint{font-size:13px;color:var(--muted);margin:0} .mb-count{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:8px} .mb-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px dotted var(--line)} .mb-row:last-child{border-bottom:none} .mb-x{width:26px;height:26px;flex:none;border:none;border-radius:7px;background:none;font-size:14px;line-height:1;cursor:pointer;opacity:.55;padding:0} .mb-x:hover{opacity:1;background:#f6e3dd} .mb-name{font-size:13.5px;min-width:0}.mb-name em{color:var(--muted);font-style:normal;font-size:12px} @media(max-width:520px){.mb-chips,.li-chips{display:none}} .foot{margin-top:24px;font-size:12px;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);padding-top:16px} .foot a{color:var(--green)} /* comparison table folded into the "Your basket" panel */ details.basket.in-panel{margin-top:16px;background:transparent;border:none;border-top:1px dashed var(--line);border-radius:0} details.basket.in-panel summary{padding:13px 2px 10px} /* studio byline in the footer credits */ .credits .built{display:inline-flex;align-items:baseline;gap:.42em;font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)} .credits .built .wordmark{font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:-.01em;text-transform:none;color:var(--green-d);text-decoration:none;padding-bottom:1px;border-bottom:1.5px solid transparent;transition:border-color .16s ease,color .16s ease} .credits .built .wordmark:hover{color:var(--tomato);border-bottom-color:var(--tomato)} /* history: date selector bar */ .datebar{max-width:940px;margin:0 auto;padding:13px 16px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink)} .datebar .db-label{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--green-d)} .db-picker{display:flex;align-items:center;gap:8px} .db-arrow{width:38px;height:38px;flex:none;border:1.5px solid var(--green);background:var(--paper);color:var(--green);border-radius:50%;font-size:20px;line-height:1;cursor:pointer} .db-arrow:hover:not(:disabled){background:#fff8e8} .db-arrow:disabled{opacity:.35;cursor:default} .db-select{position:relative;display:inline-flex;align-items:center;background:var(--green-d);color:var(--paper);border-radius:100px;padding:9px 16px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.14)} .db-select .db-shown{font-family:var(--serif);font-weight:700;font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:.01em;pointer-events:none} .db-select::after{content:"▾";margin-left:9px;font-size:12px;color:var(--paper);pointer-events:none} .db-select select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font:inherit} /* cross-links between live app and history */ .pastdays{max-width:940px;margin:16px auto 0;padding:0 16px;text-align:center} .pastdays a{display:inline-block;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--green-d);text-decoration:none;border-bottom:1.5px solid var(--line);padding-bottom:2px} .pastdays a:hover{color:var(--tomato);border-bottom-color:var(--tomato)} /* ---------- store markers + popups ---------- */ .pin-you{width:20px;height:20px;border-radius:50%;background:var(--green-d);border:3px solid #fff;box-shadow:0 0 0 6px rgba(53,98,57,.25),0 2px 6px rgba(0,0,0,.35);cursor:grab} .store-pin{width:27px;height:27px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4); display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;cursor:pointer;font-family:var(--sans)} .maplibregl-popup-content{font-family:var(--sans);font-size:12.5px;padding:9px 12px;border-radius:9px} /* ---------- pro modal ---------- */ dialog{border:none;border-radius:16px;padding:0;max-width:430px;width:92%;box-shadow:0 20px 60px rgba(20,26,23,.3)} dialog::backdrop{background:rgba(30,40,25,.5)} .modal{padding:24px} .modal h2{font-family:var(--serif);margin:0 0 6px;font-size:22px;color:var(--green-d)} .modal p{margin:0 0 14px;color:var(--muted);font-size:14px} .modal ul{margin:0 0 16px;padding-left:18px;font-size:14px} .modal ul li{margin:5px 0} .modal .btn{width:100%;padding:13px} .modal .close{background:none;border:none;color:var(--muted);width:100%;padding:10px;margin-top:8px;font:inherit;font-size:13px;cursor:pointer} /* ---------- about page ("how it works") ---------- */ .about{max-width:820px;margin:0 auto;padding:26px 18px 40px} .about .lede{font-family:var(--serif);font-size:clamp(18px,3.4vw,23px);line-height:1.4;color:var(--ink);margin:0 0 8px} .about .lede em{font-style:italic;color:var(--green-d)} .about h2{font-family:var(--serif);font-weight:700;font-size:clamp(20px,4vw,26px);color:var(--green-d); margin:30px 0 10px;padding-top:16px;border-top:2px solid var(--ink)} .about h3.eq-cat{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--tomato);margin:22px 0 8px} .about p{font-size:15.5px;line-height:1.6;margin:0 0 12px} .about ul{margin:0 0 14px;padding-left:20px} .about ul li{font-size:15px;line-height:1.55;margin:7px 0} .about strong{color:var(--green-d)} .about .close-note{color:var(--muted);font-size:14px} .about .iterate-cta{margin-top:14px;background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:18px 20px} .about .iterate-cta a.go{display:inline-block;margin-top:8px;font-family:var(--serif);font-weight:700;font-size:16px; color:#fff;background:var(--green-d);text-decoration:none;padding:10px 18px;border-radius:100px} .about .iterate-cta a.go:hover{background:var(--tomato)} .about .backlink{display:inline-block;margin-bottom:6px;font-family:var(--serif);font-style:italic;font-size:15px; color:var(--green-d);text-decoration:none} .about .backlink:hover{color:var(--tomato)} /* equivalence table on the about page — brand colour + cheapest bold */ table.eq{width:100%;border-collapse:collapse;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;overflow:hidden;font-variant-numeric:tabular-nums} table.eq th,table.eq td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} table.eq thead th{font-family:var(--sans);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;background:#fbf5e6} table.eq tbody tr:last-child td{border-bottom:none} table.eq .eq-staple{font-family:var(--serif);font-weight:600;font-size:14.5px;color:var(--ink);white-space:nowrap} table.eq td.pns{color:var(--pns-text)} table.eq td.nw{color:var(--nw-text)} table.eq td.wool{color:var(--wool-text)} table.eq td.eq-lo{font-weight:800} table.eq td.eq-lo::after{content:" ★";font-size:10px;vertical-align:2px} .eq-prod{display:block;font-size:13px;font-weight:600;line-height:1.3} .eq-meta{display:block;font-size:11px;color:var(--muted);margin-top:1px} .eq-line{display:block;font-family:var(--serif);font-size:16px;margin-top:3px} .eq-unit{display:block;font-family:var(--sans);font-size:10.5px;font-weight:400;color:var(--muted);margin-top:1px} .eq-empty{color:var(--muted);font-size:14px} @media(max-width:560px){table.eq th,table.eq td{padding:8px 8px}.eq-prod{font-size:12px}} /* ---------- equivalence ⓘ affordance + inline mapping popover ---------- */ .equiv-info{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0; border:none;border-radius:50%;background:none;color:var(--green);font-size:13px;line-height:1;cursor:pointer;vertical-align:middle} .equiv-info:hover{background:#e8f3ec;color:var(--green-d)} .equiv-info[aria-expanded="true"]{background:var(--green-d);color:#fff} .mb-name .equiv-info{width:20px;height:20px;font-size:12px} /* dropdown rows: add-button + ⓘ side by side (override the broad .drop button rules) */ .builder-search .drop .li-row{display:flex;align-items:stretch;border-bottom:1px solid var(--line)} .builder-search .drop .li-row:last-child{border-bottom:none} .builder-search .drop .li-add{flex:1;min-width:0;border-bottom:none} .builder-search .drop .equiv-info{width:24px;min-width:24px;flex:none;display:inline-flex;justify-content:center; align-items:center;align-self:center;padding:0;border-bottom:none;margin:0 8px} .equiv-pop{position:fixed;z-index:3000;width:min(320px,calc(100vw - 16px));background:var(--paper); border:1.5px solid var(--green);border-radius:12px;box-shadow:0 14px 40px rgba(20,26,23,.28);padding:12px 14px; font-family:var(--sans);font-variant-numeric:tabular-nums} .equiv-pop .ep-h{font-family:var(--serif);font-weight:700;font-size:14px;color:var(--green-d);margin-bottom:6px} .equiv-pop .ep-unit{color:var(--muted);font-weight:400;font-size:12px} .equiv-pop .ep-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:6px 0;border-top:1px solid var(--line)} .equiv-pop .ep-right{display:flex;flex-direction:column;align-items:flex-end;flex:none} .equiv-pop .ep-up{font-family:var(--sans);font-size:10.5px;font-weight:400;color:var(--muted);margin-top:1px;white-space:nowrap} .equiv-pop .ep-row.pns .ep-prod,.equiv-pop .ep-row.pns .ep-line{color:var(--pns-text)} .equiv-pop .ep-row.nw .ep-prod,.equiv-pop .ep-row.nw .ep-line{color:var(--nw-text)} .equiv-pop .ep-row.wool .ep-prod,.equiv-pop .ep-row.wool .ep-line{color:var(--wool-text)} .equiv-pop .ep-prod{font-size:12.5px;font-weight:600;min-width:0} .equiv-pop .ep-size{color:var(--muted);font-weight:400;font-size:11px} .equiv-pop .ep-line{font-family:var(--serif);font-size:15px;white-space:nowrap} .equiv-pop .ep-lo .ep-prod,.equiv-pop .ep-lo .ep-line{font-weight:800} .equiv-pop .ep-lo .ep-line::after{content:" ★";font-size:10px;vertical-align:1px} .equiv-pop .ep-warn{margin-top:9px;padding:8px 10px;border-radius:8px;background:#fbeee0;border:1px solid #e7cfa8; color:#7a5a12;font-size:11.5px;line-height:1.4} .equiv-pop .ep-foot{display:block;margin-top:9px;padding-top:8px;border-top:1px solid var(--line); font-size:11px;color:var(--muted);text-decoration:none;line-height:1.35} .equiv-pop .ep-foot:hover{color:var(--tomato)} .equiv-warn{color:var(--tomato);font-size:12px;cursor:default;vertical-align:middle} /* ---------- about: featured + searchable crosswalk ---------- */ .about h3.eq-sub{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--green-d);margin:26px 0 10px} .eq-featured table.eq{border-color:var(--green);border-width:2px} .eq-controls{display:flex;flex-direction:column;gap:10px;margin-bottom:10px} #eq-search{width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1.5px solid var(--green);border-radius:12px;background:#fff;color:var(--ink)} #eq-search:focus{outline:2px solid var(--green);outline-offset:1px} .eq-chips{display:flex;flex-wrap:wrap;gap:7px} .eq-chip{font:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;border:1.5px solid var(--line);border-radius:100px; background:var(--paper);color:var(--ink);cursor:pointer;white-space:nowrap} .eq-chip:hover{border-color:var(--green)} .eq-chip.on{background:var(--green-d);color:var(--paper);border-color:var(--green-d)} .eq-count{font-size:12.5px;color:var(--muted);margin:4px 0 10px;font-weight:600} .eq-results{min-height:40px} .eq-more-wrap{text-align:center;margin-top:12px} .eq-more{font:inherit;font-size:13px;font-weight:700;padding:10px 22px;border:1.5px solid var(--green);border-radius:100px; background:var(--paper);color:var(--green-d);cursor:pointer} .eq-more:hover{background:var(--green-d);color:var(--paper)} .eq-badge{display:inline-block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em; padding:2px 6px;border-radius:5px;color:#fff;vertical-align:middle;margin-left:4px} .eq-badge.national{background:var(--green)} .eq-badge.house{background:var(--ochre);color:#3a2c05} .eq-badge.commodity{background:var(--tomato)} table.eq td.eq-na{color:var(--muted)} table.eq td.eq-na .eq-prod{color:var(--muted);font-weight:400} /* order / match-confidence badge + warning tooltip */ .ord-badge{display:inline-block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em; padding:2px 6px;border-radius:5px;vertical-align:middle;margin-left:4px;border:1px solid transparent;font-family:var(--sans)} .ord-badge.o1{background:transparent;border-color:var(--line);color:var(--muted)} .ord-badge.o2{background:#fbe7cc;color:#7a5a12} .ord-badge.o3{background:#f7ddd5;color:#8a2c17} button.ord-badge{cursor:pointer;line-height:1.25} button.ord-badge:hover{filter:brightness(.96)} button.ord-badge[aria-expanded="true"]{outline:2px solid var(--ochre);outline-offset:1px} .warn-pop{position:fixed;z-index:3000;width:min(300px,calc(100vw - 16px));background:var(--paper); border:1.5px solid var(--ochre);border-radius:10px;box-shadow:0 12px 34px rgba(20,26,23,.26);padding:10px 12px; font-family:var(--sans);font-size:12px;line-height:1.45;color:#6a4e12} .warn-pop .wp-i{color:var(--tomato);font-weight:800} /* ---------- PWA: loading spinner, offline states, update toast ---------- */ .loading-card{display:flex;align-items:center;justify-content:center;gap:12px;padding:34px 18px; background:var(--paper);border:1.5px solid var(--line);border-radius:14px;color:var(--muted);font-size:14px;font-weight:600} .loading-card.err-card{color:var(--tomato);border-color:var(--tomato)} .spinner{width:22px;height:22px;flex:none;border-radius:50%;border:3px solid var(--line);border-top-color:var(--green); animation:iiwi-spin .8s linear infinite} @keyframes iiwi-spin{to{transform:rotate(360deg)}} /* subtle "loading prices…" affordance on data-dependent controls */ body.data-loading .builder-panel{opacity:.7} .chipbtn:disabled,#lib-search:disabled,.cov-toggle:disabled{opacity:.5;cursor:progress} .sw-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:4000;display:flex;align-items:center;gap:12px; background:var(--green-d);color:var(--paper);padding:11px 16px;border-radius:100px;box-shadow:0 8px 26px rgba(0,0,0,.3); font-family:var(--sans);font-size:13.5px;font-weight:600;max-width:calc(100vw - 24px)} .sw-toast button{background:var(--paper);color:var(--green-d);border:none;border-radius:100px;padding:7px 15px; font:inherit;font-weight:700;cursor:pointer;white-space:nowrap} .sw-toast button:hover{background:#fff} /* ============================================================ ACCESSIBILITY & MOBILE PASS ============================================================ */ /* --- skip link + screen-reader-only utility --- */ .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip-link{position:fixed;top:8px;left:8px;z-index:5000;background:var(--green-d);color:#fff;padding:13px 18px; border-radius:8px;font-family:var(--sans);font-weight:700;font-size:14px;text-decoration:none;transform:translateY(-160%);transition:transform .15s} .skip-link:focus{transform:translateY(0)} /* --- visible keyboard focus ring on every interactive control --- */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible, [tabindex]:focus-visible,.seg button:focus-visible,.chipbtn:focus-visible,.eq-chip:focus-visible{ outline:3px solid var(--green-d);outline-offset:2px;border-radius:6px} .field:focus-within{outline:3px solid var(--green-d);outline-offset:2px} /* on dark controls the ring needs a light colour to be visible */ .expand:focus-visible,.cov-toggle[aria-pressed="true"]:focus-visible,.eq-chip.on:focus-visible, .sw-toast button:focus-visible,.skip-link:focus-visible{outline-color:#fff} /* --- inputs ≥16px (prevents iOS focus-zoom) --- */ .field input,.builder-search input,#eq-search,#km-in,#hr-in,.custom input{font-size:16px} /* --- touch targets ≥44px --- */ .chipbtn,.eq-chip,.eq-more,.cov-toggle,.expand,.db-arrow,.more{min-height:44px} .seg button{min-height:44px} .ghostbtn{width:46px;height:46px} /* MapLibre zoom controls — default ~29px, obscured; enlarge the hit area */ .maplibregl-ctrl-group button{width:44px!important;height:44px!important} .maplibregl-ctrl-group{margin:10px!important} /* small inline icon controls: generous tap area without disrupting layout */ .equiv-info{min-width:28px;min-height:28px} .mb-x,.tbl-del{min-width:40px;min-height:40px} .builder-search .drop .equiv-info{min-width:40px;min-height:40px} /* keep chips from being cramped */ .eq-chips{gap:8px} /* --- safe-area insets (notch / home indicator) --- */ body{padding-bottom:calc(56px + env(safe-area-inset-bottom))} .wrap{padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))} .mapbar{top:calc(16px + env(safe-area-inset-top))} .cov-ctrl{left:calc(16px + env(safe-area-inset-left));bottom:calc(16px + env(safe-area-inset-bottom))} .expand{right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom))} .maplibregl-ctrl-top-right{margin-top:calc(66px + env(safe-area-inset-top));margin-right:calc(6px + env(safe-area-inset-right))} .about,.masthead,.dateline,.datebar{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))} /* --- no horizontal page scroll; wide content scrolls inside its own box --- */ html,body{overflow-x:hidden} .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch} /* --- crosswalk: ARIA div-grid + windowed virtual scroller --- */ .eq-grid{background:var(--paper);border:1.5px solid var(--line);border-radius:12px;overflow:hidden; font-variant-numeric:tabular-nums;min-width:480px} .eq-hrow,.eq-row{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;border-bottom:1px solid var(--line)} .eq-grid .eq-c{padding:10px 12px;min-width:0;text-align:left} .eq-hrow .eq-c{font-family:var(--sans);font-size:11px;text-transform:uppercase;letter-spacing:.05em; color:var(--muted);font-weight:700;background:#fbf5e6} .eq-grid .eq-staple{font-family:var(--serif);font-weight:600;font-size:14px;color:var(--ink)} .eq-c.pns{color:var(--pns-text)} .eq-c.nw{color:var(--nw-text)} .eq-c.wool{color:var(--wool-text)} .eq-c.eq-lo{font-weight:800} .eq-c.eq-lo .eq-line::after{content:" \2605";font-size:10px} .eq-c.eq-na{color:var(--muted)} /* virtual scroller: fixed-height rows so window math is exact */ .eq-scroll{max-height:72vh;overflow:auto;-webkit-overflow-scrolling:touch;border:1.5px solid var(--line);border-radius:12px} .eq-scroll .eq-grid{border:none;border-radius:0} .eq-scroll .eq-hrow{position:sticky;top:0;z-index:1} #eq-results .eq-vlist .eq-row{height:120px;overflow:hidden} #eq-results .eq-prod{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* --- reduced motion --- */ @media (prefers-reduced-motion: reduce){ .spinner{animation:none;border-top-color:var(--green)} *,*::before,*::after{transition-duration:.001ms!important;scroll-behavior:auto!important} } /* --- tap-target polish (named controls to ≥44px) --- */ .db-arrow{min-width:44px} .eq-chip{min-width:44px} .about .backlink{display:inline-flex;align-items:center;min-height:44px;padding:4px 2px} /* --- map placeholder until the (lazy) MapLibre chunk hydrates --- */ .maphero:not(.map-ready) #map{background:linear-gradient(160deg,#dbe8cd,#cfe0c0)} .maphero:not(.map-ready) #map::after{content:"Loading map…";position:absolute;inset:0;display:grid; place-items:center;color:#4f6b46;font-family:var(--sans);font-size:13px;letter-spacing:.02em;pointer-events:none} /* --- reserve verdict-board space to prevent CLS when cards replace the spinner --- */ .board{min-height:388px} @media(max-width:520px){.board{min-height:470px}} .loading-card{min-height:inherit} /* --- board skeleton (matches real card height → no CLS when cards replace it) --- */ .board-sk{display:flex;flex-direction:column;gap:10px} .ccard.sk{height:112px;background:var(--paper);border:1.5px solid var(--line);border-radius:14px;position:relative;overflow:hidden} .ccard.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:sk-sheen 1.4s ease-in-out infinite} @keyframes sk-sheen{to{transform:translateX(100%)}} @media(max-width:520px){.ccard.sk{height:150px}} @media(prefers-reduced-motion:reduce){.ccard.sk::after{animation:none}} /* --- reserve story height on 1-col mobile so prompt→verdict doesn't shift the board (CLS) --- */ @media(max-width:760px){.story{min-height:210px}} /* --- Te Reo Māori bilingual accent (secondary label; English stays primary) --- */ .reo{color:#7d6410;font-style:italic;font-weight:600} .eq-chip .reo{font-weight:600;font-style:normal} .eq-chip.on .reo{color:var(--paper)}