/* Plain page and account-menu layout. Shared Glacier colours are defined in glacier.css.
   Existing spacing, grouping, typography and motion remain the layout authority here. */
:root { --fb-bg:var(--g-base); --fb-bg2:var(--g-surface); --fb-text:var(--g-contrast); --fb-muted:var(--g-muted); --fb-dim:var(--g-muted); --fb-raised:var(--g-raised); --fb-border:var(--g-line); --fb-press:var(--g-pressed); }

/* ---- Pages: one light 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;
--g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
/* 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;
--g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}

/* ---- 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;
--g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
/* 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:var(--g-accent)!important; font-weight:600!important; color:var(--g-on-accent);--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
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:var(--g-raised)!important; color:var(--g-ink)!important; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
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:var(--g-muted)!important; font-size:0!important;
--g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
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:22px!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:var(--g-muted)!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:var(--g-raised)!important; color:var(--g-ink)!important; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
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:var(--g-muted)!important; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
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; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
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:var(--g-accent)!important; border-color:var(--g-accent)!important; color:var(--g-on-accent);--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
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; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
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; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
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:var(--g-accent)!important; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}

/* ---- 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:var(--g-ink)!important; color:var(--g-ink)!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; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
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; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
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:999px!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; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}

/* ---- 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;
}
/* Rows with the hidden attribute stay hidden: the row rules above set display, which would otherwise show
   admin-only rows (Usage statistics) and signed-in-only rows to everyone. */
body.vertex-v3 #app#app#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)[hidden] { display:none!important; }