/* =========================
   DESIGN TOKENS (UI v2) — single source of truth
========================= */
:root{
  --bg:#0E1116;
  --surface-raised:rgba(255,255,255,0.03);
  --primary:#10B981;
  --primary-text:#34D399;
  --on-primary:#052E1A;
  --accent-amber:#F59E0B;
  --accent-purple:#8B7FE8;
  --danger:#ff6b6b;
  --danger-text:#ff8f8f;
  --border:rgba(255,255,255,0.07);
  --border-strong:rgba(255,255,255,0.12);
  --t1:#fff;
  --t2:rgba(255,255,255,0.6);
  --t3:rgba(255,255,255,0.4);
  --r-chip:6px;
  --r-btn:8px;
  --r-card:12px;
  --r-container:16px;
  --w-body:400;
  --w-emph:500;
  --w-num:600;
  --w-cta:700;
  --green:var(--primary);   /* keeps ?demo mode (which overrides --green) working */
}

/* Full-page View Transitions are disabled: in Capacitor iOS WKWebView they
   paint the next page early during tab switches (flash / "unsmooth" feel). */
@view-transition {
  navigation: none;
}

/* =========================
   BASE / GLOBAL (RESTORED)
========================= */

/* Global back button */
.back-btn{
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
  border:none;
  color:rgba(255,255,255,0.6);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  z-index:10;
  transition:color 0.15s;
  padding:0;
  text-decoration:none;
}
.back-btn:active{ color:rgba(255,255,255,0.9); }
.back-btn svg{ width:22px; height:22px; }

/* Global back button (auto-injected by base.html on inner pages) */
.back-btn-global{
  position:fixed;
  left:12px;
  top:calc(env(safe-area-inset-top, 0px) + 14px);
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:50%;
  color:rgba(255,255,255,0.6);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  z-index:1200;
  text-decoration:none;
  transition:background 0.15s, color 0.15s;
}
.back-btn-global:active{
  background:rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.9);
}

