/* ================================================= */
/* SPEC-B94: Visual System Redesign — Override File  */
/* Loaded as SEPARATE <link> AFTER smartpmo-bundle   */
/* so these rules always win the cascade.            */
/* Do NOT add to bundle — ordering is intentional.   */
/* ================================================= */

/* stylelint-disable declaration-no-important, selector-max-specificity, no-descending-specificity */

/* ============================================================ */
/* SECTION 1: CSS VARIABLES                                     */
/* ============================================================ */

:root {
  /* ---- Monospace font ---- */
  --font-mono: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;

  /* ---- Background ---- */
  --color-bg-primary:  #080b12;
  --color-bg-panel:    rgba(16, 20, 30, 0.8);
  --color-bg-elevated: #0f1420;

  /* Override legacy variables */
  --bg:    #080b12;
  --panel: rgba(16, 20, 30, 0.8);

  /* ---- Text ---- */
  --color-text-primary:   #f0f3f8;
  --color-text-secondary: rgba(220, 226, 235, 0.65);
  --color-text-muted:     rgba(220, 226, 235, 0.45);
  --color-text-dim:       rgba(220, 226, 235, 0.35);
  --color-grey-light:     #8899b0;

  /* Override legacy text variables */
  --text-primary: #f0f3f8;
  --text-muted:   rgba(220, 226, 235, 0.65);

  /* ---- Accent — Signal Amber (replaces cyan/purple/blue) ---- */
  --color-accent:        #D4891A;
  --color-accent-hover:  #E09520;
  --color-accent-muted:  rgba(212, 137, 26, 0.5);
  --color-accent-subtle: rgba(212, 137, 26, 0.15);
  --color-accent-bg:     rgba(212, 137, 26, 0.04);

  /* Override legacy accent variables */
  --cyan-primary:         #D4891A;
  --color-cyan:           #D4891A;
  --color-amber:          #D4891A;
  --color-accent-primary: #D4891A;
  --color-purple:         rgba(220, 226, 235, 0.15);
  --color-blue:           rgba(220, 226, 235, 0.15);
  --gold-accent:          #D4891A;

  /* ---- Borders ---- */
  --color-border:        rgba(220, 226, 235, 0.08);
  --color-border-hover:  rgba(220, 226, 235, 0.15);
  --color-border-accent: rgba(212, 137, 26, 0.25);

  /* Override legacy border variables */
  --glass-border: rgba(220, 226, 235, 0.08);

  /* ---- Quadrant palette ---- */
  --color-q-text-bright:  rgba(220, 226, 235, 0.9);
  --color-q-text-mid:     rgba(220, 226, 235, 0.6);
  --color-q-bg-strong:    rgba(220, 226, 235, 0.2);
  --color-q-bg-mid:       rgba(220, 226, 235, 0.1);
  --color-q-bg-dim:       rgba(220, 226, 235, 0.04);

  /* ---- Category colours ---- */
  --category-pmo-related-border:    #D4891A;
  --category-pmo-related-badge-bg:  rgba(212, 137, 26, 0.15);
  --category-pmo-related-badge-text: #D4891A;
  --category-pmo-related-score:     #D4891A;
  --category-pmo-potential-border:  rgba(220, 226, 235, 0.2);
  --category-pmo-potential-badge-bg: rgba(220, 226, 235, 0.06);
  --category-pmo-potential-badge-text: rgba(220, 226, 235, 0.55);
  --category-pmo-potential-score:   rgba(220, 226, 235, 0.7);
  --category-ai-general-border:     rgba(220, 226, 235, 0.08);
  --category-ai-general-badge-bg:   rgba(220, 226, 235, 0.04);
  --category-ai-general-badge-text: rgba(220, 226, 235, 0.4);
  --category-ai-general-score:      rgba(220, 226, 235, 0.5);
}

/* ============================================================ */
/* SECTION 2: GLOBAL                                            */
/* ============================================================ */

body {
  background: var(--color-bg-primary) !important;
}

