/* Littlest Dreamer — Coach hub styles
 *
 * Loaded by little-rhythms-insights.html after lr-theme.css. Defines the
 * .coach-hub-card layout, tone tokens (light + dark), and empty-state
 * styling. No JS depends on these class names being stable; the markup
 * is owned by lr-coach-ui.js.
 *
 * NOTE: class names are prefixed `.coach-hub-*` to avoid colliding with the
 * pre-existing `.coach-card` class defined inline in little-rhythms-insights.html
 * (used by "Today coach", "Overnight read", and "Personal trends"). The inline
 * <style> block loads after this file, so an unprefixed `.coach-card` here
 * would lose specificity and mangle our layout.
 *
 * Layout: cards stack vertically. Each card has an internal eyebrow +
 * headline + body — matching the Day-view recap card pattern so Coach
 * doesn't visually diverge from the rest of insights.
 */

/* Coach tones now route through five distinct hue families so each
 * card type reads as itself, especially on the 4px border-left in
 * dark mode where pre-polish all four tones were periwinkle/gold variants
 * that compressed to a single band.
 *
 * Brand-pigment rules respected: --honey stays brand/premium-only, and
 * --sage-dark stays brand-italic / primary-CTA only. The Coach uses
 * (in light → dark):
 *   win        → --status-good   (blue-green → mint)
 *   observation→ --sage          (periwinkle, mid-tone, distinct from CTA)
 *   context    → --plum          (dusty plum, dark = lighter plum)
 *   action     → --terracotta    (warm orange)
 *   calm-empty → --muted         (warm grey)
 */
:root {
  --coach-tone-win:         var(--status-good, #5e7fa8);
  --coach-tone-observation: var(--sage, #8b8fcf);
  --coach-tone-context:     var(--plum, #6b4c7a);
  --coach-tone-action:      var(--terracotta, #c4986c);
  --coach-tone-calm-empty:  var(--muted, #75726d);

  --coach-card-bg:    var(--surface, #ffffff);
  --coach-card-radius: 20px;
  --coach-card-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04));
}

/* Dark mode: tone variables inherit through --status-good / --sage /
 * --plum / --terracotta / --muted (all overridden in lr-theme.css).
 * Card bg gets a subtle per-tone tint so the carrier isn't a 4px stripe
 * alone — addresses the "all tones look the same in dark" finding. */
html.lr-dark {
  --coach-card-bg: #1f1b2d;
}

/* #view-coach defaults to display:block. switchView() in insights.html
   toggles inline style.display on the four view containers as the user
   navigates tabs. */

.coach-hub-card {
  background: var(--coach-card-bg);
  border-radius: var(--coach-card-radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--coach-card-shadow);
  border: 1.5px solid transparent;
  border-left-width: 4px;
  transition: border-color 0.15s;
}
.coach-hub-card[data-tone="win"]         { border-left-color: var(--coach-tone-win); }
.coach-hub-card[data-tone="observation"] { border-left-color: var(--coach-tone-observation); }
.coach-hub-card[data-tone="context"]     { border-left-color: var(--coach-tone-context); }
.coach-hub-card[data-tone="action"]      { border-left-color: var(--coach-tone-action); }
.coach-hub-card[data-tone="calm-empty"]  { border-left-color: var(--coach-tone-calm-empty); }

/* Dark-mode: rely on the 4px border-left stripe alone for tone signal.
 * The original Tier 3 fix added 7% color-mix bg tints, but in real
 * Coach views the binary "tinted vs calm-empty untinted" effect made
 * active cards look highlighted relative to empty-state ones. The
 * 5-hue stripe (status-good / sage / plum / terracotta / muted) is
 * distinct enough on its own. */

.coach-hub-card-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted, #75726d);
  margin-bottom: 8px;
}

.coach-hub-card-headline {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--charcoal, #1a1a18);
  margin-bottom: 6px;
}

.coach-hub-card-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--charcoal, #1a1a18);
  margin: 0;
}

.coach-hub-card-text + .coach-hub-card-drillin {
  margin-top: 8px;
}

.coach-hub-card-drillin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--sage-dark, #4a4a8c);
  text-decoration: none;
}
.coach-hub-card-drillin:hover { text-decoration: underline; }

/* Tap-through action button — used by detectors that want a specific
   CTA on the card (e.g. M15's "Open scheduler" when a stale schedule
   bracket is detected). Visual sibling to .coach-hub-card-drillin but
   filled for stronger affordance since the action is the primary intent. */
.coach-hub-card-text + .coach-hub-card-action {
  margin-top: 12px;
}
.coach-hub-card-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--warm-white, #faf6ee);
  background: var(--sage-dark, #4a4a8c);
  border-radius: 999px;
  text-decoration: none;
}
.coach-hub-card-action:hover { opacity: 0.9; }

/* Primary CTA shown on coach-hub cards (e.g. weekly check-in "Share a
   quick check-in →"). Sage-dark pill matching the .lr-auth-cta recipe
   so the visual language stays cohesive across the modal + Coach. */
.coach-hub-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 12px;
  padding: 10px 18px;
  background: var(--sage-dark, #4a4a8c);
  color: white;
  border: none;
  border-radius: 50px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.coach-hub-card-cta:hover { background: #3a3a72; }
.coach-hub-card-cta:active { transform: scale(0.99); }

/* Empty-state and intro cards share the calm-empty tone. Headlines
   stay the same size + weight as action cards so the typography reads
   consistently across the hub; only the color is softened. */
.coach-hub-card[data-tone="calm-empty"] .coach-hub-card-headline {
  color: var(--muted, #75726d);
}

.coach-hub-empty-hero {
  background: transparent;
  text-align: center;
  padding: 24px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--muted, #75726d);
}

/* ── Account gates (lr-account-gate.js) ──────────────────────────────
 * Used by the tracker (full-page gate when signed out), insights
 * Day/Week/Month tabs, and the Coach preview. Styled to feel like an
 * empty-state hero — sits inside the same .container so paddings
 * inherit from the host page.
 */
.account-gate {
  background: var(--surface, #ffffff);
  border-radius: 24px;
  padding: 36px 28px;
  margin: 8px 0 24px;
  text-align: center;
  box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.05), 0 12px 40px rgba(0,0,0,0.08));
}

.account-gate-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-dark, #4a4a8c);
  margin-bottom: 12px;
}

.account-gate-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--charcoal, #1a1a18);
  margin: 0 0 12px 0;
}

.account-gate-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted, #75726d);
  max-width: 380px;
  margin: 0 auto 18px;
}

