/* =====================================================================
   HLC CLIENT OS - CLIENT-FACING PORTAL STYLES
   ---------------------------------------------------------------------
   The client's private coaching Command Center. Inherits the design-system
   token layer (design-system.css) but expresses a WARMER, brighter
   client aesthetic: elegant black + warm gold used strategically over
   cream and white content areas - never all-black. All selectors are
   scoped under .cos-app so nothing here touches the internal admin OS.

   Sections
     1. Full-screen shell + layout
     2. Sign-in gate
     3. Sidebar + topbar + mobile nav
     4. Hero
     5. Cards, grids, primitives (client-flavored)
     6. Page-specific (coach, business, progress, launch, explore, etc.)
     7. Modal / diagnostic / toast
     8. Responsive
   ===================================================================== */

/* Local tokens layered on the DS tokens - warmer, brighter. */
.cos-app {
  --cos-ink: #17150f;
  --cos-cream: #f6f2e9;
  --cos-cream-2: #fbf8f1;
  --cos-white: #ffffff;
  --cos-gold: #b6902f;         /* legible gold on cream/white */
  --cos-gold-bright: #d4af37;
  --cos-line: rgba(28, 24, 14, 0.10);
  --cos-line-2: rgba(28, 24, 14, 0.16);
  --cos-shadow: 0 10px 30px rgba(30, 25, 15, 0.10);
  --cos-shadow-lg: 0 28px 70px rgba(30, 25, 15, 0.16);

  position: fixed; inset: 0; z-index: 1000;
  /* minmax(0,1fr) stops a wide child from blowing out the main column;
     columns are pinned below so no stray grid child can collapse the layout. */
  display: grid; grid-template-columns: 264px minmax(0, 1fr);
  background: var(--cos-cream);
  color: var(--ds-text);
  font-family: var(--font-ui);
  overflow: hidden;
}
.cos-app[hidden] { display: none; }

/* Dark theme still supported - deepen surfaces, keep gold accent. */
:root[data-theme="dark"] .cos-app,
.cos-app[data-cos-theme="dark"] {
  --cos-ink: #f5eedf;
  --cos-cream: #141416;
  --cos-cream-2: #1a1a1d;
  --cos-white: #1f1f23;
  --cos-gold: #e3c46f;
  --cos-line: rgba(212, 175, 55, 0.14);
  --cos-line-2: rgba(212, 175, 55, 0.28);
  --cos-shadow: 0 10px 28px rgba(0,0,0,0.4);
  --cos-shadow-lg: 0 28px 70px rgba(0,0,0,0.55);
}

.cos-app *, .cos-app *::before, .cos-app *::after { box-sizing: border-box; }

/* ===================================================================
   1. LAYOUT
   =================================================================== */
.cos-main { grid-column: 2; display: flex; flex-direction: column; width: 100%; min-width: 0; height: 100vh; }
/* The mobile nav backdrop must NOT occupy a grid column on desktop. */
.cos-backdrop { display: none; }
.cos-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: clamp(20px, 4vw, 44px); }
.cos-page { width: 100%; max-width: 1280px; margin: 0 auto; }
.cos-page > * { animation: ds-rise var(--dur-3) var(--ease) both; }

/* ===================================================================
   2. SIGN-IN GATE
   =================================================================== */
