/* Global, non-home tweaks for professional data site */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

/* Brand color (header chips, links, etc.) */
:root {
  --md-primary-fg-color: #00897b; /* deeper teal for authority */
  --md-accent-fg-color: #00897b;
}

/* Global typography improvements */
.md-typeset {
  font-size: 0.875rem;
  line-height: 1.7;
}

.md-typeset h2,
.md-typeset h3,
.md-header__title {
  font-family: 'Space Grotesk', sans-serif;
}

.md-typeset h1,
.home-hero h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}

.md-typeset h1 {
  font-weight: 600;
  font-size: clamp(1.25rem, 3.5vw, 1.875rem);
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--md-primary-fg-color);
  padding-bottom: 0.5rem;
}

.md-typeset h2 {
  font-weight: 600;
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  margin-top: 2rem;
  margin-bottom: 0.875rem;
  letter-spacing: -0.01em;
}

.md-typeset h3 {
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.15rem);
  margin-top: 1.5rem;
  color: var(--md-default-fg-color);
}

/* Technical content gets monospace treatment */
.md-typeset code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background: color-mix(in srgb, var(--md-primary-fg-color) 8%, var(--md-code-bg-color));
  border-radius: 4px;
}

.md-typeset pre code {
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Stronger emphasis */
.md-typeset strong {
  font-weight: 600;
  color: var(--md-primary-fg-color);
}

/* Header bar with stronger presence */
.md-header {
  background-color: #0d1117 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.md-header__title {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Do NOT put hero or background overrides here. */

/* Resume downloads row */
.download-row {
  display: flex;
  justify-content: center;   /* center the group */
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 1.25rem;
}
.download-row .md-button { margin: 0; }  /* remove default per-button margins */

form label{display:block;margin:.75rem 0 .25rem;font-weight:500}
form input,form textarea{width:100%;max-width:42rem}
.hp{position:absolute;left:-10000px}
.contact-intro{margin:.5rem 0 1rem;color:var(--md-default-fg-color--light)}
#form-status{margin-top:.75rem}

/* widen contact form */
#contact-form {
  max-width: 50rem;
  margin-top: 1rem;
  padding: 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: color-mix(in srgb, var(--md-default-bg-color) 92%, var(--md-primary-fg-color) 8%);
}

#contact-form input,
#contact-form textarea {
  width: 100%;
  max-width: none;       /* remove inherited limit */
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--md-default-fg-color--lightest);
  background-color: var(--md-default-bg-color--light);
  color: var(--md-default-fg-color);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

#contact-form input:focus,
#contact-form textarea:focus {
  outline: none;
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary-fg-color) 28%, transparent);
}

#contact-form textarea {
  resize: vertical;
  min-height: 9rem;
}

#contact-form label {
  margin-top: 0;
  font-weight: 600;
}

/* Layout */
#contact-form .contact-fields {
  display: grid;
  gap: 1rem;
}

#contact-form .contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 700px) {
  #contact-form .contact-row {
    grid-template-columns: 1fr;
  }
}

#contact-form .contact-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

#contact-form button {
  margin-top: 0;
  font-weight: 600;
}

@media (max-width: 700px) {
  #contact-form button {
    width: 100%;
    justify-content: center;
  }
}

/* Status message (set by JS via data-state) */
#form-status {
  margin: 0;
  flex: 1;
  min-height: 1.25rem;
}

#form-status[data-state] {
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: var(--md-default-bg-color--light);
}

#form-status[data-state="sending"] {
  border-color: color-mix(in srgb, var(--md-primary-fg-color) 35%, var(--md-default-fg-color--lightest));
}

#form-status[data-state="success"] {
  border-color: color-mix(in srgb, var(--md-primary-fg-color) 55%, var(--md-default-fg-color--lightest));
}

#form-status[data-state="error"] {
  border-color: color-mix(in srgb, var(--md-accent-fg-color) 55%, var(--md-default-fg-color--lightest));
}

/* Resume hero */
.resume-hero {
  text-align: center;
  margin-top: .5rem;
}
.resume-hero h1 {
  margin-bottom: .25rem;
  letter-spacing: .2px;
}
.resume-hero .sub {
  margin: 0 0 .75rem;
  color: var(--md-default-fg-color--light);
}

/* KPI chips */
.kpi-row {
  display: flex;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.kpi {
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .85rem;
  border: 1px solid var(--md-primary-fg-color);
  background: color-mix(in srgb, var(--md-primary-fg-color) 12%, transparent);
}

/* Download buttons */
.download-row { display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; margin:.5rem 0 1rem; }
.download-row .md-button { margin:0; }

/* Timeline */
.timeline {
  position: relative;
  margin: .25rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--md-default-fg-color--lightest);
}
.role { margin: 0 0 1.25rem 0; }
.role__head { display:flex; align-items:baseline; gap:.5rem; }
.role__head strong { color: var(--md-typeset-a-color); }
.role__loc { color: var(--md-default-fg-color--light); font-size: .9rem; }
.role__title { display:flex; justify-content:space-between; align-items:baseline; margin-top:.25rem; padding-left: .75rem; }
.role__dates { color: var(--md-default-fg-color--light); font-size:.9rem; }
.role ul { margin: .35rem 0 .6rem 1.75rem; }

