/* Fonts are self-hosted (assets/fonts, SIL Open Font License); the site requests nothing from third parties. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/barlow-latin-400-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; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/barlow-latin-500-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; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-latin-600-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; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-semi-condensed-latin-600-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; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-semi-condensed-latin-700-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; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-400-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; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-500-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; }

/* Layout: drafting table. The plan fills the workspace with its instruments floating on it and the
   results in a drawer beside it (a bottom sheet on smaller screens); the guide reads below. */
:root {
  --bg: #E7EAEE; --sheet: #FBFCFD; --panel: #F3F5F8; --ink: #1B222C; --muted: #5A6473; --line: #C8CFD8;
  --grid: #E1E6EC; --grid-strong: #C9D1DA; --accent: #2F43C4; --accent-soft: rgba(47, 67, 196, .12); --on-accent: #FFFFFF;
  --danger: #B42335; --shadow: 0 10px 30px rgba(20, 28, 40, .16); --shadow-float: 0 2px 10px rgba(20, 28, 40, .12);
  --m-tijolo: #9C4A2C; --m-concreto: #555D69; --m-gesso: #97A0AC; --m-madeira: #A26B22; --m-vidro: #2A8FBA; --m-metal: #1F242B;
  --m-muro: #6E5A4A; --m-grade: #3A8C7A;
  /* DORI zones, strongest detail first (identify, recognize, observe, detect), and critical points. */
  --d0: #4B33C9; --d1: #2B78E0; --d2: #2AA9C0; --d3: #9AD5C6;
  --ok: #1A8A4A; --bad: #C8303F;
  --font-display: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101419; --sheet: #171C23; --panel: #141920; --ink: #E5E9EF; --muted: #98A2B1; --line: #2C3440;
    --grid: #1F252E; --grid-strong: #2C3440; --accent: #8D9BFF; --accent-soft: rgba(141, 155, 255, .16); --on-accent: #10131A;
    --danger: #FF7A88; --shadow: 0 10px 30px rgba(0, 0, 0, .5); --shadow-float: 0 2px 12px rgba(0, 0, 0, .45);
    /* Brick stays terracotta but less saturated, so it never reads as the weak-signal orange. */
    --m-tijolo: #CF9A86; --m-concreto: #A7AEB9; --m-gesso: #717A87; --m-madeira: #D4A35A; --m-vidro: #6BC6EA; --m-metal: #E3E7ED;
    --m-muro: #BCA898; --m-grade: #6CC7B3;
    --d0: #9C88FF; --d1: #5EA2FF; --d2: #48CBDD; --d3: #A6E6D4;
    --ok: #2FBF6E; --bad: #FF6B7A;
    color-scheme: dark;
  }
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.wrap { max-width: 1440px; margin: 0 auto }
h1, h2, h3 { font-family: var(--font-display); margin: 0; text-wrap: balance; line-height: 1.15 }
p { margin: 0 }
a { color: var(--accent) }
img { max-width: 100% }
[hidden] { display: none !important }
.muted { color: var(--muted) }
.small { font-size: 13px }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
/* Keyboard-only shortcut to the planner: appears on the first Tab, below the header, over nothing. */
.skip { position: absolute; left: -999px; top: 64px; z-index: 50; background: var(--sheet); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 12px; font-weight: 500; box-shadow: var(--shadow) }
.skip:focus { left: 16px }

button, select, input, textarea { font: inherit; color: inherit }
button {
  cursor: pointer; border: 1px solid var(--line); background: var(--sheet); border-radius: 6px; padding: 7px 11px; font-weight: 500;
}
button:hover { border-color: var(--muted) }
button:disabled { opacity: .6; cursor: progress }
button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent) }
button.ghost { background: transparent }
button.danger, .menu-list .danger { color: var(--danger) }
button.primary.danger { background: var(--danger); border-color: var(--danger); color: var(--sheet) }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
select, input[type=number], input[type=text], textarea {
  background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; width: 100%;
}
input[type=range], input[type=checkbox] { accent-color: var(--accent) }
input[type=range] { width: 100% }
.btnrow { display: flex; flex-wrap: wrap; gap: 6px }
.check { display: flex; align-items: center; gap: 7px; font-size: 14px }
.hint { font-size: 13px; color: var(--muted) }

