/* ============================================================
   GÉGÉ SPORT — Design System : STRUCTURE + composants (.gs-*) + rayons.
   ⚠️ Les COULEURS (charte AMBRE) vivent dans gege-warm.css (chargé après). Ne pas remettre de thème ici.
   Système 100% Gégé, architecturé comme AEGIS :
   tokens → composants. Thème clair par défaut + sombre.
   Responsive par CONTAINER QUERIES (container-name: gsapp)
   pour pouvoir afficher mobile + desktop sur la même planche.
   ============================================================ */

/* ---- Fonts loaded by the host HTML (Google Fonts) ---- */

/* ============================================================
   TOKENS — light (défaut)
   ============================================================ */
.gs-app {
  /* ⚠️ COULEURS = gege-warm.css (charte AMBRE, chargé APRÈS et qui surcharge tout).
     Ici, uniquement le structurel que warm ne fournit pas : rayons + color-scheme.
     L'ancien thème « glacier » (mort, surchargé par l'ambre) a été supprimé le 15/06. */
  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  color-scheme: light;
}

/* ============================================================
   TOKENS — dark (glacier night)
   ============================================================ */
.gs-app[data-theme="dark"] {
  /* COULEURS dark = gege-warm.css (espresso). Ici, uniquement color-scheme. */
  color-scheme: dark;
}

/* ============================================================
   BASE
   ============================================================ */
.gs-app *, .gs-app *::before, .gs-app *::after { box-sizing: border-box; }
.gs-app {
  container-type: inline-size;
  container-name: gsapp;
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.gs-app h1,.gs-app h2,.gs-app h3,.gs-app h4 { font-family:'Bricolage Grotesque',sans-serif; margin:0; letter-spacing:-0.02em; line-height:1.08; font-weight:800; }
.gs-num { font-family:'JetBrains Mono', monospace; font-feature-settings:'tnum' 1; letter-spacing:-0.01em; }
.gs-app button { font-family: inherit; }
.gs-app ::selection { background: var(--brand-tint-2); }
.gs-app a { color: var(--brand-text); text-decoration: none; }

/* scrollable region */
.gs-scroll { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.gs-scroll::-webkit-scrollbar { width: 9px; }
.gs-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }

/* dotted motif helpers */
.gs-dotbg { background-image: radial-gradient(var(--dot) 1.6px, transparent 1.8px); background-size: 14px 14px; }

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.gs-shell { display: flex; height: 100%; }

/* ---- sidebar (desktop only) ---- */
.gs-side { display: none; }
@container gsapp (min-width: 860px) {
  .gs-side {
    display: flex; flex-direction: column;
    width: 256px; flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--line);
    height: 100%;
  }
}
.gs-side-head { padding: 18px 16px 12px; }
.gs-side-body { flex: 1; overflow-y: auto; padding: 4px 10px 16px; }
.gs-side-foot { padding: 10px 12px 14px; border-top: 1px solid var(--line-soft); }

/* wordmark */
.gs-wm { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.gs-wm .g { font-family:'Bricolage Grotesque'; font-weight:800; font-size:22px; letter-spacing:-0.04em; color:var(--brand); line-height:1; }
.gs-wm .s { font-family:'Bricolage Grotesque'; font-weight:800; font-size:22px; letter-spacing:-0.04em; color:var(--ink); line-height:1; }
.gs-wm .pdot { width:8px;height:8px;border-radius:50%;background:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); }

/* nav section label */
.gs-side-lab { display:flex; align-items:center; justify-content:space-between; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-3); padding:14px 8px 7px; }
.gs-side-lab button { border:none; background:none; color:var(--brand-text); font-weight:700; font-size:11px; cursor:pointer; padding:2px 4px; border-radius:6px; }
.gs-side-lab button:hover { background: var(--brand-tint); }