.cos-gate {
  position: fixed; inset: 0; z-index: 1001;
  display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(212,175,55,0.18), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(212,175,55,0.12), transparent 55%),
    #0e0d0b;
  color: #f5eedf; font-family: var(--font-ui);
}
.cos-gate[hidden] { display: none; }
.cos-gate__card {
  width: min(520px, 100%); background: rgba(28,25,18,0.72);
  border: 1px solid rgba(212,175,55,0.28); border-radius: var(--r-xl);
  padding: clamp(28px, 5vw, 44px); box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  backdrop-filter: blur(14px);
}
.cos-gate__logo { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--cos-gold-bright), #8a6f34); color: #1a1408; font-weight: 800; font-size: 1.3rem; margin-bottom: 18px; }
.cos-gate__eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: var(--fs-xs); color: var(--cos-gold-bright); margin: 0 0 8px; font-weight: 600; }
.cos-gate__title { font-family: var(--font-display); font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.1; margin: 0 0 10px; color: #fbf5e6; }
.cos-gate__lead { color: #cfc6b2; margin: 0 0 24px; line-height: 1.55; }
.cos-gate__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; color: #b3a988; margin: 0 0 10px; }
.cos-persona {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 14px 16px; margin-bottom: 10px; border-radius: var(--r-md); cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(212,175,55,0.2); color: #f0e8d5;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease), background var(--dur-2);
}
.cos-persona:hover { border-color: rgba(212,175,55,0.5); transform: translateY(-2px); background: rgba(255,255,255,0.07); }
.cos-persona__badge { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(212,175,55,0.35), rgba(138,111,52,0.35)); color: #fbf5e6; font-weight: 700; }
.cos-persona__name { font-weight: 600; }
.cos-persona__meta { font-size: var(--fs-xs); color: #b3a988; }
.cos-persona__go { margin-left: auto; color: var(--cos-gold-bright); }
.cos-gate__foot { margin-top: 18px; font-size: var(--fs-xs); color: #8f866c; line-height: 1.5; }
.cos-gate__foot a, .cos-gate__admin { color: var(--cos-gold-bright); background: none; border: none; cursor: pointer; font: inherit; text-decoration: underline; }

/* ===================================================================
   3. SIDEBAR + TOPBAR
   =================================================================== */
.cos-side {
  grid-column: 1;
  background: #100f0c; color: #e9e1cd; display: flex; flex-direction: column;
  border-right: 1px solid rgba(212,175,55,0.16); min-height: 0;
}
.cos-side__brand { display: flex; align-items: center; gap: 12px; padding: 20px 18px; border-bottom: 1px solid rgba(212,175,55,0.12); }
.cos-side__logo { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--cos-gold-bright), #8a6f34); color: #1a1408; font-weight: 800; }
.cos-side__brandtext b { display: block; font-size: 0.95rem; color: #fbf5e6; letter-spacing: 0.02em; }
.cos-side__brandtext span { font-size: var(--fs-xs); color: #a99f82; letter-spacing: 0.1em; text-transform: uppercase; }

.cos-side__client { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(212,175,55,0.1); }
.cos-side__avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover;
  background: linear-gradient(140deg, rgba(212,175,55,0.4), rgba(138,111,52,0.4)); display: grid; place-items: center; color: #fbf5e6; font-weight: 700; overflow: hidden; }
.cos-side__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cos-side__cname { font-weight: 600; font-size: 0.9rem; color: #fbf5e6; }
.cos-side__cplan { font-size: var(--fs-xs); color: var(--cos-gold-bright); }

.cos-nav { flex: 1; overflow-y: auto; padding: 12px 12px 20px; }
.cos-navlink {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 14px; margin-bottom: 3px; border-radius: var(--r-md); cursor: pointer;
  background: none; border: 1px solid transparent; color: #cfc6b1; font: inherit; font-size: 0.9rem;
  transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.cos-navlink:hover { background: rgba(212,175,55,0.08); color: #fbf5e6; }
.cos-navlink.is-active { background: rgba(212,175,55,0.14); color: #fbf5e6; border-color: rgba(212,175,55,0.3); }
.cos-navlink__icon { width: 20px; text-align: center; color: var(--cos-gold-bright); font-size: 0.95rem; }
.cos-navlink__lock { margin-left: auto; font-size: 0.75rem; opacity: 0.7; }
.cos-navlink.is-locked { color: #948b70; }
.cos-navlink.is-locked:hover { background: rgba(212,175,55,0.06); }
.cos-side__foot { padding: 14px 18px; border-top: 1px solid rgba(212,175,55,0.1); font-size: var(--fs-xs); color: #8f866c; line-height: 1.5; }

.cos-top {
  display: flex; align-items: center; gap: 14px; padding: 14px clamp(16px, 3vw, 32px);
  background: var(--cos-cream-2); border-bottom: 1px solid var(--cos-line); position: sticky; top: 0; z-index: 5;
}
.cos-top__crumb { color: var(--ds-text-lo); font-size: var(--fs-sm); }
.cos-top__crumb b { color: var(--cos-ink); }
.cos-top__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cos-menu-toggle { display: none; }

/* ===================================================================
   4. HERO
   =================================================================== */
.cos-hero {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  padding: clamp(26px, 4vw, 44px); margin-bottom: 26px; color: #f6efdd;
  background:
    radial-gradient(900px 400px at 85% -20%, rgba(212,175,55,0.28), transparent 60%),
    radial-gradient(700px 500px at -10% 120%, rgba(212,175,55,0.14), transparent 55%),
    linear-gradient(135deg, #17140d 0%, #221d12 60%, #17140d 100%);
  box-shadow: var(--cos-shadow-lg);
  border: 1px solid rgba(212,175,55,0.2);
}
.cos-hero__row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cos-hero__avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; overflow: hidden;
  background: linear-gradient(140deg, rgba(212,175,55,0.5), rgba(138,111,52,0.5)); display: grid; place-items: center; color: #fbf5e6; font-weight: 700; font-size: 1.3rem; border: 2px solid rgba(212,175,55,0.4); }
.cos-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cos-hero__eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: var(--fs-xs); color: var(--cos-gold-bright); margin: 0 0 6px; font-weight: 600; }
.cos-hero__title { font-family: var(--font-display); font-size: clamp(1.8rem, 4.5vw, 3rem); line-height: 1.08; margin: 0; color: #fbf5e6; }
.cos-hero__logo { margin-left: auto; max-height: 44px; max-width: 130px; opacity: 0.95; }
.cos-hero__msg { margin: 18px 0 0; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.55; color: #e4dcc4; max-width: 62ch; }
.cos-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cos-hero__chip { font-size: var(--fs-xs); padding: 5px 12px; border-radius: var(--r-pill);
  background: rgba(212,175,55,0.14); border: 1px solid rgba(212,175,55,0.3); color: #f0e6cc; }
.cos-hero__cta { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ===================================================================
   5. PRIMITIVES (client-flavored, on cream/white)
   =================================================================== */
.cos-card {
  background: var(--cos-white); border: 1px solid var(--cos-line); border-radius: var(--r-lg);
  padding: clamp(18px, 2.5vw, 26px); box-shadow: var(--cos-shadow);
}
.cos-card--pad-sm { padding: 18px; }
.cos-card--interactive { cursor: pointer; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2), border-color var(--dur-2); }
.cos-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--cos-shadow-lg); border-color: var(--cos-line-2); }

.cos-grid { display: grid; gap: 18px; }
.cos-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cos-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cos-grid--4 { grid-template-columns: repeat(4, 1fr); }
.cos-grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.cos-eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: var(--fs-xs); color: var(--cos-gold); font-weight: 600; margin: 0 0 6px; }
.cos-h1 { font-family: var(--font-display); font-size: clamp(1.7rem, 3.5vw, 2.4rem); line-height: 1.1; margin: 0 0 6px; color: var(--cos-ink); }
.cos-h2 { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.15; margin: 0 0 4px; color: var(--cos-ink); }
.cos-lead { color: var(--ds-text-lo); font-size: var(--fs-md); line-height: 1.55; margin: 0; }
.cos-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 30px 0 16px; flex-wrap: wrap; }
.cos-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ds-text-mute); margin: 0 0 4px; }

.cos-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: var(--r-md);
  border: 1px solid var(--cos-line-2); background: var(--cos-white); color: var(--cos-ink);
  font: inherit; font-weight: 600; font-size: var(--fs-sm); cursor: pointer;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2), border-color var(--dur-2), background var(--dur-2);
}
.cos-btn:hover { transform: translateY(-1px); box-shadow: var(--cos-shadow); border-color: var(--cos-gold); }
.cos-btn--primary { background: linear-gradient(135deg, var(--cos-gold-bright), #b79149); color: #211a08; border-color: transparent; box-shadow: 0 8px 22px rgba(212,175,55,0.28); }
.cos-btn--primary:hover { box-shadow: 0 12px 30px rgba(212,175,55,0.4); }
.cos-btn--ghost { background: transparent; }
.cos-btn--onhero { background: rgba(255,255,255,0.08); color: #fbf5e6; border-color: rgba(212,175,55,0.4); }
.cos-btn--onhero:hover { background: rgba(255,255,255,0.14); }
.cos-btn--sm { padding: 7px 12px; font-size: var(--fs-xs); }
.cos-btn--block { width: 100%; justify-content: center; }

.cos-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--cos-cream); border: 1px solid var(--cos-line); color: var(--ds-text-lo); }
.cos-chip--gold { background: rgba(212,175,55,0.12); border-color: rgba(212,175,55,0.35); color: var(--cos-gold); font-weight: 600; }
.cos-chip--ok { background: var(--ds-positive-soft); border-color: transparent; color: var(--ds-positive); }
.cos-chip--warn { background: var(--ds-danger-soft); border-color: transparent; color: var(--ds-danger-strong); }
.cos-chip--lock { background: rgba(28,24,14,0.05); color: var(--ds-text-mute); }

.cos-metric { background: var(--cos-white); border: 1px solid var(--cos-line); border-radius: var(--r-lg); padding: 18px 20px; }
.cos-metric__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ds-text-mute); margin: 0 0 8px; }
.cos-metric__value { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--cos-ink); }
.cos-metric__value small { font-size: 0.9rem; color: var(--ds-text-lo); font-family: var(--font-ui); }
.cos-metric__sub { font-size: var(--fs-xs); color: var(--ds-text-lo); margin-top: 6px; }

/* progress bar */
.cos-bar { height: 8px; border-radius: var(--r-pill); background: var(--cos-cream); overflow: hidden; border: 1px solid var(--cos-line); }
.cos-bar__fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, #b79149, var(--cos-gold-bright)); transition: width var(--dur-3) var(--ease); }
.cos-ring { display: grid; place-items: center; }

/* empty / loading / error states */
.cos-empty { text-align: center; padding: 32px 24px; border: 1px dashed var(--cos-line-2); border-radius: var(--r-lg); background: var(--cos-cream-2); }
.cos-empty__mark { font-size: 1.6rem; color: var(--cos-gold); }
.cos-empty__title { font-weight: 600; color: var(--cos-ink); margin: 8px 0 4px; }
.cos-empty__copy { color: var(--ds-text-lo); font-size: var(--fs-sm); margin: 0 auto; max-width: 42ch; }
.cos-skel { background: linear-gradient(90deg, var(--cos-cream) 25%, var(--cos-cream-2) 37%, var(--cos-cream) 63%); background-size: 480px 100%; animation: ds-shimmer 1.4s infinite linear; border-radius: var(--r-sm); }

/* insight / check-in banner */
.cos-insight { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(212,175,55,0.04)); border: 1px solid rgba(212,175,55,0.28); }
.cos-insight__mark { color: var(--cos-gold); font-size: 1.1rem; flex: none; }
.cos-insight__body { flex: 1; }
.cos-insight__body p { margin: 0; color: var(--ds-text); line-height: 1.5; }
.cos-insight__x { background: none; border: none; cursor: pointer; color: var(--ds-text-mute); font-size: 1.1rem; line-height: 1; }

/* list rows */
.cos-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cos-line); }
.cos-row:last-child { border-bottom: none; }
.cos-row__main { flex: 1; min-width: 0; }
.cos-row__title { font-weight: 600; color: var(--cos-ink); }
.cos-row__meta { font-size: var(--fs-xs); color: var(--ds-text-lo); }

.cos-check { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--cos-line-2); display: grid; place-items: center; flex: none; cursor: pointer; background: var(--cos-white); }
.cos-check.is-done { background: var(--cos-gold); border-color: var(--cos-gold); color: #211a08; }

/* ===================================================================
   6. PAGE-SPECIFIC
   =================================================================== */

/* --- AI Coach --- */
.cos-coach { display: grid; grid-template-columns: 280px 1fr; gap: 0; height: calc(100vh - 60px);
  background: var(--cos-white); border: 1px solid var(--cos-line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--cos-shadow); }
.cos-coach__list { border-right: 1px solid var(--cos-line); display: flex; flex-direction: column; min-height: 0; background: var(--cos-cream-2); }
.cos-coach__listhead { padding: 16px; border-bottom: 1px solid var(--cos-line); }
.cos-coach__convs { flex: 1; overflow-y: auto; padding: 8px; }
.cos-convitem { width: 100%; text-align: left; padding: 11px 12px; border-radius: var(--r-md); border: 1px solid transparent; background: none; cursor: pointer; font: inherit; margin-bottom: 3px; }
.cos-convitem:hover { background: var(--cos-cream); }
.cos-convitem.is-active { background: rgba(212,175,55,0.12); border-color: rgba(212,175,55,0.28); }
.cos-convitem__t { font-weight: 600; font-size: var(--fs-sm); color: var(--cos-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cos-convitem__m { font-size: var(--fs-xs); color: var(--ds-text-mute); }
.cos-coach__panel { display: flex; flex-direction: column; min-height: 0; }
.cos-coach__thread { flex: 1; overflow-y: auto; padding: 22px clamp(16px, 3vw, 30px); display: flex; flex-direction: column; gap: 14px; }
.cos-msg { max-width: 74%; padding: 13px 16px; border-radius: 16px; line-height: 1.5; white-space: pre-wrap; animation: ds-rise var(--dur-2) var(--ease) both; }
.cos-msg--user { align-self: flex-end; background: linear-gradient(135deg, var(--cos-gold-bright), #b79149); color: #211a08; border-bottom-right-radius: 5px; }
.cos-msg--coach { align-self: flex-start; background: var(--cos-cream); border: 1px solid var(--cos-line); color: var(--ds-text); border-bottom-left-radius: 5px; }
.cos-msg__time { display: block; font-size: 0.66rem; opacity: 0.6; margin-top: 6px; }
.cos-msg strong { color: var(--cos-ink); }
.cos-typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 14px 18px; background: var(--cos-cream); border: 1px solid var(--cos-line); border-radius: 16px; }
.cos-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--cos-gold); animation: ds-glow-pulse 1s infinite; }
.cos-typing span:nth-child(2) { animation-delay: 0.15s; }
.cos-typing span:nth-child(3) { animation-delay: 0.3s; }
.cos-coach__suggest { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 clamp(16px, 3vw, 30px) 10px; }
.cos-suggest { font-size: var(--fs-xs); padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid var(--cos-line-2); background: var(--cos-white); cursor: pointer; color: var(--ds-text); }
.cos-suggest:hover { border-color: var(--cos-gold); color: var(--cos-ink); }
.cos-coach__compose { display: flex; gap: 10px; align-items: flex-end; padding: 14px clamp(16px, 3vw, 30px); border-top: 1px solid var(--cos-line); background: var(--cos-cream-2); }
.cos-coach__input { flex: 1; resize: none; min-height: 46px; max-height: 160px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--cos-line-2); background: var(--cos-white); font: inherit; color: var(--ds-text); }
.cos-coach__input:focus { outline: none; border-color: var(--cos-gold); }
.cos-coach__usage { font-size: var(--fs-xs); color: var(--ds-text-mute); padding: 0 clamp(16px,3vw,30px) 10px; }
.cos-coach__disclaimer { font-size: 0.68rem; color: var(--ds-text-mute); text-align: center; padding: 0 16px 10px; }

/* --- HLC Coach: package badge + structured advisory --- */
.cos-coach__topbar { display: flex; align-items: center; gap: 12px; padding: 12px clamp(16px, 3vw, 30px); border-bottom: 1px solid var(--cos-line); background: var(--cos-cream-2); flex-wrap: wrap; }
.cos-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.03em; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(212,175,55,0.14); border: 1px solid rgba(212,175,55,0.4); color: var(--cos-gold); }
.cos-badge--growth { background: rgba(111,122,62,0.14); border-color: rgba(111,122,62,0.4); color: var(--ds-positive); }
.cos-badge--accelerator { background: rgba(28,24,14,0.06); border-color: var(--cos-line-2); color: var(--cos-ink); }
.cos-coach__hint { font-size: var(--fs-xs); color: var(--ds-text-lo); }

.cos-msg--advisory { max-width: 92%; padding: 6px; background: transparent; border: none; }
.cos-adv { display: flex; flex-direction: column; gap: 12px; }
.cos-adv-sec { background: var(--cos-cream); border: 1px solid var(--cos-line); border-radius: var(--r-md); padding: 12px 14px; }
.cos-adv-label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cos-gold); font-weight: 700; margin-bottom: 6px; }
.cos-adv-sec p { margin: 0; color: var(--ds-text); line-height: 1.5; }
.cos-adv-list { margin: 4px 0 0; padding-left: 18px; color: var(--ds-text); line-height: 1.55; }
.cos-adv-list li { margin-bottom: 4px; }
.cos-adv-followup { margin: 2px 4px; color: var(--cos-ink); font-weight: 600; }
.cos-adv-note { margin: 0 4px; font-size: 0.66rem; color: var(--ds-text-mute); font-style: italic; }

