/* =================================================================
   SCA Dashboard — Editorial Redesign
   -----------------------------------------------------------------
   Same DOM (sd-* classes from user-dashboard.js) but restyled to
   match the .sca-cc-ai AI portal:
     - Poppins + Playfair Display italics
     - JetBrains Mono eyebrows / labels
     - Navy ink + violet (#7c3aed) accent
     - Paper backgrounds, soft borders, gentle hover lift
   user-dashboard.js is unchanged. Inline styles set by the JS
   (icon-box colours, pill colours, topic-bar gradients) keep
   working — defaults below provide a violet fallback.
   ================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500;1,600&display=swap");

/* ── Root ── */
#sca-dashboard {
  /* Editorial palette (mirrors .sca-cc-ai) */
  --sd-ink:        #253551;
  --sd-ink-2:      #3a4968;
  --sd-paper:      #f6f8fc;
  --sd-paper-2:    #eef2f8;
  --sd-paper-3:    #d6dde9;
  --sd-rule:       #d6dde9;
  --sd-rule-2:     #bfc8d9;
  --sd-muted:      #6b7890;

  --sd-vio:        #7c3aed;
  --sd-vio-2:      #6d28d9;
  --sd-vio-soft:   #ede9fe;
  --sd-indigo:     #4f46e5;
  --sd-lav:        #c4b5fd;

  /* Status palette (kept for back-compat with JS inline styles) */
  --sd-navy:       #253551;
  --sd-purple:     #7c3aed;
  --sd-violet:     #8b5cf6;
  --sd-electric:   #3b82f6;
  --sd-cyan:       #06b6d4;
  --sd-green:      #16a34a;
  --sd-amber:      #d97706;
  --sd-red:        #dc2626;

  /* Legacy aliases */
  --sd-bg:           var(--sd-paper);
  --sd-white:        #ffffff;
  --sd-border:       var(--sd-rule);
  --sd-border-solid: var(--sd-rule);
  --sd-shadow:       0 10px 28px -14px rgba(37,53,81,0.18);
  --sd-shadow-lg:    0 18px 40px -16px rgba(37,53,81,0.22);

  --sd-r:            16px;
  --sd-r-sm:         10px;
  --sd-r-xl:         20px;

  --sd-serif:        "Playfair Display", Georgia, serif;
  --sd-mono:         "JetBrains Mono", ui-monospace, monospace;
  --sd-ease:         cubic-bezier(.2,.7,.2,1);

  /* Shell */
  max-width: 1540px;
  margin: 0 auto;
  padding: 24px clamp(16px, 3vw, 32px) 80px;
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--sd-ink);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  background: var(--sd-paper);
}

#sca-dashboard *,
#sca-dashboard *::before,
#sca-dashboard *::after { box-sizing: border-box; }

#sca-dashboard h1,
#sca-dashboard h2,
#sca-dashboard h3,
#sca-dashboard h4 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sd-ink);
}

#sca-dashboard a { color: inherit; text-decoration: none; }
#sca-dashboard button { font: inherit; color: inherit; cursor: pointer; }

/* ───────────────────────────────────────────────────
   Loading / Error
   ─────────────────────────────────────────────────── */
.sd-loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--sd-muted);
  font-family: var(--sd-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.sd-loading i {
  display: block;
  font-size: 26px;
  color: var(--sd-vio);
  margin-bottom: 16px;
  animation: sd-pulse 1.2s ease-in-out infinite;
}
@keyframes sd-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.95); }
  50%      { opacity: 1;   transform: scale(1.05); }
}
.sd-error {
  text-align: center;
  padding: 26px 22px;
  background: #fff;
  border: 1px solid var(--sd-rule);
  border-left: 3px solid var(--sd-red);
  border-radius: var(--sd-r);
  color: var(--sd-ink);
  font-size: 14.5px;
  font-weight: 500;
}

/* ───────────────────────────────────────────────────
   Optional header (editorial — only used if JS ever
   re-introduces a top greeting block)
   ─────────────────────────────────────────────────── */
.sd-header {
  margin-bottom: 24px;
  padding: 0 0 20px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sd-rule);
  border-radius: 0;
  box-shadow: none;
  position: relative;
  overflow: visible;
}
.sd-header-inner { position: relative; z-index: 1; }
.sd-header h2 {
  margin: 0 0 6px;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  color: var(--sd-ink);
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.sd-header h2 em,
.sd-header h2 .cc-italic {
  font-family: var(--sd-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--sd-vio);
  letter-spacing: -0.01em;
}
.sd-header p {
  margin: 0;
  font-family: var(--sd-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-muted);
}
.sd-header-orb { display: none; }

/* ───────────────────────────────────────────────────
   Greeting header (mirrors .cc-header from the AI portal)
   ─────────────────────────────────────────────────── */
.sd-greeting {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--sd-rule);
}
.sd-greeting-hello { min-width: 0; }
.sd-greeting-eyebrow {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sd-muted);
  margin-bottom: 10px;
}
.sd-greeting h1 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1;
  color: var(--sd-ink);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.sd-greeting h1 em,
.sd-greeting h1 .sd-italic {
  font-family: var(--sd-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--sd-vio);
  letter-spacing: -0.02em;
}
.sd-greeting-sub {
  margin: 10px 0 0;
  color: var(--sd-ink-2);
  max-width: 56ch;
  font-size: 15.5px;
  line-height: 1.55;
}
.sd-greeting-sub b { color: var(--sd-ink); font-weight: 600; }