/* follow row */
.gs-follow { display:flex; align-items:center; gap:10px; padding:8px 8px; border-radius:10px; cursor:pointer; position:relative; }
.gs-follow:hover { background: var(--inset); }
.gs-follow.active { background: var(--brand-tint); }
.gs-follow.active .gs-follow-name { color: var(--brand-text); font-weight:700; }
.gs-follow .grip { color: var(--ink-3); opacity:0; cursor:grab; margin-left:-4px; font-size:13px; transition:opacity .12s; }
.gs-follow:hover .grip { opacity:.7; }
.gs-follow-ico { width:30px;height:30px;border-radius:8px; flex-shrink:0; display:grid; place-items:center; font-size:15px; background:var(--surface-2); border:1px solid var(--line-soft); }
.gs-follow-name { font-size:13.5px; font-weight:600; line-height:1.1; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-follow-lvl { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:2px 6px; border-radius:999px; }
.lvl-ess { background:var(--surface-2); color:var(--ink-2); }
.lvl-suivi { background:var(--brand-tint); color:var(--brand-text); }
.lvl-passion { background:var(--brand); color:var(--on-brand); }

/* ---- main column ---- */
.gs-main { flex:1; display:flex; flex-direction:column; min-width:0; height:100%; }

/* topbar */
.gs-top { display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); position:relative; z-index:6; flex-shrink:0; }
.gs-top .gs-wm { display:flex; }
@container gsapp (min-width: 860px) { .gs-top .gs-wm { display:none; } }
.gs-search { flex:1; display:flex; align-items:center; gap:9px; background:var(--inset); border:1px solid var(--line); border-radius:999px; padding:9px 14px; color:var(--ink-3); font-size:13.5px; cursor:text; min-width:0; }
.gs-search input { border:none; background:none; outline:none; flex:1; font-family:inherit; font-size:13.5px; color:var(--ink); min-width:0; }
/* typeahead (suggestions sous la barre du haut) */
.gs-topsearch { position:relative; }
.gs-typeahead { position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:50; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 32px rgba(40,28,16,.16); padding:6px; max-height:min(60vh,420px); overflow-y:auto; }
.gs-ta-row { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:11px; cursor:pointer; transition:.1s; }
.gs-ta-row:hover { background:var(--inset); }
.gs-ta-row .e { font-size:19px; width:26px; text-align:center; flex-shrink:0; }
.gs-ta-row .nm { font-size:13.5px; font-weight:650; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-ta-row .ty { font-size:11.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-ta-row .k { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--brand-text); background:var(--inset); border:1px solid var(--line); border-radius:999px; padding:3px 8px; flex-shrink:0; }
.gs-ta-empty { padding:14px 12px; font-size:13px; color:var(--ink-3); text-align:center; }
.gs-iconbtn { width:38px;height:38px;border-radius:999px;border:1px solid var(--line); background:var(--surface); color:var(--ink-2); display:grid;place-items:center; cursor:pointer; flex-shrink:0; transition:.12s; }
.gs-iconbtn:hover { background:var(--inset); color:var(--ink); border-color:var(--line-strong); }
.gs-iconbtn.on { background:var(--brand); color:var(--on-brand); border-color:transparent; }

/* content scroller */
.gs-content { flex:1; overflow-y:auto; overflow-x:hidden; }
.gs-wrap { max-width: 720px; margin:0 auto; padding: 20px 16px 120px; }
@container gsapp (min-width: 860px) { .gs-wrap { padding: 26px 28px 60px; } }

.gs-wrap-wide { max-width: 1080px; margin:0 auto; padding: 18px 16px 120px; }
@container gsapp (min-width: 860px) { .gs-wrap-wide { padding: 26px 28px 64px; } }

/* two-column (event page) */
.gs-cols { display:block; margin-top:18px; }
.gs-rail > * + * { margin-top:16px; }
.gs-col-main > * + * { margin-top:16px; }
@container gsapp (min-width: 1040px) {
  .gs-cols { display:grid; grid-template-columns: 1fr 348px; gap:26px; align-items:start; }
  .gs-cols > .gs-rail { grid-column:2; grid-row:1; position:sticky; top:0; }
  .gs-cols > .gs-col-main { grid-column:1; grid-row:1; }
}
.gs-rail { margin-bottom:16px; }
@container gsapp (min-width: 1040px){ .gs-rail { margin-bottom:0; } }

/* ---- mobile bottom tabs ---- */
.gs-tabs { position:absolute; left:0; right:0; bottom:0; display:flex; background:color-mix(in srgb,var(--surface) 90%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line); padding:7px 6px 9px; z-index:8; }
@container gsapp (min-width: 860px) { .gs-tabs { display:none; } }
.gs-tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:none; cursor:pointer; color:var(--ink-3); padding:4px 0; font-size:10px; font-weight:700; }
.gs-tab svg { width:23px; height:23px; }
.gs-tab.active { color:var(--brand); }

/* ============================================================
   PRIMITIVES
   ============================================================ */
.gs-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.gs-card.interactive { cursor:pointer; transition:transform .14s var(--ease,ease), box-shadow .14s, border-color .14s; }
.gs-card.interactive:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--brand-border); }