html, body{
  background-color:var(--bg);
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* IMPORTANT: prevents iOS zooming when focusing inputs */
input, textarea, select, button{
  font-size:16px;
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background-color:var(--bg);
  color:white;
  min-height:100vh;
}

.phone{
  width:100%;
  max-width:420px;
  min-height:100vh;
  margin:0 auto;

  /* keep your original safe-area padding logic */
  padding:calc(40px + env(safe-area-inset-top, 0)) 20px calc(80px + env(safe-area-inset-bottom, 0));
  box-sizing:border-box;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center; /* DEFAULT: center */
}

/* when center_content=False in template render */
.phone-top{
  justify-content:flex-start;
}

.phone-with-bottom-nav{
  padding-bottom:calc(90px + env(safe-area-inset-bottom, 0));
}

.content{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* headings (used everywhere) */
h1{
  margin-top:0;
  margin-bottom:24px;
  font-size:28px;
  font-weight:800;
  letter-spacing:-0.2px;
}


.auth-title{
  margin-top:-20px;
  margin-bottom:32px;
}

/* primary button used across app */
.btn{
  width:280px;
  min-height:52px;
  height:auto;
  padding:12px 16px;
  box-sizing:border-box;
  border-radius:var(--r-btn);
  border:none;
  background-color:var(--primary);
  color:var(--on-primary);
  font-size:17px;
  font-weight:var(--w-cta);
  cursor:pointer;
  margin:10px auto;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.25;
}

/* inputs used across app */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
select{
  width:280px;
  padding:12px;
  border-radius:var(--r-card);
  border:none;
  margin-bottom:14px;
  background-color:#e5e5e5;
  font-size:16px;
  box-sizing:border-box;
}

/* step progress used across builder */
.progress{
  display:flex;
  gap:4px;
  margin-bottom:20px;
  justify-content:center;
}

.step{
  width:32px;
  height:8px;
  border-radius:4px;
  background-color:#243246;
}

.step.active{
  background-color:var(--primary);
}

a{ text-decoration:none; color:inherit; }
a:hover{ text-decoration:none; }

/* =========================
   BOTTOM NAV (RESTORED)
========================= */

.bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  /* Make box-sizing explicit so pages that apply a global `* { box-sizing: border-box }`
     reset (e.g. mein_noqe_profile.html, assistant_workspace.html) don't shift the nav
     downward by eating the safe-area padding out of the content area. */
  box-sizing:border-box;
  /* Same 56px bar as before, so the icons keep their original screen position.
     The 9px top padding puts the icon row where the old centred layout had it and
     keeps the unread badge INSIDE the bar (iOS WebView clips anything painted
     above a fixed bottom bar). */
  height:calc(56px + env(safe-area-inset-bottom, 0px));
  padding-top:9px;
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background: linear-gradient(to bottom, rgba(14,17,22,0.0) 0%, rgba(14,17,22,0.85) 30%, var(--bg) 100%);
  border-top:none;
  display:flex;
  justify-content:space-evenly;
  align-items:flex-start;
  box-shadow:0 -4px 24px rgba(0,0,0,0.3);
  z-index:1000;
  overflow:visible;
  /* Promote to its own compositor layer. Without this, iOS Safari (and any browser
     where a sibling fixed element uses backdrop-filter, like Mein Noqe's .mnq-header)
     can intermittently mis-paint a position:fixed nav during momentum scroll, causing
     it to "jump" up the viewport before snapping back. */
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  will-change:transform;
}

.bottom-nav__button{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-decoration:none;
  color:rgba(255,255,255,0.6);
  /* Pin the label font explicitly. Without this, pages that override the body
     font-family (e.g. assistant_workspace.html sets `font-family: 'Barlow', sans-serif`,
     where Barlow isn't actually loaded and falls back to plain sans-serif/Arial) would
     swap the nav label typeface during navigation. */
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:10px;
  line-height:1.2;
  font-weight:500;
  min-width:0;
  max-width:100%;
  overflow:visible;
  padding:0 2px;
}

.bottom-nav__button > span:last-child{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.bottom-nav__button.is-active{
  color:var(--t1);
  font-weight:var(--w-cta);
}
.bottom-nav__button.is-active .bottom-nav__icon{
  color:var(--primary);
}

.bottom-nav__icon{
  position:relative;
  width:22px;
  height:22px;
  margin-bottom:4px;
  color:inherit;
  overflow:visible;
  flex:none;
}

.bottom-nav__icon svg{
  width:100%;
  height:100%;
  display:block;
}

/* Unread count — sits on the icon corner, fully inside the taller nav bar. */
.bottom-nav__badge{
  position:absolute;
  top:-5px;
  right:-9px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  background:#e11d48;
  color:#fff;
  font-size:9px;
  font-weight:800;
  line-height:16px;
  text-align:center;
  letter-spacing:-0.2px;
  box-sizing:border-box;
  pointer-events:none;
  box-shadow:0 0 0 2px var(--bg, #0E1116);
  z-index:2;
}

/* =========================
   HOME ONLY (NEW)
   (kept inside .home so it doesn't break other pages)
========================= */

.home{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:16px;
  text-align:left;
}

/* TOP BAR */
.topbar{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}

.topbar-logo{
  height:18px;
  width:auto;
  display:block;
  opacity:0.95;
}

/* Tab/header wordmark — global so PWA nav cannot flash full-size PNG before page CSS */
.noqe-brand-logo{
  height:14px;
  width:auto;
  max-height:14px;
  display:block;
}
.mnq-logo{
  height:14px;
  width:auto;
  max-height:14px;
  display:block;
  opacity:0.95;
}

/* no background button */
.topbar-menu-btn{
  border:none;
  background:transparent;
  padding:6px;
  margin:0;
  cursor:pointer;
}

/* simple 3-line icon */
.hamburger{
  width:22px;
  height:14px;
  position:relative;
  display:block;
}

.hamburger::before,
.hamburger::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:rgba(255,255,255,0.90);
  border-radius:2px;
}

.hamburger::before{ top:0; }
.hamburger::after{ bottom:0; }

.hamburger span{
  position:absolute;
  left:0;
  right:0;
  top:6px;
  height:2px;
  background:rgba(255,255,255,0.90);
  border-radius:2px;
}

/* consistent card tokens */
:root{
  --card-bg: var(--surface-raised);
  --card-bg-strong: #1E2940;
  --card-border: var(--border);
  --card-radius: var(--r-card);
}

/* HERO CARD */
.hero-card{
  width:100%;
  background:var(--card-bg-strong);
  border:1px solid var(--card-border);
  border-radius:var(--card-radius);
  padding:27px 16px;
  box-sizing:border-box;
  text-align:left;
}

.hero-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.hero-label{
  font-weight:800;
  font-size:16px;
}

.hero-meta{
  font-size:12px;
  opacity:0.75;
}

.hero-line{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
}

.hero-small{
  margin-top:6px;
  font-size:13px;
  opacity:0.75;
  line-height:1.35;
}

.hero-actions{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.hero-btn{
  height:48px;
  border-radius:var(--r-btn);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  text-decoration:none;


  background:transparent;
  border:1px solid var(--border);
  color:var(--t2);
}

.hero-btn-primary{
  background:var(--primary);
  color:var(--on-primary);
  border:none;
  font-weight:var(--w-cta);
  box-shadow:none;
}

/* small status dot */
.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}
.dot-green{ background:var(--primary); }

.dot-yellow {
  background: #f5c542;
}

/* SLIDER */
.slider-shell{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:left;
}

.quick-slider{
  width:100%;
  display:flex;
  gap:12px;
  overflow-x:scroll;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;

  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:2px 2px 0;
}

.quick-slider::-webkit-scrollbar{
  width:0;
  height:0;
}

.quick-card{
  scroll-snap-align:start;
  min-width:68%;
  max-width:68%;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--card-radius);
  padding:16px;
  box-sizing:border-box;
  text-decoration:none;
  color:#fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

.quick-title{
  font-weight:800;
  font-size:16px;
  margin-bottom:6px;
}

.quick-sub{
  font-size:13px;
  opacity:0.78;
  line-height:1.3;
}

.slider-controls{
  width:100%;
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:12px;
}

.slider-arrow{
  width:44px;
  height:44px;
  border:none;
  background:transparent;
  color:rgba(255,255,255,0.90);
  font-size:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.slider-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.dot-ind{
  width:7px;
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,0.25);
  display:inline-block;
}

.dot-ind.active{
  width:22px;
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,0.80);
}

/* TOOLS on home — keep this selector scoped away from Formation draw tools.
   Formation uses `.tb-pc-tools` on purpose; do not rename this back to a
   bare `.tools` rule that would collide with briefing UI. */
.tools{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tool-btn{
  height:52px;
  border-radius:var(--r-btn);
  background:var(--primary);
  color:var(--on-primary);
  font-size:17px;
  font-weight:var(--w-cta);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}


.calendar-icon{
  position:relative;
}

.calendar-day{
  position:absolute;
  left:50%;
  top:56%;
  transform:translate(-50%, -50%);
  font-size:9px;
  font-weight:800;
  line-height:1;
  color:currentColor;
  pointer-events:none;
}


/* RSVP collapsible rows (calendar event detail) */
/* RSVP list rows (full width, clean like iOS list) */
.rsvp-list{
  width:100%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
}

.rsvp-row{
  width:100%;
  border-bottom:1px solid rgba(255,255,255,0.10);
}

.rsvp-row:last-child{
  border-bottom:none;
}

.rsvp-row__summary{
  list-style:none;
  cursor:pointer;
  padding:16px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:800;
}

.rsvp-row__summary::-webkit-details-marker{ display:none; }

.rsvp-row__title{
  font-size:16px;
  opacity:0.92;
}

.rsvp-row__right{
  display:flex;
  align-items:center;
  gap:10px;
  opacity:0.85;
}

.rsvp-row__count{
  min-width:18px;
  text-align:right;
  font-weight:900;
}

.rsvp-row__chev{
  display:inline-block;
  transition:transform 0.15s ease;
  opacity:0.75;
}

.rsvp-row[open] .rsvp-row__chev{
  transform:rotate(180deg);
}

.rsvp-row__body{
  padding:0 14px 14px 14px;
}

/* HOME: section headers */
.section-head{
  width:100%;
  margin-top:2px;
  text-align:left;
}

.section-title{
  font-weight:900;
  font-size:14px;
  letter-spacing:0.2px;
  opacity:0.95;
}

.section-sub{
  margin-top:4px;
  font-size:12px;
  opacity:0.65;
  line-height:1.25;
}

/* Secondary tool buttons: calm, not all-green */
.tools-secondary{
  gap:10px;
}

.tool-btn-secondary{
  height:46px;
  border-radius:999px;
  background:#1E2940;
  border:1px solid rgba(255,255,255,0.14);
  color:#fff;
  font-size:15px;
  font-weight:800;
}




.rsvp-summary{
  list-style:none;
  cursor:pointer;
  padding:14px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:800;
}

.rsvp-summary::-webkit-details-marker{ display:none; }

.rsvp-right{
  display:flex;
  align-items:center;
  gap:10px;
  opacity:0.85;
  font-weight:800;
}

.rsvp-count{
  min-width:16px;
  text-align:right;
}

.rsvp-chevron{
  display:inline-block;
  transform:rotate(0deg);
  transition:transform 0.15s ease;
  opacity:0.8;
}

.rsvp-section[open] .rsvp-chevron{
  transform:rotate(180deg);
}

.rsvp-body{
  padding:0 14px 14px 14px;
}


.event-link{
  width:100%;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:16px;
  padding:12px;
  box-sizing:border-box;

  font-size:12px;
  line-height:1.2;
  opacity:0.9;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


.event-head{
  width:100%;
  margin-bottom:14px;
}

.event-kicker{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
  font-weight:800;
  opacity:0.9;
}

.event-date{
  font-size:13px;
  font-weight:700;
  opacity:0.75;
  white-space:nowrap;
}

.event-title{
  margin-top:8px;
  font-size:28px;
  font-weight:900;
  line-height:1.08;
  letter-spacing:-0.2px;
}


/* HOME: simpler topbar */
.topbar-simple{
  margin-bottom:10px;
}

/* HERO hint */
.hero-hint{
  margin-top:10px;
  font-size:12px;
  opacity:0.6;
  line-height:1.25;
}

/* PREP CARD (mode + actions) */
.prep-card{
  width:100%;
  background:rgba(255,255,255,0.04);
  border:1.5px solid rgba(255,255,255,0.08);
  border-radius:20px;
  padding:16px;
  box-sizing:border-box;
  text-align:left;
}

.prep-head{
  margin-bottom:10px;
}

.prep-title{
  font-weight:900;
  font-size:14px;
  opacity:0.95;
}

.prep-sub{
  margin-top:4px;
  font-size:12px;
  opacity:0.65;
}

/* Segmented control (Training | Match) */
.segmented{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  background:rgba(255,255,255,0.04);
  border:1.5px solid rgba(255,255,255,0.06);
  border-radius:999px;
  padding:4px;
  box-sizing:border-box;
}

.segmented__btn{
  height:40px;
  border-radius:999px;
  border:none;
  background:transparent;
  color:rgba(255,255,255,0.45);
  font-weight:var(--w-cta);
  font-size:14px;
  cursor:pointer;
  transition:all 0.25s ease;
}

.segmented__btn.is-active{
  background:rgba(16,185,129,0.1);
  color:#ffffff;
  box-shadow: inset 0 0 0 1.5px rgba(16,185,129,0.3);
}

/* Action rows inside prep card */
.prep-body{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.prep-action{
  display:block;
  padding:14px 14px;
  border-radius:16px;
  background:rgba(255,255,255,0.05);
  border:1.5px solid rgba(255,255,255,0.08);
  text-decoration:none;
  color:#fff;
  transition:all 0.2s ease;
}
.prep-action:active{
  background:rgba(16,185,129,0.06);
  border-color:rgba(16,185,129,0.15);
}


.prep-action__main{
  min-width:0;
}

.prep-action--locked{
  opacity:0.75;
  cursor:default;
  pointer-events:none;
}

.prep-action__lock{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:8px;

  font-size:12px;
  font-weight:800;
  opacity:0.75;
  white-space:nowrap;
}


.prep-action__lock svg{
  width:18px;
  height:18px;
  display:block;
  flex:0 0 auto;
}

.prep-action__lockicon{
  display:inline-flex;
  align-items:center;
  opacity:0.7;
  line-height:0;
}



.prep-action__lockicon svg{
  width:16px;
  height:16px;
  display:block;
}

.prep-lock-hint{
  margin-top:12px;

  display:flex;
  align-items:center;
  gap:8px;

  font-size:12px;
  font-weight:800;
  line-height:1.25;
  font-family:inherit;
  color:inherit;

  opacity:0.65;
}

.prep-lock-hint span{
  font:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
}



.prep-lock-hint__icon svg{
  width:14px;
  height:14px;
  opacity:0.7;
  display:block;
}


.prep-action__title{
  font-weight:900;
  font-size:14px;
  margin-bottom:4px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.prep-action__title span{
  font:inherit;
  font-weight:inherit;
  font-size:inherit;
  line-height:inherit;
}



.prep-action__sub{
  font-size:12px;
  opacity:0.7;
  line-height:1.25;
}

/* EMPTY STATE: active state should look like normal active (NOT green) */
.segmented[data-empty="1"] .segmented__btn.is-active{
  background:rgba(16,185,129,0.1);
  color:#ffffff;
  box-shadow: inset 0 0 0 1.5px rgba(16,185,129,0.3);
}



/* =========================
   HOME: MERGED HEADER + WEEK STRIP
========================= */

.home-header{
  position:fixed;
  left:0; right:0; top:0;
  padding-top:env(safe-area-inset-top, 0);
  /* solid so scrolling content does not show through (matches body) */
  background:var(--bg);
  z-index:1100;
}

.home-header__inner{
  max-width:420px;
  margin:0 auto;
  padding:2px 20px 0;
  box-sizing:border-box;
}

.home-header__top{
  height:50px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  position:relative;
}

.home-header__logo{
  height:14px;
  width:auto;
  max-height:14px;
  opacity:0.95;
  display:block;
}

.home-header__coach{
  position:absolute;
  right:0;
  font-weight:var(--w-emph);
  font-size:14px;
  color:var(--t2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:0.3px;
  max-width:220px;
}

/* spacer height = topbar (50) + week strip (~52) */
.home-header-spacer{
  height:102px;
}

/* The week strip lives in a viewport-fixed header. .phone still adds
   40px + safe-area padding, and .home { gap:16px } sits between the
   spacer and the next-event card — that stacked into a dead band under
   the dates. Cancel the extra phone padding on Startseite and drop the
   flex gap so the card sits flush under the strip. */
.phone:has(.home-header){
  padding-top:env(safe-area-inset-top, 0px);
}
.home{
  gap:0;
}
.home .hc-single{
  margin-top:0;
}
.home .hc-single .hc-detail{
  margin-top:0;
}
.home .hc-single .hc-detail__inner{
  margin-top:8px;
}

/* ===================================================================
   ✅ FINAL CORRECT WAVE - Moves to selected day with correct color
   =================================================================== */

.week-strip-wrap{
  position:relative;
  width:100%;
  padding-bottom:4px;
  padding-top:0;
  overflow:hidden;
}
/* Wave removed -- clean Oura-style strip */
.week-wave{
  display:none;
}

/* week strip */
.week-strip{
  position:relative;
  z-index:1;
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:0px;
}

.week-day{
  flex:1;
  text-decoration:none;
  color:rgba(255,255,255,0.4);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:1px 0 6px;
  border-radius:var(--r-btn);
  position:relative;
  transition:color 0.25s ease, background 0.25s ease;
}

/* Selected/today: soft neutral background square wrapping number + weekday */
.week-day.is-selected{
  background:var(--surface-raised);
}

.week-day__dow{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
  opacity:0.4;
  margin-top:11px;
  line-height:1;
}
.week-day.is-selected .week-day__dow{
  opacity:0.85;
  color:#fff;
}
.week-day.has-event .week-day__dow{
  opacity:0.55;
  margin-top:14px;
}
.week-day.is-selected.has-event .week-day__dow{
  opacity:0.85;
  color:#fff;
}

/* ===================================================================
   ✅ DAY NUMBERS - Plain for regular, NO background
   =================================================================== */

.week-day__num{
  width:36px;
  height:auto;
  min-height:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  border-radius:var(--r-btn);
  font-weight:var(--w-emph);
  font-size:15px;
  letter-spacing:-0.3px;
  line-height:1;
  color:rgba(255,255,255,0.45);
  background:transparent;
  border:none;
  transition:all 0.25s ease;
  position:relative;
}

/* Event marker sits in the gap between number and weekday */
.week-day.has-event .week-day__num::after{
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%, 4px);
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:
    0 0 0 1.5px rgba(16,185,129,0.25),
    0 0 7px rgba(16,185,129,0.35);
  opacity:1;
  transition:opacity 0.25s ease, transform 0.25s ease;
}

/* Event day (not selected): subtle text lift, no border */
.week-day.has-event .week-day__num{
  color:rgba(255,255,255,0.65);
}

/* Selected/today: the number itself stays plain — the soft box is on the cell */
.week-day.is-selected .week-day__num{
  color:#fff;
  background:transparent;
  border-color:transparent;
}

/* Selected + event: the event dot turns green */
.week-day.is-selected.has-event .week-day__num{
  color:#fff;
  background:transparent;
  border-color:transparent;
}
.week-day.is-selected.has-event .week-day__num::after{
  opacity:1;
  background:var(--primary);
}






.prep-action--big{
  padding:18px 16px;
}

.prep-action--big .prep-action__title{
  font-size:15px;
}

.prep-action--big .prep-action__sub{
  font-size:13px;
  opacity:0.70;
  line-height:1.35;
  margin-top:10px;
}


/* Empty prep card layout like screenshot */
.prep-card--empty{
  padding:16px;
}

.prep-cta{
  width:100%;
  height:52px;
  font-size:15px;
  font-weight:900;
}

.prep-empty-text{
  margin-top:14px;
  font-size:13px;
  opacity:0.7;
  line-height:1.35;
  text-align:left;
}

.btn-danger{
  background:transparent;
  color:var(--danger);
  font-weight:var(--w-cta);
}

.pill-btn:active{
  transform:scale(0.99);
}

html, body { overflow-x:hidden; }

.pill-link{
  display:block;
  width:100%;
  text-decoration:none;
}

.pill-btn{
  width:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;

  padding:12px 18px;
  border-radius:var(--r-btn);

  font-weight:var(--w-cta);
  font-size:16px;
  letter-spacing:-0.2px;

  border:1px solid var(--border-strong);
  background:var(--surface-raised);
  color:rgba(255,255,255,0.95);

  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

.pill-btn--primary{
  border:none;
  background:var(--primary);
  color:var(--on-primary);
}

.pill-btn--outline{
  border:1px solid var(--border-strong);
  background:var(--surface-raised);
  color:rgba(255,255,255,0.95);
}

/* ========== Co-Workspace snapshot: discussion (Opal tokens — distinct from neutral stat cards) ========== */
/* Warm amber rim — reads as “conversation / new activity”, distinct from blue stat cards */
.cw-discussion{
  text-align:left;
  direction:ltr;
  /* Not the same language as performance tiles (those: rgba(255,255,255,.06) + thin border).
     Deeper navy + amber rim so threads pop vs. neutral chrome. */
  margin-top:6px;
  padding:14px 12px 14px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(12, 28, 52, 0.94) 0%, rgba(7, 16, 32, 0.97) 100%);
  border:1px solid rgba(240, 178, 74, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(240, 178, 74, 0.07),
    0 8px 28px rgba(0, 0, 0, 0.35);
  box-sizing:border-box;
}
.cw-discussion--compact{
  padding:11px 10px 12px;
  border-radius:14px;
  margin-top:0;
  border-color:rgba(240, 178, 74, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(240, 178, 74, 0.05),
    0 4px 18px rgba(0, 0, 0, 0.28);
}
.cw-discussion__head{
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255, 255, 255, 0.06);
}
.cw-discussion--compact .cw-discussion__head{
  margin-bottom:8px;
  padding-bottom:6px;
}
.cw-discussion__lead{
  margin:0;
  font-size:12px;
  font-weight:600;
  line-height:1.45;
  letter-spacing:-0.01em;
  color:rgba(238, 242, 255, 0.78);
}
.cw-discussion--compact .cw-discussion__lead{
  font-size:11.5px;
}
.cw-discussion__title{
  margin:0;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(255, 214, 170, 0.72);
}
.cw-discussion--compact .cw-discussion__title{
  font-size:9px;
  letter-spacing:0.12em;
}
.cw-discussion__sub{
  margin:5px 0 0;
  font-size:11px;
  line-height:1.38;
  font-weight:500;
  color:rgba(238, 242, 255, 0.34);
}
.cw-discussion__thread{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:8px;
  margin-bottom:10px;
  max-height:min(48vh, 380px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-right:2px;
}
.cw-discussion__thread:empty{
  display:none;
  margin:0;
  max-height:0;
  min-height:0;
  padding:0;
  overflow:hidden;
}
.cw-discussion--compact .cw-discussion__thread{
  gap:8px;
  margin-bottom:8px;
  max-height:min(32vh, 240px);
}
/* Feed card: same thread pattern, no outer “second card” */
.cw-discussion--feed{
  margin-top:0;
  padding:4px 2px 6px;
  background:transparent;
  border:none;
  box-shadow:none;
}
.cw-discussion--feed .cw-discussion__thread{
  max-height:none;
  margin-bottom:8px;
}
.cw-discussion--feed .cw-composer{
  margin-top:0;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
}
/* Feed comment input: keep only one visible box */
.cw-discussion--feed .cw-composer__input-shell{
  padding:0 4px 0 12px;
  border-radius:14px;
  background:rgba(0, 0, 0, 0.34);
  border:1px solid rgba(255, 255, 255, 0.1);
  box-shadow:none;
}
.cw-discussion--feed .cw-composer__input-shell:focus-within{
  border-color:rgba(181, 138, 240, 0.38);
  box-shadow:0 0 0 2px rgba(181, 138, 240, 0.09);
}
.cw-discussion--feed .cw-composer__field{
  min-height:40px;
  padding:10px 4px 10px 0;
}
/* Comment rows: Instagram-style — grid top-align (no vertical “floating” in the strip) */
.cw-msg{
  display:grid;
  grid-template-columns:28px minmax(0, 1fr);
  column-gap:10px;
  row-gap:0;
  align-items:start;
  justify-items:stretch;
  padding:5px 12px 7px;
  border-radius:14px;
  border:1px solid transparent;
  text-align:left;
  direction:ltr;
}
.cw-msg__avatar{
  width:28px;
  height:28px;
  margin:0;
  border-radius:50%;
  grid-column:1;
  grid-row:1;
  justify-self:start;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:700;
  letter-spacing:-0.02em;
  color:rgba(238, 242, 255, 0.82);
  background:rgba(255, 255, 255, 0.05);
  border:1px solid rgba(255, 255, 255, 0.08);
}
.cw-discussion--compact .cw-msg{
  grid-template-columns:26px minmax(0, 1fr);
  column-gap:8px;
  padding:4px 10px 6px;
  border-radius:12px;
}
.cw-discussion--compact .cw-msg__avatar{
  width:26px;
  height:26px;
  font-size:9px;
}
.cw-msg__main{
  grid-column:2;
  grid-row:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  text-align:left;
}
.cw-msg__line{
  margin:0;
  width:100%;
  box-sizing:border-box;
  font-size:12.5px;
  line-height:1.5;
  font-weight:400;
  color:rgba(238, 242, 255, 0.86);
  text-align:left;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.cw-msg__author{
  font-weight:700;
  color:rgba(238, 242, 255, 0.94);
  margin-right:0.3em;
}
.cw-msg__text{
  font-weight:400;
  color:inherit;
  white-space:pre-wrap;
}
.cw-msg__sub{
  margin-top:2px;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  font-size:10.5px;
  font-weight:500;
  line-height:1.35;
  letter-spacing:0.02em;
  text-align:left;
  color:rgba(238, 242, 255, 0.34);
}
.cw-msg__time{
  display:block;
  width:100%;
  max-width:100%;
  text-align:left;
  font:inherit;
  color:inherit;
}
/* Per-commenter color tokens — set --_mc (RGB) and --_mt (text RGB) on each variant */
.cw-msg--owner              { --_mc:165,130,240; --_mt:238,234,255; }
.cw-msg--cx-0,.cw-msg--external { --_mc:215,165,80;  --_mt:255,242,220; } /* amber   */
.cw-msg--cx-1               { --_mc:225,112,85;  --_mt:255,230,220; } /* coral   */
.cw-msg--cx-2               { --_mc:215,108,128; --_mt:255,228,234; } /* rose    */
.cw-msg--cx-3               { --_mc:205,148,105; --_mt:255,238,224; } /* peach   */
.cw-msg--cx-4               { --_mc:205,180,65;  --_mt:255,248,218; } /* gold    */
.cw-msg--cx-5               { --_mc:195,134,168; --_mt:252,232,244; } /* mauve   */
/* Shared tint rules — driven by the token above */
.cw-msg--owner,
.cw-msg--external,
.cw-msg--cx-0,.cw-msg--cx-1,.cw-msg--cx-2,
.cw-msg--cx-3,.cw-msg--cx-4,.cw-msg--cx-5{
  background:rgba(var(--_mc),.04);
  border-color:rgba(var(--_mc),.13);
}
.cw-msg--owner .cw-msg__avatar,
.cw-msg--external .cw-msg__avatar,
.cw-msg--cx-0 .cw-msg__avatar,.cw-msg--cx-1 .cw-msg__avatar,.cw-msg--cx-2 .cw-msg__avatar,
.cw-msg--cx-3 .cw-msg__avatar,.cw-msg--cx-4 .cw-msg__avatar,.cw-msg--cx-5 .cw-msg__avatar{
  background:rgba(var(--_mc),.09);
  border-color:rgba(var(--_mc),.17);
  color:rgba(var(--_mt),.9);
}
.cw-msg--owner .cw-msg__author,
.cw-msg--external .cw-msg__author,
.cw-msg--cx-0 .cw-msg__author,.cw-msg--cx-1 .cw-msg__author,.cw-msg--cx-2 .cw-msg__author,
.cw-msg--cx-3 .cw-msg__author,.cw-msg--cx-4 .cw-msg__author,.cw-msg--cx-5 .cw-msg__author{
  color:rgba(var(--_mt),.96);
}
.cw-msg--owner .cw-msg__sub,
.cw-msg--external .cw-msg__sub,
.cw-msg--cx-0 .cw-msg__sub,.cw-msg--cx-1 .cw-msg__sub,.cw-msg--cx-2 .cw-msg__sub,
.cw-msg--cx-3 .cw-msg__sub,.cw-msg--cx-4 .cw-msg__sub,.cw-msg--cx-5 .cw-msg__sub{
  color:rgba(var(--_mc),.4);
}
.cw-composer{
  margin:0;
  padding:11px 10px 10px;
  border-radius:14px;
  background:rgba(0, 0, 0, 0.32);
  border:1px solid rgba(255, 255, 255, 0.07);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.cw-discussion--compact .cw-composer{
  padding:9px 8px 8px;
  border-radius:12px;
}
.cw-composer__identity{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:9px;
}
.cw-composer__avatar--self{
  width:34px;
  height:34px;
  border-radius:50%;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:var(--w-num);
  color:var(--on-primary);
  background:var(--primary);
  border:1px solid rgba(16, 185, 129, 0.45);
  box-shadow:0 2px 10px rgba(16, 185, 129, 0.2);
}
.cw-composer__name-field{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:0;
}
.cw-composer__name-label{
  font-size:9px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(238, 242, 255, 0.32);
}
.cw-composer__name{
  width:100%;
  box-sizing:border-box;
  border-radius:9px;
  padding:7px 10px;
  font-size:13px;
  font-weight:600;
  color:#eef2ff;
  background:rgba(255, 255, 255, 0.045);
  outline:none;
  border:1px solid rgba(255, 255, 255, 0.08);
  transition:border-color .15s, box-shadow .15s;
  font-family:inherit;
}
.cw-composer__name:focus{
  border-color:rgba(240, 178, 74, 0.35);
  box-shadow:0 0 0 2px rgba(240, 178, 74, 0.1);
}
.cw-composer__name::placeholder{
  color:rgba(238, 242, 255, 0.28);
  font-weight:500;
}
.cw-composer__input-shell{
  position:relative;
  display:flex;
  align-items:flex-end;
  gap:6px;
  padding:3px 3px 3px 10px;
  border-radius:12px;
  background:rgba(0, 0, 0, 0.28);
  border:1px solid rgba(255, 255, 255, 0.08);
  transition:border-color .15s, box-shadow .15s;
}
.cw-composer__input-shell:focus-within{
  border-color:rgba(240, 178, 74, 0.32);
  box-shadow:0 0 0 2px rgba(240, 178, 74, 0.08);
}
.cw-composer__field{
  flex:1;
  min-width:0;
  min-height:38px;
  max-height:120px;
  padding:8px 4px 8px 0;
  border:none;
  background:transparent;
  color:#eef2ff;
  font-size:13px;
  line-height:1.38;
  resize:none;
  outline:none;
  font-family:inherit;
}
.cw-composer__field::placeholder{
  color:rgba(238, 242, 255, 0.3);
}
.cw-composer__submit{
  flex-shrink:0;
  width:36px;
  height:36px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--on-primary);
  background:var(--primary);
  box-shadow:0 2px 10px rgba(16, 185, 129, 0.28);
  opacity:0.3;
  transform:scale(0.94);
  pointer-events:none;
  transition:opacity .2s, transform .2s, box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.cw-composer__submit svg{
  width:16px;
  height:16px;
}
.cw-composer__submit.is-visible{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}
.cw-composer__submit.is-visible:active{
  transform:scale(0.96);
}
.cw-composer__hint{
  margin:7px 2px 0;
  font-size:10px;
  line-height:1.35;
  font-weight:500;
  color:rgba(238, 242, 255, 0.28);
}
.cw-composer__voice{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  margin:0 0 9px;
}
.cw-composer__voice-btn{
  border:1px solid rgba(240, 178, 74, 0.22);
  background:rgba(240, 178, 74, 0.08);
  color:rgba(220, 232, 255, 0.82);
  border-radius:999px;
  padding:6px 12px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s, border-color .15s;
}
.cw-composer__voice-btn:hover{
  background:rgba(240, 178, 74, 0.12);
}
.cw-composer__voice-btn.is-recording{
  border-color:rgba(255, 100, 120, 0.45);
  background:rgba(255, 80, 100, 0.12);
  color:#e8a8b4;
}
.cw-composer__voice-hint{
  font-size:10px;
  color:rgba(238, 242, 255, 0.32);
  flex:1;
  min-width:120px;
  line-height:1.35;
}

/* Co-Workspace shared snapshot topbar (training, performance, formation, analyses, …) */
.cw-snap-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.cw-snap-topbar-spacer{
  flex:1;
  min-width:0;
}
.cw-snap-topbar-spacer--right{
  flex:0 0 30px;
  width:30px;
  min-height:1px;
}
.cw-snap-back{
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,0.78);
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.cw-snap-back:hover{ color:#fff; }
.cw-snap-share{
  flex-shrink:0;
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.78);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  font-family:inherit;
}
.cw-snap-share svg{ width:14px; height:14px; stroke:currentColor; }

/* Draggable Noqe chat FAB (main tabs) */
.noqe-cotrainer-fab {
  position: fixed;
  /* Bottom-left by default so it never covers the page's primary "+" (bottom-right). Still draggable. */
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 14px);
  width: 54px;
  height: 54px;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: grab;
}
.noqe-cotrainer-fab:active:not(.is-dragging) {
  transform: scale(0.95);
}
.noqe-cotrainer-fab.is-dragging {
  cursor: grabbing;
  transform: scale(1.04);
  z-index: 1600;
}
.noqe-cotrainer-fab__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--primary-text) 0%,
    var(--primary) 22%,
    #34D399 38%,
    transparent 68%,
    var(--primary-text) 100%
  );
  animation: noqe-cotrainer-fab-ring 5s linear infinite;
  pointer-events: none;
}
.noqe-cotrainer-fab__core {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: noqe-cotrainer-fab-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
.noqe-cotrainer-fab.is-dragging .noqe-cotrainer-fab__core {
  animation: none;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.45);
}
.noqe-cotrainer-fab__logo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}
@keyframes noqe-cotrainer-fab-ring {
  0% {
    transform: rotate(0deg);
    filter: hue-rotate(0deg) saturate(1.1) brightness(1.02);
  }
  25% {
    filter: hue-rotate(6deg) saturate(1.2) brightness(1.06);
  }
  50% {
    transform: rotate(180deg);
    filter: hue-rotate(10deg) saturate(1.15) brightness(1.04);
  }
  75% {
    filter: hue-rotate(4deg) saturate(1.18) brightness(1.05);
  }
  100% {
    transform: rotate(360deg);
    filter: hue-rotate(0deg) saturate(1.1) brightness(1.02);
  }
}
@keyframes noqe-cotrainer-fab-pulse {
  0%, 100% {
    box-shadow:
      0 0 10px rgba(16, 185, 129, 0.32),
      0 0 18px rgba(52, 211, 153, 0.18);
  }
  33% {
    box-shadow:
      0 0 16px rgba(16, 185, 129, 0.42),
      0 0 26px rgba(52, 211, 153, 0.22);
  }
  66% {
    box-shadow:
      0 0 14px rgba(52, 211, 153, 0.38),
      0 0 22px rgba(16, 185, 129, 0.2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .noqe-cotrainer-fab__ring {
    animation: none;
    filter: none;
  }
  .noqe-cotrainer-fab__core {
    animation: none;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.32);
  }
}