/* header */
.site { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-block: 14px 6px }
.logo { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); text-decoration: none }
.logo svg { width: 28px; height: 28px; flex: none }
details.menu { position: relative }
details.menu > summary { list-style: none; cursor: pointer; border: 1px solid var(--line); background: var(--sheet); border-radius: 6px; padding: 7px 11px; font-weight: 500 }
details.menu > summary::-webkit-details-marker { display: none }
details.menu > summary .ic-sm { width: 14px; height: 14px; vertical-align: -2px; color: var(--muted); transform: rotate(90deg) }
details.menu[open] > summary .ic-sm { transform: rotate(-90deg) }
.menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 190px; display: flex; flex-direction: column; padding: 4px;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow) }
.menu-list button { border: 0; background: transparent; text-align: left; padding: 8px 10px }
.menu-list button:hover { background: var(--accent-soft) }
.menu-list hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0 }
.menu-list .menu-new { display: none }

/* workspace: one screen tall, plan first */
.ws { height: calc(100svh - var(--hdr, 64px)); min-height: 520px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding-bottom: 12px }
.ws-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0 }
.ws-top h1 { font-size: 21px; font-weight: 700; margin-right: auto; min-width: 0 }
.example-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; background: var(--accent-soft); border-radius: 999px; padding: 3px 4px 3px 12px }
.example-chip button { border-radius: 999px; padding: 4px 12px }
.ws-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; min-height: 0 }
.ws.drawer-closed .ws-body { grid-template-columns: minmax(0, 1fr) }
.ws-map { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: 8px }
.sheet { position: absolute; inset: 0; z-index: 1 }
canvas { display: block; touch-action: none; cursor: crosshair }
#cv:focus-visible { outline-offset: -3px }
#labelInput { position: absolute; width: 150px; padding: 3px 6px; font-size: 13px; z-index: 6 }
.noscript { padding: 16px }

/* instruments floating on the plan */
.fl { position: absolute; z-index: 3 }
.fl-top { top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; pointer-events: none }
.fl-top > * { pointer-events: auto }
.ws.drawer-closed .fl-top { right: 220px }
.floors { display: flex; flex-wrap: wrap; gap: 4px; background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; padding: 3px; box-shadow: var(--shadow-float) }
.floors button { padding: 4px 10px; font-size: 14px; border-color: transparent; background: transparent }
.floors button[aria-pressed="true"] { background: var(--ink); color: var(--sheet) }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--sheet); box-shadow: var(--shadow-float) }
.seg button { border: 0; border-radius: 0; padding: 7px 13px; background: transparent; font-family: var(--font-mono); font-size: 13px }
.seg button + button { border-left: 1px solid var(--line) }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--sheet) }
.seg button:focus-visible, .btngroup button:focus-visible { outline-offset: -3px }
.seg button.nodev:not([aria-pressed="true"]) { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px }
.fl-chip { background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; box-shadow: var(--shadow-float) }

.toolbar { top: calc(var(--flt-h, 40px) + 20px); left: 10px; width: 84px; display: flex; flex-direction: column; gap: 2px; padding: 4px;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-float) }
.toolbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; border-color: transparent; background: transparent;
  font-size: 12px; line-height: 1.15; text-align: center; border-radius: 6px }
.toolbar button { position: relative }
.toolbar button span { max-width: 100%; overflow-wrap: anywhere }
.toolbar kbd { position: absolute; top: 3px; right: 4px; font-family: var(--font-mono); font-size: 10px; line-height: 1; color: var(--muted) }
.toolbar button[aria-pressed="true"] kbd { color: inherit; opacity: .7 }
.lbl-short { display: none }
.toolbar button:hover { background: var(--accent-soft); border-color: transparent }
.toolbar button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); font-weight: 600 }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round }
.icons { position: absolute; width: 0; height: 0; overflow: hidden }

