/* ============================================================================
   sp.css
   THE SAFER PLACES STUDY. One stylesheet, loaded by all four concepts and the
   index, on top of appts-shell.css (the real design system) and nx.css (the
   shared widgets). Nothing in here redefines a token: every colour, radius,
   font and easing below comes from the shell, so a concept cannot drift away
   from the app it is meant to be part of.

   THE ONE THING THIS FILE ADDS is the level scale, because the four risk
   levels are the study's whole argument and they need a colour that survives
   both themes. The raw brand hexes fail contrast as small text on a tint, so
   light mode gets deeper values. This is the same treatment Nexus gives its
   RAG ratings and for the same reason.

   PREFIX RULE: everything here is .sp-. No bare descendant selectors, no
   restyling of a shell class, and nothing that could reach into .card, .btn,
   .sheet or .page. That rule exists because breaking it has re-skinned
   unrelated pages three times on this project.
   ========================================================================== */

:root{
  --sp-safe:#43D1C7;   --sp-safe-s:rgba(0,164,153,.16);
  --sp-low:#6FC0F0;    --sp-low-s:rgba(79,176,236,.15);
  --sp-raised:#E0AC4E; --sp-raised-s:rgba(217,154,43,.17);
  --sp-high:#EE7FA6;   --sp-high-s:rgba(224,86,138,.17);
  --sp-ink-map:rgba(255,255,255,.06);
}
html[data-theme="light"]{
  --sp-safe:#00857C;   --sp-safe-s:rgba(0,164,153,.13);
  --sp-low:#0077C8;    --sp-low-s:rgba(0,119,200,.11);
  --sp-raised:#8A5A0F; --sp-raised-s:rgba(185,138,47,.16);
  --sp-high:#B52555;   --sp-high-s:rgba(181,37,85,.11);
  --sp-ink-map:rgba(31,42,68,.05);
}
/* No underline on a link, in any state. A standing rule, restated here so a
   concept cannot lose it by loading a stylesheet in a different order. */
.sp-a,.sp-a:hover,.sp-a:focus{text-decoration:none}
/* ==========================================================================
   THE HERO GLASS PANEL
   The single most important live thing, on the photograph. Every concept fills
   it with something different, which is most of what makes them different.
   ========================================================================== */
.sp-glass{background:var(--hero-glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--hero-hair);border-radius:var(--r-lg);padding:22px 24px;min-width:290px;
  max-width:390px;align-self:end;color:#fff}
.sp-g-k{display:block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.62);margin-bottom:13px}
.sp-g-rows{display:flex;flex-direction:column;gap:11px}
.sp-g-row{display:flex;align-items:baseline;gap:10px}
.sp-g-row b{font-family:var(--display);font-size:27px;font-weight:650;letter-spacing:-.03em;
  line-height:1;min-width:46px}
.sp-g-row span{font-size:13px;color:rgba(255,255,255,.72);line-height:1.35}
.sp-g-p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.8);margin-top:15px}
.sp-g-p b{color:#fff;font-weight:600}
.sp-g-acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.sp-g-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden;margin-top:14px;display:flex}
.sp-g-bar i{display:block;height:100%}
/* ==========================================================================
   THE LEVEL SCALE. The study's argument, drawn.
   ========================================================================== */
.sp-lv{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;border-radius:999px;
  font-size:11.5px;font-weight:650;letter-spacing:.01em;white-space:nowrap;border:1px solid transparent}
.sp-lv i{width:9px;height:9px;border-radius:50%;display:block;flex:none}
.sp-lv-safe{background:var(--sp-safe-s);color:var(--sp-safe);border-color:var(--sp-safe-s)}
.sp-lv-safe i{background:var(--sp-safe)}
.sp-lv-low{background:var(--sp-low-s);color:var(--sp-low);border-color:var(--sp-low-s)}
.sp-lv-low i{background:var(--sp-low)}
.sp-lv-raised{background:var(--sp-raised-s);color:var(--sp-raised);border-color:var(--sp-raised-s)}
.sp-lv-raised i{background:var(--sp-raised)}
.sp-lv-high{background:var(--sp-high-s);color:var(--sp-high);border-color:var(--sp-high-s)}
.sp-lv-high i{background:var(--sp-high)}
/* The scale itself, shown once per concept so the four levels are legible as a
   scale rather than four unrelated badges. */
.sp-scale{display:flex;gap:0;border-radius:999px;overflow:hidden;border:1px solid var(--hair)}
.sp-scale span{flex:1;padding:9px 6px;text-align:center;font-size:11px;font-weight:650;
  letter-spacing:.02em;color:var(--ink-3);background:var(--raise)}
.sp-scale span.on{color:#fff}
.sp-scale span.on.l0{background:var(--sp-safe)}
.sp-scale span.on.l1{background:var(--sp-low)}
.sp-scale span.on.l2{background:var(--sp-raised)}
.sp-scale span.on.l3{background:var(--sp-high)}
html[data-theme="light"] .sp-scale span.on{color:#fff}
/* ==========================================================================
   SEGMENTED CONTROLS AND CHIPS
   ========================================================================== */
.sp-seg{display:inline-flex;background:var(--raise);border:1px solid var(--hair);border-radius:999px;
  padding:4px;gap:3px;flex-wrap:wrap}
.sp-seg button{border:none;background:transparent;color:var(--ink-3);font:inherit;font-size:13px;
  font-weight:600;padding:8px 15px;border-radius:999px;cursor:pointer;transition:all .22s var(--ease);
  display:inline-flex;align-items:center;gap:7px}
.sp-seg button:hover{color:var(--ink)}
.sp-seg button[aria-pressed="true"]{background:var(--secondary);color:#fff}
.sp-seg-quiet button[aria-pressed="true"]{background:var(--raise-2);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--hair-2)}
.sp-chips{display:flex;flex-wrap:wrap;gap:7px}
.sp-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  background:var(--raise);border:1px solid var(--hair);font-size:11.5px;font-weight:600;color:var(--ink-2)}
.sp-chip svg{opacity:.65}
.sp-chip-on{background:var(--secondary);border-color:transparent;color:#fff}
.sp-chip-on svg{opacity:1}
button.sp-chip{cursor:pointer;font-family:inherit;transition:all .2s var(--ease)}
button.sp-chip:hover{background:var(--raise-2);color:var(--ink)}
/* ==========================================================================
   THE PLACE CARD. One component, four sizes, used everywhere.
   ========================================================================== */
.sp-card{background:var(--raise);border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .25s var(--ease),transform .25s var(--spring);text-align:left;width:100%;
  display:block;font:inherit;color:inherit}
button.sp-card{cursor:pointer}
button.sp-card:hover{border-color:var(--hair-2);transform:translateY(-2px)}
.sp-card-h{display:flex;gap:13px;align-items:flex-start;padding:17px 18px 0}
.sp-card-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--raise-2);color:var(--ink-2)}
.sp-card-ic.t-protect{background:var(--sp-safe-s);color:var(--sp-safe)}
.sp-card-ic.t-difficult{background:var(--sp-high-s);color:var(--sp-high)}
.sp-card-ic.t-practical{background:var(--sp-low-s);color:var(--sp-low)}
.sp-card-tx{flex:1;min-width:0}
.sp-card-tx h4{font-family:var(--display);font-size:16.5px;font-weight:650;letter-spacing:-.02em;
  line-height:1.25;margin-bottom:3px}