body::before {
  background:
    radial-gradient(ellipse at 70% 10%, rgba(212, 137, 26, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(212, 137, 26, 0.03) 0%, transparent 50%) !important;
  animation: none !important;
}

/* Skip link */
.skip-link {
  background: var(--color-accent) !important;
}

/* Focus ring — amber not cyan */
:focus-visible {
  outline-color: var(--color-accent) !important;
}

/* ============================================================ */
/* SECTION 3: HEADER                                            */
/* ============================================================ */

.site-header-brand {
  color: inherit !important;
}

/* Logo text: SMART / PMO / .ai */
.site-header-name {
  font-family: var(--font-mono) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
.logo-smart {
  color: var(--color-text-primary) !important;
}
.logo-pmo {
  color: var(--color-accent) !important;
}
.logo-ai {
  font-weight: 300 !important;
  opacity: 0.6 !important;
  text-transform: lowercase !important;
}

/* Nav items: mono, uppercase, secondary */
.site-header-nav-link {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: var(--color-text-secondary) !important;
}
.site-header-nav-link:hover {
  color: var(--color-text-primary) !important;
}

/* CTA button: amber, sharp, mono */
.site-header-cta-button {
  background: var(--color-accent) !important;
  color: var(--color-bg-primary) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 10px 20px !important;
}
.site-header-cta-button:hover {
  background: var(--color-accent-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header-mobile-cta {
  background: var(--color-accent) !important;
  color: var(--color-bg-primary) !important;
  border-radius: 0 !important;
}
.site-header-mobile-cta:hover {
  background: var(--color-accent-hover) !important;
}

/* Footer disclaimer link */
.site-footer-disclaimer a {
  color: var(--color-accent) !important;
}

/* ============================================================ */
/* SECTION 4: HERO                                              */
/* ============================================================ */

/* Hero section: faint amber bg, contain diagonal SVG */
.hero-section {
  background:
    radial-gradient(ellipse 600px 400px at 20% 30%, rgba(212, 137, 26, 0.04), transparent),
    var(--color-bg-primary) !important;
  overflow: hidden !important;
}

/* Hero headline */
.hero-headline {
  font-size: 38px !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
  letter-spacing: -0.5px !important;
  text-shadow: none !important;
}

/* Hero subheadline: same size, dimmer */
.hero-subheadline {
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--color-text-secondary) !important;
  letter-spacing: 0 !important;
}

/* CTA button — sharp, mono, amber */
.hero-btn-primary {
  background: var(--color-accent) !important;
  color: var(--color-bg-primary) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 11px 28px !important;
  transform: none !important;
  transition: background 0.15s ease !important;
}
.hero-btn-primary:hover {
  background: var(--color-accent-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Report status badge */
.hero-report-status {
  background: rgba(212, 137, 26, 0.12) !important;
  border-color: rgba(212, 137, 26, 0.3) !important;
  color: var(--color-accent) !important;
}

/* AI disclaimer link */
.hero-ai-disclaimer-link {
  color: var(--color-accent) !important;
}

/* Axis labels */
.hero-axis-label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  color: var(--color-text-muted) !important;
}

.hero-axis-low {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: rgba(220, 226, 235, 0.35) !important;
}

.hero-axis-high {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: var(--color-accent) !important;
}

/* ============================================================ */
/* SECTION 5: ASSESSMENT QUADRANT (SPEC-B94 §9.1)              */
/* ============================================================ */

.hero-quadrant-grid {
  gap: 2px !important;
  background: rgba(220, 226, 235, 0.06) !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}

/* Q1: Prompt Whisperers — cool grey */
.hero-q1 {
  background: rgba(220, 226, 235, 0.12) !important;
  border-top-left-radius: 4px !important;
}

/* Q2: Zen PMO — amber (the goal quadrant) */
.hero-q2 {
  background: rgba(212, 137, 26, 0.15) !important;
  border: 1px solid rgba(212, 137, 26, 0.25) !important;
  border-top-right-radius: 4px !important;
}

/* Q3: Spreadsheet Nation — dark grey */
.hero-q3 {
  background: rgba(220, 226, 235, 0.07) !important;
  border-bottom-left-radius: 4px !important;
}

/* Q4: ChatGPT Fan Club — near invisible */
.hero-q4 {
  background: rgba(220, 226, 235, 0.04) !important;
  border-bottom-right-radius: 4px !important;
}

/* Kill glow pulse — currentColor would bleed old colours */
.hero-quad.hero-highlighted {
  box-shadow: 0 0 20px rgba(212, 137, 26, 0.2) !important;
  animation: none !important;
}

/* Quadrant name text */
.hero-q1 .hero-qname { color: rgba(220, 226, 235, 0.9) !important; text-shadow: none !important; }
.hero-q2 .hero-qname { color: #D4891A !important; text-shadow: none !important; }
.hero-q3 .hero-qname { color: #D4891A !important; text-shadow: none !important; }
.hero-q4 .hero-qname { color: rgba(220, 226, 235, 0.6) !important; text-shadow: none !important; }

/* Quadrant percentage */
.hero-q1 .hero-qpct { color: rgba(220, 226, 235, 0.85) !important; text-shadow: none !important; }
.hero-q2 .hero-qpct { color: #D4891A !important; text-shadow: none !important; }
.hero-q3 .hero-qpct { color: #D4891A !important; text-shadow: none !important; }
.hero-q4 .hero-qpct { color: rgba(220, 226, 235, 0.45) !important; text-shadow: none !important; }

/* Icons */
.hero-q1 .hero-icon { color: rgba(220, 226, 235, 0.6) !important; filter: none !important; }
.hero-q2 .hero-icon { color: #D4891A !important; filter: none !important; }
.hero-q3 .hero-icon { color: rgba(212, 137, 26, 0.7) !important; filter: none !important; }
.hero-q4 .hero-icon { color: rgba(220, 226, 235, 0.35) !important; filter: none !important; }

/* Tooltips */
.hero-grid-tooltip {
  border-color: rgba(212, 137, 26, 0.4) !important;
}

.hero-grid-tooltip[data-quad="q1"] { border-color: rgba(212, 137, 26, 0.5) !important; }
.hero-grid-tooltip[data-quad="q2"] { border-color: rgba(212, 137, 26, 0.6) !important; }
.hero-grid-tooltip[data-quad="q3"] { border-color: rgba(220, 226, 235, 0.12) !important; }
.hero-grid-tooltip[data-quad="q4"] { border-color: rgba(220, 226, 235, 0.15) !important; }

.hero-grid-tooltip[data-quad="q1"] .tooltip-title { color: var(--color-accent) !important; }
.hero-grid-tooltip[data-quad="q2"] .tooltip-title { color: var(--color-accent) !important; }
.hero-grid-tooltip[data-quad="q3"] .tooltip-title { color: rgba(220, 226, 235, 0.7) !important; }
.hero-grid-tooltip[data-quad="q4"] .tooltip-title { color: rgba(220, 226, 235, 0.6) !important; }

/* Email input focus */
.hero-report-email-input:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 2px rgba(212, 137, 26, 0.2) !important;
}

/* ============================================================ */
/* SECTION 6: INTELLIGENCE CARDS                                */
/* ============================================================ */

/* Section title left-border accent */
.section-title--auto {
  color: var(--color-accent) !important;
  border-left-color: var(--color-accent) !important;
}

.section-title--curated {
  color: var(--color-accent) !important;
  border-left-color: var(--color-accent) !important;
}

.section-subtitle {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

/* Card hover — amber not cyan */
.insight-card--auto:hover,
.insight-card--curated:hover,
.article-card:hover {
  box-shadow: 0 12px 40px rgba(212, 137, 26, 0.15) !important;
  border-color: rgba(212, 137, 26, 0.25) !important;
}

/* PMO category badges — kill colour gradients, apply spec palette */
.pmo-related {
  background: rgba(212, 137, 26, 0.15) !important;
  border: 1px solid rgba(212, 137, 26, 0.3) !important;
  color: #D4891A !important;
}

.pmo-potential {
  background: rgba(220, 226, 235, 0.06) !important;
  border: 1px solid rgba(220, 226, 235, 0.12) !important;
  color: rgba(220, 226, 235, 0.55) !important;
}

.ai-general {
  background: rgba(220, 226, 235, 0.04) !important;
  border: 1px solid rgba(220, 226, 235, 0.08) !important;
  color: rgba(220, 226, 235, 0.4) !important;
}

/* Card title hover */
.card-title a:hover {
  color: var(--color-accent) !important;
}

/* TLDR bullet colour */
.card-tldr li::before {
  color: rgba(220, 226, 235, 0.4) !important;
}

.tldr-bullet::before {
  color: rgba(220, 226, 235, 0.4) !important;
}

/* TLDR badge */
.tldr-badge {
  background: rgba(212, 137, 26, 0.12) !important;
  color: var(--color-accent) !important;
}

/* Article score badge */
.article-score {
  background: rgba(212, 137, 26, 0.1) !important;
}

/* Badge hover */
.badge:hover {
  box-shadow: 0 4px 12px rgba(212, 137, 26, 0.2) !important;
}

/* Keyword tag hover */
.keyword-tag:hover {
  background: rgba(212, 137, 26, 0.08) !important;
}

/* Share icon success state — keep green for copy feedback */
.shr-icon.success {
  background: rgba(212, 137, 26, 0.15) !important;
  border-color: rgba(212, 137, 26, 0.3) !important;
  color: var(--color-accent) !important;
}

/* ============================================================ */
/* SECTION 7: VOTES                                             */
/* ============================================================ */

.vote-btn[aria-pressed="true"] {
  border-color: var(--color-accent) !important;
  background: rgba(212, 137, 26, 0.12) !important;
  color: var(--color-accent) !important;
}

/* ============================================================ */
/* SECTION 8: ASSESSMENT PAGE                                   */
/* ============================================================ */

/* Kill gradient text on title */
.assess-title {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
  background-clip: unset !important;
  color: var(--color-text-primary) !important;
}

/* Start button */
.assess-start-btn {
  background: var(--color-accent) !important;
  color: #080b12 !important;
}

/* Progress bar — amber not cyan/purple gradient */
.assess-progress-fill {
  background: var(--color-accent) !important;
}

/* Option hover/selected */
.assess-option:hover {
  background: rgba(212, 137, 26, 0.06) !important;
  border-color: rgba(212, 137, 26, 0.25) !important;
}

.assess-option:focus {
  outline-color: var(--color-accent) !important;
}

.assess-option.is-selected {
  background: rgba(212, 137, 26, 0.1) !important;
  border-color: var(--color-accent) !important;
}

.assess-option.is-selected .assess-option-radio {
  border-color: var(--color-accent) !important;
}

.assess-option-radio-dot {
  background: var(--color-accent) !important;
}

.assess-option-checkbox {
  color: var(--color-accent) !important;
}

.assess-option.is-selected .assess-option-checkbox {
  border-color: var(--color-accent) !important;
  background: rgba(212, 137, 26, 0.15) !important;
}

/* Nav next button */
.assess-nav-next {
  background: var(--color-accent) !important;
  color: #080b12 !important;
}

.assess-nav-back:focus,
.assess-nav-next:focus,
.assess-action-btn:focus {
  outline-color: var(--color-accent) !important;
}

/* Result headings */
.assess-result-heading {
  color: var(--color-accent) !important;
  border-bottom-color: rgba(212, 137, 26, 0.2) !important;
}

.assess-result-steps-list li::before {
  color: var(--color-accent) !important;
}

.assess-result-target {
  background: rgba(212, 137, 26, 0.06) !important;
  border-left-color: var(--color-accent) !important;
}

/* Result action buttons */
.assess-action-copy {
  background: rgba(212, 137, 26, 0.08) !important;
  border-color: rgba(212, 137, 26, 0.25) !important;
  color: var(--color-accent) !important;
}

.assess-action-copy:hover {
  background: rgba(212, 137, 26, 0.15) !important;
  border-color: var(--color-accent) !important;
}

/* Kill purple on email action */
.assess-action-email {
  background: rgba(220, 226, 235, 0.06) !important;
  border-color: rgba(220, 226, 235, 0.12) !important;
  color: var(--color-text-secondary) !important;
}

.assess-action-email:hover {
  background: rgba(220, 226, 235, 0.1) !important;
  border-color: rgba(220, 226, 235, 0.2) !important;
}

/* Nav link hover */
.assess-nav-link:hover {
  color: var(--color-accent) !important;
}

/* Kill purple on retake button */
.assess-retake-btn {
  color: var(--color-text-secondary) !important;
}

.assess-retake-btn:hover {
  color: var(--color-text-primary) !important;
}

/* assessment-flow.css violations */
.hero-result-popup.hero-q1 {
  border-color: rgba(212, 137, 26, 0.5) !important;
}

/* ============================================================ */
/* SECTION 9: PROMPTS PAGE                                      */
/* ============================================================ */

.prompts-tab.is-active {
  background: rgba(212, 137, 26, 0.15) !important;
  color: var(--color-accent) !important;
  border-color: rgba(212, 137, 26, 0.3) !important;
}

.smartai-label-smart {
  color: var(--color-accent) !important;
}

.prompts-tab[data-tab="smartai"].is-active .smartai-label-smart {
  color: var(--color-accent) !important;
}

.smartai-select-all {
  color: var(--color-accent) !important;
}

.smartai-preview-label {
  color: var(--color-accent) !important;
}

.smartai-preview-dot {
  color: var(--color-accent) !important;
}

/* Kill cyan→purple gradient on active tab background */
.prompts-tab[data-tab="smartai"].is-active,
.prompts-tab[data-tab="forge"].is-active,
.prompts-tab[data-tab="pret"].is-active,
.prompts-tab[data-tab="chains"].is-active {
  background: rgba(212, 137, 26, 0.15) !important;
  color: var(--color-accent) !important;
}

/* ============================================================ */
/* SECTION 10: CARD COMPONENT — Phase 3                        */
/* ============================================================ */

/* Grid gap: 3px between cards */
.insights-grid {
  gap: 3px !important;
}

/* Card shell */
.article-card.v3-card {
  background: var(--color-bg-panel) !important;
  border-radius: 0 !important;
  border-top: 1px solid var(--color-border) !important;
  border-right: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-left: 3px solid var(--color-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  transition: border-color 0.15s ease !important;
  display: flex !important;
  flex-direction: column !important;
}
.article-card.v3-card:hover {
  border-top-color: var(--color-border-accent) !important;
  border-right-color: var(--color-border-accent) !important;
  border-bottom-color: var(--color-border-accent) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Category left border colours — same 2-class specificity as base to win cascade */
.article-card.v3-card--pmo-related {
  border-left-color: var(--category-pmo-related-border) !important;
}
.article-card.v3-card--pmo-potential {
  border-left-color: var(--category-pmo-potential-border) !important;
}
.article-card.v3-card--ai-general {
  border-left-color: var(--category-ai-general-border) !important;
}
.article-card.v3-card--curated {
  border-left-color: var(--color-border-hover) !important;
}

/* Card body: horizontal flex container */
.v3-card-body {
  display: flex !important;
  flex: 1;
  min-height: 0;
}

/* Score column */
.v3-score-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 44px !important;
  width: 44px !important;
  padding: 14px 6px !important;
  gap: 3px !important;
  flex-shrink: 0 !important;
}
.v3-score-num {
  font-family: var(--font-mono) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: var(--color-text-muted) !important;
}
.article-card.v3-card--pmo-related .v3-score-num {
  color: var(--category-pmo-related-score) !important;
}
.article-card.v3-card--pmo-potential .v3-score-num {
  color: var(--category-pmo-potential-score) !important;
}
.article-card.v3-card--ai-general .v3-score-num {
  color: var(--category-ai-general-score) !important;
}
.v3-score-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--color-text-dim) !important;
}

/* Vertical divider */
.v3-col-divider {
  width: 1px !important;
  background: var(--color-border) !important;
  align-self: stretch !important;
  flex-shrink: 0 !important;
}

/* Main content area */
.v3-card-content {
  flex: 1 !important;
  padding: 12px 14px !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

/* Badge row */
.v3-badge-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
  margin-bottom: 0 !important;
}

/* Base badge: sharp, mono, no radius */
.v3-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 7px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  border: 1px solid !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
}
.v3-badge svg {
  width: 10px !important;
  height: 10px !important;
  flex-shrink: 0 !important;
}

/* PMO_RELATED badge */
.v3-badge--pmo-related {
  background: var(--category-pmo-related-badge-bg) !important;
  border-color: var(--color-border-accent) !important;
  color: var(--category-pmo-related-badge-text) !important;
}
/* PMO_POTENTIAL badge */
.v3-badge--pmo-potential {
  background: var(--category-pmo-potential-badge-bg) !important;
  border-color: var(--color-border) !important;
  color: var(--category-pmo-potential-badge-text) !important;
}
/* AI_GENERAL badge */
.v3-badge--ai-general {
  background: var(--category-ai-general-badge-bg) !important;
  border-color: rgba(220, 226, 235, 0.06) !important;
  color: var(--category-ai-general-badge-text) !important;
}
/* Curated badge */
.v3-badge--curated {
  background: var(--color-accent-bg) !important;
  border-color: var(--color-border-hover) !important;
  color: var(--color-text-muted) !important;
}
/* Meta badges (read time, area) */
.v3-badge--meta {
  background: var(--color-accent-bg) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

/* Card title */
.v3-card-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--color-text-primary) !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.v3-card-title a {
  color: var(--color-text-primary) !important;
  text-decoration: none !important;
}
.v3-card-title a:hover {
  color: var(--color-accent) !important;
}

/* Source domain */
.v3-card-source {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--color-text-dim) !important;
  letter-spacing: 0.3px !important;
  display: block !important;
  margin-top: -3px !important;
}

/* TLDR list */
.v3-card-tldr {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
.v3-card-tldr li {
  font-size: 13px !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.5 !important;
  padding-left: 13px !important;
  position: relative !important;
}
.v3-card-tldr li::before {
  content: '' !important;
  position: absolute !important;
  left: 2px !important;
  top: 7px !important;
  width: 4px !important;
  height: 4px !important;
  background: rgba(220, 226, 235, 0.25) !important;
}

/* Footer bar */
.article-card.v3-card .card-footer-a {
  display: flex !important;
  align-items: center !important;
  padding: 7px 10px 7px 6px !important;
  border-top: 1px solid var(--color-border) !important;
  background: none !important;
  gap: 6px !important;
  margin-top: 0 !important;
  flex-shrink: 0 !important;
}
.article-card.v3-card .footer-left {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}
.article-card.v3-card .footer-date {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--color-text-dim) !important;
  flex: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}
.article-card.v3-card .footer-right {
  display: flex !important;
  gap: 3px !important;
  flex-shrink: 0 !important;
}

/* Vote buttons in v3 */
.article-card.v3-card .vote-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  min-height: 26px !important;
  min-width: 32px !important;
  padding: 3px 6px !important;
  border-radius: 0 !important;
  border-color: var(--color-border) !important;
  background: transparent !important;
  color: var(--color-text-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}
.article-card.v3-card .vote-btn:hover {
  border-color: var(--color-border-accent) !important;
  color: var(--color-text-primary) !important;
  background: transparent !important;
}
.article-card.v3-card .vote-btn[aria-pressed="true"] {
  border-color: var(--color-accent) !important;
  background: var(--color-accent-subtle) !important;
  color: var(--color-accent) !important;
}
.article-card.v3-card .vote-count {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

/* Share icons in v3: square, 28×28px */
.article-card.v3-card .shr-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-color: var(--color-border) !important;
  background: transparent !important;
  color: var(--color-text-muted) !important;
  transition: border-color 0.15s ease, color 0.15s ease !important;
  box-shadow: none !important;
  transform: none !important;
  flex-shrink: 0 !important;
}
.article-card.v3-card .shr-icon:hover {
  border-color: var(--color-border-accent) !important;
  color: var(--color-accent) !important;
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}
.article-card.v3-card .shr-icon svg {
  width: 13px !important;
  height: 13px !important;
}
.article-card.v3-card .shr-icon span {
  display: none !important;
}

/* Mobile: allow cards to take full width, keep 3px gap */
@media (max-width: 639px) {
  .insights-grid {
    gap: 3px !important;
  }
  .v3-card-content {
    padding: 10px 10px !important;
  }
  .v3-score-col {
    min-width: 38px !important;
    width: 38px !important;
  }
}

/* ============================================================ */
/* SECTION 11: FOOTER — Phase 4                                */
/* ============================================================ */

.site-footer.v3-footer {
  border-top: 1px solid rgba(220, 226, 235, 0.06) !important;
  padding: 16px 32px !important;
  background: var(--color-bg-primary) !important;
}
.v3-footer-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}
.v3-footer-brand {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--color-text-dim) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}
.v3-footer-brand .logo-pmo {
  opacity: 0.5 !important;
}
.v3-footer-copy {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--color-text-dim) !important;
}
.v3-footer-links {
  display: flex !important;
  gap: 16px !important;
}
.v3-footer-links a {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--color-text-dim) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.v3-footer-links a:hover {
  color: var(--color-text-secondary) !important;
}
.site-footer.v3-footer .site-footer-disclaimer {
  font-size: 10px !important;
  color: var(--color-text-dim) !important;
  margin-top: 0 !important;
  text-align: left !important;
}
@media (max-width: 639px) {
  .site-footer.v3-footer {
    padding: 16px !important;
  }
  .v3-footer-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ============================================================ */
/* SECTION 12: HERO secondary button                           */
/* ============================================================ */

.hero-btn-secondary {
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-color: var(--color-border-hover) !important;
  color: var(--color-text-secondary) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.hero-btn-secondary:hover {
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-accent) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ============================================================ */
/* SECTION 13: SECTION HEADERS                                 */
/* ============================================================ */

.section-title {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.35rem !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--color-text-muted) !important;
  padding-left: 12px !important;
  margin-bottom: 1.5rem !important;
}

.section-title::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: var(--color-accent) !important;
  border-radius: 0 !important;
}

.section-title > svg {
  display: none !important;
}

.section-subtitle {
  display: block !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--color-text-dim) !important;
  margin-top: 0 !important;
}

/* ============================================================ */
/* SECTION 14: NEWSLETTER CTA                                  */
/* ============================================================ */

.subscribe-section {
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
  background: transparent !important;
}

.subscribe-card {
  border: 1px solid var(--color-border-accent) !important;
  border-radius: 0 !important;
  background: var(--color-accent-bg) !important;
  padding: 2rem !important;
}

.v3-subscribe-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.subscribe-card-title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
  line-height: 1.3 !important;
  margin-bottom: 0.4rem !important;
}

.subscribe-card-subtitle {
  font-size: 0.85rem !important;
  color: var(--color-text-muted) !important;
  margin-bottom: 1.25rem !important;
}

.subscribe-card-icon {
  display: none !important;
}

.subscribe-email-input {
  border-radius: 0 !important;
  border: 1px solid var(--color-border-hover) !important;
  background: var(--color-bg-primary) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
}

.subscribe-email-input:focus {
  outline: none !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 2px var(--color-accent-subtle) !important;
}

.subscribe-btn {
  border-radius: 0 !important;
  background: var(--color-accent) !important;
  color: #0a0e1a !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border: none !important;
  box-shadow: none !important;
}

.subscribe-btn:hover {
  background: var(--color-accent-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Social proof strip */
.social-proof-strip {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--color-text-dim) !important;
}

/* ============================================================ */
/* SECTION 16: ASSESSMENT QUADRANT                             */
/* ============================================================ */

/* Grid container — remove legacy cyan/purple glow, sharp corners */
.hero-quadrant-grid {
  box-shadow: none !important;
  background: var(--color-border) !important;
  border-radius: 0 !important;
}

/* Q1: Prompt Whisperers — lighter fill, bright text */
.hero-q1 {
  background: var(--color-q-bg-strong) !important;
  border-top-left-radius: 0 !important;
}

/* Q2: Zen PMO — amber state */
.hero-q2 {
  background: var(--color-accent-subtle) !important;
  border: 1px solid var(--color-border-accent) !important;
  border-top-right-radius: 0 !important;
}

/* Q3: Spreadsheet Nation */
.hero-q3 {
  background: var(--color-q-bg-mid) !important;
  border-bottom-left-radius: 0 !important;
}

/* Q4: ChatGPT Fan Club — darkest */
.hero-q4 {
  background: var(--color-q-bg-dim) !important;
  border-bottom-right-radius: 0 !important;
}

/* Quadrant name labels — mono */
.hero-qname {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  letter-spacing: 0.5px !important;
}

/* Percentage values — mono */
.hero-qpct {
  font-family: var(--font-mono) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* Per-quadrant text colours */
.hero-q1 .hero-qname,
.hero-q1 .hero-qpct {
  color: var(--color-q-text-bright) !important;
}

.hero-q2 .hero-qname,
.hero-q2 .hero-qpct {
  color: var(--color-accent) !important;
}

.hero-q3 .hero-qname,
.hero-q3 .hero-qpct {
  color: var(--color-accent) !important;
}

.hero-q4 .hero-qname {
  color: var(--color-q-text-mid) !important;
}

.hero-q4 .hero-qpct {
  color: var(--color-text-muted) !important;
}

/* Icons match quadrant text colour */
.hero-q1 .hero-icon { color: var(--color-q-text-bright) !important; filter: none !important; }
.hero-q2 .hero-icon { color: var(--color-accent) !important; filter: none !important; }
.hero-q3 .hero-icon { color: var(--color-accent-muted) !important; filter: none !important; }
.hero-q4 .hero-icon { color: var(--color-text-dim) !important; filter: none !important; }

/* Axis labels — mono, muted */
.hero-axis-label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  color: var(--color-text-muted) !important;
}

.hero-axis-low {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: var(--color-text-dim) !important;
}

.hero-axis-high {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: var(--color-accent) !important;
}

/* Assessment start button — amber CTA */
.assess-start-btn {
  background: var(--color-accent) !important;
  border-radius: 0 !important;
  color: #0a0e1a !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

.assess-start-btn:hover {
  background: var(--color-accent-hover) !important;
  transform: none !important;
}

.assess-start-btn:focus {
  outline-color: var(--color-accent) !important;
}

/* Assessment next button */
.assess-nav-next {
  background: var(--color-accent) !important;
  border-radius: 0 !important;
  color: #0a0e1a !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

.assess-nav-next:not(:disabled):hover {
  background: var(--color-accent-hover) !important;
  transform: none !important;
}

/* Assessment result panel — sharp */
.assess-result-quadrant {
  border-radius: 0 !important;
  border-width: 1px !important;
}

.assess-result-label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: var(--color-text-muted) !important;
}

/* ============================================================ */
/* SECTION 17: PROMPTS PAGE                                    */
/* ============================================================ */

/* Skip link */
.skip-link {
  background: var(--color-accent) !important;
  border-radius: 0 !important;
}

/* Tab bar — unified amber treatment for all 4 tabs */
.prompts-tab {
  border-radius: 0 !important;
  background: var(--color-bg-panel) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.prompts-tab.is-active {
  background: var(--color-accent-bg) !important;
  border-color: var(--color-border-accent) !important;
  color: var(--color-accent) !important;
}

.prompts-tab:hover:not(.is-active) {
  background: var(--color-accent-bg) !important;
  border-color: var(--color-border-hover) !important;
  color: var(--color-text-primary) !important;
}

/* smartAI tab inner spans */
.prompts-tab[data-tab="smartai"] .smartai-label-smart,
.prompts-tab[data-tab="smartai"] .smartai-label-ai,
.prompts-tab[data-tab="smartai"].is-active .smartai-label-smart,
.prompts-tab[data-tab="smartai"].is-active .smartai-label-ai {
  color: inherit !important;
}

/* Tab count */
.prompts-tab-count {
  font-family: var(--font-mono) !important;
}

/* Copy Meta-Prompt button */
.smartai-copy-btn {
  background: var(--color-accent) !important;
  border-radius: 0 !important;
  color: #0a0e1a !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

.smartai-copy-btn:hover {
  box-shadow: none !important;
  transform: none !important;
  background: var(--color-accent-hover) !important;
}

.smartai-copy-btn.is-copied {
  background: var(--color-accent) !important;
  opacity: 0.75 !important;
}

/* Open-in model buttons */
.smartai-model-btn {
  border-radius: 0 !important;
  background: var(--color-bg-panel) !important;
  border-color: var(--color-border) !important;
}

.smartai-model-btn:hover {
  border-color: var(--color-border-accent) !important;
  color: var(--color-text-primary) !important;
}

/* Select-all button */
.smartai-select-all {
  border-radius: 0 !important;
  border-color: var(--color-border-accent) !important;
  color: var(--color-accent) !important;
}

.smartai-select-all:hover {
  background: var(--color-accent-bg) !important;
}

/* Category headers */
.smartai-category-header:hover {
  color: var(--color-accent) !important;
}

/* Preview label */
.smartai-preview-label {
  color: var(--color-accent) !important;
}

.smartai-preview-dot {
  background: var(--color-accent) !important;
}

/* Textarea and filter inputs */
.smartai-textarea,
.prompts-filter-select,
.prompts-filter-search {
  border-radius: 0 !important;
  background: var(--color-bg-elevated) !important;
  border-color: var(--color-border) !important;
}

.smartai-textarea:focus,
.prompts-filter-select:focus,
.prompts-filter-search:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 2px var(--color-accent-subtle) !important;
}

/* Prompt cards */
.prompts-card {
  border-radius: 0 !important;
  background: var(--color-bg-elevated) !important;
  border-color: var(--color-border) !important;
}

.prompts-card:hover {
  box-shadow: none !important;
  transform: none !important;
  border-color: var(--color-border-hover) !important;
}

.prompts-card.is-expanded {
  border-color: var(--color-border-accent) !important;
  box-shadow: none !important;
}

/* Area badge */
.prompts-area-badge {
  background: var(--color-accent-bg) !important;
  color: var(--color-accent) !important;
  border-color: var(--color-border-accent) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* Difficulty badges — keep semantic but sharp */
.prompts-difficulty-badge {
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
}

/* Share panel */
.prompts-share-panel {
  border-radius: 0 !important;
  border-color: var(--color-border) !important;
  background: var(--color-bg-elevated) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Checkbox accent */
.smartai-check-label input[type="checkbox"] {
  accent-color: var(--color-accent) !important;
}

/* Filter sticky bar background */
.prompts-filter-sticky-wrap {
  background: var(--color-bg-primary) !important;
}

/* ── Share buttons — match vote button style ── */
.article-card.v3-card .shr-icon,
.article-card.v3-card .shr-icon.btn-linkedin,
.article-card.v3-card .shr-icon.btn-twitter,
.article-card.v3-card .shr-icon.btn-copy,
.article-card.v3-card .shr-icon.btn-whatsapp,
.article-card.v3-card .shr-icon.btn-email {
  background: transparent !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
  box-shadow: none !important;
  transform: none !important;
}

.article-card.v3-card .shr-icon svg {
  color: var(--color-text-muted) !important;
}

.article-card.v3-card .shr-icon:hover,
.article-card.v3-card .shr-icon.btn-linkedin:hover,
.article-card.v3-card .shr-icon.btn-twitter:hover,
.article-card.v3-card .shr-icon.btn-copy:hover,
.article-card.v3-card .shr-icon.btn-whatsapp:hover,
.article-card.v3-card .shr-icon.btn-email:hover {
  background: transparent !important;
  border-color: var(--color-border-accent) !important;
  color: var(--color-text-primary) !important;
  box-shadow: none !important;
  transform: none !important;
}

.article-card.v3-card .shr-icon:hover svg {
  color: var(--color-text-primary) !important;
}

/* stylelint-enable declaration-no-important, selector-max-specificity, no-descending-specificity */