.tool-opts { top: 10px; left: var(--opt-left, 360px); max-width: calc(100% - var(--opt-left, 360px) - 10px); background: var(--sheet); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 10px; min-height: 36px; display: flex; align-items: center; box-shadow: var(--shadow-float) }
.ws.drawer-closed .tool-opts { max-width: calc(100% - var(--opt-left, 360px) - 230px) }
.tool-opts .opts { flex-wrap: wrap; white-space: nowrap }
.tool-opts select { min-width: 150px; flex: 0 1 auto }
.opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0 }
.opts select { width: auto; max-width: 240px; padding-block: 4px }
.opt-label { font-size: 13px; color: var(--muted) }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; font-size: 13px; text-align: left; width: fit-content }

.fl-read { left: 106px; bottom: 10px; max-width: min(620px, calc(100% - 360px)); display: flex; flex-direction: column; gap: 2px;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; box-shadow: var(--shadow-float); pointer-events: none }
.readout { font-size: 13px; color: var(--muted); min-width: 0 }
.readout .mono { font-size: 12.5px; font-variant-numeric: tabular-nums }
.readout b { color: var(--ink); font-weight: 600 }
.fl-read .hint { font-size: 12.5px }
.fl-view { right: 10px; bottom: 10px; display: flex; gap: 6px }
.btngroup { display: flex; background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-float); overflow: hidden }
.btngroup button { border: 0; border-radius: 0; background: transparent; padding: 7px 9px; display: grid; place-items: center }
.btngroup button + button { border-left: 1px solid var(--line) }
.btngroup button:hover { background: var(--accent-soft) }
.btngroup button:disabled { opacity: .35; cursor: default }
.hud { top: 10px; right: 10px; display: flex; align-items: center; gap: 8px; background: var(--sheet); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 8px 6px 12px; box-shadow: var(--shadow-float); font-size: 14px }
.hud > .ic { transform: rotate(180deg); width: 18px; height: 18px }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; margin-right: 7px; vertical-align: 1px; flex: none }
/* Verdict status: an icon in interface colors, so signal colors stay on the signal. */
.st-ic { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; stroke-width: 2.2 }
.v-status .st-ic { width: 22px; height: 22px; margin-right: 8px; vertical-align: 0 }
.st-ok { color: var(--accent) }
.st-warn { color: var(--ink) }
.st-bad { color: var(--danger) }
.logo .logo-accent { fill: var(--accent) }
.logo .logo-arc { stroke: var(--accent) }
.hud-sum b, .dh-sum b { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums }

/* popover next to the selected object */
.pop { position: absolute; z-index: 5; width: 300px; max-height: calc(100% - 20px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow) }
.pop.away { visibility: hidden }
.pop-head { display: flex; align-items: center; gap: 8px }
.pop-head h2 { font-size: 16px; font-weight: 700; margin-right: auto }
.pop-x { border: 0; background: transparent; padding: 4px; margin: -4px -6px -4px 0; display: grid; place-items: center }
.pop-x .ic { width: 18px; height: 18px }
.pop-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.pop select, .pop input[type=text], .pop input[type=number] { width: 100% }
.pop .btnrow input { flex: 1 1 80px; width: auto }
.pop .pending { font-size: 13px; font-weight: 500; background: var(--accent-soft); border-radius: 6px; padding: 6px 8px }
.mono { font-family: var(--font-mono); font-weight: 500 }
.field-label { font-size: 13px; color: var(--muted) }
/* File picker: the native control speaks the browser's language, so a styled label replaces it. */
.filebtn { display: inline-block; cursor: pointer; border: 1px solid var(--line); background: var(--sheet); border-radius: 6px; padding: 7px 11px; font-weight: 500 }
.filebtn:hover { border-color: var(--muted) }
/* The hidden input stays inside the button, so focusing it never scrolls the page elsewhere. */
.filepick { position: relative; width: fit-content }
.filepick .sr { left: 0; top: 0 }
#bgFile:focus-visible + .filebtn { outline: 2px solid var(--accent); outline-offset: 2px }
.field-row { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--muted) }