.sp-card-tx p{font-size:12.5px;color:var(--ink-3);line-height:1.4}
.sp-card-b{padding:13px 18px 0}
.sp-card-b p{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.sp-card-f{padding:14px 18px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sp-card-meta{margin-left:auto;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.sp-card-strip{height:3px;display:block}
.sp-card.on{border-color:var(--secondary)}
/* the compact row, for rails and lists where a card is too much */
.sp-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);
  background:var(--raise);border:1px solid transparent;cursor:pointer;text-align:left;width:100%;
  font:inherit;color:inherit;transition:all .2s var(--ease)}
.sp-row:hover{background:var(--raise-2);border-color:var(--hair)}
.sp-row.on{border-color:var(--secondary);background:var(--raise-2)}
.sp-row-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none}
.sp-row-tx{flex:1;min-width:0}
.sp-row-tx b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-row-tx span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-row-r{flex:none;text-align:right;font-size:11.5px;color:var(--ink-3);line-height:1.35}
.sp-row-r b{display:block;font-size:13px;color:var(--ink-2);font-weight:650}
/* ==========================================================================
   THE RECORD. The pin as a risk and protective factor record, which is the
   biggest single change from the live page.
   ========================================================================== */
.sp-kv{display:grid;grid-template-columns:130px minmax(0,1fr);gap:11px 16px;font-size:13.5px;
  line-height:1.55;align-items:start}
@media(max-width:560px){.sp-kv{grid-template-columns:minmax(0,1fr);gap:3px 0}
  .sp-kv dt{margin-top:11px}}
.sp-kv dt{color:var(--ink-3);font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding-top:2px}
.sp-kv dd{color:var(--ink-2)}
.sp-kv dd.q{color:var(--ink)}
.sp-meter{display:flex;align-items:center;gap:11px}
.sp-meter-t{flex:1;height:8px;border-radius:99px;background:var(--raise-2);overflow:hidden;
  min-width:90px;max-width:220px}
.sp-meter-t i{display:block;height:100%;border-radius:99px}
.sp-meter b{font-family:var(--display);font-size:17px;font-weight:650;letter-spacing:-.02em}
.sp-meter span{font-size:12px;color:var(--ink-3)}
.sp-photo{width:100%;height:120px;border-radius:var(--r-md);border:1px solid var(--hair);
  display:grid;place-items:center;background:var(--raise-2);color:var(--ink-3);font-size:12px;
  gap:7px;text-align:center;padding:14px}
/* the exit plan: ordered, because the order is the plan */
.sp-exit{counter-reset:sp-x;display:flex;flex-direction:column;gap:9px}
.sp-exit li{counter-increment:sp-x;display:flex;gap:12px;align-items:flex-start;
  padding:12px 14px;border-radius:var(--r-md);background:var(--raise);border:1px solid var(--hair);
  font-size:14px;line-height:1.5;color:var(--ink)}
.sp-exit li::before{content:counter(sp-x);flex:none;width:23px;height:23px;border-radius:50%;
  background:var(--secondary);color:#fff;font-size:11.5px;font-weight:700;display:grid;
  place-items:center;margin-top:1px}
.sp-exit-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sp-exit-h b{font-family:var(--display);font-size:16px;font-weight:650;letter-spacing:-.02em}
/* ==========================================================================
   THE MAP FRAME
   ========================================================================== */
.sp-map{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--hair);
  background:var(--raise);min-height:520px}
.sp-map .gmap{position:absolute;inset:0}
/* The location gate. Over the map, because the map is the thing it is about,
   and the rail beside it stays readable and usable underneath. */
.sp-gate{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:22px;
  background:rgba(6,10,18,.62);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
html[data-theme="light"] .sp-gate{background:rgba(240,243,248,.72)}
.sp-gate-in{max-width:400px;text-align:center;padding:26px 24px;border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--hair-2);box-shadow:var(--shadow-lg)}
.sp-gate-ic{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 13px;
  border-radius:50%;background:var(--raise-2);color:var(--secondary-soft)}
.sp-gate-in b{display:block;font-family:var(--display);font-size:19px;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:8px}
.sp-gate-in p{font-size:13.5px;line-height:1.62;color:var(--ink-2);margin:0 0 17px}
.sp-gate-btns{display:flex;flex-direction:column;gap:9px}
.sp-gate-btns .btn{width:100%;justify-content:center}
.sp-gate-note{display:flex;align-items:flex-start;gap:7px;margin-top:15px;text-align:left;
  font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.sp-gate-note svg{flex:none;margin-top:1px}
.sp-map-fb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;text-align:center;padding:34px;color:var(--ink-3)}
.sp-map-fb b{font-family:var(--display);font-size:18px;color:var(--ink-2);font-weight:650}
.sp-map-fb p{font-size:13.5px;max-width:340px;line-height:1.6}
.sp-map-over{position:absolute;left:14px;top:14px;right:14px;display:flex;gap:9px;flex-wrap:wrap;
  pointer-events:none;z-index:3}
.sp-map-over > *{pointer-events:auto}
.sp-map-foot{position:absolute;left:14px;bottom:14px;right:14px;z-index:3;pointer-events:none}
.sp-map-foot > *{pointer-events:auto}
.sp-glasschip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--hair-2);font-size:12.5px;font-weight:600;color:var(--ink);
  cursor:pointer;font-family:inherit;transition:all .2s var(--ease)}
.sp-glasschip:hover{border-color:var(--secondary)}
.sp-glasschip[aria-pressed="true"]{background:var(--secondary);color:#fff;border-color:transparent}
.sp-glasschip i{width:9px;height:9px;border-radius:50%;display:block;flex:none}
.sp-legend{display:flex;flex-wrap:wrap;gap:13px;margin-top:14px;font-size:12px;color:var(--ink-3)}
.sp-legend span{display:inline-flex;align-items:center;gap:7px}
.sp-legend i{width:10px;height:10px;border-radius:50%;display:block;flex:none}
.sp-legend i.ring{background:transparent;border:2px dashed currentColor;width:12px;height:12px}
/* ==========================================================================
   INSIGHTS
   ========================================================================== */
.sp-ins{display:flex;gap:14px;padding:18px 19px;border-radius:var(--r-lg);background:var(--raise);
  border:1px solid var(--hair);align-items:flex-start}
.sp-ins-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}
.sp-ins-tx{flex:1;min-width:0}
.sp-ins-tx h4{font-family:var(--display);font-size:16px;font-weight:650;letter-spacing:-.02em;
  line-height:1.3;margin-bottom:6px}