.sd-greeting-stats {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  align-items: center;
}
.sd-greeting-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.sd-greeting-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--sd-paper-2);
  border: 1px solid var(--sd-rule);
  display: grid;
  place-items: center;
  color: var(--sd-ink);
  font-size: 14px;
}
.sd-greeting-stat-icon--vio {
  background: var(--sd-vio-soft);
  border-color: color-mix(in srgb, var(--sd-vio) 22%, var(--sd-rule));
  color: var(--sd-vio);
}
.sd-greeting-stat-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-muted);
  font-weight: 600;
  line-height: 1.2;
}
.sd-greeting-stat-value {
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--sd-ink);
  letter-spacing: -0.015em;
  margin-top: 2px;
}
.sd-greeting-stat-value--vio { color: var(--sd-vio); }
.sd-greeting-stat-unit {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  color: var(--sd-muted);
  font-weight: 500;
  letter-spacing: 0;
}
.sd-greeting-stat-frac {
  color: var(--sd-muted);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0;
}

@media (max-width: 1180px) {
  .sd-greeting {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
  }
  .sd-greeting-stats { gap: 18px; }
}
@media (max-width: 560px) {
  .sd-greeting h1 { font-size: clamp(28px, 8vw, 38px); }
  .sd-greeting-stat-value { font-size: 22px; }
  .sd-greeting-stat-icon { width: 32px; height: 32px; border-radius: 8px; font-size: 12px; }
  .sd-greeting-stats { gap: 14px; }
}

/* ───────────────────────────────────────────────────
   Tabs — segmented pill
   ─────────────────────────────────────────────────── */
.sd-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  padding: 5px;
  background: var(--sd-paper-2);
  border: 1px solid var(--sd-rule);
  border-radius: 14px;
}
.sd-tab {
  flex: 1 1 0;
  padding: 11px 16px;
  border: 0;
  border-radius: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  background: transparent;
  color: var(--sd-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: color .15s, background .15s, box-shadow .15s;
}
.sd-tab:hover { color: var(--sd-ink); }
.sd-tab i { font-size: 12px; }
.sd-tab.is-active {
  background: #fff;
  color: var(--sd-ink);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07);
}

/* Loading dots used in the greeting sub during skeleton render */
.sd-skeleton-dot {
  display: inline-block;
  color: var(--sd-vio);
  font-weight: 700;
  font-size: 16px;
  margin: 0 1px;
  animation: sd-skeleton-pulse 1.2s ease-in-out infinite;
}
.sd-skeleton-dot:nth-child(2) { animation-delay: 0.15s; }
.sd-skeleton-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes sd-skeleton-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40%           { opacity: 1;    transform: translateY(-2px); }
}

/* "NEW" pill on the Insights tab */
.sd-tab-new {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff !important;
  background: var(--sd-vio);
  margin-left: 4px;
  line-height: 1.3;
  text-transform: uppercase;
}
.sd-tab--insights.is-active .sd-tab-new {
  background: var(--sd-vio);
}

/* ── Tab panels ── */
.sd-tab-content { display: none; }
.sd-tab-content.is-active {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ───────────────────────────────────────────────────
   Card
   ─────────────────────────────────────────────────── */
.sd-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--sd-rule);
  border-radius: var(--sd-r);
  padding: 24px;
  box-shadow: none;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--sd-ease);
}
.sd-card:hover {
  border-color: var(--sd-rule-2);
  box-shadow: var(--sd-shadow);
}
.sd-card--flush { padding: 0; overflow: hidden; }

/* ───────────────────────────────────────────────────
   Section head (icon + title + subtitle)
   ─────────────────────────────────────────────────── */
.sd-section-head {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.sd-section-head h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--sd-ink);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.sd-section-head p {
  margin: 4px 0 0;
  font-family: var(--sd-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sd-muted);
  line-height: 1.45;
  font-weight: 600;
}

/* Group head (used by helpers) */
.sd-group-head {
  font-family: var(--sd-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-muted);
  font-weight: 600;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sd-group-head i { color: var(--sd-vio); font-size: 11px; }
.sd-group-head-sub { color: var(--sd-paper-3); letter-spacing: 0.06em; }

/* ───────────────────────────────────────────────────
   Icon box — base is violet, JS inline styles override
   ─────────────────────────────────────────────────── */
.sd-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  background: var(--sd-vio-soft);
  color: var(--sd-vio);
  border: 1px solid color-mix(in srgb, var(--sd-vio) 14%, var(--sd-rule));
}
.sd-icon-box--sm { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }
.sd-icon-box--xs { width: 24px; height: 24px; border-radius: 7px; font-size: 10px; }
.sd-icon-box--lg { width: 42px; height: 42px; border-radius: 12px; font-size: 16px; }

/* ───────────────────────────────────────────────────
   Pill — inline style colours the band; default is neutral
   ─────────────────────────────────────────────────── */
.sd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--sd-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.3;
}

/* Quiet pill (metadata: streaks, week-on-week deltas) */
.sd-pill-quiet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  letter-spacing: -0.005em;
  font-weight: 500;
  background: #fff;
  color: var(--sd-ink-2);
  border: 1px solid var(--sd-rule);
}

/* ───────────────────────────────────────────────────
   Stat row — top of Overview / Past Attempts cards
   ─────────────────────────────────────────────────── */
