/* BRAND KIT V3 (October 2026): the colour and type names in this file are the JOBS, not the hues —
   cream = paper #F6F2EA, ink = Fjord Ink #12263A, burgundy = terracotta #A44723, petrol = Øresund
   #3F6E71 (both for data only), the main action = ink (raised navy on hover); Bricolage, Newsreader and
   Fraunces all read Space Grotesk now (upright); figures in tables Plex Mono, large ones Space Grotesk; square
   (app/theme.css). The v3 additions are at the end of the file. */
/* copenhagen-rent — maps the lab's own variables onto Halfway's warm palette, and its classes onto the
   COMPONENTS block in brand.css (one size, shape and type style per kind). See app/theme.css.
   Four colours: cream, ink, burgundy, petrol (+ soft tints).
   Meaning: good = petrol · watch out = burgundy-soft, dashed · critical = solid burgundy · best = petrol-soft + bold.
   Burgundy and petrol are close in lightness, so glyphs (✓ ! ✕), outlines and labels always carry the status too.
   Light only: the app's dark rules are neutralised below and the theme button is hidden. */

/* 1. Variables, once (beats the app's :root:not([data-theme]) dark block and [data-theme=dark]) */
:root:root:root{
  --font:var(--t-sans);
  --bg:var(--t-bg); --surface:var(--t-surface); --surface-2:var(--t-bg);
  --line:var(--t-line); --line-2:var(--t-line-2);
  --ink:var(--t-ink); --ink-2:var(--t-ink-2); --ink-3:var(--t-ink-2);
  --accent:var(--t-ink); --accent-hover:var(--t-burgundy); --on-accent:var(--t-cream);
  --accent-soft:var(--t-petrol-soft);
  --star:var(--t-ink); --star-off:var(--t-edge);
  --map-land:var(--t-sunken);
  --map-park:var(--t-petrol-soft);
  --map-water:var(--t-line);          /* the sea and the land outside the city: a palette tone, darker than the city */
  --good:var(--t-petrol); --warn:var(--t-burgundy); --crit:var(--t-burgundy);
  color-scheme:light;
}
#btn-theme{display:none!important}

/* 2. Type: Bricolage for the interface, Newsreader for reading, Fraunces italic for small accents only */
body{font:400 15px/1.5 var(--t-read);color:var(--t-ink);background:var(--t-bg)}
button,input,select{font-family:var(--t-sans)}
.btn,.eyebrow,th,.status,.key-tag,.fact,.pin,.hero,.field>label,.viewtabs button,details>summary,.rank{font-family:var(--t-sans)}
.hint,.small-note,.sample-note,.loc,.v-line,.notes li,details.how ul,.opt-head .t span,.loc-top span,.src-tag,.map-legend small,.prio-row,.map-legend li{font-family:var(--t-read)}
.hint,.small-note,.src-tag,.map-legend small,.opt-head .t span,.loc-top span,.sample-note{font-size:.94rem;line-height:1.45;color:var(--t-ink-2)}
.loc,.notes li,.map-legend,.prio-row,.star-row .sl,details.fine>summary{font-size:.96rem;line-height:1.45}
.star-row .sl{font-family:var(--t-sans);font-weight:500}
.na{font-family:var(--t-serif);font-style:normal;font-size:.94rem;color:var(--t-ink-2)}

/* headings: the three sizes and nothing else.
   h1 = the page's title and, in the results, the verdict (the screen's statement);
   h2 = every card's heading (How it works is a summary, set the same so the cards read alike);
   h3 = a group: a neighbourhood, an option's name, a row's name in Watch out */
.brand h1,.v-name{font:var(--rr-h1);letter-spacing:var(--rr-h1-ls)}
.card h2,details.how>summary{font:var(--rr-h2);letter-spacing:var(--rr-h2-ls);color:var(--t-ink)}
.area-block h3,.opt-head .t b,.flag-row b{font:var(--rr-h3);letter-spacing:var(--rr-h3-ls)}
details.how>summary{justify-content:flex-start}   /* the app spreads summary items apart: keep the arrow by its words */
details.how>summary::before{content:"▸ "}
details.how[open]>summary::before{content:"▾ "}
details.card>summary h2::before,details.how>summary::before{color:var(--t-ink)}