.sp-ins-tx p{font-size:13.5px;line-height:1.62;color:var(--ink-2)}
.sp-ins-ev{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:11.5px;color:var(--ink-3)}
.sp-ins-ev b{font-weight:600}
.sp-ins-act{margin-top:13px}
.sp-ins.tone-progress .sp-ins-ic{background:var(--sp-safe-s);color:var(--sp-safe)}
.sp-ins.tone-shape .sp-ins-ic{background:var(--sp-low-s);color:var(--sp-low)}
.sp-ins.tone-watch .sp-ins-ic{background:var(--sp-raised-s);color:var(--sp-raised)}
.sp-ins.tone-gap .sp-ins-ic{background:var(--raise-2);color:var(--ink-2)}
.sp-ins.tone-gap{border-style:dashed}
/* ==========================================================================
   THE HEAT GRID. When, not when next.
   ========================================================================== */
.sp-heat{display:grid;grid-template-columns:78px repeat(7,minmax(0,1fr));gap:5px;font-size:11px}
.sp-heat-lab{color:var(--ink-3);font-weight:650;display:flex;align-items:center;
  letter-spacing:.04em;text-transform:uppercase;font-size:10px}
.sp-heat-day{color:var(--ink-3);font-weight:650;text-align:center;padding-bottom:3px;
  letter-spacing:.04em;text-transform:uppercase;font-size:10px}
.sp-heat-c{aspect-ratio:1.5;border-radius:8px;background:var(--sp-ink-map);display:grid;
  place-items:center;color:var(--ink-3);font-size:10.5px;font-weight:700;
  border:1px solid transparent;transition:transform .18s var(--ease)}
.sp-heat-c[data-n]:hover{transform:scale(1.07)}
.sp-heat-c.h1{background:var(--sp-low-s);color:var(--sp-low)}
.sp-heat-c.h2{background:var(--sp-raised-s);color:var(--sp-raised)}
.sp-heat-c.h3{background:var(--sp-high-s);color:var(--sp-high);border-color:var(--sp-high-s)}
@media(max-width:640px){.sp-heat{grid-template-columns:58px repeat(7,minmax(0,1fr));gap:3px}}
/* clusters, drawn as proportion bars rather than as a fake heat blob */
.sp-clus{display:flex;flex-direction:column;gap:11px}
.sp-clus-row{display:flex;align-items:center;gap:13px}
.sp-clus-n{flex:none;width:112px;font-size:12.5px;color:var(--ink-2);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-clus-b{flex:1;height:26px;border-radius:8px;background:var(--raise-2);display:flex;overflow:hidden}
.sp-clus-b i{display:block;height:100%}
.sp-clus-t{flex:none;font-size:11.5px;color:var(--ink-3);width:78px;text-align:right}
/* ==========================================================================
   ROUTES AND PLANS
   ========================================================================== */
.sp-route{padding:17px 18px;border-radius:var(--r-lg);background:var(--raise);
  border:1px solid var(--hair);cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit;
  transition:all .24s var(--ease)}
.sp-route:hover{border-color:var(--hair-2);background:var(--raise-2)}
.sp-route.on{border-color:var(--secondary)}
.sp-route-h{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.sp-route-h b{font-family:var(--display);font-size:16px;font-weight:650;letter-spacing:-.02em;flex:1}
.sp-leg{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2);
  flex-wrap:wrap;line-height:1.5}
.sp-leg em{font-style:normal;color:var(--ink-3)}
.sp-leg i{width:5px;height:5px;border-radius:50%;background:var(--ink-3);display:block;flex:none}
.sp-avoid{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  background:var(--sp-high-s);color:var(--sp-high);font-size:11px;font-weight:650}
.sp-plan{border-radius:var(--r-xl);border:1px solid var(--hair);background:var(--raise);overflow:hidden}
.sp-plan-h{padding:20px 22px;border-bottom:1px solid var(--hair);display:flex;gap:14px;
  align-items:center;flex-wrap:wrap}
.sp-plan-h h3{font-family:var(--display);font-size:21px;font-weight:650;letter-spacing:-.025em;flex:1}
.sp-plan-h .k{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--secondary);margin-bottom:5px}
.sp-plan-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--hair)}
@media(max-width:900px){.sp-plan-cols{grid-template-columns:minmax(0,1fr)}}
.sp-plan-col{background:var(--canvas);padding:19px 20px}
html[data-theme="light"] .sp-plan-col{background:var(--surface,#fff)}
.sp-plan-col h5{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);margin-bottom:13px;display:flex;align-items:center;gap:8px}
.sp-plan-col h5.avoid{color:var(--sp-high)}
.sp-plan-col h5.go{color:var(--sp-safe)}
.sp-plan-list{display:flex;flex-direction:column;gap:8px}
.sp-plan-do{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;
  color:var(--ink-2)}
.sp-plan-do i{flex:none;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--hair-2);
  margin-top:1px;display:block}
.sp-plan-f{padding:16px 22px;border-top:1px solid var(--hair);font-size:13.5px;color:var(--ink-2);
  line-height:1.6;display:flex;gap:11px;align-items:flex-start}
/* ==========================================================================
   THE SAFE ZONE
   ========================================================================== */