.sd-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.sd-stat {
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.sd-stat:first-child { padding-left: 0; }
.sd-stat + .sd-stat { border-left: 1px solid var(--sd-rule); }
.sd-stat-label {
  font-family: var(--sd-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-muted);
  font-weight: 600;
  line-height: 1.2;
}
.sd-stat-value {
  font-family: "Poppins", sans-serif;
  font-size: 38px;
  font-weight: 600;
  color: var(--sd-ink);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 2px 0;
}
.sd-stat-sub {
  font-size: 13px;
  color: var(--sd-muted);
  font-weight: 500;
}
.sd-stat-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ───────────────────────────────────────────────────
   Encouragement banner — left-bordered violet block
   (mirrors the .cc-why pattern from the AI portal)
   ─────────────────────────────────────────────────── */
.sd-encourage {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-radius: var(--sd-r);
  background: var(--sd-vio-soft);
  border: 1px solid color-mix(in srgb, var(--sd-vio) 18%, var(--sd-rule));
  border-left: 3px solid var(--sd-vio);
}
.sd-encourage .sd-icon-box {
  background: #fff;
  color: var(--sd-vio);
  border-color: color-mix(in srgb, var(--sd-vio) 25%, transparent);
}
.sd-encourage-msg {
  font-size: 15px;
  font-weight: 600;
  color: var(--sd-ink);
  flex: 1;
  min-width: 200px;
  letter-spacing: -0.005em;
}
.sd-encourage-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ───────────────────────────────────────────────────
   Two-column grid
   ─────────────────────────────────────────────────── */
.sd-grid-2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
}
.sd-grid-2--even { grid-template-columns: 1fr 1fr; }

/* ───────────────────────────────────────────────────
   Domain row (DG / CM / RTO / Overall)
   ─────────────────────────────────────────────────── */
.sd-domain-row {
  display: flex;
  gap: 0;
}
.sd-domain {
  flex: 1 1 0;
  min-width: 140px;
  padding: 0 22px;
}
.sd-domain:first-child { padding-left: 0; }
.sd-domain + .sd-domain { border-left: 1px solid var(--sd-rule); padding-left: 22px; }
.sd-domain-head { margin-bottom: 8px; }
.sd-domain-head span {
  font-family: var(--sd-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-muted);
  font-weight: 600;
}
.sd-domain-score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.sd-domain-pct {
  font-family: "Poppins", sans-serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--sd-ink);
  letter-spacing: -0.025em;
  line-height: 1;
}
.sd-domain-trend {
  margin-top: 12px;
  font-family: var(--sd-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sd-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.sd-domain-trend i { font-size: 9px; opacity: 0.85; }

/* ───────────────────────────────────────────────────
   Heatmap
   ─────────────────────────────────────────────────── */
.sd-heatmap { position: relative; }
.sd-heatmap-grid {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.sd-heatmap-labels {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-right: 6px;
}
.sd-heatmap-label {
  height: 16px;
  font-family: var(--sd-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--sd-muted);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 14px;
  font-weight: 600;
}
.sd-heatmap-col { display: flex; flex-direction: column; gap: 4px; }
.sd-heat-cell {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform .12s ease;
}
.sd-heat-cell:hover { transform: scale(1.35); }
.sd-heat-cell--future { cursor: default; background: transparent !important; }
.sd-heat-cell--future:hover { transform: none; }
.sd-heatmap-tooltip {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sd-ink);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-family: var(--sd-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
.sd-heatmap-tooltip.is-visible { opacity: 1; }
.sd-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  justify-content: flex-end;
}
.sd-heatmap-legend span {
  font-family: var(--sd-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sd-muted);
  font-weight: 600;
}
.sd-heatmap-legend-cell {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

/* ───────────────────────────────────────────────────
   Donut (Case Progress)
   ─────────────────────────────────────────────────── */
.sd-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}
.sd-donut {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background:
    conic-gradient(var(--sd-vio) calc(var(--pct) * 1%), var(--sd-paper-2) 0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-donut-inner {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--sd-rule);
}
.sd-donut-pct {
  font-family: "Poppins", sans-serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--sd-ink);
  letter-spacing: -0.03em;
  line-height: 1;
}
.sd-donut-fraction {
  font-family: var(--sd-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--sd-muted);
  font-weight: 600;
}
.sd-donut-caption {
  font-family: var(--sd-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sd-muted);
  font-weight: 600;
}

/* Legacy SVG donut (kept for backward compatibility) */
.sd-donut-svg-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}
.sd-donut-svg { width: 100px; height: 100px; transform: rotate(-90deg); }
.sd-donut-center {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--sd-ink);
}
.sd-donut-label {
  font-family: var(--sd-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sd-muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.sd-donut-count {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--sd-ink);
}
.sd-donut-count span {
  font-size: 13px;
  font-weight: 500;
  color: var(--sd-muted);
}
.sd-donut-remaining {
  font-size: 12.5px;
  color: var(--sd-muted);
  margin-top: 4px;
}

/* ───────────────────────────────────────────────────
   Suggested cases
   ─────────────────────────────────────────────────── */
.sd-suggest-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sd-suggest-link {
  padding: 10px 18px 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--sd-rule);
  background: #fff;
  color: var(--sd-ink);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.sd-suggest-link:hover {
  border-color: var(--sd-vio);
  color: var(--sd-vio);
  transform: translateY(-1px);
  box-shadow: var(--sd-shadow);
}
.sd-suggest-link .sd-icon-box { border-radius: 999px; }

/* ───────────────────────────────────────────────────
   Topic toggles (pill group)
   ─────────────────────────────────────────────────── */
.sd-topic-toggles {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  background: var(--sd-paper-2);
  border: 1px solid var(--sd-rule);
  border-radius: 999px;
}
.sd-topic-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--sd-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
  line-height: 1;
}
.sd-topic-toggle i { font-size: 11px; }
.sd-topic-toggle:hover { color: var(--sd-ink); }
.sd-topic-toggle.is-active {
  background: var(--sd-vio);
  color: #fff;
}

/* ── Topic bars ── */
.sd-topic-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sd-topic-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sd-topic-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.sd-topic-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--sd-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-topic-meta {
  font-family: var(--sd-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--sd-muted);
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 600;
}
.sd-topic-meta b {
  color: var(--sd-ink);
  font-weight: 700;
}
.sd-topic-track {
  height: 8px;
  background: var(--sd-paper-2);
  border-radius: 999px;
  overflow: hidden;
}
.sd-topic-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .5s ease;
}

