/* Shared visitor surface, Foundation 0.1 (Shared Surface Contract v0). Served versioned by content hash
   (surface.stylesheet_href). Everything is scoped under .sf / .sf-* so it cannot restyle any existing page.
   Values are the design layer's drawn values x1.3 (drawn at 300px); the 44px touch minimum is not scaled.
   The desktop breakpoint (900px) is PROVISIONAL: breakpoints are UNRESOLVED in the contract (U11). */

.sf{
  --sf-ink:#16191D; --sf-2:#475266; --sf-line:#E5E7EB; --sf-page:#FFFFFF;
  --sf-header-bg:#FFFFFF; --sf-header-fg:#16191D; --sf-accent:#16191D; --sf-tint:#F5F5F7;
  --sf-done:#DCEFE3; --sf-done-fg:#1B5E34; --sf-later:#FEF3DC; --sf-later-fg:#7A4F0E;
  --sf-bonus:#DDEFFF; --sf-bonus-fg:#1E4580; --sf-used:#E7E7EC; --sf-used-fg:#3B4252;
  --sf-needs:#FEE4E2; --sf-needs-fg:#9A2A18; --sf-neutral:#F2F4F7; --sf-neutral-fg:#344054;
  --sf-focus:#2B5DAA;
  --sf-font:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --sf-gutter:16px; --sf-block:13px; --sf-cardgap:9px;
  --sf-r-card:18px; --sf-r-tile:21px; --sf-r-sheet:26px; --sf-r-btn:16px;
  --sf-name:17px; --sf-meta:14px; --sf-label:12px; --sf-hero:26px;
  margin:0; background:var(--sf-page); color:var(--sf-ink); font-family:var(--sf-font);
  font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
.sf *,.sf *::before,.sf *::after{box-sizing:border-box}
:where(.sf) a{color:inherit}  /* zero specificity: never overrides a component colour */
.sf :focus-visible{outline:3px solid var(--sf-focus); outline-offset:2px; border-radius:6px}
.sf-page{max-width:560px; margin:0 auto; padding:0 var(--sf-gutter) calc(var(--sf-gutter) * 2)}

/* header */
.sf-header{display:flex; align-items:center; gap:10px; padding:12px var(--sf-gutter); margin:0 calc(var(--sf-gutter) * -1);
  background:var(--sf-header-bg); color:var(--sf-header-fg); border-bottom:1px solid var(--sf-line)}
.sf-back{display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px;
  margin-left:-10px; font-size:28px; line-height:1; text-decoration:none; color:inherit}
.sf-htext{display:flex; flex-direction:column; min-width:0; flex:1}
.sf-htitle{font-weight:800; font-size:var(--sf-name); line-height:1.2; overflow-wrap:anywhere}
.sf-byline{font-weight:500; font-size:var(--sf-meta); opacity:.85}
.sf-help{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px;
  border:1px solid currentColor; font-weight:700; font-size:var(--sf-meta); text-decoration:none; color:inherit}

/* identity / glyph tile */
.sf-tile{flex:none; display:inline-flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--sf-tint); border-radius:12px; font-size:22px; font-weight:800; color:var(--sf-2)}
.sf-tile img{width:100%; height:100%; object-fit:contain}
/* A light logo (white on transparency): on the header's own colour with no tile, or a dark tile anywhere else. */
.sf-tile.sf-tile-light{background:#1d1a16 !important}
.sf-voice-consumer.sf-branded .sf-header .sf-tile.sf-tile-light,
.sf-voice-consumer.sf-branded .sf-header-subject .sf-tile.sf-tile-light{background:transparent !important}
.sf-tile-sm{width:40px; height:40px}
.sf-tile-md{width:48px; height:48px}

/* layout */
.sf-stack{display:flex; flex-direction:column; gap:var(--sf-cardgap)}
.sf-section{margin-top:calc(var(--sf-block) * 2)}
.sf-label{margin:0 0 8px; font-size:var(--sf-label); font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sf-2)}
.sf-cols{display:block}
.sf-side{margin-top:calc(var(--sf-block) * 2)}

/* Thing card */
.sf-card{display:flex; align-items:center; gap:12px; min-height:64px; padding:12px 14px; background:#fff;
  border:1px solid var(--sf-line); border-radius:var(--sf-r-card); text-decoration:none; color:inherit}
