/* ────────────────────────────────────────────────────────────
   Rethink Culture — Design Tokens v2 (May 2026)
   Source of truth: design_handoff_ds_v2/Design System.html
   ──────────────────────────────────────────────────────────── */

:root {
  /* ── Scoring scale (Maslow-inspired 5-level culture health) ── */
  --color-thriving:   #347870;  /* score ≥ 85 */
  --color-healthy:    #50B0A2;  /* score ≥ 70 */
  --color-atrisk:     #F2B846;  /* score ≥ 55 */
  --color-critical:   #F2A349;  /* score ≥ 40 */
  --color-toxic:      #EC6444;  /* score <  40 */
  --color-neutral:    #6D727F;  /* N/A, skipped */

  /* ── Brand teal — CTA, focus ring, onboarding stepper, Merge pill
        DO NOT use for score thriving (use --color-thriving). ── */
  --teal:             #15C39A;
  --teal-dark:        #10A381;
  --teal-tint-bg:     rgba(21,195,154,0.06);
  --teal-tint-ring:   rgba(21,195,154,0.12);

  /* ── Slate scale (text + borders + neutral surfaces) ── */
  --ink:              #000000;
  --slate-7:          #374151;
  --slate-5:          #6b7280;
  --slate-4:          #9ca3af;
  --slate-2:          #e5e7eb;
  --slate-1:          #f9fafb;

  /* ── Semantic text + borders ── */
  --text-primary:     var(--ink);
  --text-secondary:   var(--slate-5);
  --text-hint:        var(--slate-4);
  --border-primary:   var(--slate-2);
  --border-secondary: #d1d5db;

  /* ── Brand accent (beta tag, brand mark only — NOT for danger) ── */
  --brand-orange:     #EC6444;

  /* ── Accent (inline title highlight, e.g. "Acme Corp?" in survey hero).
        Its own hue — distinct from the score "Critical" band (#F2A349) so a
        score colour never reads as the brand accent or vice-versa. ── */
  --accent-orange:    #FF9E2D;

  /* ── Surfaces ── */
  --bg-page:          #ffffff;          /* default app bg */
  --bg-subtle:        var(--slate-1);   /* table headers, alt rows */
  --bg-warm:          #f5f5f3;          /* onboarding + login */
  --bg-dark-hero:     #000000;          /* app header surface */
  --bg-dark-button:   #282828;          /* on-dark control surface (.btn-dark) */

  /* ── On-dark borders ── */
  --border-on-dark:      rgba(255,255,255,0.25); /* control edges */
  --border-on-dark-soft: rgba(255,255,255,0.15); /* tab-nav separator */

  /* ── Status tints (paired bg + text) ── */
  --status-ok-bg:     #ECFDF5; --status-ok-text:   #065F46;
  --status-warn-bg:   #FFF7ED; --status-warn-text: #9A3412;
  --status-err-bg:    #FEF2F2; --status-err-text:  #991B1B;
  --status-info-bg:   rgba(80,176,162,0.10);
  --status-info-text: #065F46;

  /* ── Cohort matrix diff scale (greens/reds, lighter than score scale) ── */
  --cohort-pos-30:    #B2E8E3;
  --cohort-pos-20:    #CCF0ED;
  --cohort-pos-10:    #E6F8F6;
  --cohort-neg-10:    #FFF6F5;
  --cohort-neg-20:    #FFEFEB;
  --cohort-neg-30:    #FFE6E1;

  /* ── Shape ── */
  --shadow-card:      0 2px 4px rgba(0,0,0,0.06);
  --shadow-card-lg:   0 2px 12px rgba(0,0,0,0.06);
  --shadow-pill:      0 2px 8px rgba(21,195,154,0.25);
  --shadow-pill-hover:0 4px 14px rgba(21,195,154,0.32);
  --shadow-modal:     0 20px 60px rgba(0,0,0,0.20);
  --radius-button:    8px;
  --radius-input:     10px;
  --radius-card:      16px;
  --radius-card-lg:   20px;
  --radius-pill:      9999px;

  /* ── Type ── */
  --font-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:        'SF Mono', 'Roboto Mono', monospace;

  /* ── Animation ── */
  --ease-out:         cubic-bezier(.4, 0, .2, 1);
  --dur-fast:         150ms;
  --dur-base:         200ms;
  --dur-slow:         300ms;

  /* ── Stat-tile tinted surfaces (Email Logs, App Logs, etc.) ── */
  --stat-blue-bg:      #EFF6FF;
  --stat-blue-border:  #BFDBFE;
  --stat-blue-fg:      #1D4ED8;
  --stat-blue-label:   #3B82F6;
  --stat-green-bg:     #ECFDF5;
  --stat-green-border: #A7F3D0;
  --stat-green-fg:     #047857;
  --stat-green-label:  #10B981;
  --stat-red-bg:       #FEF2F2;
  --stat-red-border:   #FECACA;
  --stat-red-fg:       #B91C1C;
  --stat-red-label:    #EF4444;
  --stat-yellow-bg:    #FEFCE8;
  --stat-yellow-border:#FDE68A;
  --stat-yellow-fg:    #A16207;
  --stat-yellow-label: #CA8A04;
}