.sp-zone{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.sp-zone-c{padding:15px 16px;border-radius:var(--r-lg);background:var(--sp-safe-s);
  border:1px solid rgba(0,164,153,.22);display:flex;gap:12px;align-items:center}
/* SCOPED TO THE TEXT BLOCK, not to the card.
   `.sp-zone-c span` sat at (0,1,1) and beat `.sp-zone-ic` at (0,1,0), so the
   icon's own `display:grid` lost to `display:block` and `place-items:center`
   did nothing: every safe-zone glyph sat in the TOP-LEFT CORNER of its tile
   while the stylesheet said it was centred. Measured, not seen: the svg's
   centre was exactly half its own width off, which is what "flush to the
   corner" looks like in numbers.

   This is the seventh time a bare `.parent element` rule has done this here.
   The fix is not more specificity, it is a selector that cannot reach a
   sibling: these target the TEXT wrapper, and the icon is not inside it. */
.sp-zone-t{min-width:0}
.sp-zone-t b{display:block;font-size:14px;font-weight:650;letter-spacing:-.01em}
.sp-zone-t span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.sp-zone-ic{width:34px;height:34px;border-radius:10px;background:rgba(0,164,153,.18);
  color:var(--sp-safe);display:grid;place-items:center;flex:none}
.sp-zone-state{display:flex;gap:13px;align-items:center;padding:17px 19px;border-radius:var(--r-lg);
  border:1px solid var(--hair);background:var(--raise)}
.sp-zone-state.in{background:var(--sp-safe-s);border-color:rgba(0,164,153,.26)}
/* ==========================================================================
   THE REVIEW LOOP
   ========================================================================== */
.sp-rev{padding:17px 18px;border-radius:var(--r-lg);background:var(--raise);border:1px solid var(--hair)}
.sp-rev.due{border-color:var(--sp-raised);background:var(--sp-raised-s)}
.sp-rev-h{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.sp-rev-h b{font-family:var(--display);font-size:16px;font-weight:650;letter-spacing:-.02em;flex:1}
.sp-rev-q{font-size:14.5px;line-height:1.55;color:var(--ink);margin-bottom:14px}
.sp-rev-acts{display:flex;gap:8px;flex-wrap:wrap}
.sp-rev-b{padding:9px 15px;border-radius:999px;border:1px solid var(--hair-2);background:transparent;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;
  transition:all .2s var(--ease)}
.sp-rev-b:hover{background:var(--raise-2);color:var(--ink);border-color:var(--ink-3)}
.sp-rev-b.down{border-color:var(--sp-safe);color:var(--sp-safe)}
.sp-rev-b.down:hover{background:var(--sp-safe-s)}
.sp-track{display:flex;flex-direction:column;gap:0;position:relative;padding-left:26px}
.sp-track::before{content:'';position:absolute;left:6px;top:9px;bottom:9px;width:1.5px;
  background:var(--hair)}
.sp-track-r{position:relative;padding:11px 0}
.sp-track-r::before{content:'';position:absolute;left:-23px;top:15px;width:12px;height:12px;
  border-radius:50%;border:2.5px solid var(--canvas);background:var(--ink-3)}
html[data-theme="light"] .sp-track-r::before{border-color:#fff}
.sp-track-r.down::before{background:var(--sp-safe)}
.sp-track-r.up::before{background:var(--sp-high)}
.sp-track-r b{font-size:14px;font-weight:600;display:block;letter-spacing:-.01em}
.sp-track-r p{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-top:3px}
.sp-track-r .w{font-size:11px;color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase;
  font-weight:650;display:block;margin-bottom:4px}
/* ==========================================================================
   STATS, NOTES, EMPTY, TOAST
   ========================================================================== */
.sp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.sp-stat{padding:17px 18px;border-radius:var(--r-lg);background:var(--raise);border:1px solid var(--hair)}
.sp-stat b{display:block;font-family:var(--display);font-size:30px;font-weight:650;
  letter-spacing:-.035em;line-height:1}
.sp-stat span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:7px;line-height:1.4}
.sp-stat.l-high b{color:var(--sp-high)}
.sp-stat.l-raised b{color:var(--sp-raised)}
.sp-stat.l-safe b{color:var(--sp-safe)}
.sp-stat.l-low b{color:var(--sp-low)}
.sp-note{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-lg);
  background:var(--raise);border:1px solid var(--hair);font-size:13px;line-height:1.62;
  color:var(--ink-3)}
.sp-note b{color:var(--ink-2);font-weight:600}
.sp-note svg{flex:none;margin-top:2px;opacity:.7}
.sp-empty{padding:34px 26px;border-radius:var(--r-lg);border:1px dashed var(--hair-2);
  text-align:center;font-size:13.5px;color:var(--ink-3);line-height:1.65}
/* ==========================================================================
   THE CLOCK CONSOLE
   Reviewing a page that behaves differently on Friday evening by waiting until
   Friday evening is not reviewing. Every concept carries this.
   ========================================================================== */
.sp-clock{position:fixed;left:18px;bottom:106px;z-index:1300;font-size:12.5px}
.sp-clock-t{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border-radius:999px;
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--hair-2);color:var(--ink-2);font-weight:600;cursor:pointer;font-family:inherit;
  font-size:12.5px}
.sp-clock-t.moved{border-color:var(--secondary);color:var(--secondary)}
.sp-clock-p{position:absolute;left:0;bottom:calc(100% + 10px);width:274px;padding:16px;
  border-radius:var(--r-lg);background:var(--glass);backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);border:1px solid var(--hair-2);display:none}
.sp-clock-p.on{display:block}
.sp-clock-p h5{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);margin-bottom:11px}
.sp-clock-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:11px}
.sp-clock-g button{padding:9px 8px;border-radius:10px;border:1px solid var(--hair);
  background:var(--raise);color:var(--ink-2);font:inherit;font-size:12px;font-weight:600;
  cursor:pointer;transition:all .2s var(--ease)}
.sp-clock-g button:hover{background:var(--raise-2);color:var(--ink);border-color:var(--hair-2)}
@media(max-width:700px){.sp-clock{left:12px;bottom:98px}}
/* ==========================================================================
   THE WORKER VIEW
   Shown to the CLIENT, which is the only way a share is honest.
   ========================================================================== */
.sp-worker{border-radius:var(--r-xl);border:1px solid var(--hair);background:var(--raise);overflow:hidden}
.sp-worker-h{padding:18px 20px;border-bottom:1px solid var(--hair);display:flex;gap:12px;
  align-items:center;flex-wrap:wrap}
.sp-worker-h b{font-family:var(--display);font-size:17px;font-weight:650;letter-spacing:-.02em;flex:1}
.sp-worker-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--hair)}
.sp-worker-c{background:var(--canvas);padding:16px 18px}
html[data-theme="light"] .sp-worker-c{background:#fff}
.sp-worker-c b{display:block;font-family:var(--display);font-size:23px;font-weight:650;
  letter-spacing:-.03em;line-height:1}
.sp-worker-c span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.4}
.sp-worker-f{padding:16px 20px;border-top:1px solid var(--hair);font-size:12.5px;color:var(--ink-3);
  line-height:1.6}
/* ==========================================================================
   THE FIVE DOORS RAIL (concept A) and the general section tabs
   ========================================================================== */
.sp-doors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:8px}
@media(max-width:940px){.sp-doors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.sp-doors{grid-template-columns:minmax(0,1fr)}}
.sp-door{padding:16px 17px;border-radius:var(--r-lg);background:var(--raise);border:1px solid var(--hair);
  text-align:left;cursor:pointer;font:inherit;color:inherit;transition:all .26s var(--spring);
  display:flex;flex-direction:column;gap:9px}
