/* Example cards on home and /cubestead (October 22, 2026, Dylan: "make it the template we use"): the app's valve card,
   drawn inline as the answer card. One template for every card, in the app's order: the title, the first thing to do,
   one row per supply (label, the units it serves, valve tiles with the tag number above COLD, HOT or RETURN), where the
   valves are, the plain note lines (the app's ans-note: the safety and impact lines of the card on main, word for word),
   the call block (the green button and Other contacts; display only: invented numbers never dial), Source (a fold with
   the source text and View), the confirm line, then Wrong or missing. Tile colors, type scale and spacing follow the approved mockup; the card uses the app's own
   system font stack, so no font is added. Nothing on the card is under 12px or under 4.5:1. */
.bb-head .bb-label{margin:0;font-size:13px;font-weight:700;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:#33444a}
.bb-brand{gap:12px}
.bb-brand img.app-icon{width:36px;height:36px;border-radius:22.5%;box-shadow:0 0 0 1px rgba(23,34,38,.14),0 2px 6px rgba(23,34,38,.16)}
.vc{--vc-bg:#fff;--vc-ink:#13212a;--vc-muted:#47575f;--vc-line:#e2e8eb;--vc-edge:#d5dde1;--vc-accent:#0a6c88;
  --vc-first-bg:#fdf3e2;--vc-first-ink:#7a4400;--vc-first-bar:#d48a1a;--vc-stop-bg:#fdecea;--vc-stop-ink:#9b1c13;--vc-stop-bar:#c62828;
  --vc-cold:#1559b7;--vc-hot:#c62828;--vc-ret:#b45309;--vc-gas:#f2c230;--vc-date:#33444a;--vc-call:#17784a;
  container-type:inline-size;min-width:0;margin:0;padding:18px 18px 14px;border:1px solid var(--vc-edge);border-radius:22px;background:var(--vc-bg);color:var(--vc-ink);
  box-shadow:0 1px 2px rgba(19,33,42,.05),0 12px 28px -14px rgba(19,33,42,.28);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased}
.vc .vc-title{margin:0;font-family:inherit;font-size:26px;font-weight:800;line-height:1.12;letter-spacing:-.01em;color:var(--vc-ink)}
.vc-first{display:flex;gap:8px;align-items:flex-start;margin:12px 0 4px;padding:9px 12px;border-left:4px solid var(--vc-first-bar);border-radius:10px;
  background:var(--vc-first-bg);color:var(--vc-first-ink);font-size:16px;font-weight:700;line-height:1.4}
.vc-first--stop{border-left-color:var(--vc-stop-bar);background:var(--vc-stop-bg);color:var(--vc-stop-ink)}
.vc-first .ic{width:20px;height:20px;margin-top:1px;stroke-width:2}
.vc-first .ic .g{fill:currentColor}
.vc-list{list-style:none;margin:4px 0 0;padding:0}
.vc-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;padding:12px 0;border-bottom:1px solid var(--vc-line)}
.vc-what{display:grid;gap:2px;flex:1 1 140px;min-width:0}
.vc-label{font-size:17px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.vc-units{font-size:14px;line-height:1.4;color:var(--vc-muted);overflow-wrap:anywhere}
.vc-text{font-size:16px;font-weight:500;line-height:1.45;overflow-wrap:anywhere}
.vc-rule{flex-basis:100%;font-size:14px;font-weight:700;line-height:1.4;color:var(--vc-stop-ink)}
.vc-tags{display:flex;flex-wrap:wrap;gap:7px}
.vc-tag{display:grid;place-content:center;justify-items:center;min-width:56px;height:58px;padding:0 7px;border-radius:13px;background:var(--vc-date);color:#fff;
  text-align:center;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.vc-tag b{font-size:24px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.vc-tag small{margin-top:4px;font-size:12px;font-weight:700;line-height:1;letter-spacing:.06em;text-transform:uppercase}
.vc-tag.cold{background:var(--vc-cold)}
.vc-tag.hot{background:var(--vc-hot)}
.vc-tag.ret{background:var(--vc-ret)}
.vc-tag.gas{background:var(--vc-gas);color:#13212a}
.vc-loc{flex-wrap:nowrap;justify-content:flex-start;gap:12px;border-bottom:0;font-size:16px;font-weight:600;line-height:1.4}
.vc-loc .ic{width:22px;height:22px;color:var(--vc-accent);stroke-width:2.2}
/* A note line is the app's ans-note: plain ink text under the rows and the location, never a colored box. */
.vc-note{margin:6px 0 0;font-size:.9rem;line-height:1.45;color:var(--vc-ink);overflow-wrap:anywhere}
/* The call block (Dylan, October 22, 2026: in a leak the first tap does exactly what the button says). The green button
   is the first contact's own. In the app it dials; on the site it never dials and shows that number under it, with
   "Shown for the demo; it does not dial." "Other contacts (N)" is a quiet row that opens the rest. Both are native
   details: they work without script and from the keyboard; the site script adds aria-expanded and a polite announcement.
   No number shows while both are closed, and a number is plain text, never a link. */
.vc-note+.vc-call{margin-top:12px}
.vc-call{margin:6px 0 0}
.vc-call>summary{display:flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:8px 20px;border-radius:999px;
  background:var(--vc-call);color:#fff;line-height:1.25;text-align:center;cursor:pointer;list-style:none}
.vc-call>summary::-webkit-details-marker{display:none}
.vc-call>summary:hover{background:#13663f}
.vc-call>summary:focus-visible{outline:3px solid var(--vc-ink);outline-offset:3px}
.vc-call>summary .ic{flex:none;width:20px;height:20px;color:#fff;stroke-width:2.2}
.vc-call-text{min-width:0}
.vc-call-text b{display:block;font-size:17px;font-weight:800}
.vc-call-text small{display:block;margin-top:1px;font-size:14px;font-weight:600}
.vc-call-reveal{margin:8px 0 0;padding:10px 14px 12px;border:1px solid var(--vc-edge);border-radius:16px;background:var(--vc-bg);text-align:center}
.vc-call-reveal .vc-num{display:block;margin:0;font-size:24px;font-weight:800;line-height:1.25}
.vc-call-reveal .vc-call-note{margin:4px 0 0}
.vc-others{margin:4px 0 0}
.vc-others>summary{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 10px;border-radius:12px;
  font-size:15px;font-weight:700;color:var(--vc-accent);cursor:pointer;list-style:none}
.vc-others>summary::-webkit-details-marker{display:none}
.vc-others>summary:hover{color:var(--vc-ink)}
.vc-others>summary:focus-visible{outline:3px solid var(--vc-ink);outline-offset:2px}
.vc-others .vc-chev{width:16px;height:16px;color:inherit;stroke-width:2.2;transform:rotate(90deg);transition:transform .15s}
.vc-others[open] .vc-chev{transform:rotate(-90deg)}
.vc-call-list{list-style:none;margin:0;padding:2px 16px;border:1px solid var(--vc-edge);border-radius:16px;background:var(--vc-bg)}
.vc-call-list li{display:grid;gap:2px;padding:10px 0;border-bottom:1px solid var(--vc-line)}
.vc-call-list li:last-child{border-bottom:0}
.vc-who{font-size:15px;line-height:1.4;color:var(--vc-ink);overflow-wrap:anywhere}
.vc-who b{font-weight:800}
.vc-who small{margin-left:6px;font-size:14px;color:var(--vc-muted)}
.vc-num{font-size:17px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--vc-ink);text-decoration:none;white-space:nowrap}
.vc-call-note{margin:8px 2px 0;font-size:13px;line-height:1.4;color:var(--vc-muted)}
/* Source is a fold, like the app's (Dylan: "Source could just remain under view if that makes it cleaner"). It opens to
   the source text, word for word, and View. */
.vc-src{margin:8px 0 0;font-size:14px;line-height:1.4;color:var(--vc-muted)}
.vc-src>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px 0 2px;border-radius:6px;font-size:15px;font-weight:700;
  color:var(--vc-muted);cursor:pointer;list-style:none}
.vc-src>summary::-webkit-details-marker{display:none}
.vc-src>summary:hover{color:var(--vc-ink)}
.vc-src>summary:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.vc-src .vc-chev{width:16px;height:16px;color:inherit;stroke-width:2.2;transition:transform .15s}
.vc-src[open] .vc-chev{transform:rotate(90deg)}
.vc-src-body{display:flex;align-items:center;justify-content:space-between;gap:2px 14px;margin:0 0 4px 2px}
.vc-src-body>span{min-width:0}
@media (prefers-reduced-motion:reduce){.vc-chev{transition:none}}
.vc-view{display:inline-flex;align-items:center;flex:none;min-height:44px;padding:0 2px;color:var(--vc-accent);font-weight:700;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.vc-view:hover{color:var(--vc-ink)}
.vc-confirm{display:flex;gap:8px;align-items:flex-start;margin:4px 0 0;padding-top:12px;border-top:1px solid var(--vc-line);font-size:15px;font-weight:600;line-height:1.4}
.vc-confirm .ic{width:20px;height:20px;color:var(--vc-accent)}
.vc .bb-report{margin-top:12px}
.vc-view:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:4px}
.bb-report>summary{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid #6c7c81;border-radius:999px;background:#fff;color:var(--ink);
  font-size:15px;font-weight:600;cursor:pointer;list-style:none}
.bb-report>summary::-webkit-details-marker{display:none}
.bb-report[open]>summary{border-color:var(--green)}
.bb-report-body{margin-top:8px;padding:12px 14px;border-radius:10px;background:#e9eff0}
.bb-report-body p{font-size:15px;line-height:1.5}
.bb-report-title{font-weight:700}
.bb-report>summary:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.nowrap{white-space:nowrap}
/* A narrow card (a phone) puts each supply's tiles under its label, the same way on every row. */
@container (max-width:360px){.vc-row:not(.vc-row--date) .vc-what{flex-basis:100%}}
/* A dates row puts its date tile first, like a calendar badge, and keeps it beside the record line on a phone. */
.vc-row--date{flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start}
.vc-row--date .vc-tags{order:-1}
.vc-row--date .vc-what{flex:1 1 auto}
@media (max-width:700px){
  .bb-panel{padding:16px 14px}
  .vc{padding:16px 14px 12px;border-radius:20px}
  .vc .vc-title{font-size:24px}
}