.gs-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; line-height:1.5; }
.gs-badge.sport { background:var(--brand); color:var(--on-brand); }
.gs-badge.soft { background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line-soft); }
.gs-badge.ok { background:var(--up-tint); color:var(--up-text); }
.gs-badge.prov { background:var(--flat-tint); color:var(--flat-text); }
.gs-badge.live { background:var(--live-tint); color:var(--live-text); border:1px solid var(--live-border); }
.gs-badge.relu { background:var(--brand-tint); color:var(--brand-text); }

.gs-livedot { width:7px;height:7px;border-radius:50%;background:var(--live); position:relative; flex-shrink:0; }
.gs-livedot::after { content:''; position:absolute; inset:0; border-radius:50%; background:var(--live); animation:gsPulse 2.4s ease-out infinite; }
@keyframes gsPulse { 0%{transform:scale(1);opacity:.7;} 70%{transform:scale(3.4);opacity:0;} 100%{opacity:0;} }
@media (prefers-reduced-motion: reduce){ .gs-livedot::after{ animation:none; } }

/* buttons */
.gs-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:14px; border-radius:12px; padding:11px 16px; border:1px solid transparent; cursor:pointer; transition:transform .1s, background .14s, box-shadow .14s; }
.gs-btn:active { transform:translateY(1px) scale(.99); }
.gs-btn.primary { background:var(--brand); color:var(--on-brand); }
.gs-btn.primary:hover { background:var(--brand-strong); box-shadow:var(--glow); }
.gs-btn.primary.on { background:var(--up); }
.gs-btn.ghost { background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
.gs-btn.ghost:hover { background:var(--inset); }
.gs-btn.block { width:100%; }
.gs-btn.sm { padding:8px 12px; font-size:12.5px; border-radius:10px; }

/* level chips selector */
.gs-levels { display:flex; gap:6px; }
.gs-lvlchip { flex:1; text-align:center; cursor:pointer; border:1px solid var(--line); background:var(--surface); border-radius:11px; padding:9px 8px; transition:.12s; }
.gs-lvlchip:hover { border-color:var(--brand-border); }
.gs-lvlchip.sel { background:var(--brand-tint); border-color:var(--brand-border); }
.gs-lvlchip .t { font-weight:800; font-size:12.5px; font-family:'Bricolage Grotesque'; }
.gs-lvlchip .d { font-size:10px; color:var(--ink-2); margin-top:1px; }
.gs-lvlchip.sel .t { color:var(--brand-text); }

/* section header */
.gs-sech { display:flex; align-items:baseline; gap:8px; margin:24px 2px 12px; }
.gs-sech h3 { font-size:17px; }
.gs-sech .more { margin-left:auto; font-size:12.5px; font-weight:700; color:var(--brand-text); cursor:pointer; }

/* ============================================================
   GÉGÉ VOICE — bubble / signature
   ============================================================ */
.gs-gege { display:flex; gap:12px; align-items:flex-start; background:linear-gradient(180deg, var(--brand-tint), transparent 140%), var(--surface); border:1px solid var(--brand-border); border-radius:var(--r-lg); padding:14px 16px; position:relative; overflow:hidden; }
.gs-gege::before { content:''; position:absolute; inset:0; background-image:radial-gradient(var(--dot) 1.4px, transparent 1.6px); background-size:13px 13px; opacity:.5; pointer-events:none; }
.gs-gege-badge { width:42px;height:42px;border-radius:12px;flex-shrink:0; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; font-family:'Bricolage Grotesque'; font-weight:800; font-size:18px; box-shadow:var(--glow); position:relative; z-index:1; }
.gs-gege-av { border-radius:50%; overflow:hidden; flex-shrink:0; display:block; position:relative; z-index:1; }
.gs-gege-av.ring { box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--brand-tint); }
.gs-gege-body { position:relative; z-index:1; flex:1; min-width:0; }
.gs-gege-name { font-family:'Bricolage Grotesque'; font-weight:800; font-size:13px; color:var(--brand-text); display:flex; align-items:center; gap:6px; }
.gs-gege-msg { font-size:14.5px; line-height:1.42; margin-top:2px; text-wrap:pretty; }
.gs-sign { font-family:'Bricolage Grotesque'; font-weight:700; color:var(--brand-text); }

/* ============================================================
   EVENT CARD (feed unit)
   ============================================================ */