/* results drawer */
.drawer { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden }
.ws.drawer-closed .drawer { display: none }
.drawer-head { flex: none; border-bottom: 1px solid var(--line) }
.drawer-toggle { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 0; background: transparent; padding: 10px 12px 10px 14px; text-align: left }
.drawer-toggle:hover { background: var(--accent-soft) }
.dh-title { font-family: var(--font-display); font-weight: 700; font-size: 17px }
.dh-sum { margin-left: auto; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px; display: flex; flex-direction: column; gap: 12px }
.group { display: flex; flex-direction: column; gap: 7px }
.legend { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink) }
.legend span { display: inline-flex; align-items: center; gap: 6px }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none }
.foot { font-size: 12.5px; color: var(--muted) }
/* Drawer footer: sharing and the model notes, quieter than the result cards. */
.drawer-foot { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 2px; border-top: 1px solid var(--line); padding-top: 12px }
.share-row { display: flex; flex-direction: column; gap: 6px }
.card p, .drawer-foot p, .pop p { text-wrap: pretty }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.card-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end }
.btn-sm { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; font-size: 13px; color: var(--muted) }
.btn-sm:hover { color: var(--ink) }
.btn-sm .ic { width: 16px; height: 16px }
.zoom-pct { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 36px }
details.about summary { cursor: pointer; font-weight: 600; font-size: 14px }
details.about[open] summary { margin-bottom: 8px }
details.about .foot { margin-top: 8px }

/* Empty plan: an invitation on the sheet itself. */
.invite { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100% - 32px));
  display: flex; flex-direction: column; gap: 10px; padding: 18px; text-align: left; background: var(--sheet); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow) }
.invite h2 { font-size: 20px; font-weight: 700 }
.ws-map.dropping { outline: 2px dashed var(--accent); outline-offset: -6px }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.card h2 { font-size: 17px; font-weight: 700 }
.big { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums }
.big small { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 6px }
.bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--grid) }
.progress { height: 6px; border-radius: 999px; overflow: hidden; background: var(--grid) }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .12s linear }
.rows { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px }
.r { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: center }
.r .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums }
.r em { font-style: normal; color: var(--muted); font-size: 12.5px }
.bands3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center }
.bands3 > button { display: flex; flex-direction: column; align-items: center; gap: 1px; background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; padding: 6px 4px }
.bands3 > button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink) }
.bands3 .v { font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums }
.bands3 .l { font-size: 11.5px; color: var(--muted) }
.verdict .v-status { display: flex; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.15 }
.v-dl { margin: 0; display: flex; flex-direction: column; gap: 1px }
.v-dl dt { font-size: 13px; color: var(--muted) }
.v-dl dd { margin: 0; font-weight: 600 }
.v-dl dd.small, .v-dl dd.v-onplan { font-weight: 400 }
.v-dl dt + dd + dt, .v-dl dd + dd + dt { margin-top: 6px }
.v-dl dd.v-onplan { color: var(--muted) }
.v-bands { display: flex; flex-direction: column; gap: 5px }
.link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; font-size: 13.5px; align-items: baseline }
.link .full { grid-column: 1 / -1 }
.link button { justify-self: start }
.pill { font-family: var(--font-mono); font-size: 12px; border-radius: 999px; padding: 1px 8px; white-space: nowrap; color: var(--ink); background: var(--sheet); border: 1px solid var(--line) }
.pill .dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 6px; vertical-align: 1px }
.warn { color: var(--danger) }
/* Results: uncovered points, warnings, storage rows and the shopping list. */
.pt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px }
.pt-row { width: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; align-items: start; text-align: left;
  border: 0; background: transparent; padding: 5px 6px; border-radius: 6px; font-weight: 400; font-size: 13.5px; line-height: 1.35 }
.pt-row:hover { background: var(--accent-soft) }
.pt-row b { font-weight: 600 }
.pt-x { color: var(--bad); font-weight: 700; text-align: center }
.note-warn { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; align-items: start }
.note-warn .ic { width: 18px; height: 18px; color: var(--danger) }
.card .linkbtn { font-size: inherit }
.r2 { grid-template-columns: minmax(0, 1fr) auto }
.shop { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 4px; font-size: 14px }
.shop b { font-family: var(--font-mono); font-weight: 500 }
.sw-pt { transform: rotate(45deg) scale(.8) }
.sw-ir { border: 1.5px dashed var(--ink); background: transparent }
.dori-line { font-family: var(--font-mono); font-size: 12px; line-height: 1.45 }
.pop .fields { gap: 6px 8px }
.pop .fields label { font-size: 12.5px }
.pop .fields select, .pop .fields input { padding-block: 4px }
.card .fields select, .card .fields input { padding-block: 4px }
.pill-wire { background: var(--grid); color: var(--ink) }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.fields label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--muted) }
textarea { min-height: 110px; font-family: var(--font-mono); font-size: 12px; resize: vertical }