/* Soft reassurance line for users who already filled signup essentials
   then hit the Coach paywall — avoids bait-and-switch feel. Per the v1.1
   UX audit. Smaller than body, sits between body and premium pill. */
.account-gate-reassurance {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-style: italic;
  color: var(--muted, #75726d);
  max-width: 380px;
  margin: -6px auto 14px;
}

/* Premium disclosure pill — shown on premium-gated features (Coach,
   Weekly, Monthly) so signed-out users know a free account alone
   won't unlock the feature. Avoids bait-and-switch when they sign up. */
.account-gate-premium-note {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sage-dark, #4a4a8c);
  background: var(--sage-bg, #f0f0fa);
  border: 1px solid var(--border, #e0deef);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 0 auto 18px;
}
html.lr-dark .account-gate-premium-note {
  background: #21203a;
  border-color: #2f2c4a;
  color: #b8b8f0;
}

.account-gate-benefits {
  list-style: none;
  padding: 0;
  margin: 0 auto 22px;
  text-align: left;
  max-width: 360px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--charcoal, #1a1a18);
}
.account-gate-benefits li {
  position: relative;
  padding: 6px 0 6px 26px;
}
.account-gate-benefits li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage, #8b8fcf);
}

.account-gate-cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.account-gate-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sage-dark, #4a4a8c);
  color: var(--warm-white, #ffffff);
  border: none;
  border-radius: 999px;
  padding: 14px 30px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  min-height: 44px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  box-shadow: 0 4px 18px rgba(74,74,140,0.22);
}
.account-gate-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(74,74,140,0.28);
}
.account-gate-cta-primary:active { transform: translateY(0); }

.account-gate-cta-secondary {
  background: transparent;
  color: var(--sage-dark, #4a4a8c);
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  padding: 8px 12px;
  min-height: 44px;
  cursor: pointer;
}

/* Coach preview — the static-sample cards above the CTA. We muffle the
   cards just enough to read as "this is a sample" without going so
   ghostly that the sample doesn't sell the value. */
.account-gate-preview-wrap {
  position: relative;
  margin-bottom: 16px;
}
.account-gate-preview-card {
  opacity: 0.92;
}
.account-gate-preview-watermark {
  position: absolute;
  top: 8px;
  right: 14px;
  z-index: 1;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted, #75726d);
  background: var(--surface, #ffffff);
  padding: 4px 8px;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.account-gate-coach {
  /* The Coach CTA sits right under the preview cards — drop the top
     margin so the spacing reads as one stacked block. */
  margin-top: 0;
}

/* ── Scheduler signup nudge ─────────────────────────────────────────
 * Smaller, less aggressive than the full-page gates. Lives at the top
 * of the scheduler .container, above the form card.
 */
.account-nudge {
  position: relative;
  background: var(--sage-bg, #f0f0fa);
  border: 1px solid var(--border, #e0deef);
  border-radius: 18px;
  padding: 18px 44px 18px 20px;
  margin: 8px 0 24px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(74,74,140,0.05), 0 4px 16px rgba(74,74,140,0.07));
}

.account-nudge-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--muted, #75726d);
  cursor: pointer;
  padding: 0;
}
.account-nudge-dismiss:hover { background: rgba(0,0,0,0.04); color: var(--charcoal, #1a1a18); }

.account-nudge-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--charcoal, #1a1a18);
  margin-bottom: 4px;
  line-height: 1.25;
}

.account-nudge-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--charcoal, #1a1a18);
  margin: 0 0 12px;
}

.account-nudge-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.account-nudge-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sage-dark, #4a4a8c);
  color: var(--warm-white, #ffffff);
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  min-height: 40px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  box-shadow: 0 2px 10px rgba(74,74,140,0.18);
}
.account-nudge-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(74,74,140,0.24); }

.account-nudge-signin {
  background: transparent;
  color: var(--sage-dark, #4a4a8c);
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  padding: 8px 6px;
  min-height: 40px;
  cursor: pointer;
}

html.lr-dark .account-nudge { background: #21203a; border-color: #2f2c4a; }