/* =========================
   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%;
}

/* 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;
  height:52px;
  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;
  white-space:nowrap;
}

/* 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 56px content area. */
  box-sizing:border-box;
  /* Total nav height = visible content (56px) + iOS home-indicator inset.
     This keeps the visible top edge of the nav at the same screen position
     regardless of which page-level box-sizing reset is in effect. */
  height:calc(56px + env(safe-area-inset-bottom, 0px));
  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:center;
  box-shadow:0 -4px 24px rgba(0,0,0,0.3);
  z-index:1000;
  /* 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:center;
  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;
}

.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{
  width:22px;
  height:22px;
  margin-bottom:4px;
  color:inherit;
}

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

/* =========================
   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 */
.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;
}

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

.week-strip-wrap{
  position:relative;
  width:100%;
  padding-bottom:4px;
  padding-top:4px;
  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:center;
  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:center;
  padding:6px 0 8px;
  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:4px;
}
.week-day.is-selected .week-day__dow{
  opacity:0.85;
  color:#fff;
}
.week-day.has-event .week-day__dow{
  opacity:0.5;
}
.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:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-btn);
  font-weight:var(--w-emph);
  font-size:15px;
  letter-spacing:-0.3px;
  color:rgba(255,255,255,0.45);
  background:transparent;
  border:1.5px solid transparent;
  transition:all 0.25s ease;
  position:relative;
}

/* Event dot: small neutral indicator below the number */
.week-day.has-event .week-day__num::after{
  content:'';
  position:absolute;
  bottom:-1px;
  left:50%;
  transform:translateX(-50%);
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--primary);
  opacity:1;
  transition:opacity 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%;
  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: 26px;
  height: 26px;
  object-fit: contain;
  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);
  }
}