/* ───────────────────────────────────────────────────
   Attempts table
   ─────────────────────────────────────────────────── */
.sd-table {
  border-radius: var(--sd-r);
  border: 1px solid var(--sd-rule);
  overflow: hidden;
  background: #fff;
}
.sd-table-head {
  display: grid;
  grid-template-columns: 150px 1fr 120px 140px 90px;
  padding: 12px 18px;
  background: var(--sd-paper-2);
  font-family: var(--sd-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sd-muted);
  border-bottom: 1px solid var(--sd-rule);
  gap: 8px;
}
.sd-table-row {
  display: grid;
  grid-template-columns: 150px 1fr 120px 140px 90px;
  padding: 14px 18px;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--sd-rule);
  cursor: pointer;
  transition: background .12s;
}
.sd-table-row:hover { background: var(--sd-vio-soft); }
.sd-table-row.is-open { background: var(--sd-paper-2); }
.sd-table-row:last-child { border-bottom: 0; }

/* Desktop default: hide mobile-only cells */
.sd-cell-mode-short,
.sd-cell-overall-short { display: none; }

/* Mode pill (desktop, full label) */
.sd-mode-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  letter-spacing: -0.005em;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--sd-rule);
  background: #fff;
  color: var(--sd-ink-2);
  line-height: 1.3;
}
.sd-mode-pill.sd-mode--standard {
  background: #fff;
  color: var(--sd-muted);
  border-color: var(--sd-rule);
}
.sd-mode-pill.sd-mode--premium {
  background: var(--sd-vio-soft);
  color: var(--sd-vio-2);
  border-color: color-mix(in srgb, var(--sd-vio) 22%, var(--sd-rule));
}
.sd-mode-pill.sd-mode--marking {
  background: var(--sd-paper-2);
  color: var(--sd-ink);
  border-color: var(--sd-rule-2);
}

/* Mode square (mobile, single letter) */
.sd-mode-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-family: var(--sd-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.sd-mode-square.sd-mode--standard {
  background: var(--sd-paper-3);
  color: var(--sd-ink);
}
.sd-mode-square.sd-mode--premium {
  background: var(--sd-vio);
  color: #fff;
}
.sd-mode-square.sd-mode--marking {
  background: var(--sd-ink);
  color: #fff;
}

/* Band short pill (mobile, CP/BP/BF/CF) */
.sd-band-short {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--sd-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  white-space: nowrap;
}
.sd-band-short--muted {
  background: var(--sd-paper-2);
  color: var(--sd-muted);
  border: 1px solid var(--sd-rule);
}

.sd-table-date {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sd-ink);
}
.sd-table-time {
  color: var(--sd-muted);
  font-weight: 400;
  margin-left: 6px;
  font-family: var(--sd-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.sd-table-case {
  font-weight: 500;
  font-size: 14px;
  color: var(--sd-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-table-expand {
  padding: 18px;
  background: var(--sd-paper-2);
  border-bottom: 1px solid var(--sd-rule);
  display: none;
}
.sd-table-expand.is-open { display: block; }
.sd-table-domains {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.sd-table-domain {
  flex: 1 1 0;
  min-width: 130px;
  padding: 14px;
  background: #fff;
  border-radius: var(--sd-r-sm);
  border: 1px solid var(--sd-rule);
}
.sd-table-domain-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.sd-table-domain-label {
  font-family: var(--sd-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sd-muted);
  font-weight: 600;
}
.sd-table-domain-score {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.sd-table-domain-pct {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--sd-ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.sd-table-domain-band {
  font-family: var(--sd-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

.sd-table-premium-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.sd-table-premium-pill {
  padding: 6px 12px;
  background: #fff;
  border-radius: 999px;
  border: 1px solid var(--sd-rule);
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  letter-spacing: -0.005em;
  font-weight: 500;
  color: var(--sd-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sd-table-premium-pill i { color: var(--sd-vio); font-size: 9px; }
.sd-table-premium-pill span { color: var(--sd-muted); font-weight: 500; }

.sd-table-report-btn {
  margin-top: 14px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--sd-ink);
  color: #fff;
  border: 1px solid var(--sd-ink);
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .2s, border-color .2s;
}
.sd-table-report-btn:hover {
  background: var(--sd-ink-2);
  border-color: var(--sd-ink-2);
}

/* ───────────────────────────────────────────────────
   Filter bar
   ─────────────────────────────────────────────────── */
.sd-filter-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.sd-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--sd-rule);
  background: #fff;
  color: var(--sd-ink);
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.sd-filter-toggle:hover {
  border-color: var(--sd-vio);
  color: var(--sd-vio);
}
.sd-filter-toggle i { font-size: 10px; }
.sd-filter-badge {
  background: var(--sd-vio);
  color: #fff;
  font-family: var(--sd-mono);
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 2px;
  letter-spacing: 0;
}
.sd-filter-panel {
  border: 1px solid var(--sd-rule);
  border-radius: var(--sd-r);
  background: #fff;
  padding: 18px;
  margin-bottom: 14px;
}
.sd-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
.sd-filter-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  letter-spacing: 0;
  color: var(--sd-muted);
  font-weight: 600;
}
.sd-filter-field input {
  height: 40px;
  border-radius: var(--sd-r-sm);
  border: 1px solid var(--sd-rule);
  padding: 8px 12px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: var(--sd-ink);
  background: #fff;
  letter-spacing: 0;
  text-transform: none;
}
.sd-filter-field input:focus {
  outline: none;
  border-color: var(--sd-vio);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sd-vio) 20%, transparent);
}
.sd-filter-actions { display: flex; align-items: flex-end; }
.sd-filter-clear {
  height: 40px;
  padding: 9px 16px;
  border-radius: var(--sd-r-sm);
  border: 1px solid var(--sd-rule);
  background: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--sd-ink);
}
.sd-filter-clear:hover {
  border-color: var(--sd-ink-2);
  background: var(--sd-paper-2);
}

@media (max-width: 640px) {
  .sd-filter-grid { grid-template-columns: 1fr 1fr; }
  .sd-filter-actions { grid-column: 1 / -1; justify-content: stretch; }
  .sd-filter-clear { width: 100%; }
}

/* ───────────────────────────────────────────────────
   View grading button
   ─────────────────────────────────────────────────── */
.sd-view-btn {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--sd-rule);
  background: #fff;
  color: var(--sd-ink-2);
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: border-color .15s, color .15s, background .15s;
}
.sd-view-btn:hover {
  border-color: var(--sd-vio);
  color: var(--sd-vio);
  background: var(--sd-vio-soft);
}
.sd-view-btn i { font-size: 9px; flex-shrink: 0; }

/* ───────────────────────────────────────────────────
   Pagination
   ─────────────────────────────────────────────────── */
.sd-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  align-items: center;
}
.sd-page-btn {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--sd-rule);
  background: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--sd-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color .15s, color .15s;
}
.sd-page-btn:not(:disabled):hover {
  border-color: var(--sd-vio);
  color: var(--sd-vio);
}
.sd-page-btn:disabled { opacity: 0.35; cursor: default; }
.sd-page-btn i { font-size: 9px; }
.sd-page-info {
  padding: 6px 12px;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--sd-muted);
}

/* ───────────────────────────────────────────────────
   Chart toggles
   ─────────────────────────────────────────────────── */
.sd-chart-toggles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.sd-chart-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--sd-rule);
  background: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--sd-muted);
  transition: border-color .2s, color .2s, opacity .2s;
  opacity: 0.55;
}
.sd-chart-toggle.is-active {
  border-color: var(--sd-rule-2);
  color: var(--sd-ink);
  opacity: 1;
}
.sd-chart-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.sd-chart-wrap { position: relative; }
.sd-chart-wrap canvas {
  width: 100% !important;
  height: 240px !important;
}