/* Two-column responsive grid */
.grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1.25rem;
}
@media (max-width: 900px) {
  .grid-two { grid-template-columns: 1fr; }
}

/* Print polish */
@media print {
  .md-header, .md-tabs, nav, .download-row { display: none !important; }
  .resume-hero { text-align:left; }
  .timeline { border-left: 1px solid #999; }
}

/* ---------------- SF6 Lab styles ---------------- */

/*
  SF6 pages were originally styled for dark mode with fixed colors.
  Provide light-scheme overrides so light mode remains readable.
*/
/* SF6 insight card: teal-tinted background in light mode for case study variant */
html[data-md-color-scheme="default"] .sf6-insight-card {
  background: color-mix(in srgb, var(--md-primary-fg-color) 10%, var(--md-default-bg-color));
  border-left-color: var(--md-primary-fg-color);
}

.sf6-input-section {
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  max-height: 500px;
  overflow: hidden;
}

body.sf6-has-report .sf6-input-section {
  max-height: 0;
  margin-bottom: 0;
  opacity: 0;
}

.sf6-input-intro {
  text-align: center;
  color: var(--md-default-fg-color--light);
  margin-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
}

body.sf6-has-report .sf6-input-intro {
  display: none;
}

.sf6-report-header {
  margin-bottom: 2rem;
  padding: 1.5rem 0;
  border-bottom: 2px solid var(--md-default-fg-color--lightest);
  opacity: 0;
  transition: opacity 0.3s ease 0.15s;
}

body.sf6-has-report .sf6-report-header {
  opacity: 1;
}

.sf6-report-title {
  margin: 0;
  font-size: clamp(1.25rem, 4vw, 2rem);
  font-weight: 700;
  background: linear-gradient(135deg, #00897b, #17a2a2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
  word-break: break-word;
}

.sf6-report-title.sf6-report-active {
  background: linear-gradient(135deg, #6EE7B7, #00897b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sf6-report-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.sf6-load-another-btn {
  padding: 0.6rem 1.2rem;
  background: var(--md-default-bg-color--light);
  color: var(--md-primary-fg-color);
  border: 1px solid var(--md-primary-fg-color);
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
}

body.sf6-has-report .sf6-load-another-btn {
  opacity: 1;
  transform: translateY(0);
}

.sf6-load-another-btn:hover {
  background: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--md-primary-fg-color) 25%, transparent);
}

.sf6-load-another-btn:active {
  transform: translateY(1px);
}

.sf6-input-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
  justify-content: center;
  margin-bottom: 1.5rem;
  margin-top: 1rem;
}

.sf6-input-row input {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 2px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  transition: all 0.2s ease;
  min-width: 0;
}

.sf6-input-row input:focus {
  outline: none;
  border-color: #00897b;
  box-shadow: 0 0 8px color-mix(in srgb, var(--md-primary-fg-color) 20%, transparent);
}

.sf6-input-row button {
  padding: 0.75rem 1.5rem;
  background: #00897b;
  color: #ffffff;
  border: 2px solid #00897b;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .sf6-input-row {
    flex-direction: row;
    align-items: center;
  }
  .sf6-input-row input {
    flex: 0 1 300px;
  }
}

.sf6-input-row button:hover {
  background: #26a69a;
  border-color: #26a69a;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--md-primary-fg-color) 25%, transparent);
}

.sf6-input-row button:active {
  transform: translateY(0);
}

.sf6-chart-wrapper {
  position: relative;
  height: 300px;
  margin-top: 1rem;
}

@media (min-width: 640px) {
  .sf6-chart-wrapper {
    height: 400px;
  }
}

@media (min-width: 1024px) {
  .sf6-chart-wrapper {
    height: 450px;
  }
}

/* Fix search icon vertical alignment */
.md-search__icon {
  top: 50%;
  transform: translateY(-50%);
}

/* Status text */

.sf6-status {
  margin-top: 0.25rem;
  font-size: 0.8rem;
}

.sf6-status--hint      { color: var(--md-default-fg-color--light); }
.sf6-status--loading   { color: #FCD34D; }
.sf6-status--ok        { color: #6EE7B7; }
.sf6-status--error     { color: #FCA5A5; }

.sf6-secondary-button {
  padding: 0.35rem 0.8rem;
  border-radius: 9999px;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: transparent;
  font-size: 0.85rem;
  cursor: pointer;
}
.sf6-secondary-button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Banner Styles */

.sf6-char-banner {
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  padding: 0 1rem;
  border-radius: 0;
  background: transparent;
  border: none;
  color: var(--md-default-fg-color);
  display: flex;
  justify-content: center;
  width: 100%;
}

@media (min-width: 768px) {
  .sf6-char-banner {
    padding: 0 2rem;
  }
}

.sf6-char-banner .admonition {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding: 1rem;
}

@media (min-width: 768px) {
  .sf6-char-banner .admonition {
    padding: 1.5rem;
  }
}

.sf6-char-banner .admonition-title {
  font-size: 1.2rem;
  font-weight: 700;
}

.sf6-char-banner p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 1rem 0;
}

.sf6-char-banner-prefix {
  margin-right: 0;
}

.sf6-char-pill {
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  border: 1px solid var(--md-default-fg-color--lightest);
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Stats row for dataset overview (rendered by JS) */
.sf6-char-banner [style*="display: flex"][style*="gap: 3rem"] {
  flex-direction: column;
  gap: 1.5rem !important;
}

.sf6-char-banner [style*="height: 60px"][style*="background: linear-gradient"] {
  display: none;
}

@media (min-width: 768px) {
  .sf6-char-banner [style*="display: flex"][style*="gap: 3rem"] {
    flex-direction: row;
    gap: 3rem !important;
  }
  .sf6-char-banner [style*="height: 60px"][style*="background: linear-gradient"] {
    display: block;
  }
}

/* Snapshot styling */

.sf6-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

@media (min-width: 640px) {
  .sf6-snapshot-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }
}

.sf6-snapshot-card {
  background: var(--md-default-bg-color);
  border-radius: 0.75rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  padding: 1rem 1.1rem;
}

.sf6-snapshot-card h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--md-default-fg-color--light);
}