/* ════════════════════════════════════════════════════════════════
   STAT TILES — admin metric callouts
   ════════════════════════════════════════════════════════════════ */

/* Base tile (use directly, or compose with a color variant) */
.stat {
  background: #ffffff;
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 16px 18px;
  text-align: center;
}
.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary, #000);
  line-height: 1.1;
}
.stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 6px;
}

/* Tinted variants — apply BOTH classes:  <div class="stat stat-red"> */
.stat-blue   { background: var(--stat-blue-bg);   border-color: var(--stat-blue-border); }
.stat-blue   .stat-value { color: var(--stat-blue-fg); }
.stat-blue   .stat-label { color: var(--stat-blue-label); }

.stat-green  { background: var(--stat-green-bg);  border-color: var(--stat-green-border); }
.stat-green  .stat-value { color: var(--stat-green-fg); }
.stat-green  .stat-label { color: var(--stat-green-label); }

.stat-red    { background: var(--stat-red-bg);    border-color: var(--stat-red-border); }
.stat-red    .stat-value { color: var(--stat-red-fg); }
.stat-red    .stat-label { color: var(--stat-red-label); }

.stat-yellow { background: var(--stat-yellow-bg); border-color: var(--stat-yellow-border); }
.stat-yellow .stat-value { color: var(--stat-yellow-fg); }
.stat-yellow .stat-label { color: var(--stat-yellow-label); }

/* ────────────────────────────────────────────────────────────
   Non-production environment cue: grey nav bar instead of black.
   Tells the operator at a glance they're on a local/staging
   snapshot, not the live production database. Only fires when
   <html data-env> is explicitly set and not "production" —
   pages that omit the attribute fall back to ink-black (safe
   default for any forgotten template). Templates set the
   attribute via the `app_env` context var:
       <html lang="en" data-env="{{ app_env }}">
   ──────────────────────────────────────────────────────────── */
html[data-env]:not([data-env="production"]) {
  --bg-dark-hero: #374151;  /* slate-7 — clearly grey vs ink-black */
}

/* ────────────────────────────────────────────────────────────
   Freemium paywall — frosted "locked section" + pricing sheet.

   A PAID-LOCKED section keeps rendering its real content and takes a
   frost overlay on top: the blur ramps in from nothing at the heading
   to full by roughly halfway down, so the first line stays readable and
   the rest dissolves. The frost is a commercial courtesy, not a
   security boundary — the real data is in the page by design.

   There is no ghost/cross-sell treatment here. Blurred placeholder bars
   were the ORIGINAL paywall design, before locked sections kept their
   real content; when that changed, the leftover shell briefly served the
   "you never ran this survey" case. It was deleted rather than kept:
   blur means "this exists and is withheld", which is precisely wrong for
   a survey that was never run. If the cross-sell gets built, it wants a
   real empty state, not a hand-me-down.
   ──────────────────────────────────────────────────────────── */