/* ───────────────────────────────────────────────────
   Premium skills
   ─────────────────────────────────────────────────── */
.sd-premium-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 6px;
}
.sd-premium-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sd-premium-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sd-premium-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sd-ink);
}
.sd-premium-val {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--sd-ink);
}
.sd-premium-bar {
  height: 8px;
  background: var(--sd-paper-2);
  border-radius: 999px;
  overflow: hidden;
}
.sd-premium-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sd-indigo), var(--sd-vio));
  transition: width .5s ease;
}
.sd-premium-empty {
  padding: 30px 0;
  text-align: center;
  font-family: var(--sd-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sd-muted);
  font-weight: 600;
}

/* ───────────────────────────────────────────────────
   Radar
   ─────────────────────────────────────────────────── */
.sd-radar-wrap canvas {
  width: 100% !important;
  height: 250px !important;
}

/* ───────────────────────────────────────────────────
   Footer
   ─────────────────────────────────────────────────── */
.sd-footer {
  margin-top: 32px;
  padding: 18px 0 0;
  border-top: 1px solid var(--sd-rule);
  text-align: center;
  font-family: var(--sd-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sd-muted);
  font-weight: 600;
}
.sd-footer i { margin-right: 6px; font-size: 9px; }

/* ───────────────────────────────────────────────────
   Sub-section titles (used inside grouped cards)
   ─────────────────────────────────────────────────── */
.sd-sub-title {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--sd-ink);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.sd-sub-subtitle {
  font-family: var(--sd-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sd-muted);
  margin-bottom: 14px;
  font-weight: 600;
}

/* ───────────────────────────────────────────────────
   Page-level overrides (hide Squarespace headers)
   ─────────────────────────────────────────────────── */
.vp-title.vp-top-title,
.vp-subtitle.vp-top-subtitle,
.vp-row.vp-top-row { display: none !important; }

/* ───────────────────────────────────────────────────
   View-as banner (admin-only ?id= override)
   ─────────────────────────────────────────────────── */