/* Calm advisory recommendation card - deliberately NOT a sales banner. */
.cos-rec { border: 1px solid rgba(212,175,55,0.4); border-radius: var(--r-md); padding: 14px 16px; background: linear-gradient(135deg, rgba(212,175,55,0.08), var(--cos-white)); }
.cos-rec__tag { display: inline-block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cos-gold); font-weight: 700; margin-bottom: 6px; }
.cos-rec__name { font-family: var(--font-display); font-size: 1.15rem; color: var(--cos-ink); }
.cos-rec__why { margin: 4px 0 10px; color: var(--ds-text-lo); font-size: var(--fs-sm); line-height: 1.5; }
.cos-rec__unlocks { margin-bottom: 10px; }
.cos-rec__unlocks span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ds-text-mute); }
.cos-rec__unlocks ul { margin: 4px 0 0; padding-left: 18px; color: var(--ds-text); font-size: var(--fs-sm); line-height: 1.5; }
.cos-rec__benefit { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--ds-text); }

/* --- HLC Growth Specialist card (calm, not a sales handoff) --- */
.cos-specialist { border: 1px solid var(--cos-line-2); border-radius: var(--r-md); padding: 16px 18px; background: var(--cos-white); box-shadow: var(--cos-shadow); }
.cos-specialist__tag { display: inline-block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cos-gold); font-weight: 700; margin-bottom: 6px; }
.cos-specialist__title { font-family: var(--font-display); font-size: 1.2rem; color: var(--cos-ink); }
.cos-specialist__desc { margin: 6px 0 10px; color: var(--ds-text-lo); font-size: var(--fs-sm); line-height: 1.5; }
.cos-specialist__benefits { margin: 0 0 14px; padding-left: 18px; color: var(--ds-text); font-size: var(--fs-sm); line-height: 1.55; }
.cos-specialist__benefits li { margin-bottom: 3px; }
.cos-specialist__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.cos-specialist__note { margin: 12px 0 0; font-size: var(--fs-xs); color: var(--ds-text-mute); line-height: 1.5; }