.rc-lock {
  position: relative; overflow: hidden;
  border: 1px solid var(--slate-2); border-radius: var(--radius-card);
  background: #fff; padding: 28px 24px; margin-bottom: 32px;
}
/* A locked section is TRUNCATED, like a paywalled article — not shown at full
   height under a blur. Without this a tall section (the group matrix runs to
   ~1600px) leaves hundreds of readable pixels before the gradient bites, and
   the unlock pill ends up far below the fold. */
.rc-lock--paid { max-height: 880px; }

/* Readable at the top, gone by the middle. The ramp is in PIXELS, not
   percentages, so every section frosts at the same rate whatever its height.
   Masking the overlay is what makes the blur gradual — backdrop-filter has no
   gradient of its own. Where backdrop-filter is unsupported the background
   gradient alone still obscures the content. */
.rc-frost {
  position: absolute; inset: 0; pointer-events: none;
  /* Above anything inside the section that makes its own stacking context —
     the group matrix's sticky first column would otherwise paint straight
     through the blur and stay perfectly readable. */
  z-index: 5;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0px, rgba(255,255,255,0.40) 380px, rgba(255,255,255,0.80) 680px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, rgba(0,0,0,0.4) 220px, #000 480px);
  mask-image: linear-gradient(to bottom, transparent 0px, rgba(0,0,0,0.4) 220px, #000 480px);
}
/* The locked section is inert: no tooltips, no "show more", no drilling in,
   and no dragging the blurred text out with a selection. */
.rc-lock-body { user-select: none; -webkit-user-select: none; pointer-events: none; }
.rc-lock-cta { position: absolute; inset: 0; z-index: 7; cursor: pointer; background: none; border: 0; padding: 0; }
.rc-lock-cta:focus-visible { outline: 2px solid var(--teal); outline-offset: -4px; border-radius: var(--radius-card); }

.rc-lock-overlay {
  position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 16px;
}
/* Paid locks pin the pill to the very bottom of the card, where the frost is
   thickest — anchored to the bottom edge rather than bottom-aligned inside a
   full-height box, so it lands in the same place whatever the section's
   height and never drifts up into readable content. */
.rc-lock-overlay.bottom {
  top: auto; bottom: 0; justify-content: flex-end; padding: 0 16px 26px;
}
.rc-lock-pill {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: #fff; border: 1px solid var(--slate-2); border-radius: 9999px;
  padding: 9px 20px; font-size: 13.5px; font-weight: 650; color: var(--ink);
  box-shadow: 0 2px 12px rgba(0,0,0,0.10); font-family: inherit;
}
.rc-lock-pill:hover { border-color: var(--teal); }

/* ────────────────────────────────────────────────────────────
   Pricing sheet — the dialog every lock opens.

   Three zones divided by full-height hairlines: the Free vs Pro
   comparison, the questions Pro answers, and the purchase.

   The copy is INVARIANT. It does not change with which section was
   clicked, and it says nothing about this survey's teams, comments or
   turnout — those would need per-workplace guards and would be wrong
   for anyone the numbers don't fit. The only thing that varies is the
   price, which has to: the band comes from headcount.
   ──────────────────────────────────────────────────────────── */
.rc-sheet-backdrop {
  position: fixed; inset: 0; background: rgba(17,24,39,0.45); z-index: 1000;
  display: none; align-items: flex-start; justify-content: center; padding: 40px 20px;
  overflow-y: auto;
}
.rc-sheet-backdrop.open { display: flex; }
.rc-sheet {
  position: relative; background: #fff; border-radius: 20px;
  width: 1000px; max-width: 100%; padding: 40px 42px 34px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
@media (max-width: 760px) { .rc-sheet { padding: 28px 20px 24px; } }

.rc-sheet-close {
  position: absolute; top: 16px; right: 20px; background: none; border: none;
  cursor: pointer; font-size: 20px; line-height: 1; color: var(--slate-4);
  padding: 0; font-family: inherit;
}
.rc-sheet-close:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 8px; }

.rc-sheet-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--slate-4); margin: 0 0 12px;
}
/* Serif headline, echoing the executive-summary card: this is an
   argument, not a UI label. */
.rc-sheet h2 {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-weight: 500; font-size: 29px; line-height: 1.2; letter-spacing: -0.015em;
  color: var(--ink); margin: 0 0 40px; text-wrap: balance;
}
.rc-sheet h2 em { font-style: italic; color: var(--teal-dark); }
@media (max-width: 760px) { .rc-sheet h2 { font-size: 23px; margin-bottom: 26px; } }

/* align-items: stretch is what carries the hairlines the full depth of
   the tallest zone instead of stopping at each zone's own content. */
.rc-sheet-zones {
  display: grid; grid-template-columns: 1fr 1.05fr 0.9fr; gap: 0; align-items: stretch;
}
.rc-sheet-zone { padding: 0 28px; border-left: 1px solid var(--slate-2); }
.rc-sheet-zone:first-child { padding-left: 0; border-left: none; }
.rc-sheet-zone:last-child { padding-right: 0; }
/* Stacked, a vertical rule divides nothing — so it becomes a horizontal one. */
@media (max-width: 900px) {
  .rc-sheet-zones { grid-template-columns: 1fr; }
  .rc-sheet-zone {
    border-left: none; border-top: 1px solid var(--slate-2); padding: 24px 0 0;
  }
  .rc-sheet-zone:first-child { border-top: none; padding-top: 0; }
}
.rc-sheet-zonehead {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--slate-4); margin: 0 0 16px;
}

/* Free vs Pro */
.rc-cmp { width: 100%; border-collapse: collapse; font-size: 13px; }
.rc-cmp th {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  color: var(--slate-4); padding: 0 4px 8px; text-align: center;
}
.rc-cmp th:first-child { text-align: left; }
.rc-cmp th.pro { color: var(--teal-dark); }
.rc-cmp td { padding: 7px 4px; border-top: 1px solid var(--slate-1); color: var(--slate-7); line-height: 1.4; }
.rc-cmp td.mark { text-align: center; width: 44px; }
.rc-cmp tr.gap td { padding-top: 14px; }
.rc-yes { color: var(--teal-dark); font-weight: 700; }
/* slate-4, not slate-2: the dash carries meaning ("not in Free"), so it has to
   be legible. At slate-2 on white it sits near 1.2:1 and effectively vanishes. */
.rc-no { color: var(--slate-4); }

/* What Pro answers */
.rc-q {
  font-size: 14px; color: var(--ink); padding: 11px 0 11px 24px; position: relative;
  line-height: 1.45; border-bottom: 1px solid var(--slate-1); margin: 0;
}
.rc-q:last-of-type { border-bottom: none; }
.rc-q::before {
  content: ""; position: absolute; left: 0; top: 14px; width: 15px; height: 15px;
  background: var(--teal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Get it */
.rc-buy { text-align: center; }
.rc-buy-price {
  font-size: 36px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1; margin: 0;
}
.rc-buy-price .per {
  font-size: 13px; font-weight: 600; color: var(--slate-5); letter-spacing: 0; margin-left: 6px;
}
.rc-buy-meta { font-size: 11px; color: var(--slate-4); margin: 5px 0 0; line-height: 1.5; }
.rc-buy-unlimited {
  background: rgba(21,195,154,0.12); border-radius: 12px; padding: 12px 14px; margin: 20px 0 0;
  font-size: 12.5px; color: var(--teal-dark); line-height: 1.5; text-align: left;
}
.rc-buy-unlimited b { display: block; font-size: 13px; margin-bottom: 2px; }
.rc-sheet-cta {
  display: block; width: 100%; text-align: center; border-radius: 9999px;
  padding: 14px 20px; font-size: 15px; font-weight: 650; color: #fff;
  background: var(--teal); text-decoration: none; cursor: pointer; border: none;
  font-family: inherit; margin-top: 16px;
}
.rc-sheet-cta:hover { background: var(--teal-dark); }
.rc-sheet-cta:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.rc-sheet-foot { font-size: 11px; color: var(--slate-4); text-align: center; margin: 13px 0 0; line-height: 1.55; }