.sd-viewas {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 18px;
  border-radius: var(--sd-r-sm);
  background: linear-gradient(135deg, #1e1b4b 0%, #2A1F5C 50%, #4A2A8E 100%);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 22px -12px rgba(74, 42, 142, 0.6);
}
.sd-viewas-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(196, 181, 253, 0.18);
  border: 1px solid rgba(196, 181, 253, 0.35);
  display: grid;
  place-items: center;
  color: #fff !important;
  font-size: 12px;
  flex-shrink: 0;
}
.sd-viewas-icon i { color: #fff !important; }
.sd-viewas-text {
  flex: 1;
  min-width: 0;
  color: #fff !important;
}
.sd-viewas-text b {
  color: #fff !important;
  font-weight: 600;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  font-size: 13px;
  margin: 0 2px;
}
.sd-viewas-exit {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sd-lav) !important;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(196, 181, 253, 0.35);
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.sd-viewas-exit:hover {
  background: rgba(196, 181, 253, 0.18);
  color: #fff !important;
}

/* ───────────────────────────────────────────────────
   Recurring Patterns (deterministic — Scores tab)
   ─────────────────────────────────────────────────── */
.sd-pattern-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sd-pattern {
  border: 1px solid var(--sd-rule);
  border-radius: var(--sd-r-sm);
  background: #fff;
  overflow: hidden;
  transition: border-color .2s, background .2s;
}
.sd-pattern:hover { border-color: var(--sd-rule-2); }
.sd-pattern[open] {
  background: var(--sd-paper);
  border-color: var(--sd-rule-2);
}
.sd-pattern-head {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.sd-pattern-head::-webkit-details-marker { display: none; }
.sd-pattern-head::marker { display: none; }
.sd-pattern-rank {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--sd-vio-soft);
  color: var(--sd-vio);
  display: grid;
  place-items: center;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--sd-vio) 18%, var(--sd-rule));
}
.sd-pattern-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.sd-pattern-label {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--sd-ink);
  letter-spacing: -0.005em;
}
.sd-pattern-meta {
  font-size: 13px;
  color: var(--sd-muted);
  line-height: 1.4;
}
.sd-pattern-meta b {
  color: var(--sd-ink);
  font-weight: 600;
}
.sd-pattern-toggle {
  color: var(--sd-muted);
  transition: transform .2s, color .2s;
  font-size: 12px;
}
.sd-pattern[open] .sd-pattern-toggle {
  transform: rotate(180deg);
  color: var(--sd-vio);
}

.sd-pattern-excerpts {
  list-style: none;
  margin: 0;
  padding: 4px 16px 16px 60px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sd-pattern-excerpt {
  position: relative;
  padding: 11px 14px;
  border-left: 3px solid var(--sd-rule);
  background: #fff;
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
  color: var(--sd-ink-2);
  line-height: 1.55;
}
.sd-pattern-excerpt--missed  { border-left-color: var(--sd-red); }
.sd-pattern-excerpt--partial { border-left-color: var(--sd-amber); }
.sd-pattern-excerpt-meta {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sd-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.sd-pattern-excerpt-text {
  display: block;
  color: var(--sd-ink);
}

.sd-pattern-foot {
  font-size: 12.5px;
  color: var(--sd-muted);
  margin-top: 14px;
  text-align: center;
  line-height: 1.5;
}
.sd-pattern-empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--sd-muted);
  font-size: 14px;
}

@media (max-width: 560px) {
  .sd-pattern-head { grid-template-columns: 26px 1fr auto; gap: 12px; padding: 12px 14px; }
  .sd-pattern-rank { width: 24px; height: 24px; font-size: 12px; }
  .sd-pattern-label { font-size: 14px; }
  .sd-pattern-meta { font-size: 12.5px; }
  .sd-pattern-excerpts { padding-left: 14px; padding-right: 14px; }
}

/* ───────────────────────────────────────────────────
   AI Deep Insight (Insights tab)
   ─────────────────────────────────────────────────── */
.sd-deep-card {
  position: relative;
  background:
    radial-gradient(640px 280px at 110% -40%, rgba(124,58,237,0.06), transparent 60%),
    #fff;
  border: 1px solid var(--sd-rule);
}
.sd-deep-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff !important;
  background: linear-gradient(135deg, var(--sd-vio) 0%, var(--sd-indigo) 100%);
  margin-left: 6px;
  line-height: 1.3;
  vertical-align: middle;
}

.sd-deep-locked {
  padding: 22px;
  border: 1px dashed var(--sd-rule-2);
  border-radius: var(--sd-r-sm);
  color: var(--sd-ink-2);
  font-size: 14px;
  background: var(--sd-paper);
}
.sd-deep-locked b { color: var(--sd-ink); font-weight: 600; }
.sd-deep-locked-sub {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--sd-muted);
  line-height: 1.5;
}

.sd-deep-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  color: var(--sd-muted);
  font-size: 14px;
}
.sd-deep-empty b { color: var(--sd-ink); font-weight: 600; }

.sd-deep-actions {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.sd-deep-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, var(--sd-vio) 0%, var(--sd-indigo) 100%);
  color: #fff !important;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(124,58,237,0.55);
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.sd-deep-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(124,58,237,0.65);
}
.sd-deep-cta:disabled { opacity: 0.6; cursor: default; transform: none; }
.sd-deep-cta i { font-size: 13px; }
.sd-deep-cta-cost {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  margin-left: 2px;
}

.sd-deep-generating {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px auto 0;
  padding: 16px 18px;
  max-width: 460px;
  border-radius: var(--sd-r-sm);
  background: var(--sd-vio-soft);
  border: 1px solid color-mix(in srgb, var(--sd-vio) 22%, var(--sd-rule));
}
.sd-deep-generating-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--sd-ink);
  font-size: 14px;
}
.sd-deep-generating-sub {
  font-size: 12.5px;
  color: var(--sd-muted);
  margin-top: 2px;
}
.sd-deep-spinner {
  color: var(--sd-vio);
  font-size: 22px;
  animation: sd-deep-spin 1.8s linear infinite;
}
@keyframes sd-deep-spin {
  0%   { transform: rotate(0deg) scale(1); opacity: 0.7; }
  50%  { transform: rotate(180deg) scale(1.08); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: 0.7; }
}