/* labels: eyebrows, field labels, table headers — small capitals in soft ink */
.eyebrow,.hero .cap,.tbl thead th,.field>label{font:var(--rr-label-font);letter-spacing:var(--rr-label-ls);text-transform:uppercase;color:var(--t-ink-2)}
.tbl thead th small{text-transform:none;letter-spacing:0;font-family:var(--t-read);font-weight:400;font-size:.85rem;color:var(--t-ink-2)}
.num,.hero .n,.tbl,.tbl td,.tbl th,.sv .n,.fact b,.map-legend .pin,.v-line .num,.rank{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.sv .n{font:500 .9rem var(--t-sans);color:var(--t-ink);font-feature-settings:"tnum" 1}

/* 3. Top bar */
.topbar{background:var(--t-bg);border-bottom:var(--rr-frame)}
.topbar-in{padding:12px 16px;row-gap:12px}
.sample-note{padding:0 16px 12px}
.sample-note .btn.ghost{height:var(--rr-tag)}   /* a quiet link beside the tag: the note row stays a tag high */

/* the bar's real height (the app assumes 64px): on a desktop the inputs column sticks below it, and
   "On the map" scrolls the map card into view below it, not under it (where its banner was hidden) */
body{--cr-bar:72px}
body:has(#sample-note:not([hidden])){--cr-bar:110px}
@media (max-width:960px){body{--cr-bar:202px}body:has(#sample-note:not([hidden])){--cr-bar:240px}}
@media (min-width:961px){.inputs{top:calc(var(--cr-bar) + 16px);max-height:calc(100dvh - var(--cr-bar) - 32px)}}
#map-card{scroll-margin-top:calc(var(--cr-bar) + 12px)}

/* tags: a small pill of status or kind, never clicked */
.sample-note .pill,.key-tag{display:inline-flex;align-items:center;height:var(--rr-tag);padding:0 10px;border-radius:var(--rr-pill);
  background:var(--t-petrol-soft);color:var(--t-ink);border:1px solid var(--t-petrol);
  font:var(--rr-tag-font);letter-spacing:var(--rr-tag-ls);text-transform:uppercase;white-space:nowrap}
.key-tag{vertical-align:middle;margin-left:8px}

/* 4. Controls: pills. Secondary (surface, edge) by default; primary burgundy, ink on hover;
   danger burgundy on surface; ghost is a quiet text link that acts */
.btn{height:var(--rr-control);min-height:0;padding:0 18px;border:var(--rr-hair);border-radius:var(--rr-pill);background:var(--t-surface);color:var(--t-ink);
  font:var(--rr-control-font);letter-spacing:0;text-transform:none;transition:background .15s,color .15s,border-color .15s}
.btn:hover{border-color:var(--t-ink);background:var(--t-surface);color:var(--t-ink)}
.btn.primary{background:var(--t-action);color:var(--t-cream);border-color:var(--t-action)}
.btn.primary:hover{background:var(--t-action-hover);border-color:var(--t-action-hover);color:var(--t-on-action-hover)}
.btn.danger{background:var(--t-surface);color:var(--t-ink);border-color:var(--t-edge)}
.btn.danger:hover{background:var(--t-sunken);color:var(--t-ink);border-color:var(--t-ink)}
.btn.sm{height:var(--rr-control-sm);padding:0 14px;font:var(--rr-control-font-sm)}
.btn.ghost{background:none;border-color:transparent;color:var(--t-ink);padding:0 6px;text-decoration:underline;text-decoration-color:var(--t-edge);text-underline-offset:.22em}
.btn.ghost:hover{background:none;border-color:transparent;text-decoration-color:var(--t-ink)}
.btn[disabled],.btn[disabled]:hover{opacity:1;background:transparent;color:var(--t-ink-2);border:var(--rr-hair);border-style:dashed;cursor:not-allowed}

/* the phone's Inputs/Results switch: a 44px pill holding two 36px segments, the chosen one petrol */
.viewtabs{background:var(--t-surface);border:var(--rr-hair);border-radius:var(--rr-pill);padding:3px;gap:4px}
.viewtabs button{height:var(--rr-control-sm);padding:0 12px;border:1px solid transparent;border-radius:var(--rr-pill);font:var(--rr-control-font-sm);color:var(--t-ink)}
.viewtabs button:hover{background:var(--t-sunken)}
.viewtabs button[aria-pressed="true"]{background:var(--t-select);border-color:var(--t-select);color:var(--t-cream)}

/* 5. Panels: surface, a hairline edge, 20px; the verdict is the one framed in ink. No shadows */
.card{background:var(--t-surface);border:var(--rr-hair);border-radius:var(--rr-radius);padding:20px;box-shadow:none}
.card.verdict{border:var(--rr-frame)}
.card-head{padding-bottom:10px;margin-bottom:14px;border-bottom:var(--rr-frame)}
.sec-title,.card-head{align-items:baseline}
.sec-title{align-items:center}
details.fine{border-top:1px solid var(--t-line-2)}
details.fine>summary{font-family:var(--t-sans);font-weight:500;color:var(--t-ink)}
.area-block{border-top-color:var(--t-line-2)}

/* 6. Fields: 44 high, 12px corners, a hairline edge on surface, 600 16px */
.fields{align-items:end}            /* a label on two lines no longer pushes its field out of the row */
.inp input,select{height:var(--rr-control);border:var(--rr-hair);border-radius:var(--rr-radius-sm);background:var(--t-surface);color:var(--t-ink);padding:0 12px;
  font:var(--rr-field-font);font-variant-numeric:tabular-nums}
select{padding-right:6px}
.inp input:hover,select:hover,.inp input:focus,select:focus{border-color:var(--t-ink)}
.inp.has-unit input{padding-right:56px}
.inp .unit{right:12px;font:400 .94rem var(--t-read);color:var(--t-ink-2)}
.inp input::placeholder{color:var(--t-ink-2);opacity:1}
.prio-row{grid-template-columns:minmax(0,1fr) 120px}
.prio-row select{height:var(--rr-control)}

/* the address box: a 12px box inside the option, its facts as label + value */
.loc{background:var(--t-bg);border:var(--rr-hair);border-radius:var(--rr-radius-sm);padding:12px 14px}
.loc b{font-family:var(--t-sans);font-weight:500}
.loc .warn{font-family:var(--t-serif);font-style:normal;color:var(--t-ink)}
.facts{gap:4px 16px}
.fact{background:none;border:0;border-radius:0;padding:0;font:var(--rr-label-font);letter-spacing:var(--rr-label-ls);text-transform:uppercase;color:var(--t-ink-2)}
.fact b{font-family:var(--t-sans);font-weight:500;font-size:.9375rem;letter-spacing:0;text-transform:none;color:var(--t-ink);margin-left:2px}

/* 7. Option cards: boxes inside a panel (12px); closed on cream, the open one on surface, framed in ink */
.opt{background:var(--t-bg);border:var(--rr-hair);border-radius:var(--rr-radius-sm)}
.opt[data-open="true"]{background:var(--t-surface);border:var(--rr-frame)}
.opt-head{font-family:var(--t-sans);min-height:48px}
.opt-head .chev{border-color:var(--t-ink)}

/* 8. Stars: filled = ink, empty = --t-edge tint (3.7:1), so the count can be counted */
.stars .bg,.opt-head .t .stars .bg,.star-row>.stars .bg{color:var(--t-ink-2)}
.stars .fg,.opt-head .t .stars .fg{color:var(--t-ink)}
.stars-in:hover .fg{filter:none;color:var(--t-ink)}
.stars-in:focus-visible{outline:3px solid var(--t-petrol);outline-offset:3px}

/* 9. Status tags: good = petrol-soft + petrol text · warn = burgundy-soft + dashed · critical = solid burgundy.
   The round ✓ ! ✕ chip is a glyph, not a word: 26px round, no capitals */
.status{--c:var(--t-petrol);height:var(--rr-tag);padding:0 10px 0 8px;border:1px solid var(--t-petrol);background:var(--t-petrol-soft);color:var(--t-ink);
  font:var(--rr-tag-font);letter-spacing:var(--rr-tag-ls);text-transform:uppercase}
.status i{color:inherit;font-weight:500;text-transform:none;letter-spacing:0}
.status.warn{--c:var(--t-burgundy);background:var(--t-burgundy-soft);border-color:var(--t-burgundy);border-style:dashed;color:var(--t-ink)}
.status.bad{--c:var(--t-burgundy);background:var(--t-burgundy);border-color:var(--t-burgundy);border-style:solid;color:var(--t-cream)}
.status.ico,.status.ico.warn,.status.ico.bad{width:var(--rr-tag);height:var(--rr-tag);padding:0;border-radius:0;justify-content:center;font-size:.875rem;font-weight:500;letter-spacing:0;text-transform:none}
.status.ico{color:var(--t-ink)}
.status.ico.warn{color:var(--t-ink)}
.status.ico.bad{color:var(--t-cream)}
.notes li{align-items:center}

/* 10. Verdict */
.v-name{margin:6px 0 8px}
.hero .n{font-size:clamp(3.2rem,10vw,5rem);font-weight:500;letter-spacing:-.045em}
.hero .of{font-family:var(--t-serif);font-style:normal;font-weight:400;font-size:1.3rem;color:var(--t-ink-2)}
.v-line{color:var(--t-ink-2);font-size:1rem}
.v-line .num{color:var(--t-ink);font-family:var(--t-sans);font-weight:500}

/* 11. Map: a 12px box inside its card. Land sunken, parks petrol-soft + petrol outline, the rest line,
   metro burgundy + cream ring, pins ink + cream ring. The drawing is an inline SVG (#map-host), not Leaflet */
.map-wrap{border:var(--rr-hair);border-radius:var(--rr-radius-sm)}
.map-wrap.placing{outline:3px solid var(--t-petrol);outline-offset:2px}
.map-wrap svg text{font-family:var(--t-sans)}
.map-wrap svg path[fill="var(--map-land)"]{stroke:var(--t-edge);stroke-width:1}
.map-wrap svg path[fill="var(--map-park)"]{stroke:var(--t-petrol);stroke-width:1.2}
.map-wrap svg text[fill="var(--ink-3)"]{fill:var(--t-ink-2);font-size:11px;font-weight:500;letter-spacing:0;paint-order:stroke;stroke:var(--t-cream);stroke-width:3px;stroke-linejoin:round}
.map-wrap svg circle[r="2.6"]{fill:var(--t-burgundy);stroke:var(--t-cream);stroke-width:1.4;r:4px}
.map-wrap svg circle[r="11"]{fill:var(--t-ink)!important;stroke:var(--t-cream)!important;stroke-width:2.5!important}
/* the pin's number carries an ink halo the colour of its disc: invisible, but it is the number's own backdrop
   wherever the pin sits (the contrast audit cannot see the disc below the first screen) */
.map-wrap svg text[fill="var(--on-accent)"]{fill:var(--t-cream)!important;font-weight:500;font-size:12px;stroke:var(--t-ink);stroke-width:2px;paint-order:stroke;stroke-linejoin:round;font-feature-settings:"tnum" 1}
.map-banner{background:var(--t-petrol-soft);color:var(--t-ink);border:1px solid var(--t-petrol);border-radius:var(--rr-radius-sm);padding:6px 6px 6px 14px;font:500 .9375rem/1.3 var(--t-sans)}
.map-legend .pin{background:var(--t-ink);color:var(--t-cream);border:2px solid var(--t-cream);box-shadow:0 0 0 1.5px var(--t-ink);width:24px;height:24px;font-size:.8rem;font-weight:500}
.map-legend .t{font-family:var(--t-sans);font-weight:500}

/* 12. Tables: best = petrol-soft + bold + star, worst = burgundy-soft, burgundy text */
.tbl{font-size:.95rem}
.tbl th,.tbl td{border-bottom-color:var(--t-line-2);padding:10px 8px}
.tbl thead th{border-bottom:var(--rr-frame)}
.tbl tbody th{font-family:var(--t-sans);font-weight:500;letter-spacing:-.01em;font-size:.98rem}
.tbl td{font-family:var(--t-sans);font-weight:500;color:var(--t-ink)}
.tbl td small{font-family:var(--t-read);font-size:.86rem;color:var(--t-ink-2)}
.tbl td.best{font-weight:500;background:var(--t-sunken);color:var(--t-ink)}
.tbl td.best::before{content:"★";color:var(--t-ink);font-size:.8rem;margin-right:6px;vertical-align:0}
.tbl td.neg{background:var(--t-burgundy-soft);color:var(--t-ink);font-weight:500}
.tbl td.neg::before{content:"▼";font-size:.7rem;margin-right:6px;vertical-align:1px}
.rank{font-weight:500;font-size:.85rem;color:var(--t-ink-2)}
.tbl.stars-tbl .stars{font-size:16px}

/* 13. Misc */
.card.empty{border:var(--rr-hair);border-style:dashed;border-radius:var(--rr-radius);font:var(--rr-reading);color:var(--t-ink-2)}
details.how ul{font-size:1rem;line-height:1.55;color:var(--t-ink)}
::-webkit-scrollbar-thumb{background:var(--t-edge);border-radius:0}

@media (max-width:560px){
  .card{padding:16px}
  .tbl{font-size:.9rem}
  .tbl th,.tbl td{padding:9px 5px}
  .tbl tbody th{font-size:.92rem}
  .fields.addr{grid-template-columns:minmax(0,1fr) 90px}
}

/* on a phone the header sticks, and the bar above it already names the tool: the title takes the h2
   size there, so the header keeps to one line of title and leaves the screen to the flats */
@media (max-width:520px){.brand h1{font:var(--rr-h2);letter-spacing:var(--rr-h2-ls)}}

/* ---------- v3 (brand kit, October 2026): figures in Plex Mono, the pins square ---------- */
.num,.sv .n,.v-line .num,.rank,.map-legend .pin{font-family:var(--t-mono);font-weight:500;letter-spacing:-.01em}
/* the hero figure stays Space Grotesk: at display size a monospaced comma opens a gap */
.hero .n{font-weight:500}
.map-legend .pin,.status.ico,.status.ico.warn,.status.ico.bad{box-shadow:none}
/* v3, colour for data only: tags and statuses are navy and ivory; the glyph (✓ ! ✕) and the word say it,
   and a square in the status's colour marks it; critical is the strong navy fill */
.sample-note .pill,.key-tag{background:var(--t-surface);color:var(--t-ink);border-color:var(--t-edge)}
.status,.status.warn{background:var(--t-surface);color:var(--t-ink);border-color:var(--t-edge)}
.status.bad{background:var(--t-ink);border-color:var(--t-ink);color:var(--t-cream)}
.status:not(.ico)::before{content:"";flex:none;width:8px;height:8px;margin-right:6px;background:var(--c)}
.status.bad:not(.ico)::before{background:var(--t-signal)}
.status.ico,.status.ico.warn{background:var(--t-surface);border-color:var(--t-edge)}
.status.ico.bad{background:var(--t-ink);border-color:var(--t-ink)}
/* the stars are a picture of the score: whatever figure surrounds them, they are drawn in Space Grotesk */
.stars,.stars *{font-family:var(--t-sans)}
/* the comparison tables' figures in Plex Mono, like every other lab's tables */
:root:root:root .tbl td{font-family:var(--rr-mono);font-variant-numeric:tabular-nums}