/* guide */
.guide { max-width: 720px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 14px; font-size: 16.5px; line-height: 1.65 }
.guide h2 { font-size: 26px; font-weight: 700; margin-top: 22px }
.guide .lead { font-size: 18px; color: var(--muted) }
.guide p, .guide li, .faq summary { text-wrap: pretty }
.guide p, .guide li, .faq details p { max-width: 36em } /* about 75 characters of Barlow; tables keep the full column */
.guide h3 { font-size: 19px; font-weight: 600; margin-top: 6px }
.guide ol, .guide ul { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet) }
table { border-collapse: collapse; width: 100%; font-size: 14.5px }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top }
tr:last-child td { border-bottom: 0 }
th { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted) }
th.num { text-transform: none; letter-spacing: .02em }
.balance { text-wrap: balance }
td.num, th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap }
td.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap }
td .sw { vertical-align: -1px; margin-right: 8px }
td:has(> .sw) { white-space: nowrap }
.faq details { border-bottom: 1px solid var(--line); padding: 10px 0 }
.faq summary { cursor: pointer; font-weight: 600 }
.faq details p { margin-top: 8px }

/* guide pages: breadcrumb, the direct answer, the call to the planner and related links */
.guide section, .guide .answer { display: flex; flex-direction: column; gap: 14px }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-flow: row wrap; gap: 2px 0; font-size: 14px; color: var(--muted) }
.guide .crumbs li { max-width: none }
.crumbs li + li::before { content: "›"; margin: 0 8px }
.crumbs a { color: var(--muted); text-decoration: none }
.crumbs a:hover { color: var(--ink); text-decoration: underline }
.guide .dateline { font-size: 14px; color: var(--muted); margin-top: -6px }
.guide .answer { font-size: 18px; line-height: 1.6 }
.guide .formula { font-family: var(--font-mono); font-size: 14.5px; line-height: 1.6; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; max-width: none }
.cta { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; margin-top: 6px }
.guide .cta h2 { font-size: 20px; margin: 0 }
.cta p { font-size: 15.5px }
.cta .cta-actions { display: flex; flex-wrap: wrap; gap: 8px }
.cta .cta-note { font-size: 14px; color: var(--muted) }
a.btn { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); font-weight: 500; text-decoration: none }
a.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
a.btn:hover { border-color: var(--muted) }
a.btn.primary:hover { border-color: var(--accent); filter: brightness(1.08) }
.related ul { list-style: none; padding: 0 }
.guide-list { list-style: none; padding: 0 !important; gap: 0 !important }
.guide-list li { padding: 16px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; max-width: none }
.guide-list li:first-child { border-top: 1px solid var(--line) }
.guide .guide-list h2 { font-size: 22px; margin: 0 }
.guide-list a { color: var(--ink); text-decoration: none }
.guide-list a:hover { color: var(--accent); text-decoration: underline }
.guide-list p { color: var(--muted) }
.guide .home-guides { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px }
.guide .home-guides li { max-width: none }
.home-guides a { display: block; height: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-weight: 500; text-decoration: none }
.home-guides a:hover { border-color: var(--accent); color: var(--accent) }

.site-foot { margin-top: 56px; padding-block: 20px 32px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; color: var(--muted) }
.site-foot a, .site-foot .linkbtn { color: var(--muted) }
/* Back to the planner: only while the workspace is off screen (reading the guide or FAQ). */
.has-ws .site-foot { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) } /* room for the button below the last links */
.totop { position: fixed; z-index: 30; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 14px 8px 10px; box-shadow: var(--shadow-float) }

