/* ==========================================================================
   SEEYOUSOON — HOME (B1 and its states): THE OBSIDIAN LAYER (Wave 10 lane 2)
   B1 rebuilt in Apple proportions on contract C3's staircase. Dark obsidian is the default (C2: nothing stored is
   'dark'), and «Ljus» turns all of it to paper: every surface here is a C3 token, set below for the home screens only,
   so this layer sits above the app-wide tokens (css/tokens.css, lane 4) and never shadows them elsewhere. No muddy
   grey anywhere: the old indigo slabs and slate glass are gone, and so are the menu's dead rules (B2 draws itself
   with its own b2 classes, css/b2-apple-menu.css).
   Hex values below are the C3 staircase, the service hues and the system tints (green, amber, orange) only.
   ========================================================================== */

/* ── C3 on the home screens ──────────────────────────────────────────────── */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) {
  --sys-canvas: #050510;
  --sys-base: #090B10;
  --sys-raised: #0C0E14;
  --sys-raised-2: #12141C;
  --sys-raised-3: #181B25;
  --sys-glass: rgba(9, 11, 16, 0.82);
  --sys-glass-strong: rgba(12, 14, 20, 0.92);
  --sys-hairline: rgba(255, 255, 255, 0.08);
  --sys-edge: rgba(255, 255, 255, 0.12);
  --sys-label: #F8FAFC;
  --sys-label-2: rgba(235, 235, 245, 0.72);
  --sys-label-3: rgba(235, 235, 245, 0.46);
  --sys-accent: #A855F7;
  --sys-accent-ink: #C4B5FD;
  /* the system tints and the shadows of the floating material */
  --b1-green: #30D158;
  --b1-amber: #FFB340;
  --b1-orange: #FF9F0A;
  --b1-float-shadow: 0 6px 20px rgba(0, 0, 0, 0.42);
  --b1-sheet-shadow: 0 -10px 36px rgba(0, 0, 0, 0.55);
  --b1-card-shadow: 0 18px 48px rgba(0, 0, 0, 0.62);
  --b1-specular: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --b1-spring: cubic-bezier(0.32, 0.72, 0, 1);
  /* the head's top: under the status bar, whatever the phone's notch */
  --b1-head-top: max(44px, calc(env(safe-area-inset-top, 0px) + 6px));
  /* the sheet's stops (css/frame.css «Sheets»): peek shows the greeting and the search, rest leaves the map 430 px,
     open stops under the filter pills (and under the live capsule while it shows) */
  --sheet-peek: calc(118px + env(safe-area-inset-bottom, 0px));
  --sheet-cap: calc(100cqh - 430px);
  --sheet-open: calc(var(--b1-head-top) + 104px);
  --sheet-bg: var(--sys-base);
  color: var(--sys-label);
}
#screen-outlet [data-screen="B1"]:has([data-section="live"]:not([hidden])) {
  --sheet-open: calc(var(--b1-head-top) + 160px);
}

