/* =====================================================================
   WGG UI — the new design (Nov 8, 2026). One stylesheet, two themes.
   Benoit: "i want a design that does not look like it was build by AI.
   something friendly, appealing to navigate and look at ... unified".
   Mock-ups: WGG_docs/mockups/2026-11-08-parts-sheet.html and
   2026-11-08-road-trip-on-parts.html.

   PREVIEW ONLY: every rule below needs html.wgg-new, which wgg-ui.js sets
   only for an admin account that turned on Profile › "New design
   (preview)". Riders never get the class, so nothing here touches them.

   A redesigned area carries class "ui". Pages use only the named colours
   (--ui-*) and the ui- parts, never a colour of their own.
   Light = A "Sea glass". Dark = B "Night session". Auto follows the phone.
   ===================================================================== */
html.wgg-new .ui{
  /* Nov 8 -- Benoit picked "B · Deep sea glass" (mock-up 2026-11-08-light-mode-options): the first light was "very white" */
  /* Nov 8, later -- "in real life the contrast of the font isnt great": option 2 of
     mock-up 2026-11-08-readable-light-mode (darker ink, boxes one step lighter).
     Against the page: text 13.5:1, soft 8.4:1, faint 5.7:1, teal 5.7:1. */
  /* Nov 8, night -- Benoit: "i prefer the blue" (mock-up 2026-11-08-sessions-new-design,
     Ocean blue). Same contrast as the green: faint 5.7:1, blue 6.2:1 on the page. */
  --ui-bg:#D3E1EE; --ui-surface:#F1F5FA; --ui-surface-2:#E5EDF6; --ui-line:#B3C6DA;
  --ui-text:#0A1A2B; --ui-text-soft:#263D57; --ui-text-faint:#3D5671;
  --ui-primary:#174F8C; --ui-on-primary:#FFFFFF; --ui-primary-soft:#C7D9EE; --ui-on-tag:#FFFFFF;
  --ui-blue:#3D7DD8; --ui-lavender:#7B61C9; --ui-green:#3E9E5B; --ui-yellow:#B57C0E;
  --ui-blue-soft:#E3EDFB; --ui-lavender-soft:#EEE9FA; --ui-green-soft:#E3F3E8; --ui-yellow-soft:#FBF0D9;
  --ui-warn:#C9443F; --ui-warn-soft:#FDECEC;
  --ui-shadow:0 1px 2px rgba(16,48,58,.07),0 4px 14px rgba(16,48,58,.07);
}
@media (prefers-color-scheme: dark){
  html.wgg-new:not([data-wgg-theme="light"]) .ui{
    --ui-bg:#0E1824; --ui-surface:#16243A; --ui-surface-2:#1D2F49; --ui-line:rgba(255,255,255,.16);
    --ui-text:#EEF3F8; --ui-text-soft:#B9C9DA; --ui-text-faint:#9AB0C7;
    --ui-primary:#6FB2FF; --ui-on-primary:#06162A; --ui-primary-soft:rgba(111,178,255,.18); --ui-on-tag:#0E1824;
    --ui-blue:#6FB6FF; --ui-lavender:#B39DFF; --ui-green:#7BD88F; --ui-yellow:#FFCC5C;
    --ui-blue-soft:rgba(111,182,255,.14); --ui-lavender-soft:rgba(179,157,255,.14); --ui-green-soft:rgba(123,216,143,.14); --ui-yellow-soft:rgba(255,204,92,.14);
    --ui-warn:#FF8A7A; --ui-warn-soft:rgba(255,138,122,.13); --ui-shadow:none;
  }
}
html.wgg-new[data-wgg-theme="dark"] .ui{
  --ui-bg:#0E1824; --ui-surface:#16243A; --ui-surface-2:#1D2F49; --ui-line:rgba(255,255,255,.16);
  --ui-text:#EEF3F8; --ui-text-soft:#B9C9DA; --ui-text-faint:#9AB0C7;
  --ui-primary:#6FB2FF; --ui-on-primary:#06162A; --ui-primary-soft:rgba(111,178,255,.18); --ui-on-tag:#0E1824;
  --ui-blue:#6FB6FF; --ui-lavender:#B39DFF; --ui-green:#7BD88F; --ui-yellow:#FFCC5C;
  --ui-blue-soft:rgba(111,182,255,.14); --ui-lavender-soft:rgba(179,157,255,.14); --ui-green-soft:rgba(123,216,143,.14); --ui-yellow-soft:rgba(255,204,92,.14);
  --ui-warn:#FF8A7A; --ui-warn-soft:rgba(255,138,122,.13); --ui-shadow:none;
}
html.wgg-new .ui{
  /* wind colours: the same in both themes */
  
  --ui-font-display:'Bricolage Grotesque',system-ui,sans-serif; --ui-font-text:'Figtree',system-ui,sans-serif;
  --ui-r-s:10px; --ui-r-m:16px; --ui-r-l:22px;
  background:var(--ui-bg); color:var(--ui-text); font:500 15px/1.5 var(--ui-font-text);
}
/* wind colours: the same in both themes, for .ui areas and .ui-tk panels */
html.wgg-new .ui,html.wgg-new .ui-tk{--ui-w0:#9AA9B6; --ui-w1:#5BC0BE; --ui-w2:#6CC56F; --ui-w3:#F2C14E; --ui-w4:#F08A4B; --ui-w5:#E0525C;}
/* tones: a colour tag any part can take */
html.wgg-new .ui .tone-blue{--tone:var(--ui-blue);--tone-soft:var(--ui-blue-soft)}
html.wgg-new .ui .tone-lavender{--tone:var(--ui-lavender);--tone-soft:var(--ui-lavender-soft)}
html.wgg-new .ui .tone-green{--tone:var(--ui-green);--tone-soft:var(--ui-green-soft)}
html.wgg-new .ui .tone-yellow{--tone:var(--ui-yellow);--tone-soft:var(--ui-yellow-soft)}
html.wgg-new .ui .tone-warn{--tone:var(--ui-warn);--tone-soft:var(--ui-warn-soft)}

/* ---- text ---- */
html.wgg-new .ui .ui-h1{font:800 26px/1.15 var(--ui-font-display);letter-spacing:-.02em;margin:0;color:var(--ui-text)}
html.wgg-new .ui .ui-h2{font:700 17px/1.2 var(--ui-font-display);margin:0;color:var(--ui-text)}
html.wgg-new .ui .ui-soft{color:var(--ui-text-soft)}
html.wgg-new .ui .ui-faint{color:var(--ui-text-faint);font-size:13px}

/* ---- card ---- */
html.wgg-new .ui .ui-card{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r-l);padding:16px;box-shadow:var(--ui-shadow)}
/* ---- numbered step ---- */
html.wgg-new .ui .ui-step{display:flex;align-items:center;gap:10px;margin:0 0 12px}
html.wgg-new .ui .ui-step i{width:26px;height:26px;border-radius:50%;background:var(--tone);color:var(--ui-on-tag);display:grid;place-items:center;font:800 13px var(--ui-font-display);font-style:normal;flex:none}
/* ---- fields ---- */
html.wgg-new .ui .ui-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
html.wgg-new .ui .ui-field{display:flex;flex-direction:column;gap:2px;background:var(--ui-surface-2);border-radius:var(--ui-r-s);padding:7px 11px;min-width:0}
html.wgg-new .ui .ui-field>label,html.wgg-new .ui .ui-label{font:700 11.5px var(--ui-font-text);letter-spacing:.04em;text-transform:uppercase;color:var(--ui-text-faint);margin:0}
html.wgg-new .ui .ui-field input,html.wgg-new .ui .ui-field select,html.wgg-new .ui .ui-input{
  background:transparent !important;border:0 !important;color:var(--ui-text) !important;font:700 15px var(--ui-font-text) !important;padding:2px 0 !important;width:100%;min-width:0;box-shadow:none !important;border-radius:0 !important;outline:none}
html.wgg-new .ui .ui-field select option{color:#14323D;background:#fff}
html.wgg-new .ui .ui-field:focus-within{outline:2px solid var(--ui-primary);outline-offset:1px}
html.wgg-new .ui .ui-hint{color:var(--ui-text-faint);font-size:12.5px;margin:4px 2px 0}
html.wgg-new .ui input[type="range"]{accent-color:var(--ui-primary);width:100%}
html.wgg-new .ui input[type="checkbox"]{accent-color:var(--ui-primary) !important}
/* ---- buttons: main, second, quiet ---- */
html.wgg-new .ui .ui-btn,html.wgg-new .ui .ui-btn-main,html.wgg-new .ui .ui-btn-second,html.wgg-new .ui .ui-btn-quiet{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0 !important;border-radius:999px !important;padding:10px 18px !important;
  font:700 14px var(--ui-font-text) !important;cursor:pointer;text-decoration:none !important;box-shadow:none !important;text-transform:none !important;letter-spacing:0 !important;line-height:1.2 !important;width:auto}
html.wgg-new .ui .ui-btn-main{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new .ui .ui-btn-second{background:var(--ui-surface-2) !important;color:var(--ui-text) !important}
html.wgg-new .ui .ui-btn-quiet{background:none !important;color:var(--ui-primary) !important;padding:10px 8px !important}
html.wgg-new .ui .ui-btn-wide{width:100% !important}
html.wgg-new .ui .ui-btn-main:hover{filter:brightness(1.06)}html.wgg-new .ui .ui-btn-second:hover{filter:brightness(.97)}
html.wgg-new .ui :is(button,a,summary,input,select):focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}
/* ---- chips ---- */
html.wgg-new .ui .ui-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-text-soft);border-radius:999px;padding:5px 12px;font:600 13px var(--ui-font-text);cursor:pointer}
/* ---- number tiles ---- */
html.wgg-new .ui .ui-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
html.wgg-new .ui .ui-tile{background:var(--tone-soft,var(--ui-surface-2));border-radius:var(--ui-r-m);padding:12px 14px;min-width:0}
html.wgg-new .ui .ui-tile b{display:block;font:800 21px/1.15 var(--ui-font-display);color:var(--tone,var(--ui-text));font-variant-numeric:tabular-nums}
html.wgg-new .ui .ui-tile small{display:block;color:var(--ui-text-soft);font-size:12.5px;margin-top:2px}
/* ---- badges ---- */
html.wgg-new .ui .ui-badge{display:inline-block;border-radius:999px;padding:2px 9px;font:700 12px var(--ui-font-text);background:var(--tone-soft);color:var(--tone)}
/* ---- message ---- */
html.wgg-new .ui .ui-msg{display:flex;gap:10px;align-items:flex-start;border-radius:var(--ui-r-m);padding:11px 13px;background:var(--tone-soft,var(--ui-surface-2));color:var(--ui-text);font-size:14px}
/* ---- menu (Share ▾ / Export ▾) ---- */
html.wgg-new .ui .ui-menu-wrap{position:relative;display:inline-block}
html.wgg-new .ui .ui-menu-wrap>summary{list-style:none}html.wgg-new .ui .ui-menu-wrap>summary::-webkit-details-marker{display:none}
html.wgg-new .ui .ui-menu{position:absolute;z-index:30;top:calc(100% + 6px);left:0;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r-m);box-shadow:0 10px 28px rgba(0,0,0,.18);padding:6px;min-width:190px;display:flex;flex-direction:column}
html.wgg-new .ui .ui-menu>*{all:unset;box-sizing:border-box;display:block;padding:9px 11px;border-radius:var(--ui-r-s);font:500 14px var(--ui-font-text);color:var(--ui-text);cursor:pointer}
html.wgg-new .ui .ui-menu>*:hover,html.wgg-new .ui .ui-menu>*:focus-visible{background:var(--ui-surface-2)}