/* --- Billing: payment-history table --- */
.cos-billtable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 620px; }
.cos-billtable th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ds-text-mute); padding: 8px 12px; border-bottom: 1px solid var(--cos-line); white-space: nowrap; }
.cos-billtable td { padding: 12px; border-bottom: 1px solid var(--cos-line); color: var(--ds-text); vertical-align: middle; white-space: nowrap; }
.cos-billtable tr:last-child td { border-bottom: none; }
.cos-txn { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.72rem; background: var(--cos-cream); padding: 2px 7px; border-radius: 6px; border: 1px solid var(--cos-line); color: var(--ds-text-lo); }

/* --- Explore Support --- */
.cos-offer { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 0; }
.cos-offer__vis { height: 128px; position: relative; }
.cos-offer__vis[data-grad="a"] { background: linear-gradient(135deg, #1c1810, #3a2f17 70%, #1c1810); }
.cos-offer__vis[data-grad="b"] { background: linear-gradient(135deg, #201a10, #4a3a1c 70%, #201a10); }
.cos-offer__vis[data-grad="c"] { background: linear-gradient(135deg, #17150f, #2f2713 70%, #17150f); }
.cos-offer__vis::after { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 200px at 80% -30%, rgba(212,175,55,0.35), transparent 60%); }
.cos-offer__badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
.cos-offer__badge--feat { position: absolute; top: 12px; right: 12px; left: auto; }
.cos-offer__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.cos-offer__name { font-family: var(--font-display); font-size: 1.2rem; color: var(--cos-ink); margin: 0 0 4px; }
.cos-offer__cat { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cos-gold); margin: 0 0 10px; }
.cos-offer__trans { color: var(--ds-text-lo); font-size: var(--fs-sm); line-height: 1.5; margin: 0 0 16px; flex: 1; }
.cos-offer__foot { display: flex; align-items: center; gap: 10px; }
.cos-offer__reason { font-size: var(--fs-xs); color: var(--cos-gold); margin: 0 0 12px; font-style: italic; }

/* --- Locked detail / diagnostic modal --- */
.cos-modal-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(14,13,11,0.6); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; animation: ds-fade var(--dur-2) var(--ease) both; }
.cos-modal { width: min(680px, 100%); max-height: 90vh; overflow-y: auto; background: var(--cos-white); border-radius: var(--r-xl); box-shadow: var(--cos-shadow-lg); border: 1px solid var(--cos-line); animation: ds-rise var(--dur-2) var(--ease) both; }
.cos-modal__vis { height: 150px; position: relative; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.cos-modal__x { position: absolute; top: 14px; right: 14px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,0.14); color: #fff; cursor: pointer; font-size: 1.1rem; }
.cos-modal__body { padding: clamp(22px, 4vw, 34px); }
.cos-modal__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--cos-ink); margin: 0 0 8px; }
.cos-modal__section { margin-top: 20px; }
.cos-modal__section h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--cos-gold); margin: 0 0 8px; }
.cos-modal__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.cos-diag-opt { width: 100%; text-align: left; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--cos-line-2); background: var(--cos-white); cursor: pointer; font: inherit; margin-bottom: 8px; color: var(--cos-ink); font-weight: 500; transition: border-color var(--dur-2), transform var(--dur-1); }
.cos-diag-opt:hover { border-color: var(--cos-gold); transform: translateX(3px); }
.cos-faq summary { cursor: pointer; padding: 12px 0; border-bottom: 1px solid var(--cos-line); font-weight: 600; color: var(--cos-ink); }
.cos-faq p { color: var(--ds-text-lo); font-size: var(--fs-sm); padding: 8px 0 14px; margin: 0; }