.gs-evt { overflow:hidden; }
.gs-evt-pad { padding:14px 16px; }
.gs-row { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.gs-evt-title { font-size:18px; font-family:'Bricolage Grotesque'; font-weight:700; margin-top:9px; letter-spacing:-0.01em; line-height:1.12; text-wrap:pretty; }
.gs-evt-sub { font-size:12.5px; color:var(--ink-2); margin-top:3px; }
.gs-evt-when { display:flex; align-items:flex-end; gap:12px; margin-top:13px; padding-top:13px; border-top:1px dashed var(--line); }
.gs-evt-when .frlab { font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); display:block; white-space:nowrap; margin-bottom:4px; }
.gs-evt-when .fr { font-family:'Bricolage Grotesque'; font-weight:800; font-size:26px; line-height:.95; display:block; }
.gs-evt-when .loc { margin-left:auto; text-align:right; font-size:11px; color:var(--ink-2); line-height:1.3; }
.gs-evt-cta { display:flex; gap:8px; align-items:center; padding:11px 16px; border-top:1px solid var(--line-soft); background:var(--surface-2); }
.gs-evt-cta .countdown { font-weight:700; font-size:12.5px; color:var(--ink-2); display:flex; align-items:center; gap:6px; }
.gs-evt-cta .spacer { margin-left:auto; }

/* article card */
.gs-art { display:flex; gap:14px; padding:14px 16px; }
.gs-art-thumb { width:96px; height:74px; border-radius:12px; flex-shrink:0; background:var(--surface-3); position:relative; overflow:hidden; }
.gs-art-thumb .ph { position:absolute; inset:0; display:grid; place-items:center; font-size:26px; opacity:.55; }
.gs-art-body { flex:1; min-width:0; }
.gs-art-title { font-family:'Bricolage Grotesque'; font-weight:700; font-size:15.5px; line-height:1.18; letter-spacing:-0.01em; margin-top:5px; text-wrap:pretty; }
.gs-art-meta { font-size:11.5px; color:var(--ink-3); margin-top:6px; display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.gs-art-meta span { white-space:nowrap; }

/* ============================================================
   « COMMENT REGARDER » — flagship block
   ============================================================ */
.gs-watch { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden; }
.gs-watch-head { display:flex; align-items:center; gap:10px; padding:14px 16px 12px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.gs-watch-head .pin { width:28px;height:28px;border-radius:9px; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; flex-shrink:0; }
.gs-watch-head h3 { font-size:15.5px; }
.gs-watch-head .sub { font-size:11px; color:var(--ink-2); margin-top:1px; }
.gs-watch-body { padding:12px 14px 14px; }
.gs-grp { margin-bottom:13px; }
.gs-grp:last-child { margin-bottom:0; }
.gs-grp-lab { display:flex; align-items:center; gap:6px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); margin:0 2px 7px; }
.gs-diff { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--surface); margin-bottom:7px; transition:.12s; cursor:pointer; text-decoration:none; color:inherit; }
.gs-diff:last-child { margin-bottom:0; }
.gs-diff:hover { border-color:var(--brand-border); background:var(--inset); }
.gs-diff .logo { width:34px;height:34px;border-radius:9px; display:grid; place-items:center; font-family:'Bricolage Grotesque'; font-weight:800; font-size:11px; color:#fff; flex-shrink:0; letter-spacing:-0.02em; }
.gs-diff-nm { font-weight:700; font-size:13.5px; line-height:1.15; }
.gs-diff-sub { font-size:11px; color:var(--ink-2); margin-top:2px; }
.gs-diff .tag { margin-left:auto; font-family:'JetBrains Mono'; font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:999px; white-space:nowrap; flex-shrink:0; }
.gs-diff .tag.free { background:var(--up-tint); color:var(--up-text); }
.gs-diff .tag.paid { background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line); }
.gs-diff .tag.geo { background:var(--down-tint); color:var(--down-text); }
.gs-diff .arrow { color:var(--ink-3); flex-shrink:0; }

/* empty state for diffusion */
.gs-watch-empty { text-align:center; padding:8px 12px 6px; }
.gs-watch-empty .em { font-size:30px; }
.gs-watch-empty p { font-size:13px; color:var(--ink-2); margin:8px 0 0; line-height:1.4; }

/* ============================================================
   EVENT HERO (event page top)
   ============================================================ */