/* ---- the switch row in the profile panel (outside .ui, old design) ---- */
.wgg-preview-themes{display:flex;gap:6px;margin-top:6px}
.wgg-preview-themes button{flex:1;padding:6px;border-radius:8px;border:1px solid rgba(244,247,251,.28);background:none;color:inherit;font:inherit;font-size:12.5px;cursor:pointer}
.wgg-preview-themes button.on{background:#6FB2FF;color:#06162A;border-color:#6FB2FF;font-weight:700}

/* =====================================================================
   Road trip (first page on the new design). wgg-ui.js moves the page's
   own controls into 4 step cards (Where, When, What you ride, Driving);
   ids and behaviour stay the same, only where they sit and how they look
   change. Summary as number tiles, Share ▾ / Export ▾ menus, stops as cards.
   ===================================================================== */
html.wgg-new .ui.ui-rt{border-radius:var(--ui-r-l);padding:14px;container-type:inline-size}
html.wgg-new .ui-rt .ui-gone{display:none !important}
html.wgg-new .ui-rt>.section-sub,html.wgg-new .ui-rt .pt-tab-intro{color:var(--ui-text-soft) !important;font:15px/1.5 var(--ui-font-text) !important;margin:2px 2px 14px !important}
html.wgg-new .ui-rt .ui-rt-grid{display:grid;gap:16px}
@container (min-width:860px){html.wgg-new .ui-rt .ui-rt-grid{grid-template-columns:minmax(320px,400px) 1fr;align-items:start}}
html.wgg-new .ui-rt .ui-rt-steps,html.wgg-new .ui-rt .ui-rt-col{display:flex;flex-direction:column;gap:12px;min-width:0}
/* plan-and-ride.html keeps its own two columns; give them the new ground */
html.wgg-new .ui-rt .plan-trip-grid{background:none !important;gap:16px}
html.wgg-new .ui-rt .plan-trip-form,html.wgg-new .ui-rt .plan-trip-map-panel,html.wgg-new .ui-rt #roadtrip-map-mount{background:none !important;border:0 !important;color:var(--ui-text)}
html.wgg-new .ui-rt #roadtrip-map-mount{gap:12px}
/* the origin widget and the search keep their behaviour, new skin */
html.wgg-new .ui-rt #roadtrip-origin-widget{color:var(--ui-text)}
html.wgg-new .ui-rt #roadtrip-spot-search{background:var(--ui-surface-2) !important;border:1px solid var(--ui-line) !important;color:var(--ui-text) !important;border-radius:999px !important;padding:10px 14px !important;font:15px var(--ui-font-text) !important}
html.wgg-new .ui-rt .search-results{background:var(--ui-surface) !important;color:var(--ui-text) !important;border:1px solid var(--ui-line) !important;border-radius:var(--ui-r-m) !important}
html.wgg-new .ui-rt .ui-field:has(> select[style*="display: none"]),html.wgg-new .ui-rt .ui-field:has(> select[style*="display:none"]){display:none}
html.wgg-new .ui-rt .rt-fuel-row{color:var(--ui-text-soft) !important;font-size:13.5px;margin:8px 0 0 !important;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
html.wgg-new .ui-rt .rt-fuel-row input{background:var(--ui-surface-2) !important;border:0 !important;color:var(--ui-text) !important;border-radius:8px !important;padding:4px 6px !important;width:62px !important}
html.wgg-new .ui-rt .ui-fold>summary{cursor:pointer;color:var(--ui-text-soft);font-size:13.5px;list-style:none;margin-top:8px}
html.wgg-new .ui-rt .ui-fold>summary::before{content:"▸ "}html.wgg-new .ui-rt .ui-fold[open]>summary::before{content:"▾ "}
html.wgg-new .ui-rt .fdd-trigger{background:var(--ui-surface-2) !important;color:var(--ui-text) !important;border:0 !important;border-radius:var(--ui-r-s) !important}
html.wgg-new .ui-rt .fdd[open] .fdd-panel,html.wgg-new .ui-rt .fdd-panel{background:var(--ui-surface) !important;color:var(--ui-text) !important;border-color:var(--ui-line) !important}
html.wgg-new .ui-rt #roadtrip-windmin-value{font-weight:700;color:var(--ui-text)}
/* guide, suggestions, ideas, saved trips, restored banner */
html.wgg-new .ui-rt :is(#roadtrip-guide,#roadtrip-suggestions .rt-cluster,.rt-idea,#roadtrip-my-trips>div,.rt-trip-row){background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:var(--ui-r-m) !important;color:var(--ui-text) !important}
html.wgg-new .ui-rt :is(.rt-guide-title,.rt-sugg-head,.rt-cluster-head,.rt-idea-head){color:var(--ui-text) !important;font-family:var(--ui-font-display) !important}
html.wgg-new .ui-rt .rt-guide-num{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new .ui-rt :is(.rt-hint,.rt-ideas-note,.rt-guide-foot,.rt-map-note,.rt-wind-note,.rt-far,.rt-drive){color:var(--ui-text-soft) !important}
/* map */
html.wgg-new .ui-rt #roadtrip-map{border-radius:var(--ui-r-l) !important;border:1px solid var(--ui-line)}
html.wgg-new .ui-rt #roadtrip-map-toolbar{color:var(--ui-text-faint);font-size:13px}
/* summary: the old one-line text stays (the phone bar and the shared message read it), hidden */
html.wgg-new .ui-rt #roadtrip-route-summary{display:none !important}
html.wgg-new .ui-rt #roadtrip-route-tiles{margin-bottom:12px}
html.wgg-new .ui-rt #roadtrip-route-tools{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:10px 0 0;color:var(--ui-text)}
html.wgg-new .ui-rt #roadtrip-route-tools>label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ui-line);background:var(--ui-surface);border-radius:999px;padding:5px 12px;font:600 13px var(--ui-font-text);color:var(--ui-text-soft);cursor:pointer}
html.wgg-new .ui-rt #roadtrip-route-tools>label:has(input:checked){background:var(--ui-primary-soft);border-color:transparent;color:var(--ui-primary)}
html.wgg-new .ui-rt .rt-return-row{color:var(--ui-text-soft) !important;background:none !important;border-color:var(--ui-line) !important}
html.wgg-new .ui-rt .ui-rt-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
html.wgg-new .ui-rt #roadtrip-external-links{margin:0 !important}
html.wgg-new .ui-rt #roadtrip-external-links a{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;border:0 !important;border-radius:999px !important;padding:10px 18px !important;font:700 14px var(--ui-font-text) !important;text-decoration:none !important}
html.wgg-new .ui-rt #roadtrip-share-row{display:contents}
html.wgg-new .ui-rt .rt-spacer{display:none}
/* buttons and links the page draws itself */
html.wgg-new .ui-rt .rt-btn{background:var(--ui-surface-2) !important;color:var(--ui-text) !important;border:0 !important;border-radius:999px !important;padding:6px 12px !important;font:600 13px var(--ui-font-text) !important}
html.wgg-new .ui-rt .rt-btn.rt-btn-primary{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new .ui-rt .rt-btn.rt-btn-quiet,html.wgg-new .ui-rt .link-btn{background:none !important;color:var(--ui-primary) !important;border:0 !important;font-weight:700 !important}
html.wgg-new .ui-rt .link-btn:disabled{color:var(--ui-text-faint) !important}
html.wgg-new .ui-rt .cta-btn{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;border:0 !important;border-radius:999px !important;font:700 15px var(--ui-font-text) !important;padding:12px 18px !important;box-shadow:none !important;text-transform:none !important;letter-spacing:0 !important}
html.wgg-new .ui-rt .ui-menu .rt-btn{all:unset;box-sizing:border-box;display:block;padding:9px 11px;border-radius:var(--ui-r-s);font:500 14px var(--ui-font-text);color:var(--ui-text);cursor:pointer}
html.wgg-new .ui-rt .ui-menu .rt-btn:hover{background:var(--ui-surface-2)}
/* the route: one card per stop, its number in its own colour */
html.wgg-new .ui-rt .ui-route-title{display:block;margin:16px 0 8px !important;font:700 17px var(--ui-font-display) !important;color:var(--ui-text) !important;text-transform:none !important;letter-spacing:0 !important}
html.wgg-new .ui-rt #roadtrip-route-list{display:flex;flex-direction:column;gap:10px}
html.wgg-new .ui-rt #roadtrip-route-list .session-card{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:var(--ui-r-m) !important;box-shadow:var(--ui-shadow) !important;color:var(--ui-text) !important;padding:13px 14px !important;margin:0 !important}
html.wgg-new .ui-rt #roadtrip-route-list .session-card:nth-child(4n+1){--tone:var(--ui-blue)}
html.wgg-new .ui-rt #roadtrip-route-list .session-card:nth-child(4n+2){--tone:var(--ui-lavender)}
html.wgg-new .ui-rt #roadtrip-route-list .session-card:nth-child(4n+3){--tone:var(--ui-green)}
html.wgg-new .ui-rt #roadtrip-route-list .session-card:nth-child(4n+4){--tone:var(--ui-yellow)}
html.wgg-new .ui-rt .rt-stop-num{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:50%;background:var(--tone);color:var(--ui-on-tag);font:800 12.5px var(--ui-font-display);margin-right:4px;padding:0 4px;vertical-align:1px}
html.wgg-new .ui-rt #roadtrip-route-list .session-card b{font:700 16px var(--ui-font-display);color:var(--ui-text)}
html.wgg-new .ui-rt #roadtrip-route-list :is(.session-card-sub,.rt-dates,.rt-planb,label){color:var(--ui-text-soft) !important;font-family:var(--ui-font-text) !important}
html.wgg-new .ui-rt #roadtrip-route-list .session-card-sub[style*="F5A623"],html.wgg-new .ui-rt .rt-season{color:var(--ui-warn) !important}
html.wgg-new .ui-rt .rt-day{border-radius:999px !important;padding:2px 9px !important;font:700 12px var(--ui-font-text) !important;border:0 !important;background:var(--ui-surface-2) !important;color:var(--ui-text-soft) !important}
html.wgg-new .ui-rt .rt-day.good{background:var(--ui-green-soft) !important;color:var(--ui-green) !important}
html.wgg-new .ui-rt .rt-day.ok{background:var(--ui-yellow-soft) !important;color:var(--ui-yellow) !important}
html.wgg-new .ui-rt .rt-day.no{background:var(--ui-warn-soft) !important;color:var(--ui-warn) !important}
html.wgg-new .ui-rt #roadtrip-route-list input:not([type=checkbox]){background:var(--ui-surface-2) !important;border:0 !important;color:var(--ui-text) !important;border-radius:8px !important}
html.wgg-new .ui-rt .rt-note-input{width:100%;margin-top:8px;padding:8px 10px !important;font:14px var(--ui-font-text) !important}
html.wgg-new .ui-rt .rt-drag-handle{color:var(--ui-text-faint) !important}
html.wgg-new .ui-rt .rt-custom-tag{background:var(--ui-yellow-soft) !important;color:var(--ui-yellow) !important;border-radius:999px;padding:1px 8px}

/* suggestions list (after "Find spots"), discipline picker, readouts */
html.wgg-new .ui-rt .firing-row{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:var(--ui-r-m) !important;color:var(--ui-text) !important;box-shadow:none !important}
html.wgg-new .ui-rt .firing-row:hover{border-color:var(--ui-primary) !important}
html.wgg-new .ui-rt .firing-row :is(b,strong){color:var(--ui-text) !important;font-family:var(--ui-font-display)}
html.wgg-new .ui-rt .firing-info,html.wgg-new .ui-rt .firing-info *{color:var(--ui-text-soft) !important}
html.wgg-new .ui-rt .firing-knots{color:var(--ui-primary) !important;font-family:var(--ui-font-display) !important}
html.wgg-new .ui-rt .rt-cluster{padding:10px !important}
html.wgg-new .ui-rt :is(.rt-cluster-head,.rt-sugg-head) *{color:inherit !important}
html.wgg-new .ui-rt .rt-windy{color:var(--ui-green) !important}
html.wgg-new .ui-rt :is(.fdd-trigger,.fdd-val,.pt-readout,.mono,#roadtrip-windmin-value){font-family:var(--ui-font-text) !important;letter-spacing:0 !important;text-transform:none !important}
html.wgg-new .ui-rt .fdd-trigger{padding:9px 11px !important;font-weight:700 !important}

/* Nov 8 (Benoit's screenshot): suggestions kept a monospace drive time; every text in the
   redesigned area uses the two design fonts */
html.wgg-new .ui-rt .firing-row *,html.wgg-new .ui-rt .rt-cluster *,html.wgg-new .ui-rt .rt-drive{font-family:var(--ui-font-text) !important;letter-spacing:0 !important}
html.wgg-new .ui-rt .firing-row b,html.wgg-new .ui-rt .firing-knots{font-family:var(--ui-font-display) !important}
html.wgg-new .ui-rt .firing-row{padding:12px 14px !important;margin:0 0 8px !important}
/* the preview's own theme switch, top of the redesigned area */
html.wgg-new .ui .ui-theme-bar{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:0 0 8px;font:600 12.5px var(--ui-font-text);color:var(--ui-text-faint)}
html.wgg-new .ui .ui-seg{display:inline-flex;background:var(--ui-surface-2);border-radius:999px;padding:3px;gap:2px}
html.wgg-new .ui .ui-seg button{border:0;background:none;border-radius:999px;padding:5px 12px;font:700 12.5px var(--ui-font-text);color:var(--ui-text-soft);cursor:pointer}
html.wgg-new .ui .ui-seg button.on{background:var(--ui-surface);color:var(--ui-text);box-shadow:var(--ui-shadow)}

/* =====================================================================
   Spots search (Nov 8). Benoit: "the light design does not work on the
   site search page". Nothing moves: the drawer's own colour names are
   pointed at the new ones, so every part inside (cards, filters, the
   search box, the share row) follows the light or dark theme.
   ===================================================================== */
html.wgg-new .ui.ui-spots{
  --ink:var(--ui-bg); --ink-2:var(--ui-bg); --ink-3:var(--ui-surface-2);
  --sand:var(--ui-text); --sand-dim:var(--ui-text-soft); --good:var(--ui-text);
  --coral:var(--ui-primary); --aqua:var(--ui-primary); --sun:var(--ui-primary);
  --line:var(--ui-line); --line-strong:var(--ui-line);
  background:var(--ui-bg); color:var(--ui-text); font-family:var(--ui-font-text);
}
html.wgg-new .ui-spots .section-head h2{font:800 24px/1.15 var(--ui-font-display);letter-spacing:-.02em;color:var(--ui-text)}
html.wgg-new .ui-spots .section-sub,html.wgg-new .ui-spots .pt-card-label{color:var(--ui-text-soft)}
html.wgg-new .ui-spots .count-badge{background:var(--ui-primary-soft);color:var(--ui-primary);border-color:transparent}
html.wgg-new .ui-spots .card{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r-m);box-shadow:var(--ui-shadow)}
html.wgg-new .ui-spots .card:hover{border-color:var(--ui-primary)}
html.wgg-new .ui-spots .card.active{border-color:var(--ui-primary)}
html.wgg-new .ui-spots .card h3{font:700 17px/1.2 var(--ui-font-display);color:var(--ui-text)}
html.wgg-new .ui-spots .card .country,html.wgg-new .ui-spots .card .row,html.wgg-new .ui-spots .card .row b{color:var(--ui-text-soft)}
html.wgg-new .ui-spots input[type="text"],html.wgg-new .ui-spots input[type="search"],html.wgg-new .ui-spots input:not([type]){
  background:var(--ui-surface) !important;color:var(--ui-text) !important;border:1px solid var(--ui-line) !important;border-radius:var(--ui-r-s) !important}
html.wgg-new .ui-spots input::placeholder{color:var(--ui-text-faint)}
html.wgg-new .ui-spots .filter-btn,html.wgg-new .ui-spots .fdd-trigger,html.wgg-new .ui-spots .spots-seg,html.wgg-new .ui .loc-chip{
  background:var(--ui-surface) !important;color:var(--ui-text) !important;border:1px solid var(--ui-line) !important;border-radius:999px !important}
html.wgg-new .ui-spots .filter-btn.active,html.wgg-new .ui-spots .spots-seg.sel{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;border-color:var(--ui-primary) !important}
html.wgg-new .ui-spots .spots-share-btn{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;border-color:var(--ui-primary) !important;font-weight:700}
html.wgg-new .ui-spots .fdd-panel,html.wgg-new .ui-spots .search-results,html.wgg-new .ui-spots .search-result{background:var(--ui-surface) !important;color:var(--ui-text) !important;border-color:var(--ui-line) !important}
html.wgg-new .ui-spots .search-result:hover,html.wgg-new .ui-spots .search-result.active{background:var(--ui-surface-2) !important}
html.wgg-new .ui-spots .spots-empty{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r-l);color:var(--ui-text-soft)}
html.wgg-new .ui-spots .spots-empty h3{font:700 19px var(--ui-font-display);color:var(--ui-text)}
html.wgg-new .ui-spots .drawer-close{color:var(--ui-text);background:var(--ui-surface-2)}
html.wgg-new .ui-spots input[type="range"]{accent-color:var(--ui-primary)}
html.wgg-new .ui-spots .filter-btn,html.wgg-new .ui-spots .fdd-trigger,html.wgg-new .ui-spots .fdd-k,html.wgg-new .ui-spots .fdd-val,html.wgg-new .ui-spots .count-badge,html.wgg-new .ui-spots .card .row,html.wgg-new .ui-spots .spots-share-btn,html.wgg-new .ui-spots .spots-radius-label span,html.wgg-new .ui-spots #wind-sort-container *{
  font-family:var(--ui-font-text) !important;font-variant-numeric:tabular-nums}
html.wgg-new .ui-spots .count-badge{font-weight:700;border-radius:999px;padding:3px 10px}

/* Spots search box (Nov 8, mock-ups 2026-11-08-search-box-colours and
   -light-mode-options). Benoit: "those buttons need to be the same size but
   also everything is the same color, not very user friendly" and "the
   filters are not all the same size". Colours by role: saved places are teal
   tags, the box is set into the page, the actions have a teal outline,
   Share is solid teal, the filters are plain -- all the same size. */
html.wgg-new .ui .loc-search-chips .filter-btn{background:var(--ui-primary-soft) !important;color:var(--ui-primary) !important;border:1px solid transparent !important;font:700 14px var(--ui-font-text) !important;border-radius:999px !important;padding:6px 12px !important}
html.wgg-new .ui .loc-search-chips .filter-btn [data-loc-delete]{color:var(--ui-primary) !important;opacity:.65}
html.wgg-new .ui .loc-search-chips .filter-btn.active{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new .ui .loc-search-chips .filter-btn.active [data-loc-delete]{color:var(--ui-on-primary) !important}
html.wgg-new .ui .loc-search-input,html.wgg-new .ui .loc-search-gps-entry input{
  background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;color:var(--ui-text) !important;border-radius:12px !important;
  padding:11px 13px !important;font:600 15px var(--ui-font-text) !important;box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}
html.wgg-new .ui .loc-search-input:focus{outline:none;border-color:var(--ui-primary) !important;box-shadow:0 0 0 3px var(--ui-primary-soft) !important}
html.wgg-new .ui .loc-search-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
html.wgg-new .ui .loc-btn{background:transparent !important;border:1.5px solid var(--ui-primary) !important;color:var(--ui-primary) !important;
  border-radius:10px !important;height:42px;padding:0 8px !important;font:600 14px var(--ui-font-text) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;display:flex;align-items:center;justify-content:center;text-align:center}
html.wgg-new .ui .loc-btn[style*="display: none"],html.wgg-new .ui .loc-btn[style*="display:none"]{display:none !important}
html.wgg-new .ui .loc-btn:hover{background:var(--ui-primary-soft) !important}
html.wgg-new .ui .loc-btn-go{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
@media (max-width:560px){html.wgg-new .ui .loc-search-actions{grid-template-columns:1fr}}
/* the filters: one grid, every cell the same size */
html.wgg-new .ui-spots #filter-bar{display:grid;grid-template-columns:repeat(3,minmax(0,220px));gap:8px;align-items:stretch}
@media (max-width:560px){html.wgg-new .ui-spots #filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}}
html.wgg-new .ui .loc-search-actions{grid-template-columns:repeat(auto-fit,minmax(0,220px)) !important}
@media (max-width:560px){html.wgg-new .ui .loc-search-actions{grid-template-columns:1fr !important}}
html.wgg-new .ui-spots #filter-bar>#filters,html.wgg-new .ui-spots #filter-bar>#wind-sort-container{display:contents}
html.wgg-new .ui-spots #filter-bar>.fdd{min-width:0}
html.wgg-new .ui-spots #filter-bar>#filters>.filter-btn,html.wgg-new .ui-spots #filter-bar>#wind-sort-container>.filter-btn,html.wgg-new .ui-spots #filter-bar>.fdd>.fdd-trigger{
  width:100%;height:40px;margin:0 !important;display:flex !important;align-items:center;justify-content:center;gap:5px;
  padding:0 10px !important;font:600 14px var(--ui-font-text) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
html.wgg-new .ui-spots #filter-bar .fdd-k{font-weight:400 !important;font-size:12.5px !important;color:var(--ui-text-faint) !important}
html.wgg-new .ui-spots #filter-bar>#filters>.filter-btn.active,html.wgg-new .ui-spots #filter-bar>#wind-sort-container>.filter-btn.active{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;border-color:var(--ui-primary) !important}
html.wgg-new .ui-spots .spots-share-btn{height:42px;padding:0 16px !important;border-radius:10px !important}

/* Drawn icons (Nov 8, mock-up 2026-11-08-filter-icons). Benoit: "the wind icon is
   not visible" -- the emoji (★ 📍 🌬 📌 💾 ↗) are taken out by wgg-ui.js and every
   control gets one line icon in teal, the same size, in light and dark. */
html.wgg-new .ui-spots .fav-filter-btn::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L12 16.8l-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/></svg>")}
html.wgg-new .ui-spots #near-me-btn::before,html.wgg-new .ui .loc-search-use-location::before,html.wgg-new .ui .loc-search-chips [data-loc-id]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-6.5-6.1-6.5-11A6.5 6.5 0 0 1 18.5 10c0 4.9-6.5 11-6.5 11z'/><circle cx='12' cy='10' r='2.3'/></svg>")}
html.wgg-new .ui-spots #fdd-level>.fdd-trigger::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M5 19v-4M12 19V10M19 19V5'/></svg>")}
html.wgg-new .ui-spots #fdd-water>.fdd-trigger::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10c2 0 2-1.6 4.5-1.6S9.5 10 12 10s2.5-1.6 4.5-1.6S19 10 21 10M3 15.5c2 0 2-1.6 4.5-1.6s2 1.6 4.5 1.6 2.5-1.6 4.5-1.6 2.5 1.6 4.5 1.6'/></svg>")}
html.wgg-new .ui-spots #fdd-ride>.fdd-trigger::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M18.5 4.5c1.6 1.6-.4 6.6-4.5 10.7S5.9 21.1 4.5 19.5c-1.4-1.6.6-6.6 4.7-10.7S16.9 2.9 18.5 4.5z'/><path d='M8 16l8-8'/></svg>")}
html.wgg-new .ui-spots #wind-sort-btn::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8h11a3 3 0 1 0-3-3M3 12h16a3 3 0 1 1-3 3M3 16h8'/></svg>")}
html.wgg-new .ui .loc-search-toggle-gps::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='7'/><path d='M12 2v4M12 18v4M2 12h4M18 12h4'/></svg>")}
html.wgg-new .ui .loc-search-save::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3.5h12v17l-6-4-6 4z'/></svg>")}
html.wgg-new .ui-spots #spots-share-btn::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M9 7h8v8'/></svg>")}
html.wgg-new .ui-spots .fav-filter-btn::before,html.wgg-new .ui-spots #near-me-btn::before,html.wgg-new .ui .loc-search-use-location::before,html.wgg-new .ui .loc-search-chips [data-loc-id]::before,html.wgg-new .ui-spots #fdd-level>.fdd-trigger::before,html.wgg-new .ui-spots #fdd-water>.fdd-trigger::before,html.wgg-new .ui-spots #fdd-ride>.fdd-trigger::before,html.wgg-new .ui-spots #wind-sort-btn::before,html.wgg-new .ui .loc-search-toggle-gps::before,html.wgg-new .ui .loc-search-save::before,html.wgg-new .ui-spots #spots-share-btn::before{content:"";display:inline-block;width:18px;height:18px;flex:none;margin-right:2px;background-color:var(--ui-primary);-webkit-mask:var(--ui-ic) center/contain no-repeat;mask:var(--ui-ic) center/contain no-repeat;vertical-align:-3px}
html.wgg-new .ui .loc-search-chips [data-loc-id]::before{width:15px;height:15px}
html.wgg-new .ui-spots .filter-btn.active::before,html.wgg-new .ui-spots #spots-share-btn::before{background-color:currentColor}
html.wgg-new .ui-spots #filter-bar>.fdd>.fdd-trigger .chev{font-size:0 !important;display:inline-block;width:14px;height:14px;background-color:var(--ui-text-soft);-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M7 10l5 5 5-5'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M7 10l5 5 5-5'/></svg>") center/contain no-repeat}
html.wgg-new .ui-spots .spots-share-btn,html.wgg-new .ui .loc-btn{gap:7px}
html.wgg-new .ui-spots #spots-share-btn{display:inline-flex;align-items:center}
html.wgg-new .ui-spots #filter-bar .fdd-k{font-weight:500 !important}

/* Same icons across the board (Nov 8). Benoit: "we need to use not only the same
   colors but the same icons across the board". The location widget above now
   applies to every new-design area (Road trip's "Starting from" too), and Road
   trip's share/export buttons get the same drawn icons instead of emoji. */
html.wgg-new .ui-rt #roadtrip-share-copy::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1 1'/><path d='M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1-1'/></svg>")}
html.wgg-new .ui-rt #roadtrip-share-email::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5.5' width='18' height='13' rx='2'/><path d='M3.5 7l8.5 6 8.5-6'/></svg>")}
html.wgg-new .ui-rt #roadtrip-share-whatsapp::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M4 18.5l1.3-3.8A7.5 7.5 0 1 1 8.6 18z'/></svg>")}
html.wgg-new .ui-rt #roadtrip-export-pdf::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3.5h7l4 4V20.5H7z'/><path d='M14 3.5v4h4M9.5 12h6M9.5 15.5h6'/></svg>")}
html.wgg-new .ui-rt #roadtrip-export-ics::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15' rx='2'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg>")}
html.wgg-new .ui-rt #roadtrip-export-gpx::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11M7 10.5l5 5 5-5M5 20h14'/></svg>")}
html.wgg-new .ui-rt #roadtrip-save-trip::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3.5h12v17l-6-4-6 4z'/></svg>")}
html.wgg-new .ui-rt #roadtrip-map-expand::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/></svg>")}
html.wgg-new .ui-rt #roadtrip-share-copy::before,html.wgg-new .ui-rt #roadtrip-share-email::before,html.wgg-new .ui-rt #roadtrip-share-whatsapp::before,html.wgg-new .ui-rt #roadtrip-export-pdf::before,html.wgg-new .ui-rt #roadtrip-export-ics::before,html.wgg-new .ui-rt #roadtrip-export-gpx::before,html.wgg-new .ui-rt #roadtrip-save-trip::before,html.wgg-new .ui-rt #roadtrip-map-expand::before{content:"";display:inline-block;width:17px;height:17px;flex:none;margin-right:7px;background-color:var(--ui-primary);-webkit-mask:var(--ui-ic) center/contain no-repeat;mask:var(--ui-ic) center/contain no-repeat;vertical-align:-3px}
html.wgg-new .ui-rt #roadtrip-save-trip::before{background-color:currentColor}

/* =====================================================================
   Plan & Ride (Nov 8). Benoit: "the site needs to be uniform". The drawer
   (index.html) and the page (plan-and-ride.html) take the new colours the
   same way the Spots search does: the old colour names point at the new
   ones. The tab row is one segmented control with drawn icons; the tabs'
   own layouts follow their mock-ups.
   ===================================================================== */
html.wgg-new .ui.ui-pr{
  --ink:var(--ui-bg); --ink-2:var(--ui-bg); --ink-3:var(--ui-surface-2);
  --sand:var(--ui-text); --sand-dim:var(--ui-text-soft); --good:var(--ui-text);
  --coral:var(--ui-primary); --aqua:var(--ui-primary); --sun:var(--ui-primary);
  --line:var(--ui-line); --line-strong:var(--ui-line);
  background:var(--ui-bg); color:var(--ui-text); font-family:var(--ui-font-text);
}
html.wgg-new .ui-pr>.section-head h2,html.wgg-new .ui-pr .pr-title{font:800 26px/1.15 var(--ui-font-display);letter-spacing:-.02em;color:var(--ui-text)}
html.wgg-new .ui-pr #trip-ideas-tabs,html.wgg-new .ui-pr #firing-mode-toggle{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:4px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:14px;padding:4px}
html.wgg-new .ui-pr #firing-mode-toggle{max-width:520px}
html.wgg-new .ui-pr #trip-ideas-tabs .firing-mode-btn,html.wgg-new .ui-pr #firing-mode-toggle .firing-mode-btn{
  min-width:0;height:42px;margin:0;display:flex;align-items:center;justify-content:center;gap:7px;background:transparent !important;border:0 !important;border-radius:10px !important;
  color:var(--ui-text) !important;font:700 14.5px var(--ui-font-text) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px !important}
html.wgg-new .ui-pr #trip-ideas-tabs .firing-mode-btn:hover,html.wgg-new .ui-pr #firing-mode-toggle .firing-mode-btn:hover{background:var(--ui-surface-2) !important}
html.wgg-new .ui-pr #trip-ideas-tabs .firing-mode-btn.active,html.wgg-new .ui-pr #firing-mode-toggle .firing-mode-btn.active{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
@media (max-width:700px){html.wgg-new .ui-pr #trip-ideas-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
html.wgg-new .ui-pr #trip-ideas-tabs [data-tab="now"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21c-3.6 0-6-2.4-6-5.6 0-3.4 2.7-5 3.3-8.4 1.9 1.2 2.4 3.3 2.2 4.6 1-.8 1.7-2 1.8-3.6 2.4 1.8 2.7 4.6 2.7 7.4 0 3.2-2.4 5.6-4 5.6z'/></svg>")}
html.wgg-new .ui-pr #trip-ideas-tabs [data-tab="plan"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M15.5 8.5l-2 5-5 2 2-5z'/></svg>")}
html.wgg-new .ui-pr #trip-ideas-tabs [data-tab="downwinders"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='5.5' cy='18' r='2'/><circle cx='18.5' cy='6' r='2'/><path d='M7.5 18h7a3 3 0 0 0 0-6h-5a3 3 0 0 1 0-6h7'/></svg>")}
html.wgg-new .ui-pr #trip-ideas-tabs [data-tab="besttime"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15' rx='2'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg>")}
html.wgg-new .ui-pr #trip-ideas-tabs [data-tab="roadtrip"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 16.5V8a2 2 0 0 1 2-2h10l5 4.5h.5a1.5 1.5 0 0 1 1.5 1.5v4.5h-2'/><path d='M2.5 16.5h3M10 16.5h5'/><circle cx='7.5' cy='16.8' r='2'/><circle cx='17' cy='16.8' r='2'/><path d='M14.5 6v4.5h5'/></svg>")}
html.wgg-new .ui-pr #firing-mode-toggle [data-mode="nearMe"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-6.5-6.1-6.5-11A6.5 6.5 0 0 1 18.5 10c0 4.9-6.5 11-6.5 11z'/><circle cx='12' cy='10' r='2.3'/></svg>")}
html.wgg-new .ui-pr #firing-mode-toggle [data-mode="favorites"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L12 16.8l-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/></svg>")}
html.wgg-new .ui-pr #firing-mode-toggle [data-mode="top10"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M3.5 12h17M12 3.5c2.4 2.4 3.4 5.3 3.4 8.5S14.4 18.1 12 20.5M12 3.5C9.6 5.9 8.6 8.8 8.6 12s1 6.1 3.4 8.5'/></svg>")}
html.wgg-new .ui-pr #trip-ideas-tabs [data-tab="now"]::before,html.wgg-new .ui-pr #trip-ideas-tabs [data-tab="plan"]::before,html.wgg-new .ui-pr #trip-ideas-tabs [data-tab="downwinders"]::before,html.wgg-new .ui-pr #trip-ideas-tabs [data-tab="besttime"]::before,html.wgg-new .ui-pr #trip-ideas-tabs [data-tab="roadtrip"]::before,html.wgg-new .ui-pr #firing-mode-toggle [data-mode="nearMe"]::before,html.wgg-new .ui-pr #firing-mode-toggle [data-mode="favorites"]::before,html.wgg-new .ui-pr #firing-mode-toggle [data-mode="top10"]::before{content:"";display:inline-block;width:18px;height:18px;flex:none;background-color:var(--ui-primary);-webkit-mask:var(--ui-ic) center/contain no-repeat;mask:var(--ui-ic) center/contain no-repeat}
html.wgg-new .ui-pr .firing-mode-btn.active::before{background-color:currentColor !important}

/* ---- Plan & Ride tabs (Nov 8, mock-up 2026-11-08-plan-and-ride-tabs; Benoit:
   "the rest seems fine, you can build it"). Right now, Plan a trip, Down
   winders, Best time to go: the same parts as Road trip and Spots. ---- */
html.wgg-new .ui.ui-pr{--ui-dir-good:#2E8A4A;--ui-dir-workable:#9A6A00;--ui-dir-marginal:#B5562E;--ui-dir-uncommon:#5B6E75}
html.wgg-new[data-wgg-theme="dark"] .ui.ui-pr{--ui-dir-good:#7BD88F;--ui-dir-workable:#FFCC5C;--ui-dir-marginal:#FF9F7A;--ui-dir-uncommon:#B9CBD0}
@media (prefers-color-scheme: dark){html.wgg-new:not([data-wgg-theme="light"]) .ui.ui-pr{--ui-dir-good:#7BD88F;--ui-dir-workable:#FFCC5C;--ui-dir-marginal:#FF9F7A;--ui-dir-uncommon:#B9CBD0}}
html.wgg-new .ui-pr .pt-tab-intro,html.wgg-new .ui-pr #plan-tab>p:first-child{color:var(--ui-text-soft) !important;font:500 15px/1.5 var(--ui-font-text) !important}
html.wgg-new .ui-pr .pt-card{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:var(--ui-r-l) !important;padding:16px !important;box-shadow:var(--ui-shadow)}
html.wgg-new .ui-pr .pt-card-label,html.wgg-new .ui-pr .ui-pt-steps label,html.wgg-new .ui-pr .firing-filter-label{display:block;font:700 11.5px var(--ui-font-text) !important;letter-spacing:.05em;text-transform:uppercase;color:var(--ui-text-faint) !important;margin:12px 0 6px !important}
html.wgg-new .ui-pr .pt-hint,html.wgg-new .ui-pr .ui-pt-steps p{color:var(--ui-text-soft) !important;font:500 13.5px/1.45 var(--ui-font-text) !important}
html.wgg-new .ui-pr .pt-readout{color:var(--ui-primary) !important;font:800 15px var(--ui-font-text) !important}
html.wgg-new .ui-pr select,html.wgg-new .ui-pr input[type="date"],html.wgg-new .ui-pr #planner-destination-input{background:var(--ui-surface-2) !important;border:1px solid var(--ui-line) !important;border-radius:10px !important;min-height:44px;padding:0 12px !important;color:var(--ui-text) !important;font:700 14.5px var(--ui-font-text) !important;box-shadow:none !important;box-sizing:border-box}
html.wgg-new .ui-pr #planner-destination-input{font-weight:600 !important}
html.wgg-new .ui-pr select option{color:#071C23;background:#fff}
html.wgg-new .ui-pr .pt-card .fdd-trigger,html.wgg-new .ui-pr .ui-pt-steps .fdd-trigger,html.wgg-new .ui-pr #besttime-tab .fdd-trigger{background:var(--ui-surface-2) !important;border:1px solid var(--ui-line) !important;border-radius:10px !important;min-height:44px;color:var(--ui-text) !important;font:700 14.5px var(--ui-font-text) !important;display:flex !important;align-items:center;gap:6px;padding:0 12px !important}
html.wgg-new .ui-pr .fdd-k{color:var(--ui-text-faint) !important;font:500 12.5px var(--ui-font-text) !important}
html.wgg-new .ui-pr .fdd-panel{background:var(--ui-surface) !important;border-color:var(--ui-line) !important;color:var(--ui-text)}
html.wgg-new .ui-pr #downwinders-type-toggle{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:4px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:14px;padding:4px;max-width:560px}
html.wgg-new .ui-pr #downwinders-type-toggle .firing-mode-btn{min-width:0;height:42px;margin:0;display:flex;align-items:center;justify-content:center;gap:7px;background:transparent !important;border:0 !important;border-radius:10px !important;color:var(--ui-text) !important;font:700 14.5px var(--ui-font-text) !important;white-space:nowrap;padding:0 8px !important}
html.wgg-new .ui-pr #downwinders-type-toggle .firing-mode-btn.active{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new .ui-pr #planner-format-day,html.wgg-new .ui-pr #planner-format-multi{flex:1;height:42px;border:0 !important;border-radius:10px !important;background:transparent !important;color:var(--ui-text) !important;font:700 14.5px var(--ui-font-text) !important;margin:0 !important}
html.wgg-new .ui-pr #planner-format-day.active,html.wgg-new .ui-pr #planner-format-multi.active{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new .ui-pr .filters:has(#planner-format-day){display:flex !important;gap:4px;background:var(--ui-surface-2);border:1px solid var(--ui-line);border-radius:14px;padding:4px;max-width:420px}
html.wgg-new .ui-pr [data-shortcut]{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:999px !important;color:var(--ui-text) !important;font:700 14px var(--ui-font-text) !important;padding:6px 13px !important}
html.wgg-new .ui-pr [data-shortcut]:hover{border-color:var(--ui-primary) !important}
html.wgg-new .ui-pr .firing-chip{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;color:var(--ui-text) !important;border-radius:999px !important;font:700 14px var(--ui-font-text) !important;padding:6px 13px !important}
html.wgg-new .ui-pr .firing-chip.on{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;border:1px solid var(--ui-primary) !important}
html.wgg-new .ui-pr .firing-dot[style*="wind-good"]{background:var(--ui-dir-good) !important}
html.wgg-new .ui-pr .firing-dot[style*="wind-strong"]{background:var(--ui-dir-workable) !important}
html.wgg-new .ui-pr .firing-dot[style*="coral"]{background:var(--ui-dir-marginal) !important}
html.wgg-new .ui-pr .firing-dot[style*="sand-dim"]{background:var(--ui-dir-uncommon) !important}
html.wgg-new .ui-pr .firing-tier{background:none !important;border:0 !important;padding:0 !important;margin-left:4px;font:700 13.5px var(--ui-font-text) !important;display:inline-flex !important;align-items:center;gap:5px}
html.wgg-new .ui-pr .firing-tier::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;display:inline-block}
html.wgg-new .ui-pr .firing-tier[style*="wind-good"]{color:var(--ui-dir-good) !important}
html.wgg-new .ui-pr .firing-tier[style*="wind-strong"]{color:var(--ui-dir-workable) !important}
html.wgg-new .ui-pr .firing-tier[style*="coral"]{color:var(--ui-dir-marginal) !important}
html.wgg-new .ui-pr .firing-tier[style*="sand-dim"]{color:var(--ui-dir-uncommon) !important}
html.wgg-new .ui-pr .firing-row{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:16px !important;padding:11px 14px !important;gap:12px !important;position:relative;overflow:hidden}
html.wgg-new .ui-pr .firing-row:hover{border-color:var(--ui-primary) !important}
html.wgg-new .ui-pr #now-tab .firing-row::before{display:none !important}
html.wgg-new .ui-pr #besttime-tab .firing-row::before{content:"" !important;display:block !important;position:absolute;left:0;top:auto !important;bottom:0 !important;height:4px !important;width:var(--bar-pct,0%) !important;background:linear-gradient(90deg,var(--ui-w1),var(--ui-w2),var(--ui-w3)) !important;border-radius:0 3px 3px 0;pointer-events:none}
html.wgg-new .ui-pr .firing-rank{width:30px !important;height:30px !important;background:var(--ui-surface-2) !important;color:var(--ui-text) !important;font:800 14px var(--ui-font-display) !important}
html.wgg-new .ui-pr .firing-row:first-child .firing-rank{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new .ui-pr .firing-info b{font:700 16px/1.25 var(--ui-font-display) !important;color:var(--ui-text) !important}
html.wgg-new .ui-pr .firing-info span{font:500 13.5px/1.45 var(--ui-font-text) !important;color:var(--ui-text-soft) !important}
html.wgg-new .ui-pr .firing-knots{font:800 20px var(--ui-font-display) !important;color:var(--ui-text) !important;white-space:nowrap}
html.wgg-new .ui-pr .firing-knots small{font:700 13px var(--ui-font-text) !important;color:var(--ui-text-soft) !important}
html.wgg-new .ui-pr .firing-knots[data-ui-w]{display:inline-flex;align-items:baseline;gap:3px;border-radius:12px;padding:3px 10px;border:1.5px solid var(--w);background:color-mix(in srgb,var(--w) 22%,transparent)}
html.wgg-new .ui-pr .firing-knots[data-ui-w="0"]{--w:var(--ui-w0)}
html.wgg-new .ui-pr .firing-knots[data-ui-w="1"]{--w:var(--ui-w1)}
html.wgg-new .ui-pr .firing-knots[data-ui-w="2"]{--w:var(--ui-w2)}
html.wgg-new .ui-pr .firing-knots[data-ui-w="3"]{--w:var(--ui-w3)}
html.wgg-new .ui-pr .firing-knots[data-ui-w="4"]{--w:var(--ui-w4)}
html.wgg-new .ui-pr .firing-hidden{color:var(--ui-text-soft) !important;font:500 14px var(--ui-font-text) !important}
html.wgg-new .ui-pr .firing-hidden .link-btn{color:var(--ui-primary) !important;font-weight:700 !important}
html.wgg-new .ui-pr .firing-share-row{border-top-color:var(--ui-line) !important}
html.wgg-new .ui-pr .firing-share-row .icon-btn,html.wgg-new .ui-pr .exp-btn,html.wgg-new .ui-pr .downwinder-actions .link-btn{display:inline-flex !important;align-items:center;justify-content:center;gap:7px;height:42px;padding:0 16px !important;background:transparent !important;border:1.5px solid var(--ui-primary) !important;border-radius:10px !important;color:var(--ui-primary) !important;font:700 14.5px var(--ui-font-text) !important;text-decoration:none !important}
html.wgg-new .ui-pr .ui-pt-steps{display:flex;flex-direction:column;gap:12px;min-width:0}
html.wgg-new .ui-pr .ui-pt-steps .ui-card .pt-card{background:none !important;border:0 !important;padding:0 !important;box-shadow:none;margin-top:6px}
html.wgg-new .ui-pr .ui-pt-steps details summary{font:700 14.5px var(--ui-font-text) !important;color:var(--ui-text) !important}
html.wgg-new .ui-pr #planner-search-btn{width:100%;height:48px;margin-top:14px !important;border-radius:12px !important;background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;border:0 !important;font:700 16px var(--ui-font-text) !important;display:flex !important;align-items:center;justify-content:center;gap:8px}
html.wgg-new .ui-pr .plan-trip-map-panel{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:var(--ui-r-l) !important;overflow:hidden}
html.wgg-new .ui-pr .exp-create-row{margin:12px 0}
html.wgg-new .ui-pr .downwinder-card{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:var(--ui-r-l) !important;padding:16px !important;box-shadow:var(--ui-shadow)}
html.wgg-new .ui-pr .downwinder-card-top b{font:700 19px var(--ui-font-display) !important;color:var(--ui-text) !important}
html.wgg-new .ui-pr .downwinder-meta,html.wgg-new .ui-pr .exp-meta,html.wgg-new .ui-pr .downwinder-blurb,html.wgg-new .ui-pr .downwinder-meta-row{color:var(--ui-text-soft) !important;font-family:var(--ui-font-text) !important}
html.wgg-new .ui-pr .exp-chip{background:var(--ui-surface-2) !important;color:var(--ui-text) !important;border-radius:999px !important;padding:4px 11px !important;font:700 13.5px var(--ui-font-text) !important}
html.wgg-new .ui-pr .exp-chip-mine{background:var(--ui-primary-soft) !important;color:var(--ui-primary) !important}
html.wgg-new .ui-pr .exp-stops li{color:var(--ui-text) !important;font:600 14.5px var(--ui-font-text) !important}
html.wgg-new .ui-pr .exp-stops li::before{background:var(--ui-primary) !important}
html.wgg-new .ui-pr .exp-stops li.tr::before{background:var(--ui-surface) !important;border:2px solid var(--ui-text-faint) !important}
html.wgg-new .ui-pr .exp-stops li::after{background:var(--ui-line) !important}
html.wgg-new .ui-pr .exp-stops small{color:var(--ui-text-soft) !important;font-weight:500}
html.wgg-new .ui-pr .exp-stops.ui-folded li:nth-child(n+8){display:none}
html.wgg-new .ui-pr .ui-more-stops{background:none;border:0;padding:2px 0 6px 22px;color:var(--ui-primary);font:700 14.5px var(--ui-font-text);cursor:pointer}
html.wgg-new .ui-pr .downwinder-actions{display:flex;flex-wrap:wrap;gap:8px}
html.wgg-new .ui-pr .downwinder-actions .exp-plan-btn{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;border:0 !important;border-radius:10px !important;height:42px;padding:0 16px !important;font:700 14.5px var(--ui-font-text) !important;display:inline-flex !important;align-items:center;gap:7px;width:auto !important;margin:0 !important}
html.wgg-new .ui-pr .exp-route-row{border-color:var(--ui-line) !important}
html.wgg-new .ui-pr .exp-route-row .rt-btn{background:none !important;border:0 !important;color:var(--ui-primary) !important;font:700 14px var(--ui-font-text) !important;text-decoration:underline}
html.wgg-new .ui-pr #besttime-tab .firing-scope-row{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
html.wgg-new .ui-pr #now-tab .firing-scope-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,260px));gap:8px;margin-top:10px}
html.wgg-new .ui-pr #downwinders-type-toggle [data-route-type="kite"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 6-7 12-7-12z'/><path d='M5 9h14M12 3v18'/></svg>")}
html.wgg-new .ui-pr #downwinders-type-toggle [data-route-type="foil"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9.5h14a3 3 0 0 1 0 1H3z'/><path d='M11 10.5v6M6 16.5h10'/></svg>")}
html.wgg-new .ui-pr #downwinders-type-toggle [data-route-type="pump"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M4 15c2 0 2-1.6 4-1.6s2 1.6 4 1.6 2-1.6 4-1.6 2 1.6 4 1.6'/><path d='M8 11l4-6 4 6M12 5v6'/></svg>")}
html.wgg-new .ui-pr #exp-create::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>")}
html.wgg-new .ui-pr .exp-plan-btn::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15' rx='2'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg>")}
html.wgg-new .ui-pr [data-exp-customize]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h4L19 9l-4-4L4 16z'/></svg>")}
html.wgg-new .ui-pr .downwinder-actions [data-view-downwinder-id]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M9 4.5l-5 2v13l5-2 6 2 5-2v-13l-5 2z'/><path d='M9 4.5v13M15 6.5v13'/></svg>")}
html.wgg-new .ui-pr #planner-search-btn::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='6.5'/><path d='M16 16l4.5 4.5'/></svg>")}
html.wgg-new .ui-pr #firing-share-email::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5.5' width='18' height='13' rx='2'/><path d='M3.5 7l8.5 6 8.5-6'/></svg>")}
html.wgg-new .ui-pr #firing-share-whatsapp::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M4 18.5l1.3-3.8A7.5 7.5 0 1 1 8.6 18z'/></svg>")}
html.wgg-new .ui-pr #downwinders-type-toggle [data-route-type="kite"]::before,html.wgg-new .ui-pr #downwinders-type-toggle [data-route-type="foil"]::before,html.wgg-new .ui-pr #downwinders-type-toggle [data-route-type="pump"]::before,html.wgg-new .ui-pr #exp-create::before,html.wgg-new .ui-pr .exp-plan-btn::before,html.wgg-new .ui-pr [data-exp-customize]::before,html.wgg-new .ui-pr .downwinder-actions [data-view-downwinder-id]::before,html.wgg-new .ui-pr #planner-search-btn::before,html.wgg-new .ui-pr #firing-share-email::before,html.wgg-new .ui-pr #firing-share-whatsapp::before{content:"";display:inline-block;width:17px;height:17px;flex:none;background-color:currentColor;-webkit-mask:var(--ui-ic) center/contain no-repeat;mask:var(--ui-ic) center/contain no-repeat}
html.wgg-new .ui-pr #downwinders-type-toggle .firing-mode-btn:not(.active)::before{background-color:var(--ui-primary)}
html.wgg-new .ui-pr .exp-route-row b::before{content:"";display:inline-block;width:15px;height:15px;margin-right:6px;vertical-align:-2px;background-color:var(--ui-primary);-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h4L19 9l-4-4L4 16z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h4L19 9l-4-4L4 16z'/></svg>") center/contain no-repeat}
html.wgg-new .ui-pr #firing-scope-row select,html.wgg-new .ui-pr #downwinders-country-filter{max-width:320px;width:100%}
html.wgg-new .ui-pr .fdd-trigger{justify-content:flex-start !important}
html.wgg-new .ui-pr .fdd-trigger .chev{margin-left:auto}
html.wgg-new .ui-pr .count-badge{background:var(--ui-primary-soft) !important;color:var(--ui-primary) !important;border-color:transparent !important;font:700 13.5px var(--ui-font-text) !important;border-radius:999px;padding:3px 11px}

/* One way to show "selected", everywhere (Nov 8). Benoit: "when i select, say a
   ride like Kite, it only removes the outer line of the button. i would prefer
   the button change color to make the selection obvious". Selected = solid teal
   with white (dark theme: dark) text, like the tabs. */
html.wgg-new .ui .ui-seg button.on{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;box-shadow:none}
html.wgg-new .ui-rt #roadtrip-route-tools>label:has(input:checked){background:var(--ui-primary) !important;border-color:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new .ui-pr .firing-chip.on .firing-dot{box-shadow:0 0 0 2px var(--ui-on-primary)}

/* =====================================================================
   Sessions page (wgg.html), Nov 8 night. Mock-up 2026-11-08-sessions-new-design.
   The page's own colour names point at the new ones (same trick as Spots and
   Plan & Ride); the site header and the podium's space keep their dark look.
   ===================================================================== */
html.wgg-new body.ui.ui-ss{
  --ink:var(--ui-bg); --ink-2:var(--ui-surface); --ink-3:var(--ui-surface-2);
  --sand:var(--ui-text); --sand-dim:var(--ui-text-soft); --sand-faint:var(--ui-text-faint);
  --coral:var(--ui-primary); --aqua:var(--ui-primary); --riding:var(--ui-blue);
  --line:var(--ui-line); --line-strong:var(--ui-line);
  background:var(--ui-bg) !important; color:var(--ui-text); font-family:var(--ui-font-text);
}
html.wgg-new body.ui-ss #wg-header,html.wgg-new body.ui-ss .podium-stage{
  --ink:#0A1220; --ink-2:#0D1830; --ink-3:#111F3A; --sand:#F4F7FB; --sand-dim:#B3C1D8; --sand-faint:#7F8FA8;
  --coral:#FF6B35; --aqua:#FF6B35; --line:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.14);
}

/* ---- Sessions page parts (wgg.html) ---- */
html.wgg-new body.ui-ss :not(#wg-header):not(#wg-header *):not(.podium-stage *):not([class^="mk-"]):not([class^="mk-"] *):not(.leaflet-container *):not(canvas){font-family:var(--ui-font-text) !important;letter-spacing:normal}
html.wgg-new body.ui-ss :is(.page-title,.empty-state h3,.stat-val,.hero-val,.stat-box-val,.ranking-val,.ranking-pos,.gr-card h3,.pp-name){font-family:var(--ui-font-display) !important}
html.wgg-new body.ui-ss .page-title{font:800 26px/1.15 var(--ui-font-display) !important;color:var(--ui-text)}
html.wgg-new body.ui-ss .page-title span{color:var(--ui-text) !important}
html.wgg-new body.ui-ss .page-subtitle{color:var(--ui-text-soft) !important;font-size:14px !important}
html.wgg-new body.ui-ss .sticky-top{background:var(--ui-bg) !important;border-bottom:1px solid var(--ui-line) !important}
/* one segmented row for every set of tabs on the page */
html.wgg-new body.ui-ss #main-tabs,html.wgg-new body.ui-ss .rankings-filter-bar:has(.kind-btn):not([style*="display: none"]):not([style*="display:none"]),html.wgg-new body.ui-ss .gr-switch,html.wgg-new body.ui-ss #riders-tabs:not([style*="display: none"]):not([style*="display:none"]){display:grid !important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:14px !important;padding:4px !important;margin:8px auto !important;max-width:720px;box-sizing:border-box}
html.wgg-new body.ui-ss .rankings-filter-bar:has(.kind-btn),html.wgg-new body.ui-ss .gr-switch,html.wgg-new body.ui-ss #riders-tabs{max-width:560px}
html.wgg-new body.ui-ss :is(.main-tab,.kind-btn,.gr-switch button,.riders-tab){height:42px;display:flex !important;align-items:center;justify-content:center;gap:7px;background:transparent !important;border:0 !important;border-radius:10px !important;
  color:var(--ui-text) !important;font:700 14.5px var(--ui-font-text) !important;text-transform:none !important;letter-spacing:normal !important;white-space:nowrap;padding:0 8px !important;margin:0 !important;min-width:0;overflow:hidden;text-overflow:ellipsis}
html.wgg-new body.ui-ss :is(.main-tab.active,.kind-btn.active,.gr-switch button.on,.riders-tab.active){background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new body.ui-ss .main-tab::after{display:none !important}
/* Nov 14, 2026 -- Benoit: the tabs overlapped on a phone (equal 90 px slots, "Community" needs 104 px).
   Up to 640 px: each tab as wide as its word, no icon (no icons in tabs), and if the words still
   don't fit (large text) the row slides sideways. Mock-up 2026-11-14-android-review, item 1. */
@media (max-width:640px){
html.wgg-new body.ui-ss #main-tabs,html.wgg-new body.ui-ss .rankings-filter-bar:has(.kind-btn):not([style*="display: none"]):not([style*="display:none"]),html.wgg-new body.ui-ss .gr-switch,html.wgg-new body.ui-ss #riders-tabs:not([style*="display: none"]):not([style*="display:none"]){display:flex !important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html.wgg-new body.ui-ss :is(#main-tabs,.rankings-filter-bar,.gr-switch,#riders-tabs)::-webkit-scrollbar{display:none}
html.wgg-new body.ui-ss :is(#main-tabs .main-tab,.rankings-filter-bar .kind-btn,.gr-switch button,#riders-tabs .riders-tab){flex:1 0 auto;min-width:max-content;padding:0 9px !important;white-space:nowrap}
html.wgg-new body.ui-ss :is(.main-tab,.kind-btn,.gr-switch button,.riders-tab)::before{display:none !important}
html.wgg-new body.ui-ss .kind-btn .ks-my{display:none}
}
/* the Ride menu and Following */
html.wgg-new body.ui-ss .filters-bar .fdd-trigger,html.wgg-new body.ui-ss .rankings-filters .fdd-trigger{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:10px !important;min-height:42px;display:flex !important;align-items:center;gap:6px;padding:0 12px !important;color:var(--ui-text) !important;font:700 14.5px var(--ui-font-text) !important}
html.wgg-new body.ui-ss .fdd-k{color:var(--ui-text-faint) !important;font-weight:500 !important}
html.wgg-new body.ui-ss .following-toggle-btn{height:42px;border-radius:999px !important;background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;color:var(--ui-text) !important;font:700 14.5px var(--ui-font-text) !important;display:inline-flex !important;align-items:center;gap:6px;padding:0 14px !important}
html.wgg-new body.ui-ss .following-toggle-btn[aria-pressed="true"]{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;border-color:var(--ui-primary) !important}
html.wgg-new body.ui-ss select,html.wgg-new body.ui-ss input[type="text"],html.wgg-new body.ui-ss input[type="search"],html.wgg-new body.ui-ss input:not([type]){background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:10px !important;color:var(--ui-text) !important;min-height:42px;font:600 14.5px var(--ui-font-text) !important}
html.wgg-new body.ui-ss select option{color:#0A1A2B;background:#fff}
/* the session card */
html.wgg-new body.ui-ss .session-card{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:20px !important;box-shadow:var(--ui-shadow);overflow:hidden}
html.wgg-new body.ui-ss .card-user{font:700 16px var(--ui-font-display) !important;color:var(--ui-text) !important}
html.wgg-new body.ui-ss .card-spot{color:var(--ui-primary) !important;font-weight:700}
html.wgg-new body.ui-ss .card-time,html.wgg-new body.ui-ss .card-when{color:var(--ui-text-soft) !important;font-size:13px !important}
html.wgg-new body.ui-ss .card-discipline{background:var(--ui-surface-2) !important;border:0 !important;border-radius:999px !important;color:var(--ui-text) !important;font:700 13px var(--ui-font-text) !important;text-transform:none !important;padding:4px 11px !important}
html.wgg-new body.ui-ss .card-gear{color:var(--ui-text-soft);font:600 12px var(--ui-font-text);border:1px solid var(--ui-line);border-radius:999px;padding:2px 9px}   /* Nov 11: the kite in its own small outlined tag, left-aligned under the sport tag (Benoit: option B, both left) */
html.wgg-new body.ui-ss :is(.card-map-type,.card-map-expand,.card-map-legend){background:var(--ui-surface) !important;color:var(--ui-text) !important;border:1px solid var(--ui-line) !important;border-radius:10px !important;font:700 13px var(--ui-font-text) !important}
html.wgg-new body.ui-ss .card-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr)) !important;gap:8px !important;padding:10px 12px !important;background:none !important;border:0 !important}
html.wgg-new body.ui-ss .card-stats .stat{background:var(--ui-surface-2) !important;border:0 !important;border-radius:14px !important;padding:10px 12px !important;text-align:left !important}
html.wgg-new body.ui-ss :is(.stat-val,.hero-val,.stat-box-val){font:800 24px var(--ui-font-display) !important;color:var(--ui-text) !important}
html.wgg-new body.ui-ss :is(.stat-unit){font:700 13px var(--ui-font-text) !important;color:var(--ui-text-soft) !important}
html.wgg-new body.ui-ss :is(.stat-lbl,.hero-lbl,.stat-box-lbl,.spd-l){font:700 12.5px var(--ui-font-text) !important;color:var(--ui-text-faint) !important;text-transform:none !important;letter-spacing:normal !important}
html.wgg-new body.ui-ss .card-social-row{border-color:var(--ui-line) !important;gap:8px;padding:10px 12px !important}
html.wgg-new body.ui-ss .social-btn{display:inline-flex !important;align-items:center;gap:6px;height:38px;padding:0 12px !important;border:1px solid var(--ui-line) !important;border-radius:10px !important;background:var(--ui-surface) !important;color:var(--ui-text) !important;font:700 14px var(--ui-font-text) !important}
html.wgg-new body.ui-ss .social-btn .social-icon{display:none !important}
html.wgg-new body.ui-ss .social-btn.liked,html.wgg-new body.ui-ss .like-btn.active{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;border-color:var(--ui-primary) !important}
html.wgg-new body.ui-ss .device-chip{color:var(--ui-text-soft) !important;font:600 13px var(--ui-font-text) !important;display:inline-flex !important;align-items:center;gap:5px}
html.wgg-new body.ui-ss .card-expand-btn{border:1.5px solid var(--ui-primary) !important;color:var(--ui-primary) !important;border-radius:10px !important;margin:0 12px 12px auto !important;display:flex !important;align-items:center;justify-content:center;height:40px;width:calc(100% - 24px);font:700 14.5px var(--ui-font-text) !important;background:transparent !important;text-transform:none !important}
html.wgg-new body.ui-ss .card-menu-dropdown{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:14px !important}
/* the details */
html.wgg-new body.ui-ss .detail-tabs{display:flex;gap:4px;background:var(--ui-surface-2) !important;border:0 !important;border-radius:14px !important;padding:4px !important;margin:0 12px !important}
html.wgg-new body.ui-ss .detail-tab{border:0 !important;border-radius:10px !important;height:40px;padding:0 14px !important;color:var(--ui-text) !important;font:700 14px var(--ui-font-text) !important;text-transform:none !important;letter-spacing:normal !important;background:transparent !important;white-space:nowrap}
html.wgg-new body.ui-ss .detail-tab.active{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new body.ui-ss .detail-tabs-fade{display:none !important}
html.wgg-new body.ui-ss .hero-row{gap:8px !important;background:none !important;padding:0 !important;border:0 !important}
html.wgg-new body.ui-ss .hero-cell,html.wgg-new body.ui-ss .stat-box{background:var(--ui-surface-2) !important;border:0 !important;border-radius:14px !important}
html.wgg-new body.ui-ss details.stat-group{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:16px !important;padding:2px 14px !important;margin-top:8px !important}
html.wgg-new body.ui-ss .stat-group-label{font:700 16px var(--ui-font-display) !important;color:var(--ui-text) !important;text-transform:none !important;letter-spacing:normal !important}
html.wgg-new body.ui-ss .stat-group-peek{color:var(--ui-text-soft) !important;font-size:13.5px !important}
html.wgg-new body.ui-ss .empty-state{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:20px;padding:22px !important}
html.wgg-new body.ui-ss .empty-state h3{color:var(--ui-text) !important}
/* rankings: rows as cards; podium B (Benoit: "i like podium B, but make sure you keep my flying star") */
html.wgg-new body.ui-ss .ranking-card{background:none !important;border:0 !important;box-shadow:none !important;display:flex;flex-direction:column;gap:8px}
html.wgg-new body.ui-ss .ranking-row{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:16px !important}
html.wgg-new body.ui-ss .ranking-pos{width:30px;height:30px;border-radius:50%;background:var(--ui-surface-2);display:grid;place-items:center;font:800 14px var(--ui-font-display) !important;color:var(--ui-text) !important}
html.wgg-new body.ui-ss .ranking-name{font:700 16px var(--ui-font-display) !important;color:var(--ui-text) !important}
html.wgg-new body.ui-ss .ranking-val{font:800 18px var(--ui-font-display) !important;color:var(--ui-text) !important}
html.wgg-new body.ui-ss .podium-stage{background:radial-gradient(ellipse at 50% 20%,#24304f 0,#141c33 45%,#0c1222 100%) !important;border:0 !important;border-radius:20px !important}
/* Nov 8, night -- Benoit: "i like the hallow coming down on nb1 on the podium, but i want
   the boxes of A instead of the medals". Steps in gold, silver and bronze with the place
   number on each (mock-up 2026-11-08-sessions-new-design, option A), the beam from B. */
html.wgg-new body.ui-ss .podium-card .pbase{width:100% !important;margin-top:12px !important;border:0 !important;border-radius:14px 14px 0 0 !important;display:flex;justify-content:center;align-items:flex-start;padding-top:8px;box-shadow:inset 0 2px 0 #ffffff80;position:relative;z-index:1}
html.wgg-new body.ui-ss .podium-card .pbase::after{font:800 40px/1 var(--ui-font-display)}
html.wgg-new body.ui-ss .podium-card.p1 .pbase{height:110px !important;background:linear-gradient(180deg,#FFD978,#E0A93A 60%,#B8862B) !important}
html.wgg-new body.ui-ss .podium-card.p1 .pbase::after{content:"1";color:#1A1305}
html.wgg-new body.ui-ss .podium-card.p2 .pbase{height:82px !important;background:linear-gradient(180deg,#F1F5FA,#C9D3DE 60%,#8C9BAB) !important}
html.wgg-new body.ui-ss .podium-card.p2 .pbase::after{content:"2";color:#1C2633}
html.wgg-new body.ui-ss .podium-card.p3 .pbase{height:62px !important;background:linear-gradient(180deg,#F0B98A,#D49A63 60%,#9A5B2E) !important}
html.wgg-new body.ui-ss .podium-card.p3 .pbase::after{content:"3";color:#2A1508}
html.wgg-new body.ui-ss .podium-stage{padding-bottom:0 !important}
html.wgg-new body.ui-ss .podium-card.p1{position:relative}
html.wgg-new body.ui-ss .podium-card.p1::before{content:"";position:absolute;top:-40px;left:50%;width:200px;height:330px;transform:translateX(-50%);background:linear-gradient(180deg,#F2C14E26,transparent 80%);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);pointer-events:none;z-index:0}
/* riders, follow buttons (one style), groups */
html.wgg-new body.ui-ss .rider-row{background:var(--ui-surface);border:1px solid var(--ui-line) !important;border-radius:16px;padding:10px 14px !important;margin-bottom:8px}
html.wgg-new body.ui-ss .rider-name{font:700 16px var(--ui-font-display) !important;color:var(--ui-text) !important}
html.wgg-new body.ui-ss .rider-country{color:var(--ui-text-soft) !important}
html.wgg-new body.ui-ss .rider-follow-btn,html.wgg-new body.ui-ss #wg-pp-follow-btn{height:36px;padding:0 14px !important;border-radius:10px !important;border:1.5px solid var(--ui-primary) !important;background:transparent !important;color:var(--ui-primary) !important;font:700 14px var(--ui-font-text) !important}
html.wgg-new body.ui-ss .rider-follow-btn.following{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new body.ui-ss :is(.riders-invite-btn,.rd-invite){display:inline-flex !important;align-items:center;gap:7px;height:42px;padding:0 14px !important;border-radius:10px !important;border:1.5px solid var(--ui-primary) !important;background:transparent !important;color:var(--ui-primary) !important;font:700 14.5px var(--ui-font-text) !important;text-decoration:none}
html.wgg-new body.ui-ss .rd-invite{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new body.ui-ss .gr-lbl{font:700 11.5px var(--ui-font-text) !important;letter-spacing:.05em;color:var(--ui-text-faint) !important;text-transform:uppercase}
html.wgg-new body.ui-ss .gr-box{background:none !important;border:0 !important;padding:0 !important;display:flex;flex-direction:column;gap:8px}
html.wgg-new body.ui-ss .gr-row{background:var(--ui-surface);border:1px solid var(--ui-line) !important;border-radius:16px;padding:10px 14px !important}
html.wgg-new body.ui-ss .gr-ic{background:var(--ui-primary-soft) !important;border-radius:12px !important}
html.wgg-new body.ui-ss .gr-name{font:700 16px var(--ui-font-display) !important;color:var(--ui-text) !important}
html.wgg-new body.ui-ss .gr-sub{color:var(--ui-text-soft) !important}
html.wgg-new body.ui-ss .gr-badge{background:var(--ui-primary-soft) !important;color:var(--ui-primary) !important}
html.wgg-new body.ui-ss .gr-badge.p{background:var(--ui-yellow-soft) !important;color:var(--ui-yellow) !important}
html.wgg-new body.ui-ss .gr-btn{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;border-radius:10px !important;font:700 14.5px var(--ui-font-text) !important;display:inline-flex !important;align-items:center;justify-content:center;gap:7px}
html.wgg-new body.ui-ss .gr-btn.ghost{background:transparent !important;border:1.5px solid var(--ui-primary) !important;color:var(--ui-primary) !important}
html.wgg-new body.ui-ss .gr-back{color:var(--ui-primary) !important;font-weight:700 !important}
html.wgg-new body.ui-ss .gr-plan{background:var(--ui-surface-2) !important;border:0 !important;border-radius:14px !important}
html.wgg-new body.ui-ss .gr-card{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:20px !important}
html.wgg-new body.ui-ss .gr-card h3{color:var(--ui-text) !important;font-weight:800}
html.wgg-new body.ui-ss .gr-in{background:var(--ui-surface-2) !important;border:1px solid var(--ui-line) !important;color:var(--ui-text) !important;border-radius:10px !important}
html.wgg-new body.ui-ss .gr-seg{display:grid !important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;background:var(--ui-surface-2);border:1px solid var(--ui-line);border-radius:14px;padding:4px}
html.wgg-new body.ui-ss .gr-seg button{border:0 !important;background:transparent !important;color:var(--ui-text) !important;border-radius:10px !important;font:700 14px var(--ui-font-text) !important;min-width:0 !important}
html.wgg-new body.ui-ss .gr-seg button.on{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new body.ui-ss .gr-icons button{background:var(--ui-surface-2) !important;border:1px solid var(--ui-line) !important}
html.wgg-new body.ui-ss .gr-icons button.on{background:var(--ui-primary-soft) !important;border:2px solid var(--ui-primary) !important}
html.wgg-new body.ui-ss .gr-ans{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new body.ui-ss .gr-msg{color:var(--ui-warn) !important}
html.wgg-new body.ui-ss .main-tab[data-view="community"]::before,html.wgg-new body.ui-ss #following-toggle-btn::before,html.wgg-new body.ui-ss .gr-switch [data-g="groups"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8.5' r='3.2'/><path d='M3 19.5c.6-3.3 3-5 6-5s5.4 1.7 6 5'/><circle cx='17' cy='9.5' r='2.5'/><path d='M16 14.6c2.7.2 4.4 1.8 5 4.4'/></svg>")}
html.wgg-new body.ui-ss .main-tab[data-view="my-sessions"]::before,html.wgg-new body.ui-ss .gr-switch [data-g="riders"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8.5' r='3.6'/><path d='M5 20c.8-3.8 3.6-5.6 7-5.6s6.2 1.8 7 5.6'/></svg>")}
html.wgg-new body.ui-ss .main-tab[data-view="rankings"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M8 4h8v5a4 4 0 0 1-8 0z'/><path d='M8 6H5a3 3 0 0 0 3 4M16 6h3a3 3 0 0 1-3 4M12 13v4M8.5 20.5h7M10 17h4v3.5h-4z'/></svg>")}
html.wgg-new body.ui-ss .main-tab[data-view="riders"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M3 13c2.5 0 2.5-3 5-3s2.5 3 5 3 2.5-3 5-3 2.5 3 3 3'/><path d='M3 18c2.5 0 2.5-3 5-3s2.5 3 5 3 2.5-3 5-3 2.5 3 3 3'/></svg>")}
html.wgg-new body.ui-ss [data-subview="sessions"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M8 6h12M8 12h12M8 18h12'/><circle cx='4' cy='6' r='1'/><circle cx='4' cy='12' r='1'/><circle cx='4' cy='18' r='1'/></svg>")}
html.wgg-new body.ui-ss [data-subview="map"]::before,html.wgg-new body.ui-ss [data-kind="popular"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21c-3.6 0-6-2.4-6-5.6 0-3.4 2.7-5 3.3-8.4 1.9 1.2 2.4 3.3 2.2 4.6 1-.8 1.7-2 1.8-3.6 2.4 1.8 2.7 4.6 2.7 7.4 0 3.2-2.4 5.6-4 5.6z'/></svg>")}
html.wgg-new body.ui-ss [data-subview="progress"]::before,html.wgg-new body.ui-ss [data-kind="sessions"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V4M4 20h16'/><path d='M8 16v-4M12 16V8M16 16v-6'/></svg>")}
html.wgg-new body.ui-ss [data-subview="records"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='15' r='5'/><path d='M8.5 10.5L6 3h4l2 5M15.5 10.5L18 3h-4l-2 5'/></svg>")}
html.wgg-new body.ui-ss [data-kind="spots"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-6.5-6.1-6.5-11A6.5 6.5 0 0 1 18.5 10c0 4.9-6.5 11-6.5 11z'/><circle cx='12' cy='10' r='2.3'/></svg>")}
html.wgg-new body.ui-ss .like-btn::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.5 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z'/></svg>")}
html.wgg-new body.ui-ss .comment-btn::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M4 18.5l1.3-3.8A7.5 7.5 0 1 1 8.6 18z'/></svg>")}
html.wgg-new body.ui-ss .card-social-row .share-btn::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M9 7h8v8'/></svg>")}
html.wgg-new body.ui-ss .device-chip::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='7' y='6.5' width='10' height='11' rx='3'/><path d='M9 6.5l.6-3h4.8l.6 3M9 17.5l.6 3h4.8l.6-3M12 9.5V12l1.5 1'/></svg>")}
html.wgg-new body.ui-ss #riders-invite-link::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1 1'/><path d='M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1-1'/></svg>")}
html.wgg-new body.ui-ss #riders-invite-mail::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5.5' width='18' height='13' rx='2'/><path d='M3.5 7l8.5 6 8.5-6'/></svg>")}
html.wgg-new body.ui-ss .rd-invite::before,html.wgg-new body.ui-ss #gr-new::before,html.wgg-new body.ui-ss #gr-inv::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>")}
html.wgg-new body.ui-ss #gr-go::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M15.5 8.5l-2 5-5 2 2-5z'/></svg>")}
html.wgg-new body.ui-ss .card-map-expand::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/></svg>")}
html.wgg-new body.ui-ss .main-tab[data-view="community"]::before,html.wgg-new body.ui-ss #following-toggle-btn::before,html.wgg-new body.ui-ss .gr-switch [data-g="groups"]::before,html.wgg-new body.ui-ss .main-tab[data-view="my-sessions"]::before,html.wgg-new body.ui-ss .gr-switch [data-g="riders"]::before,html.wgg-new body.ui-ss .main-tab[data-view="rankings"]::before,html.wgg-new body.ui-ss .main-tab[data-view="riders"]::before,html.wgg-new body.ui-ss [data-subview="sessions"]::before,html.wgg-new body.ui-ss [data-subview="map"]::before,html.wgg-new body.ui-ss [data-kind="popular"]::before,html.wgg-new body.ui-ss [data-subview="progress"]::before,html.wgg-new body.ui-ss [data-kind="sessions"]::before,html.wgg-new body.ui-ss [data-subview="records"]::before,html.wgg-new body.ui-ss [data-kind="spots"]::before,html.wgg-new body.ui-ss .like-btn::before,html.wgg-new body.ui-ss .comment-btn::before,html.wgg-new body.ui-ss .card-social-row .share-btn::before,html.wgg-new body.ui-ss .device-chip::before,html.wgg-new body.ui-ss #riders-invite-link::before,html.wgg-new body.ui-ss #riders-invite-mail::before,html.wgg-new body.ui-ss .rd-invite::before,html.wgg-new body.ui-ss #gr-new::before,html.wgg-new body.ui-ss #gr-inv::before,html.wgg-new body.ui-ss #gr-go::before,html.wgg-new body.ui-ss .card-map-expand::before{content:"";display:inline-block;width:17px;height:17px;flex:none;background-color:currentColor;-webkit-mask:var(--ui-ic) center/contain no-repeat;mask:var(--ui-ic) center/contain no-repeat}
html.wgg-new body.ui-ss :is(.main-tab,.kind-btn,.gr-switch button):not(.active):not(.on)::before{background-color:var(--ui-primary)}
html.wgg-new body.ui-ss :is(.social-btn,.device-chip)::before{background-color:var(--ui-primary)}
html.wgg-new body.ui-ss .social-btn.liked::before{background-color:currentColor}

/* =====================================================================
   One page width + Events & courses + one event (Nov 8, night).
   Mock-up 2026-11-08-wide-pages-and-events. Benoit: "plan and ride is using
   the full screen. why arent the other tabs?" -> every new-design page: up to
   1280 px, 24 px inside (16 px on a phone). L = the frame's left edge.
   ===================================================================== */
html.wgg-new body.ui.ui-ss .page-header,html.wgg-new body.ui.ui-ss .filters-bar{max-width:none !important;padding-left:max(16px,calc(50% - 616px)) !important;padding-right:max(16px,calc(50% - 616px)) !important}
html.wgg-new body.ui.ui-ss #main-tabs:not(#ui-none){max-width:none !important;margin:8px max(16px,calc(50% - 616px)) !important}
html.wgg-new body.ui.ui-ss .rankings-filter-bar:has(.kind-btn):not(#ui-none),html.wgg-new body.ui.ui-ss #riders-tabs:not(#ui-none),html.wgg-new body.ui.ui-ss .gr-switch:not(#ui-none){margin-left:max(16px,calc(50% - 616px)) !important;margin-right:auto !important}
html.wgg-new body.ui.ui-ss [style*="max-width:720px"]:not(.page-header):not(#main-tabs):not(.rankings-filter-bar),html.wgg-new body.ui.ui-ss .rankings-filters,html.wgg-new body.ui.ui-ss .popular-month-row,html.wgg-new body.ui.ui-ss .popular-breadcrumb,html.wgg-new body.ui.ui-ss .popular-note,html.wgg-new body.ui.ui-ss .rankings-filter-bar:not(:has(.kind-btn)){width:calc(100% - 32px) !important;max-width:1232px !important;margin-left:max(16px,calc(50% - 616px)) !important;margin-right:0 !important;padding-left:0 !important;padding-right:0 !important;box-sizing:border-box}
/* Nov 9, 2026 -- Benoit: "i dont like the fact that almost each screen is using
   different width. community, my sessions and riders, all look out of sync. also
   remove the group from the session part". No side column any more: every tab of
   the Sessions page fills the same frame (1232 px inside, the header's width).
   Nov 9, later -- Benoit: "for session i would prefer one session below each
   other": the feed's cards one under the other, the frame's full width. */
html.wgg-new body.ui.ui-ss #feed:not(#ui-none){max-width:none !important;margin:0 !important;padding:16px max(16px,calc(50% - 616px)) 60px !important;box-sizing:border-box}
html.wgg-new body.ui.ui-ss .wg-ev,html.wgg-new body.ui.ui-ss .wg-rd{background:var(--ui-surface-2) !important;border:0 !important;border-radius:14px !important}
html.wgg-new body.ui.ui-ss .wg-ev-d{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;font:700 11px var(--ui-font-text) !important}
html.wgg-new body.ui.ui-ss .wg-ev-t,html.wgg-new body.ui.ui-ss .wg-rd-n{font-family:var(--ui-font-display) !important;color:var(--ui-text)}
html.wgg-new body.ui.ui-ss .wg-rd-av{background:var(--ui-primary-soft) !important;color:var(--ui-primary) !important}
html.wgg-new body.ui.ui-ss .wg-rd-f{color:var(--ui-green) !important;font:700 11px var(--ui-font-text) !important}
html.wgg-new body.ui.ui-ss .wg-rd-b{background:transparent !important;border:1.5px solid var(--ui-primary) !important;color:var(--ui-primary) !important;border-radius:10px !important}
html.wgg-new body.ui.ui-ss .wg-rd-b.on{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new body.ui.ui-ss .ui-grp{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:12px;color:var(--ui-text);text-decoration:none}
html.wgg-new body.ui.ui-ss .ui-grp:hover{background:var(--ui-surface-2)}
html.wgg-new body.ui.ui-ss .ui-grp .gic{width:34px;height:34px;border-radius:10px;background:var(--ui-primary-soft);display:grid;place-items:center;font-size:18px;flex:none}
html.wgg-new body.ui.ui-ss .ui-grp b{display:block;font:700 15px var(--ui-font-display)}
html.wgg-new body.ui.ui-ss .ui-grp small{color:var(--ui-text-soft);font-size:13px}
html.wgg-new body.ui.ui-ev{
  --ink:var(--ui-bg); --ink-2:var(--ui-surface); --ink-3:var(--ui-surface-2);
  --sand:var(--ui-text); --sand-dim:var(--ui-text-soft); --sand-faint:var(--ui-text-faint);
  --coral:var(--ui-primary); --sun:var(--ui-primary); --good:var(--ui-green);
  --line:var(--ui-line); --line-strong:var(--ui-line);
  background:var(--ui-bg) !important; color:var(--ui-text); font-family:var(--ui-font-text) !important;
}
html.wgg-new body.ui-ev #wg-header{--ink:#0A1220;--ink-2:#0D1830;--ink-3:#111F3A;--sand:#F4F7FB;--sand-dim:#B3C1D8;--sand-faint:#7F8FA8;--coral:#FF6B35;--line:rgba(255,255,255,0.08);--line-strong:rgba(255,255,255,0.14)}
html.wgg-new body.ui-ev main{max-width:none !important;padding-left:max(16px,calc(50% - 616px)) !important;padding-right:max(16px,calc(50% - 616px)) !important}
html.wgg-new body.ui-ev footer{max-width:none !important;padding-left:max(16px,calc(50% - 616px)) !important;padding-right:max(16px,calc(50% - 616px)) !important}
html.wgg-new body.ui-ev main :is(input,select,textarea,button){font-family:var(--ui-font-text)}
html.wgg-new body.ui-ev main h1{font:800 30px/1.15 var(--ui-font-display) !important;color:var(--ui-text);margin:0 0 4px}
html.wgg-new body.ui-ev main h2,html.wgg-new body.ui-ev main h3{font-family:var(--ui-font-display) !important}
html.wgg-new body.ui-ev .btn:not(.secondary){background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;border-radius:10px !important;font:700 14.5px var(--ui-font-text) !important;min-height:42px}
html.wgg-new body.ui-ev .btn.secondary{background:transparent !important;border:1.5px solid var(--ui-primary) !important;color:var(--ui-primary) !important;font-weight:700 !important;border-radius:10px !important}
html.wgg-new body.ui-ev .btn[style*="background:none"]{background:transparent !important;border:1.5px solid var(--ui-primary) !important;color:var(--ui-primary) !important}
html.wgg-new body.ui-ev .ev-badge{display:inline-flex !important;align-items:center;gap:5px;background:var(--ui-primary-soft) !important;color:var(--ui-primary) !important;border-radius:999px !important;padding:3px 10px !important;font:700 12.5px var(--ui-font-text) !important}
html.wgg-new body.ui-ev .status.good,html.wgg-new body.ui-ev .good{color:var(--ui-green) !important}
html.wgg-new body.ui-ev .status.bad,html.wgg-new body.ui-ev .bad{color:var(--ui-warn) !important}
html.wgg-new body.ui-ev .sub,html.wgg-new body.ui-ev .meta{color:var(--ui-text-soft) !important}
html.wgg-new body.ui-ev .empty{background:var(--ui-surface);border:1px dashed var(--ui-line) !important;border-radius:16px !important;color:var(--ui-text-soft) !important}
html.wgg-new body.ui.ui-evp{
  --ink:var(--ui-bg); --ink-2:var(--ui-surface); --ink-3:var(--ui-surface-2);
  --sand:var(--ui-text); --sand-dim:var(--ui-text-soft); --sand-faint:var(--ui-text-faint);
  --coral:var(--ui-primary); --sun:var(--ui-primary); --good:var(--ui-green);
  --line:var(--ui-line); --line-strong:var(--ui-line);
  background:var(--ui-bg) !important; color:var(--ui-text); font-family:var(--ui-font-text) !important;
}
html.wgg-new body.ui-evp #wg-header{--ink:#0A1220;--ink-2:#0D1830;--ink-3:#111F3A;--sand:#F4F7FB;--sand-dim:#B3C1D8;--sand-faint:#7F8FA8;--coral:#FF6B35;--line:rgba(255,255,255,0.08);--line-strong:rgba(255,255,255,0.14)}
html.wgg-new body.ui-evp main{max-width:none !important;padding-left:max(16px,calc(50% - 616px)) !important;padding-right:max(16px,calc(50% - 616px)) !important}
html.wgg-new body.ui-evp footer{max-width:none !important;padding-left:max(16px,calc(50% - 616px)) !important;padding-right:max(16px,calc(50% - 616px)) !important}
html.wgg-new body.ui-evp main :is(input,select,textarea,button){font-family:var(--ui-font-text)}
html.wgg-new body.ui-evp main h1{font:800 30px/1.15 var(--ui-font-display) !important;color:var(--ui-text);margin:0 0 4px}
html.wgg-new body.ui-evp main h2,html.wgg-new body.ui-evp main h3{font-family:var(--ui-font-display) !important}
html.wgg-new body.ui-evp .btn:not(.secondary){background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;border-radius:10px !important;font:700 14.5px var(--ui-font-text) !important;min-height:42px}
html.wgg-new body.ui-evp .btn.secondary{background:transparent !important;border:1.5px solid var(--ui-primary) !important;color:var(--ui-primary) !important;font-weight:700 !important;border-radius:10px !important}
html.wgg-new body.ui-evp .btn[style*="background:none"]{background:transparent !important;border:1.5px solid var(--ui-primary) !important;color:var(--ui-primary) !important}
html.wgg-new body.ui-evp .ev-badge{display:inline-flex !important;align-items:center;gap:5px;background:var(--ui-primary-soft) !important;color:var(--ui-primary) !important;border-radius:999px !important;padding:3px 10px !important;font:700 12.5px var(--ui-font-text) !important}
html.wgg-new body.ui-evp .status.good,html.wgg-new body.ui-evp .good{color:var(--ui-green) !important}
html.wgg-new body.ui-evp .status.bad,html.wgg-new body.ui-evp .bad{color:var(--ui-warn) !important}
html.wgg-new body.ui-evp .sub,html.wgg-new body.ui-evp .meta{color:var(--ui-text-soft) !important}
html.wgg-new body.ui-evp .empty{background:var(--ui-surface);border:1px dashed var(--ui-line) !important;border-radius:16px !important;color:var(--ui-text-soft) !important}
html.wgg-new :is(body.ui-ev,body.ui-evp) .ev-badge[data-k="meetup"]::before,html.wgg-new body.ui-ev .mk-kind[data-kind="meetup"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='9' r='2.6'/><circle cx='16' cy='9' r='2.6'/><path d='M3.5 18c.5-2.8 2.3-4.2 4.5-4.2s4 1.4 4.5 4.2M11.5 18c.5-2.8 2.3-4.2 4.5-4.2s4 1.4 4.5 4.2'/></svg>")}
html.wgg-new :is(body.ui-ev,body.ui-evp) .ev-badge[data-k="downwinder"]::before,html.wgg-new body.ui-ev .mk-kind[data-kind="downwinder"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='5.5' cy='18' r='2'/><circle cx='18.5' cy='6' r='2'/><path d='M7.5 18h7a3 3 0 0 0 0-6h-5a3 3 0 0 1 0-6h7'/></svg>")}
html.wgg-new :is(body.ui-ev,body.ui-evp) .ev-badge[data-k="clinic"]::before,html.wgg-new body.ui-ev .mk-kind[data-kind="clinic"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 9.5L12 5l9.5 4.5L12 14z'/><path d='M6.5 11.5v4c1.5 1.5 3.4 2 5.5 2s4-.5 5.5-2v-4M21.5 9.5v5'/></svg>")}
html.wgg-new :is(body.ui-ev,body.ui-evp) .ev-badge[data-k="demo"]::before,html.wgg-new body.ui-ev .mk-kind[data-kind="demo"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 6-7 12-7-12z'/><path d='M5 9h14M12 3v18'/></svg>")}
html.wgg-new :is(body.ui-ev,body.ui-evp) .ev-badge[data-k="party"]::before,html.wgg-new body.ui-ev .mk-kind[data-kind="party"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L12 16.8l-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/></svg>")}
html.wgg-new :is(body.ui-ev,body.ui-evp) .ev-badge[data-k="cleanup"]::before,html.wgg-new body.ui-ev .mk-kind[data-kind="cleanup"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M3 13c2.5 0 2.5-3 5-3s2.5 3 5 3 2.5-3 5-3 2.5 3 3 3'/><path d='M3 18c2.5 0 2.5-3 5-3s2.5 3 5 3 2.5-3 5-3 2.5 3 3 3' opacity='.5'/></svg>")}
html.wgg-new :is(body.ui-ev,body.ui-evp) .ev-badge[data-k="other"]::before,html.wgg-new body.ui-ev .mk-kind[data-kind="other"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15' rx='2'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg>")}
html.wgg-new :is(body.ui-ev,body.ui-evp) .ev-badge[data-k="competition"]::before,html.wgg-new body.ui-ev .mk-kind[data-kind="competition"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M8 4h8v5a4 4 0 0 1-8 0z'/><path d='M8 6H5a3 3 0 0 0 3 4M16 6h3a3 3 0 0 1-3 4M12 13v4M8.5 20.5h7M10 17h4v3.5h-4z'/></svg>")}
html.wgg-new :is(body.ui-ev,body.ui-evp) .ev-badge[data-k="teams"]::before,html.wgg-new body.ui-ev .mk-kind[data-kind="teams"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8.5' r='3.2'/><path d='M3 19.5c.6-3.3 3-5 6-5s5.4 1.7 6 5'/><circle cx='17' cy='9.5' r='2.5'/><path d='M16 14.6c2.7.2 4.4 1.8 5 4.4'/></svg>")}
html.wgg-new body.ui-ev .mk-cat[data-cat="space"]::before,html.wgg-new body.ui-evp .tabs .tab[data-tab="space"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 19V6M6.5 11.5L12 6l5.5 5.5'/></svg>")}
html.wgg-new body.ui-ev .mk-cat[data-cat="earth"]::before,html.wgg-new body.ui-evp .tabs .tab[data-tab="earth"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M4 16a8 8 0 1 1 16 0'/><path d='M12 16l4-5'/></svg>")}
html.wgg-new body.ui-ev .mk-cat[data-cat="spacewalk"]::before,html.wgg-new body.ui-evp .tabs .tab[data-tab="spacewalk"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='13' r='7.5'/><path d='M12 9v4l2.5 2M9.5 3h5'/></svg>")}
html.wgg-new body.ui-ev .mk-cat[data-cat="lightyear"]::before,html.wgg-new body.ui-evp .tabs .tab[data-tab="lightyear"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L12 16.8l-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/></svg>")}
html.wgg-new body.ui-ev .mk-cat[data-cat="meteors"]::before,html.wgg-new body.ui-evp .tabs .tab[data-tab="meteors"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M3 19c3-9 6-12 9-12s6 3 9 12'/><circle cx='12' cy='5' r='1.4'/></svg>")}
html.wgg-new body.ui-ev .mk-cat[data-cat="voyager"]::before,html.wgg-new body.ui-evp .tabs .tab[data-tab="voyager"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='5.5' cy='18' r='2'/><circle cx='18.5' cy='6' r='2'/><path d='M7.5 18h7a3 3 0 0 0 0-6h-5a3 3 0 0 1 0-6h7'/></svg>")}
html.wgg-new body.ui-ev .mk-cat[data-cat="odyssey"]::before,html.wgg-new body.ui-evp .tabs .tab[data-tab="odyssey"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 7.5V12l3 2'/></svg>")}
html.wgg-new body.ui-ev .mk-cat[data-cat="constellation"]::before,html.wgg-new body.ui-evp .tabs .tab[data-tab="constellation"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='7' height='7' rx='1.5'/><rect x='13' y='4' width='7' height='7' rx='1.5'/><rect x='4' y='13' width='7' height='7' rx='1.5'/><rect x='13' y='13' width='7' height='7' rx='1.5'/></svg>")}
html.wgg-new body.ui-ev .mk-cat[data-cat="__galaxy"]::before,html.wgg-new body.ui-evp .tabs .tab[data-tab="__galaxy"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M3.5 12h17M12 3.5c2.4 2.4 3.4 5.3 3.4 8.5S14.4 18.1 12 20.5M12 3.5C9.6 5.9 8.6 8.8 8.6 12s1 6.1 3.4 8.5'/></svg>")}
html.wgg-new body.ui-ev .scopebtn[data-scope="upcoming"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15' rx='2'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg>")}
html.wgg-new body.ui-ev .scopebtn[data-scope="going"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7.5h16v3a1.8 1.8 0 0 0 0 3v3H4v-3a1.8 1.8 0 0 0 0-3z'/><path d='M14 7.5v9' stroke-dasharray='2 2'/></svg>")}
html.wgg-new body.ui-ev .scopebtn[data-scope="planning"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8.5' r='3.6'/><path d='M5 20c.8-3.8 3.6-5.6 7-5.6s6.2 1.8 7 5.6'/></svg>")}
html.wgg-new body.ui-ev .scopebtn[data-scope="archive"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4.5' width='17' height='4' rx='1'/><path d='M5 8.5v10h14v-10M10 12h4'/></svg>")}
html.wgg-new body.ui-ev .vbtn[data-view="list"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M8 6h12M8 12h12M8 18h12'/><circle cx='4' cy='6' r='1'/><circle cx='4' cy='12' r='1'/><circle cx='4' cy='18' r='1'/></svg>")}html.wgg-new body.ui-ev .vbtn[data-view="cal"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15' rx='2'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg>")}
html.wgg-new body.ui-ev .mk-type[data-type="event"] b::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='9' r='2.6'/><circle cx='16' cy='9' r='2.6'/><path d='M3.5 18c.5-2.8 2.3-4.2 4.5-4.2s4 1.4 4.5 4.2M11.5 18c.5-2.8 2.3-4.2 4.5-4.2s4 1.4 4.5 4.2'/></svg>")}html.wgg-new body.ui-ev .mk-type[data-type="competition"] b::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M8 4h8v5a4 4 0 0 1-8 0z'/><path d='M8 6H5a3 3 0 0 0 3 4M16 6h3a3 3 0 0 1-3 4M12 13v4M8.5 20.5h7M10 17h4v3.5h-4z'/></svg>")}
html.wgg-new body.ui-ev .ui-ev-create::before,html.wgg-new body.ui-ev #mine-course-new::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>")}
html.wgg-new :is(body.ui-ev,body.ui-evp) .ev-badge::before,html.wgg-new body.ui-ev .mk-kind::before,html.wgg-new body.ui-ev .mk-cat::before,html.wgg-new body.ui-evp .tabs .tab::before,html.wgg-new body.ui-ev .scopebtn::before,html.wgg-new body.ui-ev .vbtn::before,html.wgg-new body.ui-ev .ui-ev-create::before,html.wgg-new body.ui-ev #mine-course-new::before{content:"";display:inline-block;width:16px;height:16px;flex:none;background-color:var(--ui-primary);-webkit-mask:var(--ui-ic) center/contain no-repeat;mask:var(--ui-ic) center/contain no-repeat}
html.wgg-new body.ui-ev .mk-type b::before{content:"";display:inline-block;width:22px;height:22px;flex:none;background-color:var(--ui-primary);-webkit-mask:var(--ui-ic) center/contain no-repeat;mask:var(--ui-ic) center/contain no-repeat}
html.wgg-new :is(body.ui-ev,body.ui-evp) .ev-badge:not([data-k])::before{display:none}
html.wgg-new body.ui-ev :is(.scopebtn.sel,.vbtn.active,.mk-kind.on,.mk-cat.on,.ui-ev-create,#mine-course-new)::before,html.wgg-new body.ui-ev .mk-type.on b::before,html.wgg-new body.ui-evp .tabs .tab.on::before{background-color:currentColor}
html.wgg-new body.ui-ev main{padding-top:calc(var(--header-h, 64px) + 26px) !important}
html.wgg-new body.ui-ev .lede{color:var(--ui-text-soft) !important;font-size:15px !important;max-width:70ch}
html.wgg-new body.ui-ev .scoperow{display:grid !important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:14px !important;padding:4px !important;max-width:none !important;margin:0 0 16px !important}
html.wgg-new body.ui-ev .scopebtn{height:42px;display:flex !important;align-items:center;justify-content:center;gap:7px;min-width:0 !important;border-radius:10px !important;color:var(--ui-text) !important;font:700 14.5px var(--ui-font-text) !important;padding:0 8px !important;white-space:nowrap}
html.wgg-new body.ui-ev .scopebtn.sel{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new body.ui-ev .ui-ev-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start}
html.wgg-new body.ui-ev .ui-ev-grid:has(>.ui-ev-rail>.filters[style*="none"]){grid-template-columns:minmax(0,1fr)}
html.wgg-new body.ui-ev .ui-ev-grid:has(>.ui-ev-rail>.filters[style*="none"])>.ui-ev-rail{display:none}
html.wgg-new body.ui-ev .ui-ev-rail{display:flex;flex-direction:column;gap:8px;position:sticky;top:calc(var(--header-h, 64px) + 16px)}
@media (max-width:900px){ html.wgg-new body.ui-ev .ui-ev-grid{grid-template-columns:minmax(0,1fr)} html.wgg-new body.ui-ev .ui-ev-rail{position:static} }
html.wgg-new body.ui-ev .ui-lbl{font:700 11.5px var(--ui-font-text);letter-spacing:.05em;text-transform:uppercase;color:var(--ui-text-faint);margin:6px 0 0}
html.wgg-new body.ui-ev .ui-ev-rail .filters{display:flex;flex-direction:column;gap:8px;margin:0 !important}
html.wgg-new body.ui-ev .ui-field{display:block;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:10px;padding:6px 12px 4px}
html.wgg-new body.ui-ev .ui-field>span{display:block;font:700 11px var(--ui-font-text);letter-spacing:.05em;text-transform:uppercase;color:var(--ui-text-faint)}
html.wgg-new body.ui-ev .ui-field select{width:100%;background:transparent !important;border:0 !important;padding:2px 0 4px !important;color:var(--ui-text) !important;font:700 15px var(--ui-font-text) !important;outline:none}
html.wgg-new body.ui-ev select option{color:#0A1A2B;background:#fff}
html.wgg-new body.ui-ev .filters .chk{border:0 !important;padding:6px 2px !important;color:var(--ui-text) !important;font:700 15px var(--ui-font-text) !important;gap:12px !important}
html.wgg-new body.ui-ev .filters .chk small{display:block;font:500 13px var(--ui-font-text);color:var(--ui-text-soft)}
html.wgg-new body.ui-ev .filters .chk input,html.wgg-new body.ui-ev input.ui-sw{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:12px;background:var(--ui-line);position:relative;flex:none;margin:0;cursor:pointer;transition:background .15s}
html.wgg-new body.ui-ev .filters .chk input::after,html.wgg-new body.ui-ev input.ui-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
html.wgg-new body.ui-ev .filters .chk input:checked,html.wgg-new body.ui-ev input.ui-sw:checked{background:var(--ui-primary)}
html.wgg-new body.ui-ev .filters .chk input:checked::after,html.wgg-new body.ui-ev input.ui-sw:checked::after{left:21px}
html.wgg-new body.ui-ev .viewswitch{display:grid !important;grid-template-columns:1fr 1fr;gap:4px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:14px;padding:4px;margin:0 !important}
html.wgg-new body.ui-ev .vbtn{height:40px;display:flex;align-items:center;justify-content:center;gap:7px;border:0 !important;border-radius:10px !important;background:transparent !important;color:var(--ui-text) !important;font:700 14.5px var(--ui-font-text) !important}
html.wgg-new body.ui-ev .vbtn.active{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new body.ui-ev .ui-ev-create,html.wgg-new body.ui-ev #mk-open,html.wgg-new body.ui-ev #mine-course-new{display:flex !important;align-items:center;justify-content:center;gap:7px;height:46px;border:0;border-radius:10px;background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;font:700 15px var(--ui-font-text) !important;cursor:pointer;margin-top:8px;padding:0 16px !important}
html.wgg-new body.ui-ev #mk-open,html.wgg-new body.ui-ev #mine-course-new{display:inline-flex !important}
html.wgg-new body.ui-ev .ui-ev-create[hidden]{display:none !important}
html.wgg-new body.ui-ev .sech{font:700 19px var(--ui-font-display) !important;text-transform:none !important;letter-spacing:normal !important;color:var(--ui-text) !important;border:0 !important;padding:0 !important;margin:4px 0 2px !important}
html.wgg-new body.ui-ev section{margin-bottom:22px}
html.wgg-new body.ui-ev #list-events,html.wgg-new body.ui-ev #list-courses,html.wgg-new body.ui-ev #archive-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:700px){ html.wgg-new body.ui-ev #list-events,html.wgg-new body.ui-ev #list-courses,html.wgg-new body.ui-ev #archive-list{grid-template-columns:minmax(0,1fr)} }
html.wgg-new body.ui-ev #list-events>.empty,html.wgg-new body.ui-ev #list-courses>.empty,html.wgg-new body.ui-ev #archive-list>:not(a.ev){grid-column:1/-1}
html.wgg-new body.ui-ev a.ev{display:grid !important;grid-template-columns:52px minmax(0,1fr);column-gap:12px;row-gap:2px;align-content:start;background:var(--ui-surface);border:1px solid var(--ui-line) !important;border-radius:18px !important;padding:14px !important;margin:0 !important;box-shadow:var(--ui-shadow)}
html.wgg-new body.ui-ev a.ev:hover{border-color:var(--ui-primary) !important}
html.wgg-new body.ui-ev a.ev>.ev-date{display:flex;flex-direction:column;align-items:center;justify-content:center;grid-row:1/span 3;align-self:start;width:52px;height:60px;border-radius:12px;background:var(--ui-primary);color:var(--ui-on-primary);line-height:1.1}
html.wgg-new body.ui-ev .ev-date b{font:800 21px/1 var(--ui-font-display)}
html.wgg-new body.ui-ev .ev-date small{font:700 10.5px var(--ui-font-text);letter-spacing:.04em}
html.wgg-new body.ui-ev a.ev>:not(.ev-date){grid-column:2}
html.wgg-new body.ui-ev a.ev>.ev-foot{grid-column:1/-1;margin-top:12px !important;color:var(--ui-text-soft)}
html.wgg-new body.ui-ev .ev-top{flex-direction:column;align-items:flex-start !important;gap:2px !important}
html.wgg-new body.ui-ev .ev-title{font:700 16.5px/1.25 var(--ui-font-display) !important;color:var(--ui-text);flex-direction:column;align-items:flex-start !important;gap:4px !important}
html.wgg-new body.ui-ev .ev-when{color:var(--ui-text-soft) !important;font-size:13px !important}
html.wgg-new body.ui-ev .ev-meta{color:var(--ui-text-soft) !important;font-size:13.5px !important}
html.wgg-new body.ui-ev .wind{background:var(--ui-surface-2) !important;color:var(--ui-text) !important;font:700 13px var(--ui-font-text) !important;border-radius:10px !important;border:1.5px solid var(--ui-line);padding:3px 10px !important}
html.wgg-new body.ui-ev .wind[data-ui-w]{border-color:var(--w);background:color-mix(in srgb,var(--w) 22%,transparent) !important}
html.wgg-new body.ui-ev .wind[data-ui-w="0"]{--w:var(--ui-w0)}html.wgg-new body.ui-ev .wind[data-ui-w="1"]{--w:var(--ui-w1)}html.wgg-new body.ui-ev .wind[data-ui-w="2"]{--w:var(--ui-w2)}html.wgg-new body.ui-ev .wind[data-ui-w="3"]{--w:var(--ui-w3)}html.wgg-new body.ui-ev .wind[data-ui-w="4"]{--w:var(--ui-w4)}
html.wgg-new body.ui-ev .cal-head b{font:700 19px var(--ui-font-display) !important}
html.wgg-new body.ui-ev .cal-head button{width:38px;height:38px;border-radius:10px !important;border:1px solid var(--ui-line) !important;background:var(--ui-surface) !important;color:var(--ui-text) !important;font-weight:700 !important}
html.wgg-new body.ui-ev #calwrap{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:18px;padding:14px;margin-bottom:22px}
html.wgg-new body.ui-ev .cal-grid{gap:4px !important}
html.wgg-new body.ui-ev .cal-grid>div[style*="uppercase"]{font:700 12px var(--ui-font-text) !important;color:var(--ui-text-faint) !important;text-align:left !important;padding:0 6px}
html.wgg-new body.ui-ev .cal-day{min-height:86px !important;background:var(--ui-surface-2);border:0 !important;border-radius:10px !important;padding:5px 6px !important}
html.wgg-new body.ui-ev .cal-day.today{outline:0 !important}
html.wgg-new body.ui-ev .cal-num{font:700 13px var(--ui-font-text) !important;color:var(--ui-text-soft) !important}
html.wgg-new body.ui-ev .cal-day.today .cal-num{display:inline-block;background:var(--ui-primary);color:var(--ui-on-primary) !important;border-radius:999px;min-width:24px;text-align:center}
html.wgg-new body.ui-ev .cal-item{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;font:700 12px/1.3 var(--ui-font-text) !important;border-radius:6px !important;padding:2px 6px !important;margin-top:3px !important}
html.wgg-new body.ui-ev .apply{grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important}
html.wgg-new body.ui-ev .apply-card{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:18px !important}
html.wgg-new body.ui-ev .apply-k{color:var(--ui-primary) !important;font-weight:700}
html.wgg-new body.ui-ev .apply-card h3{font:700 18px var(--ui-font-display) !important;color:var(--ui-text)}
html.wgg-new body.ui-ev .apply-go{background:transparent !important;border:1.5px solid var(--ui-primary);color:var(--ui-primary) !important;border-radius:10px !important;font-weight:700 !important}
html.wgg-new body.ui-ev #going-wrap,html.wgg-new body.ui-ev #mine-wrap,html.wgg-new body.ui-ev #archive-wrap,html.wgg-new body.ui-ev #mk-form{background:var(--ui-surface);border:1px solid var(--ui-line) !important;border-radius:20px !important}
html.wgg-new body.ui-ev #mk-form{background:var(--ui-surface-2)}
html.wgg-new body.ui-ev .mk-i{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:10px !important;color:var(--ui-text) !important;min-height:42px;font:600 15px var(--ui-font-text) !important}
html.wgg-new body.ui-ev .mk-l{font:700 11.5px var(--ui-font-text) !important;letter-spacing:.05em;color:var(--ui-text-faint) !important;margin-top:16px !important}
html.wgg-new body.ui-ev .mk-types{grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important}
html.wgg-new body.ui-ev .mk-type{border:1.5px solid var(--ui-line) !important;border-radius:14px !important;background:var(--ui-surface) !important;color:var(--ui-text) !important}
html.wgg-new body.ui-ev .mk-type b{display:flex !important;align-items:center;gap:8px;font:700 17px var(--ui-font-display) !important}
html.wgg-new body.ui-ev .mk-type span{color:var(--ui-text-soft) !important}
html.wgg-new body.ui-ev .mk-type.on{background:var(--ui-primary) !important;border-color:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new body.ui-ev .mk-type.on span{color:var(--ui-on-primary) !important}
html.wgg-new body.ui-ev :is(.mk-kind,.mk-disc,.mk-mode){display:inline-flex !important;align-items:center;gap:6px;border:1.5px solid var(--ui-line) !important;background:var(--ui-surface) !important;color:var(--ui-text) !important;font:700 14px var(--ui-font-text) !important;border-radius:999px !important;padding:6px 13px !important}
html.wgg-new body.ui-ev :is(.mk-kind,.mk-disc,.mk-mode).on{background:var(--ui-primary) !important;border-color:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new body.ui-ev #mk-cats{grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important;gap:6px !important}
html.wgg-new body.ui-ev .mk-cat{display:grid !important;grid-template-columns:20px 1fr;column-gap:10px;align-items:center;border:1.5px solid var(--ui-line) !important;background:var(--ui-surface) !important;border-radius:12px !important;padding:8px 12px !important;color:var(--ui-text) !important}
html.wgg-new body.ui-ev .mk-cat::before{grid-row:1/span 2;width:20px !important;height:20px !important}
html.wgg-new body.ui-ev .mk-cat b{font:700 14.5px var(--ui-font-text) !important}
html.wgg-new body.ui-ev .mk-cat-what{color:var(--ui-text-soft) !important;font-size:12.5px !important}
html.wgg-new body.ui-ev .mk-cat.on{background:var(--ui-primary) !important;border-color:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new body.ui-ev .mk-cat.on .mk-cat-what{color:var(--ui-on-primary) !important}
html.wgg-new body.ui-ev .sp-list{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important}
html.wgg-new body.ui-ev .sp-opt{color:var(--ui-text) !important}
html.wgg-new body.ui-ev .sp-opt:hover,html.wgg-new body.ui-ev .sp-opt.sp-on{background:var(--ui-primary-soft) !important}
html.wgg-new body.ui-ev .sp-clear{color:var(--ui-primary) !important;font-weight:700}
html.wgg-new body.ui-ev .ui-hidden-select{display:none !important}
html.wgg-new :is(body.ui-ev,body.ui-evp) .ui-seg,html.wgg-new body.ui-evp .tabs,html.wgg-new body.ui-evp .ui-autoseg{display:grid !important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:14px;padding:4px;max-width:560px;margin:0}
html.wgg-new :is(body.ui-ev,body.ui-evp) .ui-seg button,html.wgg-new body.ui-evp .tabs .tab,html.wgg-new body.ui-evp .ui-autoseg .tab{height:40px;display:flex;align-items:center;justify-content:center;gap:7px;border:0 !important;border-radius:10px !important;background:transparent !important;color:var(--ui-text) !important;font:700 14px var(--ui-font-text) !important;padding:0 8px !important;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
html.wgg-new :is(body.ui-ev,body.ui-evp) .ui-seg button.on,html.wgg-new body.ui-evp .tabs .tab.on,html.wgg-new body.ui-evp .ui-autoseg .tab.on{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new body.ui-evp main{padding-top:calc(var(--header-h, 64px) + 26px) !important}
@media (min-width:900px){ html.wgg-new body.ui-evp .ev-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start} html.wgg-new body.ui-evp .ev-right>.tabs:first-child{margin-top:0 !important} }
html.wgg-new body.ui-evp .card{background:var(--ui-surface);border:1px solid var(--ui-line) !important;border-radius:20px !important;box-shadow:var(--ui-shadow)}
html.wgg-new body.ui-evp .card[style*="border-color:var(--coral)"]{border:2px solid var(--ui-text-faint) !important}
html.wgg-new body.ui-evp .card[style*="border-color:var(--coral)"] p:first-child{color:var(--ui-text) !important}
html.wgg-new body.ui-evp .tabs{max-width:none;margin:0 0 14px !important}
html.wgg-new body.ui-evp table{border-collapse:separate !important;border-spacing:0 6px}
html.wgg-new body.ui-evp th{color:var(--ui-text-faint) !important;font:700 11.5px var(--ui-font-text) !important}
html.wgg-new body.ui-evp td{background:var(--ui-surface);border-top:1px solid var(--ui-line) !important;border-bottom:1px solid var(--ui-line);padding:10px 10px !important}
html.wgg-new body.ui-evp td:first-child{border-left:1px solid var(--ui-line);border-radius:14px 0 0 14px}
html.wgg-new body.ui-evp td:last-child{border-right:1px solid var(--ui-line);border-radius:0 14px 14px 0}
html.wgg-new body.ui-evp td.rank{width:46px;font:800 15px var(--ui-font-display) !important;color:var(--ui-text) !important;text-align:center}
html.wgg-new body.ui-evp td.rank.p1{color:var(--ui-primary) !important}
html.wgg-new body.ui-evp td.n{font:800 17px var(--ui-font-display) !important;color:var(--ui-text)}
html.wgg-new body.ui-evp td{font:700 15px var(--ui-font-display)}
html.wgg-new body.ui-evp .bar{background:var(--ui-surface-2) !important;height:6px !important}
html.wgg-new body.ui-evp .bar span{background:var(--ui-primary) !important}
html.wgg-new body.ui-evp .locked .fade{background:linear-gradient(to bottom,transparent,var(--ui-bg) 55%) !important}
html.wgg-new body.ui-evp .ev-cols+.card input{background:var(--ui-surface-2) !important;border:1px solid var(--ui-line) !important;color:var(--ui-text) !important}
html.wgg-new body.ui-evp #mysess>div{background:var(--ui-surface-2);border:0 !important;border-radius:12px !important}
html.wgg-new body.ui-evp #mysess .tab{border:1.5px solid var(--ui-primary) !important;background:transparent !important;color:var(--ui-primary) !important;border-radius:10px !important;font:700 13.5px var(--ui-font-text) !important;padding:6px 12px !important}
html.wgg-new body.ui-evp #mysess .tab.on{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new body.ui-ev .ui-ev-fold{display:none}
@media (max-width:900px){
  html.wgg-new body.ui-ev .ui-ev-fold{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 14px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-surface);color:var(--ui-text);font:700 15px var(--ui-font-text);cursor:pointer}
  html.wgg-new body.ui-ev .ui-ev-fold small{color:var(--ui-text-soft);font:600 13px var(--ui-font-text)}
  html.wgg-new body.ui-ev .ui-ev-rail:not(.open)>.filters,html.wgg-new body.ui-ev .ui-ev-rail:not(.open)>.ui-lbl{display:none !important}
}
@media (max-width:520px){ html.wgg-new body.ui-ev .scopebtn::before{display:none} html.wgg-new body.ui-ev .scopebtn{font-size:14px !important;padding:0 4px !important} }
html.wgg-new body.ui-ev .mk-mode[data-mode="individual"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8.5' r='3.6'/><path d='M5 20c.8-3.8 3.6-5.6 7-5.6s6.2 1.8 7 5.6'/></svg>")}html.wgg-new body.ui-ev .mk-mode[data-mode="team"]::before{--ui-ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8.5' r='3.2'/><path d='M3 19.5c.6-3.3 3-5 6-5s5.4 1.7 6 5'/><circle cx='17' cy='9.5' r='2.5'/><path d='M16 14.6c2.7.2 4.4 1.8 5 4.4'/></svg>")}
html.wgg-new body.ui-ev .mk-mode::before{content:"";display:inline-block;width:16px;height:16px;flex:none;background-color:var(--ui-primary);-webkit-mask:var(--ui-ic) center/contain no-repeat;mask:var(--ui-ic) center/contain no-repeat}html.wgg-new body.ui-ev .mk-mode.on::before{background-color:currentColor}

/* =====================================================================
   The rest of the site (Nov 8, night). Benoit: "can u finish all of it and
   i will see the final result". Same parts, same colours, everywhere:
   the site header, the profile / sign-in / about / feedback panels, the spot
   panel and the map page's drawers and windows, the small pages (join,
   offer, link, partners, about, privacy...), and Sessions › Rankings in two
   columns. .ui-tk carries the colours without painting a background (for
   panels and overlays); .ui-skin points the page's own colour names at them.
   ===================================================================== */
html.wgg-new .ui-tk{--ui-bg:#D3E1EE; --ui-surface:#F1F5FA; --ui-surface-2:#E5EDF6; --ui-line:#B3C6DA; --ui-text:#0A1A2B; --ui-text-soft:#263D57; --ui-text-faint:#3D5671; --ui-primary:#174F8C; --ui-on-primary:#FFFFFF; --ui-primary-soft:#C7D9EE; --ui-green:#3E9E5B; --ui-warn:#C9443F; --ui-shadow:0 1px 2px rgba(16,48,58,.07),0 4px 14px rgba(16,48,58,.07); --ui-font-display:'Bricolage Grotesque',system-ui,sans-serif; --ui-font-text:'Figtree',system-ui,sans-serif}
@media (prefers-color-scheme: dark){ html.wgg-new:not([data-wgg-theme="light"]) .ui-tk{--ui-bg:#0E1824; --ui-surface:#16243A; --ui-surface-2:#1D2F49; --ui-line:rgba(255,255,255,.16); --ui-text:#EEF3F8; --ui-text-soft:#B9C9DA; --ui-text-faint:#9AB0C7; --ui-primary:#6FB2FF; --ui-on-primary:#06162A; --ui-primary-soft:rgba(111,178,255,.18); --ui-green:#7BD88F; --ui-warn:#FF8A7A; --ui-shadow:none;} }
html.wgg-new[data-wgg-theme="dark"] .ui-tk{--ui-bg:#0E1824; --ui-surface:#16243A; --ui-surface-2:#1D2F49; --ui-line:rgba(255,255,255,.16); --ui-text:#EEF3F8; --ui-text-soft:#B9C9DA; --ui-text-faint:#9AB0C7; --ui-primary:#6FB2FF; --ui-on-primary:#06162A; --ui-primary-soft:rgba(111,178,255,.18); --ui-green:#7BD88F; --ui-warn:#FF8A7A; --ui-shadow:none;}
html.wgg-new .ui-skin{--ink:var(--ui-bg); --ink-2:var(--ui-surface); --ink-3:var(--ui-surface-2); --sand:var(--ui-text); --sand-dim:var(--ui-text-soft); --sand-faint:var(--ui-text-faint);
  --coral:var(--ui-primary); --aqua:var(--ui-primary); --sun:var(--ui-primary); --good:var(--ui-green); --warn:var(--ui-warn); --line:var(--ui-line); --line-strong:var(--ui-line);
  --bg:var(--ui-bg); --card:var(--ui-surface); color-scheme:normal}
html.wgg-new .ui-skin :where(*:not(svg):not(svg *):not(canvas):not(.leaflet-container *):not(.podium-stage *)){font-family:var(--ui-font-text) !important;letter-spacing:normal}
html.wgg-new .ui-skin :is(h1,h2,h3,h4,.wg-logo-title){font-family:var(--ui-font-display) !important}
html.wgg-new .ui-skin :is(.status.good,.good){color:var(--ui-green) !important}
html.wgg-new .ui-skin :is(.status.bad,.bad){color:var(--ui-warn) !important}
html.wgg-new body.ui.ui-pg{background:var(--ui-bg) !important;color:var(--ui-text)}
html.wgg-new body.ui-pg main h1{font:800 32px/1.15 var(--ui-font-display) !important;color:var(--ui-text) !important;text-wrap:balance}
html.wgg-new body.ui-pg main h2{font:700 21px/1.25 var(--ui-font-display) !important;color:var(--ui-text) !important}
html.wgg-new body.ui-pg main :is(p,li){line-height:1.6}
html.wgg-new body.ui-pg :is(.eyebrow,.about-eyebrow){color:var(--ui-primary) !important;font:700 12px var(--ui-font-text) !important;letter-spacing:.06em !important;text-transform:uppercase}
html.wgg-new body.ui-pg main a:not([class]):not([style*="background"]){color:var(--ui-primary)}
html.wgg-new body.ui-pg :is(.card,.box,.gate){background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:20px !important;box-shadow:var(--ui-shadow)}
html.wgg-new body.ui-pg .card.pick{background:var(--ui-surface-2) !important}
html.wgg-new body.ui-pg .btn:not(.secondary),html.wgg-new body.ui-pg a.btn:not(.secondary){background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;border:0 !important;border-radius:10px !important;font:700 15px var(--ui-font-text) !important;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
html.wgg-new body.ui-pg .btn.secondary,html.wgg-new body.ui-pg .quiet{background:transparent !important;border:1.5px solid var(--ui-primary) !important;color:var(--ui-primary) !important;border-radius:10px !important;font:700 15px var(--ui-font-text) !important}
html.wgg-new body.ui-pg main input:not([type=checkbox]):not([type=radio]),html.wgg-new body.ui-pg main select,html.wgg-new body.ui-pg main textarea{background:var(--ui-surface-2) !important;border:1px solid var(--ui-line) !important;border-radius:10px !important;color:var(--ui-text) !important;font:600 15px var(--ui-font-text) !important}
html.wgg-new body.ui-pg main :is(input,select,textarea):focus{outline:2px solid var(--ui-primary);outline-offset:1px}
html.wgg-new body.ui-pg select option{color:#0A1A2B;background:#fff}
html.wgg-new body.ui-pg :is(.meta,.sub,.dim,.note,.lede,.lead,.intro,.fine){color:var(--ui-text-soft) !important}
html.wgg-new body.ui-pg .row{border-color:var(--ui-line) !important}
html.wgg-new body.ui-pg .role{background:var(--ui-primary-soft) !important;color:var(--ui-primary) !important;border-radius:999px}
html.wgg-new body.ui-pg details.faq-item,html.wgg-new body.ui-pg .compat-fold{background:var(--ui-surface);border:1px solid var(--ui-line) !important;border-radius:16px;padding:4px 14px}
html.wgg-new body.ui-pg :is(details.faq-item summary,.compat-fold summary)::before{color:var(--ui-primary) !important}
html.wgg-new body.ui-pg .compat-chip{background:var(--ui-surface-2) !important;border:0 !important;border-radius:999px !important;color:var(--ui-text) !important}
html.wgg-new body.ui-pg footer{color:var(--ui-text-soft) !important;border-color:var(--ui-line) !important}
html.wgg-new body.ui-pg footer a{color:var(--ui-primary) !important}
html.wgg-new body.ui-pg .sponsor{background:var(--ui-surface-2) !important;border-radius:14px !important}
html.wgg-new body.ui-pg input#code{letter-spacing:.3em !important;font:800 26px var(--ui-font-display) !important;text-align:center}
html.wgg-new .ui-pnl :is(#wg-profile-panel,#wg-login-panel,.modal-panel-inner,.wg-sheet){background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:22px !important;color:var(--ui-text)}
html.wgg-new .modal-panel.ui-pnl,html.wgg-new #wg-about-panel.ui-pnl,html.wgg-new #wg-feedback-panel.ui-pnl,html.wgg-new #wg-public-profile-panel.ui-pnl,html.wgg-new #wg-quiver-stats-panel.ui-pnl{background:var(--ui-surface) !important;color:var(--ui-text);border-color:var(--ui-line) !important}
html.wgg-new .ui-pnl :is(.wg-btn-primary,.modal-cta,.cta,.btn-primary,.submit-btn){background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;border:0 !important;border-radius:10px !important;font-weight:700 !important}
html.wgg-new .ui-pnl :is(.wg-btn-secondary){background:transparent !important;border:1.5px solid var(--ui-primary) !important;color:var(--ui-primary) !important;border-radius:10px !important;font-weight:700 !important}
html.wgg-new .ui-pnl input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),html.wgg-new .ui-pnl select,html.wgg-new .ui-pnl textarea{background:var(--ui-surface-2) !important;border:1px solid var(--ui-line) !important;border-radius:10px !important;color:var(--ui-text) !important}
html.wgg-new .ui-pnl select option{color:#0A1A2B;background:#fff}
html.wgg-new .ui-pnl :is(.wg-gender-btn,.wg-wt-btn,.wg-theme-btn,.wg-offer-pick,.wg-fb-type-tab,.wg-ptab,.wg-ctab,.wg-qs-section-tab){border:1.5px solid var(--ui-line) !important;background:var(--ui-surface) !important;color:var(--ui-text) !important;border-radius:10px !important;font-weight:700 !important}
html.wgg-new .ui-pnl :is(.wg-gender-btn.wg-gender-active,.wg-wt-btn.wg-wt-on,.wg-theme-btn.wg-theme-active,.wg-offer-pick.on,.wg-fb-type-tab.active,.wg-fb-type-tab.wg-active,.wg-ptab.active,.wg-ptab.wg-active,.wg-ctab.active,.wg-ctab.wg-active,.wg-qs-section-tab.active){background:var(--ui-primary) !important;border-color:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new .ui-pnl .wg-qs-tab{text-transform:none !important;font-weight:700 !important}
html.wgg-new .ui-pnl .wg-qs-tab.active{color:var(--ui-primary) !important;border-bottom-color:var(--ui-primary) !important}
html.wgg-new .ui-pnl :is(label,.wg-field>span:first-child,.wg-field>label){color:var(--ui-text-soft)}
/* Nov 8, night -- Benoit, screenshot of the About panel's two empty blue buttons: the
   link colour (blue) also hit the buttons made of links, blue text on blue. Plain
   links only now; link-buttons keep their own text colour. */
html.wgg-new .ui-pnl a:not([class]):not([style*="background"]):not(.wg-applybox-go a){color:var(--ui-primary)}
html.wgg-new .ui-skin .wg-applybox-go a{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;border-radius:10px !important}
html.wgg-new .ui-skin .wg-applybox-go a:hover{background:var(--ui-text) !important;color:var(--ui-bg) !important}
html.wgg-new #wg-header.ui-hd{--ui-bg:#0E1824; --ui-surface:#16243A; --ui-surface-2:#1D2F49; --ui-line:rgba(255,255,255,.16); --ui-text:#EEF3F8; --ui-text-soft:#B9C9DA; --ui-text-faint:#9AB0C7; --ui-primary:#6FB2FF; --ui-on-primary:#06162A; --ui-primary-soft:rgba(111,178,255,.18); --ui-green:#7BD88F; --ui-warn:#FF8A7A; --ui-shadow:none; background:rgba(14,24,36,.94) !important;border-bottom:1px solid rgba(255,255,255,.10) !important}
html.wgg-new #wg-header.ui-hd #wg-nav a,html.wgg-new #wg-header.ui-hd #wg-nav button{color:var(--ui-text-soft);font-weight:600 !important;font-size:13px !important}
html.wgg-new #wg-header.ui-hd #wg-nav a:hover,html.wgg-new #wg-header.ui-hd #wg-nav button:hover{color:var(--ui-text)}
html.wgg-new #wg-header.ui-hd #wg-nav a.wg-active{color:var(--ui-primary) !important}
html.wgg-new #wg-header.ui-hd #wg-nav .wg-cta{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;border-radius:10px !important;font-weight:700 !important}
html.wgg-new #wg-header.ui-hd #wg-nav .wg-appstore-badge{border:1.5px solid rgba(255,255,255,.22) !important;border-radius:10px !important;color:var(--ui-text) !important}
html.wgg-new #wg-header.ui-hd #wg-nav .wg-appstore-badge:hover{border-color:var(--ui-primary) !important;color:var(--ui-primary) !important}
html.wgg-new #wg-header.ui-hd :is(#wg-login-btn,#wg-login-btn-bar){border-radius:10px !important;font-weight:700 !important}
html.wgg-new #wg-header.ui-hd #wg-login-btn-bar:not(.wg-signed-in){background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new #wg-header.ui-hd :is(#wg-login-btn,#wg-login-btn-bar).wg-signed-in{border:1.5px solid var(--ui-primary) !important;color:var(--ui-primary) !important;background:transparent !important}
html.wgg-new #wg-header.ui-hd .wg-logo-sub{font:600 11px var(--ui-font-text) !important;letter-spacing:.08em !important}
html.wgg-new #wg-header.ui-hd .wg-notif-bell-btn{color:var(--ui-primary) !important}
html.wgg-new #wg-header.ui-hd .wg-notif-badge{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new #wg-header.ui-hd .wg-notif-dropdown{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:16px !important}
html.wgg-new #wg-header.ui-hd .wg-notif-item.wg-unread{background:var(--ui-primary-soft) !important}
html.wgg-new #wg-header.ui-hd a.wg-notif-go:hover{background:var(--ui-surface-2) !important}
html.wgg-new #wg-header.ui-hd .wg-notif-clear{color:var(--ui-primary) !important}
html.wgg-new #dashboard.ui-skin,html.wgg-new #showoff.ui-skin,html.wgg-new #about.ui-skin{background:var(--ui-bg) !important;color:var(--ui-text)}
html.wgg-new #dashboard.ui-skin :is(.spot-name,.dash-title,h2,h3){font-family:var(--ui-font-display) !important;color:var(--ui-text)}
html.wgg-new #dashboard.ui-skin :is(.card,.dash-card,.panel-card,.community-card,.forecast-card,.info-card,.good-to-know,.season-card,.rose-card){background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:20px !important;box-shadow:var(--ui-shadow)}
html.wgg-new #dashboard.ui-skin :is(.icon-btn,.action-btn,.dash-btn){background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;color:var(--ui-text) !important;border-radius:10px !important}
html.wgg-new #dashboard.ui-skin :is(.icon-btn.active,.icon-btn.on,.fav-btn.active){background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;border-color:var(--ui-primary) !important}
html.wgg-new #dashboard.ui-skin table{font-variant-numeric:tabular-nums}
/* Nov 8, night -- Benoit: "i would prefer the filters across, and the ranking below
   the podium. same for spot kited." One column the width of the page: the filters
   in one row across, the podium, the rows under it. */
html.wgg-new body.ui.ui-ss #rankings-body:not(#ui-none):not(#ui-none2){max-width:1232px !important}
html.wgg-new body.ui.ui-ss #rankings-body .rankings-filters:not(#ui-none):not(#ui-none2){display:grid !important;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;width:100% !important;max-width:none !important;margin:12px 0 !important;padding:0 !important}
html.wgg-new body.ui.ui-ss #rankings-body .rankings-filters>*{min-width:0;width:100% !important;max-width:none !important;margin:0 !important;box-sizing:border-box}
html.wgg-new body.ui.ui-ss #rankings-body .rankings-filters .fdd-trigger{width:100%;box-sizing:border-box}

/* the map page: the spot panel's own orange tints become the blue (warnings take the warning colour),
   its title faces become Bricolage and its typewriter labels Figtree (Nov 8, night) */
html.wgg-new .ui-skin .watch-status-line{border:1px solid var(--coral,var(--ui-primary)) !important}
html.wgg-new .ui-skin .wg-post-pill-need{background:color-mix(in srgb,var(--ui-primary) 16%,transparent) !important}
html.wgg-new .ui-skin .wg-post-row-need{background:color-mix(in srgb,var(--ui-primary) 7%,transparent) !important}
html.wgg-new .ui-skin .wg-post-tag-need{background:color-mix(in srgb,var(--ui-primary) 16%,transparent) !important}
html.wgg-new .ui-skin .sd-chip.sel{background:color-mix(in srgb,var(--ui-primary) 14%,transparent) !important}
html.wgg-new .ui-skin .tide-area{fill:color-mix(in srgb,var(--ui-primary) 12%,transparent) !important}
html.wgg-new .ui-skin .alert-banner{background:color-mix(in srgb,var(--ui-warn) 10%,transparent) !important;border:1px solid color-mix(in srgb,var(--ui-warn) 35%,transparent) !important}
html.wgg-new .ui-skin .alert-note{border-top:1px solid color-mix(in srgb,var(--ui-warn) 25%,transparent) !important}
html.wgg-new .ui-skin .fg-cell.fg-now-col{background:color-mix(in srgb,var(--ui-primary) 8%,transparent) !important}
html.wgg-new .ui-skin .spot-marker span{box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-primary) 22%,transparent) !important}
html.wgg-new .ui-skin .wind-arrow-anim svg{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--ui-primary) 65%,transparent)) !important}
html.wgg-new .ui-skin .spot-cluster .cluster-inner{box-shadow:0 0 0 6px color-mix(in srgb,var(--ui-primary) 16%,transparent) !important}
html.wgg-new .ui-skin .spot-cluster-large .cluster-inner{box-shadow:0 0 0 8px color-mix(in srgb,var(--ui-primary) 20%,transparent) !important}
html.wgg-new .ui-skin .invite-btn{background:color-mix(in srgb,var(--ui-primary) 8%,transparent) !important}
html.wgg-new .ui-skin .invite-btn:hover{background:color-mix(in srgb,var(--ui-primary) 16%,transparent) !important}
html.wgg-new .ui-skin .cta-btn-secondary:hover{background:color-mix(in srgb,var(--ui-primary) 8%,transparent) !important}
html.wgg-new .ui-skin .rt-hint{background:color-mix(in srgb,var(--ui-primary) 8%,transparent) !important;border:1px solid color-mix(in srgb,var(--ui-primary) 35%,transparent) !important}
html.wgg-new .ui-skin .rt-btn.rt-btn-primary{border-color:color-mix(in srgb,var(--ui-primary) 55%,transparent) !important}
html.wgg-new .ui-skin .wg-locked-cta{background:var(--ui-primary) !important}
html.wgg-new .ui-skin .wg-tease-cta{background:var(--ui-primary) !important}
html.wgg-new .ui-skin .spot-stats-btn{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 22%,transparent) !important}
html.wgg-new .ui-skin .exp-st-current,html.wgg-new .ui-skin .exp-st-today,html.wgg-new .ui-skin .exp-st-next{background:color-mix(in srgb,var(--ui-primary) 16%,transparent) !important}
html.wgg-new .ui-skin .exp-prog b.here{box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-primary) 30%,transparent) !important}
html.wgg-new .ui-skin .exp-crew-x:hover{background:color-mix(in srgb,var(--ui-primary) 10%,transparent) !important}
html.wgg-new .ui-skin .exp-btn{background:color-mix(in srgb,var(--ui-primary) 12%,transparent) !important}
html.wgg-new .ui-skin .exp-chip-mine{background:color-mix(in srgb,var(--ui-primary) 18%,transparent) !important}
html.wgg-new .ui-skin .exp-st-rejected{background:color-mix(in srgb,var(--ui-primary) 12%,transparent) !important}
html.wgg-new .ui-skin .firing-chip.on{background:color-mix(in srgb,var(--ui-primary) 14%,transparent) !important}
html.wgg-new .ui-skin h1,html.wgg-new .ui-skin h2,html.wgg-new .ui-skin h3,html.wgg-new .ui-skin .display,html.wgg-new .ui-skin .logo,html.wgg-new .ui-skin #wg-welcome h3,html.wgg-new .ui-skin .wg-post-h1,html.wgg-new .ui-skin .wg-post-h2,html.wgg-new .ui-skin .wg-post-card-title,html.wgg-new .ui-skin .wg-post-cta,html.wgg-new .ui-skin .wg-post-pair-title,html.wgg-new .ui-skin .community-card-title,html.wgg-new .ui-skin .downwinder-card-top b,html.wgg-new .ui-skin .downwinder-live-badge,html.wgg-new .ui-skin .wind-rose-hole .wr-value,html.wgg-new .ui-skin .tide-state,html.wgg-new .ui-skin .fg-chip,html.wgg-new .ui-skin .leaflet-popup-content b,html.wgg-new .ui-skin .spot-tooltip,html.wgg-new .ui-skin .mobile-back-btn,html.wgg-new .ui-skin .compare-card h4,html.wgg-new .ui-skin .firing-knots,html.wgg-new .ui-skin .chat-header-title,html.wgg-new .ui-skin .rode-title,html.wgg-new .ui-skin .st-title,html.wgg-new .ui-skin .st-val,html.wgg-new .ui-skin .exp-h,html.wgg-new .ui-skin .exp-card h4,html.wgg-new .ui-skin .exp-stat3 b,html.wgg-new .ui-skin .exp-crew-big,html.wgg-new .ui-skin .exp-crew-help b,html.wgg-new .ui-skin .exp-share h4{font-family:var(--ui-font-display) !important;font-weight:700}
html.wgg-new .ui-skin .mono,html.wgg-new .ui-skin .logo .sub,html.wgg-new .ui-skin .map-add-spot-link,html.wgg-new .ui-skin .search-section-label,html.wgg-new .ui-skin #wg-welcome .wgw-label,html.wgg-new .ui-skin .wg-post-stat-v,html.wgg-new .ui-skin .wg-post-chip,html.wgg-new .ui-skin .wg-post-note b,html.wgg-new .ui-skin .dash-label,html.wgg-new .ui-skin .icon-btn,html.wgg-new .ui-skin .unit-btn,html.wgg-new .ui-skin .map-theme-btn,html.wgg-new .ui-skin .kited-chip,html.wgg-new .ui-skin .seasonality-summary,html.wgg-new .ui-skin .seasonality-label,html.wgg-new .ui-skin .seasonality-subhead,html.wgg-new .ui-skin .seasonality-legend,html.wgg-new .ui-skin .downwinder-meta-row,html.wgg-new .ui-skin .riders-here-count,html.wgg-new .ui-skin .monthly-conditions-table th,html.wgg-new .ui-skin .monthly-conditions-table td.mc-value,html.wgg-new .ui-skin .wind-rose-hole .wr-label,html.wgg-new .ui-skin .wind-rose-labels,html.wgg-new .ui-skin .wind-rose-legend,html.wgg-new .ui-skin .live-compare-row b,html.wgg-new .ui-skin .live-compare-source,html.wgg-new .ui-skin .mini-wind-live,html.wgg-new .ui-skin .tide-extreme-label,html.wgg-new .ui-skin .tide-now-badge-text,html.wgg-new .ui-skin .tide-axis-label,html.wgg-new .ui-skin .sun-times,html.wgg-new .ui-skin .forecast-disclaimer,html.wgg-new .ui-skin .fg-label,html.wgg-new .ui-skin .fg-daycell,html.wgg-new .ui-skin .fg-hour,html.wgg-new .ui-skin .fg-dir span,html.wgg-new .ui-skin .fg-temp,html.wgg-new .ui-skin .fg-rain,html.wgg-new .ui-skin .fg-wave,html.wgg-new .ui-skin .fg-kite,html.wgg-new .ui-skin .legend-item,html.wgg-new .ui-skin .live-rider-marker-multi span,html.wgg-new .ui-skin .spot-cluster .cluster-inner,html.wgg-new .ui-skin .count-badge,html.wgg-new .ui-skin .filter-btn,html.wgg-new .ui-skin .fdd-trigger,html.wgg-new .ui-skin .card .row,html.wgg-new .ui-skin .firing-rank,html.wgg-new .ui-skin .modal-panel .about-eyebrow,html.wgg-new .ui-skin .spots-radius-label span:last-child,html.wgg-new .ui-skin .compat-row b,html.wgg-new .ui-skin .my-alert-threshold,html.wgg-new .ui-skin .spot-form-section-title,html.wgg-new .ui-skin .chat-ai-badge,html.wgg-new .ui-skin #roadtrip-suggestions .firing-info span .rt-drive,html.wgg-new .ui-skin .rt-return-row .rt-drive,html.wgg-new .ui-skin .rt-btn,html.wgg-new .ui-skin .firing-knots .rt-windy,html.wgg-new .ui-skin .wg-course-when{font-family:var(--ui-font-text) !important;font-weight:600;font-variant-numeric:tabular-nums}
html.wgg-new #dashboard.ui-skin :is(h2,h3){font-weight:700 !important}
html.wgg-new #wg-header.ui-hd #wg-login-btn{padding:7px 14px !important}
html.wgg-new body.ui-pg main h2{text-transform:none !important;letter-spacing:normal !important}
html.wgg-new .ui-skin#email-consent-card,html.wgg-new .ui-skin#cookie-banner,html.wgg-new .ui-skin#wg-welcome{background:var(--ui-surface) !important;color:var(--ui-text) !important;border:1px solid var(--ui-line) !important}
/* the panels' own orange tints (shared-header.js) */
html.wgg-new .ui-skin .wg-notif-item.wg-unread{background:color-mix(in srgb,var(--ui-primary) 7%,transparent) !important}
html.wgg-new .ui-skin a.wg-notif-go:hover{background:color-mix(in srgb,var(--ui-primary) 12%,transparent) !important}
html.wgg-new .ui-skin #wg-profile-panel .wg-btn:hover,html.wgg-new .ui-skin #wg-tab-organizer .wg-btn:hover{background:var(--sun,var(--ui-primary)) !important}
html.wgg-new .ui-skin #wg-profile-panel .wg-wt-box{border:1px solid color-mix(in srgb,var(--ui-primary) 45%,transparent) !important;background:linear-gradient(180deg,color-mix(in srgb,var(--ui-primary) 6%,transparent),color-mix(in srgb,var(--ui-primary) 0%,transparent)) !important}
html.wgg-new .ui-pnl .wg-ptab{text-transform:none !important;letter-spacing:normal !important;font-size:14px !important}
/* the forecast's wind and kite-size chips: dark numbers on the wind colours, as before */
html.wgg-new .ui-skin .fg-chip:not([style*="sand-dim"]),html.wgg-new .ui-skin .fg-kite:not([style*="sand-dim"]){color:#0A1A2B !important}
/* Nov 8, night -- Benoit: "why is best jump not in a different color anymore?" The
   bars and the best one had become the same blue (--riding and --coral both point
   at it). As in the Sessions mock-up: the jumps in soft blue, the best in gold. */
html.wgg-new body.ui-ss .jump-chart .jc-bar{background:color-mix(in srgb,var(--ui-primary) 55%,transparent) !important}
html.wgg-new body.ui-ss .jump-chart .jc-bar.top{background:var(--ui-yellow) !important}
html.wgg-new body.ui-ss .jump-chart .jc-bar.top span{color:var(--ui-yellow) !important;font-weight:800}
/* Same cause: jumps to the left and to the right were both blue; the right side takes lavender. */
html.wgg-new body.ui-ss .jump-lr .lr-l{background:var(--ui-blue) !important;color:var(--ui-on-tag) !important}
html.wgg-new body.ui-ss .jump-lr .lr-r{background:var(--ui-lavender) !important;color:var(--ui-on-tag) !important}
/* Nov 9, 2026 -- the same frame for every block of My Sessions' and Riders' panels
   (the search row and the groups switch were still 720 px in the middle). */
html.wgg-new body.ui.ui-ss #riders-panel>div:not(.rankings-filter-bar):not(#ui-none),html.wgg-new body.ui.ui-ss #records-panel>div:not(.rankings-filter-bar):not(#ui-none),html.wgg-new body.ui.ui-ss #progress-panel>div:not(.rankings-filter-bar):not(#ui-none),html.wgg-new body.ui.ui-ss #spotmap-panel>div:not(.rankings-filter-bar):not(#ui-none){width:calc(100% - 32px) !important;max-width:1232px !important;margin-left:max(16px,calc(50% - 616px)) !important;margin-right:0 !important;padding-left:0 !important;padding-right:0 !important;box-sizing:border-box}
html.wgg-new body.ui.ui-ss #riders-panel :is(.gr-switch,#riders-tabs):not(#ui-none){margin-left:0 !important}
/* Nov 9, 2026 -- public and private groups (mock-up 2026-11-09-public-and-private-groups) */
html.wgg-new body.ui-ss .gr-vis{background:var(--ui-surface-2) !important;border:0 !important;color:var(--ui-text-soft) !important}
html.wgg-new body.ui-ss .gr-vis.pub{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new body.ui-ss .gr-wait{background:var(--ui-yellow-soft) !important;color:var(--ui-yellow) !important}
html.wgg-new body.ui-ss .gr-lock{background:var(--ui-surface-2) !important;border:1px dashed var(--ui-line) !important;color:var(--ui-text-soft) !important;border-radius:14px !important}
html.wgg-new body.ui-ss .gr-hint{color:var(--ui-text-soft) !important}
/* Nov 9, 2026 -- Benoit: "the expand part is not lined up, both on community and my
   sessions". The drawn icon and the word on one centre line. */
html.wgg-new body.ui-ss .card-map-expand{display:inline-flex !important;align-items:center !important;gap:6px;line-height:1 !important;padding:7px 11px !important}
html.wgg-new body.ui-ss .card-map-expand::before{vertical-align:middle !important;margin:0 !important;align-self:center}
html.wgg-new body.ui.ui-ss .wg-strip-h a{color:var(--ui-primary) !important;font-weight:700}
html.wgg-new body.ui.ui-ss .wg-strip-h b{font:700 16px var(--ui-font-display) !important;color:var(--ui-text)}
/* =====================================================================
   Nov 9, 2026 -- Benoit: "now lets finish the other pages with the new design".
   The pages the site's server makes (FAQ, watch compatibility, get the app, a
   business page) and the static spot and country pages. The same parts as the
   small pages (body.ui-pg): fields, cards, blue buttons, Bricolage titles.
   The two mode colours on watch compatibility (Space / Earth) stay: they mean something.
   ===================================================================== */
html.wgg-new body.ui-pg{--raised:var(--ui-surface);--line-strong:var(--ui-line)}
html.wgg-new body.ui-pg header.site,html.wgg-new body.ui-pg body>header{background:var(--ui-surface) !important;border-color:var(--ui-line) !important}
html.wgg-new body.ui-pg header:not(#wg-header) a{color:var(--ui-text) !important;font:800 16px var(--ui-font-display) !important}
html.wgg-new body.ui-pg .crumbs a,html.wgg-new body.ui-pg p.lede a,html.wgg-new body.ui-pg .loc a,html.wgg-new body.ui-pg .qa .a a,html.wgg-new body.ui-pg .callout a,html.wgg-new body.ui-pg .modeblurb a,html.wgg-new body.ui-pg .missing a,html.wgg-new body.ui-pg .nope a,html.wgg-new body.ui-pg .meanwhile a,html.wgg-new body.ui-pg .combo .sub a,html.wgg-new body.ui-pg .steps a:not(.store):not(.cta){color:var(--ui-primary) !important}
html.wgg-new body.ui-pg h2.group,html.wgg-new body.ui-pg h3.brand,html.wgg-new body.ui-pg .combo h2,html.wgg-new body.ui-pg .decider h2{font-family:var(--ui-font-display) !important;color:var(--ui-text) !important;text-transform:none !important;letter-spacing:normal !important}
/* cards */
html.wgg-new body.ui-pg .qa,html.wgg-new body.ui-pg .combo,html.wgg-new body.ui-pg .decider,html.wgg-new body.ui-pg .applybox>div,html.wgg-new body.ui-pg .pro-trade,html.wgg-new body.ui-pg .fact,html.wgg-new body.ui-pg .similar-list a,html.wgg-new body.ui-pg .spot-card,html.wgg-new body.ui-pg .callout,html.wgg-new body.ui-pg .meanwhile,html.wgg-new body.ui-pg details.more{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:16px !important;box-shadow:var(--ui-shadow);color:var(--ui-text)}
html.wgg-new body.ui-pg .qa{padding:12px 16px !important;margin-bottom:10px !important}
html.wgg-new body.ui-pg .qa h3,html.wgg-new body.ui-pg .pro-trade h3,html.wgg-new body.ui-pg .applybox h3{font-family:var(--ui-font-display) !important;color:var(--ui-text) !important}
html.wgg-new body.ui-pg .similar-list a:hover,html.wgg-new body.ui-pg .spot-card:hover,html.wgg-new body.ui-pg .applybox>div:hover{border-color:var(--ui-primary) !important}
html.wgg-new body.ui-pg .fact span,html.wgg-new body.ui-pg .similar h2,html.wgg-new body.ui-pg .tally,html.wgg-new body.ui-pg .applybox .k{color:var(--ui-text-faint) !important;font:700 11.5px var(--ui-font-text) !important;letter-spacing:.05em}
html.wgg-new body.ui-pg .fact b{color:var(--ui-text) !important;font:700 16px var(--ui-font-display) !important}
/* buttons: one blue primary, outlined secondary */
html.wgg-new body.ui-pg .cta,html.wgg-new body.ui-pg .pro .btn:not(.ghost),html.wgg-new body.ui-pg .betabtn,html.wgg-new body.ui-pg .pro-cta a:not(.ghost){background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;border:0 !important;border-radius:10px !important;font:700 15px var(--ui-font-text) !important}
html.wgg-new body.ui-pg .pro .btn.ghost,html.wgg-new body.ui-pg .applybox a,html.wgg-new body.ui-pg .store:not(.store-badge){background:transparent !important;color:var(--ui-primary) !important;border:1.5px solid var(--ui-primary) !important;border-radius:10px !important;font-weight:700 !important}
/* the filter box and jump chips */
html.wgg-new body.ui-pg .filter{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:12px !important;color:var(--ui-text) !important;font:600 15px var(--ui-font-text) !important}
html.wgg-new body.ui-pg .jump a{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;border-radius:999px !important;color:var(--ui-text) !important;font-weight:700 !important}
html.wgg-new body.ui-pg .jump a:hover{border-color:var(--ui-primary) !important;color:var(--ui-primary) !important}
html.wgg-new body.ui-pg .chip{background:var(--ui-surface) !important;color:var(--ui-text) !important;border-radius:999px !important;border-top-color:var(--ui-line) !important;border-right-color:var(--ui-line) !important;border-bottom-color:var(--ui-line) !important}
html.wgg-new body.ui-pg .mode{background:var(--ui-surface) !important;border-top-color:var(--ui-line) !important;border-right-color:var(--ui-line) !important;border-bottom-color:var(--ui-line) !important;border-radius:16px !important}
/* get the app: the phone and watch picker, the numbered steps */
html.wgg-new body.ui-pg .opt{background:var(--ui-surface) !important;border:1.5px solid var(--ui-line) !important;border-radius:12px !important;color:var(--ui-text) !important;font-weight:700 !important}
html.wgg-new body.ui-pg .opt[aria-pressed="true"]{background:var(--ui-primary) !important;border-color:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new body.ui-pg .opt[aria-pressed="true"] small{color:var(--ui-on-primary) !important}
html.wgg-new body.ui-pg .picker legend{color:var(--ui-text-faint) !important;font:700 11.5px var(--ui-font-text) !important;letter-spacing:.05em;text-transform:uppercase}
html.wgg-new body.ui-pg .steps>li::before{background:var(--ui-primary) !important;border:0 !important;color:var(--ui-on-primary) !important;font-family:var(--ui-font-display) !important}
html.wgg-new body.ui-pg .steps .detail,html.wgg-new body.ui-pg .combo .sub,html.wgg-new body.ui-pg .moreintro,html.wgg-new body.ui-pg .pro .lede,html.wgg-new body.ui-pg .pro-bio,html.wgg-new body.ui-pg .pro-svc-desc,html.wgg-new body.ui-pg .pro-person-meta,html.wgg-new body.ui-pg .pro-spot-meta{color:var(--ui-text-soft) !important}
html.wgg-new body.ui-pg .store .tag,html.wgg-new body.ui-pg .betatag{background:var(--ui-primary-soft) !important;color:var(--ui-primary) !important}
/* a business page and the spot page's "Schools & shops here" */
html.wgg-new body.ui-pg :is(.pro-services li,.pro-spots li,.pro-dates li,.pro-team li){border-color:var(--ui-line) !important}
html.wgg-new body.ui-pg .pro-svc-price,html.wgg-new body.ui-pg .pro-date-price{color:var(--ui-text) !important;font-weight:800}
html.wgg-new body.ui-pg .pro-base{background:var(--ui-primary-soft) !important;color:var(--ui-primary) !important;border-radius:999px}
html.wgg-new body.ui-pg .similar .fact b{font:600 15px/1.45 var(--ui-font-text) !important}
/* Nov 10, 2026 -- Benoit: "the tabs are hard to read" (Your business). The tab row
   and the profile chips were drawn with the old orange-on-dark inline colours. */
html.wgg-new body.ui #wg-org-subtabs{background:var(--ui-surface-2) !important;border:1px solid var(--ui-line) !important}
html.wgg-new body.ui .wg-org-sub{background:transparent !important;color:var(--ui-text-soft) !important;font-weight:600 !important}
html.wgg-new body.ui .wg-org-sub.on{background:var(--ui-primary) !important;color:var(--ui-on-primary) !important;font-weight:700 !important}
html.wgg-new body.ui .wg-org-pick{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;color:var(--ui-text-soft) !important}
html.wgg-new body.ui .wg-org-pick.on{background:var(--ui-primary) !important;border-color:var(--ui-primary) !important;color:var(--ui-on-primary) !important;font-weight:700}
html.wgg-new body.ui .wg-org-pick span{opacity:.85 !important}
html.wgg-new body.ui .wg-org-add{border:1px dashed var(--ui-primary) !important;color:var(--ui-primary) !important;background:transparent !important;font-weight:600}
html.wgg-new body.ui #wg-live-strip{background:var(--ui-primary-soft) !important;color:var(--ui-primary) !important}
html.wgg-new body.ui .wg-pp-private{background:var(--ui-surface-2)}

/* Nov 10, 2026 -- Benoit: "yes for the blue color" / "yes correct the website".
   PB badges are blue in the new design, the same gradient as the iPhone
   (SessionBadgesRow: #6FB2FF -> #2F6FB8, white text). No orange on blue. */
html.wgg-new .wg-pb{background:linear-gradient(135deg,#6FB2FF,#2F6FB8) !important;color:#fff !important}
/* Nov 10, 2026 -- Benoit: "Plan & Ride overlap the header". On its own page
   (plan-and-ride.html; on the home page it is a drawer, html.wg-fixed-app) the
   title started at 60px under the 64px fixed header. It now starts below it. */
html.wgg-new:not(.wg-fixed-app) #downwinders.ui-pr{margin-top:calc(var(--header-h, 64px) + 18px) !important;padding-top:6px !important}

/* ── The map page (Nov 10, 2026; mock-up 2026-11-10-map-landing-new-design,
   Benoit: "2 and 3 ok"). .map-wrap gets .ui-tk .ui-map (wgg-ui.js), so the
   colours follow the Look. Spots and clusters blue, live riders green with a
   soft pulse, the search box and the buttons under the map in the panel
   colours. The map itself turns dark in dark (body.theme-dark, set by the
   Look). Markers keep their true colours: the old dark map inverted them. */
html.wgg-new body.theme-dark .ui-map .leaflet-marker-pane{filter:none !important}
html.wgg-new .ui-map .leaflet-container{background:var(--ui-bg)}
html.wgg-new .ui-map .spot-marker:not([class*="wind-"]) span{background:var(--ui-primary) !important;border:2px solid var(--ui-surface) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-primary) 24%,transparent) !important}
html.wgg-new .ui-map .spot-marker.active:not([class*="wind-"]) span{box-shadow:0 0 0 6px color-mix(in srgb,var(--ui-primary) 34%,transparent) !important}
html.wgg-new .ui-map .spot-marker[class*="wind-"] span{border-color:var(--ui-surface) !important}
html.wgg-new .ui-map .spot-cluster .cluster-inner{background:var(--ui-primary) !important;border:2px solid var(--ui-surface) !important;color:var(--ui-on-primary) !important;font-family:var(--ui-font-text) !important;font-weight:700 !important;box-shadow:0 0 0 5px color-mix(in srgb,var(--ui-primary) 20%,transparent) !important}
html.wgg-new .ui-map .spot-cluster-medium .cluster-inner{box-shadow:0 0 0 6px color-mix(in srgb,var(--ui-primary) 22%,transparent) !important}
html.wgg-new .ui-map .spot-cluster-large .cluster-inner{box-shadow:0 0 0 7px color-mix(in srgb,var(--ui-primary) 24%,transparent) !important}
html.wgg-new .ui-map .live-rider-marker span{background:var(--ui-green) !important;border:2px solid var(--ui-surface) !important;color:var(--ui-surface) !important;font-family:var(--ui-font-text) !important;box-shadow:0 0 0 5px color-mix(in srgb,var(--ui-green) 32%,transparent) !important;animation:wgLivePulse 2.2s ease-out infinite}
@keyframes wgLivePulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ui-green) 45%,transparent)}70%{box-shadow:0 0 0 11px color-mix(in srgb,var(--ui-green) 0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ui-green) 0%,transparent)}}
@media (prefers-reduced-motion: reduce){html.wgg-new .ui-map .live-rider-marker span{animation:none}}
html.wgg-new .ui-map .map-search input{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;color:var(--ui-text) !important;font-family:var(--ui-font-text) !important;border-radius:12px !important;box-shadow:var(--ui-shadow)}
html.wgg-new .ui-map .map-search input::placeholder{color:var(--ui-text-faint) !important}
html.wgg-new .ui-map .map-search input:focus{border-color:var(--ui-primary) !important}
html.wgg-new .ui-map .search-results{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;color:var(--ui-text) !important;border-radius:12px !important}
html.wgg-new .ui-map .map-fav-toggle,html.wgg-new .ui-map .map-ride-fdd>summary{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;color:var(--ui-text) !important;font:700 13px var(--ui-font-text) !important;border-radius:999px !important;box-shadow:var(--ui-shadow)}
html.wgg-new .ui-map .map-fav-toggle[aria-pressed="true"]{background:var(--ui-primary) !important;border-color:var(--ui-primary) !important;color:var(--ui-on-primary) !important}
html.wgg-new .ui-map .map-ride-fdd .fdd-panel{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;color:var(--ui-text) !important}
html.wgg-new .ui-map .map-ride-fdd .fdd-k,html.wgg-new .ui-map .map-ride-fdd .chev{color:var(--ui-text-faint) !important}
html.wgg-new .ui-map .map-ride-fdd .fdd-val{color:var(--ui-text) !important}
html.wgg-new .ui-map .leaflet-control-zoom a{background:var(--ui-surface) !important;color:var(--ui-text) !important;border-color:var(--ui-line) !important}
html.wgg-new .ui-map .wind-color-legend{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;color:var(--ui-text) !important}
/* Profile › Map style: in the new design the map follows the Look */
html.wgg-new #wg-map-style-row{display:none !important}

/* The Look button (Benoit: "keep the icon next to the instagram one"). The
   header stays dark, so the button is drawn in the header's own colours. */
html.wgg-new #wg-look-wrap{display:inline-flex !important;position:relative;align-items:center}
html.wgg-new #wg-nav .wg-look-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;color:#EEF3F8;opacity:.85;cursor:pointer;width:auto}
html.wgg-new #wg-nav .wg-look-btn:hover,html.wgg-new #wg-nav .wg-look-btn[aria-expanded="true"]{opacity:1}
html.wgg-new #wg-nav .wg-look-word{display:none}
html.wgg-new .wg-look-menu{position:absolute;top:calc(100% + 12px);right:-8px;z-index:3300;min-width:190px;display:flex;flex-direction:column;gap:2px;padding:6px;background:#16243A;border:1px solid rgba(255,255,255,.16);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
html.wgg-new .wg-look-menu[hidden]{display:none !important}
html.wgg-new #wg-nav .wg-look-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px !important;border:0 !important;border-radius:8px;background:none;color:#EEF3F8 !important;font:600 13.5px var(--ui-font-text,system-ui) !important;text-align:left;cursor:pointer}
html.wgg-new #wg-nav .wg-look-menu button:hover{background:#1D2F49}
html.wgg-new #wg-nav .wg-look-menu button.on{background:rgba(111,178,255,.18);color:#6FB2FF !important}
@media (max-width:1080px){
  html.wgg-new #wg-look-wrap{display:flex !important;flex-direction:column;align-items:stretch;width:100%}
  html.wgg-new #wg-nav .wg-look-btn{width:100% !important;padding:16px 20px !important;border-bottom:1px solid rgba(255,255,255,.08) !important;opacity:1}
  html.wgg-new #wg-nav .wg-look-word{display:inline;color:#B9C9DA;font-size:15px}
  html.wgg-new .wg-look-menu{position:static;box-shadow:none;border-radius:0;border-width:0 0 1px 0;margin:0}
}
html.wgg-new.wg-compact #wg-look-wrap{display:flex !important;flex-direction:column;align-items:stretch;width:100%}
html.wgg-new.wg-compact #wg-nav .wg-look-btn{width:100% !important;padding:16px 20px !important;border-bottom:1px solid rgba(255,255,255,.08) !important;opacity:1}
html.wgg-new.wg-compact #wg-nav .wg-look-word{display:inline;color:#B9C9DA;font-size:15px}
html.wgg-new.wg-compact .wg-look-menu{position:static;box-shadow:none;border-radius:0;border-width:0 0 1px 0;margin:0}

/* Nov 13, 2026 -- the page waits for its new layout (wgg-ui.js, html.wg-lay):
   only the header shows until then, so nothing jumps. */
html.wgg-new.wg-lay body > :not(#wg-header):not(#wg-tabs2):not(script):not(style) { visibility: hidden !important; }

/* ── Nov 14, 2026 -- CARD A (mock-ups 2026-11-14-session-card-reshuffle and
   -session-card-a-tags; Benoit: "i like option A", "keeping everything on 1 line").
   The iPhone's card, the same on the site and in the Android app:
   name + spot | date, "your time · posted" -- the tag line (sport · mode · gear) --
   the map -- the numbers in one row -- the badges -- like · comment · share · device.
   Scoped to .session-card.card-a; the extra class outranks the ui-ss card rules. */
html.wgg-new body .session-card.card-a .card-header{display:flex !important;flex-wrap:nowrap !important;align-items:flex-start !important;gap:10px !important;padding:14px 14px 8px !important}
html.wgg-new body .session-card.card-a .card-avatar{width:36px;height:36px;font-size:12px}
html.wgg-new body .session-card.card-a .card-meta{flex:1 1 auto;min-width:0}
html.wgg-new body .session-card.card-a .card-user{font:700 14px var(--ui-font-text,inherit) !important}
html.wgg-new body .session-card.card-a .card-spot{font-size:12px !important}
html.wgg-new body .session-card.card-a .card-when{order:0 !important;margin:0 !important;flex:none !important;display:flex !important;flex-direction:column !important;align-items:flex-end !important;gap:1px !important;text-align:right;white-space:nowrap}
html.wgg-new body .session-card.card-a .card-time{font:600 12px var(--ui-font-text,inherit) !important;color:var(--ui-text,var(--sand)) !important}
html.wgg-new body .session-card.card-a .card-when-sub,html.wgg-new body .session-card.card-a .card-time-yours{font:500 11px var(--ui-font-text,inherit) !important;color:var(--ui-text-faint,var(--sand-dim)) !important}
html.wgg-new body .session-card.card-a .card-dur{font-size:12px;margin-top:2px}
/* the tag line: sport left, mode centre, gear right, one line */
html.wgg-new body .session-card.card-a .card-tagline{display:flex;align-items:center;gap:8px;padding:0 14px 10px}
html.wgg-new body .session-card.card-a .ctl-a,html.wgg-new body .session-card.card-a .ctl-c{flex:1 1 0;min-width:0;display:flex}
html.wgg-new body .session-card.card-a .ctl-b{flex:none;display:flex}
html.wgg-new body .session-card.card-a .ctl-c{justify-content:flex-end}
html.wgg-new body .session-card.card-a .card-tagline.ctl-left .ctl-a{flex:none}
html.wgg-new body .session-card.card-a .card-discipline{font:600 12px var(--ui-font-text,inherit) !important;padding:4px 11px !important;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;border-radius:999px !important;text-transform:none !important;letter-spacing:normal !important;background:var(--ui-surface-2,var(--ink-3)) !important;border:0 !important;color:var(--ui-text-soft,var(--sand)) !important}
html.wgg-new body .session-card.card-a .card-mode{font:600 12px var(--ui-font-text,inherit);padding:3px 10px;white-space:nowrap}
html.wgg-new body .session-card.card-a .card-gear{display:inline-flex;min-width:0;max-width:100%;font:600 12px var(--ui-font-text,inherit) !important;padding:3px 10px !important;border:1px solid var(--ui-line,var(--line-strong)) !important;border-radius:999px !important;color:var(--ui-text-soft,var(--sand-dim)) !important;white-space:nowrap}
html.wgg-new body .session-card.card-a .card-gear .cg-nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
html.wgg-new body .session-card.card-a .card-gear .cg-sz{flex:none;white-space:pre}
html.wgg-new body .session-card.card-a .card-gear .cg-nm + .cg-sz{margin-left:.3em}
/* the map: inset, rounded, the expand button a round icon */
html.wgg-new body .session-card.card-a .card-map,html.wgg-new body .session-card.card-a .card-photo-only,html.wgg-new body .session-card.card-a .card-map-empty{margin:0 14px;border-radius:12px;overflow:hidden;height:200px}
@media (max-width:480px){ html.wgg-new body .session-card.card-a .card-map,html.wgg-new body .session-card.card-a .card-photo-only,html.wgg-new body .session-card.card-a .card-map-empty{height:150px} }
html.wgg-new body .session-card.card-a .card-map > .card-map-expand{width:30px !important;height:30px !important;padding:0 !important;border-radius:50% !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:0 !important}
html.wgg-new body .session-card.card-a .card-map > .card-map-expand::before{width:15px;height:15px}
/* the numbers: one row, thin lines between, no boxes */
html.wgg-new body .session-card.card-a .card-stats{display:flex !important;gap:0 !important;padding:12px 6px 10px !important;border:0 !important;background:none !important}
html.wgg-new body .session-card.card-a .card-stats .stat{flex:1 1 0;min-width:0;background:none !important;border:0 !important;border-left:1px solid var(--ui-line,var(--line)) !important;border-radius:0 !important;padding:0 4px !important;text-align:center !important;align-items:center;gap:2px}
html.wgg-new body .session-card.card-a .card-stats .stat:first-child{border-left:0 !important}
html.wgg-new body .session-card.card-a .card-stats .stat-val{font:700 19px var(--ui-font-display,'Space Grotesk',sans-serif) !important;color:var(--ui-text,var(--sand)) !important;white-space:nowrap}
html.wgg-new body .session-card.card-a .card-stats .stat-val.highlight{color:var(--ui-primary,#6FB2FF) !important}
html.wgg-new body .session-card.card-a .card-stats .stat-unit{font:600 11.5px var(--ui-font-text,inherit) !important;color:var(--ui-text-faint,var(--sand-dim)) !important;margin-left:2px}
html.wgg-new body .session-card.card-a .card-stats .stat-lbl{font:600 11px var(--ui-font-text,inherit) !important;color:var(--ui-text-faint,var(--sand-dim)) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
html.wgg-new body .session-card.card-a .stat-act{display:block;font-style:normal;font-weight:700;color:var(--ui-green,#7BD88F)}
/* the badges under the numbers, wrapping */
html.wgg-new body .session-card.card-a .card-badges{padding:0 14px 12px !important}
/* the footer: plain icons, the device on the right */
html.wgg-new body .session-card.card-a .card-social-row{gap:6px !important;padding:8px 10px !important}
html.wgg-new body .session-card.card-a .social-btn{border:0 !important;background:transparent !important;height:34px;padding:0 8px !important;color:var(--ui-text-soft,var(--sand-dim)) !important}
html.wgg-new body .session-card.card-a .social-btn.liked{color:var(--ui-primary,var(--coral)) !important;background:transparent !important}
html.wgg-new body .session-card.card-a .device-chip{margin-left:auto;font:600 12px var(--ui-font-text,inherit) !important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}