:root{color-scheme:light dark;
--bg:#ffffff;--grouped:#f2f2f7;--cell:#ffffff;--cell-elev:#ffffff;--elevated:#f2f2f7;
--label:#000000;--label2:#6c6c70;--label3:#c4c4c6;--sep:#c6c6c8;
--fill:rgba(120,120,128,.2);--fill2:rgba(120,120,128,.16);--fill3:rgba(118,118,128,.12);--fill4:rgba(116,116,128,.08);
--field:#e4e4e9;--field-cell:#eeeef0;--placeholder:#5c5c60;
--tint:#c64b0b;--tint-fill:#c64b0b;--on-tint:#ffffff;--tint-text:#b8440a;--tint-soft:rgba(198,75,11,.12);--tint-ink:#9a3907;--tint-hover:#a53d07;
--bar:rgba(255,255,255,.86);--bar-line:rgba(60,60,67,.29);--seg-on:#ffffff;--seg-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);
--area-fill:rgba(198,75,11,.22);--area-line:#c64b0b;--map-bg:#e5e3df;
--focus:#1671d9;--shadow:0 10px 30px rgba(0,0,0,.16),0 1px 3px rgba(0,0,0,.08);--backdrop:rgba(0,0,0,.4);
--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Inter,"Segoe UI",Roboto,sans-serif;
--r-ctl:10px;--r-card:12px;--gut:20px;--bar-h:2.75rem;--line-h:2.75rem;
--t-large:2.125rem;--t-title1:1.75rem;--t-title2:1.375rem;--t-title3:1.25rem;--t-headline:1.0625rem;--t-body:1.0625rem;--t-callout:1rem;--t-sub:.9375rem;--t-foot:.8125rem;--t-cap:.75rem}
@media (prefers-color-scheme:dark){:root{
--bg:#000000;--grouped:#000000;--cell:#1c1c1e;--cell-elev:#2c2c2e;--elevated:#1c1c1e;
--label:#ffffff;--label2:#98989f;--label3:#5a5a5e;--sep:#38383a;
--fill:rgba(120,120,128,.36);--fill2:rgba(120,120,128,.32);--fill3:rgba(118,118,128,.24);--fill4:rgba(116,116,128,.18);
--field:#1c1c1e;--field-cell:#2c2c2e;--placeholder:#98989f;
--tint:#ff8f57;--tint-fill:#c64b0b;--on-tint:#ffffff;--tint-text:#ff8f57;--tint-soft:rgba(255,143,87,.16);--tint-ink:#ffa071;--tint-hover:#a53d07;
--bar:rgba(22,22,23,.86);--bar-line:rgba(84,84,88,.65);--seg-on:#636366;--seg-shadow:0 3px 8px rgba(0,0,0,.4);
--focus:#4ea0ff;--shadow:0 10px 30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);--backdrop:rgba(0,0,0,.6)}}
/* Light scheme: #c64b0b is 4.27:1 on the grouped background #f2f2f7, so tint TEXT on grey uses
   --tint-text (#b8440a, 4.86:1); on white cells, bars and cards the brand tint itself (4.76:1). */
.navbar,.rows,.group,.full-description,dl,.steps li,.notice,.empty,.sheet-box,.leaflet-popup-content-wrapper,.map-live .leaflet-bar{--tint-text:var(--tint)}
*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--font);font-size:100%;line-height:1.3;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--grouped);color:var(--label)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--grouped);color:var(--label);font-size:var(--t-body);line-height:1.294;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
main{flex:1 0 auto;display:flex;flex-direction:column}main:focus{outline:none}
/* CLS: a direct /p/<id> load swaps the listing in behind the job dialog; the job page keeps its footer below the fold so that swap moves nothing the visitor saw (0 layout shift). */
main:has(.job-sheet){min-height:100vh}
h1,h2,h3{letter-spacing:0}
a{color:var(--tint-text);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:.2em}
b,strong{font-weight:600}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
a,button,input,select,summary,label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-120px;z-index:80;display:inline-flex;align-items:center;min-height:2.75rem;padding:0 16px;border-radius:var(--r-ctl);background:var(--cell);color:var(--label);font-weight:600;box-shadow:var(--shadow)}.skip:focus{top:12px}
.band{padding-left:max(var(--gut),env(safe-area-inset-left),calc((100% - 1200px) / 2));padding-right:max(var(--gut),env(safe-area-inset-right),calc((100% - 1200px) / 2))}
.eyebrow{margin:0;font-size:var(--t-foot);font-weight:600;color:var(--label2)}
.note,.aside-note,.count{color:var(--label2)}
/* Preview notice bar: the tint at 12 %. */
.preview-banner{background:#f8e9e2;background:color-mix(in srgb,var(--tint-fill) 12%,var(--bg));color:var(--label);text-align:center;padding:8px 16px;font-size:var(--t-foot);line-height:1.385}
/* Navigation bar: translucent material, sticky; hairline and inline title once the large title has scrolled under it. */
.navbar{position:sticky;top:0;z-index:40;background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 transparent;transition:box-shadow .2s}
.nav-compact .navbar{box-shadow:0 1px 0 var(--bar-line)}
.bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--bar-h)}
.brand{display:inline-flex;align-items:center;min-height:2.75rem;font-size:var(--t-headline);font-weight:600;color:var(--label);text-decoration:none;white-space:nowrap}.brand span{color:var(--tint-text);margin-left:.22em}.brand:hover{text-decoration:none}
.bar-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:calc(100% - 17rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--t-headline);font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none}
.nav-compact .bar-title{opacity:1}
.bar nav{display:flex;align-items:center;gap:2px}
.bar nav a{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 10px;border-radius:var(--r-ctl);font-size:var(--t-body);white-space:nowrap}
.bar nav a[aria-current=page]{font-weight:600}
.bar nav a.lang{justify-content:center;min-width:2.75rem;margin-left:6px;padding:0 8px;border-radius:999px;background:var(--fill3);color:var(--label);font-size:var(--t-sub);font-weight:600}
.bar nav a.lang:hover{background:var(--fill2);text-decoration:none}
/* Clean list (owner decisions 2 Oct 2026): the "how it works" link turns into an ⓘ where the bar is narrow
   (phones and narrow desktop); its text stays its accessible name. */
