/* Flat black pages (Bjorn 2026-10-31, from his reference picture): You, Search, the account menu and every page
   opened from them (Ski log, My routes, Saved mountains, Friends, Profile, Messages, My gear, Safety & learning,
   Settings) sit on one near-black page with no boxes: rows lie straight on the background, light large titles,
   grey sub-lines, quiet monochrome icons, round white badges for the main rows. Blue stays for what is on or
   chosen. Map cards (place, tour, layers) keep their own look, since they float over the map.
   Loaded last; the repeated #app beats the older dark-card rules in you.css, search.css and settings.css. */
:root { --fb-bg:#0b0b0c; --fb-bg2:#141416; --fb-text:#f4f4f5; --fb-muted:#9b9ba3; --fb-dim:#6c6c74; --fb-raised:#1c1c1f; --fb-border:#38383d; --fb-press:#ffffff12; }

/* ---- Pages: one black page colour (phones full screen; desktop side panel the same) ---- */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#youSheet,#activitiesSheet,#compareSheet,#communityView,#exploreSheet:has(#tourHubTabs[hidden]),#settingsSheet,#findSheet,#profileEditorSheet,#communitySafetySheet):not([hidden]) {
  --ui-base:var(--fb-bg); --ui-surface:var(--fb-bg); --ui-raised:var(--fb-raised); --ui-text:var(--fb-text); --ui-muted:var(--fb-muted);
  --you-bg:var(--fb-bg); --you-card:transparent; --you-line:transparent; --you-text:var(--fb-text); --you-muted:var(--fb-muted);
  --st-row:transparent; --st-line:transparent; --st-muted:var(--fb-muted); --st-text:var(--fb-text);
  background:linear-gradient(180deg,var(--fb-bg) 0,var(--fb-bg) 45%,var(--fb-bg2) 100%) fixed!important; color:var(--fb-text)!important;
}
/* Sticky heads take the page colour, so lists scroll under them cleanly. */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#youSheet,#activitiesSheet,#compareSheet,#communityView,#exploreSheet,#settingsSheet,#findSheet,#profileEditorSheet,#communitySafetySheet) :is(.activities-head,.you-child-head,.community-head,.settings-head,.routes-library-toolbar,.find-sheet-head,.safety-foot,.you-top) {
  background:var(--fb-bg)!important; box-shadow:none!important; border-color:transparent!important;
}

/* ---- No boxes: grouped cards become plain rows on the page ---- */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#youSheet,#activitiesSheet,#compareSheet,#communityView,#exploreSheet,#settingsSheet,#findSheet,#communitySafetySheet) :is(
  .you-menu,.st-group,.settings-section,.community-profile-hero,.community-my-profile-card,.community-person-card,.community-route-card,.community-library-card,.community-friend-row,.community-list,.community-people-list,
  .compare-card,.activities-list,.activity-row,.route-row,.favorite-place,.gear-row,.gear-hero,.gear-stats,.safety-card,.safety-row,.safety-option,.message-card-list,.wall-inbox,
  .search-result,.area-chooser-place,.find-guides,.find-guide,#areaChooserReturn,.activities-empty,.community-empty) {
  background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important;
}
/* Rows: more air, no divider lines. */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#youSheet,#activitiesSheet,#communityView,#exploreSheet,#settingsSheet,#findSheet) :is(.you-menu>button,.st-row,.account-link,.search-result,.area-chooser-place,.activity-row,.route-row,.favorite-place,.community-friend-row,.gear-row,.find-guide) {
  border-top:0!important; border-bottom:0!important; min-height:54px!important;
}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#youSheet,#activitiesSheet,#communityView,#exploreSheet,#settingsSheet,#findSheet) :is(.you-menu>button,.st-row,.account-link,.search-result,.area-chooser-place,.activity-row,.route-row,.favorite-place,.community-friend-row,.gear-row):active {
  background:var(--fb-press)!important;
}

/* ---- Type: light, large titles; grey sub-lines ---- */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#youSheet .you-top h2,#findSheet .find-sheet-head h2,#settingsSheet h2,#activitiesSheet .activities-head h2,#communityView .community-head h2,#exploreSheet h2) {
  font-weight:500!important; letter-spacing:-.01em!important; color:var(--fb-text)!important;
}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet .you-top h2 { font-size:28px!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#youSheet .you-menu>button>b,#settingsSheet :is(.st-row,.account-link) b,#findSheet :is(.area-chooser-place-copy,.search-result-copy) b,#findSheet .find-guide b) {
  font-weight:400!important; font-size:16px!important; color:var(--fb-text)!important;
}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#settingsSheet .st-text>span,#findSheet :is(.area-chooser-place-copy,.search-result-copy) small,#findSheet .find-guide small,#youSheet .you-me-name small) {
  font-weight:400!important; font-size:13px!important; color:var(--fb-muted)!important;
}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#youSheet .you-label,#settingsSheet .st-label,#findSheet .area-chooser-list h3) { color:var(--fb-dim)!important; margin-top:10px!important; }
/* Chevrons are not needed when the whole row is the button. */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#youSheet .you-menu>button>i,#youSheet .you-me>i,#findSheet :is(.area-chooser-place>svg:last-child,.search-result-chevron)) { opacity:.45; }