.sd-deep-error {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--sd-r-sm);
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.25);
  color: #991b1b;
  font-size: 13.5px;
}

/* Cooldown panel: shown instead of Generate when <10 new graded cases
   since the last report. */
.sd-deep-cooldown {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--sd-r-sm);
  border: 1px dashed var(--sd-rule-2);
  background: var(--sd-paper);
  color: var(--sd-ink-2);
  font-size: 14px;
  line-height: 1.5;
}
.sd-deep-cooldown b { color: var(--sd-ink); font-weight: 600; }
.sd-deep-cooldown-sub {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--sd-muted);
  line-height: 1.5;
}

.sd-deep-latest {
  border-radius: var(--sd-r-sm);
  border: 1px solid var(--sd-rule);
  background: #fff;
  padding: 18px 22px;
  margin-top: 4px;
}
.sd-deep-latest-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sd-rule);
  flex-wrap: wrap;
}
.sd-deep-latest-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-vio);
  font-weight: 700;
}
.sd-deep-latest-date {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--sd-muted);
  font-weight: 600;
}

/* Markdown rendering inside report — editorial layout */
.sd-deep-markdown {
  color: var(--sd-ink-2);
  font-size: 15px;
  line-height: 1.65;
}

/* Section block (each H2 wraps content in a <section>) */
.sd-deep-section {
  margin: 36px 0;
}
.sd-deep-section:first-child { margin-top: 0; }
.sd-deep-section:last-child  { margin-bottom: 4px; }

.sd-deep-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sd-rule);
}
.sd-deep-section-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--sd-muted);
  padding: 4px 10px;
  border: 1px solid var(--sd-rule);
  border-radius: 999px;
  background: #fff;
}
.sd-deep-section-ic {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--sd-vio-soft);
  color: var(--sd-vio);
  display: grid;
  place-items: center;
  font-size: 15px;
  border: 1px solid color-mix(in srgb, var(--sd-vio) 18%, var(--sd-rule));
  flex-shrink: 0;
}
.sd-deep-section-title {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--sd-ink);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

/* Tone variants — tint the icon to differentiate the sections at a glance */
.sd-deep-section--strong  .sd-deep-section-ic { background: rgba(22,163,74,0.10);  color: var(--sd-green);   border-color: rgba(22,163,74,0.22); }
.sd-deep-section--amber   .sd-deep-section-ic { background: rgba(217,119,6,0.10);  color: var(--sd-amber);   border-color: rgba(217,119,6,0.22); }
.sd-deep-section--violet  .sd-deep-section-ic { background: var(--sd-vio-soft);    color: var(--sd-vio); }
.sd-deep-section--indigo  .sd-deep-section-ic { background: rgba(79,70,229,0.10);  color: var(--sd-indigo);  border-color: rgba(79,70,229,0.22); }
.sd-deep-section--cyan    .sd-deep-section-ic { background: rgba(6,182,212,0.10);  color: var(--sd-cyan);    border-color: rgba(6,182,212,0.22); }

/* "Quick read" — short callout treatment, not a normal section */
.sd-deep-section--quick {
  background: linear-gradient(180deg, var(--sd-vio-soft) 0%, #fff 100%);
  border: 1px solid color-mix(in srgb, var(--sd-vio) 22%, var(--sd-rule));
  border-left: 4px solid var(--sd-vio);
  border-radius: var(--sd-r-sm);
  padding: 20px 22px;
  margin: 0 0 32px;
}
.sd-deep-section--quick .sd-deep-section-head {
  border-bottom: 0;
  margin-bottom: 8px;
  padding-bottom: 0;
}
.sd-deep-section--quick .sd-deep-section-title { font-size: 17px; }
.sd-deep-section--quick .sd-deep-section-num { background: #fff; }
.sd-deep-section--quick p {
  margin: 6px 0;
  font-size: 15.5px;
  color: var(--sd-ink);
  line-height: 1.55;
}

/* H3 inside Premium-skills deep-dive — distinctive violet bar */
.sd-deep-markdown .sd-deep-h3 {
  font-family: "Poppins", sans-serif;
  font-size: 17.5px;
  font-weight: 600;
  color: var(--sd-ink);
  letter-spacing: -0.015em;
  margin: 26px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--sd-rule);
}
.sd-deep-markdown .sd-deep-h4 {
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--sd-ink);
  letter-spacing: -0.01em;
  margin: 22px 0 8px;
  padding-left: 16px;
}
.sd-deep-markdown .sd-deep-h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: var(--sd-vio);
}

.sd-deep-markdown p { margin: 10px 0; }
.sd-deep-markdown b,
.sd-deep-markdown strong { color: var(--sd-ink); font-weight: 600; }
.sd-deep-markdown em { color: var(--sd-ink); font-style: italic; }

.sd-deep-markdown ul.sd-deep-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}
.sd-deep-markdown ul.sd-deep-list li {
  position: relative;
  padding: 6px 0 6px 22px;
}
.sd-deep-markdown ul.sd-deep-list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 16px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sd-vio);
}

.sd-deep-markdown code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  background: var(--sd-paper-2);
  padding: 2px 6px;
  border-radius: 4px;
}

.sd-deep-quote {
  color: var(--sd-ink);
  font-style: italic;
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--sd-vio) 14%, transparent) 60%);
  padding: 0 2px;
  font-weight: 500;
}

.sd-deep-bq {
  margin: 14px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--sd-vio);
  background: var(--sd-vio-soft);
  border-radius: 0 8px 8px 0;
  color: var(--sd-ink);
  font-size: 15px;
  font-style: italic;
}