.sp-door:hover{background:var(--raise-2);border-color:var(--hair-2);transform:translateY(-2px)}
.sp-door[aria-current="true"]{border-color:var(--secondary);background:var(--raise-2)}
.sp-door-n{display:flex;align-items:center;gap:9px}
.sp-door-n i{width:26px;height:26px;border-radius:8px;background:var(--raise-2);color:var(--ink-2);
  display:grid;place-items:center;flex:none}
.sp-door[aria-current="true"] .sp-door-n i{background:var(--secondary);color:#fff}
.sp-door-n b{font-family:var(--display);font-size:15.5px;font-weight:650;letter-spacing:-.02em}
.sp-door p{font-size:12px;color:var(--ink-3);line-height:1.45}
.sp-door em{font-style:normal;font-size:11.5px;color:var(--ink-2);font-weight:650}
/* ==========================================================================
   LAYOUT HELPERS used by more than one concept
   ========================================================================== */
.sp-2col{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
@media(max-width:1080px){.sp-2col{grid-template-columns:minmax(0,1fr)}}
.sp-2col-l{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;align-items:start}
@media(max-width:1080px){.sp-2col-l{grid-template-columns:minmax(0,1fr)}}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.sp-grid-2{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.sp-stack{display:flex;flex-direction:column;gap:12px}
.sp-panel{border-radius:var(--r-xl);border:1px solid var(--hair);background:var(--raise);padding:20px 22px}
.sp-panel-h{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sp-panel-h h3{font-family:var(--display);font-size:19px;font-weight:650;letter-spacing:-.025em;flex:1}
.sp-panel-h .k{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--secondary);margin-bottom:5px}
.sp-hr{height:1px;background:var(--hair);margin:22px 0}
/* the boundary statement, on every concept, because a map of somebody's risk
   is the most sensitive thing this app holds */
.sp-bound{display:flex;gap:14px;align-items:flex-start;padding:20px 22px;border-radius:var(--r-lg);
  background:var(--raise);border:1px solid var(--hair)}
.sp-bound p{font-size:13px;line-height:1.7;color:var(--ink-3)}
.sp-bound b{color:var(--ink-2);font-weight:600}
.sp-bound svg{flex:none;margin-top:2px;opacity:.7}
/* ==========================================================================
   THE PULL-UP INTERIOR, REDESIGNED
   The first version was a spec sheet: a segmented control, then sixteen
   key/value rows of equal weight in a 130px label column that wrapped "WHAT
   MAKES IT RISKY" onto three lines. The person's own words about eleven years
   of their life sat in grey, at the same size as the word "Alcohol". Nothing
   in it said what mattered.

   The frame is untouched. nx-core's sheet already carries the focus trap,
   Escape, focus restore, scrim close and drag to dismiss, and rebuilding it
   would be the defect this project keeps re-learning. What changed is what
   goes inside it, and it now has three movements:

     ARRIVE    a bleed hero, tinted by the level, that says what this place is
               and how hard it pulls before a single field is read
     THE WORDS the quote, set as a quote, because it is the whole record
     THE FACTS an editorial grid rather than a form. Labels sit ABOVE values on
               their own rule, so nothing is squeezed into a narrow column and
               a long answer is simply given the width it needs

   Everything below is prefixed .sp-sh and reaches nothing the shell owns.
   ========================================================================== */

/* ONE top-level child, so the shell's entrance animation has one thing to
   move rather than fourteen. And the resting state must be visible without it:
   opacity:0 plus an animation that does not run is a blank pop-out, which has
   bitten this project three times. */
@media (prefers-reduced-motion: reduce){
  .sheet-body > *{opacity:1 !important;transform:none !important;animation:none !important}
}
.sheet-body:has(.sp-sh){padding:0 0 34px}
.sp-sh{display:block}
/* ---- ARRIVE ------------------------------------------------------------ */
.sp-sh-hero{position:relative;padding:26px 0 24px;border-bottom:1px solid var(--hair);
  overflow:hidden}
.sp-sh .sp-sh-hero{padding:26px 28px 24px}
.sp-sh-hero::before{content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(120% 150% at 88% -30%,var(--sh-tint) 0%,transparent 62%)}
html[data-theme="light"] .sp-sh-hero::before{opacity:.72}
.sp-sh-hero > *{position:relative}
.sp-sh-top{display:flex;gap:17px;align-items:flex-start}
.sp-sh-ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;flex:none;
  background:var(--sh-soft);color:var(--sh-tone);border:1px solid var(--sh-edge)}
.sp-sh-idt{flex:1;min-width:0;padding-top:2px}
.sp-sh-k{display:block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3);margin-bottom:9px}
.sp-sh-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sp-sh-far{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
/* the pull, given the room a headline number deserves */
.sp-sh-pull{display:flex;align-items:center;gap:16px;margin-top:22px;padding-top:19px;
  border-top:1px solid var(--hair)}
.sp-sh-pull-n{font-family:var(--display);font-size:38px;font-weight:650;letter-spacing:-.04em;
  line-height:.9;flex:none}
.sp-sh-pull-n em{font-style:normal;font-size:15px;font-weight:500;color:var(--ink-3);
  letter-spacing:-.01em}
.sp-sh-pull-tx{flex:1;min-width:0}
.sp-sh-pull-tx b{display:block;font-size:12.5px;font-weight:650;color:var(--ink-2);
  margin-bottom:8px;letter-spacing:-.005em}
.sp-sh-track{height:6px;border-radius:99px;background:var(--raise-2);overflow:hidden;display:flex}
.sp-sh-track i{display:block;height:100%;border-radius:99px}
/* ---- THE WORDS --------------------------------------------------------- */
.sp-sh-quote{padding:26px 0 24px;border-bottom:1px solid var(--hair)}
.sp-sh .sp-sh-quote{padding:26px 28px 24px}
.sp-sh-quote p{font-family:var(--display);font-size:20px;font-weight:450;line-height:1.5;
  letter-spacing:-.018em;color:var(--ink);position:relative;padding-left:20px}
@media(max-width:560px){.sp-sh-quote p{font-size:17.5px;padding-left:15px}}
.sp-sh-quote p::before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:2px;
  border-radius:2px;background:var(--sh-tone);opacity:.85}
.sp-sh-quote .att{display:block;margin-top:13px;padding-left:20px;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
/* ---- SECTIONS ---------------------------------------------------------- */
.sp-sh-sec{padding:24px 0;border-bottom:1px solid var(--hair)}
.sp-sh .sp-sh-sec{padding:24px 28px}
.sp-sh-sec:last-child{border-bottom:none}
.sp-sh-h{display:flex;align-items:center;gap:11px;margin-bottom:17px}
.sp-sh-h span{font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);white-space:nowrap}
.sp-sh-h i{flex:1;height:1px;background:var(--hair);display:block}
.sp-sh-h b{font-size:11.5px;font-weight:650;color:var(--ink-3);white-space:nowrap}
/* THE FACTS. Label above value on its own rule, so a long answer takes the
   width it needs instead of being squeezed beside a wrapping label. */
.sp-sh-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--hair);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
@media(max-width:600px){.sp-sh-facts{grid-template-columns:minmax(0,1fr)}}
.sp-sh-fact{background:var(--canvas);padding:15px 17px 16px}
html[data-theme="light"] .sp-sh-fact{background:#fff}
.sp-sh-fact.wide{grid-column:1 / -1}
.sp-sh-fact dt{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);margin-bottom:7px}
.sp-sh-fact dd{font-size:14.5px;line-height:1.6;color:var(--ink)}
.sp-sh-fact dd.q{color:var(--ink-2);font-size:14px}
.sp-sh-fact dd em{font-style:normal;color:var(--ink-3)}
/* ---- THE LADDER, for an exit plan -------------------------------------- */
.sp-lad{position:relative;padding-left:44px;counter-reset:sp-l}
.sp-lad::before{content:'';position:absolute;left:14px;top:14px;bottom:16px;width:2px;
  background:linear-gradient(180deg,var(--secondary),var(--hair));border-radius:2px;opacity:.55}