/* --- Milestone timeline --- */
.cos-timeline { position: relative; padding-left: 26px; }
.cos-timeline::before { content: ""; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--cos-line-2); }
.cos-tl-item { position: relative; padding: 0 0 20px; }
.cos-tl-item::before { content: ""; position: absolute; left: -22px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--cos-white); border: 2px solid var(--cos-line-2); }
.cos-tl-item.is-done::before { background: var(--cos-gold); border-color: var(--cos-gold); }
.cos-tl-item__t { font-weight: 600; color: var(--cos-ink); }
.cos-tl-item__d { font-size: var(--fs-xs); color: var(--ds-text-lo); }

/* --- fields (profile / forms) --- */
.cos-field { margin-bottom: 16px; }
.cos-field label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ds-text-lo); margin-bottom: 6px; font-weight: 600; }
.cos-input, .cos-textarea, .cos-select {
  width: 100%; padding: 11px 13px; border-radius: var(--r-md); border: 1px solid var(--cos-line-2);
  background: var(--cos-white); font: inherit; color: var(--ds-text);
}
.cos-input:focus, .cos-textarea:focus, .cos-select:focus { outline: none; border-color: var(--cos-gold); }
.cos-textarea { resize: vertical; min-height: 90px; }
.cos-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--cos-line); margin-bottom: 22px; flex-wrap: wrap; }
.cos-tab { padding: 10px 16px; border: none; background: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--ds-text-lo); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cos-tab.is-active { color: var(--cos-ink); border-bottom-color: var(--cos-gold); }