/* dialogs, banner, toast */
dialog { border: 1px solid var(--line); border-radius: 10px; padding: 0; background: var(--sheet); color: var(--ink); box-shadow: var(--shadow); width: min(460px, calc(100vw - 32px)) }
dialog::backdrop { background: rgba(10, 14, 20, .45) }
.dlg { padding: 18px; display: flex; flex-direction: column; gap: 12px }
.dlg h2 { font-size: 20px }
.dlg .field { display: flex; flex-direction: column; gap: 4px; font-size: 14px }
.dlg .end { flex-direction: row-reverse; justify-content: flex-start }
.dlg fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px; margin: 0 }
.dlg legend { font-weight: 600; padding: 0 4px }
#modelsDlg { width: min(560px, calc(100vw - 32px)) }
#planDlg { width: min(420px, calc(100vw - 32px)) }
.feedback-dlg { width: min(680px, calc(100vw - 32px)) }
.feedback-dlg iframe { width: 100%; height: min(68vh, 640px); border: 1px solid var(--line); border-radius: 8px; background: var(--sheet) }
#modelList { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px }
#modelList li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; padding: 8px 10px; border-bottom: 1px solid var(--line) }
#modelList li:last-child { border-bottom: 0 }
#modelList button { padding: 3px 8px; font-size: 13px }
.ml-name { display: flex; flex-direction: column; min-width: 0 }
.tag { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px }
.bandchecks { display: flex; flex-wrap: wrap; gap: 6px 14px }
.err { color: var(--danger); font-size: 13.5px; min-height: 1em }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 45; max-width: min(520px, calc(100vw - 32px));
  background: var(--ink); color: var(--sheet); padding: 10px 14px; border-radius: 8px; font-size: 14px; box-shadow: var(--shadow) }

/* site menu and language switcher */
.sitenav { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none }
.sitenav a, .navbtn { white-space: nowrap; color: var(--ink); text-decoration: none; font-weight: 500; padding: 6px 10px; border-radius: 6px; border: 0; background: transparent; font-size: 15px }
.sitenav a:hover, .navbtn:hover { background: var(--accent-soft) }
.navtoggle { display: none; align-items: center; gap: 6px; font-weight: 500 }
.navtoggle .ic-sm { width: 16px; height: 16px }
.langsw select { width: auto; font-weight: 500 }
.projbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0 }
.projbar select { width: auto; max-width: 240px; font-weight: 500 }
[id] { scroll-margin-top: 16px }
.guide.doc { margin-top: 16px }
.guide.doc h1 { font-size: 32px }

/* guided tour */
.tour { position: fixed; inset: 0; z-index: 60 }
.tour-spot { position: fixed; border-radius: 8px; box-shadow: 0 0 0 9999px rgba(8, 12, 18, .62); transition: all .25s ease; pointer-events: none }
.tour-card { position: fixed; background: var(--sheet); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 8px; outline: none }
.tour-card h2 { font-size: 20px }
.tour-count { font-family: var(--font-mono); font-size: 12px; color: var(--muted) }
.tour-actions { align-items: center; margin-top: 4px }
.tour-gap { flex: 1 }