.sd-deep-past {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--sd-rule);
}
.sd-deep-past-head {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-muted);
  font-weight: 700;
  margin-bottom: 10px;
}
.sd-deep-past-item {
  border: 1px solid var(--sd-rule);
  border-radius: var(--sd-r-sm);
  background: #fff;
  margin-bottom: 8px;
  overflow: hidden;
}
.sd-deep-past-item[open] {
  background: var(--sd-paper);
  border-color: var(--sd-rule-2);
}
.sd-deep-past-item summary {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
}
.sd-deep-past-item summary::-webkit-details-marker { display: none; }
.sd-deep-past-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--sd-vio);
  font-weight: 700;
}
.sd-deep-past-date {
  font-size: 13px;
  color: var(--sd-ink);
  font-weight: 500;
}
.sd-deep-past-toggle {
  color: var(--sd-muted);
  font-size: 11px;
  transition: transform .2s, color .2s;
}
.sd-deep-past-item[open] .sd-deep-past-toggle {
  transform: rotate(180deg);
  color: var(--sd-vio);
}
.sd-deep-past-item .sd-deep-markdown { padding: 4px 16px 16px 60px; }

/* ───────────────────────────────────────────────────
   Responsive
   ─────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .sd-grid-2,
  .sd-grid-2--even { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  #sca-dashboard { padding: 22px 18px 70px; }
  .sd-card { padding: 20px; }
  .sd-stat-row { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .sd-stat { padding: 0 16px; }
  .sd-stat:first-child,
  .sd-stat:nth-child(3) { padding-left: 0; }
  .sd-stat:nth-child(odd) { border-left: none; }
  .sd-stat-value { font-size: 30px; }

  .sd-domain-row { flex-wrap: wrap; gap: 22px 0; }
  .sd-domain {
    flex: 1 1 calc(50% - 16px);
    padding: 0 16px;
  }
  .sd-domain:nth-child(odd) {
    padding-left: 0;
    border-left: none;
  }
  .sd-domain-pct { font-size: 26px; }
}

@media (max-width: 640px) {
  #sca-dashboard { padding: 18px 14px 60px; }
  .sd-card { padding: 18px; }

  .sd-tabs { gap: 0; }
  .sd-tab { padding: 12px 14px 13px; font-size: 10px; }
  .sd-tab.is-active::after { left: 10px; right: 10px; }

  .sd-section-head h3 { font-size: 17px; }

  .sd-table-head,
  .sd-table-row {
    grid-template-columns: auto 1fr 38px 46px 44px;
    gap: 8px;
    padding: 12px 12px;
  }
  .sd-cell-mode-full,
  .sd-cell-overall-full { display: none; }
  .sd-cell-mode-short,
  .sd-cell-overall-short {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sd-table-date { font-size: 11.5px; }
  .sd-table-time { display: none; }
  .sd-table-case { font-size: 13px; }

  .sd-view-btn {
    padding: 8px 10px;
    min-width: 38px;
    min-height: 38px;
    justify-content: center;
    gap: 0;
  }
  .sd-view-label { display: none; }

  .sd-header h2 { font-size: 28px; }

  .sd-topic-toggles {
    width: 100%;
    padding: 4px;
  }
  .sd-topic-toggle {
    flex: 1;
    justify-content: center;
  }

  .sd-encourage { padding: 14px 16px; gap: 12px; }
  .sd-encourage-msg { font-size: 14px; }
}

@media (max-width: 560px) {
  .sd-stat-row { grid-template-columns: 1fr; row-gap: 16px; }
  .sd-stat {
    padding: 0;
    border-left: none !important;
  }
  .sd-stat + .sd-stat {
    border-top: 1px solid var(--sd-rule);
    padding-top: 16px;
  }

  .sd-domain-row { flex-direction: column; gap: 18px; }
  .sd-domain {
    flex: none;
    width: 100%;
    padding: 0;
    border-left: none !important;
  }
  .sd-domain + .sd-domain {
    border-top: 1px solid var(--sd-rule);
    padding-top: 18px;
  }

  .sd-donut { width: 160px; height: 160px; }
  .sd-donut-inner { width: 122px; height: 122px; }
  .sd-donut-pct { font-size: 30px; }
}

/* ───────────────────────────────────────────────────
   Split section-head — title left, toggle groups right
   (used by buildTopicSection)
   ─────────────────────────────────────────────────── */
.sd-section-head--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.sd-section-head--split .sd-section-head-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  flex: 1 1 auto;
}
.sd-section-head--split .sd-section-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .sd-section-head--split .sd-section-head-right {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .sd-section-head--split .sd-topic-toggles { width: 100%; }
  .sd-section-head--split .sd-topic-toggle { flex: 1; justify-content: center; }
}

/* ───────────────────────────────────────────────────
   Dark-background readability fix
   Squarespace's button / link / icon rules can override
   our white text on dark backgrounds. Force it here.
   ─────────────────────────────────────────────────── */
#sca-dashboard .sd-topic-toggle.is-active,
#sca-dashboard .sd-topic-toggle.is-active i,
#sca-dashboard .sd-topic-toggle.is-active * { color: #fff !important; }

#sca-dashboard .sd-mode-square.sd-mode--premium,
#sca-dashboard .sd-mode-square.sd-mode--marking { color: #fff !important; }

#sca-dashboard .sd-table-report-btn,
#sca-dashboard .sd-table-report-btn i,
#sca-dashboard .sd-table-report-btn * { color: #fff !important; }

#sca-dashboard .sd-heatmap-tooltip { color: #fff !important; }

#sca-dashboard .sd-filter-badge { color: #fff !important; }