.sp-lad-s{position:relative;padding:0 0 20px}
.sp-lad-s:last-child{padding-bottom:0}
.sp-lad-s::before{counter-increment:sp-l;content:counter(sp-l);position:absolute;left:-44px;top:-2px;
  width:29px;height:29px;border-radius:50%;background:var(--secondary);color:#fff;
  font-size:12.5px;font-weight:700;display:grid;place-items:center}
.sp-lad-s p{font-size:15.5px;line-height:1.55;color:var(--ink);letter-spacing:-.008em}
.sp-lad-s span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:5px;line-height:1.5}
/* ---- THE TIMELINE, for what actually happened -------------------------- */
.sp-tl{position:relative;padding-left:30px}
.sp-tl::before{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:1.5px;
  background:var(--hair)}
.sp-tl-r{position:relative;padding:0 0 22px}
.sp-tl-r:last-child{padding-bottom:0}
.sp-tl-r::before{content:'';position:absolute;left:-30px;top:5px;width:11px;height:11px;
  border-radius:50%;background:var(--ink-3)}
.sp-tl-r.used::before{background:var(--sp-high)}
.sp-tl-r.good::before{background:var(--sp-safe)}
.sp-tl-w{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.sp-tl-w b{font-size:13.5px;font-weight:650;letter-spacing:-.01em}
.sp-tl-w em{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.sp-tl-w .src{margin-left:auto;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3);display:inline-flex;align-items:center;gap:6px}
.sp-tl-r p{font-size:14px;line-height:1.6;color:var(--ink-2)}
.sp-tl-m{display:flex;align-items:center;gap:9px;margin-top:9px}
.sp-tl-m em{font-style:normal;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
/* ---- WHO TO RING ------------------------------------------------------- */
.sp-who{display:flex;align-items:center;gap:15px;padding:15px 17px;border-radius:var(--r-lg);
  background:var(--raise);border:1px solid var(--hair)}
.sp-who-av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--sh-soft);color:var(--sh-tone);font-family:var(--display);font-size:16px;
  font-weight:650;border:1px solid var(--sh-edge)}
.sp-who-tx{flex:1;min-width:0}
.sp-who-tx b{display:block;font-size:15px;font-weight:650;letter-spacing:-.012em}
.sp-who-tx span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px;line-height:1.45}
/* ---- A STAT STRIP inside a pop-out ------------------------------------- */
.sp-sh-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;
  background:var(--hair);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sp-sh-st{background:var(--canvas);padding:17px}
html[data-theme="light"] .sp-sh-st{background:#fff}
.sp-sh-st b{display:block;font-family:var(--display);font-size:26px;font-weight:650;
  letter-spacing:-.035em;line-height:1}
.sp-sh-st span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:7px;line-height:1.4}
/* a quiet full-width note that closes a pop-out honestly */
.sp-sh-foot{padding:20px 0 4px;display:flex;gap:13px;align-items:flex-start}
.sp-sh .sp-sh-foot{padding:20px 28px 4px}
.sp-sh-foot svg{flex:none;margin-top:1px;opacity:.6}
.sp-sh-foot p{font-size:12.5px;line-height:1.65;color:var(--ink-3)}
.sp-sh-foot b{color:var(--ink-2);font-weight:600}
/* ==========================================================================
   THE PULL-UP RAIL
   A wide pop-out navigated by a three-item pill is a card wearing tabs. Given
   820px, the premium pattern is a rail: the sections stand as a list on the
   left, each saying what is behind it, and the standing facts sit under them
   so the level, the last visit and the next review never scroll away while you
   read the exit plan.

   It carries state, not just labels. "If I am here, 4 steps" and "If I am
   here, nothing written yet" are different rails, and the second one is the
   more useful of the two because it tells you there is a job to do.

   On a phone a rail is a bad idea, so below 680px it becomes a horizontal
   strip and the standing facts drop out. They are in the record anyway.
   ========================================================================== */
.sp-sh-split{display:grid;grid-template-columns:216px minmax(0,1fr);align-items:stretch}
.sp-sh-rail{border-right:1px solid var(--hair);background:rgba(0,0,0,.14)}
html[data-theme="light"] .sp-sh-rail{background:rgba(31,42,68,.028)}
.sp-sh-rail-in{position:sticky;top:0;padding:18px 14px 20px;display:flex;flex-direction:column;gap:4px}
.sp-sh-rail-k{font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);padding:0 8px 9px}
.sp-sh-ri{display:flex;gap:11px;align-items:flex-start;padding:10px 11px;border-radius:12px;
  width:100%;text-align:left;font:inherit;color:inherit;background:transparent;
  border:1px solid transparent;cursor:pointer;transition:all .2s var(--ease)}
.sp-sh-ri:hover{background:var(--raise)}
.sp-sh-ri:focus{outline:none}
.sp-sh-ri:focus-visible{outline:2px solid var(--secondary);outline-offset:2px}
.sp-sh-ri[aria-current="true"]{background:var(--raise-2);border-color:var(--hair)}
.sp-sh-ri .ic{width:27px;height:27px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--raise-2);color:var(--ink-3);transition:all .2s var(--ease)}
.sp-sh-ri[aria-current="true"] .ic{background:var(--sh-soft);color:var(--sh-tone)}
.sp-sh-ri .tx{min-width:0;flex:1}
.sp-sh-ri b{display:block;font-size:13.5px;font-weight:650;letter-spacing:-.012em;line-height:1.3}
.sp-sh-ri span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.4}
.sp-sh-ri[aria-current="true"] b{color:var(--ink)}
.sp-sh-ri.todo span{color:var(--sp-raised)}
.sp-sh-rail-f{margin-top:20px;padding:16px 9px 0;border-top:1px solid var(--hair);
  display:flex;flex-direction:column;gap:13px}