.sf6-snapshot-card dl {
  margin: 0;
}

.sf6-snapshot-card dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  margin-bottom: 0.05rem;
}

.sf6-snapshot-card dd {
  margin: 0 0 0.4rem 0;
  font-size: 0.92rem;
  color: var(--md-default-fg-color);
}

.sf6-muted {
  color: var(--md-default-fg-color--light);
  font-size: 0.8rem;
}

/* Auto-hide snapshot + insight + matchup overview until a report is loaded */

body:not(.sf6-has-report) #sf6-character-banner,
body:not(.sf6-has-report) #sf6-player-snapshot,
body:not(.sf6-has-report) #sf6-fix-one-matchup-text,
body:not(.sf6-has-report) .sf6-matchup-table-wrapper,
body:not(.sf6-has-report) .sf6-matchup-grid {
  display: none;
}

body.sf6-has-report #sf6-character-banner {
  display: flex;
}

body.sf6-has-report #sf6-player-snapshot,
body.sf6-has-report #sf6-fix-one-matchup-text,
body.sf6-has-report .sf6-matchup-table-wrapper {
  display: block;
}

body.sf6-has-report .sf6-matchup-grid {
  display: grid;
}


/* Matchup table styling (legacy scrollable table – kept in case you reuse it) */

.sf6-matchup-table-wrapper {
  margin-top: 0.75rem;
  max-height: 260px;
  overflow-y: auto;
  border-radius: 0.75rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: var(--md-default-bg-color);
}

#sf6-matchup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

#sf6-matchup-table thead {
  position: sticky;
  top: 0;
  background: var(--md-default-bg-color);
}

#sf6-matchup-table th,
#sf6-matchup-table td {
  padding: 0.4rem 0.75rem;
  text-align: left;
}

#sf6-matchup-table th {
  font-weight: 600;
  color: var(--md-default-fg-color--light);
}

#sf6-matchup-table tbody tr:nth-child(even) {
  background: rgba(148, 163, 184, 0.03);
}

#sf6-matchup-table tbody tr:hover {
  background: rgba(148, 163, 184, 0.08);
}

/* Matchup overview cards (top/bottom 5) */

.sf6-matchup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

@media (min-width: 640px) {
  .sf6-matchup-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .sf6-matchup-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

.sf6-matchup-card {
  background: var(--md-default-bg-color);
  border-radius: 0.75rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  padding: 1.25rem 1.5rem;
}

.sf6-matchup-card h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-default-fg-color--light);
}

.sf6-matchup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.sf6-matchup-table thead th {
  text-align: left;
  padding: 0.35rem 0.35rem 0.35rem 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-default-fg-color--light);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.sf6-matchup-table tbody td {
  padding: 0.35rem 0.35rem 0.35rem 0;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color);
}

.sf6-matchup-table tbody tr:last-child td {
  border-bottom: none;
}

.sf6-matchup-table tbody td:nth-child(2),
.sf6-matchup-table tbody td:nth-child(3),
.sf6-matchup-table tbody td:nth-child(4) {
  white-space: nowrap;
}

.sf6-collapsible {
  margin-top: 0.75rem;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
}

.sf6-collapsible summary {
  cursor: pointer;
  color: var(--md-default-fg-color--light);
  font-weight: 600;
  outline: none;
}

.sf6-collapsible summary::-webkit-details-marker {
  display: none;
}

.sf6-collapsible[open] summary {
  color: var(--md-default-fg-color);
}

.sf6-table-scroll {
  overflow-x: auto;
  margin-top: 0.75rem;
}

.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (min-width: 900px) {
  .work-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.work-card {
  border: none;
  border-left: 3px solid var(--md-primary-fg-color);
  border-radius: 6px;
  padding: 1.75rem;
  background: color-mix(in srgb, var(--md-primary-fg-color) 6%, var(--md-default-bg-color));
  transition: all 0.2s ease;
}

.work-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--md-primary-fg-color) 20%, transparent);
  background: color-mix(in srgb, var(--md-primary-fg-color) 10%, var(--md-default-bg-color));
}

.work-card h2 {
  margin-top: 0;
  color: var(--md-primary-fg-color);
}


.cta-row,
.sf6-links-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1rem 0 1.5rem;
}

/* Enhance primary buttons */
.md-button--primary {
  font-weight: 600;
  background-color: var(--md-primary-fg-color);
  border: none;
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
  transition: all 0.2s ease;
}