/* Below 1100 px the results drawer becomes a sheet over the bottom of the plan. */
@media (max-width: 1099px) {
  .ws-body { grid-template-columns: minmax(0, 1fr) }
  .ws.drawer-closed .ws-body { grid-template-columns: minmax(0, 1fr) }
  .ws.drawer-closed .fl-top { right: 10px }
  .ws.drawer-closed .tool-opts { max-width: calc(100% - var(--opt-left, 360px) - 10px) }
  .drawer, .ws.drawer-closed .drawer { display: flex; position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; max-height: 72%;
    border-radius: 10px 10px 8px 8px; box-shadow: var(--shadow) }
  .ws.drawer-closed .drawer-body { display: none }
  .ws.drawer-closed .drawer-head { border-bottom: 0 }
  .drawer-toggle > .ic { transform: rotate(-90deg) }
  .drawer-toggle[aria-expanded="true"] > .ic { transform: rotate(90deg) }
  .fl-view, .fl-read { bottom: calc(var(--dh-h, 46px) + 10px) }
}
@media (min-width: 1100px) {
  .drawer-toggle > .ic { margin-left: 2px }
}
/* Phones: the plan goes edge to edge, the tool rail sits on the bottom edge. */
@media (max-width: 719px) {
  .ws { margin-inline: -16px; min-height: 460px; gap: 6px; padding-bottom: 0 }
  .ws-top { padding-inline: 16px; gap: 6px 8px }
  .ws-top h1 { font-size: 17px; flex-basis: 100% }
  .ws-map { border-radius: 0; border-inline: 0 }
  .fl-top { top: 8px; left: 8px; right: 8px; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none }
  .fl-top > * { flex: none }
  .floors { padding: 2px; flex-wrap: nowrap }
  .floors button { padding: 3px 6px; font-size: 13px; max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .example-chip { display: none }
  .seg button { padding: 6px 6px; font-size: 12px }
  .fl-chip { padding: 5px 6px; font-size: 13px; gap: 4px }
  .toolbar { top: auto; bottom: 0; left: 0; right: 0; width: auto; flex-direction: row; gap: 0; border-radius: 0; border-inline: 0; border-bottom: 0;
    padding: 3px 4px calc(3px + env(safe-area-inset-bottom, 0px)); box-shadow: none }
  .toolbar button { flex: 1 1 0; min-width: 0; font-size: 11px; padding: 6px 1px 5px }
  .toolbar button span { font-size: 11px; overflow-wrap: normal; letter-spacing: -.02em }
  .toolbar button[aria-pressed="true"] { font-weight: 500 }
  .drawer, .ws.drawer-closed .drawer { bottom: var(--tb-h, 56px); max-height: min(55%, calc(100% - var(--tb-h, 56px) - var(--flt-h, 36px) - 20px)); border-radius: 10px 10px 0 0; border-inline: 0 }
  .fl-view { right: 8px; bottom: calc(var(--tb-h, 56px) + var(--dh-h, 46px) + 8px) }
  .btngroup button { padding: 6px 8px }
  .toolbar kbd { display: none }
  /* Nine tools share the phone's width; naming places is the one left to larger screens. */
  .toolbar [data-tool=label] { display: none }
  .lbl-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
  .lbl-short { display: inline }
  .fl-read { left: 8px; right: 8px; top: calc(var(--flt-h, 36px) + 14px); bottom: auto; max-width: none; padding: 5px 8px }
  .readout { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden }
  .readout.is-hint { -webkit-line-clamp: 3 }
  .tool-opts .opts { flex-wrap: wrap }
  .tool-opts, .ws.drawer-closed .tool-opts { top: auto; left: 8px; right: 8px; max-width: none; bottom: calc(var(--tb-h, 56px) + var(--dh-h, 46px) + 52px) }
  .projbar select { max-width: 190px }
  #newProject { display: none }
  .menu-list .menu-new { display: block }
  .pop { left: 8px !important; right: 8px; top: auto !important; width: auto; bottom: calc(var(--tb-h, 56px) + var(--dh-h, 46px) + 8px); z-index: 6 }
  .toast { bottom: calc(128px + env(safe-area-inset-bottom, 0px)) }
  .sitenav { order: 3; flex-basis: 100%; flex-wrap: wrap; overflow: visible; gap: 0 2px }
  .site.has-toggle { padding-block: 10px 4px }
  .site.has-toggle .navtoggle { display: inline-flex; margin-left: auto; padding: 6px 10px }
  .site.has-toggle .sitenav { display: none }
  .site.has-toggle.nav-open .sitenav { display: flex }
  .site.has-toggle .langsw { display: none; order: 4 }
  .site.has-toggle.nav-open .langsw { display: block; margin-left: 0 }
  .sitenav a, .navbtn { padding: 5px 8px; font-size: 14px }
  .langsw { margin-left: auto }
  .guide { font-size: 16px }
}
/* Touch screens: controls used with a finger get at least 40px of height. */
@media (hover: none) {
  .floors button, .seg button, .btngroup button, .fl-chip, .pop-x, .btn-sm { min-height: 40px; min-width: 40px }
  .fl-chip { display: flex; align-items: center }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important } }