.sp-sh-rail-f div{min-width:0}
.sp-sh-rail-f dt{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);margin-bottom:4px}
.sp-sh-rail-f dd{font-size:12.5px;color:var(--ink-2);line-height:1.4}
.sp-sh-pane{min-width:0}
/* the pane owns the gutter now, so a section inside it must not add a second */
.sp-sh .sp-sh-pane .sp-sh-sec{padding:22px 26px}
.sp-sh .sp-sh-pane .sp-sh-sec:first-child{padding-top:20px}
@media(max-width:680px){
  .sp-sh-split{grid-template-columns:minmax(0,1fr)}
  .sp-sh-rail{border-right:none;border-bottom:1px solid var(--hair);background:transparent}
  .sp-sh-rail-in{position:static;flex-direction:row;overflow-x:auto;gap:7px;padding:14px 16px;
    scrollbar-width:none}
  .sp-sh-rail-in::-webkit-scrollbar{display:none}
  .sp-sh-rail-k,.sp-sh-rail-f{display:none}
  .sp-sh-ri{width:auto;flex:none;align-items:center;background:var(--raise);
    border-color:var(--hair);white-space:nowrap}
  .sp-sh-ri span{display:none}
  .sp-sh .sp-sh-pane .sp-sh-sec{padding:20px 18px}
}
/* ==========================================================================
   THE LEVEL SCALE, as a picture of THEIR map rather than a key
   The old block was a four-segment bar with every segment lit and a paragraph
   under each, which explains a scale without ever showing one. This draws the
   person's own places distributed across it, and then draws the MOVES on top,
   because the moves are the entire argument for having four levels instead of
   two. A scale nothing ever moves along may as well be a category.
   ========================================================================== */
.sp-lvs-bar{display:flex;height:14px;border-radius:99px;overflow:hidden;margin-bottom:7px}
.sp-lvs-bar i{display:block;transition:flex .5s var(--spring)}
.sp-lvs-key{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3);
  margin-bottom:24px}
.sp-lvs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:820px){.sp-lvs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.sp-lvs-grid{grid-template-columns:minmax(0,1fr)}}
.sp-lvs-col{background:var(--canvas);padding:19px 18px 20px;display:flex;flex-direction:column}
html[data-theme="light"] .sp-lvs-col{background:#fff}
.sp-lvs-col .top{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.sp-lvs-col .n{font-family:var(--display);font-size:32px;font-weight:650;letter-spacing:-.04em;
  line-height:.9}
.sp-lvs-col .of{font-size:12px;color:var(--ink-3)}
.sp-lvs-col > p{font-size:12.5px;line-height:1.6;color:var(--ink-3);margin:11px 0 15px;
  min-height:3.2em}
.sp-lvs-names{display:flex;flex-direction:column;gap:6px}
.sp-lvs-name{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);
  line-height:1.35;text-align:left;background:none;border:none;font-family:inherit;padding:0;
  cursor:pointer;width:100%}
.sp-lvs-name:hover{color:var(--ink)}
.sp-lvs-name i{width:6px;height:6px;border-radius:50%;flex:none;display:block}
.sp-lvs-name em{font-style:normal;color:var(--ink-3);font-size:11.5px}
.sp-lvs-moves{margin-top:20px;padding:20px 22px;border-radius:var(--r-lg);
  border:1px solid rgba(0,164,153,.24);background:var(--sp-safe-s)}
.sp-lvs-moves h5{font-family:var(--display);font-size:16px;font-weight:650;letter-spacing:-.02em;
  margin-bottom:5px;display:flex;align-items:center;gap:10px}
.sp-lvs-moves > p{font-size:13px;line-height:1.6;color:var(--ink-3);margin-bottom:16px}
.sp-lvs-mv{display:flex;flex-wrap:wrap;gap:10px}
.sp-lvs-m{display:inline-flex;align-items:center;gap:9px;padding:9px 13px;border-radius:999px;
  background:var(--raise);border:1px solid var(--hair);font-size:12.5px;font-weight:600;
  color:var(--ink-2);cursor:pointer;font-family:inherit;transition:all .2s var(--ease)}
.sp-lvs-m:hover{border-color:var(--hair-2);color:var(--ink)}
.sp-lvs-m u{text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-weight:500;
  color:var(--ink-3);font-size:11.5px}
.sp-lvs-m u i{width:7px;height:7px;border-radius:50%;display:block}
/* ==========================================================================
   ADDING A PLACE. The wizard, in the house sheet.

   Scoped .spa- so nothing here can reach the page behind the sheet. Every
   rule that styles text inside a component targets a wrapper the icon is not
   inside, which is the lesson .sp-zone-c span taught this file the hard way.
   ========================================================================== */

/* the stepper: where you are, and how much is left */
.spa-steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.spa-step{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;
  background:var(--raise);border:1px solid var(--hair);font-size:12px;color:var(--ink-3)}
.spa-step i{width:19px;height:19px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--raise-2);font-style:normal;font-size:10.5px;font-weight:700;color:var(--ink-3)}
.spa-step b{font-weight:600}
.spa-step.on{border-color:var(--secondary);background:rgba(181,37,85,.12);color:var(--ink)}
.spa-step.on i{background:var(--secondary);color:#fff}
.spa-step.done i{background:var(--sp-safe);color:#fff}
@media(max-width:620px){.spa-step b{display:none}.spa-step{padding:7px 9px}}
.spa-body{min-height:220px}
.spa-lead{font-size:14.5px;line-height:1.62;color:var(--ink-2);margin-bottom:18px;max-width:64ch}
.spa-lead b{color:var(--ink);font-weight:650}
.spa-sub{font-size:13.5px;line-height:1.6;color:var(--ink-3);margin:18px 0 12px;max-width:64ch}
.spa-note{display:flex;gap:9px;align-items:flex-start;margin-top:16px;font-size:12.5px;
  line-height:1.55;color:var(--ink-3)}
.spa-note svg{flex:none;margin-top:2px}
.spa-note b{color:var(--ink-2);font-weight:600}
.spa-need{font-size:12.5px;color:var(--ink-3);align-self:center}
/* fields */
.spa-field{margin-bottom:16px}
.spa-field label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.spa-field .nx-input{width:100%}
.spa-area{width:100%;resize:vertical;min-height:74px;line-height:1.55;font:inherit;font-size:14px}
.spa-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spa-hint{font-size:12.5px;color:var(--ink-3)}
.spa-or{display:flex;align-items:center;gap:12px;margin:12px 0;color:var(--ink-3);font-size:12px}
/* Address matches. A lookup offers what it found rather than landing you on
   its first guess, because the wrong Wharf Approach looks exactly like the
   right one once the pin is down. */
.spa-hits:not(:empty){display:flex;flex-direction:column;gap:6px;margin-top:10px}
.spa-hit{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--hair-2);
  background:var(--raise-1);color:var(--ink);font:inherit;font-size:13px;
  cursor:pointer;transition:border-color .2s,background .2s}
.spa-hit:hover{border-color:var(--secondary);background:var(--raise-2)}
.spa-hit svg{flex:none;color:var(--secondary-soft)}
.spa-hit span{min-width:0}
.spa-or::before,.spa-or::after{content:"";flex:1;height:1px;background:var(--hair)}
/* the little map, on the two steps where a distance is the answer */
.spa-map{position:relative;height:280px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--hair);background:var(--raise);margin-top:14px}
.spa-map-fb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;text-align:center;padding:26px;color:var(--ink-3)}
.spa-map-fb b{font-family:var(--display);font-size:16px;color:var(--ink-2);font-weight:650}
.spa-map-fb p{font-size:13px;max-width:300px;line-height:1.55}
.spa-priv{display:flex;gap:9px;align-items:flex-start;margin-top:14px;font-size:12.5px;
  line-height:1.55;color:var(--ink-3)}