/* ---- You home ---- */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet .you-me-avatar { width:52px!important; height:52px!important; background:#e8231e!important; font-weight:600!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet .you-me-name b { font-weight:500!important; font-size:19px!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet .you-season-summary { border:0!important; margin:20px 0 14px!important; padding:4px 0!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet .you-season-summary>div+div { border-left:0!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet .you-season-summary b { font-weight:500!important; font-size:24px!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet .you-menu { margin:0 -6px 14px!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet .you-menu>button { gap:18px!important; padding:0 6px!important; }
/* The main rows get round white badges with a dark glyph, like the reference picture. */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet .you-menu>button>span { width:34px!important; height:34px!important; min-width:34px!important; background:#f2f2f3!important; color:#111113!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet .you-top #closeYou { background:var(--fb-raised)!important; }

/* ---- Search: back arrow left of a round outlined pill, no title ---- */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet .find-sheet-head { position:relative!important; height:0!important; min-height:0!important; margin:0!important; padding:0!important; overflow:visible!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet .find-sheet-head h2 { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet .find-cancel {
  position:absolute!important; left:-6px!important; top:0!important; z-index:2; width:40px!important; height:48px!important; min-width:40px!important;
  background:none!important; border:0!important; border-radius:0!important; box-shadow:none!important; color:#d8d8dc!important; font-size:0!important;
}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet .find-cancel::before { content:""; display:block; width:13px; height:13px; margin:0 auto; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateX(3px) rotate(45deg); }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet #searchBox {
  margin-left:40px!important; height:48px!important; min-height:48px!important; border:1.5px solid var(--fb-border)!important; border-radius:26px!important; background:var(--fb-raised)!important;
}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet #searchBox input { font-size:16px!important; font-weight:400!important; color:var(--fb-text)!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet #searchBox input::placeholder { color:#86868e!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet :is(.area-chooser-place,.search-result) { gap:16px!important; padding:8px 4px!important; }
/* Mountains get the round white badge; villages, food, shops a quiet grey glyph. */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet :is(.area-chooser-place-icon,.search-result-icon) { width:34px!important; height:34px!important; min-width:34px!important; background:#f2f2f3!important; color:#111113!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet :is(.search-result-icon[data-kind="poi"],#findNearby .area-chooser-place-icon) { background:none!important; color:#c4c4ca!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet .find-cats button { background:transparent!important; border:1.5px solid var(--fb-border)!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet .find-cats button[aria-pressed="true"] { background:#3b82f6!important; border-color:#3b82f6!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet .area-chooser-tabs { background:transparent!important; padding:0!important; gap:22px; justify-content:flex-start; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet .area-chooser-tabs button { flex:none!important; background:none!important; border-radius:0!important; padding:0 0 6px!important; color:var(--fb-muted)!important; font-weight:400!important; font-size:16px!important; border-bottom:1.5px solid transparent!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet .area-chooser-tabs button[aria-selected="true"] { background:none!important; color:var(--fb-text)!important; border-bottom-color:#3b82f6!important; }

/* ---- Account menu behind the avatar: a black sheet of plain rows ---- */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu {
  background:var(--fb-bg)!important; border:1px solid #ffffff14!important; box-shadow:0 18px 50px #000a!important;
}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu-who { border-bottom:0!important; padding-bottom:16px!important; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu-who p { font-weight:500!important; font-size:16px!important; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu button:not(.shell-menu-avatar) { min-height:50px!important; font-weight:400!important; font-size:16px!important; color:var(--fb-text)!important; background:none!important; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu button:not(.shell-menu-avatar):active { background:var(--fb-press)!important; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu button svg { color:#c4c4ca!important; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu button[data-menu="signout"] { color:#ff6b62!important; margin-top:6px; }

/* ---- Fields in these pages: the same outlined pill as search ---- */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#profileEditorSheet>label,#communityView .community-search,#youSheet .gear-field) :is(input,textarea) {
  background:var(--fb-raised)!important; border:1.5px solid var(--fb-border)!important;
}

/* ---- Smooth feel (Bjorn 2026-10-31): one motion everywhere, no vibration ----
   The pages pin translate/transform with !important (so an older card rule cannot move them), and an
   animation cannot beat !important. They read the slide from a registered custom property instead, which
   the animation drives. Browsers without @property simply show the page at once. */
@property --fb-push { syntax:'<percentage>'; inherits:false; initial-value:0%; }
@property --fb-rise { syntax:'<length>'; inherits:false; initial-value:0px; }
@keyframes fb-page-push { from { --fb-push:100%; } to { --fb-push:0%; } }
@keyframes fb-page-rise { from { --fb-rise:28px; opacity:.6; } to { --fb-rise:0px; opacity:1; } }
@media (max-width:899px) and (prefers-reduced-motion:no-preference) {
  /* Pages opened from You come in from the right, like going one step in. */
  body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#activitiesSheet,#compareSheet,#communityView,#exploreSheet:has(#tourHubTabs[hidden]),#youSheet[data-gear-view],#youSheet[data-safety-view],#settingsSheet,#profileEditorSheet):not([hidden]) {
    translate:var(--fb-push) 0!important; animation:fb-page-push 300ms cubic-bezier(.2,.9,.3,1) both!important;
  }
  /* You and Search rise in from the bottom bar with the same curve as the cards. */
  body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet:not([hidden]):not([data-gear-view]):not([data-safety-view]),
  body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet:not([hidden]) {
    translate:0 var(--fb-rise)!important; animation:fb-page-rise 280ms cubic-bezier(.2,.9,.3,1) both!important;
  }
}
/* Every button answers the finger at once: a small press, released with the same soft curve. */
:where(button,[role="button"],a.account-link) { -webkit-tap-highlight-color:transparent; transition:scale .16s cubic-bezier(.2,.9,.3,1),background-color .16s ease; }
:where(button,[role="button"]):active:not(:disabled) { scale:.95; }
/* Full-width rows press less, so the text does not jump. */
:where(.you-menu>button,.st-row,.account-link,.search-result,.area-chooser-place,.shell-menu button,.activity-row,.route-row,.community-friend-row,.favorite-place,.gear-row):active:not(:disabled) { scale:.985; }
@media (prefers-reduced-motion:reduce) { :where(button,[role="button"]):active { scale:none; } }

/* ---- Fixes after the phone pass ---- */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet .you-menu>button>span svg {
  display:block!important; width:18px!important; height:18px!important; opacity:1!important; visibility:visible!important; fill:none!important; stroke:#111113!important; color:#111113!important;
}
/* Ski log totals: four plain numbers instead of four boxes. */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #activitiesSheet .activities-totals>* { background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; padding-left:4px!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #activitiesSheet .activities-totals b { font-weight:500!important; font-size:22px!important; color:var(--fb-text)!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #activitiesSheet .activities-totals :is(small,span) { color:var(--fb-muted)!important; }
/* Friends: no box behind the head or the people search. */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView :is(.community-head,.community-search-wrap,.community-search,.community-tabs) { background:transparent!important; border-color:transparent!important; box-shadow:none!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView .community-search input { border-radius:24px!important; height:48px!important; }
/* Page heads: the same light title everywhere. */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#youSheet,#activitiesSheet,#communityView,#exploreSheet,#settingsSheet) :is(.activities-head,.you-child-head,.community-head,.settings-head) :is(h2,b,strong) { font-weight:500!important; font-size:19px!important; }
/* The search pill keeps to the screen beside the back arrow. */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet #searchBox { width:auto!important; max-width:none!important; box-sizing:border-box!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet .you-top h2 { font-size:28px!important; font-weight:500!important; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView :is(header,.people-context-nav,#peopleContextNav,.community-head>*) { background:transparent!important; box-shadow:none!important; border-color:transparent!important; }

/* ---- One type scale for the whole app (Bjorn 2026-10-31: one design, text a little smaller) ----
   Page title 28/500 · card title 18/500 · row 16/400 · sub-line 13/400 grey · section label 11.5/600 caps grey.
   Map cards (layers, Start activity, area card) use the same card title and section labels as the pages. */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(.panel-head h2,.record-head h2,#layerPanel h2,#recordSheet h2,.mode-head h2,.sheet-head h2) {
  font-size:18px!important; font-weight:500!important; letter-spacing:0!important; color:var(--fb-text)!important;
}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(.layer-grid-section>small,#youSheet .you-label,#settingsSheet .st-label,#findSheet .area-chooser-list h3) {
  display:block; font-size:11.5px!important; font-weight:600!important; letter-spacing:.12em!important; text-transform:uppercase!important; color:var(--fb-dim)!important;
}