.md-button--primary:hover {
  background-color: color-mix(in srgb, var(--md-primary-fg-color) 85%, white);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--md-primary-fg-color) 25%, transparent);
}

.md-button {
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s ease;
  padding: 0.35rem 0.8rem;
  font-size: 0.8rem;
}

/* ============================
   STUDIO MINIMAL KIT
   Subtle. Intentional. Calm.
   ============================ */

/* 1) Improve reading rhythm (no squish) */
.md-typeset p,
.md-typeset li {
  line-height: 1.72;
}

/* 2) Section headers get a quiet signature */
.md-typeset h2,
.md-typeset h3 {
  position: relative;
  padding-left: 0.75rem;
}

.md-typeset h2::before,
.md-typeset h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 2px;
  background: color-mix(
    in srgb,
    var(--md-primary-fg-color) 55%,
    transparent
  );
  border-radius: 2px;
}

/* Work card headings: card already has a left border — remove h2 pseudo-element */
.work-card h2 {
  padding-left: 0;
}

.work-card h2::before {
  display: none;
}

/* 3) Calm content surfaces (panels, not cards) */
.md-typeset blockquote,
.md-typeset .admonition,
.md-typeset table:not([class]) {
  border-radius: 12px;
  border: 1px solid var(--md-default-fg-color--lightest);
}

/* Override Material's 0.64rem admonition default */
.md-typeset .admonition,
.md-typeset details {
  font-size: 0.825rem;
}

/* 4) Micro-motion (felt, not seen) */
a,
button {
  transition: all 0.15s ease;
}

#sf6-activity-chart .js-plotly-plot {
  border-radius: 12px;
}

.sf6-card {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: var(--md-default-bg-color);
  height: 100%;
}

/* Side-by-side layout for distribution row */
.sf6-distribution-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
  align-items: stretch;
}

.sf6-distribution-row .sf6-card {
  margin: 0;
}

@media (max-width: 768px) {
  .sf6-distribution-row {
    grid-template-columns: 1fr;
  }
}

.sf6-insight-card {
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 6px;
  border-left: 4px solid #00897b;
  background: color-mix(in srgb, var(--md-primary-fg-color) 10%, transparent);
  color: var(--md-default-fg-color--light);
  font-size: 0.95rem;
  line-height: 1.6;
}

.sf6-card-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  color: var(--md-default-fg-color);
}

#sf6-mode-distribution-chart {
  width: 100%;
  min-height: 220px;
}

#sf6-mode-distribution-chart .js-plotly-plot {
  width: 100% !important;
  height: 220px !important;
}

#sf6-character-distribution-chart {
  width: 100%;
  min-height: 280px;
}

#sf6-character-distribution-chart .js-plotly-plot {
  width: 100% !important;
  height: auto !important;
}

/* Mobile optimizations for charts */
@media (max-width: 640px) {
  #sf6-mode-distribution-chart {
    min-height: 220px;
  }

  #sf6-mode-distribution-chart .js-plotly-plot {
    height: 220px !important;
  }

  #sf6-character-distribution-chart {
    min-height: 260px;
  }

  #sf6-character-distribution-chart .js-plotly-plot {
    height: 260px !important;
  }
}

/* SF6 Report: Hide sections until a report is loaded */
#sf6-report-sections,
.sf6-hidden {
  display: none;
}

#sf6-report-sections.sf6-visible,
.sf6-hidden.sf6-visible,
body.sf6-has-report #sf6-report-sections {
  display: block;
}

/* SF6 Report: Side-by-side chart grid */
.sf6-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

.sf6-charts-grid > * {
  min-width: 0; /* Prevent grid overflow */
}

/* Distribution row and cards for charts */
.sf6-distribution-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
  width: 100%;
}

/* Two-column layout for mode + character on desktop */
.sf6-distribution-row:has(> .sf6-card:nth-child(2)) {
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .sf6-distribution-row:has(> .sf6-card:nth-child(2)) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sf6-card {
  background: var(--md-default-bg-color);
  border-radius: 0.75rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  padding: 1rem;
  width: 100%;
}

@media (min-width: 640px) {
  .sf6-card {
    padding: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .sf6-card {
    padding: 1.5rem;
  }
}

.sf6-card-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .sf6-card-title {
    font-size: 0.95rem;
  }
}

.sf6-chart-container {
  width: 100%;
  min-height: 220px;
}

@media (min-width: 640px) {
  .sf6-chart-container {
    min-height: 260px;
  }
}

@media (min-width: 1024px) {
  .sf6-chart-container {
    min-height: 300px;
  }
}

.sf6-insight-card {
  background: var(--md-default-bg-color);
  border-radius: 0.75rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  padding: 1rem;
  margin-top: 1.5rem;
  color: var(--md-default-fg-color);
  line-height: 1.6;
  font-size: 0.9rem;
}

@media (min-width: 640px) {
  .sf6-insight-card {
    padding: 1.25rem;
    font-size: 0.95rem;
  }
}

@media (min-width: 1024px) {
  .sf6-insight-card {
    padding: 1.5rem;
    font-size: 1rem;
  }
}

.sf6-insight-card ul {
  margin: 0;
  padding-left: 1.5rem;
}

.sf6-insight-card li {
  margin-bottom: 0.75rem;
}

/* Stack on smaller screens */
@media (max-width: 1000px) {
  .sf6-charts-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================
   PERSONAL FINANCE DASHBOARD
   Prefix: .pf-
   ============================ */

/* Status / generated-at line */
.pf-generated-at {
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
  margin-bottom: 1rem;
}

.pf-status {
  font-size: 0.82rem;
  padding: 0.2rem 0;
  margin-bottom: 0.5rem;
}
.pf-status--loading { color: #fcd34d; }
.pf-status--error   { color: #fca5a5; }
.pf-status--ok      { display: none; }

/* KPI tiles */
.pf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .pf-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .pf-kpi-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.pf-kpi-card {
  background: color-mix(in srgb, var(--md-primary-fg-color) 5%, var(--md-default-bg-color));
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  padding: 0.9rem 1rem;
}

.pf-kpi-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--md-default-fg-color--light);
  margin-bottom: 0.3rem;
}

.pf-kpi-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--md-default-fg-color);
  margin: 0;
}