.spa-priv svg{flex:none;margin-top:2px}
/* the nine types */
.spa-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.spa-type{display:flex;gap:13px;align-items:flex-start;padding:15px 16px;border-radius:var(--r-md);
  background:var(--raise);border:1px solid var(--hair);text-align:left;width:100%;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.spa-type:hover{background:var(--raise-2);border-color:var(--hair-2);transform:translateY(-1px)}
.spa-type[aria-pressed="true"]{border-color:var(--secondary);background:rgba(181,37,85,.12)}
.spa-type .ic{width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--raise-2);color:var(--ink-2)}
.spa-type.tone-protect .ic{background:rgba(0,164,153,.16);color:var(--sp-safe)}
.spa-type.tone-difficult .ic{background:rgba(224,86,138,.16);color:var(--sp-high)}
.spa-type.tone-practical .ic{background:rgba(79,176,236,.16);color:var(--sp-low)}
.spa-type .tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.spa-type .tx b{font-size:14.5px;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.spa-type .tx span{font-size:12.5px;color:var(--ink-3);line-height:1.45}
/* the four levels */
.spa-levels{display:flex;flex-direction:column;gap:9px}
.spa-level{display:flex;gap:13px;align-items:flex-start;padding:15px 16px;border-radius:var(--r-md);
  background:var(--raise);border:1px solid var(--hair);text-align:left;width:100%;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.spa-level:hover{background:var(--raise-2);border-color:var(--hair-2)}
.spa-level[aria-pressed="true"]{border-color:var(--lv);background:color-mix(in srgb,var(--lv) 12%,transparent)}
.spa-level .dot{width:14px;height:14px;border-radius:50%;flex:none;margin-top:3px;
  background:var(--lv);box-shadow:0 0 0 3px color-mix(in srgb,var(--lv) 22%,transparent)}
.spa-level .tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.spa-level .tx b{font-size:14.5px;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.spa-level .tx span{font-size:12.5px;color:var(--ink-3);line-height:1.45}
/* when it is hardest */
.spa-grp{margin-bottom:14px}
.spa-grp-h{display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.spa-chips{display:flex;gap:8px;flex-wrap:wrap}
.spa-chip{padding:9px 15px;border-radius:999px;background:var(--raise);border:1px solid var(--hair);
  font-size:13px;font-weight:600;color:var(--ink-2);transition:all .2s var(--bounce)}
.spa-chip:hover{background:var(--raise-2);color:var(--ink)}
.spa-chip[aria-pressed="true"]{background:var(--secondary);border-color:var(--secondary);color:#fff}
/* how close counts */
.spa-radius{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.spa-range{flex:1;min-width:200px;accent-color:var(--sp-safe);height:26px}
.spa-radius-r{flex:none;text-align:right;min-width:110px}
.spa-radius-r b{display:block;font-family:var(--display);font-size:24px;font-weight:700;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.spa-radius-r span{display:block;font-size:12px;color:var(--ink-3);margin-top:3px}
.spa-zone{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;margin-top:14px;
  padding:14px 16px;border-radius:var(--r-md);background:var(--raise);border:1px solid var(--hair)}
.spa-zone:hover{background:var(--raise-2)}
.spa-zone[aria-pressed="true"]{border-color:var(--sp-safe);background:rgba(0,164,153,.12)}
.spa-zone .box{width:21px;height:21px;border-radius:6px;flex:none;display:grid;place-items:center;
  background:var(--raise-2);border:1px solid var(--hair-2);color:transparent}
.spa-zone[aria-pressed="true"] .box{background:var(--sp-safe);border-color:var(--sp-safe);color:#fff}
.spa-zone .tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.spa-zone .tx b{font-size:14px;font-weight:650;color:var(--ink)}
.spa-zone .tx span{font-size:12.5px;color:var(--ink-3);line-height:1.45}
/* what the map can say now */
.spa-done{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:var(--r-lg);
  border:1px solid rgba(0,164,153,.4);background:rgba(0,164,153,.1)}
.spa-done .tick{width:48px;height:48px;border-radius:15px;flex:none;display:grid;place-items:center;
  background:var(--sp-safe);color:#fff}
.spa-done h4{font-family:var(--display);font-size:19px;font-weight:650;letter-spacing:-.024em;
  margin-bottom:4px}
.spa-done p{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.spa-learn{list-style:none;display:flex;flex-direction:column;gap:1px;border-radius:var(--r-md);
  overflow:hidden;border:1px solid var(--hair)}
.spa-learn li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--raise);
  font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.spa-learn li svg{flex:none;margin-top:2px;color:var(--sp-safe)}
.spa-learn li.soft{color:var(--ink-3)}
.spa-learn li.soft svg{color:var(--ink-3)}
.spa-learn b{color:var(--ink);font-weight:650}
/* the entry point */
.sp-hero-acts{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}
.sp-addbtn{display:inline-flex;align-items:center;gap:9px}

/* The .sp-toast rules were removed when the seven toast implementations became
   one. Nothing renders that class any more: NX.notify in nx-core.js builds a
   single .toast .nx-toast for every surface, and its look is in
   appts-shell.css where one definition serves all of them. */