html[data-theme="light"] #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]),
html[data-apple-theme="light"] #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) {
  color-scheme: only light;
  --sys-canvas: #FAF9F6;
  --sys-base: #F4F3EF;
  --sys-raised: #FFFFFF;
  --sys-raised-2: #F1F0EC;
  --sys-raised-3: #E8E6E1;
  --sys-glass: rgba(255, 255, 255, 0.84);
  --sys-glass-strong: rgba(255, 255, 255, 0.92);
  --sys-hairline: rgba(5, 5, 16, 0.08);
  --sys-edge: rgba(5, 5, 16, 0.12);
  --sys-label: #050510;
  /* round 47: the app-wide tones (css/tokens.css), 4.5:1 on every surface here; at .48 the third read 2.7 */
  --sys-label-2: rgba(60, 60, 67, 0.84);
  --sys-label-3: rgba(60, 60, 67, 0.78);
  --sys-accent: #8B3FD9;
  --sys-accent-ink: #6D28D9;
  --b1-green: #248A3D;
  --b1-amber: #B45309;
  --b1-orange: #FF9500;
  --b1-float-shadow: 0 4px 16px rgba(5, 5, 16, 0.10);
  --b1-sheet-shadow: 0 -8px 30px rgba(5, 5, 16, 0.10);
  --b1-card-shadow: 0 16px 40px rgba(5, 5, 16, 0.14);
  --b1-specular: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* the service hues (and the light ink of each, for its glyph on paper) */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-hue-taxi) { --hue: #A855F7; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-hue-food) { --hue: #F97316; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-hue-beauty) { --hue: #EC4899; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-hue-cleaning) { --hue: #14B8A6; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-hue-moving) { --hue: #6366F1; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-hue-carwash) { --hue: #06B6D4; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-hue-crafts) { --hue: #EAB308; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-hue-shopping) { --hue: #84CC16; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-hue-travel) { --hue: #38BDF8; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-hue-parcel) { --hue: #F59E0B; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-hue-grocery) { --hue: #22C55E; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-hue-freight) { --hue: #7C3AED; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-hue-vehicle) { --hue: #F59E0B; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-hue-dackhotell) { --hue: #0EA5E9; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-hue-pets) { --hue: #F43F5E; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) [class*="sys-hue-"] { --hue-ink: var(--hue); }
html[data-theme="light"] #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) [class*="sys-hue-"],
html[data-apple-theme="light"] #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) [class*="sys-hue-"] {
  --hue-ink: color-mix(in srgb, var(--hue) 76%, #050510);
}

/* the map pins' accents (map.js sets data-pin-sector; home-map-directory.js the card's and the chips') */
[data-pin-sector="taxi"], [data-pin-sector="taxi_company"] { --pin-accent: #A855F7; }
[data-pin-sector="food"], [data-pin-sector="groceries"] { --pin-accent: #F97316; }
[data-pin-sector="beauty"] { --pin-accent: #EC4899; }
[data-pin-sector="cleaning"] { --pin-accent: #14B8A6; }
[data-pin-sector="moving"] { --pin-accent: #6366F1; }
[data-pin-sector="freight"] { --pin-accent: #7C3AED; }
[data-pin-sector="carwash"] { --pin-accent: #06B6D4; }
[data-pin-sector="vehicle"], [data-pin-sector="crafts"] { --pin-accent: #F59E0B; }
[data-pin-sector="shopping"] { --pin-accent: #84CC16; }
[data-pin-sector="travel"] { --pin-accent: #0EA5E9; }
[data-pin-sector="dackhotell"] { --pin-accent: #0EA5E9; }
[data-pin-sector="pets"] { --pin-accent: #F43F5E; }

/* ── The canvas and the map ──────────────────────────────────────────────── */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-root,
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-map-slot {
  background-color: var(--sys-canvas);
}
html[data-theme="light"] #screen-outlet [data-screen="B1"] .map-credit,
html[data-apple-theme="light"] #screen-outlet [data-screen="B1"] .map-credit {
  color: rgba(60, 60, 67, 0.72);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  padding: 2px 8px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* the stitch runtime draws every glyph as an svg of the span's size: the components below set their own */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-b1-glass-btn, .sys-b1-tool, .sys-b1-avatar) .stitch-icon { width: 22px; height: 22px; }

/* ── The floating material (one recipe for every control on the map) ─────── */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-b1-glass-btn, .sys-b1-city, .sys-b1-tool-group, .sys-filter-pill, .sys-b1-capsule, .sys-b1-live-second, .sys-city-popover) {
  background: var(--sys-glass);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--sys-edge);
  box-shadow: var(--b1-specular), var(--b1-float-shadow);
  color: var(--sys-label);
}

/* ── Header: menu · lockup · bell and profile ────────────────────────────── */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-header {
  padding-top: var(--b1-head-top);
  gap: 12px;
  pointer-events: none;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-header > * { pointer-events: auto; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-topbar {
  /* the sides never narrower than their buttons (44 and 96): the lockup is centred while it fits between equal sides,
     and moves a little left of centre, never under the bell, when it does not */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 8px;
  container-type: inline-size;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-topbar > :first-child { justify-self: start; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-topbar-end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-brand {
  justify-self: center;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}
/* the lockup at «lg», as large as the row leaves it: 25 px from 430 px wide, 20 px at 390, 18 px at 360 (8.75 em wide) */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-brand .sys-brand {
  font-size: clamp(18px, calc((100cqw - 180px) / 8.75), 25px);
  filter: drop-shadow(0 1px 10px color-mix(in srgb, var(--sys-canvas) 70%, transparent));
}
/* 150 % and 200 % (P7, html.a11y-text-4/5 zoom the outlet): on a 412 or 448 px phone the row is 243 or 267 px at 150 %
   and 174 or 192 at 200 %, and the wordmark (8.75 em, 105 px at its smallest) ran under the moon and the bell, at 200 %
   the moon over ☰. The wink mark alone stays at 150 % (☰ 44 + 10 + 14 + 12 + three buttons 148 = 228); at 200 % B1 keeps
   ☰ and its three buttons in one row (44 + 6 + 140 = 190 of 190 or 208: the row alone reaches 8 px from the sides, the
   pills keep their edge-to-edge strip) and the pet badge in the screen, and the states keep their mark between ☰ and two
   buttons (44 + 8 + 21 + 8 + 96 = 177) */
html:is(.a11y-text-4, .a11y-text-5) #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-topbar .sys-b1-brand .sys-brand-wm { display: none; }
html.a11y-text-5 #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-header .sys-b1-topbar { margin-inline: -8px; }
html.a11y-text-5 #screen-outlet [data-screen="B1"] .sys-b1-header .sys-b1-topbar { column-gap: 6px; }
html.a11y-text-5 #screen-outlet [data-screen="B1"] .sys-b1-topbar .sys-b1-topbar-end { gap: 4px; }
html.a11y-text-5 #screen-outlet [data-screen="B1"] .sys-b1-topbar .sys-b1-brand { display: none; }
html.a11y-text-5 #screen-outlet [data-screen="B1"] .sys-b1-avatar .sys-pet-companion-badge { right: -8px; }
/* right to left the badge sits at the avatar's left: (1,5,1) beats css/i18n/rtl-mirror.css's left: -13px, appended later */
html[dir="rtl"].a11y-text-5 #screen-outlet [data-screen="B1"] .sys-b1-avatar .sys-pet-companion-badge { left: -8px; right: auto; }
/* a narrower phone (the viewport, which the zoom leaves alone): at 150 % under 390 px the mark goes too (44 + 12 + 148 =
   204 of 208 at 360), at 200 % under 412 the moon goes (44 + 6 + 92 = 142 of 164 at 360), its «Mörk / Ljus» is in ☰ (B2) */
@media (max-width: 389.98px) {
  html.a11y-text-4 #screen-outlet [data-screen="B1"] .sys-b1-topbar .sys-b1-brand { display: none; }
}
@media (max-width: 411.98px) {
  html.a11y-text-5 #screen-outlet [data-screen="B1"] .sys-b1-topbar .sys-b1-theme-btn { display: none; }
}
/* 112 % and 125 % (a11y-text-2/3): B1 keeps its wordmark while the row (width / zoom - 32) holds 44 + 10 + 105 + 12 + 148 =
   319, that is from 351 × zoom (393 px at 112 %, 439 at 125 %); the states need 345.5 × zoom, so the same edge serves them */
@media (max-width: 392.98px) {
  html.a11y-text-2 #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-topbar .sys-b1-brand .sys-brand-wm { display: none; }
}
@media (max-width: 438.98px) {
  html.a11y-text-3 #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-topbar .sys-b1-brand .sys-brand-wm { display: none; }
}
/* under 354 px (a small phone, or Android's larger display size): at 150 % B1 has 204 only from 354, so its moon goes too
   (44 + 12 + 92 = 148); at 200 % the states lose their mark and close their gaps (44 + 4 + 4 + 92 = 144, the row at 320), and
   keep their 1fr auto 1fr columns */
@media (max-width: 353.98px) {
  html.a11y-text-4 #screen-outlet [data-screen="B1"] .sys-b1-topbar .sys-b1-theme-btn { display: none; }
  html.a11y-text-5 #screen-outlet [data-screen^="B1."] .sys-b1-header .sys-b1-topbar { column-gap: 4px; }
  html.a11y-text-5 #screen-outlet [data-screen^="B1."] .sys-b1-topbar .sys-b1-topbar-end { gap: 4px; }
  html.a11y-text-5 #screen-outlet [data-screen^="B1."] .sys-b1-topbar .sys-b1-brand .sys-brand-mark { display: none; }
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-glass-btn {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.24s var(--b1-spring), background-color 0.2s ease;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-unread {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--b1-orange);
  box-shadow: 0 0 0 2px var(--sys-base);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #A855F7 0%, #6D28D9 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), var(--b1-float-shadow);
  color: #FFFFFF;
  transition: transform 0.24s var(--b1-spring);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-initials {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
/* signed out (no initials): the person glyph; signed in: the initials alone */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-avatar:has(.sys-b1-initials:not([hidden]):not(:empty)) .sys-b1-avatar-glyph { display: none; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-initials:empty { display: none; }

/* ── The live capsule (the server's live[] only; gone with nothing to show) ─ */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-live-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-live-row:not(:has(> :not([hidden]))) { display: none; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-capsule {
  min-height: 44px;
  max-width: min(100%, 320px);
  padding-block: 0;
  padding-inline: 6px 12px;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--sys-accent) 45%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.24s var(--b1-spring);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-capsule-ring {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sys-accent-ink);
  background: color-mix(in srgb, var(--sys-accent) 20%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sys-accent) 55%, transparent);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-capsule-ring .stitch-icon { width: 18px; height: 18px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-capsule-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; min-width: 0; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-capsule-chev { width: 18px; height: 18px; flex: none; color: var(--sys-label-2); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-live-second {
  min-height: 32px;
  max-width: min(100%, 280px);
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sys-label-2);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-live-pip {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 999px;
  background: var(--b1-orange);
}

/* ── The map's filter pills: 36 pt, 8 pt apart, edge to edge ─────────────── */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-filter-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -16px;
  padding: 2px 16px 6px;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-filter-strip::-webkit-scrollbar { display: none; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-filter-pill {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.24s var(--b1-spring), background-color 0.2s ease, color 0.2s ease;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-filter-pill .stitch-icon { width: 18px; height: 18px; color: var(--hue-ink, var(--sys-label-2)); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-filter-pill:is(.is-active, [aria-pressed="true"]) {
  background: var(--sys-label);
  border-color: var(--sys-label);
  color: var(--sys-canvas);
}

/* ── The tools on the map: the city, the look and locate, support ────────── */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) [data-part="map-tools"].sys-b1-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-city {
  min-height: 44px;
  padding-block: 0;
  padding-inline: 12px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.24s var(--b1-spring);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-city .stitch-icon { width: 18px; height: 18px; color: var(--sys-accent-ink); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-tool-group {
  width: 44px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-tool {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sys-accent-ink);
  background: transparent;
  transition: background-color 0.16s ease;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-tool + .sys-b1-tool { border-top: 1px solid var(--sys-hairline); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-tool:active { background: var(--sys-hairline); }

/* ── The sheet: obsidian glass, three stops ──────────────────────────────── */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-sheet {
  background: var(--sys-glass);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border-radius: 28px 28px 0 0;
  border-top: 1px solid var(--sys-edge);
  box-shadow: var(--b1-specular), var(--b1-sheet-shadow);
  color: var(--sys-label);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-handle-row {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
  cursor: grab;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-handle {
  box-sizing: content-box;
  width: 36px;
  height: 5px;
  padding: 12px 26px;
  margin: -12px -26px;
  border-radius: 999px;
  background: var(--sys-label-3);
  background-clip: content-box;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 4px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}

/* the greeting and the map's count, then the search, as one group */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-greet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 20px;
  margin-bottom: -8px;
  font-size: 15px;
  line-height: 20px;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-greet {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-weight: 600;
  color: var(--sys-label);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-greet .stitch-icon { width: 17px; height: 17px; color: var(--sys-accent-ink); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-shrink: 1;
  font-weight: 500;
  color: var(--sys-label-2);
  font-variant-numeric: tabular-nums;
}

/* ── Search: Spotlight-style, 52 pt ──────────────────────────────────────── */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-search-bar {
  position: relative;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-block: 0;
  padding-inline: 14px 4px;
  border-radius: 16px;
  background: var(--sys-raised-2);
  border: 1px solid var(--sys-hairline);
  box-shadow: var(--b1-specular);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-search-bar:focus-within {
  border-color: var(--sys-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sys-accent) 22%, transparent);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-search-glyph { width: 20px; height: 20px; flex: none; color: var(--sys-label-3); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 4px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--sys-label);
  text-overflow: ellipsis;
  /* 16 px and up: a phone never zooms the page into the field */
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  box-shadow: none;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-search-input::placeholder { color: var(--sys-label-3); opacity: 1; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-search-input:focus { box-shadow: none; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-search-mic {
  width: 38px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sys-label-2);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-search-mic .stitch-icon { width: 22px; height: 22px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-search-ai {
  height: 36px;
  flex: none;
  margin-right: 4px;
  padding: 0 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 14px rgba(124, 58, 237, 0.35);
  transition: transform 0.22s var(--b1-spring);
}

/* ── Sections ────────────────────────────────────────────────────────────── */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-title {
  font-size: 20px;
  line-height: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sys-label);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-count {
  font-size: 15px;
  font-weight: 600;
  color: var(--sys-label-2);
  font-variant-numeric: tabular-nums;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-link {
  min-height: 44px;
  margin-right: -6px;
  padding: 0 6px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sys-accent-ink);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-link .stitch-icon { width: 18px; height: 18px; }

/* ── The launcher: four columns of 64 pt squircles ───────────────────────── */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-launcher {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 16px;
  container-type: inline-size;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-tile[hidden] {
  display: none;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-tile {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sys-label);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-tile-squircle {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hue-ink, var(--sys-label-2));
  background: color-mix(in srgb, var(--hue, var(--sys-label-3)) 16%, var(--sys-raised));
  border: 1px solid color-mix(in srgb, var(--hue, var(--sys-label-3)) 28%, transparent);
  box-shadow: var(--b1-specular);
  transition: transform 0.24s var(--b1-spring), border-color 0.2s ease;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-tile-squircle .stitch-icon { width: 30px; height: 30px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-hue-more .sys-tile-squircle {
  color: var(--sys-label-2);
  background: var(--sys-raised-2);
  border-color: var(--sys-hairline);
}
/* the label may take 4 px of the 12 px gap on each side: a 12-letter word («Expresspaket», «Hundrastning», Danish
   «Hundeluftning») is 77-80 px at 12 px and ran out of a 73 px column on a 360 px phone */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-tile-label {
  margin-inline: -4px;
  max-width: calc(100% + 8px);
  font-size: clamp(0.75rem, 3.6cqw, 0.875rem);
  line-height: 1.24;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}
/* The tiles' glass art (round 45b, 2026-10-30, the owner's «انشر» on the preview): a full-bleed square picture per service
   (assets/home-icons/v1/<action>-64|128|192.webp), rounded here as an app icon, with a soft drop shadow and no frame of its own.
   Today's glyph stays under it: it shows while the picture loads and wherever it cannot (the offline home). A painted tile:
   no backdrop-filter, so fifteen of them scroll smoothly on a cheap phone. */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-tile-squircle[data-art] {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 22.5%;
  background: color-mix(in srgb, var(--hue, var(--sys-label-3)) 24%, var(--sys-raised));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
html[data-theme="light"] #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-tile-squircle[data-art],
html[data-apple-theme="light"] #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-tile-squircle[data-art] {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-tile:active .sys-tile-squircle { transform: scale(0.92); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-tile:focus-visible { outline: none; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-tile:focus-visible .sys-tile-squircle { outline: 2px solid var(--sys-accent); outline-offset: 3px; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-card {
  background: var(--sys-raised);
  border: 1px solid var(--sys-hairline);
  border-radius: 20px;
  box-shadow: var(--b1-specular);
  color: var(--sys-label);
}

/* «Min dag» */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-day-strip {
  display: flex;
  gap: 12px;
  margin: 0 -16px;
  padding: 0 16px 2px;
  scroll-padding-inline: 16px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-day-strip::-webkit-scrollbar { display: none; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-day-card {
  flex: none;
  min-width: 168px;
  max-width: 220px;
  min-height: 88px;
  padding: 14px;
  border-radius: 18px;
  background: var(--sys-raised);
  border: 1px solid var(--sys-hairline);
  box-shadow: var(--b1-specular);
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.24s var(--b1-spring);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-day-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-day-when { font-size: 15px; font-weight: 700; color: var(--sys-label); font-variant-numeric: tabular-nums; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-day-dot { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--sys-accent); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-day-event { color: var(--sys-accent-ink); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-day-event .stitch-icon { width: 17px; height: 17px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-day-title { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--sys-label); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-day-sub { font-size: 15px; line-height: 20px; color: var(--sys-label-2); }

/* the usual destination */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-sug { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-sug-head { display: flex; align-items: flex-start; gap: 12px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-sug-icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sys-accent-ink);
  background: color-mix(in srgb, var(--sys-accent) 16%, var(--sys-raised));
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-sug-icon .stitch-icon { width: 22px; height: 22px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-sug-eyebrow { display: block; font-size: 15px; font-weight: 600; color: var(--sys-accent-ink); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-sug-title { font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--sys-label); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-sug-text { font-size: 15px; line-height: 20px; color: var(--sys-label-2); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-sug-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--sys-hairline);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-sug-price { display: flex; flex-direction: column; min-width: 0; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-sug-price-label { font-size: 15px; color: var(--sys-label-2); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-sug-fare { font-size: 20px; line-height: 25px; font-weight: 800; color: var(--sys-label); font-variant-numeric: tabular-nums; }

/* «Nära dig» */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-row {
  width: 100%;
  min-height: 72px;
  padding-block: 12px;
  padding-inline: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: start;
  cursor: pointer;
  transition: transform 0.24s var(--b1-spring);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-row-icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hue-ink);
  background: color-mix(in srgb, var(--hue) 16%, var(--sys-raised));
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-row-icon .stitch-icon { width: 22px; height: 22px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-row-title-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-row-title { font-size: 17px; line-height: 22px; font-weight: 600; color: var(--sys-label); min-width: 0; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-row-sub { font-size: 15px; line-height: 20px; color: var(--sys-label-2); font-variant-numeric: tabular-nums; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-row-chev { width: 20px; height: 20px; flex: none; color: var(--sys-label-3); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-open-badge {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--b1-green);
  background: color-mix(in srgb, var(--b1-green) 14%, transparent);
}

/* the map's directory */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-discover-carousel {
  display: flex;
  gap: 12px;
  margin: 0 -16px;
  padding: 0 16px 2px;
  scroll-padding-inline: 16px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-discover-carousel::-webkit-scrollbar { display: none; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-discover-chip {
  flex: none;
  min-width: 224px;
  max-width: 264px;
  min-height: 72px;
  padding: 12px;
  border-radius: 18px;
  background: var(--sys-raised);
  border: 1px solid var(--sys-hairline);
  box-shadow: var(--b1-specular);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: start;
  color: var(--sys-label);
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.24s var(--b1-spring);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-discover-chip-icon {
  --pin-accent: #A855F7;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pin-accent);
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-discover-chip-icon svg { width: 20px; height: 20px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-chip-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-chip-name-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-chip-name { font-size: 15px; line-height: 20px; font-weight: 700; max-width: 150px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-chip-meta { font-size: 15px; line-height: 20px; color: var(--sys-label-2); max-width: 190px; }

/* the quiet promise at the sheet's foot */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--sys-label-3);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-trust-item { display: inline-flex; align-items: center; gap: 5px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-trust-item .stitch-icon { width: 16px; height: 16px; }

/* «Bli vår partner», the sheet's last card (owner, 2026-10-31): light glass washed with the accent from its corner, a glass
   squircle like the service tiles, the chevron in a soft capsule. Painted, no backdrop-filter */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-partner {
  position: relative;
  width: 100%;
  min-height: 80px;
  padding-block: 14px;
  padding-inline: 16px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: start;
  border: 1px solid color-mix(in srgb, var(--sys-accent) 28%, var(--sys-hairline));
  border-radius: 22px;
  background:
    radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--sys-accent) 24%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--sys-accent) 7%, var(--sys-raised)) 0%, var(--sys-raised) 100%);
  box-shadow: var(--b1-specular), 0 12px 30px -16px color-mix(in srgb, var(--sys-accent) 70%, transparent);
  color: var(--sys-label);
  cursor: pointer;
  transition: transform 0.22s var(--b1-spring);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-partner:active { transform: scale(0.98); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-partner:focus-visible { outline: 2px solid var(--sys-accent); outline-offset: 3px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-partner-icon {
  position: relative;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 22.5%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #FFFFFF;
  background: linear-gradient(160deg, color-mix(in srgb, var(--sys-accent) 58%, #FFFFFF) 0%, var(--sys-accent) 52%, color-mix(in srgb, var(--sys-accent) 70%, #000000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 16px -6px color-mix(in srgb, var(--sys-accent) 80%, transparent);
}
/* the glass's specular: a soft light band over the top half */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-partner-icon::before {
  content: "";
  position: absolute;
  inset: 1px 3px 50%;
  border-radius: 10px 10px 50% 50% / 10px 10px 36% 36%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0));
  pointer-events: none;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-partner-icon .stitch-icon { position: relative; width: 26px; height: 26px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-partner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-partner-title { font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--sys-label); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-partner-sub { font-size: 15px; line-height: 20px; color: var(--sys-label-2); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-partner-perk { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--sys-accent-ink); white-space: nowrap; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-partner-chev {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sys-accent-ink);
  background: color-mix(in srgb, var(--sys-accent) 16%, transparent);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-partner-chev .stitch-icon { width: 20px; height: 20px; }
html[data-theme="light"] #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-partner,
html[data-apple-theme="light"] #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-partner {
  border-color: color-mix(in srgb, var(--sys-accent) 20%, var(--sys-hairline));
  background:
    radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--sys-accent) 13%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--sys-raised) 0%, color-mix(in srgb, var(--sys-accent) 4%, var(--sys-raised)) 100%);
  box-shadow: var(--b1-specular), 0 12px 28px -16px color-mix(in srgb, var(--sys-accent) 45%, transparent);
}
html[data-theme="light"] #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-partner-chev,
html[data-apple-theme="light"] #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-partner-chev {
  background: color-mix(in srgb, var(--sys-accent) 10%, transparent);
}

/* ── The place card on the map (Apple Maps), mini and full profile ───────── */
#screen-outlet [data-screen="B1"] .sys-discover-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
  background: var(--sys-glass-strong);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--sys-edge);
  box-shadow: var(--b1-specular), var(--b1-card-shadow);
  color: var(--sys-label);
  max-height: min(76dvh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-bottom: env(safe-area-inset-bottom, 0px);
  animation: sysDiscoverCardIn 0.34s var(--b1-spring) both;
}
#screen-outlet [data-screen="B1"] .sys-discover-card[hidden] { display: none; }
@keyframes sysDiscoverCardIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
#screen-outlet [data-screen="B1"] .sys-dc-head { display: flex; align-items: flex-start; gap: 12px; }
#screen-outlet [data-screen="B1"] .sys-dc-heading { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#screen-outlet [data-screen="B1"] .sys-dc-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#screen-outlet [data-screen="B1"] .sys-dc-title { font-size: 20px; line-height: 25px; font-weight: 700; letter-spacing: -0.02em; color: var(--sys-label); }
#screen-outlet [data-screen="B1"] .sys-dc-sub { font-size: 15px; line-height: 20px; color: var(--sys-label-2); }
#screen-outlet [data-screen="B1"] .sys-dc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
#screen-outlet [data-screen="B1"] .sys-dc-rating { font-size: 15px; font-weight: 600; color: var(--b1-amber); font-variant-numeric: tabular-nums; }
#screen-outlet [data-screen="B1"] .sys-dc-status {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--b1-green);
  background: color-mix(in srgb, var(--b1-green) 14%, transparent);
}
#screen-outlet [data-screen="B1"] .sys-dc-close {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sys-raised-3);
  color: var(--sys-label-2);
}
#screen-outlet [data-screen="B1"] .sys-dc-close .stitch-icon { width: 18px; height: 18px; }
#screen-outlet [data-screen="B1"] .sys-dc-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#screen-outlet [data-screen="B1"] .sys-dc-actions > [hidden] { display: none; }
#screen-outlet [data-screen="B1"] .sys-dc-actions:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }
#screen-outlet [data-screen="B1"] .sys-dc-bio { font-size: 15px; line-height: 21px; color: var(--sys-label-2); }
#screen-outlet [data-screen="B1"] .sys-dc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#screen-outlet [data-screen="B1"] .sys-dc-hint { font-size: 15px; font-weight: 600; color: var(--sys-accent-ink); }
#screen-outlet [data-screen="B1"] .sys-dc-full {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--sys-hairline);
}
#screen-outlet [data-screen="B1"] .sys-dc-full[hidden] { display: none; }
#screen-outlet [data-screen="B1"] .sys-dc-reviews { display: flex; flex-direction: column; gap: 8px; }
#screen-outlet [data-screen="B1"] .sys-profile-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: var(--sys-raised-2);
  border: 1px solid var(--sys-hairline);
  font-size: 15px;
  line-height: 20px;
}
#screen-outlet [data-screen="B1"] .sys-profile-block[hidden] { display: none; }
#screen-outlet [data-screen="B1"] .sys-profile-lead { color: var(--sys-label); line-height: 21px; }
#screen-outlet [data-screen="B1"] .sys-profile-line { color: var(--sys-label-2); }
#screen-outlet [data-screen="B1"] .sys-service-price-row + .sys-service-price-row { border-top: 1px solid var(--sys-hairline); padding-top: 8px; }
#screen-outlet [data-screen="B1"] .sys-dc-stars { color: var(--b1-amber); font-weight: 700; font-variant-numeric: tabular-nums; }
#screen-outlet [data-screen="B1"] .sys-pin-squircle {
  --pin-accent: #A855F7;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pin-accent);
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
#screen-outlet [data-screen="B1"] .sys-pin-squircle svg { width: 26px; height: 26px; }
#screen-outlet [data-screen="B1"] .sys-pin-initials { font-size: 17px; font-weight: 800; letter-spacing: 0.02em; color: #FFFFFF; line-height: 1; }
/* the chips the flow draws in the card (home-map-directory.js renderChipsInto) */
#screen-outlet [data-screen="B1"] .sys-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--b1-green);
  background: color-mix(in srgb, var(--b1-green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--b1-green) 26%, transparent);
}
#screen-outlet [data-screen="B1"] .sys-badge-chip svg { width: 15px; height: 15px; }
#screen-outlet [data-screen="B1"] .sys-tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--sys-label-2);
  background: var(--sys-raised-2);
  border: 1px solid var(--sys-hairline);
}
/* the words the flow draws in the full profile (services, reviews) */
#screen-outlet [data-screen="B1"] .sys-ink { color: var(--sys-label); }
#screen-outlet [data-screen="B1"] .sys-ink-sub { color: var(--sys-label-2); }
#screen-outlet [data-screen="B1"] .sys-ink-muted { color: var(--sys-label-3); }
#screen-outlet [data-screen="B1"] .sys-accent-text { color: var(--sys-accent-ink); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-btn-primary {
  min-height: 48px;
  padding: 0 16px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 18px rgba(124, 58, 237, 0.32);
  cursor: pointer;
  transition: transform 0.22s var(--b1-spring);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-btn-primary .stitch-icon { width: 18px; height: 18px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-btn-secondary {
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--sys-raised-3);
  color: var(--sys-label);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.22s var(--b1-spring), background-color 0.2s ease;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-btn-primary, .sys-btn-secondary, .sys-search-ai, .sys-b1-glass-btn, .sys-b1-avatar, .sys-b1-city, .sys-filter-pill, .sys-b1-capsule, .sys-day-card, .sys-row, .sys-discover-chip):active { transform: scale(0.96); }

/* ── B1's states (laddar, offline, plats-av, utanför område) ─────────────── */
/* their drawn map: the obsidian night as drawn, a paper day under «Ljus» */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-drawn { background-color: var(--sys-canvas); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-drawn > svg { opacity: 0.9; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-drawn.is-dim > svg { opacity: 0.45; filter: blur(6px); transform: scale(1.04); }
html[data-theme="light"] #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-drawn > svg,
html[data-apple-theme="light"] #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-drawn > svg {
  filter: invert(1) hue-rotate(180deg) saturate(0.5) brightness(1.04);
}
html[data-theme="light"] #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-drawn.is-dim > svg,
html[data-apple-theme="light"] #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-drawn.is-dim > svg {
  filter: invert(1) hue-rotate(180deg) saturate(0.5) brightness(1.04) blur(6px);
}
/* where the phone is on the drawn map (the accent; grey when it is outside or offline) */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-here {
  position: absolute;
  top: 47%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 999px;
  background: var(--sys-accent);
  border: 3px solid var(--sys-canvas);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--sys-accent) 22%, transparent);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-here.is-away {
  background: var(--sys-label-3);
  box-shadow: 0 0 0 8px var(--sys-hairline);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-b1-state-pill, .sys-b1-offline-pill) {
  min-height: 36px;
  max-width: 100%;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  background: var(--sys-glass);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--sys-edge);
  box-shadow: var(--b1-specular), var(--b1-float-shadow);
  color: var(--sys-label);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-state-dot { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--sys-label-3); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-pill-glyph { width: 17px; height: 17px; flex: none; color: var(--sys-label-2); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-offline-pill { border-color: color-mix(in srgb, var(--b1-orange) 45%, transparent); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-offline-pill .sys-b1-pill-glyph { color: var(--b1-orange); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-offline-since { font-weight: 500; color: var(--sys-label-2); white-space: nowrap; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-offline-since::before { content: '·'; margin-right: 8px; color: var(--sys-label-3); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-search-ai.is-off {
  background: var(--sys-raised-3);
  color: var(--sys-label-3);
  box-shadow: none;
  cursor: not-allowed;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-search-ai .stitch-icon { width: 16px; height: 16px; }
/* a state's own message in the sheet */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  text-align: center;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-empty-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 4px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sys-accent-ink);
  background: color-mix(in srgb, var(--sys-accent) 16%, var(--sys-raised));
  border: 1px solid color-mix(in srgb, var(--sys-accent) 28%, transparent);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-empty-icon .stitch-icon { width: 30px; height: 30px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-empty-title { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--sys-label); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-empty-text { max-width: 320px; font-size: 15px; line-height: 21px; color: var(--sys-label-2); }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-wide { width: 100%; min-height: 52px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-wide .stitch-icon { width: 20px; height: 20px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-choice-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-choice-label { font-size: 15px; color: var(--sys-label-2); }
/* the skeleton of B1 while the first home answer is slow */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-skel {
  display: block;
  border-radius: 999px;
  background: var(--sys-raised-3);
  animation: sysSkelPulse 1.4s ease-in-out infinite;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-skel-pill { flex: none; height: 36px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-skel-line { height: 14px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-skel-title { width: 168px; height: 20px; border-radius: 8px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-skel-label { width: 48px; height: 12px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-skel-card { height: 112px; border-radius: 20px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-tile-squircle.sys-skel { border-radius: 18px; border: 0; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-skel-w56 { width: 56px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-skel-w80 { width: 80px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-skel-w88 { width: 88px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-skel-w96 { width: 96px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-skel-w104 { width: 104px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-skel-w120 { width: 120px; }
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-skel-w176 { width: 176px; }
@keyframes sysSkelPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ── The Swedish plate (an opted-in driver's own, never anyone else's) ───── */
.sys-se-plate {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 5px;
  border: 1.5px solid #050510;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(5, 5, 16, 0.25);
  font-family: ui-monospace, 'SF Mono', 'Plus Jakarta Sans', monospace;
  line-height: 1;
  vertical-align: middle;
}
.sys-se-plate-eu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 4px;
  background: #003399;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
}
.sys-se-plate-num {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  background: #FFFFFF;
  color: #050510;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sys-se-plate-sm .sys-se-plate-eu { padding: 2px 3px; font-size: 11px; }
.sys-se-plate-sm .sys-se-plate-num { padding: 2px 5px; font-size: 15px; letter-spacing: 0.03em; }

/* ── The live pins and clusters on the map (map.js draws them; real cars only) */
.sys-map-pin,
.sys-map-cluster {
  min-height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
  background: var(--sys-glass-strong, rgba(12, 14, 20, 0.92));
  border: 1px solid var(--sys-edge, rgba(255, 255, 255, 0.12));
  box-shadow: var(--b1-specular, inset 0 1px 0 rgba(255, 255, 255, 0.06)), var(--b1-float-shadow, 0 6px 20px rgba(0, 0, 0, 0.42));
  color: var(--sys-label, #F8FAFC);
  font-size: 15px;
  font-weight: 700;
  /* No transform here: a pin is MapLibre's marker, which MapLibre moves through its inline transform on every frame of a pan,
     so a transform transition started anew on every pin each frame and they swam behind the map (the owner's iPhone,
     2026-11-09: «the map does not drag smoothly»). No backdrop blur either: the fill is 92 % opaque, so the blur showed through
     at 8 %, and a blur under a moving box is drawn again every frame */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sys-map-pin {
  --pin-accent: #A855F7;
  position: relative;
  padding: 4px 10px 4px 5px;
}
.sys-map-cluster {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 14px;
  border-color: color-mix(in srgb, var(--sys-accent, #A855F7) 60%, transparent);
}
.sys-map-cluster:hover,
.sys-map-cluster:active { transform: scale(1.05); }
.sys-map-cluster-spark { color: var(--sys-accent-ink, #C4B5FD); }
.sys-map-pin:hover { transform: translateY(-2px) scale(1.03); }
.sys-map-pin.is-selected {
  z-index: 25;
  border-color: var(--pin-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pin-accent) 35%, transparent), var(--b1-card-shadow, 0 18px 48px rgba(0, 0, 0, 0.62));
  transform: translateY(-3px) scale(1.06);
}
.sys-map-pin-squircle {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pin-accent);
  color: #FFFFFF;
}
.sys-map-pin-car {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sys-accent-ink, #C4B5FD);
  background: color-mix(in srgb, var(--sys-accent, #A855F7) 20%, transparent);
}
.sys-map-pin-rating { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sys-map-pin-eta,
.sys-map-pin-name { font-size: 15px; font-weight: 700; }
.sys-map-pin-tip {
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 9px;
  background: var(--sys-glass-strong, rgba(12, 14, 20, 0.92));
  border-right: 1px solid var(--sys-edge, rgba(255, 255, 255, 0.12));
  border-bottom: 1px solid var(--sys-edge, rgba(255, 255, 255, 0.12));
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}
/* ── Where I am on a booking map (C1, Taxi and Expresspaket; the owner, 2026-11-12: «put the point and write the address on
   it as a lit button, so the customer knows where he is standing now, and a button like the one on the home to find his
   position»). The chip is this file's map pin (.sys-map-pin, its tip under it) lit in the accent: c1-place.js puts it on the
   map just over the purple dot. It takes no finger: the map under it pans. MapLibre moves it by its inline transform, so
   nothing here transforms or blurs the marker itself (see .sys-map-pin) */
.sys-me-chip { pointer-events: none; }
.sys-me-chip .sys-me-pin {
  max-width: min(300px, calc(100vw - 48px));
  padding-block: 4px;
  padding-inline: 9px 12px;
  cursor: default;
  border-color: color-mix(in srgb, var(--sys-accent, #A855F7) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sys-accent, #A855F7) 26%, transparent),
    0 0 22px color-mix(in srgb, var(--sys-accent, #A855F7) 42%, transparent),
    var(--b1-float-shadow, 0 6px 20px rgba(0, 0, 0, 0.42));
}
.sys-me-chip .sys-me-pin:hover { transform: none; }
.sys-me-chip .sys-map-pin-tip { border-color: color-mix(in srgb, var(--sys-accent, #A855F7) 70%, transparent); }
.sys-me-pin-light {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 999px;
  background: var(--sys-accent, #A855F7);
  box-shadow: 0 0 8px var(--sys-accent, #A855F7);
}
/* the dot where a screen's design draws none (Frakt's Y1, Y3; js/map/me-mark.js): C1's purple dot, its core and its ring */
.sys-me-dot { position: relative; display: block; width: 22px; height: 22px; pointer-events: none; }
.sys-me-dot-core { position: absolute; inset: 6.5px; border-radius: 999px; background: #A855F7; }
.sys-me-dot-ring { position: absolute; inset: 2px; border-radius: 999px; border: 1.5px solid #8B5CF6; opacity: 0.4; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.a11y-calm) .sys-me-dot-ring { animation: sys-me-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
}
@keyframes sys-me-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
/* a long street name ends in an ellipsis inside the chip, never past the screen */
.sys-me-pin-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the home's locate control (B1's .sys-b1-tool-group > .sys-b1-tool) on the booking map: the same material, size and arrow */
#screen-outlet .sys-me-tools .sys-b1-tool-group {
  width: 44px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* the home's own glass (its --sys-glass above), not the app's slightly thinner one */
  background: rgba(9, 11, 16, 0.82);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--sys-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 20px rgba(0, 0, 0, 0.42);
  color: var(--sys-label);
}
html:is([data-theme="light"], [data-apple-theme="light"]) #screen-outlet .sys-me-tools .sys-b1-tool-group {
  background: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 16px rgba(5, 5, 16, 0.10);
}
#screen-outlet .sys-me-tools .sys-b1-tool {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sys-accent-ink);
  background: transparent;
  transition: background-color 0.16s ease;
}
#screen-outlet .sys-me-tools .sys-b1-tool:active { background: var(--sys-hairline); }
/* C1 rests a tall sheet (a rider with places taken before, «Senaste resmål») 132 px under the top (css/frame.css): the control
   above it stood at 57 px, where the frame fades a float away and the app's header pills sit (the review of 4ab7f4b09, B2).
   While the control shows, that rest leaves 74 px more of the map (the control's 44 and its 30 over the sheet), so it stands
   whole at 132 px; a shorter sheet rests as before, and C1 for a driver's home (no control) keeps the design's */
#screen-outlet [data-screen="C1"]:has([data-part="me-tools"]:not([hidden])) { --sheet-cap: calc(100cqh - 206px); }
#screen-outlet .sys-me-tools .sys-tool-svg { width: 20px; height: 20px; flex: none; display: block; }
@media (prefers-reduced-transparency: reduce) {
  #screen-outlet .sys-me-tools .sys-b1-tool-group { background: var(--sys-base, #090B10); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.sys-live-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--b1-green, #30D158);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--b1-green, #30D158) 22%, transparent);
  animation: sysPulseDot 2.4s ease-in-out infinite;
}
.sys-open-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--b1-green, #30D158);
}
@keyframes sysPulseDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Reduced transparency: the same surfaces, solid ──────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-b1-glass-btn, .sys-b1-city, .sys-b1-tool-group, .sys-filter-pill:not(.is-active), .sys-b1-capsule, .sys-b1-live-second, .sys-b1-sheet, .sys-discover-card),
  .sys-map-pin,
  .sys-map-cluster {
    background: var(--sys-base, #090B10);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ── Reduced motion (the phone's, and the app's own «Minska rörelse») ────── */
@media (prefers-reduced-motion: reduce) {
  #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) *,
  .sys-map-pin,
  .sys-map-cluster,
  .sys-live-dot {
    animation: none !important;
    transition: none !important;
  }
}
html.a11y-calm #screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) *,
html.a11y-calm .sys-map-pin,
html.a11y-calm .sys-map-cluster,
html.a11y-calm .sys-live-dot {
  animation: none !important;
  transition: none !important;
}

/* ── Wave 13: Custom Apple Vector SVGs, Avatar Photo, Live Weather & Sponsored Partners ── */
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-avatar {
  overflow: hidden;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-b1-avatar.has-photo :is(.sys-b1-avatar-glyph, .sys-b1-initials) {
  display: none;
}

#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-tile-svg {
  width: 30px;
  height: 30px;
  flex: none;
  display: block;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) :is(.sys-tool-svg, .sys-ctrl-svg) {
  width: 20px;
  height: 20px;
  flex: none;
  display: block;
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-close-svg {
  width: 18px;
  height: 18px;
  flex: none;
  display: block;
}
.sys-offer-svg {
  width: 15px;
  height: 15px;
  flex: none;
  display: block;
}

/* Full-map atmospheric weather canvas (pointer-events: none) */
#screen-outlet [data-screen="B1"] .sys-b1-weather-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  display: block;
}

/* Live city + SMHI weather pill & interactive popover */
#screen-outlet [data-screen="B1"] .sys-b1-tool-wrap {
  display: flex;
  justify-content: flex-end;
}
#screen-outlet [data-screen="B1"] .sys-b1-weather-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sys-accent-ink);
}
#screen-outlet [data-screen="B1"] .sys-b1-weather-glyph .sys-ctrl-svg {
  width: 18px;
  height: 18px;
}
#screen-outlet [data-screen="B1"] .sys-b1-weather-temp-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
#screen-outlet [data-screen="B1"] .sys-b1-weather-temp-wrap[hidden] {
  display: none;
}
#screen-outlet [data-screen="B1"] .sys-b1-city-dot {
  color: var(--sys-label-3);
}
#screen-outlet [data-screen="B1"] .sys-b1-weather-temp {
  font-weight: 700;
  color: var(--sys-label);
}
#screen-outlet [data-screen="B1"] .sys-b1-city.is-open {
  border-color: var(--sys-accent);
}
#screen-outlet [data-screen="B1"] .sys-b1-tool.is-active {
  color: var(--sys-label);
  background: color-mix(in srgb, var(--sys-accent) 18%, transparent);
}

#screen-outlet [data-screen="B1"] .sys-city-popover {
  top: calc(var(--b1-head-top) + 104px);
  width: min(358px, calc(100% - 32px));
  padding: 14px;
  border-radius: 22px;
  background: var(--sys-glass-strong);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(68dvh, 520px);
  overflow-y: auto;
  animation: sysDiscoverCardIn 0.24s var(--b1-spring) both;
}
#screen-outlet [data-screen="B1"] .sys-city-popover[hidden] {
  display: none;
}
#screen-outlet [data-screen="B1"]:has([data-section="live"]:not([hidden])) .sys-city-popover {
  top: calc(var(--b1-head-top) + 158px);
}
#screen-outlet [data-screen="B1"] .sys-city-pop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
#screen-outlet [data-screen="B1"] .sys-city-pop-titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#screen-outlet [data-screen="B1"] .sys-city-pop-title {
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--sys-label);
}
#screen-outlet [data-screen="B1"] .sys-city-pop-sub {
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--sys-label-2);
  font-variant-numeric: tabular-nums;
}
#screen-outlet [data-screen="B1"] .sys-city-pop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
#screen-outlet [data-screen="B1"] .sys-city-chip {
  min-height: 36px;
  padding: 0 8px;
  border-radius: 12px;
  background: var(--sys-raised-2);
  border: 1px solid var(--sys-hairline);
  color: var(--sys-label);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
#screen-outlet [data-screen="B1"] .sys-city-chip:is(.is-active, [aria-pressed="true"]) {
  background: var(--sys-label);
  border-color: var(--sys-label);
  color: var(--sys-canvas);
}
#screen-outlet [data-screen="B1"] .sys-city-pop-fx {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--sys-hairline);
}
#screen-outlet [data-screen="B1"] .sys-city-pop-fx-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sys-label-2);
}
#screen-outlet [data-screen="B1"] .sys-city-pop-fx-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#screen-outlet [data-screen="B1"] .sys-fx-chip {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--sys-raised-2);
  border: 1px solid var(--sys-hairline);
  color: var(--sys-label);
  font-size: 0.84375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
#screen-outlet [data-screen="B1"] .sys-fx-chip:is(.is-active, [aria-pressed="true"]) {
  background: var(--sys-accent);
  border-color: var(--sys-accent);
  color: #FFFFFF;
}

/* Collapsed-sheet (peek-only) sponsored partner strip. It stands clear of the map's credit, which hangs from 6 px to 26 px
   above the sheet (css/frame.css .map-credit, 20 px tall in light): 36 px up, so the credit shows under it and never over
   its cards (2026-10-30) */
#screen-outlet [data-screen="B1"] .sys-peek-ads {
  bottom: calc(var(--sheet-peek) + 36px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.28s var(--b1-spring), transform 0.28s var(--b1-spring), visibility 0.28s;
}
#screen-outlet [data-screen="B1"] .sys-peek-ads[hidden] {
  display: none;
}
#screen-outlet [data-screen="B1"] .sys-peek-ads.is-peek:not([hidden]) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
#screen-outlet [data-screen="B1"]:has([data-part="discover-card"]:not([hidden])) .sys-peek-ads {
  display: none;
}
/* the map's tools step up over the strip: its 36 px lift, its 132 px (the head row, 8 px, the 88 px row of cards) and 12 px
   between, so the strip's ✕ and the chat button below the tools never touch */
#screen-outlet [data-screen="B1"]:has([data-part="sponsored-peek-strip"].is-peek:not([hidden])) .sheet-track[data-state="peek"] [data-part="map-tools"] {
  bottom: calc(100% + 180px);
}
#screen-outlet [data-screen="B1"] .sys-peek-ads-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#screen-outlet [data-screen="B1"] .sys-peek-ads-pill {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--sys-glass-strong);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--b1-amber) 42%, var(--sys-edge));
  color: var(--b1-amber);
  font-size: 0.78125rem;
  font-weight: 700;
  box-shadow: var(--b1-float-shadow);
}
#screen-outlet [data-screen="B1"] .sys-peek-ads-close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sys-glass-strong);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--sys-edge);
  color: var(--sys-label-2);
  box-shadow: var(--b1-float-shadow);
  cursor: pointer;
}
#screen-outlet [data-screen="B1"] .sys-peek-ads-track {
  display: flex;
  gap: 10px;
  padding: 2px 2px 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
#screen-outlet [data-screen="B1"] .sys-peek-ads-track::-webkit-scrollbar {
  display: none;
}
#screen-outlet [data-screen="B1"] .sys-peek-ad-card {
  flex: none;
  width: 260px;
  min-height: 82px;
  padding: 10px 12px;
  border-radius: 18px;
  background: var(--sys-glass-strong);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--b1-amber) 36%, var(--sys-edge));
  box-shadow: var(--b1-specular), var(--b1-float-shadow);
  color: var(--sys-label);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: start;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.22s var(--b1-spring);
}
#screen-outlet [data-screen="B1"] .sys-peek-ad-card:active {
  transform: scale(0.97);
}
#screen-outlet [data-screen="B1"] .sys-peek-ad-icon {
  --pin-accent: #A855F7;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pin-accent);
  color: #FFFFFF;
}
#screen-outlet [data-screen="B1"] .sys-peek-ad-icon svg {
  width: 20px;
  height: 20px;
}
#screen-outlet [data-screen="B1"] .sys-peek-ad-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#screen-outlet [data-screen="B1"] .sys-peek-ad-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#screen-outlet [data-screen="B1"] .sys-peek-ad-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--b1-amber);
  font-size: 0.75rem;
  font-weight: 700;
}
#screen-outlet [data-screen="B1"] .sys-peek-ad-offer {
  min-width: 0;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--b1-amber) 18%, transparent);
  color: var(--b1-amber);
  font-size: 0.75rem;
  font-weight: 700;
}
#screen-outlet [data-screen="B1"] .sys-peek-ad-name {
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
}
#screen-outlet [data-screen="B1"] .sys-peek-ad-sub {
  font-size: 0.84375rem;
  line-height: 1.3;
  color: var(--sys-label-2);
}

/* Sponsored map pins & rich sponsored place card */
.sys-map-pin.is-sponsored {
  border-color: color-mix(in srgb, var(--b1-amber, #FFB340) 76%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--b1-amber, #FFB340) 26%, transparent), var(--b1-float-shadow, 0 6px 20px rgba(0, 0, 0, 0.42));
}
.sys-map-pin-crown {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--b1-amber, #FFB340);
  background: color-mix(in srgb, var(--b1-amber, #FFB340) 18%, transparent);
}
.sys-map-pin-offer {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--b1-amber, #FFB340);
  color: #050510;
  font-size: 0.75rem;
  line-height: 1.25;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
}
#screen-outlet :is([data-screen="B1"], [data-screen^="B1."]) .sys-discover-chip.is-sponsored {
  border-color: color-mix(in srgb, var(--b1-amber) 45%, var(--sys-hairline));
}
#screen-outlet [data-screen="B1"] .sys-discover-card.is-sponsored {
  border-color: color-mix(in srgb, var(--b1-amber) 48%, var(--sys-edge));
}
#screen-outlet [data-screen="B1"] .sys-dc-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#screen-outlet [data-screen="B1"] .sys-dc-banner[hidden] {
  display: none;
}
#screen-outlet [data-screen="B1"] .sys-dc-banner-img {
  width: 100%;
  height: 112px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
#screen-outlet [data-screen="B1"] .sys-dc-banner-img[hidden] {
  display: none;
}
#screen-outlet [data-screen="B1"] .sys-dc-banner-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
#screen-outlet [data-screen="B1"] .sys-dc-sponsored-pill {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--b1-amber) 16%, transparent);
  color: var(--b1-amber);
  font-size: 0.78125rem;
  font-weight: 700;
}
#screen-outlet [data-screen="B1"] .sys-dc-banner-headline {
  min-width: 0;
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--sys-label-2);
}
#screen-outlet [data-screen="B1"] .sys-dc-offer-box {
  padding: 10px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--b1-amber) 12%, var(--sys-raised));
  border: 1px solid color-mix(in srgb, var(--b1-amber) 34%, transparent);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#screen-outlet [data-screen="B1"] .sys-dc-offer-box[hidden] {
  display: none;
}
#screen-outlet [data-screen="B1"] .sys-dc-offer-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--b1-amber);
  font-size: 0.78125rem;
  font-weight: 700;
}
#screen-outlet [data-screen="B1"] .sys-dc-offer-text {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--sys-label);
}
/* An ad's own words on B1 (the pin's offer; B1's own ad cards and «Pro Max» card, drawn when core/ads-slots.js could not load):
   a long word (a German compound, a link, a name with no space) wraps inside its box instead of running out of it, and the
   text starts on its own side (the owner, 2026-11-09: the home's ad texts ran into one another) */
#screen-outlet [data-screen="B1"] :is(.sys-dc-offer-text, .sys-hz-card-title, .sys-hz-wide-title, .sys-hz-wide-sub,
  .sys-promax-business, .sys-promax-title, .sys-promax-sub) {
  overflow-wrap: anywhere;
}
#screen-outlet [data-screen="B1"] :is(.sys-hz-card, .sys-hz-wide) {
  text-align: start;
}

/* ── Wave 11: Global Micro-Typography Floor (Apple HIG caption2 11px / 11.5px) ──
   Screens with an existing 14–15px floor (Taxi C/CF/CP/CA/Q/T3, Auth A*, Freight YF/YP,
   Club O*, Legal LS*, B2, and the 15px rebuilt sheets) keep their higher floor intact.
   All other Stitch screens raise microscopic 7–9.5px text to 11px (0.6875rem) and
   10–10.5px text to 11.5px (0.71875rem), while capping wide uppercase tracking so pills
   never wrap or overflow on 360px phones. */
#screen-outlet [data-screen="C5.offline"] :is(
  [class~="text-[7px]"], [class~="text-[8px]"], [class~="text-[8.5px]"],
  [class~="text-[9px]"], [class~="text-[9.5px]"], [class~="text-[10px]"], [class~="text-[10.5px]"]
):not([class*="material-symbols-"]) {
  font-size: 0.875rem !important;
  line-height: 1.38 !important;
}

:is(#screen-outlet, #overlay-outlet) [data-screen]:not(
  [data-screen^="A"], [data-screen^="C"], [data-screen^="Q"], [data-screen^="LS"],
  [data-screen^="YF"], [data-screen^="YP"], [data-screen^="O"],
  [data-screen="B2"], [data-screen="T3"], [data-screen="EP3.tv"],
  [data-screen="F4.problem"], [data-screen="FF3"], [data-screen="FP1.vecka"],
  [data-screen="FP4.personal"], [data-screen="FP8"], [data-screen="FP9"], [data-screen="I4.problem"],
  [data-screen="IF5"], [data-screen="IF6"]
) :is(
  [class~="text-[7px]"],
  [class~="text-[8px]"],
  [class~="text-[8.5px]"],
  [class~="text-[9px]"],
  [class~="text-[9.5px]"]
):not([class*="material-symbols-"], [data-partial="driver-drawer"] *) {
  font-size: 0.6875rem !important;
  line-height: 1.35 !important;
}

:is(#screen-outlet, #overlay-outlet) [data-screen]:not(
  [data-screen^="A"], [data-screen^="C"], [data-screen^="Q"], [data-screen^="LS"],
  [data-screen^="YF"], [data-screen^="YP"], [data-screen^="O"],
  [data-screen="B2"], [data-screen="T3"], [data-screen="EP3.tv"],
  [data-screen="F4.problem"], [data-screen="FF3"], [data-screen="FP1.vecka"],
  [data-screen="FP4.personal"], [data-screen="FP8"], [data-screen="FP9"], [data-screen="I4.problem"],
  [data-screen="IF5"], [data-screen="IF6"]
) :is(
  [class~="text-[10px]"],
  [class~="text-[10.5px]"]
):not([class*="material-symbols-"], [data-partial="driver-drawer"] *) {
  font-size: 0.71875rem !important;
  line-height: 1.38 !important;
}

:is(#screen-outlet, #overlay-outlet) [data-screen]:not([data-screen="EP3.tv"]) :is(
  [class~="text-[7px]"], [class~="text-[8px]"], [class~="text-[8.5px]"],
  [class~="text-[9px]"], [class~="text-[9.5px]"], [class~="text-[10px]"], [class~="text-[10.5px]"]
):is(
  [class~="tracking-[0.2em]"],
  [class~="tracking-[0.22em]"],
  [class~="tracking-[0.24em]"],
  [class~="tracking-[0.25em]"],
  [class~="tracking-[0.28em]"],
  [class~="tracking-[0.3em]"]
) {
  letter-spacing: 0.08em !important;
}

/* ── Wave 11: Sheet Drag Handle 28px+ Tap Box (Zero Visual or Stop Shift) ──
   Expands button[data-action="sheet-toggle"] and button[data-sheet-handle] border-box
   to >= 84x28px via content-box + background-clip: content-box + symmetric negative
   margins so the 4–5px visual pill and sheet stop offsets stay 100% identical. */
:is(#screen-outlet, #overlay-outlet) button:is([data-action="sheet-toggle"], [data-sheet-handle]):not(.sys-b1-handle, .absolute) {
  box-sizing: content-box;
  padding-block: 12px;
  padding-inline: 24px;
  margin-top: -12px;
  margin-bottom: -12px;
  border-radius: 9999px;
  background-clip: content-box;
}
:is(#screen-outlet, #overlay-outlet) button:is([data-action="sheet-toggle"], [data-sheet-handle]):not(.sys-b1-handle, .absolute, .mx-auto) {
  margin-inline: -24px;
}
:is(#screen-outlet, #overlay-outlet) button:is([data-action="sheet-toggle"], [data-sheet-handle]).-mt-0\.5 { margin-top: -14px; }
:is(#screen-outlet, #overlay-outlet) button:is([data-action="sheet-toggle"], [data-sheet-handle]).mb-0\.5 { margin-bottom: -10px; }
:is(#screen-outlet, #overlay-outlet) button:is([data-action="sheet-toggle"], [data-sheet-handle]).mb-1 { margin-bottom: -8px; }
/* The bar keeps its own 40×4 in both looks. A screen's «Ljus» block that paints the handle with the background shorthand
   (css/stitch/taxi/C1.css–C4.css, !important) puts background-clip back to border-box, so the whole tap box above came
   out as a grey 88×28 capsule by day (owner, 2026-10-31). html[data-apple-theme] outranks those blocks (1,3,1). */
html[data-apple-theme] :is(#screen-outlet, #overlay-outlet) button:is([data-action="sheet-toggle"], [data-sheet-handle]):not(.sys-b1-handle, .absolute) {
  background-clip: content-box !important;
}

/* ── The moving flow's chips (css/stitch/moving/G1.css, G2.css: the shared .sys-move-chip, 7 px × 13 px) ──
   The stitch base resets every control in a screen ([data-screen] button: padding 0, specificity 0,1,1), which outranks
   the bare class (0,1,0): «Lägenhet», «35 m²», «1 rok», «Exakt datum» lost their sides and their words ran into each
   other (owner, 2026-10-31). The same padding, scoped so it holds. */
#screen-outlet [data-screen] button.sys-move-chip { padding: 7px 13px; }
:is(#screen-outlet, #overlay-outlet) button:is([data-action="sheet-toggle"], [data-sheet-handle]).mb-2\.5 { margin-bottom: -2px; }
:is(#screen-outlet, #overlay-outlet) button:is([data-action="sheet-toggle"], [data-sheet-handle]).mb-3 { margin-bottom: 0; }
:is(#screen-outlet, #overlay-outlet) button:is([data-action="sheet-toggle"], [data-sheet-handle]).mb-3\.5 { margin-bottom: 2px; }
:is(#screen-outlet, #overlay-outlet) button:is([data-action="sheet-toggle"], [data-sheet-handle]).mb-4 { margin-bottom: 4px; }
:is(#screen-outlet, #overlay-outlet) button:is([data-action="sheet-toggle"], [data-sheet-handle]).mb-5 { margin-bottom: 8px; }
:is(#screen-outlet, #overlay-outlet) button:is([data-action="sheet-toggle"], [data-sheet-handle]).absolute.top-3 {
  box-sizing: content-box;
  padding: 12px 24px;
  top: 0;
  border-radius: 9999px;
  background-clip: content-box;
}
/* Account for the 12px vertical / 24–26px horizontal padding above so frame.css's ::before reach
   never pokes above the sheet into .map-credit (6px above [data-map-credit]) or over controls below. */
:is(#screen-outlet, #overlay-outlet) button[data-sheet-handle]::before {
  inset: 0 -22px -4px;
}

/* ── Wave 11: MapLibre Attribution Harmony (Compact, Legible 11px, Glare-Free) ── */
.maplibregl-ctrl.maplibregl-ctrl-attrib {
  padding: 2px 8px;
  border-radius: 999px;
  background-color: var(--sys-glass);
  border: 0.5px solid var(--sys-hairline);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  color: var(--sys-label-2);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  line-height: 1.35;
}
.maplibregl-ctrl-attrib.maplibregl-compact {
  min-height: 22px;
  margin: 8px;
  background-color: var(--sys-glass);
  color: var(--sys-label-2);
  border: 0.5px solid var(--sys-hairline);
  border-radius: 999px;
}
.maplibregl-ctrl-attrib a {
  color: var(--sys-label-2);
  font-size: 0.6875rem;
  line-height: 1.35;
  text-decoration: none;
}
.maplibregl-ctrl-attrib a:hover {
  color: var(--sys-label);
  text-decoration: underline;
}
/* ── Wave 15 G2: Universal Sticky Frosted Header & Avatar Companions ── */
/* Unblocks sticky positioning inside subpage wrappers that carried overflow-hidden */
#screen-outlet [data-screen]:not([data-screen^="B1"]):not([data-screen^="A1"]):not([data-screen^="A2"]):not([data-screen="EP3.tv"]):not([data-screen="EP3.skylt"]):not(:has([data-map-slot])) > div.overflow-hidden,
#screen-outlet [data-screen]:not([data-screen^="B1"]):not([data-screen^="A1"]):not([data-screen^="A2"]):not([data-screen="EP3.tv"]):not([data-screen="EP3.skylt"]):not(:has([data-map-slot])) > div > :is(div, main):first-child.overflow-hidden:not([data-sheet]) {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Unified Apple ultraThinMaterial sticky header across subpages (Dark default) */
.subpage-header,
.rider-header-page,
.sys-sticky-header,
.p-sub-hdr[data-partial="subpage-header"],
.p-sub-hdr[data-partial="driver-header-page"],
.p-sub-hdr[data-partial="rider-header-page"],
#screen-outlet [data-screen]:not([data-screen^="B1"]):not([data-screen^="A1"]):not([data-screen^="A2"]) > header:first-of-type,
#screen-outlet [data-screen]:not([data-screen^="B1"]):not([data-screen^="A1"]):not([data-screen^="A2"]):not([data-screen="EP3.tv"]):not([data-screen="EP3.skylt"]):not(:has([data-map-slot])) > div > header:first-of-type:not(.absolute):not(.fixed):not([data-partial="map-header"]):not([data-partial="driver-header-work"]):not([data-partial="rider-header-live"]):not([data-purpose="map-header"]),
#screen-outlet [data-screen]:not([data-screen^="B1"]):not([data-screen^="A1"]):not([data-screen^="A2"]):not([data-screen="EP3.tv"]):not([data-screen="EP3.skylt"]):not(:has([data-map-slot])) > div > :is(div, main):first-child > header:first-of-type:not(.absolute):not(.fixed):not([data-partial="map-header"]):not([data-partial="driver-header-work"]):not([data-partial="rider-header-live"]):not([data-purpose="map-header"]) {
  position: sticky !important;
  top: 0 !important;
  z-index: 45 !important;
  border-radius: 0 !important;
  background: rgba(11, 14, 23, 0.82) !important;
  background-color: rgba(11, 14, 23, 0.82) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Escape page horizontal/top padding so subpage headers never float as an inset box */
#screen-outlet [data-screen]:not([data-screen^="B1"]):not([data-screen^="A1"]):not([data-screen^="A2"]):not([data-screen="EP3.tv"]):not([data-screen="EP3.skylt"]):not(:has([data-map-slot])) > div > :is(div, main):first-child.px-4 > header:first-of-type:not(.absolute):not(.fixed) {
  width: calc(100% + 2rem) !important;
  margin-inline: -1rem !important;
  padding-inline: 1rem !important;
}
#screen-outlet [data-screen]:not([data-screen^="B1"]):not([data-screen^="A1"]):not([data-screen^="A2"]):not([data-screen="EP3.tv"]):not([data-screen="EP3.skylt"]):not(:has([data-map-slot])) > div > :is(div, main):first-child.px-5 > header:first-of-type:not(.absolute):not(.fixed) {
  width: calc(100% + 2.5rem) !important;
  margin-inline: -1.25rem !important;
  padding-inline: 1.25rem !important;
}
#screen-outlet [data-screen]:not([data-screen^="B1"]):not([data-screen^="A1"]):not([data-screen^="A2"]):not([data-screen="EP3.tv"]):not([data-screen="EP3.skylt"]):not(:has([data-map-slot])) > div > :is(div, main):first-child.pt-3 > header:first-of-type:not(.absolute):not(.fixed) {
  margin-top: -0.75rem !important;
}
#screen-outlet [data-screen]:not([data-screen^="B1"]):not([data-screen^="A1"]):not([data-screen^="A2"]):not([data-screen="EP3.tv"]):not([data-screen="EP3.skylt"]):not(:has([data-map-slot])) > div > :is(div, main):first-child.pt-4 > header:first-of-type:not(.absolute):not(.fixed) {
  margin-top: -1rem !important;
}

/* Unified Apple ultraThinMaterial sticky header (Light mode) */
html[data-theme="light"] .subpage-header,
html[data-theme="light"] .rider-header-page,
html[data-theme="light"] .sys-sticky-header,
html[data-theme="light"] .p-sub-hdr[data-partial="subpage-header"],
html[data-theme="light"] .p-sub-hdr[data-partial="driver-header-page"],
html[data-theme="light"] .p-sub-hdr[data-partial="rider-header-page"],
html[data-theme="light"] #screen-outlet [data-screen]:not([data-screen^="B1"]):not([data-screen^="A1"]):not([data-screen^="A2"]) > header:first-of-type,
html[data-theme="light"] #screen-outlet [data-screen]:not([data-screen^="B1"]):not([data-screen^="A1"]):not([data-screen^="A2"]):not([data-screen="EP3.tv"]):not([data-screen="EP3.skylt"]):not(:has([data-map-slot])) > div > header:first-of-type:not(.absolute):not(.fixed):not([data-partial="map-header"]):not([data-partial="driver-header-work"]):not([data-partial="rider-header-live"]):not([data-purpose="map-header"]),
html[data-theme="light"] #screen-outlet [data-screen]:not([data-screen^="B1"]):not([data-screen^="A1"]):not([data-screen^="A2"]):not([data-screen="EP3.tv"]):not([data-screen="EP3.skylt"]):not(:has([data-map-slot])) > div > :is(div, main):first-child > header:first-of-type:not(.absolute):not(.fixed):not([data-partial="map-header"]):not([data-partial="driver-header-work"]):not([data-partial="rider-header-live"]):not([data-purpose="map-header"]),
html[data-apple-theme="light"] .subpage-header,
html[data-apple-theme="light"] .rider-header-page,
html[data-apple-theme="light"] .sys-sticky-header,
html[data-apple-theme="light"] .p-sub-hdr[data-partial="subpage-header"],
html[data-apple-theme="light"] .p-sub-hdr[data-partial="driver-header-page"],
html[data-apple-theme="light"] .p-sub-hdr[data-partial="rider-header-page"],
html[data-apple-theme="light"] #screen-outlet [data-screen]:not([data-screen^="B1"]):not([data-screen^="A1"]):not([data-screen^="A2"]) > header:first-of-type,
html[data-apple-theme="light"] #screen-outlet [data-screen]:not([data-screen^="B1"]):not([data-screen^="A1"]):not([data-screen^="A2"]):not([data-screen="EP3.tv"]):not([data-screen="EP3.skylt"]):not(:has([data-map-slot])) > div > header:first-of-type:not(.absolute):not(.fixed):not([data-partial="map-header"]):not([data-partial="driver-header-work"]):not([data-partial="rider-header-live"]):not([data-purpose="map-header"]),
html[data-apple-theme="light"] #screen-outlet [data-screen]:not([data-screen^="B1"]):not([data-screen^="A1"]):not([data-screen^="A2"]):not([data-screen="EP3.tv"]):not([data-screen="EP3.skylt"]):not(:has([data-map-slot])) > div > :is(div, main):first-child > header:first-of-type:not(.absolute):not(.fixed):not([data-partial="map-header"]):not([data-partial="driver-header-work"]):not([data-partial="rider-header-live"]):not([data-purpose="map-header"]) {
  background: rgba(248, 250, 252, 0.88) !important;
  background-color: rgba(248, 250, 252, 0.88) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}

/* Wave 15 G2: Animated Pet Companion & Blue BankID Verified Avatar Badges */
.sys-avatar-decorated {
  position: relative !important;
  overflow: visible !important;
}

@keyframes sysPetBob {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-4deg) scale(1);
  }
  50% {
    transform: translate3d(0, -3px, 0) rotate(6deg) scale(1.06);
  }
}

/* round 45: the 3D animal companion (core/companions.js) sits on its own base at the avatar's bottom corner, overlapping it a
   little; no circle behind it. A soft drop-shadow grounds it, and on dark hides the faint light fringe of the penguin and the moose */
@keyframes sysCompanionIdle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50% { transform: translate3d(0, -2px, 0) rotate(2deg); }
}
.sys-pet-companion-badge {
  position: absolute;
  right: -12px;
  bottom: -8px;
  z-index: 6;
  width: 28px;
  height: 28px;
  display: block;
  pointer-events: none;
  user-select: none;
  transform-origin: 50% 100%;
  animation: sysCompanionIdle 3.2s ease-in-out infinite;
}
.sys-pet-companion-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
  -webkit-user-drag: none;
}

.sys-bankid-verified-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 7;
  width: 21px;
  height: 21px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0A84FF 0%, #0066CC 100%);
  border: 2px solid #090B10;
  box-shadow: 0 2px 8px rgba(10, 132, 255, 0.45);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

html[data-theme="light"] .sys-pet-companion-img,
html[data-apple-theme="light"] .sys-pet-companion-img {
  filter: drop-shadow(0 2px 2px rgba(15, 23, 42, 0.18));
}

html[data-theme="light"] .sys-bankid-verified-badge,
html[data-apple-theme="light"] .sys-bankid-verified-badge {
  background: linear-gradient(135deg, #007AFF 0%, #0055B3 100%);
  border-color: #F8FAFC;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.32);
}

@media (prefers-reduced-motion: reduce) {
  .sys-pet-companion-badge {
    animation: none !important;
    transform: none !important;
  }
}
html.a11y-calm .sys-pet-companion-badge {
  animation: none !important;
}