/* --- asset gallery --- */
.cos-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.cos-asset { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--cos-line); aspect-ratio: 4/3; background: var(--cos-cream); }
.cos-asset img { width: 100%; height: 100%; object-fit: cover; }
.cos-asset__ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ds-text-mute); }
.cos-asset__label { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 10px; font-size: var(--fs-xs); background: linear-gradient(transparent, rgba(0,0,0,0.6)); color: #fff; }
.cos-asset__x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(0,0,0,0.5); color: #fff; cursor: pointer; }
.cos-upload { border: 1.5px dashed var(--cos-line-2); border-radius: var(--r-md); aspect-ratio: 4/3; display: grid; place-items: center; cursor: pointer; color: var(--ds-text-mute); background: var(--cos-cream-2); text-align: center; padding: 10px; }
.cos-upload:hover { border-color: var(--cos-gold); color: var(--cos-gold); }

/* ===================================================================
   7. TOAST
   =================================================================== */
.cos-toast-host { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 1200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.cos-toast { background: #17140d; color: #f6efdd; padding: 12px 20px; border-radius: var(--r-pill); box-shadow: var(--cos-shadow-lg); border: 1px solid rgba(212,175,55,0.3); font-size: var(--fs-sm); opacity: 0; transform: translateY(10px); transition: opacity var(--dur-2), transform var(--dur-2); }
.cos-toast.is-in { opacity: 1; transform: translateY(0); }

/* ===================================================================
   6b. DASHBOARDS - health score, roadmap, widgets, locked previews
   =================================================================== */
.cos-navlink__lock { color: var(--cos-gold-bright); }

.cos-widget { display: flex; flex-direction: column; }
.cos-widget .cos-metric__value { font-size: 1.7rem; margin-top: 4px; }

/* progress ring (conic-gradient) */
.cos-ring { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.cos-ring__circle { width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.cos-ring__circle::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--cos-white); }
.cos-ring__circle span { position: relative; font-family: var(--font-display); font-size: 1.7rem; color: var(--cos-ink); }
.cos-ring__circle span small { font-size: 0.9rem; color: var(--ds-text-lo); }
.cos-ring__label { font-size: var(--fs-xs); color: var(--ds-text-lo); }

/* health categories */
.cos-health-cat { padding: 14px 16px; border: 1px solid var(--cos-line); border-radius: var(--r-md); background: var(--cos-cream-2); }
.cos-health-cat .cos-row__meta { line-height: 1.45; }
.cos-linkbtn { background: none; border: none; color: var(--cos-gold); cursor: pointer; font: inherit; font-size: inherit; text-decoration: underline; padding: 0; }

/* roadmap dots */
.cos-rm-dot { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 0.7rem; color: #211a08; border: 2px solid var(--cos-line-2); background: var(--cos-white); }
.cos-rm-dot--ok { background: var(--ds-positive); border-color: var(--ds-positive); color: #fff; }
.cos-rm-dot--gold { background: var(--cos-gold-bright); border-color: var(--cos-gold-bright); }
.cos-rm-dot--warn { background: var(--ds-danger); border-color: var(--ds-danger); color: #fff; }
.cos-rm-dot--lock { background: var(--cos-cream); }

/* preview hero (locked dashboards + upgrade nudges) */
.cos-preview-hero { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }

/* blurred sample widgets on locked previews */
.cos-preview-grid { position: relative; }
.cos-preview-widget { position: relative; overflow: hidden; }
.cos-blur { filter: blur(7px); opacity: 0.7; user-select: none; pointer-events: none; font-family: var(--font-display); font-size: 1.7rem; color: var(--cos-ink); margin-top: 4px; }
.cos-preview-lock { position: absolute; top: 12px; right: 14px; color: var(--cos-gold); font-size: 1rem; }

/* chip variants used by dashboards */
.cos-chip--gold { font-weight: 600; }

/* ===================================================================
   8. RESPONSIVE
   =================================================================== */
@media (max-width: 1024px) {
  .cos-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .cos-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .cos-coach { grid-template-columns: 1fr; }
  .cos-coach__list { display: none; }
  .cos-coach.show-list .cos-coach__list { display: flex; position: absolute; inset: 0; z-index: 2; }
}
@media (max-width: 860px) {
  .cos-app { grid-template-columns: 1fr; }
  .cos-main { grid-column: 1 / -1; }   /* full width - sidebar is now position:fixed, out of grid flow */
  .cos-side { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 30; transform: translateX(-100%); transition: transform var(--dur-2) var(--ease); }
  .cos-app.nav-open .cos-side { transform: translateX(0); box-shadow: var(--cos-shadow-lg); }
  .cos-backdrop { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity var(--dur-2); }
  .cos-app.nav-open .cos-backdrop { opacity: 1; pointer-events: auto; }
  .cos-menu-toggle { display: inline-flex; }
}
@media (max-width: 620px) {
  .cos-grid--2, .cos-grid--3, .cos-grid--4 { grid-template-columns: 1fr; }
  .cos-msg { max-width: 88%; }
  .cos-hero__logo { display: none; }
}