.pf-kpi-value.pf-positive { color: #00897b; }
.pf-kpi-value.pf-negative { color: #ef4444; }
.pf-kpi-value.pf-amber    { color: #d97706; }

/* MTD section */
.pf-mtd-section {
  margin-bottom: 2rem;
}

.pf-mtd-type-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-default-fg-color--light);
  padding-left: 2px;
  margin-bottom: 0.4rem;
}

/* Rolling small multiples grid */
.pf-rolling-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

@media (min-width: 480px) {
  .pf-rolling-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .pf-rolling-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pf-rolling-section-header {
  grid-column: 1 / -1;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-default-fg-color--light);
  padding-bottom: 0.4rem;
  margin-top: 0.75rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.pf-rolling-card {
  background: color-mix(in srgb, var(--md-primary-fg-color) 3%, var(--md-default-bg-color));
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  padding: 0.7rem 0.85rem 0.6rem;
}

.pf-rolling-card-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
  margin-bottom: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-rolling-mini-chart {
  height: 110px;
}

/* Insight cards */
.pf-insights-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.pf-insight-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.5;
  border: 1px solid transparent;
}

.pf-insight--ok {
  background: color-mix(in srgb, #00897b 8%, var(--md-default-bg-color));
  border-color: color-mix(in srgb, #00897b 25%, transparent);
}

.pf-insight--warning {
  background: color-mix(in srgb, #ef4444 7%, var(--md-default-bg-color));
  border-color: color-mix(in srgb, #ef4444 22%, transparent);
}

.pf-insight--info {
  background: color-mix(in srgb, var(--md-default-fg-color--light) 8%, var(--md-default-bg-color));
  border-color: color-mix(in srgb, var(--md-default-fg-color--light) 22%, transparent);
}

.pf-insight-icon {
  flex-shrink: 0;
  opacity: 0.75;
  line-height: 1.5;
}

/* ---- Table reports ---- */

.pf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  margin-bottom: 1.5rem;
}

.pf-table th {
  text-align: left;
  padding: 6px 12px;
  border-bottom: 2px solid var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.pf-table td {
  padding: 5px 12px;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color);
  vertical-align: middle;
}

.pf-table tbody tr:hover td {
  background: color-mix(in srgb, var(--md-default-fg-color) 3%, transparent);
}

.pf-table-group td {
  padding: 10px 12px 4px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-default-fg-color--light);
  background: color-mix(in srgb, var(--md-default-fg-color) 3%, transparent);
  border-top: 1px solid var(--md-default-fg-color--lightest);
  border-bottom: none;
}

.pf-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "Cascadia Code", monospace;
}

.pf-total {
  font-weight: 600;
  color: var(--md-default-fg-color);
}

/* ── Category card grid ───────────────────────────────────────────────────── */

/* Section wrapper */
.pf-section {
  margin-bottom: 2rem;
}

/* Section header: title + aggregate variance on same line */
.pf-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 2px 6px;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  margin-bottom: 10px;
}

.pf-section-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-default-fg-color--light);
}

.pf-section-agg {
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "Cascadia Code", monospace;
}

.pf-vtable-empty {
  color: var(--md-default-fg-color--light);
  font-size: 0.82rem;
  margin-bottom: 1.5rem;
}

/* Card grid: 1 → 2 → 3 columns */
.pf-cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}

@media (min-width: 560px) {
  .pf-cat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .pf-cat-grid { grid-template-columns: repeat(3, 1fr); }
}

.pf-cat-card {
  background: color-mix(in srgb, var(--md-primary-fg-color) 3%, var(--md-default-bg-color));
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  padding: 0.7rem 0.85rem 0.65rem;
  transition: border-color 0.12s;
}

.pf-cat-card--open {
  border-color: color-mix(in srgb, var(--md-default-fg-color) 20%, transparent);
}