.nav-i{display:none;align-items:center;justify-content:center;width:1.375rem;height:1.375rem;border:1.5px solid currentColor;border-radius:50%;font:700 .8125rem/1 var(--font)}
/* Search fields: in the navigation bar on the listing and the map (bound to the page's form). */
.field{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0}
.field>span:first-child{padding:0 4px;font-size:var(--t-foot);color:var(--label2)}
input,select{width:100%;min-width:0;min-height:2.75rem;margin:0;border:0;border-radius:var(--r-ctl);background:var(--field);padding:0 12px;font-size:var(--t-body);color:var(--label)}
input:focus-visible,select:focus-visible{outline-offset:1px}
input::placeholder{color:var(--placeholder);opacity:1}
select:not([multiple]){appearance:none;-webkit-appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--label2) 50%),linear-gradient(135deg,var(--label2) 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;background-size:6px 6px;background-repeat:no-repeat;cursor:pointer}
.search-box{position:relative;display:block}.search-box input{padding-left:2.25rem}
.glass,.go-icon{position:absolute;left:12px;top:50%;width:14px;height:14px;margin-top:-9px;border:2px solid var(--label2);border-radius:50%;pointer-events:none}
.glass::after,.go-icon::after{content:"";position:absolute;right:-5px;bottom:-6px;width:2px;height:7px;border-radius:1px;background:var(--label2);transform:rotate(-45deg)}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin:0;border-radius:50%;cursor:pointer;background:linear-gradient(45deg,transparent 44%,var(--bg) 44% 56%,transparent 56%) center/9px 9px no-repeat,linear-gradient(-45deg,transparent 44%,var(--bg) 44% 56%,transparent 56%) center/9px 9px no-repeat,var(--label2)}
input[type=checkbox]{width:22px;height:22px;min-height:0;margin:0;padding:0;flex:none;accent-color:var(--tint-fill)}
input.switch{appearance:none;-webkit-appearance:none;width:51px;height:31px;min-height:0;border-radius:999px;background:radial-gradient(circle at 15.5px 50%,#fff 12px,transparent 13px),var(--fill);cursor:pointer;transition:background .2s}
input.switch:checked{background:radial-gradient(circle at 35.5px 50%,#fff 12px,transparent 13px),var(--tint-fill)}
.bar-search{flex:1 1 auto;min-width:0;max-width:44rem;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:8px;align-items:center}
.bar-search .field{gap:0}
.bar-search .primary{position:relative;padding:0 16px;font-size:var(--t-sub)}
.go-icon{display:none;left:50%;margin-left:-9px;border-color:currentColor}.go-icon::after{background:currentColor}
/* Buttons: capsule primary in the tint; tinted capsule secondary. */
.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:2.75rem;padding:0 1.25rem;border:0;border-radius:999px;background:var(--tint-fill);color:var(--on-tint);font-size:var(--t-headline);font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap}
.primary:hover{background:var(--tint-hover);color:var(--on-tint);text-decoration:none}
.bar-search .primary{gap:6px}
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:2.75rem;padding:0 1.25rem;border:0;border-radius:999px;background:var(--tint-soft);color:var(--tint-ink);font-size:var(--t-headline);font-weight:600;text-decoration:none;cursor:pointer}
.ghost:hover{background:var(--fill2);text-decoration:none}
.ghost.show{width:100%;background:var(--tint-fill);color:var(--on-tint)}.ghost.show:hover{background:var(--tint-hover)}
/* The pinned line that explains the list (answers 1, 2, 6, 7): count, the filters that are set, the sort; one line,
   ellipsis when too long (the heading keeps the full text as its accessible name and title). */
.explain-bar{display:flex;align-items:center;gap:6px;min-height:var(--line-h);min-width:0}
.explain{flex:1 1 auto;min-width:0;margin:0;font-size:var(--t-sub);line-height:1.3;font-weight:400;color:var(--label2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.explain>span:first-child{color:var(--label);font-weight:600}
.pager{flex:none;display:flex;align-items:center;gap:6px}
.pager a{display:inline-flex;align-items:center;gap:4px;min-height:2.75rem;padding:0 16px;border-radius:999px;background:var(--tint-soft);color:var(--tint-ink);font-size:var(--t-sub);font-weight:600;white-space:nowrap;text-decoration:none}
.pager a:hover{background:var(--fill2);text-decoration:none}
/* The phones' chevron (it unfolds the filter panel under the line) and the app button: phones only. */
.unfold{display:none;position:relative;isolation:isolate;flex:none;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--tint);cursor:pointer}
.unfold::before{content:"";position:absolute;inset:6px;z-index:-1;border-radius:50%;background:var(--fill3)}
.unfold:hover::before{background:var(--fill2)}
.unfold-chev{width:10px;height:10px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.fp-open .unfold-chev{transform:translateY(2px) rotate(-135deg)}
.unfold-badge{position:absolute;top:1px;right:0;display:inline-flex;align-items:center;justify-content:center;min-width:1.125rem;height:1.125rem;padding:0 4px;border-radius:999px;background:var(--tint-fill);color:var(--on-tint);font-size:.6875rem;font-weight:700;font-variant-numeric:tabular-nums}
.app-fab{display:none;align-items:center;gap:9px;min-height:2.75rem;padding:0 18px 0 15px;border-radius:999px;background:var(--tint-fill);color:var(--on-tint);font-size:var(--t-sub);font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.24),0 1px 3px rgba(0,0,0,.12)}
.app-fab:hover{background:var(--tint-hover);color:var(--on-tint);text-decoration:none}
.app-fab-icon{position:relative;flex:none;width:12px;height:18px;border:2px solid currentColor;border-radius:3.5px}
.app-fab-icon::after{content:"";position:absolute;left:50%;bottom:1.5px;width:4px;height:2px;margin-left:-2px;border-radius:1px;background:currentColor}
/* Filter panel (grouped inset). */
aside{min-width:0}
.filters>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:2.75rem;padding:0 18px;border-radius:999px;background:var(--fill3);color:var(--label);font-size:var(--t-sub);font-weight:600}
.filters>summary::-webkit-details-marker{display:none}.filters[open]>summary{margin-bottom:12px}
.filter-count{color:var(--label);font-weight:500}
.filter-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 4px 10px}
.filter-heading h2{margin:0;font-size:var(--t-title3);font-weight:700}
.filter-heading a{display:inline-flex;align-items:center;min-height:2.75rem;font-size:var(--t-body)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0 16px 6px;font-size:var(--t-foot);color:var(--label2)}
.section{margin:0 0 22px}
.section-note,small{display:block;margin:6px 16px 0;font-size:var(--t-foot);line-height:1.385;color:var(--label2)}
.group{background:var(--cell);border-radius:var(--r-card);overflow:hidden}
.group>*+*,.cat-body>*+*{background-image:linear-gradient(var(--sep),var(--sep));background-repeat:no-repeat;background-position:16px 0;background-size:calc(100% - 16px) 1px}
.group .field{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:center;gap:10px;min-height:2.75rem;padding:6px 16px}
.group .field>span:first-child{padding:0;font-size:var(--t-body);color:var(--label)}
.group input:not([type=checkbox]),.group select{background-color:var(--field-cell)}
.price-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.price-inputs .field{grid-template-columns:1fr;gap:4px;padding:8px 16px}
.price-inputs .field>span:first-child{font-size:var(--t-foot);color:var(--label2)}
.price-inputs .field+.field{background-image:linear-gradient(var(--sep),var(--sep));background-repeat:no-repeat;background-position:0 8px;background-size:1px calc(100% - 16px)}
.group .field.check{display:flex;justify-content:space-between}
/* Segmented control (type / direction). */
.segmented{display:flex;padding:2px;border-radius:9px;background:var(--fill3)}
.segmented label{position:relative;flex:1 1 auto;min-width:0;white-space:nowrap;display:flex;align-items:center;justify-content:center;min-height:2rem;padding:2px 6px;border-radius:7px;font-size:var(--t-foot);font-weight:500;line-height:1.2;text-align:center;cursor:pointer}
.segmented input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer;border-radius:7px}
.segmented label:has(input:checked){background:var(--seg-on);box-shadow:var(--seg-shadow);font-weight:600}
.segmented label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:1px}
.seg-dir{display:none}
.filters-body:has(input[name=kind][value=services]:checked) .seg-dir{display:block}
/* Category drill-down: rows with disclosure chevrons; only the tapped level opens. */
.cat>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:2.75rem;padding:4px 16px;font-size:var(--t-body)}
.cat>summary::-webkit-details-marker{display:none}
.cat>summary::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-right:2px solid var(--label3);border-bottom:2px solid var(--label3);transform:rotate(-45deg);transition:transform .2s}
.cat[open]>summary::after{transform:rotate(45deg)}
.cat-1[open]>summary{font-weight:600}
.cat-body{margin-left:16px;background-image:linear-gradient(var(--sep),var(--sep));background-repeat:no-repeat;background-position:0 0;background-size:100% 1px}
label.check{display:flex;align-items:center;gap:12px;min-height:2.75rem;padding:4px 16px;font-size:var(--t-body);cursor:pointer;line-height:1.3}
.more-filters>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:2.75rem;padding:4px 16px;font-size:var(--t-body);color:var(--tint)}
.more-filters>summary::-webkit-details-marker{display:none}
.more-filters>summary::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-right:2px solid var(--label3);border-bottom:2px solid var(--label3);transform:rotate(-45deg)}
.more-filters[open]>summary::after{transform:rotate(45deg)}
.more-filters{margin:0 0 22px}
.more-filters fieldset{padding:10px 0 4px}.more-filters fieldset>small{margin-bottom:6px}
.more-filters fieldset .field{background-image:linear-gradient(var(--sep),var(--sep));background-repeat:no-repeat;background-position:16px 0;background-size:calc(100% - 16px) 1px}
.aside-note{margin:14px 16px 0;font-size:var(--t-foot);line-height:1.385}
.results{display:flex;flex-direction:column;gap:12px;min-width:0;container-type:inline-size}.results:focus{outline:none}
/* A narrow list column (narrow desktop with the panel open): price and tag stack at the row's end, as on phones. */
@container (max-width:560px){.results .row-link{grid-template-columns:1.5rem minmax(0,1fr) auto 8px;column-gap:10px;min-height:3.5rem;padding:4px 14px 4px 16px}.results .row-end{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.results .row-price{line-height:1.2}.results .row-tag{max-width:6.5rem;padding:1px 6px;border-radius:8px;font-size:.6875rem;line-height:1.1;white-space:normal;text-align:center}}
/* Inset grouped list of jobs: title + subtitle, hairlines inset 16 px, disclosure chevron. Rows grow instead of cutting
   text (owner order 2 Oct 2026): the title and the place line wrap onto as many lines as they need (a long unbroken
   string breaks anywhere, never hyphenated, never wider than the row); the index, the title's first line and the price
   share one baseline; the chevron stays centred; 48 px (phones 56 px) is only the minimum, a one-line row keeps its
   content centred in it. Prices and the type capsule never break; the row stays one link. */
.rows{list-style:none;margin:0;padding:0;background:var(--cell);border-radius:var(--r-card);overflow:hidden}
.row+.row{background-image:linear-gradient(var(--sep),var(--sep));background-repeat:no-repeat;background-position:16px 0;background-size:calc(100% - 16px) 1px}
.row-link{display:grid;grid-template-columns:1.75rem minmax(0,1fr) auto 8px;align-items:baseline;align-content:center;column-gap:12px;min-height:3rem;padding:4px 16px;color:var(--label);text-decoration:none}
.row-link:hover{background:var(--fill4);text-decoration:none}.row-link:active{background:var(--fill3)}
.row-link:focus-visible{outline-offset:-3px;border-radius:var(--r-card)}
.row-n{font-size:var(--t-foot);color:var(--label2);font-variant-numeric:tabular-nums}
.row-scout .row-n{color:var(--tint);font-weight:600}
.row-main{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0}
.row-t{font-size:var(--t-sub);font-weight:600;line-height:1.3;min-width:0;overflow-wrap:anywhere;-webkit-hyphens:none;hyphens:none}
.row-meta{font-size:var(--t-foot);line-height:1.3;color:var(--label2);min-width:0;overflow-wrap:anywhere;-webkit-hyphens:none;hyphens:none}
.row-end{display:grid;grid-template-columns:auto 10rem;align-items:center;justify-items:end;gap:12px;min-width:0}
.row-price{font-size:var(--t-sub);line-height:1.3;color:var(--label2);white-space:nowrap;font-variant-numeric:tabular-nums}
.row-tag{display:inline-flex;align-items:center;padding:2px 9px;border:1px solid transparent;border-radius:999px;background:var(--tint-soft);color:var(--tint-ink);font-size:var(--t-cap);font-weight:600;line-height:1.35;white-space:nowrap}
.row-tag.proposal-label{background:transparent;border:1px dashed var(--tint);color:var(--tint)}
.row-tag.proposal-confirmed{border-style:solid}
.chev{align-self:center;width:8px;height:8px;border-top:2px solid var(--label3);border-right:2px solid var(--label3);transform:rotate(45deg)}
.pagination{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:4px}
.pagination>span{font-size:var(--t-foot);color:var(--label2);padding:0 4px}
.pagination a{display:inline-flex;align-items:center;gap:6px;min-height:2.75rem;padding:0 18px;border-radius:999px;background:var(--tint-soft);color:var(--tint-ink);font-size:var(--t-sub);font-weight:600;text-decoration:none}
.pagination a:hover{background:var(--fill2);text-decoration:none}
.notice{background:var(--cell);border-radius:var(--r-card);padding:12px 16px;box-shadow:inset 4px 0 0 var(--tint-fill);color:var(--label)}
.empty{background:var(--cell);border-radius:var(--r-card);padding:40px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.empty>span{font-size:var(--t-title1);color:var(--label2);line-height:1}.empty h2{margin:0;font-size:var(--t-title3);font-weight:600}.empty p{margin:0;color:var(--label2);font-size:var(--t-sub)}
/* The list's own loading rows (site.js, both widths): loading, no more posts, unavailable/retrying, error + retry. */
.more{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px;min-height:2.75rem;padding:6px 16px;color:var(--label2);font-size:var(--t-sub);text-align:center}
.more .ghost{min-height:2.75rem}
.more-spin{flex:none;width:16px;height:16px;border:2px solid var(--fill);border-top-color:var(--label2);border-radius:50%;animation:more-spin .8s linear infinite}
.more .empty{width:100%}
/* Zero-height end marker the loader watches; its negative margin cancels its flex gap (nothing moves). */
.results.autoload>.more-sentinel{display:block;height:0;margin-top:-12px}
.results.autoload>.pagination{display:none}
/* How it works (/how), membership, footer. */
.how{padding-top:28px;padding-bottom:28px;display:flex;flex-direction:column;gap:12px}
.how-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 24px;padding:0 4px}
.how h2{margin:0;font-size:var(--t-title2);font-weight:700}.how-head .note{font-size:var(--t-foot)}
.how-intro{padding:0 4px 4px}
.tagline{margin:2px 0 0;font-size:var(--t-title3);line-height:1.25;font-weight:600}
.lead{margin:4px 0 0;max-width:46rem;font-size:var(--t-sub);line-height:1.333;color:var(--label2)}.lead strong{color:var(--label)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.steps li{background:var(--cell);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:6px}
.steps .n{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--tint-fill);color:var(--on-tint);font-size:var(--t-foot);font-weight:700}
.steps :is(h2,h3){margin:0;font-size:var(--t-headline);font-weight:600}.steps p{margin:0;font-size:var(--t-sub);line-height:1.333;color:var(--label2)}.steps strong{color:var(--label)}
.how-map{padding-top:4px;padding-bottom:28px}
.how-map h2{margin:0 0 6px;padding:0 4px;font-size:var(--t-headline);font-weight:600}
.how-map p{margin:0;padding:12px 16px;max-width:52rem;border-radius:var(--r-card);background:var(--cell);font-size:var(--t-sub);line-height:1.333;color:var(--label2)}
.membership{padding-top:4px;padding-bottom:32px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 40px;align-items:center}
.membership .eyebrow{font-size:var(--t-headline);color:var(--label)}.membership .text{margin:4px 0 0;font-size:var(--t-sub);line-height:1.333;color:var(--label2);max-width:52rem}.membership .text strong{color:var(--label)}
.site-footer{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;padding-top:12px;padding-bottom:max(16px,env(safe-area-inset-bottom));border-top:1px solid var(--sep);font-size:var(--t-foot);color:var(--label2)}
.site-footer p{margin:0;display:inline-flex;align-items:center;min-height:2.75rem}.site-footer b{color:var(--label)}
.site-footer a{display:inline-flex;align-items:center;min-height:2.75rem}
.site-footer .foot-info{display:block;flex-basis:100%;min-height:0;padding:4px 0 2px;line-height:1.385}
/* Job sheet (full page without JavaScript; the dialog content with it). */
.crumbs{display:flex;align-items:center;min-height:2.75rem}
.back{display:inline-flex;align-items:center;gap:6px;min-height:2.75rem;font-size:var(--t-body)}
.detail{padding-top:4px;padding-bottom:40px}
.job-sheet{max-width:46rem;display:flex;flex-direction:column;gap:12px;min-width:0}
.job-type{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.job-type>span:first-child{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;background:var(--tint-soft);color:var(--tint-ink);font-size:var(--t-foot);font-weight:600}
.tag.state{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;background:var(--fill3);color:var(--label);font-size:var(--t-foot);font-weight:500}
.proposal-label{display:inline-flex;align-items:center;align-self:flex-start;gap:6px;margin:0;padding:4px 12px;border:1px dashed var(--tint-text);border-radius:999px;color:var(--tint-text);font-size:var(--t-foot);font-weight:600}
.proposal-confirmed{border-style:solid}.proposal-mark{font-size:.7em}
.job-sheet h1{margin:0;font-size:var(--t-large);line-height:1.206;font-weight:700;letter-spacing:.011em;overflow-wrap:anywhere}.job-sheet h1:focus{outline:none}
.price-bar{margin:0;display:flex;flex-direction:column;gap:2px}
.price-bar strong{font-size:var(--t-headline);font-weight:600}.price-bar span{font-size:var(--t-sub);color:var(--label2)}
.job-information{display:flex;flex-direction:column;gap:6px}
.job-information h2{margin:14px 0 0;padding:0 16px;font-size:var(--t-foot);font-weight:400;color:var(--label2)}
.full-description{margin:0;padding:12px 16px;border-radius:var(--r-card);background:var(--cell);font-size:var(--t-body);line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere}
.external{overflow-wrap:anywhere}
.redacted{color:var(--label2)}
.redaction-note{margin:0;padding:0 16px;font-size:var(--t-foot);line-height:1.385;color:var(--label2)}
dl{margin:0;display:grid;grid-template-columns:minmax(6.5rem,max-content) minmax(0,1fr);border-radius:var(--r-card);background:var(--cell);overflow:hidden}
dt,dd{min-height:2.75rem;padding:11px 16px;font-size:var(--t-body);line-height:1.3}
dt{padding-right:8px;color:var(--label);overflow-wrap:anywhere}
dd{margin:0;color:var(--label2);text-align:right;white-space:pre-wrap;overflow-wrap:anywhere}
dt~dt{background-image:linear-gradient(var(--sep),var(--sep));background-repeat:no-repeat;background-position:16px 0;background-size:calc(100% - 16px) 1px}
dd~dd{background-image:linear-gradient(var(--sep),var(--sep));background-repeat:no-repeat;background-position:0 0;background-size:100% 1px}
.job-action{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:10px}
.job-action .primary{width:100%;min-height:3.125rem}
.job-note{margin:0;text-align:center;font-size:var(--t-foot);line-height:1.385;color:var(--label2)}
/* Job dialog (card on desktop, page sheet on phones). */
dialog{padding:0;border:0;background:var(--elevated);color:var(--label);max-width:none;max-height:none;--cell:var(--cell-elev);--field-cell:var(--field)}
dialog::backdrop{background:var(--backdrop)}
body:has(dialog:modal){overflow:hidden}
.dialog-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:3.25rem;padding:4px 8px 4px 20px;background:var(--elevated)}
.dialog-host{font-size:var(--t-foot);color:var(--label2)}
.dialog-close{position:relative;isolation:isolate;flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:var(--label);font-size:1.25rem;line-height:1;cursor:pointer}
.dialog-close::before{content:"";position:absolute;inset:7px;z-index:-1;border-radius:50%;background:var(--fill3)}
.dialog-close:hover::before{background:var(--fill2)}
.grabber{display:none}
.job-dialog{width:min(46rem,calc(100% - 48px));max-height:calc(100% - 48px);margin:auto;overflow:auto;overscroll-behavior:contain;border-radius:var(--r-card);box-shadow:var(--shadow)}
.dialog-body{padding:4px 20px 28px}
/* 404 / 410 / app / contact. */
.coming{flex:1 0 auto;padding-top:28px;padding-bottom:48px}
.sheet-box{max-width:36rem;background:var(--cell);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.sheet-box h1{margin:0;font-size:var(--t-title1);line-height:1.214;font-weight:700;max-width:22ch}
.sheet-box h2{margin:8px 0 0;font-size:var(--t-headline);font-weight:600}
.sheet-box p:not(.eyebrow){margin:0;font-size:var(--t-body);color:var(--label2);max-width:55ch}
.sheet-box .code{font-size:var(--t-large);line-height:1.1;font-weight:700;color:var(--tint)}
.sheet-box .primary{margin-top:10px}
main.coming{padding:56px 16px}
/* Map page: the map fills the rest; its legend is a small overlay inside it (answer 7). */
.map-results{padding:0;gap:0}
.map{position:relative;margin:0;display:flex;flex-direction:column;min-width:0;background:var(--grouped)}
.map-plot{display:block;width:100%;height:auto;flex:none;background:var(--cell)}
.map-plot .frame{fill:none;stroke:var(--sep)}.map-plot .grid{stroke:var(--sep);stroke-width:1}
.map-plot .grid-label,.map-plot .radius-label,.map-plot .mk-n{font-family:var(--font);font-size:11px}.map-plot .grid-label{fill:var(--label2)}
.map-plot .radius{fill:var(--tint-soft);stroke:var(--tint);stroke-dasharray:4 4}.map-plot .centre{stroke:var(--tint);stroke-width:1.5}.map-plot .radius-label{fill:var(--tint)}
.map-plot .mk-n{font-size:12px;font-weight:600;fill:var(--label);paint-order:stroke;stroke:var(--cell);stroke-width:3px}.map-plot .mk-scout{fill:var(--tint)}.map-plot .mk-leader{stroke:var(--label2);stroke-width:.75;fill:none}
.map-plot .north{fill:var(--label)}.map-plot .scale{fill:none;stroke:var(--label);stroke-width:1.5}
.map-plot .mk-area{fill:var(--area-fill);stroke:var(--area-line);stroke-width:1}
.map-plot a:hover .mk-area,.map-plot a:focus-visible .mk-area{stroke:var(--focus);stroke-width:3}.map-plot a:focus-visible{outline:3px solid var(--focus)}
.map-empty{margin:0;padding:48px 16px;text-align:center;color:var(--label2);background:var(--cell)}
/* Beside the map's zoom bar, at the same place over the plot (no JavaScript) and the map: mounting moves nothing. */
.map-legend{position:absolute;z-index:2;top:12px;left:68px;max-width:calc(100% - 11.5rem);margin:0;padding:5px 10px;list-style:none;display:flex;flex-direction:column;gap:2px;border:1px solid var(--bar-line);border-radius:var(--r-ctl);background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 2px 12px rgba(0,0,0,.14);font-size:var(--t-cap);line-height:1.35;color:var(--label);pointer-events:none}
.map-legend li{display:flex;align-items:center}
.map-legend .lg-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.lg{flex:none;display:inline-block;width:12px;height:12px;margin-right:6px;border-radius:50%}.lg-area{border:1px solid var(--area-line);background:var(--area-fill)}.lg-radius{border:1px dashed var(--tint)}
.map-empty-state{display:flex;flex-direction:column;gap:14px}
.map.is-osm .cap-plot,.map:not(.is-osm) .cap-osm{display:none}
.map-jobs{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.map-jobs:focus-within{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;padding:16px 0}
.map-jobs h2{margin:0 0 8px;font-size:var(--t-sub);font-weight:600}
/* Leaflet, iOS style: rounded translucent controls, card popup. */
.map-live{position:relative;isolation:isolate;display:block;width:100%;height:min(68vh,640px);min-height:420px;flex:none;background:var(--map-bg);font-family:var(--font);font-size:var(--t-foot)}
.map-live:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.map-live .leaflet-top .leaflet-control{margin-top:12px}.map-live .leaflet-left .leaflet-control{margin-left:12px}.map-live .leaflet-right .leaflet-control{margin-right:12px}
.map-live .leaflet-bar{border:1px solid var(--bar-line);border-radius:var(--r-ctl);overflow:hidden;background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 2px 12px rgba(0,0,0,.14);background-clip:padding-box}
.map-live .leaflet-bar a,.map-live .leaflet-bar a:first-child,.map-live .leaflet-bar a:last-child{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:0;border-bottom:1px solid var(--sep);background:transparent;color:var(--label);font:500 1.375rem/1 var(--font);text-indent:0;text-decoration:none}
.map-live .leaflet-bar a:last-child{border-bottom:0}
.map-live .leaflet-bar a:hover{background:var(--fill4);color:var(--label)}
.map-live .leaflet-bar a:focus-visible{position:relative;z-index:1;outline-offset:-3px}
.map-live .leaflet-bar a.leaflet-disabled{color:var(--label2);background:transparent}
.map-live .leaflet-control.leaflet-control-attribution{margin:0;padding:0 10px;border-radius:var(--r-ctl) 0 0 0;background:var(--bar);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);font-size:var(--t-cap);line-height:44px;color:var(--label)}
.map-live .leaflet-control-attribution a{display:inline-block;min-width:44px;min-height:44px;padding:0 4px;text-align:center;color:var(--label);text-decoration:underline;text-underline-offset:.2em}
.map-live .leaflet-control-scale-line{border:1px solid var(--label);border-top:0;border-radius:0 0 4px 4px;background:var(--bar);font-size:var(--t-cap);color:var(--label)}
.map-live a.row-link,.map-live a.row-link:hover{color:var(--label)}
.map-live .leaflet-popup-content-wrapper{padding:0;border-radius:var(--r-card);background:var(--cell);color:var(--label);box-shadow:var(--shadow)}
.map-live .leaflet-popup-content{margin:8px 8px 8px 8px;font-size:var(--t-body);line-height:1.3}
.map-live .leaflet-popup-tip{background:var(--cell);box-shadow:none}
.map-live a.leaflet-popup-close-button{top:2px;right:2px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--label);font:400 1.375rem/1 var(--font)}
.map-live a.leaflet-popup-close-button:hover{background:var(--fill4);color:var(--label)}
.map-live .osm-area.is-active{stroke-width:2px;fill-opacity:.4}
.map-live .osm-hit{cursor:pointer;outline:none}
.map-live .osm-hit:focus-visible,.map-live .osm-hit.is-active{stroke:var(--focus);stroke-width:3px;stroke-opacity:1}
.osm-pop-head{margin:6px 44px 6px 8px;font-size:var(--t-foot);color:var(--label2)}
.rows-pop{border-radius:0;background:transparent}
/* A popup is at most 300 px wide (268 px on a 390 px phone): beside a price column its titles had 74-106 px. Rows wrap
   now (owner order 2 Oct 2026), so here the title and place take the row's width and the price with the type capsule
   follow on the line under them; the index keeps the title's first baseline, the chevron stays centred. */
.rows-pop .row-link{grid-template-columns:1.5rem minmax(0,1fr) 8px;grid-template-areas:"n main chev" ". end chev";column-gap:10px;row-gap:3px;min-height:3.5rem;padding:6px 8px;border-radius:var(--r-ctl)}
.rows-pop .row-n{grid-area:n}.rows-pop .row-main{grid-area:main}.rows-pop .chev{grid-area:chev}
.rows-pop .row-end{grid-area:end;display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-start;gap:3px 8px}
.rows-pop .row-tag,.rows-pop .row-tag.proposal-label{max-width:100%;padding:1px 7px;border-radius:8px;font-size:.6875rem;line-height:1.2;white-space:normal;text-align:left}
.rows-pop .row+.row{background-position:8px 0;background-size:calc(100% - 8px) 1px}
@supports selector(::details-content){@media(min-width:601px){.filters>summary{display:none}.filters::details-content{content-visibility:visible;display:block;height:auto}}
@media(max-width:600px){.fp.fp-open .app .filters::details-content{content-visibility:visible;display:block;height:auto}}}
@media(max-width:1100px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.bar-title{max-width:calc(100% - 20rem)}}
@media(max-width:600px){
:root{--gut:16px;--line-h:3.25rem;--head-h:calc(5.5rem + 16px)}
.bar nav [data-nav=how]{min-width:2.75rem;justify-content:center;padding:0}
.nav-i{display:inline-flex}
.nav-how{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body:not(.app) .bar nav [data-nav=search],.app .bar nav a[aria-current=page]{display:none}
.bar-title{max-width:calc(100% - 15rem)}
/* Listing and map: a two-row sticky bar (brand and links, then the search), the pinned line under it. */
.app .bar{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"brand nav" "search search";gap:0 8px}
.app .brand{grid-area:brand}
.app .bar nav{grid-area:nav;justify-self:end}
.app .bar-search{grid-area:search;width:100%;max-width:none;margin:0;padding:8px 0;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;gap:6px}
.app .bar-search .primary{padding:0 14px}.app .bar-search input{padding-right:6px}.app .bar-search .search-box input{padding-left:2rem}.app .bar-search .glass{left:10px}
html:has(>body.app){scroll-padding-top:calc(var(--head-h) + var(--line-h) + 8px);scroll-padding-bottom:calc(2.75rem + 28px + env(safe-area-inset-bottom))}
.app-form{padding:0 var(--gut)}
.app .explain-bar{position:sticky;top:var(--head-h);z-index:30;margin:0 calc(-1 * var(--gut));padding:4px 6px 4px var(--gut);background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 var(--bar-line)}
/* Without JavaScript the panel is the "Filtra" disclosure under the line; with it (html.fp) the chevron unfolds
   the panel over the list, under the line, and it scrolls inside itself with "Show results" at its bottom. */
.app aside{display:flex;justify-content:flex-end;padding-top:8px}.app .filters[open]{width:100%}
.fp .app aside{display:block;position:sticky;top:calc(var(--head-h) + var(--line-h));z-index:29;height:0;margin:0 calc(-1 * var(--gut));padding:0}
.fp .app .filters{width:100%}.fp .app .filters>summary{display:none}
.fp .app .unfold{display:flex}
.fp:not(.fp-open) .app .filters-body{display:none}
.fp .app .filters-body{max-height:calc(100svh - var(--head-h) - var(--line-h));overflow-y:auto;overscroll-behavior:contain;padding:14px var(--gut) 0;background:var(--grouped);border-bottom:1px solid var(--sep);box-shadow:0 18px 28px -14px rgba(0,0,0,.4)}
.fp .app .show-bar{display:block;position:sticky;bottom:0;z-index:1;margin:0 calc(-1 * var(--gut));padding:14px var(--gut) 12px;background:linear-gradient(to bottom,transparent,var(--grouped) 14px)}
.fp .app .show-bar+.aside-note{margin-top:0;padding-bottom:14px}
.filter-heading h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.filter-heading{justify-content:flex-end}
.segmented label{min-height:2.75rem}
.app .results{padding:10px 0 16px}
.row-link{grid-template-columns:1.5rem minmax(0,1fr) auto 8px;column-gap:10px;min-height:3.5rem;padding:4px 14px 4px 16px}
.row-price{line-height:1.2}
.row-t{font-size:var(--t-body)}.row-meta{font-size:var(--t-sub)}
.row-end{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.row-tag,.row-tag.proposal-label{max-width:6.5rem;padding:1px 6px;border-radius:8px;font-size:.6875rem;line-height:1.1;white-space:normal;text-align:center}
/* The app button, bottom-left, above the safe area; hidden while the job sheet or the unfolded panel is open. The
   footnote ends the page with room for the button, so no row or link is ever left under it. */
.app-fab{display:inline-flex;position:fixed;z-index:35;left:max(16px,env(safe-area-inset-left));bottom:calc(12px + env(safe-area-inset-bottom))}
.fp-open .app-fab,body:has(#filter-panel[open]) .app-fab,body:has(dialog[open]) .app-fab{display:none}
body.app>.site-footer{gap:0 16px;padding-top:6px;padding-bottom:calc(2.75rem + 28px + env(safe-area-inset-bottom))}
body.app>.site-footer :is(.foot-brand,.foot-rev,.foot-owner){min-height:1.75rem}
body.app>.site-footer .footer-links{flex-basis:calc(100% + 16px);margin:0 -8px}body.app>.site-footer .footer-links a{padding:0 8px}
.app .map-results{margin:0 calc(-1 * var(--gut));padding:0}
/* The plot (no JavaScript) and the map that replaces it have the same box: mounting the map moves nothing (CLS 0). */
.app-map :is(.map-plot,.map-live){height:calc(100svh - var(--head-h) - var(--line-h) - 4rem);min-height:320px}
/* The OpenStreetMap attribution stays clear of the app button: it keeps to the map's right side (wrapping there). */
.app-map .map-live .leaflet-control.leaflet-control-attribution{max-width:calc(100vw - 10.5rem);text-align:right}
.app-map .map-empty-state{padding:16px var(--gut) 28px}
.how{padding-top:20px;padding-bottom:20px;gap:8px}.how h2{font-size:var(--t-title3)}
.steps{grid-template-columns:1fr;gap:0;background:var(--cell);border-radius:var(--r-card);overflow:hidden}
.steps li{display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:2px 12px;padding:12px 16px;border-radius:0}
.steps li+li{background-image:linear-gradient(var(--sep),var(--sep));background-repeat:no-repeat;background-position:56px 0;background-size:calc(100% - 56px) 1px}
.steps .n{grid-row:span 2}
.membership{grid-template-columns:1fr;padding-bottom:24px}.membership .primary{width:100%;min-height:3.125rem}
.detail{padding-top:0}
.job-sheet h1{font-size:var(--t-title1);line-height:1.214}
.job-dialog{width:100%;max-width:100%;height:calc(100% - 12px);max-height:calc(100% - 12px);margin:auto 0 0;border-radius:var(--r-card) var(--r-card) 0 0}
.grabber{display:block;position:absolute;top:5px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--label3)}
.dialog-bar{padding-top:10px}
.dialog-body{padding:4px 16px max(24px,env(safe-area-inset-bottom))}
.coming{padding-top:12px;padding-bottom:28px}.sheet-box{padding:20px}.sheet-box .primary{width:100%;min-height:3.125rem}
.site-footer{gap:0 16px}}
/* Help, support and legal pages (legal.mjs): one readable card, iOS grouped style. */
/* Footer links (verifier V3, 2 Oct 2026): every link is a tap target at least 44 px wide as well as tall. The space
   between the links is the links' own padding (half the former gap on each side) and the list's negative margin keeps
   the first and last text where they were, so the footer looks the same; a short word ("Help") is centred in 44 px. */
.footer-links{display:flex;flex-wrap:wrap;gap:0;margin:0 -9px}
.footer-links a{justify-content:center;min-width:2.75rem;padding:0 9px}
.footer-links a[aria-current="page"]{color:var(--label);font-weight:600}
.doc-box{max-width:48rem;align-items:stretch;gap:12px}
.doc-box h1{max-width:none}
.doc-box h2{margin:18px 0 0;font-size:var(--t-title3);line-height:1.25;font-weight:700}
.doc-box h3{margin:10px 0 0;font-size:var(--t-headline);font-weight:600}
.doc-box h4{margin:8px 0 0;font-size:var(--t-sub);font-weight:600}
.doc-box p:not(.eyebrow),.doc-box li{color:var(--label);line-height:1.45;max-width:65ch}
.doc-box .doc-lead{color:var(--label2)}
.doc-box p a,.doc-box li a{text-decoration:underline;text-underline-offset:.2em}
.doc-list{margin:0;padding-left:1.25rem;display:flex;flex-direction:column;gap:6px}
.doc-links{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:0 18px}
.doc-links a{display:inline-flex;align-items:center;min-height:2.75rem}
.draft-mark{margin:0;padding:10px 14px;border-radius:var(--r-ctl);background:var(--tint-soft);color:var(--tint-ink)!important;font-weight:600;max-width:none!important}
.doc-table{width:100%;background:var(--grouped)}
.doc-table dd{text-align:left}
.doc-box p.doc-updated{margin:0;font-size:var(--t-foot);color:var(--label2)}
.to-confirm{font:500 var(--t-foot)/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--label2);background:var(--fill4);padding:1px 4px;border-radius:4px;overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.support-address strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}
.pkg-list{font-size:var(--t-foot);color:var(--label2)!important;overflow-wrap:anywhere}
.doc-box h4 .count{font-weight:400;color:var(--label2)}
pre.licence{margin:0;padding:12px 14px;border-radius:var(--r-ctl);background:var(--grouped);color:var(--label);font:.8125rem/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
/* /how (owner decision 7, 2 Oct 2026): how it works + membership on their own page. */
.how-head h1{margin:0;font-size:var(--t-large);line-height:1.206;font-weight:700;letter-spacing:.011em}
.how-page{display:flex;flex-direction:column}
/* Desktop filter column (owner decisions 2 Oct 2026) and the clean list. Phones (below DESK_MIN) never show the fold
   arrow or the folded strip; the desktop never shows the phones' chevron, app button or footnote. */
.fold,.fold-strip,.more-sentinel{display:none}
.show-bar{display:contents}
@property --panel-w{syntax:"<length>";inherits:true;initial-value:18.75rem}
@media(min-width:601px){
:root{--panel-open:18.75rem;--panel-fold:3.25rem;--panel-gap:28px;--content-max:1200px}
/* The bar holds the search fields (answer 3); the large title, tagline and intro are on /how (answer 5). */
.app .bar{min-height:3.5rem}
.app .bar-title{display:none}
/* App shell (answers 2 and 5): the document never scrolls (the scrolling boxes are also the containing blocks of the
   visually hidden texts inside them, so nothing reaches past the viewport). Banner, bar, the pinned line and the
   filter panel stay; on the listing only the list scrolls; the map fills the rest. Panel 300 px, folded 52 px. */
body.app{--panel-w:var(--panel-open);height:100vh;height:100dvh;overflow:hidden;transition:--panel-w .2s ease}
.fp-folded body.app{--panel-w:var(--panel-fold)}
body.app>.preview-banner,body.app>.navbar{flex:none}
body.app>main{flex:1 1 auto;min-height:0}
body.app>.site-footer{display:none}
.app-form{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(var(--gut),1fr) calc(var(--panel-w) + var(--panel-gap)) minmax(0,calc(var(--content-max) - var(--panel-w) - var(--panel-gap))) minmax(var(--gut),1fr);grid-template-rows:var(--line-h) minmax(0,1fr)}
.app-list .app-form{position:relative;overflow-y:auto;overscroll-behavior:contain;container-type:size;grid-template-rows:var(--line-h) minmax(auto,1fr);scroll-padding:calc(var(--line-h) + 8px) 0 8px}
.app .explain-bar{grid-column:3;grid-row:1;position:sticky;top:0;z-index:4;padding:0 2px 0 4px;background:var(--grouped)}
.app-list .results{grid-column:3;grid-row:2;padding:4px 0 28px}
/* The filter panel: fixed, its own scroll, "Show results" sticky at its bottom; the arrow folds it. */
.app aside{grid-column:2;grid-row:1/-1;position:relative;width:var(--panel-w);overflow:hidden;align-self:stretch}
/* 1 px short of the list box, so rounding at the very end of the list never nudges the sticky panel. */
.app-list aside{position:sticky;top:0;align-self:start;height:calc(100cqh - 1px)}
.app aside .filters{width:var(--panel-open);height:100%;transition:visibility 0s}
.app aside .filters::details-content{height:100%}
/* The panel scrolls inside its content box (the <details> keeps the phones' "Filtra" disclosure without JavaScript). */
.app .filters-body{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:6px 2px 0}
.app .show-bar{display:block;position:sticky;bottom:0;z-index:1;margin:0 -2px;padding:16px 2px 14px;background:linear-gradient(to bottom,transparent,var(--grouped) 16px)}
.app .show-bar+.aside-note{margin-top:0;padding-bottom:16px}
.fp .app .filter-heading{padding-right:40px}
.fp .app .fold{display:flex}
.fold{position:absolute;top:6px;right:4px;z-index:3;isolation:isolate;width:44px;height:44px;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--tint);cursor:pointer}
.fold::before{content:"";position:absolute;inset:6px;z-index:-1;border-radius:50%;background:var(--fill3)}
.fold:hover::before{background:var(--fill2)}
.fold-chev{width:10px;height:10px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateX(2px) rotate(45deg);transition:transform .2s}
.fp-folded .fold-chev{transform:translateX(-2px) rotate(-135deg)}
.fp-folded .app aside .filters{visibility:hidden;transition:visibility 0s .2s}
.fp-folded .app .fold-strip{display:flex}
.fold-strip{position:absolute;inset:0;flex-direction:column;align-items:center;gap:14px;padding:62px 0 16px;border-radius:var(--r-card);background:var(--cell);cursor:pointer}
.fold-label{writing-mode:vertical-rl;font-size:var(--t-sub);font-weight:600;color:var(--label);letter-spacing:.02em}
.fold-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.375rem;height:1.375rem;padding:0 6px;border-radius:999px;background:var(--tint-fill);color:var(--on-tint);font-size:var(--t-cap);font-weight:700;font-variant-numeric:tabular-nums}
/* Map (answers 7 and 8): the same panel and pinned line beside a map that fills the rest; folding widens the map. */
.app-map .app-form{overflow:hidden}
.app-map .map-results{position:relative;grid-column:3;grid-row:2;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding-bottom:12px}
.app-map .map-layout{flex:1 1 auto;min-height:15rem;display:flex;flex-direction:column}
.app-map figure.map{flex:1 1 auto;min-height:0;border-radius:var(--r-card);overflow:hidden}
.app-map .map-plot,.app-map .map-live{flex:1 1 0;min-height:12rem;height:auto}
}
/* Narrow desktop: "how it works" becomes the ⓘ; below 768 px the current view's link goes (the brand and the other
   view stay), the fields shrink and "Search" is the magnifier (its text stays the button's accessible name). */
@media(min-width:601px) and (max-width:1023px){
.bar nav a{padding:0 8px;font-size:var(--t-sub)}
.bar nav [data-nav=how]{min-width:2.75rem;justify-content:center;padding:0}
.nav-i{display:inline-flex}
.nav-how{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media(min-width:601px) and (max-width:900px){:root{--panel-open:16rem;--panel-gap:20px}}
@media(min-width:601px) and (max-width:767px){
:root{--gut:16px}
.app .bar{gap:8px}
.app .bar nav a[aria-current=page]{display:none}
.bar-search{gap:6px}
.bar-search .primary{width:2.75rem;padding:0}
.go-text,.go-arrow{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.go-icon{display:block}
.bar-search input{padding:0 8px}.bar-search .search-box input{padding-left:2rem}.bar-search .glass{left:10px}
}
@keyframes more-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.more-spin{animation:none}}