/* dachzgory.pl — palette "Ceramika": warm paper 60 %, graphite 30 %, terracotta 10 % (only the action to take and the mark).
     Inter is self-hosted (no font CDN — RODO), variable weights, tabular figures for numbers. */
  @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(/static/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(/static/fonts/inter-latin-wght-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  :root {
    color-scheme: light;
    --bg: #FAF6F1; --surface: #ffffff; --surface-2: #F5EFE8; --fg: #1F2A33; --muted: #6B6660; --line: #E8E0D6;
    --accent: #B5462A; --accent-hover: #983A22; --accent-fg: #fff; --accent-soft: #F8E6DE; --ink: #1F2A33; --clay: #E9A383;
    --hero: #1F2A33; --hero-fg: #FAF6F1; --hero-muted: #B9C0C7;
    --ok: #2F7D6B; --ok-soft: #E3F0EB; --warn: #A15C07; --warn-soft: #FBEFD9; --bad: #B42318; --bad-soft: #FDE8E6;
    --shadow: 0 1px 2px rgb(31 42 51 / .05), 0 8px 24px rgb(31 42 51 / .06); --shadow-lg: 0 12px 40px rgb(31 42 51 / .14);
    --radius: 16px; --panel-w: clamp(460px, 52vw, 820px); --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
    accent-color: var(--accent);
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #14181C; --surface: #1B2127; --surface-2: #232A31; --fg: #F3EEE8; --muted: #A39C94; --line: #313840;
    --accent: #E07A55; --accent-hover: #EA8F6D; --accent-fg: #1A0D07; --accent-soft: #3A2219; --ink: #F3EEE8; --clay: #C98567;
    --hero: #0E1216; --hero-fg: #F3EEE8; --hero-muted: #9AA3AB;
    --ok: #5FB8A0; --ok-soft: #16302A; --warn: #F2B544; --warn-soft: #3A2A0E; --bad: #F2877A; --bad-soft: #3A1715;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .35); --shadow-lg: 0 16px 48px rgb(0 0 0 / .5);
  } }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #14181C; --surface: #1B2127; --surface-2: #232A31; --fg: #F3EEE8; --muted: #A39C94; --line: #313840;
    --accent: #E07A55; --accent-hover: #EA8F6D; --accent-fg: #1A0D07; --accent-soft: #3A2219; --ink: #F3EEE8; --clay: #C98567;
    --hero: #0E1216; --hero-fg: #F3EEE8; --hero-muted: #9AA3AB;
    --ok: #5FB8A0; --ok-soft: #16302A; --warn: #F2B544; --warn-soft: #3A2A0E; --bad: #F2877A; --bad-soft: #3A1715;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .35); --shadow-lg: 0 16px 48px rgb(0 0 0 / .5);
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body { margin: 0; font: 14.5px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--fg); background: var(--bg);
         display: grid; grid-template-rows: auto 1fr; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01", "tnum"; }
  :focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
  a { color: var(--accent); }

  /* ---------- top bar ---------- */
  .top { display: flex; align-items: center; gap: 20px; padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--line); z-index: 2000; position: relative; }
  .brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; color: inherit; text-decoration: none; }
  .brand img { width: 34px; height: 34px; flex: none; display: block; }
  .brand .wm { font-weight: 700; font-size: 18px; letter-spacing: -.02em; line-height: 1.1; }
  .brand .wm span { color: var(--accent); }
  .brand small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; letter-spacing: 0; }
  .topact { display: flex; gap: 6px; margin-left: auto; }
  .iconbtn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
             color: var(--fg); cursor: pointer; } .iconbtn:hover { background: var(--surface-2); } .iconbtn svg { width: 18px; height: 18px; }
  search { position: relative; flex: 1; max-width: 640px; }
  search form { display: flex; gap: 8px; }
  .field { position: relative; flex: 1; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .field svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
  #q { width: 100%; height: 44px; padding: 0 12px 0 40px; font: inherit; font-size: 15px; color: var(--fg); background: var(--surface-2);
       border: 1px solid var(--line); border-radius: 12px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
  #q:focus { border-color: var(--accent); box-shadow: var(--focus); background: var(--surface); }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; height: 44px; padding: 0 18px; border: 0;
         border-radius: 12px; background: var(--accent); color: var(--accent-fg); cursor: pointer; text-decoration: none; transition: background .15s, transform .05s; }
  .btn:hover { background: var(--accent-hover); } .btn:active { transform: translateY(1px); }
  .btn.sm { height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: 10px; }
  .btn svg { width: 16px; height: 16px; }
  .btn:disabled { opacity: .55; cursor: progress; }
  .hist { list-style: none; margin: 0 0 8px; padding: 0; } .hist li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); }
  .btn.ghost { background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
  .btn.ghost:hover { background: var(--surface-2); }
  #sugg { position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; background: var(--surface);
          border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); max-height: 60vh; overflow: auto; }
  #sugg[hidden] { display: none; }
  #sugg li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
  #sugg li[aria-selected="true"], #sugg li:hover { background: var(--accent-soft); }
  #sugg .sub { color: var(--muted); font-size: 12px; }
  .top .hint { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
  #histpop { position: absolute; top: calc(100% + 6px); right: 16px; width: min(380px, 92vw); background: var(--surface); border: 1px solid var(--line);
             border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 3000; }
  #histpop[hidden] { display: none; } #histpop h3 { font-size: 12px; margin: 6px 8px 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

  /* ---------- layout ---------- */
  .app { display: grid; grid-template-columns: minmax(0, 1fr) var(--panel-w); min-height: 0; min-width: 0; }
  body.bigmap { --panel-w: clamp(360px, 30vw, 440px); }
  body.result { --panel-w: clamp(560px, 66vw, 1200px); }
  body.result.bigmap { --panel-w: clamp(420px, 42vw, 620px); }
  body.result .mapsize { display: block; }
  body.result aside > * { max-width: 1120px; }
  .sumhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
  .sumtitle { min-width: 0; flex: 1 1 320px; }
  .sumact { display: flex; gap: 6px; flex-wrap: wrap; }
  .sumgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr); gap: 14px; margin-top: 14px; align-items: start; }
  .sumplan .zoomview.small { height: 360px; }
  .sumplan .legendrow { margin-bottom: 0; }
  .sumnums { display: flex; flex-direction: column; gap: 10px; }
  .sumnums .hero-main { padding: 14px 16px; } .sumnums .hero-main > b { font-size: 34px; }
  .pitch { display: flex; align-items: baseline; gap: 10px; padding: 0 2px; }
  .pitch b { font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; } .pitch span { color: var(--muted); font-size: 12.5px; }
  .edgegrid { display: grid; column-gap: 16px; }
  .edgegrid > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--line); }
  .edgegrid > div > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .edgegrid b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* phones: the summary was ~1,7 screens before the tabs — the edges in two columns, the two number tiles side by side
     with the short line only */
  @container panel (max-width: 700px) {
    .edgegrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; } .edgegrid > div { min-width: 0; }
    .edgegrid > div > span { font-size: 13px; gap: 6px; } .edgegrid .tip { display: none; }
    .summary .sumnums .herotiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .summary .sumnums .herotiles .hero-main > b, .summary .sumnums .hero-order > b { font-size: 23px; white-space: nowrap; }
    .summary .herotiles .confchip { font-size: 11px; padding: 2px 7px; white-space: nowrap; } .summary .herotiles .confchip .tip { display: none; }
    .hero-order > b .unit { font-size: 14px; } .herotiles .hero-top { flex-wrap: wrap; font-size: 12px; }
    .herotiles .hero-top > span:first-child { font-size: 11.5px; }
    .herotiles .long { display: none; } .herotiles .confchip { order: 3; }
  }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .stats > div { min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
  .stats .micon { display: block; width: 20px; height: 20px; color: var(--muted); margin-bottom: 4px; }
  .stats b { display: block; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.15; }
  .stats span { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .note-l { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); font-size: 13px; line-height: 1.45; }
  .note-l > i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-weight: 700; font-size: 12px; color: #fff; background: var(--muted); }
  .note-l.high > i { background: var(--ok); } .note-l.medium > i { background: var(--warn); } .note-l.low > i { background: var(--bad); }
  .note-l b { font-weight: 600; display: block; } .note-l small { color: var(--muted); font-size: 12px; }
  .segrows { display: grid; gap: 8px; margin: 6px 0 4px; }
  .segrow { display: grid; grid-template-columns: 90px minmax(0, 1fr) 130px; gap: 12px; align-items: center; font-variant-numeric: tabular-nums; }
  .segrow small { color: var(--muted); font-size: 12px; } .segrow .n { text-align: right; }
  .segbar { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; } .segbar i { height: 14px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); }
  .segbar i.on { background: color-mix(in srgb, var(--accent) 55%, transparent); border-color: transparent; }
  .segrow.dom .segbar i.on { background: var(--accent); }
  @media (max-width: 560px) { .segrow { grid-template-columns: 64px minmax(0, 1fr) 96px; gap: 8px; } .stats { grid-template-columns: 1fr 1fr 1fr; } .stats .micon { display: none; } }
  .summary .chips.signals { margin-top: 10px; }
  @container panel (max-width: 700px) { .sumgrid { grid-template-columns: minmax(0, 1fr); } .sumnums { order: -1; } .sumplan .zoomview.small { height: 300px; } }
  @media (max-width: 900px) { .sumact [data-report], .sumact #copylink { display: none; } }
  .mapwrap { position: relative; min-height: 0; min-width: 0; }
  #map { height: 100%; min-height: 0; background: var(--surface-2); }
  .mapsize { display: none; position: absolute; z-index: 800; right: 10px; bottom: 26px; font: inherit; font-size: 12px; padding: 6px 10px;
             border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); box-shadow: var(--shadow); }
  .maphint { position: absolute; z-index: 800; top: 10px; left: 50%; translate: -50% 0; font-size: 12px; padding: 4px 10px; border-radius: 999px;
             background: rgb(0 0 0 / .55); color: #fff; pointer-events: none; }
  .hero { margin-top: 12px; }
  .hero-main { background: var(--hero); color: var(--hero-fg); border-radius: 14px; padding: 16px 18px; }
  .hero-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
  .hero-top > span:first-child { font-size: 12.5px; color: var(--hero-muted); white-space: nowrap; }   /* the "?" stays with its label */
  .hero-main > b { display: block; font-size: 38px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 4px 0 2px; line-height: 1.1; }
  .hero-main small { color: var(--hero-muted); font-size: 12.5px; }
  .hero-advice { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgb(255 255 255 / .12); font-size: 13px; line-height: 1.45; }
  .hero-advice span { color: var(--hero-muted); }
  .confchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
  .confchip i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
  .confchip.high { background: #DCEFE8; color: #1F5C4E; } .confchip.medium { background: #FBEBCB; color: #7A4606; } .confchip.low { background: #FBDDD8; color: #8C1D12; }
  .confchip .tip { color: inherit; border-color: currentColor; }
  .mobilebar { display: none; }
  .hist .hoffer { font-size: 11px; font-weight: 600; color: var(--accent); margin-left: 4px; white-space: nowrap; }
  .mobilebar b small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); line-height: 1; }
  .herotiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
  .herotiles .hero-main { padding: 12px 14px; } .herotiles .hero-main > b { font-size: 30px; }
  .hero-order { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface-2); }
  .hero-order .hero-top { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; color: var(--muted); }
  .hero-order > b { display: block; font-size: 30px; font-weight: 650; letter-spacing: -.02em; margin: 4px 0 2px; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .hero-order > b .unit { font-size: 17px; font-weight: 600; }
  .hero-order small { color: var(--muted); font-size: 12.5px; }
  .hero-order small.flatnote { display: block; margin-top: 4px; color: var(--warn); }
  .verdict .checklist { margin-top: 8px; } .verdict .checklist summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
  .verdict .checklist .note-l { margin: 8px 0 0; background: transparent; padding: 6px 0 0; border: 0; }
  .verdict .checklist .note-l > i { display: none; } .verdict .checklist ul { margin: 8px 0 0; padding-left: 18px; }
  #go { background: var(--hero); color: var(--hero-fg); } #go:hover { background: color-mix(in srgb, var(--hero) 85%, var(--accent)); }
  .kpimore { margin: 8px 2px 0; font-size: 12.5px; color: var(--muted); } .kpimore b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
  .conf { border-radius: 12px; padding: 12px 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; }
  .conf b { font-size: 15px; } .conf .advice { font-size: 13px; line-height: 1.4; } .conf small { color: var(--muted); font-size: 12px; } .conf .dot { width: 10px; height: 10px; border-radius: 50%; }
  .conf.high { background: var(--ok-soft); } .conf.high .dot { background: var(--ok); }
  .conf.medium { background: var(--warn-soft); } .conf.medium .dot { background: var(--warn); }
  .conf.low { background: var(--bad-soft); } .conf.low .dot { background: var(--bad); }
  .kpis4 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
  .kpis4 div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
  .kpis4 b { display: block; font-size: 19px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .kpis4 span { font-size: 11.5px; color: var(--muted); }
  .dataline { color: var(--muted); font-size: 12px; margin: 10px 0 0; }
  .changewarn { border-color: var(--warn); background: var(--warn-soft); }
  .changewarn > div { min-width: 0; flex: 1; }
  .changepair { margin-top: 6px; } .changepair > summary { cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--ink); }
  .changepair[open] > summary { margin-bottom: 8px; }
  .changewarn .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .changewarn figure { margin: 0; } .changewarn .phimg { border-radius: 10px; overflow: hidden; } .changewarn img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--surface-2); }
  .changewarn figcaption { font-size: 12px; color: var(--muted); text-align: center; }
  .signals h2 { margin-bottom: 6px; } a.chip { color: inherit; text-decoration: none; }
  .quickcost { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 14px;
               border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
  .quickcost span { display: block; font-size: 12px; color: var(--muted); } .quickcost b { font-size: 20px; font-variant-numeric: tabular-nums; }
  .quickcost small { display: block; font-size: 12px; color: var(--muted); }
  #sugg li.suggerr { cursor: default; color: var(--muted); font-size: 13px; white-space: normal; }
  button.chip { font: inherit; font-size: 12px; color: inherit; cursor: pointer; } button.chip:hover { border-color: var(--accent); }
  .zoomview.small { height: 300px; min-height: 220px; background: #fff; }
  .legendrow { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin: 8px 0 6px; align-items: center; }
  .legendrow span, .map-ctl .lg span { display: inline-flex; align-items: center; gap: 5px; }
  svg.sw2 { width: 22px; height: 12px; flex: none; }
  .slopes i, .map-ctl .lg .slopes i { display: inline-grid !important; place-items: center; width: 16px !important; height: 14px !important; margin: 0 !important;
             font-size: 9px; font-style: normal; font-weight: 700; color: #1c1917; border-radius: 3px; vertical-align: middle; }
  i.flat, i.faded { display: inline-block; width: 16px; height: 12px; border-radius: 3px; background: #b9b1a8; }
  i.faded { background: #9ca3af; opacity: .45; }
  .tip { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 5px; padding: 0; border-radius: 50%; border: 1px solid var(--line);
         background: var(--surface); color: var(--muted); font: 700 10px/1 Inter, system-ui, sans-serif; cursor: help; vertical-align: 1px; flex: none; }
  .tip:hover, .tip:focus-visible { color: var(--accent); border-color: var(--accent); }
  .hero-main .tip { background: transparent; color: inherit; border-color: rgb(255 255 255 / .4); }
  #tipbox { position: absolute; z-index: 6000; padding: 10px 12px; border-radius: 10px; background: #1c1917; color: #fff; font-size: 13px; line-height: 1.45;
            box-shadow: var(--shadow-lg); pointer-events: none; }
  #tipbox[hidden] { display: none; }
  h2.sect { margin: 18px 0 8px !important; } h2.sect:first-child { margin-top: 0 !important; }
  table.kv td:first-child { white-space: nowrap; }
  .legendrow i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
  details.src { margin: 4px 2px 16px; } details.src summary { cursor: pointer; font-size: 12px; color: var(--muted); }
  .map-ctl details summary { cursor: pointer; margin-top: 4px; }
  #map.picking { cursor: crosshair; }
  aside { container: panel / inline-size; min-height: 0; min-width: 0; overflow: auto; background: var(--bg); border-left: 1px solid var(--line); padding: 18px; scrollbar-width: thin; }
  aside > * { max-width: 780px; margin-left: auto; margin-right: auto; }
  @media (max-width: 900px) {
    .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 34vh auto; overflow: auto; }
    body.bigmap .app { grid-template-rows: 70vh auto; }
    .mapsize { display: block; } .kpis4 { grid-template-columns: repeat(3, 1fr); } .hero-main > b { font-size: 32px; }
    /* min-height auto: the panel as tall as its content (the main view scrolls) — cut to the screen, the sticky tabs ran
       off with its overflowing content */
    aside { border-left: 0; border-top: 1px solid var(--line); overflow: visible; min-height: auto; }
    .top { flex-wrap: wrap; gap: 10px; padding: 10px 12px; } .top .hint { display: none; } search { max-width: none; order: 3; flex-basis: 100%; }
    aside { padding: 12px; } .brand small { display: none; }
    .mobilebar { display: flex; position: sticky; bottom: 0; z-index: 5; align-items: center; gap: 8px; margin: 8px -12px -12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
                 background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
    .mobilebar b { margin-right: auto; font-size: 18px; font-variant-numeric: tabular-nums; }
    .btn.sm { height: 42px; }
    /* a result on a phone: the number first (design review F17) — the map shrinks to a strip ("Powiększ mapę" opens it),
       the editor lives in the Plan tab (dragging vertices with a thumb is the hardest thing on a phone) */
    body.result:not(.bigmap) .app { grid-template-rows: 22vh auto; }
    .sumact [data-edit] { display: none; }
  }

  /* ---------- cards ---------- */
  .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--shadow); }
  .card h2 { font-size: 11.5px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
  h1.addr { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; line-height: 1.25; }
  .meta { color: var(--muted); font-size: 12px; word-break: break-word; }
  .kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
  .kpi b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  .kpi span { color: var(--muted); font-size: 12px; }
  .kpi.hl { background: var(--accent-soft); }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); }
  .chip.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
  .chip.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
  .chip.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
  .chip.lead { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
  .chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
  .bld { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
  .bld button { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); cursor: pointer; }
  tr.opt td { color: var(--muted); }
  td.cut { white-space: normal; text-align: left; font-variant-numeric: tabular-nums; line-height: 1.5; }
  .bpick { display: inline-flex; align-items: center; gap: 4px; } .bpick label { font-size: 11px; color: var(--muted); display: inline-flex; gap: 3px; align-items: center; }
  .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
  .ctlrow { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .ctlrow select { font: inherit; font-size: 13px; color: var(--fg); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; margin-left: 4px; }
  tr.rec td { background: var(--accent-soft); font-weight: 600; }
  .bld button[aria-pressed="true"] { background: var(--hero); color: var(--hero-fg); border-color: transparent; }

  /* ---------- the Połacie tab: table rows linked to the faces of the plan beside it ---------- */
  .slopegrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; align-items: start; }
  .slopeplan svg { width: 100%; height: auto; display: block; border-radius: 10px; background: var(--surface-2); }
  .slopeplan path[data-slope] { transition: fill-opacity .12s, opacity .12s; }
  .slopeplan.hl path[data-slope] { opacity: .25; } .slopeplan.hl path[data-slope].on { opacity: 1; }
  table.slopetab tr[data-row-slope] { cursor: pointer; }
  table.slopetab tr[data-row-slope]:hover td, table.slopetab tr.on td { background: var(--accent-soft); }
  table.slopetab tr[data-row-slope]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  /* narrow (phones): the plan is in the summary above — a second copy here was a screen of scrolling; a tapped row lights
     its slope there and scrolls to it */
  @container panel (max-width: 700px) { .slopegrid { grid-template-columns: 1fr; } .slopegrid .slopeplan { display: none; } }
  .zoomview.hl path[data-slope] { opacity: .25; transition: opacity .12s; } .zoomview.hl path[data-slope].on { opacity: 1; }
  /* ---------- tabs ---------- */
  [role="tablist"] { display: flex; gap: 4px; margin: 4px 0 12px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  /* the tabs stay at the top of the panel while a long tab (materials, the offer) is scrolled: switching took a scroll up */
  aside > .tabwrap { position: sticky; top: 0; z-index: 4; background: var(--bg); }
  aside > .tabwrap > [role="tablist"] { margin-bottom: 0; }
  aside > .tabwrap { margin-bottom: 12px; }
  /* desktop: the panel scrolls itself and has 16 px padding — the strip covers it, or text shows through above the tabs */
  @media (min-width: 901px) { aside > .tabwrap { top: -16px; padding-top: 12px; margin-top: -8px; } }
  /* tabs running past the edge (a phone: PV, Dane, Plan were easy to miss): a fade over the strip — a layer, not a mask (a
     masked strip turned see-through once sticky) */
  .tabwrap::before, .tabwrap::after { content: ""; position: absolute; top: 0; bottom: 1px; width: 36px; pointer-events: none; opacity: 0;
                                       transition: opacity .15s; z-index: 1; }
  .tabwrap::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
  .tabwrap::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
  .tabwrap.more-l::before, .tabwrap.more-r::after { opacity: 1; }
  /* the offer's totals stay in view while its prices are edited (a phone keeps them in place: 2 × 2 tiles are too tall) */
  @media (min-width: 901px) { .offersum { position: sticky; bottom: -18px; z-index: 3; margin-bottom: 0; padding: 10px 0 18px; background: var(--surface); } }
  [role="tab"] { font: inherit; font-size: 14px; font-weight: 500; padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
                 background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; border-radius: 0; }
  [role="tab"]:hover { color: var(--fg); }
  [role="tab"][aria-selected="true"] { color: var(--fg); font-weight: 600; border-bottom-color: var(--accent); }
  table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  th, td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
  th { font-weight: 500; color: var(--muted); font-size: 12px; }
  .n { text-align: right; white-space: nowrap; }
  tr.total td { font-weight: 650; border-bottom: 0; }
  .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
  .note { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
  .kv td:first-child { color: var(--muted); width: 34%; }
  .okc { color: var(--ok); } .warnc { color: var(--warn); }
  ul.qa { margin: 0; padding-left: 18px; } ul.qa li { margin: 2px 0; }
  .zoomwrap { position: relative; }
  .zoomview { height: 58vh; min-height: 320px; border-radius: 10px; overflow: hidden; background: var(--surface-2); cursor: grab; }
  .zoomview:active { cursor: grabbing; }
  .zoomview svg { display: block; }
  .zoomview .vh { fill: #fff; stroke: var(--accent); stroke-width: 2.5; cursor: move; vector-effect: non-scaling-stroke; }
  .zoomview .vh.obrys { stroke: #2563eb; }
  .zoomview .eline { fill: none; stroke: transparent; stroke-linecap: round; cursor: grab; pointer-events: stroke; }
  .zoomview .eline:hover, .zoomview .eline.drag { stroke: rgb(250 204 21 / .55); }
  .zoomview .edguide { stroke: #E2A64E; stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }
  .zoomview .edlen { font: 700 12px Inter, system-ui, sans-serif; fill: #111; paint-order: stroke; stroke: #fff; stroke-width: 3px; pointer-events: none; }
  .zoomview.bd-see svg path[fill-opacity="0.72"] { fill-opacity: .38; }
  .zoomview.bd-white svg > rect:first-of-type { fill: #fff; }
  #edplan:not(.showlbl) .lbltxt { display: none; }
  #edplan .slopelbl { pointer-events: none; opacity: .85; }
  .zoomwrap.is3d .zoomview > svg, .zoomwrap.is3d .bdbar, .zoomwrap.is3d .edhint { display: none; }
  .zoomview canvas.v3d { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; } .zoomview canvas.v3d:active { cursor: grabbing; }
  .v3d-empty { padding: 20px; }
  .zoombar [data-z="lbl"] { display: none; } #edplan .zoombar [data-z="lbl"] { display: inline-block; }
  .zoombar button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
  .bdbar { position: absolute; top: 8px; right: 8px; z-index: 2; box-shadow: var(--shadow); }
  .bdbar button { font-size: 12px; padding: 4px 9px; }
  .edmenu { position: fixed; z-index: 7000; display: grid; gap: 2px; padding: 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
  .edmenu button { display: flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; text-align: left; padding: 6px 10px; border: 0; border-radius: 6px; background: none; color: var(--fg); cursor: pointer; }
  .edmenu button:hover, .edmenu button:focus-visible { background: var(--accent-soft); }
  .zoomview .vh.moved { fill: var(--accent); }
  .zoomview .vpend { fill: var(--accent); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
  .toolhint { margin: 6px 0; padding: 6px 10px; border-radius: 8px; background: var(--accent-soft, #fbeae3); color: var(--fg); font-size: 13px; }
  .addlist { margin: 8px 0; padding-left: 20px; display: grid; gap: 6px; } .addlist li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
  .addlist input[type=number] { width: 64px; font: inherit; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--fg); }
  .addlist select { font: inherit; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--fg); }
  .editbar [aria-pressed="true"] { background: var(--hero); color: var(--hero-fg); border-color: var(--hero); }
  .zoomview .vh:focus-visible { outline: none; stroke: var(--fg); stroke-width: 4; }
  .editbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 0; }
  .editnote { border-left: 3px solid var(--accent); padding: 6px 10px; margin: 8px 0 0; background: var(--surface-2); border-radius: 0 8px 8px 0; font-size: 14px; }
  .factors td:first-child { white-space: nowrap; }
  .zoombar { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; gap: 4px; }
  .zoombar button { font: inherit; font-size: 14px; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line);
                    background: var(--surface); color: var(--fg); cursor: pointer; box-shadow: var(--shadow); }
  dialog#plandlg { width: min(96vw, 1400px); height: 92vh; max-width: none; max-height: none; padding: 10px; border: 0; border-radius: 14px;
                   background: var(--surface); color: var(--fg); }
  dialog#plandlg::backdrop { background: rgb(0 0 0 / .55); }
  .zoomwrap.full { height: 100%; } .zoomwrap.full .zoomview { height: 100%; }
  .zoomwrap.full form { position: absolute; top: 8px; right: 8px; z-index: 2; margin: 0; }

  /* ---------- states ---------- */
  .skel { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%) 0 0 / 200% 100%; animation: sh 1.2s infinite linear; }
  @keyframes sh { to { background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
  .intro h1 { font-size: 26px; line-height: 1.2; letter-spacing: -.03em; margin: 0 0 8px; }
  .intro-mark { display: block; margin: 2px 0 14px; border-radius: 12px; }
  .intro p.lead { color: var(--muted); font-size: 15px; margin: 0 0 16px; }
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
  .steps li { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 13px; color: var(--muted); }
  .steps b { display: block; color: var(--fg); font-size: 14px; margin-bottom: 2px; }
  .steps .num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
                font-weight: 700; font-size: 12px; margin-bottom: 8px; }
  .exrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; align-items: center; }
  .exrow .lbl { color: var(--muted); font-size: 12.5px; margin-right: 2px; }
  button.chip { cursor: pointer; font: inherit; font-size: 12.5px; color: var(--fg); } button.chip:hover { border-color: var(--accent); color: var(--accent); }
  .hist li { align-items: center; } .hist li:last-child { border-bottom: 0; }
  .hist .hdel { flex: none; width: 26px; height: 26px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 16px;
                line-height: 1; cursor: pointer; opacity: .55; } .hist .hdel:hover, .hist .hdel:focus-visible { opacity: 1; background: var(--surface-2); color: var(--fg); }
  .hist li > button[data-h] { flex: 1; min-width: 0; text-align: left; }
  .hist button { font: inherit; font-weight: 500; background: none; border: 0; padding: 4px 0; color: var(--fg); cursor: pointer; text-align: left; }
  .hist button:hover { color: var(--accent); }
  .progress { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 14px 0 4px; }
  .progress i { display: block; height: 100%; width: 40%; background: var(--accent); border-radius: 3px; animation: prog 1.4s ease-in-out infinite; }
  @keyframes prog { 0% { translate: -100% 0; } 100% { translate: 260% 0; } }
  .stages { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13.5px; }
  .stages li { display: flex; gap: 10px; align-items: center; padding: 5px 0; color: var(--muted); }
  .stages li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
  .stages li.done { color: var(--fg); } .stages li.done::before { background: var(--ok); }
  .stages li.now { color: var(--fg); font-weight: 600; } .stages li.now::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
  @media (prefers-reduced-motion: reduce) { .progress i { animation: none; width: 100%; opacity: .5; } }
  @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
  .intro.compact h2 { margin: 0 0 4px; } .intro.compact p.lead { font-size: 14px; margin: 0 0 12px; }
  .howto { margin-top: 12px; } .howto > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
  .howto[open] > summary { margin-bottom: 10px; }
  .annex { margin: 8px 0 0; } .annex .link { margin-left: 4px; white-space: nowrap; }
  button.link { font: inherit; background: none; border: 0; color: var(--accent); padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
  .err { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }

  /* ---------- full-screen plan editor ---------- */
  dialog.editor { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--fg); }
  dialog.editor[open] { display: grid; grid-template-rows: auto 1fr; }
  dialog.editor::backdrop { background: rgb(0 0 0 / .35); }
  .edtop { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .edtitle { display: flex; align-items: center; gap: 10px; min-width: 0; } .edtitle img { border-radius: 7px; }
  .edtitle b { display: block; font-size: 15px; } .edtitle small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 40vw; }
  .edstatus { font-weight: 600; } .edstatus.dirty { color: var(--warn); } .edstatus.ok { color: var(--ok); } .edstatus.busy { color: var(--muted); }
  .edtools { display: flex; align-items: center; gap: 6px; margin: 0 auto; flex-wrap: wrap; }
  .ibtn { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px;
          background: transparent; color: var(--fg); cursor: pointer; }
  .ibtn:hover:not(:disabled) { background: var(--surface-2); } .ibtn:disabled { opacity: .35; cursor: default; }
  .ibtn[aria-checked="true"], .ibtn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
  .ibtn kbd { position: absolute; right: 2px; bottom: 2px; font: 600 8.5px/1 Inter, sans-serif; padding: 1px 2px; border: 0; background: none; color: inherit; opacity: .55; }
  .edtools .tools { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  .edact { display: flex; align-items: center; gap: 6px; }
  .zoomview .vh.add { fill: var(--accent); stroke: #fff; }
  .zoomview .addline { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; cursor: grab; }
  .zoomview .addhit { stroke: transparent; stroke-width: 14; cursor: grab; pointer-events: stroke; vector-effect: non-scaling-stroke; }
  .edtools .sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
  .edtools .seg button { display: inline-flex; align-items: center; gap: 6px; }
  .edtools kbd, .edhelp dt { font: 600 10.5px/1 Inter, sans-serif; padding: 2px 5px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); }
  .edact { display: flex; gap: 6px; align-items: center; }
  .btn.icon { width: 36px; padding: 0; font-size: 17px; }
  .btn:disabled { opacity: .45; cursor: default; }
  .edbody { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 0; }
  .edcanvas { min-height: 0; height: 100%; background: var(--surface-2); } .edcanvas .zoomview { height: 100%; border-radius: 0; }
  .edhint { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; margin: 0; max-width: min(560px, 90%); padding: 8px 14px; border-radius: 10px;
            background: var(--hero); color: var(--hero-fg); font-size: 13px; box-shadow: var(--shadow); text-align: center; pointer-events: none;
            transition: opacity .4s; }
  .edhint.faded { opacity: 0; }
  .edside { overflow: auto; padding: 14px 16px; border-left: 1px solid var(--line); background: var(--surface); }
  .edside section { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
  .edside h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 8px; }
  .ednum { width: 100%; font-size: 13px; } .ednum td, .ednum th { padding: 4px 0; } .ednum th { font-weight: 500; color: var(--muted); font-size: 11.5px; background: none; }
  .ednum .up { color: var(--accent); } .ednum .down { color: var(--ok); } .ednum .same { color: var(--muted); }
  .edhist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 240px; overflow: auto; }
  .edhist button { width: 100%; text-align: left; font: inherit; font-size: 13px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--fg); cursor: pointer; }
  .edhist button:hover { background: var(--surface-2); } .edhist button.cur { background: var(--accent-soft); font-weight: 600; } .edhist button.future { color: var(--muted); text-decoration: line-through; }
  .addlist li { padding: 6px; border-radius: 8px; cursor: pointer; } .addlist li.sel { background: var(--accent-soft); }
  .edhelp dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 0; font-size: 12.5px; } .edhelp dt { justify-self: start; } .edhelp dd { margin: 0; }
  .zoomview .vh.drag { fill: var(--accent); }
  dialog.confirm { max-width: 420px; padding: 18px 20px; border: 0; border-radius: 14px; box-shadow: var(--shadow-lg); }
  dialog.confirm h2 { margin: 0 0 6px; font-size: 17px; } .confirmact { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; }
  dialog.editor { overflow: hidden; } .edtop > * { min-width: 0; }
  .edtools .seg button, .edact .btn { white-space: nowrap; }
  @media (max-width: 900px) {
    .edtop { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 8px 10px; gap: 8px; }
    .edtitle small { max-width: 100%; } .edtitle img { width: 24px; height: 24px; }
    .edact { grid-column: 2; grid-row: 1; } .edact [data-ed="help"] { display: none; }
    .edtools { grid-column: 1 / -1; width: 100%; margin: 0; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; }
    .edtools .seg { flex: none; } .edtools .seg button { font-size: 13px; padding: 5px 9px; } .edtools .seg button kbd { display: none; }
    .edbody { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
    .edside { border-left: 0; border-top: 1px solid var(--line); max-height: 36dvh; padding: 10px 12px; }
    .edhint { top: 52px; bottom: auto; font-size: 12px; padding: 6px 10px; }
  }
  /* ---------- PV tab ---------- */
  .pvtop { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
  .pvgrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  .pvfig { margin: 0; background: var(--surface-2); border-radius: 12px; padding: 8px; } .pvsvg { width: 100%; height: auto; display: block; }
  .pvsvg .pvroof { fill: var(--surface); stroke: var(--line); stroke-width: 1; } .pvsvg .pvobst { fill: var(--accent); opacity: .7; }
  .pvsvg.onphoto .pvroof { fill: #000; fill-opacity: .18; stroke: #fff; stroke-opacity: .8; }
  .pvsvg.onphoto .pvmod.off { stroke: #fff; } .pvsvg.onphoto .pvn { fill: #fff; paint-order: stroke; stroke: #0008; stroke-width: 3px; }
  /* used modules dark blue with a light frame, unused ones an outline only: in the dark theme the two were nearly the same (F22) */
  dialog.onboard { width: min(560px, calc(100vw - 32px)); padding: 22px 22px 18px; border: 0; border-radius: 16px; background: var(--surface); color: var(--fg); box-shadow: var(--shadow-lg); }
  dialog.onboard::backdrop { background: rgb(0 0 0 / .4); }
  .fbform { display: grid; gap: 10px; } .fbform label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
  .fbform textarea, .fbform input:not([type=radio]) { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); }
  .fbkinds { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; } .fbkinds label { display: inline-flex; gap: 6px; font-weight: 500; }
  .rate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; }
  .rate > span { color: var(--muted); margin-right: 4px; }
  .ratewhy { flex-basis: 100%; display: grid; gap: 8px; margin-top: 4px; } .ratewhy[hidden] { display: none; }
  .ratewhy fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .ratewhy legend { font-weight: 600; margin-bottom: 4px; } .ratewhy fieldset label { display: inline-flex; gap: 6px; align-items: center; }
  .ratewhy > label { display: grid; gap: 4px; font-weight: 600; }
  .ratewhy textarea { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); }
  .ratewhy .btn { justify-self: start; }
  p.rate { display: block; color: var(--muted); }
  .fbres:empty { display: none; } .fbres { color: var(--bad); margin: 0; }
  dialog.onboard h2 { margin: 6px 0 6px; font-size: 19px; }
  .obdots { display: flex; gap: 6px; } .obdots i { width: 22px; height: 4px; border-radius: 2px; background: var(--line); } .obdots i.on { background: var(--accent); }
  .obroles { display: grid; gap: 8px; margin-top: 12px; }
  .obrole { text-align: left; display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--fg); cursor: pointer; font: inherit; }
  .obrole span { color: var(--muted); font-size: 13px; } .obrole:hover, .obrole.on { border-color: var(--accent); }
  .obtips { margin: 10px 0; padding-left: 18px; display: grid; gap: 6px; }
  #onbdlg .firmform { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #onbdlg .firmform .row { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  #onbdlg .firmform label { display: grid; gap: 3px; font-size: 13px; }
  @media (max-width: 520px) { #onbdlg .firmform { grid-template-columns: 1fr; } }
  .nextcard ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; } .nchead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  details.zones { margin: 10px 0; }
  .stsel select { font: inherit; font-size: 12px; padding: 2px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); margin-right: 8px; }
  .stbadge { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
  .stbadge.st-wyslana, .stsel.st-wyslana select { color: var(--accent); } .stbadge.st-przyjeta, .stsel.st-przyjeta select { color: var(--ok); }
  .stbadge.st-odrzucona { text-decoration: line-through; } .rfilter { margin: 0 0 8px; } .mineio { margin-top: 10px; align-items: center; flex-wrap: wrap; }
  details.zakres { margin: 4px 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
  details.zakres summary { cursor: pointer; } .zchips { margin: 8px 0 6px; } .zchips .chip[aria-pressed="false"] { opacity: .5; text-decoration: line-through; }
  .zchips .chip[aria-pressed="true"] { border-color: var(--accent); } .zgroups label { display: inline-flex; gap: 6px; align-items: center; }
  .zbadge { color: var(--accent); font-weight: 600; } details.zones summary { cursor: pointer; padding: 6px 0; }
  .rhs { display: flex; gap: 3px; flex-wrap: wrap; }
  .rhs span { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--muted); gap: 2px; }
  .rhs i { display: block; width: 26px; height: 26px; border-radius: 5px; border: 1px solid var(--line); }
  .rhs .step { margin-left: 10px; } .rhs .step::before { content: ''; }
  .rhs .step i { outline: 2px solid var(--accent); outline-offset: 1px; }
  .pvsvg .pvmod.shade { fill: #00000059; stroke: #E2A64E; stroke-dasharray: 3 2; stroke-width: 1; }
  .pvsvg .pvmod { fill: #1E3A5F; stroke: #DCE6F2; stroke-width: .8; } .pvsvg .pvmod.off { fill: none; stroke: var(--muted); stroke-dasharray: 2 2; stroke-width: .6; } .pvsvg .pvn { font-size: 12px; fill: var(--muted); }
  .pvkpi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 10px; }
  .pvkpi div, .pvres div { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
  .pvkpi b, .pvres b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; } .pvkpi span, .pvres span { font-size: 11.5px; color: var(--muted); }
  .pvkpi .hero-like { background: var(--hero); color: var(--hero-fg); } .pvkpi .hero-like span { color: var(--hero-muted); }
  table.pvsl tr.off td { color: var(--muted); }
  .pvecon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; }
  .pvres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; align-content: start; }
  .pvin { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; font-size: 12.5px; color: var(--muted); }
  .pvin label { display: grid; gap: 3px; } .pvin label span { color: var(--fg); } .pvin input.onum { width: 90px; text-align: right; font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--fg); }
  #tp { container-type: inline-size; }
  @container (max-width: 640px) { .pvgrid, .pvecon { grid-template-columns: 1fr; } .pvkpi { grid-template-columns: repeat(4, 1fr); } .pvkpi b { font-size: 16px; } }
  @media (max-width: 900px) { .pvgrid, .pvecon { grid-template-columns: 1fr; } }
  /* ---------- offer tab ---------- */
  .ovariants { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }
  .ovchip { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
  .ovchip label { display: grid; place-items: center; padding: 0 8px; border-right: 1px solid var(--line); }
  .ovchip button { flex: 1; text-align: left; font: inherit; font-size: 13px; padding: 7px 10px; border: 0; background: none; color: var(--fg); cursor: pointer; }
  .ovchip button span { display: block; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .ovchip.in { border-color: color-mix(in srgb, var(--hero) 35%, var(--line)); } .ovchip.cur { box-shadow: inset 0 0 0 2px var(--hero); }
  .ovchip.cur button b, .ovchip.in button b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--hero); color: var(--hero-fg); font-size: 11px; }

  .offerctl { flex-wrap: wrap; gap: 10px 14px; } .offerctl .grow { flex: 1; min-width: 180px; } .offerctl .grow input { width: 100%; }
  .offerctl input, .ouwagi textarea { font: inherit; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--fg); }
  table.offer input.onum { width: 86px; text-align: right; font: inherit; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--fg); }
  table.offer input.oname { width: 100%; min-width: 140px; font: inherit; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; }
  table.offer input.ojm { width: 54px; font: inherit; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; }
  #onarzut, #owazn { width: 64px; text-align: right; }
  table.offer tr.off td { color: var(--muted); } table.offer tr.ogroup th { background: var(--surface-2); padding-top: 10px; }
  .offcheck { display: inline-flex; gap: 8px; align-items: flex-start; }
  .ouwagi { display: grid; gap: 4px; margin: 12px 0; font-size: 12.5px; color: var(--muted); } .ouwagi textarea { width: 100%; resize: vertical; }
  .offersum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0; }
  .offersum div { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; } .offersum span { display: block; font-size: 11.5px; color: var(--muted); }
  .offersum b { font-size: 16px; font-variant-numeric: tabular-nums; } .offersum .gross { background: var(--hero); color: var(--hero-fg); } .offersum .gross span { color: var(--hero-muted); }
  .offtoggle { display: inline-flex; gap: 6px; align-items: center; }
  @media (max-width: 900px) { .offersum { grid-template-columns: repeat(2, 1fr); } table.offer input.onum { width: 70px; } }
  /* a phone: five columns did not fit (401 px in 341 — the value column ran off the card); the value goes under the price */
  table.offer .vin { display: none; }
  @media (max-width: 560px) {
    table.offer tr > :nth-child(5), table.offer tr.ogroup > :nth-child(2) { display: none; }
    table.offer td .vin { display: block; margin-top: 3px; font-weight: 600; font-size: 12.5px; }
    table.offer th .vin { display: inline; }
  }
  /* ---------- premium polish ---------- */
  .top { background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); }
  .card { border-color: color-mix(in srgb, var(--line) 80%, transparent); }
  aside.enter .card { animation: rise .28s ease-out both; } aside.enter .card:nth-child(2) { animation-delay: .04s; } aside.enter .card:nth-child(3) { animation-delay: .08s; }
  @keyframes rise { from { opacity: 0; translate: 0 6px; } }
  .btn { box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 1px 2px rgb(0 0 0 / .18); }
  .btn.ghost { box-shadow: inset 0 0 0 1px var(--line), 0 1px 1px rgb(0 0 0 / .03); }
  .hero-main { box-shadow: 0 8px 24px rgb(20 26 33 / .18); }
  .conf { border: 1px solid transparent; } .conf.high { border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
  .conf.medium { border-color: color-mix(in srgb, var(--warn) 25%, transparent); } .conf.low { border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
  .chip { font-weight: 500; }
  .leadshead { display: flex; align-items: center; gap: 10px; } .leadshead h1 { flex: 1; margin: 0; font-size: 18px; }
  .tablewrap { overflow-x: auto; } .leadtable { font-size: 13px; } .leadtable th .link { font-weight: 600; white-space: nowrap; }
  .leadtable tr[data-lead] { cursor: pointer; } .leadtable tr[data-lead]:hover, .leadtable tr[data-lead]:focus-within { background: var(--surface-2); }
  .leadtable button.leadgo { font: inherit; color: inherit; text-align: left; background: none; border: 0; padding: 2px 0; cursor: pointer; min-height: 24px; }
  .mapbtn { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--line);
            background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgb(0 0 0 / .12); }
  .mapbtn:hover { background: var(--surface-2); }
  .leadfilters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .leadfilters .chip { cursor: pointer; }
  .leadfilters .chip[aria-pressed="true"] { outline: 2px solid var(--ink); }
  .leadtable tr.on td { background: color-mix(in srgb, var(--accent, #B5462A) 14%, transparent); }
  .leadback { display: inline-flex; margin: 0 0 10px; }
  /* touch screens: 44 px targets (design review 2026-10-08, F18 — checkboxes 13 px, "?" 15 px, segmented buttons 26 px) */
  @media (pointer: coarse) {
    .btn.sm, .seg button, [role=tab] { min-height: 44px; }
    input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
    /* text fields: 16 px, or iOS zooms the page on focus; 40 px tall (the tape form's were 22 px with 13 px text —
       mobile walkthrough 2026-11-01) */
    /* !important: the class rules of selects (.ctlrow, .rolesel, .stsel, map controls) set 12–13 px, and iOS zooms on those too */
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea { font-size: 16px !important; min-height: 40px; }
    .tip { position: relative; } .tip::after { content: ""; position: absolute; inset: -14px; }
    .ibtn kbd, .edtools kbd { display: none; }                       /* no keyboard shortcuts on a phone (F19) */
  }
  .checklist { margin: 10px 0 0; font-size: 13px; } .checklist ul { margin: 6px 0 0; padding-left: 18px; } .checklist li { margin: 2px 0; }
  .waitrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
  .note-l.verdict { margin: 8px 0 10px; }
  .subnav { margin: 0 0 14px; } .tabsect { margin-top: 20px; }
  .athopts { margin-top: 14px; font-size: 13px; }
  .edcanvas svg.selectable path.slope { cursor: pointer; transition: fill-opacity .12s; }
  .edcanvas svg.selectable path.slope:hover, .edcanvas path.slope.hl { fill-opacity: .92; stroke-width: 2px; vector-effect: non-scaling-stroke; }
  /* the edges are drawn over the slope's outline: the selection is a blue tint of the whole slope, not only its stroke */
  .edcanvas path.slope.sel { fill: #2563EB; fill-opacity: .42; stroke: #2563EB; stroke-width: 3px; vector-effect: non-scaling-stroke; }
  .edcanvas path.edgehit { fill: none; stroke: transparent; stroke-width: 14px; vector-effect: non-scaling-stroke; pointer-events: stroke; cursor: pointer; }
  .edcanvas path.edge.hl { stroke-width: 5px; vector-effect: non-scaling-stroke; }
  .zoomview .eline.sel { stroke: #2563EB; stroke-opacity: .55; }
  .edcanvas path.edge.sel { stroke-width: 6px; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px #2563EB); }
  .zoomview .vh.sel, .zoomview .addline.sel, .zoomview .edobj.sel { stroke: #2563EB; stroke-width: 3px; vector-effect: non-scaling-stroke; }
  dl.insp { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 10px; font-size: 13.5px; align-items: center; }
  dl.insp dt { color: var(--muted); } dl.insp dd { margin: 0; } dl.insp input { width: 80px; } dl.insp select { font: inherit; max-width: 100%; }
  .inspact { display: flex; flex-wrap: wrap; gap: 6px; }
  .sllist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; }
  .sllist button { width: 100%; display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 5px 8px; border: 0;
                   border-radius: 7px; background: none; color: var(--fg); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
  .sllist button:hover { background: var(--surface-2); } .sllist button.cur { background: color-mix(in srgb, #2563EB 14%, transparent); }
  .sllist b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1F2A33; color: #fff; font-size: 11px; }
  .eddraft { border-left: 3px solid var(--warn); padding-left: 10px; }
  /* phase 2 of the editor: snapping marker, frame selection, layers, zoom, edge lengths */
  .zoomview .edsnap { fill: #fff; stroke: #E2A64E; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
  .zoomview .edsnapt { fill: #8a5a12; }
  .zoomview .edmarq { fill: rgb(37 99 235 / .08); stroke: #2563EB; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
  #edplan .ortho, #edplan .bdimg { opacity: var(--bdop, 1); }
  #edplan:not(.showdim) .eddims { display: none; }
  .zoomview .eddim { font-family: Inter, system-ui, sans-serif; font-weight: 650; fill: #1F2A33; paint-order: stroke; stroke: #fff; pointer-events: none; }
  #edplan.hidepts .vh:not(.add):not(.sel) { display: none; }
  .edlayers { position: absolute; top: 46px; right: 8px; z-index: 3; font-size: 13px; }
  .edlayers > summary { list-style: none; cursor: pointer; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); font-size: 12px; text-align: right; }
  .edlayers > summary::-webkit-details-marker { display: none; }
  .edlayers[open] > summary { background: var(--fg); color: var(--bg); }
  .edlayers > summary { width: max-content; margin-left: auto; }
  .edgegrid .edgerange { display: block; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
  .edlaybody { margin-top: 6px; display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-lg); min-width: 220px; }
  .edlaybody label { display: flex; align-items: center; gap: 8px; } .edop input { flex: 1; } .edop output { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
  .edzoom { position: absolute; left: 8px; bottom: 8px; z-index: 2; font: 600 12px Inter, sans-serif; font-variant-numeric: tabular-nums; padding: 4px 8px;
            border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; }
  .zoomwrap.is3d .edlayers, .zoomwrap.is3d .edzoom, .zoomwrap.is3d .edmulti { display: none; }
  .edmulti { position: absolute; left: 64px; bottom: 8px; z-index: 2; font: 600 12px Inter, sans-serif; padding: 4px 10px; border-radius: 8px;
             border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; }
  .ednew > summary { list-style: none; cursor: pointer; } .ednew > summary::-webkit-details-marker { display: none; }
  .ednew > summary h3 { display: inline; } .ednew > summary::after { content: " ▸"; color: var(--muted); font-size: 11px; }
  .ednew[open] > summary::after { content: " ▾"; }
  .nrform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 10px; font-size: 13px; }
  .nrform select, .nrform input { font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--fg); }
  .nrform input { width: 64px; }
  .edmulti[aria-pressed="true"] { background: #2563EB; border-color: #2563EB; color: #fff; }
  @media (pointer: coarse) { .edmulti, .edzoom, .edpanel { min-height: 40px; font-size: 13px; } .edmulti { left: 72px; } }
  .edpanel { display: none; position: absolute; right: 8px; bottom: 8px; z-index: 2; font: 600 12px Inter, sans-serif; padding: 4px 10px;
             border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; }
  .edlaybd { display: none; } .edlaybd .bdbar { position: static; box-shadow: none; display: flex; flex-wrap: wrap; }
  /* phones: the backdrop choice moves into "Warstwy" (the bar covered the zoom buttons), the hint sits above the bottom
     buttons, the side panel can be folded to give the roof the screen */
  @media (max-width: 600px) {
    #edplan > .bdbar, #edplan .zoombar [data-z="lbl"] { display: none; }
    .edlaybd { display: block; }
    .edlayers { top: 8px; }
    #edplan .edhint { top: auto; bottom: 60px; }
  }
  @media (max-width: 900px) {
    .edpanel { display: inline-block; }
    .edbody.panelmin { grid-template-rows: minmax(0, 1fr) 0; } .edbody.panelmin .edside { display: none; }
    .edside { max-height: 40dvh; }
  }
  .edobj { fill: #F2B544; fill-opacity: .85; stroke: #1F2A33; stroke-width: 1; vector-effect: non-scaling-stroke; }
  .edobjt { fill: #1F2A33; font-weight: 700; pointer-events: none; }
  .edruler { stroke: #F2B544; stroke-width: 2.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
  .tasma > summary { cursor: pointer; } .tasma > summary .note { display: block; margin-top: 2px; } .tasma form { margin-top: 12px; }
  .tasma .slopetab input.onum { width: 80px; }
  /* phone: the edge lengths as one column (labels of different lengths pushed the fields out of line) */
  @media (max-width: 560px) { .tasma .tapeedges { display: grid; gap: 8px; }
    .tasma .tedge { display: grid; grid-template-columns: 6.5rem minmax(0, 10rem) auto; gap: 10px; align-items: center; }
    .tasma .tedge input.onum { width: 100%; } }
  .clientbanner { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); font-size: 13.5px; line-height: 1.5; }
  body.clientview #leadsbtn, body.clientview .rolesel { display: none; }
  .rolesel select { font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 10px; border: 1px solid var(--line);
    background: var(--surface); color: var(--fg); }
  @media (max-width: 560px) { .rolesel select { max-width: 104px; } }
  /* phones: logo, role and the icons in one row above the search (they wrapped into two rows — ~45 px of every screen) */
  @media (max-width: 440px) { .brand .wm { display: none; } .top { gap: 8px; } .topact { gap: 2px; } .rolesel select { max-width: 96px; } }
  .wasteslider { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 2px; }
  .wasteslider input[type=range] { flex: 1 1 220px; }
  .wasteslider output { font-variant-numeric: tabular-nums; min-width: 12ch; }
  .leaflet-bar, .leaflet-control-layers { border: 1px solid var(--line) !important; border-radius: 12px !important; box-shadow: var(--shadow) !important; overflow: hidden; }
  .leaflet-bar a { background: var(--surface); color: var(--fg); border-color: var(--line); width: 34px !important; height: 34px !important; line-height: 34px !important; }
  .leaflet-bar a:hover { background: var(--surface-2); }
  #locate { display: flex !important; align-items: center; justify-content: center; border-radius: 4px; }
  #locate.busy svg { animation: pulse 1s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .3; } }
  /* KIEG draws thin light-blue lines and numbers: a white halo + stronger colour so they read on the photo */
  .kieg { filter: saturate(3) brightness(.75) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
  .leaflet-tooltip { background: #1c1917; color: #fff; border: 0; border-radius: 8px; padding: 6px 9px; box-shadow: var(--shadow-lg); font-size: 12.5px; }
  .leaflet-tooltip-top::before { border-top-color: #1c1917; } .leaflet-tooltip-left::before { border-left-color: #1c1917; } .leaflet-tooltip-right::before { border-right-color: #1c1917; }
  .leaflet-tooltip.hovertip span { opacity: .75; font-size: 11.5px; }
  .leaflet-interactive { cursor: pointer; }
  .maphint { background: color-mix(in srgb, #1c1917 78%, transparent); backdrop-filter: blur(6px); padding: 5px 12px; }
  /* photos */
  .photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
  .ph { padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; text-align: left;
        font: inherit; color: var(--fg); transition: transform .15s, box-shadow .15s; }
  .ph:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .phimg { position: relative; display: block !important; padding: 0 !important; }
  .ph img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--line); }
  svg.outl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  svg.outl polygon { fill: none; stroke: #fff; stroke-width: 1.6; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; opacity: .9; }
  .compare { width: fit-content; max-width: 100%; margin: 0 auto; }
  dialog.sheet .compare-wrap { background: #000; }
  .ph span { display: block; padding: 7px 9px; font-size: 12px; color: var(--muted); } .ph b { display: block; color: var(--fg); font-size: 13px; }
  .phstate { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; text-align: center; font: 500 12px/1.3 Inter, sans-serif;
             color: var(--muted); font-style: normal; background: var(--surface-2); }
  .phstate.err { color: var(--warn); cursor: pointer; }
  /* sheets (dialogs) */
  dialog.sheet { width: min(96vw, 1100px); max-height: 94vh; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface);
                 color: var(--fg); box-shadow: var(--shadow-lg); overflow: hidden; }
  dialog.sheet.wide { width: min(96vw, 1000px); height: 94vh; } dialog.sheet.wide[open] { display: grid; grid-template-rows: auto auto 1fr; }
  .firmform { padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); display: grid; gap: 8px 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .firmform[hidden] { display: none; } .firmform label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
  .firmform input[type=text], .firmform input[type=email], .firmform input[type=tel] { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--fg); }
  .firmform .logo { display: flex; gap: 8px; align-items: center; } .firmform .logo img { max-height: 36px; max-width: 120px; object-fit: contain; background: #fff; border-radius: 4px; }
  .firmform .row { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  dialog.sheet[open] { animation: pop .18s ease-out; } @keyframes pop { from { opacity: 0; scale: .98; } }
  dialog.sheet::backdrop { background: rgb(20 18 16 / .55); backdrop-filter: blur(3px); }
  .sheethead { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .sheethead b { display: block; font-size: 15px; } .sheetact { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .sheetact form { margin: 0; }
  /* phone: the close button in the corner, not on a row of its own under the wrapped actions (mobile walkthrough) */
  @media (max-width: 600px) { .sheethead { position: relative; padding-right: 52px; } .sheetact > form:last-child { position: absolute; top: 8px; right: 8px; }
    .sheethead > *, .sheetact { min-width: 0; max-width: 100%; } .sheetact .seg { flex-wrap: wrap; } }
  .compare { position: relative; background: #000; line-height: 0; }
  .compare img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(94vh - 70px); }
  .compare img.old { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
  .compare::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; box-shadow: 0 0 8px rgb(0 0 0 / .6); pointer-events: none; }
  .compare:not(:has(.old))::after { display: none; }
  .compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
  .compare .lbl { position: absolute; top: 10px; line-height: 1.4; font-size: 12px; padding: 3px 8px; border-radius: 6px; background: rgb(0 0 0 / .6); color: #fff; }
  .compare .lbl.l { left: 10px; } .compare .lbl.r { right: 10px; }
  .repbody { background: #ece8e3; min-height: 0; grid-row: 3; } .repbody iframe { width: 100%; height: 100%; border: 0; display: block; }
  .repload { max-width: 420px; margin: 18vh auto 0; padding: 0 16px; text-align: center; }
  .seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
  .seg button { font: inherit; font-size: 13px; padding: 5px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
  .seg button[aria-checked="true"] { background: var(--surface); color: var(--fg); font-weight: 600; box-shadow: var(--shadow); }
  .seg button:focus-visible, .seg button[aria-checked="true"]:focus-visible { box-shadow: var(--focus); }
  /* states */
  .alert { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--warn-soft);
           border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); color: var(--fg); margin: 8px 0; }
  .alert b { color: var(--warn); } .alert span { color: var(--muted); font-size: 13px; }
  .errcard { text-align: center; padding: 28px 22px; } .errcard p { margin: 6px auto; max-width: 460px; } .errcard .actions { justify-content: center; }
  .errtitle { font-size: 18px !important; text-transform: none !important; letter-spacing: -.01em !important; color: var(--fg) !important; margin: 10px 0 4px !important; }
  .erricon { width: 48px; height: 48px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 700;
             background: var(--bad-soft); color: var(--bad); } .erricon.notfound, .erricon.invalid { background: var(--warn-soft); color: var(--warn); }
  #toasts { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; display: flex; flex-direction: column; gap: 8px; z-index: 5000; pointer-events: none; }
  .toast { background: #1c1917; color: #fff; padding: 10px 14px; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 13.5px; animation: pop .2s ease-out;
           transition: opacity .4s, translate .4s; border-left: 3px solid var(--accent); }
  .toast.ok { border-left-color: #4ade80; } .toast.bad { border-left-color: #f87171; } .toast.warn { border-left-color: #fbbf24; }
  .toast.out { opacity: 0; translate: 0 8px; }
  @media (prefers-reduced-motion: reduce) { aside.enter .card, dialog.sheet[open], .toast { animation: none; } .ph { transition: none; } }

  /* ---------- map extras ---------- */
  .leaflet-container { font: inherit; }
  .mapseg { margin-bottom: 6px; } .mapseg button { font-size: 12px; padding: 4px 9px; } .mapseg button:disabled { opacity: .45; cursor: default; }
  .mapopts > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 6px; }
  .mapopts > summary::-webkit-details-marker { display: none; }
  .mapopts[open] > summary { margin-bottom: 8px; }
  .mappanel { width: 270px; max-height: min(70vh, 560px); overflow: auto; }
  .mappanel .mph { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 8px 0 4px; font-weight: 600; }
  .mappanel .mph:first-child { margin-top: 0; }
  .mappanel label.mph { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--fg); font-weight: 500; }
  .mapseg { display: flex; flex-wrap: wrap; }
  .ovlist { display: grid; gap: 4px; } .ovlist label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
  .ovlist input:disabled + i, .ovlist input:disabled ~ * { opacity: .5; } .ovlist label:has(input:disabled) { cursor: default; color: var(--muted); }
  .map-ctl { background: var(--surface); color: var(--fg); padding: 8px 10px; border-radius: 10px; box-shadow: var(--shadow); font-size: 12px; }
  .map-ctl.bare { background: none; padding: 0; box-shadow: none; } .map-ctl.bare .mapbtn { margin-top: 0; }
  .map-ctl select { font: inherit; font-size: 12px; margin-top: 4px; max-width: 210px; color: var(--fg); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px; }
  .map-ctl .lg { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; max-height: 40vh; overflow: auto; width: 260px; }
  .map-ctl .lg .two { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; }
  .map-ctl .lg .two .slopes { grid-column: 1 / -1; }
  .map-ctl .lg b { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 6px; }
  .map-ctl .lg i { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 4px; border-radius: 2px; }
  .leaflet-tooltip.roof { font-size: 12px; font-weight: 600; }
  .leaflet-control-layers { background: var(--surface); color: var(--fg); }
  .leaflet-control-attribution { font-size: 10px; }
  /* a phone: the panel stays (the backdrop switch was only there); in the small map it opens over it, scrolling */
  @media (max-width: 900px) { body:not(.bigmap) .maphint { display: none; } .mappanel { width: min(270px, 70vw); max-height: 28vh; }
                              body.bigmap .mappanel { max-height: 55vh; } .mapopts > summary span { display: none; } }

  /* ---------- design pass: quieter, flatter, one accent ----------
     Graphite for actions, terracotta only for the brand and data highlights; flat cards (border, no shadow); hints appear
     on hover; status as a coloured dot on neutral chips; sentence-case section titles. */
  :root { --bg: #F7F5F2; --surface-2: #F2EFEB; --line: #E6E1DB; --muted: #6F6A64; --radius: 12px;
          --shadow: none; --shadow-lg: 0 12px 32px rgb(20 24 28 / .12), 0 2px 6px rgb(20 24 28 / .06); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #111417; --surface: #171B1F; --surface-2: #1E2328; --line: #2A3036; } }
  :root[data-theme="dark"] { --bg: #111417; --surface: #171B1F; --surface-2: #1E2328; --line: #2A3036; }
  body { font-size: 14px; }
  .top { gap: 16px; padding: 8px 16px; min-height: 56px; }
  .top .hint { display: none; }
  .brand img { width: 28px; height: 28px; } .brand .wm { font-size: 16px; } .brand small { font-size: 11px; }
  #q { height: 40px; border-radius: 10px; border-color: transparent; font-size: 14px; }
  #q:focus { border-color: var(--line); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 10%, transparent); }
  .iconbtn { width: 36px; height: 36px; border-color: transparent; background: transparent; border-radius: 9px; }
  .iconbtn:hover { background: var(--surface-2); }
  .rolesel select { border-color: transparent !important; background: var(--surface-2) !important; border-radius: 9px !important; height: 36px; }
  .btn { height: 40px; border-radius: 10px; font-weight: 550; background: var(--fg); color: var(--bg); }
  .btn:hover { background: color-mix(in srgb, var(--fg) 86%, var(--bg)); }
  .btn.sm { height: 34px; border-radius: 9px; font-size: 13px; padding: 0 12px; }
  /* one terracotta action per view (brand.md): the report — the thing to do now; everything else graphite or outlined (F35) */
  .btn.accent { background: var(--accent); color: var(--accent-fg); } .btn.accent:hover { background: var(--accent-hover); }
  .btn.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
  .btn.ghost:hover { background: var(--surface-2); }
  #go { background: var(--fg); color: var(--bg); }
  .card { box-shadow: none; border-radius: var(--radius); padding: 20px; margin-bottom: 12px; }
  .card h2, .signals h2 { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 10px; }
  h1.addr { font-size: 20px; font-weight: 650; }
  aside { background: var(--bg); padding: 16px; }
  [role="tablist"] { gap: 2px; margin: 8px 0 12px; }
  [role="tab"] { font-size: 13.5px; padding: 9px 12px; }
  [role="tab"][aria-selected="true"] { border-bottom-color: var(--fg); font-weight: 600; }
  /* hints: the "?" shows when you point at what it explains (and always for keyboard focus) */
  .tip { opacity: 0; width: 15px; height: 15px; font-size: 9.5px; transition: opacity .12s; }
  :is(td, th, span, div, label, h2, p, li, button, b):hover > .tip, .tip:focus-visible, .tip[aria-expanded="true"] { opacity: 1; }
  @media (hover: none) { .tip { opacity: .7; } }
  /* chips: neutral, the status is the dot */
  .chip { background: var(--surface); border-color: var(--line); color: var(--fg); padding: 3px 10px; }
  .chip:is(.ok, .warn, .bad, .lead) { background: var(--surface); border-color: var(--line); color: var(--fg); font-weight: 500; }
  .chip:is(.ok, .warn, .bad, .lead) .dot { display: none; }
  .chip:is(.ok, .warn, .bad, .lead)::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--muted); }
  .chip.ok::before { background: var(--ok); } .chip.warn::before { background: var(--warn); } .chip.bad::before { background: var(--bad); } .chip.lead::before { background: var(--accent); }
  /* result: light number block instead of a second dark slab */
  .sumnums .hero-main { background: var(--surface-2); color: var(--fg); border: 0; box-shadow: none; }
  .sumnums .hero-main small, .sumnums .hero-top > span:first-child { color: var(--muted); }
  .sumnums .hero-main .tip { color: var(--muted); border-color: var(--line); background: var(--surface); }
  .sumnums .hero-main > b { font-size: 32px; font-weight: 650; }
  .sumnums .hero-order { background: var(--surface); } .sumnums .herotiles .hero-main > b { font-size: 30px; }
  .confchip { font-size: 12px; padding: 3px 9px; font-weight: 550; background: var(--surface) !important; color: var(--fg) !important; border: 1px solid var(--line); }
  .confchip i { width: 7px; height: 7px; }
  .confchip.high i { background: var(--ok); } .confchip.medium i { background: var(--warn); } .confchip.low i { background: var(--bad); }
  .note-l { background: transparent; }
  .stats > div { background: var(--surface); }
  .edgegrid > div { border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }
  /* map chrome */
  .maphint { background: rgb(255 255 255 / .92); color: #1c1917; box-shadow: 0 1px 3px rgb(0 0 0 / .12); font-weight: 500; }
  .map-ctl { border: 1px solid var(--line); box-shadow: 0 2px 8px rgb(0 0 0 / .08); border-radius: 10px; }
  .mapsize { border-radius: 9px; box-shadow: 0 2px 8px rgb(0 0 0 / .08); }
  .zoombar button { border-radius: 8px; background: var(--surface); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zoomview.small { background: #E4DFD8; } }
  :root[data-theme="dark"] .zoomview.small { background: #E4DFD8; }

  /* targets of at least 24 × 24 px (WCAG 2.5.8): summaries, selects and number fields that were 18–23 px */
  :where(summary, select, input.onum) { min-height: 24px; }      /* :where — the touch-screen 40 px rule above still wins */
  /* skip link: first stop for the keyboard, visible only when focused */
  .skip { position: absolute; left: 8px; top: -60px; z-index: 2000; padding: 10px 14px; border-radius: 10px; background: var(--accent);
          color: var(--accent-fg); font-weight: 600; text-decoration: none; }
  .skip:focus { top: 8px; }
  .edgelist { margin-top: 8px; font-size: 13px; } .edgelist summary { cursor: pointer; color: var(--muted); }
  .edgelist table { margin-top: 6px; width: 100%; }
  .attr { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
  .hoff { color: var(--ok); font-weight: 600; }