/* Card header row */
.pf-cat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.pf-cat-name {
  flex: 1;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--md-default-fg-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pf-cat-var {
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Sparkline wrapper */
.pf-cat-spark {
  margin: 0.45rem 0 0.3rem;
  line-height: 0;
}

.pf-spark {
  display: block;
  overflow: visible;
}

/* Sparkline budget-line label */
.pf-spark-lbl {
  font-size: 9px;
  font-family: ui-monospace, "Cascadia Code", monospace;
  fill: rgba(156,163,175,0.75);
  pointer-events: none;
}

/* % of budget bar — full card width */
.pf-pct-bar-wrap {
  height: 3px;
  background: color-mix(in srgb, var(--md-default-fg-color) 8%, transparent);
  border-radius: 2px;
  overflow: hidden;
  width: 100%;
  margin-top: 0.1rem;
}

.pf-pct-bar {
  display: block;
  height: 100%;
  border-radius: 2px;
}

/* Transaction list inside card */
.pf-cat-txns {
  margin-top: 0.6rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  padding-top: 0.5rem;
}

.pf-cat-txns--hidden {
  display: none;
}

/* Status dot */
.pf-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.pf-dot--good { background: #00897b; }
.pf-dot--near { background: #f59e0b; }
.pf-dot--over { background: #ef4444; }

/* Inner transaction table */
.pf-txn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
  margin-top: 4px;
}

.pf-txn-table th {
  text-align: left;
  padding: 4px 8px;
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--md-default-fg-color--light);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.pf-txn-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  vertical-align: middle;
}

.pf-txn-vendor {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-txn-empty {
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
  font-style: italic;
  padding: 4px 0;
  display: block;
}

.pf-txn-note {
  font-size: 0.74rem;
  color: var(--md-default-fg-color--light);
  font-style: italic;
  padding: 0 8px 6px 8px;
}

.pf-txn-vendor-raw {
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

@media (max-width: 480px) {
  .pf-vrow-name { font-size: 0.82rem; }
  .pf-vrow-var  { font-size: 0.82rem; }
  .pf-txn-vendor { max-width: 140px; }
  .pf-pct-bar-wrap { max-width: 80px; }
}

/* ============================
   ANIMATED MERMAID DIAGRAM
   ============================ */

.mermaid-animated {
  padding: 1.5rem 1rem;
  margin: 2rem 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--md-primary-fg-color) 8%, transparent);
  border: 2px solid color-mix(in srgb, var(--md-primary-fg-color) 40%, transparent);
  background: color-mix(in srgb, var(--md-primary-fg-color) 10%, transparent);
  border: 2px solid color-mix(in srgb, var(--md-primary-fg-color) 35%, transparent);
  position: relative;
  overflow: visible;
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mermaid-animated .mermaid {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mermaid-animated .mermaid svg {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  transform: scale(1.4);
  transform-origin: center;
}

/* Make text larger and bolder */
.mermaid-animated .nodeLabel {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--md-primary-bg-color, #ffffff) !important;
  fill: var(--md-primary-bg-color, #ffffff) !important;
  text-shadow: none;
}

.mermaid-animated .edgeLabel {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--md-default-fg-color, #1a1a1a) !important;
  fill: var(--md-default-fg-color, #1a1a1a) !important;
  text-shadow: none;
}

/* Mermaid v10 uses HTML labels inside foreignObject */
.mermaid-animated svg foreignObject .nodeLabel,
.mermaid-animated svg foreignObject .edgeLabel,
.mermaid-animated svg foreignObject [class*="Label"],
.mermaid-animated svg foreignObject div,
.mermaid-animated svg foreignObject span {
  color: var(--md-primary-bg-color, #ffffff) !important;
}

/* Style node boxes - larger, bolder, better colors */
.mermaid-animated .node rect,
.mermaid-animated rect[class*="node"],
.mermaid-animated rect[rx] {
  fill: var(--md-primary-fg-color, #17b8a6) !important;
  stroke: var(--md-primary-fg-color--dark, var(--md-primary-fg-color, #0d8a7f));
  stroke-width: 2.5px !important;
  rx: 8px !important;
  ry: 8px !important;
}

/* Node size comes from the SVG-level scale only — no compound multiplication */

/* Animated data flow - targeting ALL paths in mermaid */
.mermaid-animated svg path[class*="edge"],
.mermaid-animated svg .edgePath path,
.mermaid-animated svg path[d*="M"],
.mermaid-animated svg g[class*="edgePath"] path {
  stroke-width: 4px !important;
  stroke: var(--md-accent-fg-color, #6ee7b7) !important;
  stroke-dasharray: 20 10 !important;
  animation: edge-flow 2s linear infinite !important;
}

@keyframes edge-flow {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -30;
  }
}

/* Target arrowheads */
.mermaid-animated svg marker path,
.mermaid-animated svg .arrowheadPath,
.mermaid-animated svg defs marker path {
  fill: var(--md-accent-fg-color, #6ee7b7) !important;
  animation: arrow-pulse 1s ease-in-out infinite !important;
}

@keyframes arrow-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* Backup: animate ALL paths if nothing else works */
.mermaid-animated svg path:not([class*="node"]) {
  stroke-dasharray: 20 10 !important;
  animation: edge-flow 2s linear infinite !important;
}

@media (max-width: 768px) {
  .mermaid-animated {
    padding: 1.25rem 0.5rem;
    overflow-x: auto;
    min-height: 250px;
  }
  
  .mermaid-animated .mermaid svg {
    transform: scale(1.1);
  }
  
  .mermaid-animated .nodeLabel {
    font-size: 18px !important;
  }
  
  .mermaid-animated .edgeLabel {
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .mermaid-animated {
    padding: 1rem 0.5rem;
    min-height: 220px;
  }
  
  .mermaid-animated .mermaid svg {
    transform: scale(1);
  }
  
  .mermaid-animated .nodeLabel {
    font-size: 16px !important;
  }
  
  .mermaid-animated .edgeLabel {
    font-size: 12px !important;
  }
}

/* ── Diagram frame: shared container for all site mermaid diagrams ── */
.diagram-frame {
  padding: 1.5rem 1rem;
  margin: 2rem 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--md-primary-fg-color) 10%, transparent);
  border: 2px solid color-mix(in srgb, var(--md-primary-fg-color) 35%, transparent);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diagram-frame .mermaid {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.diagram-frame .mermaid svg {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  transform: scale(1.15);
  transform-origin: center;
}

.diagram-frame .node rect,
.diagram-frame rect[class*="node"],
.diagram-frame rect[rx] {
  fill: var(--md-primary-fg-color, #17b8a6) !important;
  stroke: var(--md-primary-fg-color, #0d8a7f);
  stroke-width: 2px !important;
}

.diagram-frame .nodeLabel,
.diagram-frame svg foreignObject div,
.diagram-frame svg foreignObject span {
  color: var(--md-primary-bg-color, #ffffff) !important;
}

@media (max-width: 768px) {
  .diagram-frame {
    padding: 1.25rem 0.5rem;
    min-height: 160px;
  }
  .diagram-frame .mermaid svg {
    transform: scale(1.0);
  }
}

@media (max-width: 480px) {
  .diagram-frame .mermaid svg {
    transform: scale(0.9);
  }
}

/* SF6 overview: 2-up diagrams on desktop, stacked on mobile */
.sf6-diagrams {
  margin: 2rem 0;
  align-items: stretch;
}

.sf6-diagrams .mermaid-animated {
  margin: 0;
  padding: 1.25rem 0.75rem;
  min-height: 300px;
}

.sf6-diagrams .mermaid-animated .mermaid svg {
  transform: scale(1.15);
}

@media (max-width: 900px) {
  .sf6-diagrams {
    margin: 1.5rem 0;
  }

  .sf6-diagrams .mermaid-animated {
    padding: 1.25rem 0.5rem;
  }
}


/* SF6 Report: Tight chart spacing */
#sf6-mr-trend-chart,
#sf6-mr-weekly-chart {
  margin: 0 !important;
  padding: 0 !important;
  margin-bottom: 2px !important;
}

#sf6-mr-trend-chart {
  margin-bottom: 0 !important;
}

#sf6-mr-trend-chart .js-plotly-plot,
#sf6-mr-weekly-chart .js-plotly-plot {
  margin: 0 !important;
  padding: 0 !important;
}


/* ══════════════════════════════════════════════════════════════
   SF6 PERFORMANCE DASHBOARD — "The Cage"
   sf6-echarts.md  +  sf6-dashboard.js
══════════════════════════════════════════════════════════════ */

/* ── Input bar ───────────────────────────────────────────── */
.sf6-dash-input-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
}

.sf6-dash-input-bar input {
  flex: 0 1 260px;
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  transition: border-color 120ms ease;
}
.sf6-dash-input-bar input:focus {
  outline: none;
  border-color: #00897b;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-primary-fg-color) 20%, transparent);
}

.sf6-dash-input-bar button {
  padding: 0.55rem 1.1rem;
  background: #00897b;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, transform 80ms ease;
}
.sf6-dash-input-bar button:hover { background: #26a69a; transform: translateY(-1px); }
.sf6-dash-input-bar button:active { transform: none; }

.sf6-dash-status-text {
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
}

/* ── Shared card ─────────────────────────────────────────── */
.sf6-dash-card {
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

html[data-md-color-scheme="slate"] .sf6-dash-card {
  background: #161b22;
  border-color: #30363d;
}

.sf6-dash-card-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-default-fg-color--light);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sf6-dash-card-sub {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--md-default-fg-color--light);
  font-size: 0.75rem;
}

/* ── Identity bar ────────────────────────────────────────── */
.sf6-dash-identity-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  background: var(--md-default-bg-color);
}

html[data-md-color-scheme="slate"] .sf6-dash-identity-bar {
  background: #161b22;
  border-color: #30363d;
}

.sf6-dash-cfn {
  font-size: 1.35rem;
  font-weight: 700;
  color: #00897b;
  letter-spacing: -0.01em;
}

.sf6-dash-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--md-default-fg-color--light);
  margin-top: 0.15rem;
}

.sf6-dash-sep { opacity: 0.35; }

.sf6-dash-callout {
  max-width: 50%;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--md-default-fg-color--light);
  font-style: italic;
  text-align: right;
}

@media (max-width: 720px) {
  .sf6-dash-callout { max-width: 100%; text-align: left; }
}

/* ── Hero card (timeline) ────────────────────────────────── */
.sf6-dash-card-hero { margin-bottom: 1rem; }

/* ── Two-column rows ─────────────────────────────────────── */
.sf6-dash-row {
  display: grid;
  gap: 1rem;
  margin-bottom: 0;
}

.sf6-dash-row-3 { grid-template-columns: 55fr 45fr; }
.sf6-dash-row-4 { grid-template-columns: 1fr 1fr; }

/* Galaxy + drill side by side: bubble gets ~58%, drill ~42% */
.sf6-dash-row-galaxy { grid-template-columns: 58fr 42fr; align-items: start; }
.sf6-dash-galaxy-col { margin-bottom: 0; }
.sf6-dash-drill-col  { margin-bottom: 0; }

.sf6-dash-row .sf6-dash-card { margin-bottom: 0; }

@media (max-width: 900px) {
  .sf6-dash-row-galaxy { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .sf6-dash-row-3,
  .sf6-dash-row-4 { grid-template-columns: 1fr; }
}

/* ── Insight chips ───────────────────────────────────────── */
.sf6-dash-insight-chip {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  color: #00897b;
  line-height: 1.5;
  min-height: 1.2em;
}

/* ── Nemesis Wall ────────────────────────────────────────── */
.sf6-dash-nemesis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* 4-column full-width variant */
.sf6-dash-nemesis-4col {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
  .sf6-dash-nemesis-4col { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .sf6-dash-nemesis-grid,
  .sf6-dash-nemesis-4col { grid-template-columns: 1fr; }
}

.sf6-nem-bucket {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  background: var(--md-default-bg-color--light);
}

html[data-md-color-scheme="slate"] .sf6-nem-bucket {
  background: #0d1117;
  border-color: #30363d;
}

.sf6-nem-header {
  padding-left: 0.55rem;
  margin-bottom: 0.45rem;
}

.sf6-nem-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sf6-nem-desc {
  display: block;
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
  margin-top: 1px;
}

.sf6-nem-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf6-nem-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  cursor: pointer;
  transition: background 100ms ease;
  font-size: 0.78rem;
  border-radius: 4px;
  padding-left: 0.25rem;
}
.sf6-nem-item:last-child { border-bottom: none; }
.sf6-nem-item:hover { background: color-mix(in srgb, #00897b 10%, transparent); }

.sf6-nem-cfn {
  font-weight: 600;
  color: var(--md-default-fg-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.sf6-nem-chars {
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
}

.sf6-nem-stats {
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
  white-space: nowrap;
}

.sf6-nem-empty {
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
  padding: 0.35rem 0;
  list-style: none;
}

/* ── Drill panel ─────────────────────────────────────────── */
.sf6-dash-drill-panel {
  margin-top: 1rem;
  min-height: 120px;
  transition: min-height 200ms ease;
}

.sf6-dash-drill-header {
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
}

.sf6-drill-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
}

.sf6-drill-header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
  align-items: center;
}

.sf6-dash-drill-stats {
  margin-bottom: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
}

.sf6-drill-stat {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
}
.sf6-drill-stat span { color: var(--md-default-fg-color--light); font-size: 0.72rem; }
.sf6-drill-stat b   { font-size: 0.92rem; color: var(--md-default-fg-color); }

.sf6-drill-nudge {
  width: 100%;
  padding: 0.45rem 0.75rem;
  background: color-mix(in srgb, #00897b 15%, transparent);
  border-left: 3px solid #00897b;
  border-radius: 0 6px 6px 0;
  font-size: 0.8rem;
  color: #00897b;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.sf6-drill-spark-label {
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
  margin-bottom: 0.3rem;
}

.sf6-drill-spark {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

.sf6-wl-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
}
.sf6-wl-w { background: rgba(74,222,128,0.2); color: #4ade80; border: 1px solid rgba(74,222,128,0.4); }
.sf6-wl-l { background: rgba(248,113,113,0.2); color: #f87171; border: 1px solid rgba(248,113,113,0.4); }

.sf6-drill-trend {
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--md-default-fg-color--light);
}

.sf6-dash-drill-content { width: 100%; }

/* ── Light mode overrides ────────────────────────────────── */
html[data-md-color-scheme="default"] .sf6-dash-card,
html[data-md-color-scheme="default"] .sf6-dash-identity-bar {
  background: #ffffff;
  border-color: #d0d7de;
}

html[data-md-color-scheme="default"] .sf6-nem-bucket {
  background: #f6f8fa;
  border-color: #d0d7de;
}

html[data-md-color-scheme="default"] .sf6-nem-item {
  border-bottom-color: #e8eaed;
}

/* ── Light mode: color contrast fixes ───────────────────────────────────────
   Base styles use neon/pastel semantic colors designed for dark backgrounds.
   Swap to accessible darker variants on light backgrounds.
   ────────────────────────────────────────────────────────────────────────── */

/* SF6 status text */
html[data-md-color-scheme="default"] .sf6-status--loading { color: #d97706; }
html[data-md-color-scheme="default"] .sf6-status--ok      { color: #059669; }
html[data-md-color-scheme="default"] .sf6-status--error   { color: #dc2626; }

/* PF status text */
html[data-md-color-scheme="default"] .pf-status--loading  { color: #d97706; }
html[data-md-color-scheme="default"] .pf-status--error    { color: #dc2626; }

/* SF6 W/L result blocks */
html[data-md-color-scheme="default"] .sf6-wl-w {
  background: rgba(16,185,129,0.12);
  color: #059669;
  border-color: rgba(16,185,129,0.35);
}
html[data-md-color-scheme="default"] .sf6-wl-l {
  background: rgba(239,68,68,0.1);
  color: #dc2626;
  border-color: rgba(239,68,68,0.3);
}

/* SF6 active report title — mint start of gradient is invisible on white */
html[data-md-color-scheme="default"] .sf6-report-title.sf6-report-active {
  background: linear-gradient(135deg, #00897b, #005f56);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}