.gs-hero { border:1px solid var(--line); border-radius:var(--r-xl); background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden; }
.gs-hero-top { padding:18px 20px 16px; background:linear-gradient(180deg, var(--brand-tint) 0%, transparent 90%); position:relative; }
.gs-hero-top::before { content:''; position:absolute; inset:0; background-image:radial-gradient(var(--dot) 1.5px, transparent 1.7px); background-size:15px 15px; opacity:.6; pointer-events:none; }
.gs-hero-top > * { position:relative; z-index:1; }
.gs-hero h1 { font-size:27px; margin-top:11px; line-height:1.04; text-wrap:balance; }
.gs-hero-loc { font-size:13px; color:var(--ink-2); margin-top:6px; display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.gs-hero-time { display:flex; align-items:flex-end; gap:16px; padding:18px 20px; flex-wrap:wrap; }
.gs-hero-time .frlab { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); display:block; margin-bottom:6px; white-space:nowrap; }
.gs-hero-time .fr { font-family:'Bricolage Grotesque'; font-weight:800; font-size:42px; line-height:.9; display:block; }
.gs-hero-time .meta { margin-left:auto; text-align:right; font-size:12px; color:var(--ink-2); line-height:1.5; }
.gs-hero-time .meta b { color:var(--ink); font-weight:700; }
@container gsapp (max-width: 540px) {
  .gs-hero-time { flex-direction:column; align-items:flex-start; gap:12px; }
  .gs-hero-time .meta { margin-left:0; text-align:left; }
}

/* results table */
.gs-res { width:100%; border-collapse:collapse; }
.gs-res th { text-align:left; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); padding:6px 10px; }
.gs-res td { padding:9px 10px; border-top:1px solid var(--line-soft); font-size:13.5px; }
.gs-res tr td:first-child { font-family:'JetBrains Mono'; font-weight:700; color:var(--ink-2); width:34px; }
.gs-res .pos1 td { background:var(--brand-tint); }
.gs-res .nm { font-weight:600; }
.gs-res .flag { margin-right:6px; }
.gs-res .gap { font-family:'JetBrains Mono'; color:var(--ink-2); text-align:right; font-size:12.5px; }

/* toast */
.gs-toast { position:absolute; left:50%; bottom:78px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--paper); padding:11px 16px; border-radius:999px; font-size:13px; font-weight:600; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:.28s cubic-bezier(.2,.8,.2,1); z-index:30; display:flex; align-items:center; gap:9px; max-width:90%; }
.gs-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
@container gsapp (min-width: 860px){ .gs-toast{ bottom:26px; } }

/* breadcrumb / back */
.gs-back { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--ink-2); cursor:pointer; padding:6px 0; }
.gs-back:hover { color:var(--brand-text); }

/* discipline tabs (segmented) */
.gs-seg { display:flex; gap:3px; background:var(--inset); border:1px solid var(--line); padding:4px; border-radius:13px; }
.gs-seg button { flex:1; border:none; background:none; cursor:pointer; font-family:'Bricolage Grotesque'; font-weight:700; font-size:13px; color:var(--ink-2); padding:8px 10px; border-radius:9px; transition:.12s; white-space:nowrap; }
.gs-seg button.on { background:var(--surface); color:var(--brand-text); box-shadow:var(--shadow-sm); }

/* drawer (mobile follows) */
.gs-scrim { position:absolute; inset:0; background:rgba(8,18,30,.5); backdrop-filter:blur(2px); z-index:20; opacity:0; pointer-events:none; transition:.2s; }
.gs-scrim.show { opacity:1; pointer-events:auto; }
.gs-drawer { position:absolute; top:0; bottom:0; left:0; width:82%; max-width:320px; background:var(--surface); z-index:21; transform:translateX(-100%); transition:transform .26s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column; box-shadow:var(--shadow-lg); }
.gs-drawer.show { transform:translateX(0); }

/* utility */
.gs-muted { color:var(--ink-2); }
.gs-stack > * + * { margin-top:10px; }
.gs-divider { height:1px; background:var(--line); margin:18px 0; }
.gs-pulse-row { display:inline-flex; align-items:center; gap:6px; }

/* discipline hero */
.gs-dsc-ico { font-size:32px; width:60px; height:60px; border-radius:16px; background:var(--surface); border:1px solid var(--line); display:grid; place-items:center; flex-shrink:0; box-shadow:var(--shadow-sm); }

/* discover grid */
.gs-disc-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@container gsapp (min-width: 720px){ .gs-disc-grid { grid-template-columns:repeat(3,1fr); } }
.gs-disc-card { display:flex; flex-direction:column; gap:8px; padding:16px; cursor:pointer; }
.gs-disc-card .e { font-size:30px; }
.gs-disc-card .n { font-family:'Bricolage Grotesque'; font-weight:800; font-size:16px; }
.gs-disc-card .f { font-size:11.5px; color:var(--ink-2); }

/* safe-area padding when mounted inside an iOS device frame */
.gs-safe .gs-top { padding-top: 48px; }
.gs-safe .gs-tabs { padding-bottom: 26px; }