/* Generated by website/scripts/demo-from-app.mjs from the Cubestead app's export (website/demo-source/fernhill-site.json): the app's card stylesheet, then where a card sits on a site page. Fernhill Tower and every record in it are invented. Do not edit: export from the app and generate again. */
/* Cubestead app stylesheet for the demo replay: the rules these screens use, from app/static/app.css.
   Generated by scripts/export_demo_replay.py. .cs-app stands for the app's html and body; data-scheme on it
   (light or dark) overrides the system setting. Do not edit: export again. */
:where(a[data-link]) { text-decoration: underline; }
.cs-app { --bg: #F0F7F8; --surface: #FFFFFF; --ink: #101619; --muted: #455B63; --line: #C1D5DB; --ui-line: #51676E; --brand: #006C85; --brand-2: #004C60; --brand-ink: #FFFFFF; --focus: #0F8AA6; --teal: #1CA9C9; --teal-soft: #79D9EB; --panel: #141719; --panel-raised: #252C2F; --panel-line: #2E373B; --panel-ink: #FFFFFF; --panel-muted: #A9BCC3; --ok: #17784A; --ok-bg: #E7F5EE; --warn: #9A5B00; --warn-bg: #FFF4E0; --bad: #B42318; --bad-bg: #FDECEA; --water: #1565C0; --gas: #D35400; --electric: #B7791F; --fire: #C62828; --radius: 14px; --shadow: 0 1px 2px rgba(16,22,25,.06), 0 4px 16px rgba(16,22,25,.05); --tabbar: 64px; --side: 256px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  .cs-app:where(:not([data-scheme="light"])) { --bg: #0A0B0E; --surface: #141719; --ink: #EEF6F8; --muted: #A9BCC3; --line: #2E373B; --ui-line: #6F8790; --brand: #1CA9C9; --brand-2: #79D9EB; --brand-ink: #0A0B0E; --focus: #79D9EB; --panel: #0F1113; --panel-raised: #1E2427; --ok: #4ACB8A; --ok-bg: #0F2A1E; --warn: #F2B75B; --warn-bg: #2E2210; --bad: #FF7A6E; --bad-bg: #3A1512; --water: #5AA2F0; --gas: #FF8A3D; --electric: #F2C14E; --fire: #FF6B6B; --shadow: none; color-scheme: dark; }
}
.cs-app:where([data-scheme="dark"]) { --bg: #0A0B0E; --surface: #141719; --ink: #EEF6F8; --muted: #A9BCC3; --line: #2E373B; --ui-line: #6F8790; --brand: #1CA9C9; --brand-2: #79D9EB; --brand-ink: #0A0B0E; --focus: #79D9EB; --panel: #0F1113; --panel-raised: #1E2427; --ok: #4ACB8A; --ok-bg: #0F2A1E; --warn: #F2B75B; --warn-bg: #2E2210; --bad: #FF7A6E; --bad-bg: #3A1512; --water: #5AA2F0; --gas: #FF8A3D; --electric: #F2C14E; --fire: #FF6B6B; --shadow: none; color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.cs-app { -webkit-text-size-adjust: 100%; }
.cs-app { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; padding-bottom: calc(var(--tabbar) + var(--rp-safe-bottom, 0px) + 16px); }
a { color: var(--brand); }
h2 { font-size: 1.1rem; margin: 0 0 .6em; }
p { margin: 0 0 .8em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 12px 16px 24px; }
.cs-app { padding-bottom: calc(24px + var(--rp-safe-bottom, 0px)); }
.ic { width: 24px; height: 24px; flex: none; }
.ic.sm { width: 18px; height: 18px; vertical-align: -3px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: 12px; border: 1.5px solid var(--ui-line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--muted); }
.btn.block { display: flex; width: 100%; }
.btn.call { background: var(--ok); border-color: var(--ok); color: #fff; margin: 14px 0; font-size: 1.05rem; }
.warnbtn { color: var(--warn); list-style: none; }
.warnbtn::-webkit-details-marker { display: none; }
.fbrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.fbrow details { flex: 1; min-width: 200px; }
.fbrow summary { width: 100%; }
.shutoff { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--muted); border-radius: var(--radius); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.shutoff b { font-size: 1.12rem; }
.shutoff .loc { font-weight: 600; display: flex; gap: 6px; align-items: flex-start; }
.shutoff-kind { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.k-gas { border-left-color: var(--gas); }
.badge { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 3px 10px; border-radius: 99px; font-size: .8rem; font-weight: 700; background: var(--bg); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.ans { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 14px; box-shadow: var(--shadow); min-width: 0; overflow-wrap: anywhere; }
.ans-ctx { margin: 0 0 2px; color: var(--muted); font-size: .85rem; }
.ans-title { margin: 0 0 14px; font-size: 1.25rem; line-height: 1.3; }
.ans-steps { list-style: none; margin: 0; padding: 0; counter-reset: ans; }
.ans-step { counter-increment: ans; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.ans-step:first-child { border-top: 0; padding-top: 0; }
.ans-step::before { content: counter(ans); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); font-weight: 700; font-size: .85rem; }
.ans-step p { margin: 0; }
.ans-where { font-weight: 700; }
.valves { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.valve { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.valve b { display: block; font-size: 1.35rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.valve span { color: var(--muted); font-size: .85rem; }
.ans-note { margin: 6px 0 0; font-size: .9rem; color: var(--ink); }
.ans-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: center; margin-top: 12px; color: var(--muted); font-size: .85rem; }
.ans-foot a { font-weight: 600; }
.ans-src summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; list-style: none; }
.ans-src summary::-webkit-details-marker { display: none; }
.ans-src ul { margin: 4px 0 0; padding-left: 1.1em; }
.ans-assets { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ans-quotes { margin: 0; }
.ans-doc { margin: 12px 0 4px; color: var(--muted); font-size: .85rem; font-weight: 600; }
.ans-doc:first-child { margin-top: 0; }
.ans-quote { margin: 0 0 8px; line-height: 1.5; }
.ans-src li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.ans-src li a { font-weight: 600; }
.ans-src .pagelink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.cs-app { --shadow: none; --bubble: color-mix(in srgb, var(--brand) 11%, var(--surface)); }
@media (prefers-color-scheme: dark) {
  .cs-app:where(:not([data-scheme="light"])) { --bubble: var(--panel-raised); }
}
.cs-app:where([data-scheme="dark"]) { --bubble: var(--panel-raised); }
.cs-app.has-composer { padding-bottom: calc(var(--composer-h, 60px) + 36px + var(--rp-safe-bottom, 0px)); }
.cs-app.has-composer { scroll-padding-bottom: calc(var(--composer-h, 60px) + 36px + var(--rp-safe-bottom, 0px)); }
.ans-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; }
.ans-actions .fbrow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-left: auto; }
.ans-actions .fbrow details { flex: none; min-width: 0; }
.ans-actions .fbrow summary { width: auto; }
.ans-actions .fb-q { line-height: 44px; }
.ans-actions .fbrow details[open] { flex-basis: 100%; }
.icon-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
details.fb-wrong > summary { list-style: none; }
details.fb-wrong > summary::-webkit-details-marker { display: none; }
.btn.call { flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
.nowrap { white-space: nowrap; }
.hazard-line { margin: 0 0 12px; font-weight: 600; color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :where(.cs-app:not([data-scheme="light"])) .btn.call:not(.pill-call) { color: #0A0B0E; }
}
:where(.cs-app[data-scheme="dark"]) .btn.call:not(.pill-call) { color: #0A0B0E; }
.cs-app[data-buildings-ui] .ask-status:not(:empty) { margin: 8px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--surface); text-align: center; }
.hazard-line { display: flex; gap: 8px; align-items: flex-start; min-width: 0; overflow-wrap: anywhere; }
.hazard-line .ic { flex: none; margin-top: 3px; color: var(--bad); }
.ans-actions { min-width: 0; overflow-wrap: anywhere; }
.ans-foot > span a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.ans-cards { margin: 14px 0 0; padding-top: 2px; border-top: 1px solid var(--line); }
.ans-cards > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; font-weight: 600; list-style: none; }
.ans-cards > summary::-webkit-details-marker { display: none; }
.ans-cards > summary::after, .ans-src > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -4px 0 0 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.ans-cards[open] > summary::after, .ans-src[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.ans-cards[open] > .ans-assets { margin-bottom: 6px; }
a.tel { font-weight: 700; white-space: nowrap; }
.ans-actions .fbrow, .ans-actions .fbrow details { max-width: 100%; }
.ans-actions .fbrow details { flex: 0 1 auto; }
.ans-actions .fbrow summary { white-space: normal; }
.btn.call span:not(.nowrap), .call-btn span:not(.nowrap) { min-width: 0; overflow-wrap: anywhere; }
.btn.call { max-width: 100%; }
.meta, .meta.ans-ctx, .meta.shutoff-kind { margin: 0 0 2px; color: var(--muted); font-size: .85rem; font-weight: 400; line-height: 1.4; text-transform: none; letter-spacing: normal; min-width: 0; overflow-wrap: anywhere; }
.ans-step .ans-at { margin-top: 10px; }
.call-btn, .btn.block.call.call-btn { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: 8px; row-gap: 0; width: fit-content; max-width: 100%; min-height: 48px; margin: 14px 0; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--ok); color: #FFFFFF; font-weight: 700; font-size: .95rem; line-height: 1.3; text-align: center; text-decoration: none; }
.call-btn .ic { vertical-align: middle; margin: -3px 4px 0 0; }
.call-btn:hover, .btn.block.call.call-btn:hover { background: color-mix(in srgb, var(--ok) 88%, #000000); }
@media (prefers-color-scheme: dark) {
  :where(.cs-app:not([data-scheme="light"])) .call-btn, :where(.cs-app:not([data-scheme="light"])) .btn.block.call.call-btn { color: #0A0B0E; }
}
:where(.cs-app[data-scheme="dark"]) .call-btn, :where(.cs-app[data-scheme="dark"]) .btn.block.call.call-btn { color: #0A0B0E; }
@media (prefers-color-scheme: dark) {
  :where(.cs-app:not([data-scheme="light"])) .call-btn:hover, :where(.cs-app:not([data-scheme="light"])) .btn.block.call.call-btn:hover { background: color-mix(in srgb, var(--ok) 88%, #FFFFFF); }
}
:where(.cs-app[data-scheme="dark"]) .call-btn:hover, :where(.cs-app[data-scheme="dark"]) .btn.block.call.call-btn:hover { background: color-mix(in srgb, var(--ok) 88%, #FFFFFF); }
.ans-actions .call-btn, .ans-actions .btn.block.call.call-btn { margin: 0; }
.call-others { min-width: 0; max-width: 100%; }
.call-others > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; list-style: none; }
.call-others > summary::-webkit-details-marker { display: none; }
.call-others > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -4px 0 0 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.call-others[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.call-others ul { list-style: none; margin: 0 0 4px; padding: 0; }
.call-others li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: 44px; padding: 4px 0; border-top: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; }
.call-others li a.tel { display: inline-flex; align-items: center; min-height: 44px; }
.ans-actions .call-others { flex-basis: 100%; }
.vc-sheet .call-others { margin-top: 6px; }
.verified-badge, .badge.ok.verified-badge { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; max-width: 100%; padding: 3px 10px; border: 0; border-radius: 99px; background: var(--ok-bg); color: var(--ok); font-size: .8rem; font-weight: 700; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
dialog.vc-sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 520px; max-height: calc(100% - 24px); margin: 0 auto; padding: 0; border: 0; border-radius: 22px 22px 0 0; background: var(--surface); color: var(--ink); overflow: auto; overscroll-behavior: contain; box-shadow: 0 -18px 40px -18px rgba(0, 0, 0, .55); }
.vc-sheet-backdrop { background: rgb(8 18 24 / .48); }
dialog.vc-sheet[open] { animation: vc-up .22s ease-out; }
dialog.vc-sheet.vc-settle { transition: transform .18s ease-out; }
@keyframes vc-up { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  dialog.vc-sheet[open] { animation: none; }
  dialog.vc-sheet.vc-settle { transition: none; }
}
.cs-app.vc-open { overflow: hidden; }
.vc-body { padding: 0 18px calc(18px + var(--rp-safe-bottom, 0px)); min-width: 0; overflow-wrap: anywhere; }
.vc-top { position: sticky; top: 0; z-index: 1; padding-top: 8px; background: var(--surface); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.vc-grab { display: block; width: 42px; height: 5px; margin: 2px auto 10px; border-radius: 99px; background: var(--ui-line); }
.vc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vc-title { margin: 0; min-width: 0; font-size: 1.6rem; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
.vc-title:focus { outline: none; }
.vc-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font: inherit; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.vc-close:hover { background: var(--bg); color: var(--ink); }
.vc-first { margin: 10px 0 4px; padding: 8px 12px; border-left: 4px solid var(--warn); border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: .98rem; font-weight: 700; line-height: 1.4; }
.vc-step { margin: 12px 0 0; color: var(--muted); font-size: .85rem; font-weight: 800; line-height: 1.3; }
.vc-list { list-style: none; margin: 4px 0 0; padding: 0; }
.vc-step + .vc-list { margin-top: 0; }
.vc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.vc-what { display: grid; flex: 1 1 8rem; justify-items: start; gap: 2px; min-width: 0; }
.vc-label { font-size: 1.08rem; font-weight: 800; line-height: 1.3; }
.vc-units { color: var(--muted); font-size: .85rem; line-height: 1.35; }
.vc-tags { display: flex; flex: none; flex-wrap: wrap; gap: 7px; max-width: 100%; }
.vc-tag { display: grid; place-content: center; min-width: 54px; min-height: 56px; padding: 4px 6px; border-radius: 13px; text-align: center; background: #455B63; color: #FFFFFF; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.vc-tag b { font-size: 1.5rem; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vc-tag small { margin-top: 3px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.vc-tag.cold_supply { background: #1559B7; }
.vc-tag.hot_supply { background: #C62828; }
.vc-tag.hot_return { background: #B45309; }
.vc-loc { flex-wrap: nowrap; justify-content: flex-start; border-bottom: 0; font-size: 1rem; font-weight: 600; }
.vc-loc .ic { flex: none; width: 22px; height: 22px; color: var(--brand); }
.vc-note { margin: 8px 0 0; font-size: .9rem; }
.vc-sheet .call-btn, .vc-sheet .btn.block.call.call-btn { width: 100%; min-height: 54px; margin: 12px 0 0; font-size: 1.05rem; }
.vc-call { position: sticky; bottom: 0; z-index: 1; margin: 12px -18px 0; padding: 10px 18px calc(10px + var(--rp-safe-bottom, 0px)); background: var(--surface); box-shadow: 0 -1px 0 var(--line); }
.vc-sheet .vc-call .call-btn, .vc-sheet .vc-call .btn.block.call.call-btn { margin: 0; }
.vc-read { margin: 10px 0 0; color: var(--muted); font-size: .8rem; }
.vc-src { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 0; color: var(--muted); font-size: .8rem; }
.vc-view { flex: none; min-width: 44px; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--brand); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ---------- Where the app's card sits on a site page (website/scripts/demo-from-app.mjs) ----------
   Everything above is the app's stylesheet, as exported. These rules only place the card: a crop of the app's screen
   with the card in it, the way the replay shows the whole screen. */
:host { display: block; min-width: 0; }
.cs-app { position: relative; padding: 0; overflow: hidden; border-radius: 16px; box-shadow: 0 0 0 1px rgb(16 22 25 / .12); }
.cs-app[data-ac="sheet"] { padding-top: 16px; }
.cs-app[data-ac="sheet"] > .vc-sheet-backdrop { position: absolute; inset: 0; }
.cs-app[data-ac="sheet"] > dialog.vc-sheet { position: relative; inset: auto; max-height: none; overflow: visible; }
:host(:not([data-animate])) dialog.vc-sheet[open] { animation: none; }  /* the demo keeps the app's slide-up as it draws a card */
.vc-top { position: static; cursor: auto; touch-action: auto; user-select: auto; -webkit-user-select: auto; }
.vc-close { display: none; }
a.vc-view { display: inline-flex; align-items: center; justify-content: center; }
[data-dial] { cursor: pointer; }
.ac-dial { flex-basis: 100%; margin: 10px 0 0; padding: 10px 14px; border-radius: 14px; background: var(--panel); color: var(--panel-ink); font-size: .9rem; line-height: 1.4; }
.ac-dial b { white-space: nowrap; }
.ac-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }