/* ============================================================
   Orthos Spelling — UI refresh layer (v1)
   Loaded AFTER orthos-spelling.css, so every rule here is an
   additive enhancement. Nothing structural (no display/grid/flex
   changes) — only depth, color, type weight, accent, and texture,
   so it can't break the base layout and is trivially reversible
   (remove the one <link> in base.html).
   Goal: turn the restrained base into something with focal points,
   brand warmth (gold + paper grain), and elevated "hero" data.
   ============================================================ */

:root {
  /* Deepen the shared elevation tokens — lifts EVERY card/panel that
     uses them, in one move. The base used near-invisible 0.04 alphas. */
  --card-shadow:
    0 1px 2px rgba(45, 27, 61, 0.05),
    0 10px 30px -10px rgba(45, 27, 61, 0.14);
  --card-hover-shadow:
    0 2px 6px rgba(45, 27, 61, 0.08),
    0 18px 46px -14px rgba(45, 27, 61, 0.20);
  --gold:        #C79450;   /* readable gold for text/accents on cream */
  --gold-line:   #E4C988;   /* lighter gold for rules/dividers */
}

/* --- Subtle paper grain across the whole app (matches the marketing
   site's warmth; near-invisible but kills the flat plastic feel) --- */
body {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

/* --- Eyebrows go gold + tracked → instant brand signal everywhere --- */
.dash-eyebrow, .home-hero-eyebrow, .entry-hero-eyebrow,
.class-hero-eyebrow, .recs-eyebrow, .ins-cat-head {
  color: var(--gold) !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

/* --- Headlines: a touch heavier + tighter for real hierarchy --- */
.dash-title, .home-hero-title, .class-hero-name,
.entry-hero-title, .recs-title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* --- Cards & panels: rounder + the deeper shadow, with a hover lift --- */
.auth-card, .block-card, .chart-panel, .focus-panel,
.recs-panel, .rec-card, .cat-summary-tile, .heatmap-wrap {
  border-radius: 16px;
  box-shadow: var(--card-shadow);
}
.block-card, .chart-panel { transition: box-shadow var(--t-normal),
                                         transform var(--t-normal); }
.block-card:hover, .chart-panel:hover {
  box-shadow: var(--card-hover-shadow);
  transform: translateY(-2px);
}

/* --- Hero data #1: the heat map, framed and elevated as the centerpiece --- */
.heatmap-wrap {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 14px;
}
.heat-cell { border-radius: 4px; }

/* --- Hero data #2: priority / "biggest opportunity" gets a gold spine --- */
.heatmap-priority, .focus-panel {
  border-left: 4px solid var(--gold);
}

/* --- Impact bars read as branded, not gray --- */
.ins-pattern-bar-fill, .ins-cat-bar-fill {
  background: linear-gradient(90deg, var(--teal-d), var(--teal)) !important;
}

/* --- Primary button: subtle depth + a real hover lift --- */
.btn-primary {
  background: linear-gradient(180deg, var(--teal), var(--teal-d));
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset,
              0 6px 16px -6px rgba(31, 90, 79, 0.5);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset,
              0 10px 22px -8px rgba(31, 90, 79, 0.55);
}

/* --- Gold rule under section eyebrows where they head a panel --- */
.recs-eyebrow::after, .dash-eyebrow::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 8px;
  background: var(--gold-line);
  border-radius: 2px;
}

/* --- Empty / first-run states: warm, inviting, not bare text --- */
.home-empty, .class-empty, .drilldown-empty, .block-bottom-empty {
  background: var(--card);
  border: 1px dashed var(--gold-line);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
}

/* --- Stat / KPI numbers pop a little more --- */
.ins-kpis { gap: 0; }

/* --- Insights "biggest opportunity": two columns so the worst-words
   fill the empty right half instead of floating below the lede --- */
.opportunity-callout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
  align-items: start;
}
.opp-words-col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-left: 1px solid var(--line);
  padding-left: 24px;
}
.opp-words-col .opportunity-words-label {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--warm); font-weight: 700; margin-bottom: 4px;
}
.opp-words-col .opportunity-word {
  display: flex; align-items: baseline; justify-content: space-between;
  width: 100%;
}
@media (max-width: 760px) {
  .opportunity-callout { grid-template-columns: 1fr; }
  .opp-words-col { border-left: none; padding-left: 0; margin-top: 10px; }
}