a.sf-card:hover{border-color:#C9CED6}
.sf-cbody{display:flex; flex-direction:column; min-width:0; flex:1}
.sf-cname{font-weight:700; font-size:var(--sf-name); line-height:1.25; overflow-wrap:anywhere}
.sf-cmeta{font-weight:500; font-size:var(--sf-meta); color:var(--sf-2); overflow-wrap:anywhere}
.sf-cemph{font-weight:700; font-size:var(--sf-meta); margin-top:2px}
.sf-cemph-accent{color:var(--sf-accent)}
.sf-cemph-muted{color:var(--sf-2); font-weight:500}
.sf-ctail{flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px}
.sf-right{font-weight:700; font-size:var(--sf-meta); color:var(--sf-2); white-space:nowrap}

/* chips and tags: a word plus a tone, never colour alone */
.sf-chip,.sf-tag{display:inline-flex; align-items:center; min-height:24px; padding:3px 10px; border-radius:999px;
  font-size:var(--sf-label); font-weight:800; line-height:1.2; white-space:nowrap}
.sf-tag{background:#fff; border:1px solid var(--sf-line); color:var(--sf-2); font-weight:600}
.sf-tone-done{background:var(--sf-done); color:var(--sf-done-fg)}
.sf-tone-later{background:var(--sf-later); color:var(--sf-later-fg)}
.sf-tone-bonus{background:var(--sf-bonus); color:var(--sf-bonus-fg)}
.sf-tone-used{background:var(--sf-used); color:var(--sf-used-fg)}
.sf-tone-needs{background:var(--sf-needs); color:var(--sf-needs-fg)}
.sf-tone-neutral{background:var(--sf-neutral); color:var(--sf-neutral-fg)}

/* Thing detail */
.sf-detail{margin-top:var(--sf-block)}
.sf-hero{margin:0 calc(var(--sf-gutter) * -1); aspect-ratio:16/9; background:var(--sf-tint); overflow:hidden}
.sf-hero img{width:100%; height:100%; object-fit:cover}
.sf-dbody{padding-top:var(--sf-block)}
.sf-labels{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.sf-dname{margin:0 0 var(--sf-block); font-size:var(--sf-hero); font-weight:800; letter-spacing:-.02em; line-height:1.15;
  overflow-wrap:anywhere}
.sf-facts{margin:0 0 var(--sf-block); border-top:1px solid var(--sf-line)}
.sf-fact{display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--sf-line)}
.sf-fact dt{flex:0 0 96px; color:var(--sf-2); font-size:var(--sf-meta); font-weight:600}
.sf-fact dd{margin:0; font-size:var(--sf-meta); font-weight:600; overflow-wrap:anywhere}
.sf-desc{margin:0 0 var(--sf-block); color:var(--sf-ink); white-space:pre-line; overflow-wrap:anywhere}   /* a long URL in About widened a 390 page to 406 (Food Pass, 2026-10-02) */
.sf-partof{margin:calc(var(--sf-block) * 1.5) 0}
.sf-partof .sf-card{margin-bottom:var(--sf-cardgap)}
.sf-note{padding:12px 14px; border-radius:14px; font-weight:600; font-size:var(--sf-meta); margin:0 0 var(--sf-block)}

/* buttons: 44px minimum; disabled always says why */
.sf-actions{display:flex; flex-direction:column; gap:10px; margin-top:var(--sf-block)}
.sf-btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 18px;
  border-radius:var(--sf-r-btn); font:inherit; font-weight:800; font-size:16px; text-decoration:none; cursor:pointer;
  width:100%}
.sf-btn-primary{background:var(--sf-accent); color:#fff; border:1px solid var(--sf-accent)}
.sf-btn-secondary{background:#fff; color:var(--sf-ink); border:1px solid var(--sf-line)}
.sf-btn[disabled]{opacity:.45; cursor:not-allowed}
.sf-why{margin:6px 0 0; font-size:var(--sf-meta); color:var(--sf-2); text-align:center}

/* results */
.sf-result{margin-top:var(--sf-block); padding:20px 18px; border-radius:var(--sf-r-sheet); background:var(--sf-tint)}
.sf-result-done{background:var(--sf-done)}
.sf-result-failed{background:var(--sf-used)}
.sf-rtitle{margin:0 0 6px; font-size:22px; font-weight:800; letter-spacing:-.01em; line-height:1.2}
.sf-rbody{margin:0; color:var(--sf-2)}


/* wordmark header: a publisher's own mark at its own proportions */
.sf-header-wm{border-bottom:0}
.sf-wmlink{display:inline-flex; min-height:44px; align-items:center}
.sf-wordmark{display:block; height:64px; width:auto; max-width:60vw}
.sf-badge{flex:none; font-size:var(--sf-meta); font-weight:700; color:var(--sf-2)}
.sf-vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* hero + Ask bar + suggestion chips (the Front Door pattern) */
.sf-herob{margin:0 calc(var(--sf-gutter) * -1); padding:22px var(--sf-gutter) 20px; background:var(--sf-accent); color:#fff}
.sf-herog{margin:0 0 8px; font-size:var(--sf-label); font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.9}
.sf-herot{margin:0 0 8px; font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.12}
.sf-herol{margin:0 0 16px; font-size:15px; font-weight:500; opacity:.92}
.sf-ask{display:flex; align-items:center; gap:6px; background:#fff; border-radius:999px; padding:4px 4px 4px 16px}
.sf-ask input{flex:1; min-width:0; min-height:44px; border:0; outline:0; background:transparent; font:inherit; font-size:16px; color:var(--sf-ink)}
.sf-ask button{flex:none; width:44px; height:44px; border-radius:999px; border:0; background:var(--sf-accent); color:#fff; font-size:20px; cursor:pointer}
.sf-suggs{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.sf-sugg{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:999px; border:1px solid rgba(255,255,255,.55);
  color:#fff; text-decoration:none; font-weight:700; font-size:var(--sf-meta)}
.sf-answer .sf-sugg{border-color:var(--sf-line); color:var(--sf-ink); background:#fff}

/* section head with a count; day labels */
.sf-shead{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.sf-saside{font-size:var(--sf-meta); font-weight:600; color:var(--sf-2)}
.sf-sub{margin:-4px 0 10px; font-size:var(--sf-meta); color:var(--sf-2)}
.sf-day{margin:10px 0 0; font-size:var(--sf-label); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--sf-2)}
.sf-backlink{display:inline-flex; align-items:center; min-height:44px; margin-top:6px; font-weight:700; font-size:var(--sf-meta); text-decoration:none}

/* date tile (the card's glyph slot) */
.sf-dtile{flex:none; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:56px; min-height:64px;
  padding:6px 4px; border-radius:14px; background:var(--sf-tint); color:var(--sf-ink); line-height:1.05; text-align:center}
.sf-dt-top,.sf-dt-bot{font-size:11px; font-weight:800; letter-spacing:.06em}
.sf-dt-big{font-size:22px; font-weight:800; margin:2px 0}
.sf-dtile-live{background:var(--sf-accent); color:#fff}
.sf-dtile-run .sf-dt-big{font-size:17px}
.sf-dtile-run .sf-dt-bot{font-size:9px}

/* rich card: tile, name, meta, chips, excerpt, actions */
.sf-card-rich{align-items:flex-start}
.sf-card-live{border-color:var(--sf-accent); border-width:2px}
.sf-cname-link{text-decoration:none}
.sf-cname-link:hover{text-decoration:underline}
.sf-ctags{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.sf-cbodytext{margin-top:6px; font-size:var(--sf-meta); color:var(--sf-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.sf-clinks{display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; margin-top:4px}
.sf-link{display:inline-flex; align-items:center; min-height:44px; font-weight:800; font-size:var(--sf-meta); color:var(--sf-accent);
  text-decoration:none; cursor:pointer; list-style:none}
.sf-link::-webkit-details-marker,.sf-sheetd summary::-webkit-details-marker{display:none}
.sf-sheetd summary{list-style:none}
/* routing actions on a Thing detail: one group of text actions directly after the facts (clarification 2026-09-30) */
.sf-routes{display:flex; flex-wrap:wrap; gap:0 22px; margin:2px 0 6px}

/* detail head */
.sf-dhead{display:flex; align-items:flex-start; gap:12px}
.sf-dhead .sf-dname{margin-top:4px}

/* Add to calendar sheet: bottom sheet on a phone, centred dialog on desktop */
.sf-sheetd{display:contents}
.sf-sheetd > summary.sf-btn{width:100%}
.sf-sheet-back{position:fixed; inset:0; background:rgba(22,25,29,.45); z-index:40}
.sf-sheet{position:fixed; left:0; right:0; bottom:0; z-index:41; background:#fff; border-radius:var(--sf-r-sheet) var(--sf-r-sheet) 0 0;
  padding:20px var(--sf-gutter) calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -8px 30px rgba(0,0,0,.18)}
.sf-sheet-t{margin:0 0 4px; font-size:19px; font-weight:800; line-height:1.25}
.sf-sheet-m{margin:0 0 14px; font-size:var(--sf-meta); color:var(--sf-2)}
.sf-sheet-opts{display:flex; flex-direction:column; gap:8px; margin-bottom:10px}
.sf-sheet-opt{display:flex; align-items:center; min-height:48px; padding:0 16px; border:1px solid var(--sf-line); border-radius:var(--sf-r-btn);
  font-weight:700; text-decoration:none; color:var(--sf-ink)}
.sf-sheetd:not([open]) .sf-sheet,.sf-sheetd:not([open]) .sf-sheet-back{display:none}

/* Concierge answer */
.sf-answer{margin-top:var(--sf-block)}
.sf-aq{margin:4px 0 10px; font-size:24px; font-weight:800; letter-spacing:-.01em; line-height:1.2}
.sf-at p{margin:0 0 8px}
.sf-asrc{display:flex; align-items:center; gap:8px; margin:6px 0 14px; font-size:var(--sf-label); font-weight:700; color:var(--sf-2)}
.sf-book{width:10px; height:10px; border-radius:50%; background:var(--sf-accent); flex:none}
.sf-answer .sf-suggs{margin-top:14px}

.sf-footer{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; margin-top:calc(var(--sf-block) * 2); padding-top:14px;
  border-top:1px solid var(--sf-line); font-size:var(--sf-label); color:var(--sf-2)}
.sf-footer p{margin:0}
.sf-side .sf-note{margin-top:var(--sf-block)}


/* In-place Ask (surface-ask.js). The answer lands directly under the Ask bar; the page stays where it is.
   Working, then settling: enough state change to say "your question caused this", and no more. No delay. */
.sf-conv{background:#fff; border:1px solid var(--sf-line); border-radius:var(--sf-r-card); padding:16px 17px;
  margin:var(--sf-block) 0 0; scroll-margin-top:12px}
.sf-conv[hidden]{display:none}
.sf-tq{margin:0 0 6px; font-weight:800}
.sf-tb p{margin:0 0 8px}
.sf-conv-working .sf-tb{color:var(--sf-2); animation:sfpulse 1.15s ease-in-out infinite}
.sf-conv-settled .sf-tb,.sf-conv-settled .sf-tcards,.sf-conv-settled .sf-asrc{animation:sfsettle .26s ease both}
.sf-conv-failed .sf-tb{color:var(--sf-needs-fg)}
.sf-tcards{margin-top:12px}
@keyframes sfpulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes sfsettle{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sf-conv .sf-tb,.sf-conv .sf-tcards,.sf-conv .sf-asrc{animation:none!important}}

@media (min-width:900px){
  .sf-page{max-width:1120px; padding:0 32px 48px}
  .sf-header{margin:0 -32px; padding:14px 32px}
  .sf-hero{margin:0; border-radius:var(--sf-r-sheet)}
  .sf-cols{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:32px; align-items:start}
  .sf-side{margin-top:0}
  .sf-actions{flex-direction:row; flex-wrap:wrap}
  .sf-btn{width:auto}
  .sf-sheetd > summary.sf-btn{width:auto}
  .sf-herob{margin:0 -32px; padding:36px 32px 28px}
  .sf-herot{font-size:40px}
  .sf-ask{max-width:640px}
  .sf-sheet{left:50%; right:auto; bottom:auto; top:50%; width:420px; transform:translate(-50%,-50%); border-radius:var(--sf-r-sheet)}
}
@media (prefers-reduced-motion:reduce){.sf *{transition:none!important; animation:none!important}}
/* figure (a supplied identity image, e.g. a program wordmark) + point map (stored coordinates only) */
.sf-figure{margin:0 0 var(--sf-block)}
.sf-figure img{display:block; max-width:100%; max-height:120px; width:auto; height:auto; border-radius:12px}
.sf-mapwrap{margin:0 0 var(--sf-block)}
.sf-map{height:260px; border-radius:16px; overflow:hidden; background:var(--sf-tint); border:1px solid var(--sf-line)}
.sf-mapcap{margin:8px 2px 0; font-size:var(--sf-meta); color:var(--sf-2)}
@media (min-width:900px){.sf-map{height:380px}.sf-figure img{max-height:140px}}

/* ============================================================================================================
   CONSUMER SURFACE v1 (Brightr Consumer Surface v1 Contract, frozen 2026-09-28). The consumer voice IS the contract.
   v1.1 (Matt's ruling, 2026-09-28): the V2 Front Door (front_door_pilot.py) is the canonical consumer shell. The SHELL (container, hero,
   identity row, title, Ask, suggestion rail, section headings, breakpoints 760/980/1280) is that door's measured
   production grammar (front_door_pilot.py), promoted here; compositions decide what happens inside it. Recorded in
   docs/consumer_surface/contract/AMENDMENTS.md (the contract itself is never edited).
   Opt-in per page: document(voice="consumer") on Surface pages; class "cs-v1" on a page that renders its own markup
   (a client-rendered door). Four token groups; the only customer colour is --cs-accent (the identity slot).
   Never here: Help pill, status-chip column, List/Map toggle, slot cards, a generic deliberate-act control,
   coloured header bars, per-customer canvases/tints/fonts, decorative hero circles (contract: "Not in v1").
   ============================================================================================================ */
.sf.sf-voice-consumer,.cs-v1{
  /* COLOR · SHARED */
  --cs-surface-canvas:#F7F3EC; --cs-surface-card:#FFFFFF; --cs-surface-tile:#F1EBDE; --cs-line-hairline:#E6DFD2;
  --cs-text-ink:#16191D; --cs-text-meta:#57534E;
  --cs-preview-fill:#FCE9C2; --cs-preview-border:#EBCB86; --cs-preview-ink:#7A4F0E; --cs-success:#2E7D3F;
  --cs-tint-1:#F9DCCF; --cs-tint-1-ink:#9A3B1B; --cs-tint-2:#D9E8F7; --cs-tint-2-ink:#1E4F86;
  --cs-tint-3:#DDEFE3; --cs-tint-3-ink:#1E6B42; --cs-tint-4:#EAE0F5; --cs-tint-4-ink:#5B3A86;
  /* COLOR · IDENTITY SLOT (the only customer colour; white on it must reach 4.5:1, see surface.resolve_theme) */
  --cs-accent:var(--sf-accent,#16191D);
  /* TYPE */
  --cs-font-place:'Fraunces',Georgia,'Times New Roman',serif;
  --cs-font-ui:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --cs-hero:clamp(26px,7.4vw,32px); --cs-hero-measure:16ch; --cs-section:21px; --cs-title:22px; --cs-card:16px;
  --cs-body:15px; --cs-meta:13.5px; --cs-label:11.5px; --cs-action:14px; --cs-chip:13.5px; --cs-idname:17px;
  /* SPACE, RADIUS, LAYOUT, ELEVATION */
  --cs-s1:4px; --cs-s2:8px; --cs-s3:12px; --cs-s4:16px; --cs-s5:24px; --cs-s6:32px; --cs-s7:48px;
  --cs-r-card:16px; --cs-r-control:12px; --cs-r-pill:999px;
  --cs-gutter:16px; --cs-max:760px; --cs-target:48px; --cs-target-min:44px;
  /* THE SHELL (the canonical Front Door): identity mark, Ask, hero rhythm */
  --cs-mark:56px; --cs-mark-r:14px; --cs-ask-max:560px; --cs-ask-btn:40px; --cs-ask-chips:16px;
  --cs-hero-top:15px; --cs-hero-bottom:26px; --cs-title-above:14px; --cs-title-below:16px;
}
@media (min-width:760px){
  .sf.sf-voice-consumer,.cs-v1{--cs-hero:clamp(32px,4vw,44px); --cs-hero-measure:24ch; --cs-title:30px; --cs-card:18px;
    --cs-body:16px; --cs-meta:14.5px; --cs-label:12px; --cs-action:14.5px;
    --cs-hero-top:22px; --cs-hero-bottom:34px; --cs-title-above:18px; --cs-title-below:20px}
}
/* Consumer Surface v1 CS-A2 1.1: from 1024, content is centred at max 1120 with a 40px gutter (a 1200 page minus two
   gutters); below 1024 it is one column with a 16px gutter. The Ask field widens to the measure its chips wrap in. */
@media (min-width:1024px){ .sf.sf-voice-consumer,.cs-v1{--cs-max:1200px; --cs-gutter:40px; --cs-section:23px; --cs-ask-max:720px} }

/* Surface's own variables, re-pointed at the contract tokens */
.sf.sf-voice-consumer{--sf-ink:var(--cs-text-ink); --sf-2:var(--cs-text-meta); --sf-line:var(--cs-line-hairline);
  --sf-page:var(--cs-surface-canvas); --sf-tint:var(--cs-surface-tile); --sf-font:var(--cs-font-ui);
  --sf-disp:var(--cs-font-place); --sf-r-card:var(--cs-r-card); --sf-r-btn:var(--cs-r-control); --sf-r-sheet:var(--cs-r-card);
  --sf-gutter:var(--cs-gutter); --sf-name:var(--cs-card); --sf-meta:var(--cs-meta); --sf-label:var(--cs-label);
  --sf-later:var(--cs-preview-fill); --sf-later-fg:var(--cs-preview-ink);
  font-size:var(--cs-body); line-height:1.5; overflow-x:clip}
.sf-voice-consumer .sf-page{max-width:var(--cs-max); padding:0 var(--cs-gutter) var(--cs-s7)}
.sf-voice-consumer .sf-header{margin:0 calc(-1 * var(--cs-gutter)); padding:12px var(--cs-gutter)}
/* Hero to first heading: the canonical door's 26 (34 from 980), net of the stack gap; a leading section adds no margin. */
.sf-voice-consumer .sf-cols{display:block; margin-top:calc(26px - var(--sf-cardgap))}
.sf-voice-consumer .sf-cols .sf-stack > .sf-section:first-child,.sf-voice-consumer .sf-cols > * > .sf-section:first-child{margin-top:0}
.sf-voice-consumer .sf-side{margin-top:var(--cs-s6)}

/* Type: Fraunces 600 ONLY on place voice (hero title, section titles, collection tiles that name a place) */
.sf-voice-consumer .sf-herot{font-family:var(--cs-font-place); font-weight:600; font-size:var(--cs-hero); line-height:1.06;
  letter-spacing:-.028em; max-width:var(--cs-hero-measure); text-wrap:balance; margin:var(--cs-title-above) 0 var(--cs-title-below)}
.sf-voice-consumer .sf-section > .sf-label,.sf-voice-consumer .sf-shead .sf-label{font-family:var(--cs-font-place);
  font-weight:600; font-size:var(--cs-section); line-height:1.45; letter-spacing:-.02em; text-transform:none;
  color:var(--cs-text-ink); margin:0 0 13px}
.sf-voice-consumer .sf-dname,.sf-voice-consumer .sf-aq,.sf-voice-consumer .sf-tq,.sf-voice-consumer .sf-rtitle{
  font-family:var(--cs-font-ui); font-weight:800; font-size:var(--cs-title); line-height:1.2; letter-spacing:-.01em}
.sf-voice-consumer .sf-tq{font-size:var(--cs-card)}
.sf-voice-consumer .sf-saside{font-size:var(--cs-meta); font-weight:500; color:var(--cs-text-meta)}

/* Group label */
.sf-voice-consumer .sf-day,.sf-voice-consumer .sf-label{font-size:var(--cs-label); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cs-text-meta)}

/* Hero + Ask (the canonical shell): a full-bleed accent band; identity row, title, Ask and the suggestion rail
   inside it. Content aligns with the page column below it at every width. */
.sf-voice-consumer .sf-herob{--cs-rail-bg:var(--cs-accent); margin:0 calc(50% - 50vw);
  padding:var(--cs-hero-top) max(var(--cs-gutter), calc(50vw - var(--cs-max) / 2 + var(--cs-gutter))) var(--cs-hero-bottom);
  background:var(--cs-accent); color:#fff; border-radius:0}
.sf-voice-consumer .sf-heroid{display:flex; align-items:center; gap:10px; margin:0 0 2px; font-size:var(--cs-idname);
  font-weight:700; letter-spacing:-.01em; color:#fff; text-decoration:none}
.sf-voice-consumer a.sf-heroid:hover span{text-decoration:underline}
.sf-voice-consumer .sf-heroid .sf-heromark{flex:none; display:inline-flex; align-items:center; justify-content:center;
  height:var(--cs-mark); min-width:var(--cs-mark); max-width:180px; padding:5px; border-radius:var(--cs-mark-r);
  background:#fff; overflow:hidden}
.sf-voice-consumer .sf-heroid .sf-heromark img{display:block; height:calc(var(--cs-mark) - 10px); width:auto; max-width:170px}
.sf-voice-consumer .sf-herog{margin:var(--cs-title-above) 0 0; font-size:var(--cs-label); font-weight:700; letter-spacing:.1em; opacity:.9}
.sf-voice-consumer .sf-herog + .sf-herot{margin-top:6px}
.sf-voice-consumer .sf-herol{font-size:var(--cs-body); font-weight:500; opacity:.95; margin:0 0 var(--cs-title-below)}
.sf-voice-consumer .sf-herot + .sf-herol{margin-top:calc(var(--cs-title-below) * -.5)}
/* The canonical 40px send circle, drawn inside a 44px target (a 2px white ring on the white bar): same look, 44 to tap. */
.sf-voice-consumer .sf-ask{border-radius:var(--cs-r-pill); max-width:var(--cs-ask-max); padding:4px 4px 4px 18px; gap:8px}
.sf-voice-consumer .sf-ask input{font-family:var(--cs-font-ui); font-weight:400; font-size:16px; min-height:var(--cs-ask-btn)}
.sf-voice-consumer .sf-ask input::placeholder{color:var(--cs-text-meta); opacity:1}
.sf-voice-consumer .sf-ask button{width:calc(var(--cs-ask-btn) + 4px); height:calc(var(--cs-ask-btn) + 4px); border:2px solid #fff;
  background-clip:padding-box; font-family:var(--cs-font-ui); font-size:18px;
  background:var(--cs-accent); display:flex; align-items:center; justify-content:center}

/* THE SUGGESTION RAIL (the canonical door's rail, verbatim in behaviour; static/surface-rail.js). A horizontal rail at every
   width; fades and arrows appear only on the side with more. Chips keep the canonical 34px pill, drawn inside a
   44px hit area (the pill is a pseudo-element), so the look is canonical and the target meets 44. */
/* Ask -> the chip PILL is --cs-ask-chips; the pill sits 5px inside its 44px target. */
.cs-rail{position:relative; margin-top:calc(var(--cs-ask-chips) - 5px)}
.cs-rail:before,.cs-rail:after{content:""; position:absolute; top:0; bottom:0; width:26px; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .18s}
.cs-rail:before{left:0; background:linear-gradient(270deg, transparent, var(--cs-rail-bg))}
.cs-rail:after{right:0; background:linear-gradient(90deg, transparent, var(--cs-rail-bg))}
.cs-rail.more-l:before,.cs-rail.more-r:after{opacity:1}
.cs-rail .cs-rail-s{display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth;
  margin:0; padding:0 30px 0 0}
.cs-rail .cs-rail-s::-webkit-scrollbar{display:none}
.cs-rail .cs-rail-s.dragging{scroll-behavior:auto; cursor:grabbing; user-select:none}
.cs-rail-l,.cs-rail-r{display:none; position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:32px; height:32px;
  border-radius:999px; cursor:pointer; padding:0; align-items:center; justify-content:center; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3); color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .14s}
.cs-rail-l:hover,.cs-rail-r:hover{background:rgba(255,255,255,.3)}
.cs-rail-l{left:-4px}
.cs-rail-r{right:-4px}
.cs-rail-l i,.cs-rail-r i{width:7px; height:7px; border-top:2px solid currentColor; border-right:2px solid currentColor}
.cs-rail-l i{transform:translateX(2px) rotate(-135deg)}
.cs-rail-r i{transform:translateX(-2px) rotate(45deg)}
@media (hover:hover) and (pointer:fine){
  .cs-rail.scrollable{padding:0 38px 0 0}
  .cs-rail.scrollable .cs-rail-s{padding-right:2px}
  .cs-rail.scrollable .cs-rail-l{left:0}
  .cs-rail.scrollable .cs-rail-r{right:0}
  /* The fade marks the CLIPPED edge (the rail ends where the arrow's space begins), not the arrow's own space. */
  .cs-rail.scrollable:after{right:38px}
  .cs-rail.scrollable.more-l .cs-rail-l,.cs-rail.scrollable.more-r .cs-rail-r{display:flex}
}
@media (min-width:760px){ .cs-rail .cs-rail-s{padding-right:44px} }
/* CS-A2 1.3: from 1024 the HERO's chips wrap within the Ask field's width (still at most 6); the rail stays below 1024. */
@media (min-width:1024px){
  .sf-herob .cs-rail{max-width:var(--cs-ask-max); padding:0 !important}
  .sf-herob .cs-rail:before,.sf-herob .cs-rail:after{display:none}
  .sf-herob .cs-rail .cs-rail-s{flex-wrap:wrap; overflow:visible; padding:0 !important}
  .sf-herob .cs-rail-l,.sf-herob .cs-rail-r{display:none !important}
}
.cs-rail .cs-rail-s > *{position:relative; isolation:isolate; flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  white-space:nowrap; min-height:var(--cs-target-min); padding:0 15px; margin:0; background:transparent; border:0;
  border-radius:999px; color:rgba(255,255,255,.92); font-family:var(--cs-font-ui); font-size:var(--cs-chip); font-weight:500;
  line-height:1.2; text-decoration:none; cursor:pointer}
.cs-rail .cs-rail-s > *::before{content:""; position:absolute; inset:5px 0; z-index:-1; border-radius:999px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.22); transition:background .14s,border-color .14s}
.cs-rail .cs-rail-s > *:hover{color:#fff}
.cs-rail .cs-rail-s > *:hover::before{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.4)}
.cs-rail .cs-rail-s > *:focus-visible{outline:2px solid #fff; outline-offset:-3px}

/* Identity header row: canvas, hairline below, no Help */
.sf-voice-consumer .sf-header{background:var(--cs-surface-canvas); color:var(--cs-text-ink); border-bottom:1px solid var(--cs-line-hairline)}
.sf-voice-consumer .sf-htitle{font-size:var(--cs-card); font-weight:700}
.sf-voice-consumer .sf-byline{font-size:var(--cs-meta); color:var(--cs-text-meta); opacity:1}
/* Branded identity header (Matt, 2026-09-29): a Place that declares its colour wears it here as a full-bleed band,
   white type, the tile in white. Pages whose Place declares no colour keep the canvas header above. */
.sf-voice-consumer.sf-branded .sf-header{margin:0 calc(50% - 50vw); background:var(--cs-accent); color:#fff; border-bottom:0;
  padding-left:max(var(--cs-gutter), calc(50vw - var(--cs-max) / 2 + var(--cs-gutter)));
  padding-right:max(var(--cs-gutter), calc(50vw - var(--cs-max) / 2 + var(--cs-gutter)))}
.sf-voice-consumer.sf-branded .sf-header .sf-byline{color:rgba(255,255,255,.85)}
.sf-voice-consumer.sf-branded .sf-header .sf-back{color:#fff}
.sf-voice-consumer.sf-branded .sf-header .sf-tile{background:#fff; color:var(--cs-accent)}
/* COVER BAND (Guides polish, Matt 2026-10-02): a Place that declares its own photo (Cover Image) opens its pages with it,
   the door's identity treatment, never the fallback colour. The photo is darkened so white type clears contrast. */
.sf-voice-consumer .sf-header.sf-header-cover{margin:0 calc(50% - 50vw); color:#fff; border-bottom:0; min-height:132px;
  align-items:flex-end; background-color:#1d2a36; background-size:cover; background-position:center;
  padding-left:max(var(--cs-gutter), calc(50vw - var(--cs-max) / 2 + var(--cs-gutter)));
  padding-right:max(var(--cs-gutter), calc(50vw - var(--cs-max) / 2 + var(--cs-gutter)));
  padding-top:28px; padding-bottom:16px}
.sf-voice-consumer .sf-header.sf-header-cover .sf-htitle{font-size:19px; text-shadow:0 1px 6px rgba(0,0,0,.45)}
.sf-voice-consumer .sf-header.sf-header-cover .sf-tile{box-shadow:0 0 0 2px #fff}
.sf-pinwrap .sf-pin-on{transform:scale(1.35); box-shadow:0 0 0 4px rgba(255,255,255,.95), 0 0 0 7px var(--cs-accent, #2B6CD8)}
.sf-pinwrap .sf-pin{transition:transform .15s ease}

/* Tiles, cards: white, hairline, no shadow */
.sf-voice-consumer .sf-tile{background:var(--cs-surface-tile); color:var(--cs-text-meta); border-radius:var(--cs-r-control)}
/* A place's declared emoji at full strength: a white tile with a hairline, the glyph at its own weight (Matt 2026-10-02:
   on the cream tile, in the meta colour at 800, it read washed out). */
.sf-voice-consumer .sf-tile.sf-tile-glyph{background:#fff; color:#16191D; font-weight:400; box-shadow:inset 0 0 0 1px var(--cs-line-hairline)}
.sf-tile-lg.sf-tile-glyph{font-size:30px}
.sf-voice-consumer .sf-card{background:var(--cs-surface-card); border:1px solid var(--cs-line-hairline); border-radius:var(--cs-r-card);
  box-shadow:none}
.sf-voice-consumer .sf-cname{font-size:var(--cs-card); font-weight:700; line-height:1.3}
.sf-voice-consumer .sf-cmeta{font-size:var(--cs-meta); font-weight:500; color:var(--cs-text-meta)}
.sf-voice-consumer .sf-cemph{font-size:var(--cs-meta)}
.sf-voice-consumer .sf-cemph-accent{color:var(--cs-accent)}
.sf-voice-consumer .sf-dtile{background:var(--cs-surface-tile); color:var(--cs-text-meta); border-radius:var(--cs-r-control)}
.sf-voice-consumer .sf-dtile-live{background:var(--cs-accent); color:#fff}
.sf-voice-consumer .sf-card-live{border-color:var(--cs-accent)}
/* A later day of a short run: a slim row pointing back to its full card (Events composition). */
.sf-voice-consumer .sf-spanrow{display:flex; align-items:center; gap:var(--cs-s3); min-height:var(--cs-target-min);
  padding:var(--cs-s2) var(--cs-s4); text-decoration:none; color:var(--cs-text-ink); font-weight:700}
.sf-voice-consumer .sf-spanrow .sf-cname{flex:1}
.sf-voice-consumer .sf-spanrow .sf-chev{color:var(--cs-text-meta); font-size:20px; line-height:1}
/* INLINE PREVIEW (a module framed in a customer's page; pilot). The frame's size is fixed by embed.v2.js; the module
   fills it and never scrolls. 4 cards in two columns when the frame is wide, 3 in one column on a phone. */
.sf-voice-consumer.sf-inline{background:transparent; overflow:hidden}
.sf-voice-consumer.sf-inline .sf-page{max-width:none; padding:0; height:100vh}
.sf-inline-mod{box-sizing:border-box; height:100%; display:flex; flex-direction:column; gap:var(--cs-s3);
  padding:var(--cs-s5) var(--cs-s5) 0; background:var(--cs-surface-canvas); border:1px solid var(--cs-line-hairline);
  border-radius:var(--cs-r-card); overflow:hidden}
.sf-inline-mod .sf-herog{margin:0; color:var(--cs-accent); font-size:var(--cs-label); font-weight:800; letter-spacing:.1em;
  text-transform:uppercase}
.sf-inline-mod .sf-ititle{margin:-4px 0 0; font-family:var(--cs-font-place); font-weight:600; font-size:28px; line-height:1.15;
  letter-spacing:-.02em; color:var(--cs-text-ink)}
.sf-inline-mod .sf-igrid{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--cs-s3)}
.sf-inline-mod .sf-icell{min-width:0}
.sf-inline-mod .sf-igrid .sf-icell:nth-child(n+4){display:none}
.sf-inline-mod .sf-icell .sf-day{margin:0 0 6px}
.sf-inline-mod .sf-card{margin:0}
.sf-inline-mod .sf-cname{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sf-inline-mod .sf-cmeta{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sf-inline-mod .sf-imore{align-self:flex-start; width:auto}
.sf-inline-mod .sf-iask{margin-top:auto; padding-top:var(--cs-s3); border-top:1px solid var(--cs-line-hairline)}
.sf-inline-mod .sf-iaskl{display:block; margin:0 0 var(--cs-s2); font-weight:700; font-size:var(--cs-body); color:var(--cs-text-ink)}
.sf-inline-mod .sf-iask .sf-ask{display:flex; border:1px solid var(--cs-line-hairline); max-width:none}
.sf-inline-mod .sf-ifoot{display:flex; justify-content:space-between; gap:var(--cs-s3); margin:var(--cs-s3) calc(-1 * var(--cs-s5)) 0;
  padding:10px var(--cs-s5); background:var(--cs-surface-tile); color:var(--cs-text-meta); font-size:12.5px}
@media (min-width:600px){
  .sf-inline-mod .sf-igrid{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--cs-s3)}
  .sf-inline-mod .sf-igrid .sf-icell:nth-child(n+4){display:block}
}
/* Chips: a cost chip is a tile fill; a type chip on the canvas is a shared tint with its count */
.sf-voice-consumer .sf-tag{background:var(--cs-surface-tile); border:0; color:var(--cs-text-ink); font-weight:700;
  border-radius:var(--cs-r-pill)}
.sf-voice-consumer .sf-typechip{display:inline-flex; align-items:center; gap:6px; min-height:var(--cs-target-min); padding:0 14px;
  border-radius:var(--cs-r-pill); font-size:var(--cs-meta); font-weight:700; text-decoration:none}
.sf-voice-consumer .sf-typechip b{font-weight:500}
.sf-voice-consumer .sf-tint-1{background:var(--cs-tint-1); color:var(--cs-tint-1-ink)}
.sf-voice-consumer .sf-tint-2{background:var(--cs-tint-2); color:var(--cs-tint-2-ink)}
.sf-voice-consumer .sf-tint-3{background:var(--cs-tint-3); color:var(--cs-tint-3-ink)}
.sf-voice-consumer .sf-tint-4{background:var(--cs-tint-4); color:var(--cs-tint-4-ink)}

/* Collection tile: a white card with a hairline, or a shared tint for areas; opens a Collection */
.sf-voice-consumer .sf-ctile{display:flex; align-items:center; gap:var(--cs-s3); min-height:var(--cs-target); padding:var(--cs-s3) var(--cs-s4);
  background:var(--cs-surface-card); border:1px solid var(--cs-line-hairline); border-radius:var(--cs-r-card);
  color:var(--cs-text-ink); text-decoration:none}
.sf-voice-consumer .sf-ctile[class*="sf-tint-"]{border-color:transparent}
.sf-voice-consumer .sf-ctile-n{display:block; font-size:var(--cs-card); font-weight:700; line-height:1.25}
.sf-voice-consumer .sf-ctile-place .sf-ctile-n{font-family:var(--cs-font-place); font-weight:600}
.sf-voice-consumer .sf-ctile-m{display:block; font-size:var(--cs-meta); font-weight:500; color:var(--cs-text-meta)}
.sf-voice-consumer .sf-ctile[class*="sf-tint-"] .sf-ctile-m{color:inherit}
.sf-voice-consumer .sf-ctile-i{flex:none; font-size:22px; line-height:1}
.sf-voice-consumer .sf-ctile-i img{display:block; width:36px; height:36px; border-radius:50%; object-fit:cover}

/* Stat tile: two side by side, type.value; the only progress form in v1 */
.sf-voice-consumer .sf-stats{display:grid; grid-template-columns:1fr 1fr; gap:var(--cs-s3)}
.sf-voice-consumer .sf-stat{background:var(--cs-surface-card); border:1px solid var(--cs-line-hairline); border-radius:var(--cs-r-card);
  padding:var(--cs-s4)}
.sf-voice-consumer .sf-stat-v{display:block; font-size:var(--cs-title); font-weight:800; font-variant-numeric:tabular-nums;
  line-height:1.1}
.sf-voice-consumer .sf-stat-l{display:block; font-size:var(--cs-meta); font-weight:500; color:var(--cs-text-meta)}

/* Facts table: hairline rows */
.sf-voice-consumer .sf-facts{border-top:1px solid var(--cs-line-hairline)}
.sf-voice-consumer .sf-fact{border-bottom:1px solid var(--cs-line-hairline)}
.sf-voice-consumer .sf-fact dt{color:var(--cs-text-meta); font-weight:500; font-size:var(--cs-meta)}
.sf-voice-consumer .sf-fact dd{font-size:var(--cs-meta)}

/* Provenance: a line with the success dot on Front Doors (side column); a card panel on detail pages */
.sf-voice-consumer .sf-note{background:var(--cs-surface-card); border:1px solid var(--cs-line-hairline); color:var(--cs-text-ink);
  border-radius:var(--cs-r-control); font-weight:500; font-size:var(--cs-meta)}
.sf-voice-consumer .sf-side .sf-note{background:transparent; border:0; padding:0 0 0 18px; position:relative; font-weight:500;
  color:var(--cs-text-meta)}
.sf-voice-consumer .sf-side .sf-note::before{content:""; position:absolute; left:2px; top:.55em; width:7px; height:7px;
  border-radius:50%; background:var(--cs-success)}

/* Preview banner: state.preview, says who can see the page, sits above the content */
.sf-voice-consumer .sf-preview{margin:var(--cs-s4) 0; padding:var(--cs-s3) var(--cs-s4); background:var(--cs-preview-fill);
  border:1px solid var(--cs-preview-border); border-radius:var(--cs-r-control); color:var(--cs-preview-ink);
  font-size:var(--cs-meta); font-weight:600}

/* Buttons: primary filled accent at 48; secondary accent outline; text action accent type.action with › */
.sf-voice-consumer .sf-btn{min-height:var(--cs-target); border-radius:var(--cs-r-control); font-family:var(--cs-font-ui);
  font-weight:800; font-size:var(--cs-action)}
.sf-voice-consumer .sf-btn-primary{background:var(--cs-accent); border-color:var(--cs-accent); color:#fff}
.sf-voice-consumer .sf-btn-secondary{background:transparent; border:1px solid var(--cs-accent); color:var(--cs-accent)}
.sf-voice-consumer .sf-link{font-size:var(--cs-action); font-weight:800; color:var(--cs-accent)}
.sf-voice-consumer .sf-result{background:var(--cs-surface-card); border:1px solid var(--cs-line-hairline)}
.sf-voice-consumer .sf-rbody{color:var(--cs-text-meta)}

/* Map: a view of the list, hairline */
.sf-voice-consumer .sf-map{border:1px solid var(--cs-line-hairline); border-radius:var(--cs-r-card); background:var(--cs-surface-tile)}
.sf-voice-consumer .sf-mapcap{font-size:var(--cs-meta); color:var(--cs-text-meta)}
.sf-voice-consumer .sf-footer{border-top:1px solid var(--cs-line-hairline); color:var(--cs-text-meta)}
.sf-voice-consumer .sf-conv{border:1px solid var(--cs-line-hairline)}
.sf-voice-consumer .sf-back{color:var(--cs-text-ink)}

@media (min-width:760px){ .sf-voice-consumer .sf-header{padding:14px var(--cs-gutter)} }
/* CS-A2 1.2: THE SIDE COLUMN IS EARNED BY CONTENT. A composition passes side_earned=False (surface.columns) when its side
   would hold only provenance; that note then sits below the main region as it does on a phone, and main takes the width. */
@media (min-width:1024px){
  .sf-voice-consumer .sf-cols:not(.sf-cols-solo){display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:46px;
    align-items:start; margin-top:calc(34px - var(--sf-cardgap))}
  .sf-voice-consumer .sf-cols:not(.sf-cols-solo) .sf-side{margin-top:0}
}

/* ============================================================================================================
   BEFORE-THE-ACT PRIMITIVES (polish pass, 2026-09-30; shared, additive, not yet canonical).
   cover_band (an opening band with no Ask; a Place's declared photo under a neutral scrim), the title band
   (header subject), group (rows in one card), emphasis-led rows (thing_card lead="emphasis"), act_panel, and
   status_line. No customer colour here beyond --cs-accent; the scrim and the dot tones are shared neutrals.
   ============================================================================================================ */
.sf-tile-lg{width:52px; height:52px; font-size:24px}

/* cover band: the hero band's geometry; with a photo, the photo fills it under a scrim and type sits at the foot */
.sf-voice-consumer .sf-cover{position:relative; overflow:hidden; isolation:isolate}
.sf-voice-consumer .sf-cover-photo{display:flex; flex-direction:column; justify-content:flex-end; min-height:360px;
  background:#1E2530}
.sf-voice-consumer .sf-cover-img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
  object-position:center 40%}
.sf-voice-consumer .sf-cover-photo::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(18,22,28,.55) 0%, rgba(18,22,28,.10) 30%, rgba(18,22,28,.45) 58%, rgba(18,22,28,.86) 100%)}
.sf-voice-consumer .sf-cover-photo .sf-heroid{position:absolute; top:var(--cs-hero-top);
  left:max(var(--cs-gutter), calc(50vw - var(--cs-max) / 2 + var(--cs-gutter)))}
.sf-voice-consumer .sf-cover-photo .sf-herot,.sf-voice-consumer .sf-cover-photo .sf-herol{text-shadow:0 1px 12px rgba(0,0,0,.35)}
.sf-voice-consumer .sf-cover .sf-heroid .sf-heromark{height:34px; min-width:34px}
.sf-voice-consumer .sf-cover .sf-heroid .sf-heromark img{height:28px}
.sf-voice-consumer .sf-cover-mark{display:block; height:62px; width:auto; max-width:72%; margin:var(--cs-title-above) 0 0;
  border-radius:10px}
.sf-voice-consumer .sf-cover .sf-herot{margin-top:var(--cs-title-above)}
.sf-voice-consumer .sf-cover .sf-herol{margin-bottom:0}
.sf-voice-consumer .sf-cover + .sf-preview{margin-top:var(--cs-s4)}

/* title band: the header, taller, naming one Thing under a labelled back link */
.sf-voice-consumer .sf-header-subject{flex-direction:column; align-items:stretch; gap:14px; padding-top:6px; padding-bottom:22px}
.sf-crumb{display:inline-flex; align-items:center; gap:10px; align-self:flex-start; min-height:44px; margin-left:-2px;
  color:inherit; text-decoration:none; font-weight:700; font-size:var(--cs-meta, 14px)}
.sf-crumb i{width:9px; height:9px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg)}
.sf-subject{display:flex; align-items:center; gap:14px; min-width:0}
.sf-sname{margin:0; font-weight:600; font-size:28px; line-height:1.1;
  letter-spacing:-.02em; overflow-wrap:anywhere}
.sf-smeta{margin-top:4px; font-size:var(--cs-meta, 14px); font-weight:500; opacity:.85}
.sf-voice-consumer.sf-branded .sf-header-subject .sf-tile{background:#fff; color:var(--cs-accent)}
.sf-voice-consumer:not(.sf-branded) .sf-header-subject .sf-smeta{color:var(--cs-text-meta); opacity:1}

/* group: rows in one card, hairline dividers, a drawn chevron on a row that opens something */
.sf-group{display:flex; flex-direction:column; background:var(--cs-surface-card, #fff);
  border:1px solid var(--cs-line-hairline, var(--sf-line)); border-radius:var(--cs-r-card, 16px); overflow:hidden}
.sf-voice-consumer .sf-group > .sf-card,.sf-group > .sf-card{border:0; border-radius:0; min-height:64px; padding:12px 14px}
.sf-group > .sf-card + .sf-card{border-top:1px solid var(--cs-line-hairline, var(--sf-line))}
.sf-group > a.sf-card::after{content:""; flex:none; width:8px; height:8px; margin:0 4px 0 2px;
  border-top:2px solid var(--cs-text-meta, #57534E); border-right:2px solid var(--cs-text-meta, #57534E);
  transform:rotate(45deg); opacity:.55}
.sf-group > a.sf-card:hover{background:var(--cs-surface-canvas, #F7F3EC)}
.sf-group .sf-tile{width:44px; height:44px; font-size:18px}

/* emphasis-led row: the emphasis line first (accent, the card size), the Thing that gives it place under it */
.sf-voice-consumer .sf-cemph + .sf-cplace,.sf-cemph + .sf-cplace{margin-top:2px}
.sf-voice-consumer .sf-cbody > .sf-cemph:first-child{margin-top:0; font-size:15px; font-weight:700; line-height:1.3}
.sf-cname-in{display:inline; font-size:inherit !important; font-weight:600 !important; line-height:inherit !important;
  color:var(--cs-text-ink, var(--sf-ink))}

/* act panel: the step before a deliberate act; the act own screens are not styled here */
.sf-act{margin-top:var(--cs-s4, 16px); background:var(--cs-surface-card, #fff); border:1px solid var(--cs-line-hairline, var(--sf-line));
  border-radius:var(--cs-r-card, 16px); overflow:hidden}
.sf-act-h{padding:16px 16px 14px; background:color-mix(in srgb, var(--cs-accent, var(--sf-accent)) 9%, #fff)}
.sf-act-l{margin:0 0 6px; font-size:var(--cs-label, 12px); font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cs-accent, var(--sf-accent))}
.sf-act-t{margin:0; font-family:var(--cs-font-ui, inherit); font-size:19px; font-weight:800; line-height:1.25; letter-spacing:-.01em;
  overflow-wrap:anywhere}
.sf-act-h .sf-rbody{margin-top:6px}
.sf-act-b{padding:0 16px 14px}
.sf-act-b .sf-actions{margin-top:14px}
.sf-act-b .sf-status{margin-top:12px}

/* status line: body type with a tone dot */
.sf-status{position:relative; margin:0 0 var(--cs-s3, 12px); padding-left:16px; font-size:var(--cs-meta, 14px);
  font-weight:500; line-height:1.45; color:var(--cs-text-meta, var(--sf-2))}
.sf-status::before{content:""; position:absolute; left:1px; top:.5em; width:7px; height:7px; border-radius:50%; background:#8A8F98}
.sf-dot-done::before{background:var(--cs-success, #2E7D3F)}
.sf-dot-later::before{background:#C0841A}
.sf-dot-needs::before{background:#B42318}

/* sections on a pass: the map heading rides inside the map wrap; the canvas rhythm is the consumer block's */

.sf-voice-consumer .sf-maptitle{font-family:var(--cs-font-place); font-weight:600; font-size:var(--cs-section); line-height:1.45;
  letter-spacing:-.02em; text-transform:none; color:var(--cs-text-ink); margin:0 0 13px}
.sf-group > .sf-card-rich{align-items:center}
.sf-group > a.sf-card::after{align-self:center}
.sf-voice-consumer .sf-mapwrap.sf-section{margin-top:var(--cs-s4)}
.sf-voice-consumer .sf-preview + .sf-mapwrap.sf-section{margin-top:0}
.sf-voice-consumer .sf-sname{font-family:var(--cs-font-place)}
/* a status line directly under a section heading is that section's subtitle: tight to the heading, clear of the list */
.sf-voice-consumer .sf-section > .sf-shead + .sf-status,.sf-voice-consumer .sf-section > .sf-label + .sf-status{
  margin:-8px 0 var(--cs-s4); text-wrap:balance}

/* compact map: an orientation frame, not a browsing surface (surface-map.js fits every point into it) */
.sf-map.sf-map-compact{height:232px}
@media (min-width:760px){ .sf-map.sf-map-compact{height:300px} }

/* Ask preview slot (private composition previews only): the Ask bar's shape, inert, a label where the send button goes */
.sf-voice-consumer .sf-askp{cursor:default; min-height:calc(var(--cs-ask-btn) + 8px); padding:4px 6px 4px 18px}
.sf-askp-ph{flex:1; min-width:0; color:var(--cs-text-meta, #57534E); font-size:16px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.sf-askp-tag{flex:none; display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border-radius:999px;
  background:var(--cs-preview-fill, #FCE9C2); color:var(--cs-preview-ink, #7A4F0E); font-size:12px; font-weight:800;
  letter-spacing:.04em}
.sf-askp-ctx{flex:none; max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:4px 10px;
  border-radius:999px; background:color-mix(in srgb, var(--cs-accent, var(--sf-accent)) 10%, #fff);
  color:var(--cs-accent, var(--sf-accent)); font-size:12.5px; font-weight:700}
.sf-askp-wrap .cs-rail{margin-top:10px}
.sf-askp-chip{cursor:default}
.sf-voice-consumer .sf-cover .sf-askp-wrap{margin-top:var(--cs-title-below)}
.sf-voice-consumer .sf-cover-photo{--cs-rail-bg:#161B22}
/* sticky: the contextual slot at the foot of the screen; the page keeps room for it */
.sf-askp-sticky{position:sticky; bottom:0; z-index:5; margin:var(--cs-s4, 16px) calc(-1 * var(--cs-gutter, 16px)) 0;
  padding:10px var(--cs-gutter, 16px) calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(247,243,236,0), var(--cs-surface-canvas, #F7F3EC) 28%)}
.sf-askp-sticky .sf-askp{box-shadow:0 2px 14px rgba(22,25,29,.10); border:1px solid var(--cs-line-hairline, #E6DFD2)}

/* the pass's Thing page, named in its title band: the same parts, a tighter rhythm */
.sf-voice-consumer .sf-stack > .sf-header-subject + .sf-preview{margin:12px 0 0}
.sf-voice-consumer .sf-preview + .sf-act{margin-top:4px}
.sf-voice-consumer .sf-detail-named{margin-top:4px}
.sf-voice-consumer .sf-detail-named .sf-dbody{padding-top:10px}
.sf-voice-consumer .sf-detail-named .sf-facts{margin-bottom:8px}
.sf-voice-consumer .sf-detail-named .sf-partof{margin:14px 0 0}
/* the photo band grows with its content: identity row in flow at the top, the rest at the foot, never overlapping */
.sf-voice-consumer .sf-cover-photo .sf-cover-in{flex:1; display:flex; flex-direction:column; justify-content:flex-end}
.sf-voice-consumer .sf-cover-photo .sf-heroid{position:static; margin-bottom:auto; padding-bottom:28px}

/* CS-A1 marker truth: a shared marker's identification list (names, each a link). One Brightr-side style, flagged for
   Design review; not the v0 peek card. */
.sf-mappop{display:flex; flex-direction:column; gap:2px; min-width:180px; font-family:var(--cs-font-ui, inherit)}
.sf-mappop-h{margin:0 0 4px; font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--cs-text-meta, #57534E)}
.sf-mappop-i,.leaflet-container a.sf-mappop-i{display:flex; align-items:center; min-height:44px; padding:0 2px; border-top:1px solid var(--cs-line-hairline, #E6DFD2);
  font-size:14px; font-weight:700; line-height:1.3; color:var(--cs-accent, var(--sf-accent)); text-decoration:none}
.sf-mappop-i:hover,.leaflet-container a.sf-mappop-i:hover{text-decoration:underline}
/* CS-A1 rule 2a: a single item's identification is a NAME TAG joined to the point (the name alone, sized to its text),
   not a panel. Names are type.action with a trailing chevron, ink or accent per the v1 Button rules. */
.leaflet-popup.sf-maptag-wrap .leaflet-popup-content-wrapper{padding:0; border-radius:14px; box-shadow:0 2px 10px rgba(22,25,29,.18)}
.leaflet-popup.sf-maptag-wrap .leaflet-popup-content{margin:0; width:auto !important}
.sf-maptag{display:flex; width:max-content; max-width:240px}
.sf-maptag .sf-mappop-i,.leaflet-container .sf-maptag a.sf-mappop-i{border-top:0; padding:6px 16px; white-space:normal;
  max-width:240px}
.sf-mappop-i,.leaflet-container a.sf-mappop-i{font-size:var(--cs-action, 14px); font-weight:800}
.leaflet-interactive:focus-visible{outline:3px solid var(--sf-focus, #2B5DAA); outline-offset:2px}
/* a fact value may span lines (the Event detail's Where: the place's name, then its address) */
.sf-fact dd{white-space:pre-line}
/* brief map: the shallowest orientation frame, for compositions where the list must start sooner (Events) */
.sf-map.sf-map-brief{height:176px}
@media (min-width:760px){ .sf-map.sf-map-brief{height:240px} }
/* The program mark keeps ITS OWN proportions: never stretched by the band's column layout (align-self), sized by height
   only, and a little larger on wide screens so its tagline stays legible. */
.sf-voice-consumer .sf-cover-mark{align-self:flex-start; width:auto; height:62px; max-width:100%; object-fit:contain}
@media (min-width:760px){ .sf-voice-consumer .sf-cover-mark{height:84px} }

/* Map polish, PREVIEW (Matt, 2026-10-02): only maps drawn with polish=True carry .sf-map-polish / pins. */
.sf-map-polish.leaflet-container,.sf-map-polish .leaflet-popup-content{font-family:inherit}.sf-pinwrap{background:none;border:0}.sf-pin{display:block;box-sizing:border-box;width:18px;height:18px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 1px 4px rgba(22,25,29,.35)}.sf-pin-n{width:26px;height:26px;color:#fff;font-size:12px;font-weight:800;line-height:21px;text-align:center}.sf-pin-num{width:28px;height:28px;line-height:23px;font-size:12.5px;white-space:nowrap}.sf-pin-e{width:30px;height:30px;background:#fff;border-width:2.5px;border-style:solid;font-size:16px;line-height:25px;text-align:center}.sf-map-polish .leaflet-bar{border:0;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(22,25,29,.18)}.sf-map-polish .leaflet-bar a{width:36px;height:36px;line-height:34px;font-size:18px;color:#1d1a16;background:#fff}@media (max-width:599px){.sf-map-polish .leaflet-control-zoom{display:none}}.sf-attr{display:flex;flex-direction:row-reverse;align-items:center;gap:6px;margin:0 8px 8px 0}.sf-attr-b{width:24px;height:24px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#444;font:italic 700 13px/24px Georgia,serif;cursor:pointer;box-shadow:0 1px 3px rgba(22,25,29,.25)}.sf-attr-t{background:rgba(255,255,255,.94);border-radius:8px;padding:3px 8px;font-size:11px;line-height:1.4;color:#444}.sf-attr-t[hidden]{display:none}.sf-mapmore{margin:0 0 10px 10px;padding:7px 12px;border:0;border-radius:999px;background:#fff;color:#1d1a16;font:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(22,25,29,.18)}.sf-tone-cream .leaflet-tile-pane{filter:sepia(.2) saturate(1.08) brightness(1.02) contrast(1.14)}.sf-credit-open .sf-mapmore{visibility:hidden}.sf-tone-muted .leaflet-tile-pane{filter:saturate(.45) sepia(.2) brightness(1.04) contrast(1.06)}.sf-tone-soft .leaflet-tile-pane{filter:saturate(.62) sepia(.14) brightness(1.02) contrast(1.04)}.sf-map-polish.leaflet-container:focus:not(:focus-visible),.sf-map-polish :focus:not(:focus-visible){outline:none}.sf-locate{width:auto!important;height:34px;padding:0 12px 0 10px!important;gap:6px;border-radius:999px!important;font:inherit;font-size:13px;font-weight:700;color:#1d1a16}.sf-locate svg{width:15px;height:15px;flex:none}.sf-locate span{display:none}
.sf-locate{width:36px;height:36px;padding:0;border:0;border-radius:12px;background:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(22,25,29,.18);display:flex;align-items:center;justify-content:center}.sf-locate span{width:14px;height:14px;border-radius:50%;border:2px solid #2B6CD8;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #2B6CD8}.sf-locate[aria-busy=true] span{opacity:.45}.sf-locnote{margin:8px 2px 0;font-size:13px;color:#2B6CD8;font-weight:650}
.sf-pillwrap{background:none;border:0}.sf-pill{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;height:26px;padding:0 10px 0 4px;border-radius:999px;background:#fff;color:#1d1a16;font-size:12.5px;font-weight:700;line-height:1;white-space:nowrap;box-shadow:0 1px 5px rgba(22,25,29,.28)}.sf-pill i{flex:none;width:16px;height:16px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 0 0 1px rgba(22,25,29,.12)}.sf-pill-l{flex-direction:row-reverse;padding:0 4px 0 10px}.sf-mk-on .sf-pill{box-shadow:0 0 0 2px #1d1a16,0 1px 5px rgba(22,25,29,.28)}