/* ============================================================
   SGX INTELLIGENCE REPORT — CLEAN REBUILD (UNIFIED CARDS)
   All styles fully scoped to .ir-report
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
.ir-report {
    --ir-font: 'Lato', system-ui, sans-serif;

    /* Colours */
    --ir-bg-page: #FFFFFF;
    --ir-bg-card: #FFFFFF;
    --ir-bg-soft: #F9FAFB;
    --ir-bg-highlight: #EFF6FF;

    --ir-border: #E2E8F0;
    --ir-text-header: #0F172A;
    --ir-text-body: #334155;
    --ir-text-meta: #64748B;

    --ir-green: #10B981;
    --ir-blue: #3B82F6;
    --ir-red: #EF4444;
    --ir-orange: #F59E0B;
    --ir-purple: #8B5CF6;

    /* Radii */
    --ir-radius: 8px;

    /* Spacing */
    --sp-4: 4px;
    --sp-12: 12px;
    --sp-16: 16px;
    --sp-20: 20px;
    --sp-24: 24px;
    --sp-32: 32px;
    --sp-40: 40px;

    /* Typography */
    --fs-sm: 14px;
    --fs-body: 15px;
    --fs-h4: 16px;
    --lh-body: 1.6;
}

/* ------------------------------------------------------------
   2. BASE & GLOBAL
   ------------------------------------------------------------ */
.ir-report * {
    box-sizing: border-box;
    font-family: var(--ir-font);
}

.ir-report {
    background: var(--ir-bg-page);
    padding: 0px;
    color: var(--ir-text-body);
    margin: auto;
    max-width: 1200px;
}

.ir-section {
    margin-bottom: 64px;
}

.ir-section-header {
    font-size: 20px;
    font-weight: 800;
    color: var(--ir-text-header);
    margin: 0 0 var(--sp-24);
    padding-bottom: var(--sp-4);
}

h4 {
    margin: 0 0 var(--sp-12);
    font-size: var(--fs-h4);
    color: var(--ir-text-header);
    font-weight: 700;
    padding-bottom: 8px;
}

/* Body text */
.ir-body,
.ir-body-sm {
    margin: 0 0 var(--sp-12);
    line-height: var(--lh-body);
}
.ir-body { font-size: var(--fs-body); }
.ir-body-sm { font-size: var(--fs-sm); }

/* Tags & labels */
.ir-label {
    color: var(--ir-text-meta);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-4);
    margin-top: 0px;
    font-weight: 600;
}
.ir-label-blue {
    color: var(--ir-blue);
    font-size: var(--fs-sm);
}

/* Tag chip */
.ir-tag {
    display: inline-block;
    border: 1px solid var(--ir-border);
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 4px;
    margin-right: 6px;
    margin-bottom:8px;
}
.ir-tag-category {
    background: #E0F2FE;
    border-color: #BAE6FD;
    color: #0369A1;
    font-weight: 700;
}

/* Utility */
.ir-m-0 { margin: 0 !important; font-size: var(--fs-body); }
.ir-mb-8 { margin-bottom: var(--sp-8); min-height:62px;font-size: var(--fs-body);}
.ir-mb-16 { margin-bottom: var(--sp-16); font-size: var(--fs-body);}
.ir-text-danger { color: var(--ir-red); }
.ir-text-success { color: var(--ir-green); }
.ir-text-blue { color: var(--ir-blue); }
.ir-text-sub { font-size: var(--fs-sm); color: var(--ir-text-meta); }

/* ------------------------------------------------------------
   3. CARDS & GRIDS (UNIFIED ARCHITECTURE)
   ------------------------------------------------------------ */

/* Base card */
.ir-card,
.ir-overview-panel {
    background: var(--ir-bg-card);
    border: 1px solid var(--ir-border);
    border-radius: var(--ir-radius);
    padding: var(--sp-24);
}

/* Cards that behave as flex columns (most of them) */
.ir-card-flex,
.ir-diag-card,
.ir-risk-card,
.ir-playbook-card,
.ir-comp2-card,
.ir-moat-card,
.ir-opp-card,
.ir-archetype-card {           /* 👈 add this line */
    background: var(--ir-bg-card);
    border: 1px solid var(--ir-border);
    border-radius: var(--ir-radius);
    padding: 0;                      /* we pad inner sections instead */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Grids */
.ir-card-grid,
.ir-card-grid-2,
.ir-card-grid-playbooks {
    display: grid;
    gap: var(--sp-24);
}

.ir-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ir-card-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.ir-card-grid-playbooks {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Shared “grey footer” style inside flex cards */
.ir-card-footer {
    background: var(--ir-bg-soft);
    padding: 18px 24px 20px;
    margin-top: auto;                /* pins footer to card bottom */
}

.ir-card-footer p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------
   4. OVERVIEW PANEL
   ------------------------------------------------------------ */
.ir-grid-overview {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--sp-32);
}
.ir-data-col {
    border-left: 1px solid var(--ir-border);
    padding-left: var(--sp-24);
}

/* ------------------------------------------------------------
   5. EXECUTIVE JUDGEMENT
   ------------------------------------------------------------ */
.ir-exec-scores-top {
    border: 1px solid var(--ir-border);
    border-radius: var(--ir-radius) var(--ir-radius) 0 0;
    padding: var(--sp-24);
    background: #ffffff;
}

.ir-master-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.8fr;
    gap: var(--sp-32);
}

.ir-master-left {
    padding-right: var(--sp-32);
    border-right: 1px solid var(--ir-border);
}

.ir-master-dim-header{
  padding-bottom: 8px;
}

/* Score circle */
.ir-big-score-circle {
    width: 160px;
    height: 160px;
    margin: 12px auto var(--sp-40);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        conic-gradient(var(--score-color) var(--score-deg), #F1F5F9 0deg);
}
.ir-big-score-inner {
    width: 132px;
    height: 132px;
    background: #FFFFFF;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.ir-grade {
    font-size: 48px;
    font-weight: 900;
    color: var(--score-color);
}
.ir-total {
    font-size: 16px;
    color: var(--ir-text-meta);
    padding-top:12px;
}

/* Mini bars in exec judgement */
.ir-mini-bar-block {
    margin-bottom: 24px;
}

/* 2-row layout: label + value on top, bar full width below */
.ir-mini-bar-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "label value"
        "track track";
    column-gap: 8px;
    row-gap: 4px;
    align-items: center;
}

.ir-bar-label {
    grid-area: label;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.ir-bar-val {
    grid-area: value;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    justify-self: flex-end;
}

.ir-mini-track {
    grid-area: track;
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.ir-mini-fill {
    height: 100%;
    width: var(--bar-width);
    background-color: var(--bar-color, #10B981);
    border-radius: inherit;
    transition: width 0.25s ease;
}

.ir-mini-expl {
    margin-top: 12px;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.4;
}

.ir-master-expl{
  font-size: var(--fs-body);
}

/* ============================
   EXECUTIVE SUMMARY – STACKED
   ============================ */

   .ir-master-score-title {
       font-size: var(--fs-h4);
       font-weight: 600;
       margin-bottom: 8px;
   }


/* Grey wrapper under the donut + mini bars */
.ir-exec-summary-bottom {
    background: var(--ir-bg-soft);              /* same grey as other footers */
    border: 1px solid var(--ir-border);
    border-top: none;
    border-radius: 0 0 var(--ir-radius) var(--ir-radius);
    padding: var(--sp-24);
}

/* Stack all four blocks vertically */
.ir-summary-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-20);
}

/* Each block */
.ir-summary-block p {
    margin: 0;
}

/* Label (Executive Summary / Failure Mode / etc.) */
.ir-summary-block .ir-label {
    margin-bottom: 4px;
    font-size: var(--fs-sm);
    color: var(--ir-text-meta);
    font-weight: 600;
}

/* Body text – match global body styling */
.ir-summary-block .ir-body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ir-text-body);
}

/* Slight colour accents already defined globally */
.ir-text-danger  { color: var(--ir-red); }
.ir-text-success { color: var(--ir-green); }


.ir-summary-block:not(:last-child) {
    padding-bottom: var(--sp-20);
    border-bottom: 1px dashed #e5e7eb;

}

.ir-section-sub {
    margin-top: -12px;
    margin-bottom: 24px;
    font-size: 16px;
    color: var(--ir-text-muted);
    line-height: 1.45;
}

/* ------------------------------------------------------------
   6. USER ARCHETYPES
   ------------------------------------------------------------ */
.ir-archetypes-grid {
    display: grid;
    gap: var(--sp-24);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ir-archetype-divider {
    border-bottom: 1px solid var(--ir-border);
    margin: var(--sp-16) 0;
}

/* ------------------------------------------------------------
   7. PSYCHOLOGICAL ENGINE
   ------------------------------------------------------------ */
.ir-psych-card {
    border-radius: var(--ir-radius);
}

.ir-psych-main {
    padding-bottom: var(--sp-20);
    margin-bottom: var(--sp-20);
    border-bottom: 1px dashed var(--ir-border);
}
.ir-psych-grid {
    display: grid;
    gap: var(--sp-24);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}



/* ------------------------------------------------------------
   9. BEHAVIORAL DIAGNOSIS
   ------------------------------------------------------------ */

/* Card shell uses unified flex card */
.ir-diag-card {
    /* .ir-card-flex styles already applied via PHP class */
}

/* Top white area */
.ir-diag-top {
    padding: 24px;
    padding-bottom: var(--sp-16);
    border-bottom: none !important; /* no dashed line here */
}

/* Impact row */
.ir-diag-impact-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--sp-8);
}

/* Impact bar */
.ir-diag-bar-track {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 999px;
    margin: 6px 0 12px;
    overflow: hidden;
}
.ir-diag-bar-track .ir-score-bar-fill {
    height: 100%;
    width: var(--bar-width);
    border-radius: inherit;
    transition: width 0.25s ease;
}

/* Bottom grey loop/signal section */
.ir-diag-bottom {
    background: var(--ir-bg-soft);
    padding: 18px 24px 20px;
    margin-top: auto;
    flex:auto;
    border-top: 1px solid #e5e7eb;
}
.ir-diag-bottom p:last-child {
    margin-bottom: 0;
}


/* ------------------------------------------------------------
   10. COMPETITIVE BENCHMARK CARDS (07. Strategic Landscape top)
   ------------------------------------------------------------ */

.ir-comp2-card {
    /* flex shell from .ir-card-flex */
}

/* White top area */
.ir-comp2-top {
    padding: 24px;
    padding-bottom: var(--sp-16);
    border-top: 1px solid var(--ir-border);
}

/* Competitor title + subtitle */
.ir-comp2-title {
    margin: 0 0 4px;
    font-size: var(--fs-h4);
    font-weight: 700;
    color: var(--ir-text-header);
}
.ir-comp2-subtitle {
    font-size: var(--fs-sm);
    color: var(--ir-text-meta);
}

/* Dimension tag */
.ir-comp2-dim-tag {
    margin-top: 8px;
}

/* Bars */
.ir-comp2-bars {
    margin-top: 16px;
}

.ir-comp2-bar-row {
    margin-top: 12px;
}

.ir-comp2-bar-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.ir-comp2-label {
    font-weight: 500;
}

.ir-comp2-value {
    font-weight: 600;
    font-size: 15px;
}

.ir-comp2-bar-track {
    width: 100%;
    height: 6px;
    background: #E2E8F0;
    border-radius: 999px;
}

/* Grey behavioural difference block */
.ir-comp2-bottom {
    background: var(--ir-bg-soft);
    padding: 18px 24px 20px;
    margin-top: auto;
    flex:auto;
    border-top: 1px solid #e5e7eb;
}
.ir-comp2-bottom p:last-child {
    margin-bottom: 0;
}

/* Delta pill */
.ir-comp2-delta-pill {
    display: inline-block;
    margin-top: 12px;
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* ------------------------------------------------------------
   11. RISK ASSESSMENT
   ------------------------------------------------------------ */

.ir-risk-card {
    /* flex shell */
}

.ir-risk-main {
    padding: 24px;
    min-height: 190px;
}

/* Grey risk impact box behaves like card footer */
.ir-risk-impact-box {
    background: var(--ir-bg-soft);
    border-radius: 0 0 var(--ir-radius) var(--ir-radius);
    padding: 20px 24px;
    margin-top: auto;
    min-height: 120px;
    border-top: 1px solid #e5e7eb;
}
.ir-risk-impact-box p:last-child {
    margin-bottom: 0;
}

.ir-risk-title{
  font-size: var(--fs-h4);
}

/* 08. Risk Assessment – 3-column grid */
.ir-risk-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
    .ir-risk-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile: 1 column */
@media (max-width: 640px) {
    .ir-risk-grid {
        grid-template-columns: 1fr;
    }
}

.ir-report .ir-risk-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Stack Risk Assessment cards on smaller screens */
@media (max-width: 768px) {
    .ir-card-grid.ir-risk-grid {
        display: grid;
        grid-template-columns: 1fr;   /* single column */
        row-gap: 16px;
    }

    .ir-card-grid.ir-risk-grid .ir-risk-card {
        width: 100%;
        max-width: 100%;
    }
}

/* ------------------------------------------------------------
   12. DESIGN PLAYBOOKS
   ------------------------------------------------------------ */

/* Shell already flex via .ir-playbook-card */
.ir-playbook-main {
    flex: 1 1 auto;
    padding: 24px;
}

/* Section dividers */
.ir-playbook-section {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px dashed #e5e7eb;
}
.ir-playbook-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Pattern / Implementation / Steps – align across all cards */
.ir-playbook-pattern {
    min-height: 152px;   /* tweak if content changes */
}

.ir-playbook-implementation {
    min-height: 164px;
}

.ir-playbook-steps {
    min-height: 220px;
}

/* Steps list */
.ir-list-steps {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
}
.ir-playbook-step {
    margin-bottom: 6px;
}

/* Grey bottom: Works Best For + Warning */
.ir-playbook-bottom {
    background: var(--ir-bg-soft);
    padding: 18px 24px 20px;
    margin-top: auto;
    min-height: 240px;
    border-top: 1px solid #e5e7eb;
}
.ir-playbook-bottom p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------
   13. STRATEGIC MOAT (07. Strategic Landscape bottom)
   ------------------------------------------------------------ */

.ir-moat-card {
    margin-top:32px;
}

/* Top white narrative */
.ir-moat-main {
    padding: 24px;
}

/* Bottom grey fracture strip */
.ir-fracture-box {
    background: var(--ir-bg-soft);
    padding: 18px 24px 20px;
    border-top: 1px solid #e5e7eb;
    flex:auto;
}
.ir-fracture-box h4 {
    margin: 0 0 4px;
}
.ir-fracture-box p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------
   14. OPPORTUNITY SURFACE
   ------------------------------------------------------------ */

/* Grid: 2 x 2 layout on desktop */
.ir-opportunity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 24px;
}

/* Card shell via .ir-opp-card */

.ir-opp-main {
    padding: 24px;
    display: flex;
    flex-direction: column;
}

/* Stacked content blocks */
.ir-opp-title-block,
.ir-opp-shift-block,
.ir-opp-gap-block {
    display: flex;
    flex-direction: column;
}

/* Use min-heights so rows align to the tallest card */
.ir-opp-title-block {
    min-height: 32px;
    margin-bottom: 12px;
}

.ir-opp-shift-block {
    min-height: 60px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #e5e7eb;
}

.ir-opp-gap-block {
    min-height: 60px;
}

/* Grey footer outcome */
.ir-opp-bottom {
    background: var(--ir-bg-soft);
    padding: 18px 24px 20px;
    margin-top: auto;
    min-height:0px;
    border-top: 1px solid #e5e7eb;
}
.ir-opp-bottom p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------
   15. TAXONOMY MINI SCORES
   ------------------------------------------------------------ */

.ir-tax-row {
    display: flex;
    justify-content: space-between;
    padding-bottom: var(--sp-12);
    margin-bottom: var(--sp-12);
    border-bottom: 1px dashed var(--ir-border);
}
.ir-tax-row.ir-no-border {
    border-bottom: none;
    margin-bottom: 0;
}

/* Mini score bars */
.ir-mini-score-row {
    margin-bottom: 18px;
}

.ir-mini-score-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.ir-mini-score-label {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.ir-mini-score-val {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.ir-track-slim {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.ir-mini-score-row .ir-bar-fill {
    height: 100%;
    width: var(--bar-width);
    border-radius: inherit;
    transition: width 0.25s ease;
}

/* Colour variants */
.ir-mini-score-row .ir-bar-fill.green {
    background-color: #10B981;
}
.ir-mini-score-row .ir-bar-fill.amber {
    background-color: #F59E0B;
}
.ir-mini-score-row .ir-bar-fill.red {
    background-color: #EF4444;
}

/* ------------------------------------------------------------
   16. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 900px) {
    .ir-grid-overview,
    .ir-master-grid {
        grid-template-columns: 1fr;
    }

    .ir-master-left {
        border-right: none;
        padding-right: 0;
        padding-bottom: var(--sp-24);
        border-bottom: 1px solid var(--ir-border);
    }

    .ir-loop-stepper::before {
        left: 20px;
    }

    .ir-opportunity-grid {
        grid-template-columns: 1fr;
    }
}


/* --- STRATEGIC THESIS --- */

.ir-thesis-card {
    /* reuses .ir-moat-card layout – nothing else needed here */
}

.ir-thesis-quote {
    font-style: italic;          /* make the thesis pull-quote feel like a quote */
}

/* optional: slightly larger type for the quote */
.ir-thesis-quote .ir-body {
    font-size: 17px;
}


.ir-dashed-divider {
    border: 0;
    border-top: 1px dashed #d5dbe1;
    margin: 0px;
}


/* --- USER ARCHETYPES: white top + grey bottom --- */

.ir-archetype-main {
    padding: 24px;
}

.ir-archetype-bottom {
    background: #f9fafb;
    padding: 18px 24px 20px;
    border-top: 1px solid #e5e7eb;
}

/* tidy last paragraph */
.ir-archetype-bottom p:last-child {
    margin-bottom: 0;
}

/* Right-hand fact column: stack blocks cleanly */
.ir-data-col--split {
    display: flex;
    flex-direction: column;
}

/* Spacing inside each block */
.ir-data-block {
    margin-bottom: var(--sp-8);
}

/* Dotted divider between Pricing and Ratings */
.ir-dashed-divider {
    border: 0;
    border-top: 1px dashed var(--ir-border);
}

/* 2-column layout for Product Classification (and similar) */
.ir-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* single column by default (mobile) */
    gap: 24px;
}

/* Side-by-side on larger screens */
@media (min-width: 1024px) {
    .ir-grid-2 {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        align-items: stretch;
    }

    .ir-grid-2 > .ir-card {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
}

/* 12. PRODUCT CLASSIFICATION – tidy typography & spacing */

/* Shared heading treatment for both cards */
.ir-grid-2 .ir-card h4 {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 16px;
}

/* Rows in the left-hand Behavioral Profile card */
.ir-tax-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed var(--ir-border);
}

/* Remove border on explicit no-border row (already in markup) */
.ir-tax-row.ir-no-border {
    border-bottom: none;
}

/* Label + value typography to line up with mini-score labels */
.ir-tax-label,
.ir-mini-score-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ir-text-sub); /* same subtle grey as other labels */
}

.ir-tax-value,
.ir-mini-score-val {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ir-text-main);
}

/* Keep the blue taxonomy link consistent but still stand out */
.ir-tax-value.ir-text-blue {
    color: var(--ir-link-blue);
}

/* Classification Reasoning as a proper grey footer block */
.ir-tax-reasoning {
    margin-top: 12px;
    padding: 14px 18px 16px;
    background: #f9fafb;
    border-radius: 0 0 var(--ir-radius) var(--ir-radius);
    border-top: 1px solid var(--ir-border-light);
}

.ir-tax-reasoning .ir-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ir-text-sub);
}

.ir-tax-reasoning .ir-body-sm {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Right-hand mini score rows – slightly tighter rhythm */
.ir-mini-score-row {
    margin-bottom: 10px;
}

.ir-mini-score-row:last-child {
    margin-bottom: 0;
}

/* Make both columns in the classification section match height */
.ir-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch; /* forces equal height */
}

/* Make the right-hand card stretch + space content vertically */
.ir-grid-2 .ir-card:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.ir-grid-2 .ir-card:nth-child(2) > * {
    flex-grow: 1;
}

/* Space out the score rows evenly within the tall card */
.ir-grid-2 .ir-card:nth-child(2) .ir-mini-score-row {
    margin-bottom: auto; /* distributes rows vertically */
}

/* Keep last row from pushing too far down */
.ir-grid-2 .ir-card:nth-child(2) .ir-mini-score-row:last-child {
    margin-bottom: 0;
}

/* EXPERIENCE LOOP
   -------------------------------------------------- */

/* Gutter + positioning for the whole stepper */
.ir-loop-stepper {
    position: relative;
    padding-left: 16px;          /* space for markers + line */
    margin-top: 24px;
}

/* Each step row */
.ir-step {
    position: relative;          /* for the line segment */
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}



/* First step: don't go above the marker */
.ir-step:first-child::before {
    top: 16px;
}

/* Last step: stop just under the marker */
.ir-step:last-child::before {
    bottom: 16px;
}

/* Numbered marker */
.ir-step-marker {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 2px solid var(--ir-accent, #4f46e5);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--ir-accent, #4f46e5);
    flex-shrink: 0;
    margin-top: 16px;            /* lines number up with card border */
    margin-left: -8px;           /* nudge so line passes through centre */
    position: relative;
    z-index: 1;                  /* sits above the line */
}

/* Step card */
.ir-step-content {
    flex: 1;
    background: var(--ir-bg-card, #ffffff);
    border: 1px solid var(--ir-border, #e5e7eb);
    border-radius: var(--ir-radius, 18px);
    padding: 18px 24px 20px;
}

/* Step title */
.ir-step-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
}

/* Stack Internal / External & Variable / Fixed vertically */
.ir-step-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ir-step-grid > div {
    margin: 0;
}

/* Tiny label for Internal / External / Variable / Fixed */
.ir-label-tiny {
  color: var(--ir-text-meta);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
  margin-top: 0px;
  font-weight: 600;
}

/* Paragraph spacing inside steps */
.ir-step-content .ir-body-sm {
    margin: 0;
}

/* Psychological reward line (step 3) */
.ir-step-content .ir-text-sub {
    margin-top: 10px;
}

/* OUTCOME BOXES UNDER TIMELINE
   -------------------------------------------------- */

.ir-loop-outcomes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.ir-outcome-box {
    border-radius: var(--ir-radius, 18px);
    padding: 16px 20px;
}

.ir-outcome-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.ir-outcome-success {
    background: #ecfdf3;
    color: #065f46;
}

.ir-outcome-danger {
    background: #fef2f2;
    color: #b91c1c;
}

/* ------------------------------------------------------------
   8. EXPERIENCE LOOP – CLEANED
   ------------------------------------------------------------ */

/* Timeline container */
.ir-loop-stepper {
    position: relative;
    padding-left: 16px;                /* space for markers + line */
    margin-top: 24px;
    margin-bottom: var(--sp-32);
}

/* Single vertical spine behind all markers */
.ir-loop-stepper::before {
    content: "";
    position: absolute;
    left: 23px;                        /* runs through marker centre */
    top: 20px;
    bottom: 80px;
    width: 2px;
    background: var(--ir-border);
}

/* Each step row */
.ir-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

/* Numbered marker */
.ir-step-marker {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 2px solid var(--ir-accent, #4f46e5);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--ir-accent, #4f46e5);
    flex-shrink: 0;
    margin-top: 16px;                  /* lines number up with card border */
    margin-left: -8px;                 /* nudge into spine */
    z-index: 1;                        /* sit on top of the line */
}

/* Step card */
.ir-step-content {
    flex: 1;
    background: var(--ir-bg-card, #ffffff);
    border: 1px solid var(--ir-border, #e5e7eb);
    border-radius: var(--ir-radius, 18px);
    padding: 18px 24px 20px;
}

/* Step title */
.ir-step-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
}

/* Stack Internal / External & Variable / Fixed vertically */
.ir-step-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ir-step-grid > div {
    margin: 0;
}

/* Tiny label for Internal / External / Variable / Fixed */
.ir-label-tiny {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ir-text-subtle, #6b7280);
    margin-bottom: 2px;
}

/* Paragraph spacing inside steps */
.ir-step-content .ir-body-sm {
    margin: 0;
}

/* Psychological reward line (step 3) */
.ir-step-content .ir-text-sub {
    margin-top: 10px;
}

/* Outcome boxes under the timeline */
.ir-loop-outcomes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.ir-outcome-box {
    border-radius: var(--ir-radius, 18px);
    padding: 16px 20px;
}

.ir-outcome-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.ir-outcome-success {
    background: #ecfdf3;
    color: #065f46;
}

.ir-outcome-danger {
    background: #fef2f2;
    color: #b91c1c;
}

/* ------------------------------------------------------------
   EXPERIENCE LOOP – MOBILE (≤ 900px)
   ------------------------------------------------------------ */
@media (max-width: 900px) {
    .ir-loop-stepper {
        padding-left: 4px;           /* give markers breathing room */
        margin-top: 20px;
        margin-bottom: 24px;
    }

    .ir-loop-stepper::before {
        left: 13px;                   /* keep spine centred under markers */
        top: 20px;
        bottom: 150px;
    }

    .ir-step {
        gap: 12px;
        margin-bottom: 16px;
    }

    .ir-step-marker {
        width: 28px;
        height: 28px;
        font-size: 11px;
        margin-top: 10px;
        margin-left: -4px;
    }

    .ir-step-content {
        padding: 14px 16px 16px;
    }

    .ir-loop-outcomes {
        grid-template-columns: 1fr;   /* stack Compounds / Collapses */
        gap: 12px;
    }
}

/* Shared score bar styles (Behavioral Diagnosis + Competitive Benchmark) */
.ir-score-bar-track {
    width: 100%;
    height: 6px;
    background: #E2E8F0;
    border-radius: 999px;
    overflow: hidden;
}

.ir-score-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 0.25s ease;
}





/* MOBILE WRAPPER – keep 16px gutters */
@media (max-width: 900px) {



  .ir-report {
      padding: 16px !important;      /* was 32px */
      max-width: 100%;
      overflow-x: hidden;            /* belt + braces */
  }

  /* Cards: tighten internal padding a bit too */
  .ir-card,
  .ir-overview-panel {
      padding: 16px;
  }

  /* Any “flex-shell” cards that use inner sections */
  .ir-diag-card,
  .ir-risk-card,
  .ir-playbook-card,
  .ir-comp2-card,
  .ir-moat-card,
  .ir-opp-card,
  .ir-archetype-card {
      padding: 0;                    /* keep shell clean */
  }

  .ir-diag-top,
  .ir-diag-bottom,
  .ir-risk-main,
  .ir-risk-impact-box,
  .ir-playbook-main,
  .ir-playbook-bottom,
  .ir-comp2-top,
  .ir-comp2-bottom,
  .ir-moat-main,
  .ir-fracture-box,
  .ir-opp-main,
  .ir-opp-bottom,
  .ir-archetype-main,
  .ir-archetype-bottom {
      padding-left: 16px;
      padding-right: 16px;
  }
}

@media (max-width: 900px) {
  /* Already stacking some grids – add the rest explicitly */
  .ir-card-grid-2,
  .ir-grid-2,
  .ir-opportunity-grid {
      grid-template-columns: 1fr !important;
  }

  /* Make sure Outcomes under Experience Loop stack too */
  .ir-loop-outcomes {
      grid-template-columns: 1fr;
  }

  /* Target the right-hand facts column */
  .ir-data-col {
    border-left: none !important;       /* remove vertical line */
    padding-left: 0 !important;
    margin-top: 24px;                   /* space above section */
    padding-top: 16px;                  /* breathing room for divider */
    border-top: 1px solid #e2e8f0 !important;  /* horizontal divider */
  }

  .ir-platform-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px; /* row-gap column-gap */
  }

  .ir-exec-summary-bottom{
    padding:16px;
  }


}

/* 06. Retention Scorecard
   -------------------------------------------------- */


   .ir-card-scorecard {
       padding: var(--sp-24) var(--sp-24);
   }

   /* Remove extra top/bottom padding on first/last rows */
   .ir-card-scorecard .ir-score-row-detail:first-child {
       margin-top: 0;
       padding-top: 0;
   }

   .ir-card-scorecard .ir-score-row-detail:last-child {
       margin-bottom: 0;
       padding-bottom: 0;
   }

   /* Optional: tighten row spacing slightly overall */
   .ir-card-scorecard .ir-score-row-detail {
       padding: var(--sp-16) 0;
   }


/* Each pillar row */
.ir-score-row-detail {
    padding: 18px 14px;
    border-bottom: 1px solid #e5ecf4; /* same light divider as other cards */
}

.ir-score-row-detail:last-child {
    border-bottom: none;
}

/* Label + score line */
.ir-score-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap; /* stops overlap on mobile */
}

.ir-score-name {
    font-size: 18px;
    font-weight: 600;
    color: #1f2933; /* same as other headings */
}

/* “7.5/10 (Avg …)” */
.ir-score-num {
    font-size: 15px;
    font-weight: 500;
}

.ir-score-num .ir-text-success {
}

.ir-text-green {
    color: #10B981; /* green */
    font-weight: 600;
}

.ir-text-amber {
    color: #F59E0B; /* amber */
    font-weight: 600;
}

.ir-text-red {
    color: #EF4444; /* red */
    font-weight: 600;
}

.ir-score-num .ir-text-muted {
    margin-left: 4px;
    color: #9aa5b1;
}

/* Bar track + fill – reuse the same style as other score bars */
.ir-score-bar-track {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background-color: #e5ecf4;
    overflow: hidden;
    margin-bottom: 8px;
}

.ir-score-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    height: 100%;
    /* colour is still set inline via sgx_get_score_color() so it
       matches the other bars (green / amber / red) */
}

/* Insight copy under each bar */
.ir-score-row-detail .ir-body-sm {
    margin: 4px 0 0;
}

@media (max-width: 768px) {
    .ir-score-row-detail {
        padding: 14px 16px 12px;
    }

    .ir-score-name {
        font-size: 16px;
    }

    .ir-score-num {
        font-size: 16px;
    }

    .ir-card-scorecard{
      padding: var(--sp-16);
    }

}


/* Remove border from bottom of the scorecard card if needed */
.ir-card-scorecard {
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
}

/* Make the disclaimer behave like the grey footer row of the same card */
.ir-card-scorecard .ir-scorecard-note {
    /* pull the grey bar out to the card edges */
    margin: 24px -24px -24px;
    padding: 10px 24px;

    border-radius: 0 0 12px 12px; /* match card radius */
    border-top: 1px solid rgba(0,0,0,0.04);
}

/* Kill extra paragraph spacing inside the footer */
.ir-card-scorecard .ir-scorecard-note p {
    margin: 0;
}

/* Remove divider line from the last score row */
.ir-card-scorecard .ir-score-row-detail:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove extra top border that was showing above the grey disclaimer */
.ir-card-scorecard .ir-scorecard-note {
    border-top: none !important;
}

/* Ensure the grey disclaimer has a full border all around */
.ir-scorecard-note {
    border: 1px solid #e5e7eb !important; /* light grey */
    border-top: 1px solid #e5e7eb !important;  /* override Avada suppression */
    order-radius: 0 0 8px 8px !important;
    margin-top: 0 !important;
    box-sizing: border-box;
}

/* Top scorecard: only top corners rounded, no extra gap below */
.ir-grid-1 .ir-card-scorecard {
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}

/* Remove the divider from the last row */
.ir-grid-1 .ir-card-scorecard .ir-score-row-detail:last-child {
    border-bottom: none;
}

/* Bottom disclaimer: only bottom corners rounded, shares border with card */
.ir-grid-1 .ir-scorecard-note {
    border-radius: 0 0 12px 12px;
    border-top: none; /* avoid double line where they meet */
    margin-top: 0;
}

/* Tighten inside the footer so it feels like a note, not a second card */
.ir-grid-1 .ir-scorecard-note p {
    margin: 0;
}

.ir-section-header {
    margin: 0 0 4px;
    font-size: 18px;
    line-height: 1.4;
}

.ir-section-sub {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.5;
    color: #6b7280; /* muted */
    max-width: 720px;
}

.ir-section-divider {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 0 0 24px;
}

.ir-meta-block {
    margin-top: 24px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px 20px;
}

.ir-meta-list {
    display: grid;
    gap: 10px;
}

.ir-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.ir-meta-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}

.ir-meta-value {
    font-size: 14px;
    color: #111827;
}

.ir-tag-sm {
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 4px;
    background: #f3f4f6;
}



/* ============================================================
   SGX REPORT LIBRARY – LAYOUT SHELL
   ============================================================ */

.sgx-library-wrapper {
    max-width: 1200px;
    margin: 0 auto var(--sp-40);
    padding: var(--sp-16) var(--sp-24) var(--sp-32);
    background: var(--ir-bg-page);
    background-color: #f9fafb;
}

/* Top controls always full width */
.sgx-controls-container,
.sgx-results-bar {
    width: 100%;

}

/* ============================================================
   SEARCH
   ============================================================ */

.sgx-controls-container {
    margin-bottom: 28px;
    background: var(--ir-bg-card);
    border-radius: 4px;
    padding: var(--sp-20);
    box-shadow: 0 6px 18px rgba(12, 16, 56, 0.03);
}

.sgx-search-box {
    position: relative;
}

.sgx-search-input {
    width: 100%;
    padding: var(--sp-12) var(--sp-16); /* no 40px left any more */
    border: 1px solid var(--ir-border);
    font-size: var(--fs-body);
    background: #ffffff;
    color: var(--ir-text-body);
    border-radius: 4px !important;
    overflow: hidden;
}

.sgx-search-input::placeholder {
    color: var(--ir-text-meta);
}

.sgx-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-size: 14px;
    opacity: 0.6;
}

/* Optional if you ever swap to an SVG icon inside */
.sgx-search-icon svg {
    width: 16px;
    height: 16px;
}

/* Remove native WebKit search icon + extras */
.sgx-search-input::-webkit-search-decoration,
.sgx-search-input::-webkit-search-cancel-button,
.sgx-search-input::-webkit-search-results-button,
.sgx-search-input::-webkit-search-results-decoration {
    display: none;
}

/* ============================================================
   FILTERS
   ============================================================ */


.sgx-filters-wrapper {
    margin-bottom: var(--sp-8);
}

.sgx-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-16);
}

.sgx-filter-group {
    min-width: 180px;
}

.sgx-filter-label {
    display: block;
    font-size: var(--fs-sm);
    color: var(--ir-text-meta);
    margin-bottom: var(--sp-4);
}

/* Shared select wrapper (filters + sort) */

/* Generic select wrapper */
.sgx-select-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.sgx-select-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding-right: 32px; /* space for chevron */
}

.sgx-filter-select,
.sgx-sort-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 4px;
    border: 1px solid var(--ir-border);
    background-color: #FFFFFF;
    padding: 10px 32px 10px 16px;
    font-size: var(--fs-sm);
    color: #0F172A;
    cursor: pointer;
}

.sgx-filter-select.has-value {
    border-color: var(--ir-blue);
}

.sgx-select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #6b7280;
    border-bottom: 2px solid #6b7280;
    transform: translateY(-60%) rotate(45deg); /* little V shape */
    pointer-events: none;
}

/* Ensure chevron stays centered */
.sgx-filters-toggle::after {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

/* ============================================================
   ACTIVE FILTER CHIPS
   ============================================================ */

.sgx-meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-12);
    margin-bottom: var(--sp-8);
    margin-top: 16px;
}

.sgx-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8);
}

.sgx-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px var(--sp-12);
    border-radius: 4px;
    background: var(--ir-bg-highlight);
    color: var(--ir-text-header);
    font-size: var(--fs-sm);
    cursor: pointer;
}

.sgx-chip-remove {
    margin-left: var(--sp-4);
}

.sgx-clear-btn {
    padding: 4px var(--sp-12);
    border-radius: 4px;
    border: 1px solid var(--ir-border);
    font-size: var(--fs-sm);
    background: #ffffff;
    cursor: pointer;
}


/* ===== PI Library: Controls Bar ===== */

.sgx-controls-container {
    margin-bottom: 24px;
}

/* Top row: search + filters button */
.sgx-controls-top {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: stretch;   /* children fill the same height */
}

.sgx-search-box {
    flex: 1 1 auto;
}

/* Filters button */
.sgx-filters-toggle {
    flex: 0 0 auto;
    border: 1px solid #dde3ea;
    background: #ffffff;
    color: #2a3140;
    font-weight: 600;
    font-size: 14px;
    padding: 0 40px 0 16px;   /* remove vertical padding */
    border-radius: 4px;
    cursor: pointer;
    position: relative;

    display: flex;            /* so text + chevron can be centered */
    align-items: center;      /* vertical centering */
}

/* Base chevron (down) */
.sgx-filters-toggle::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #6b7280;
    border-bottom: 2px solid #6b7280;
    transform: translateY(-60%) rotate(45deg); /* ▼ */
    transition: transform 0.15s ease;
}

/* Open state styling */
.sgx-filters-toggle.is-open {
    background: #e0ebff;
    border-color: #b7ceff;
}

/* Rotate arrow when aria-expanded="true" */
.sgx-filters-toggle[aria-expanded="true"]::after {
    transform: translateY(-40%) rotate(-135deg) !important; /* ▲ */
}



/* Collapsible filters panel */
.sgx-filters-wrapper {
    margin-top: 12px;
    display: none;              /* hidden by default */
}

.sgx-filters-wrapper.is-open {
    display: block;
}

/* On larger screens you can optionally default to open */
@media (min-width: 1024px) {
    .sgx-filters-wrapper.is-desktop-open {
        display: block;
    }
}

/* Mobile: stack search + button */
@media (max-width: 767px) {
    .sgx-controls-top {
        flex-direction: column;
        align-items: stretch;
    }

    .sgx-filters-toggle {
        width: 100%;
        text-align: center;
        height:52px;
    }
}

/* Hide ALL spacing when filters are closed */
.sgx-filters-wrapper {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden;
}

/* When open, restore natural spacing */
.sgx-filters-wrapper.is-open {
    display: block !important;
    padding-top: 12px !important;
    height: auto !important;
}

.sgx-controls-container {
    margin-bottom: 12px;
}

/* ============================================================
   RESULTS BAR / SORT
   ============================================================ */

.sgx-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-16);
    font-size: var(--fs-sm);
    color: var(--ir-text-meta);
    margin-top:16px;
}

.sgx-counter {
    font-size: var(--fs-sm);
}

.sgx-sort-wrapper {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
}

.sgx-sort-label {
    font-size: var(--fs-sm);
    color: #64748B;
    width:100%;
}

.sgx-select-wrapper-sort .sgx-sort-select {
    min-width: 140px;
}

/* ============================================================
   GRID LAYOUT – ALWAYS 3 COLS ON DESKTOP
   ============================================================ */

   .sgx-lib-grid {
       display: grid;
       gap: var(--sp-24);
       margin-top: var(--sp-24);
       width: 100%;              /* <-- this is the key line */
   }

   .sgx-library-wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0px ;
}

/* Desktop 3 cols, tablet 2, mobile 1 */
@media (min-width: 1100px) {
    .sgx-lib-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 720px) and (max-width: 1099px) {
    .sgx-lib-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 719px) {
    .sgx-lib-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================
   CARD SHELL
   ============================================================ */

.sgx-lib-card {
    display: flex;
    flex-direction: column;
    background: var(--ir-bg-card);
    border-radius: 4px;
    padding: var(--sp-20);
    text-decoration: none;
    color: var(--ir-text-body);
    transition:
        box-shadow 0.18s ease,
        transform 0.18s ease,
        border-color 0.18s ease;
    box-shadow: 0 6px 18px rgba(12, 16, 56, 0.03);
    min-width: 0;
}

.sgx-lib-card:hover {
    transform: translateY(-2px);
}

/* ============================================================
   CARD: HEADER (LOGO + DATE + TITLES)
   ============================================================ */

.sgx-card-top {
    padding-bottom: 0px;
}

.sgx-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-16);

}

.sgx-lib-card .sgx-card-title {
    font-size: 26px !important; /* set your desired size */
    line-height: 1.25 !important;
}

.sgx-card-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    background: #F1F5F9;
}

.sgx-card-logo {
    max-width: 34px;
    max-height: 34px;
    border-radius: 4px;
    object-fit: contain;
}

.sgx-card-date {
    font-size: 12px;
    font-weight: 500;
    color: #64748B;
}

.sgx-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--ir-text-header);
    text-align: left;
}

.sgx-card-company {
    margin: 2px 0 0;
    font-size: var(--fs-sm);
    color: var(--ir-text-meta);
    text-align: left;
}

/* ============================================================
   CARD: RATING ROW
   ============================================================ */

.sgx-card-rating {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
    margin-bottom: var(--sp-12);
    border-top: 1px solid #E5E7EB;
    padding-top: var(--sp-12);
}

.sgx-rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Vertical tag – inline pill on the right */
.sgx-tag-vertical {
    background: #F3F4F6;
    color: #4B5563;
    font-size: var(--fs-xs);
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.sgx-rating-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ir-text-meta);
}

/* Score pill – hero */

.sgx-card-scoreblock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0px 12px;
    border-radius: 4px;
    font-weight: 700;
    background: #E5E7EB;
    color: #111827;
}

.sgx-card-grade {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600px;
}

.sgx-card-score {
    font-size: 14px;
    font-weight: 600px;
}

/* Traffic light colours (map all bands) */
/* GREEN – best scores */
.sgx-card-scoreblock.score-elite,
.sgx-card-scoreblock.score-strong {
    background-color: rgba(16, 185, 129, 0.12);
    color: #10B981;
}

/* AMBER – mid band */
.sgx-card-scoreblock.score-solid,
.sgx-card-scoreblock.score-watch {
    background-color: rgba(245, 158, 11, 0.12);
    color: #F59E0B;
}

/* RED – risk band */
.sgx-card-scoreblock.score-risk {
    background-color: rgba(239, 68, 68, 0.12);
    color: #EF4444;
}

/* Neutral fallback */
.sgx-card-scoreblock.score-neutral {
    background-color: #E5E7EB;
    color: #111827;
}

/* ============================================================
   CARD: FOOTER (VERTICAL + CTA)
   ============================================================ */

.sgx-card-footer {
    margin-top: auto;
    padding-top: var(--sp-16);
    border-top: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-12);
}

/* Vertical – subtle tag */
.sgx-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 0px 10px;
    border-radius: 4px;
    background: #F3F4F6;
    color: #4B5563;
    font-size: 14px;

}

/* CTA – “View report” */
.sgx-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: var(--fs-sm);
    font-weight: 600;
    background-color: #FFFFFF;
    color: #070023;
    border: 1px solid #070023;
}

.sgx-lib-card:hover .sgx-card-cta {
  background-color: #070023;
  color: #FFFFFF;
  border: 1px solid #070023;
}

.sgx-rating-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ============================================================
   NO RESULTS
   ============================================================ */

.sgx-no-results {
    display: none;
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--sp-24);
    font-size: var(--fs-body);
    color: var(--ir-text-meta);
    border-radius: 12px;
    border: 1px dashed var(--ir-border);
    background: var(--ir-bg-soft);
}

.sgx-no-results.visible {
    display: block;
}



/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */

@media (max-width: 900px) {
    .sgx-library-wrapper {
        padding: var(--sp-16);
    }

    .sgx-results-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-8);
    }
}

/* Map PHP score bands to traffic-light colours */
.sgx-card-scoreblock.score-green {
    background-color: rgba(16, 185, 129, 0.12); /* green */
    color: #10B981;
}

.sgx-card-scoreblock.score-amber {
    background-color: rgba(245, 158, 11, 0.12); /* amber */
    color: #F59E0B;
}

.sgx-card-scoreblock.score-red {
    background-color: rgba(239, 68, 68, 0.12); /* red */
    color: #EF4444;
}

.sgx-header-logo {
    height: 72px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* MOBILE: make library full-width, ignore Avada gutters */
@media (max-width: 768px) {

  .sgx-library-wrapper {
    /* stretch to full viewport width */
    width: 100vw;
    max-width: 100vw;

    /* pull it out of the centered Avada content column */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    /* nice inner padding */
    padding: 16px 16px 32px;
  }

  .sgx-lib-grid {
    grid-template-columns: 1fr;   /* one column on mobile */
  }

  .sgx-lib-card {
    max-width: 100%;
    width: 100%;
    justify-self: stretch;
  }
}

/* MOBILE OVERRIDE: let cards shrink fully */
@media (max-width: 768px) {

  /* make the grid single-column and full width */
  .sgx-lib-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  /* nuke any lingering max-widths from other stylesheets */
  .sgx-lib-grid .sgx-lib-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    justify-self: stretch;
  }
}

/* Kill any legacy max-width on cards everywhere */
.ir-report .sgx-lib-grid .sgx-lib-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Force cards to be fully responsive */
.ir-report .sgx-lib-grid .sgx-lib-card {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch;
}

@media (max-width: 768px) {
  .ir-report .sgx-lib-grid .sgx-lib-card {
      width: 100% !important;
      max-width: 100% !important;
      justify-self: stretch;
  }
}

@media (max-width: 768px) {

  /* Make the whole filter block full-width inside container */
  .sgx-filters-row {
      display: flex;
      flex-direction: column;    /* stack vertically */
      width: 100%;
      gap: 16px;
  }

  /* Allow each select to stretch full width */
  .sgx-filter-group {
      width: 100%;
      min-width: 0 !important;   /* override the 180px min-width */
  }

  /* Ensure selects themselves fill the width */
  .sgx-filter-select,
  .sgx-sort-select {
      width: 100%;
  }
}

/* Make the whole controls block tighter */
.sgx-controls-container {
    margin-bottom: 8px; /* was 24px */
}

/* Filters panel: fully collapsed when closed */
.sgx-filters-wrapper {
    display: none;        /* no layout space */
    margin: 0;
    padding: 0;
    height: 0;
    overflow: hidden;
}

/* When open, let it breathe */
.sgx-filters-wrapper.is-open {
    display: block;
    padding-top: 12px;
    height: auto;
}

/* Meta bar (chips row): hidden by default */
.sgx-meta-bar {
    display: none;
    margin: 0;
    gap: var(--sp-12);
    padding-top: 16px;
}



/*UTILITY BAR*/

/* OUTER CARD */
.pi-utility-bar {
    background: #ffffff;
    padding: 14px 24px;
    margin-top: -20px;
    margin-bottom: 28px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* INNER LAYOUT (left/right) */
.pi-utility-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Left badge */
.pi-badge {

    font-size: 16px;
    font-weight: 600;
    color: #3a3f45;
}

.pi-badge-subscriber {
    color: #7933d5;
}

/* Right-hand links/buttons */
.pi-utility-right {
    display: flex;
    gap: 16px;
}

.pi-link {
    font-size: 15px;
    font-weight: 600;
    color: #2a2f36;
    text-decoration: none;
}

.pi-link:hover {
    text-decoration: underline;
}

.pi-btn-primary {
    background: #0e63ff;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    color: #fff !important;
}

.pi-btn-primary:hover {
    background: #084ed6;
}

/* Optional: stack neatly on small screens */
@media (max-width: 640px) {
    .pi-utility-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .pi-utility-right {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        row-gap: 6px;
    }
}



/* =========================================================
   SGX – Product Intelligence Reports Header Hero
   Used by [sgx_pi_reports_intro show_title="false"]
   ========================================================= */

/* Wrapper */
.sgx-reports-hero {
  max-width: 960px;             /* keeps it nicely inside content */
  padding: 1rem 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;

}

/* If you ever show the title via show_title="true" */
.sgx-hero-title {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
  margin: 0;
}

/* Main line of copy */
.sgx-hero-sub {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: #ffffff;
  font-weight: 500;
  letter-spacing: 1%;            /* neutral grey */
}

/* Emphasised bits inside copy */
.sgx-hero-sub strong {
  font-weight: 700;
  color: #111827;
}

/* Actions row */
.sgx-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}





/* ------------------------------------------------------------------
   Buttons – shared base
   ------------------------------------------------------------------ */

.sgx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  padding-left: 40px;
  padding-right: 40px;
}

/* Primary button (dark) */
.sgx-btn-primary {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #070023;
}

.sgx-btn-primary:hover {
  background-color: #ba74ff;
  border-color: #ba74ff;
}

/* Ghost / secondary outline button */
.sgx-btn-ghost {
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.2);

}

.sgx-btn-ghost:hover {
  background-color: #f9fafb;
  border-color: rgba(17, 24, 39, 0.35);
}

/* ==========================================
   SGX – Gated Report CTA (Sticky-on-section)
   ========================================== */

/* Wrappers */
.sgx-gated-content {
  position: relative;
}

.sgx-locked-region {
  position: relative;
}

/* Reserve space so last lines of blurred content aren’t covered */
.sgx-gated-content--locked {
  padding-bottom: 260px;
}

/* Blur only the locked content behind the CTA */
.sgx-gated-content--locked .sgx-locked-body {
  position: relative;
  filter: blur(3px);
  opacity: 0.85;
}

/* ---------- FIXED CTA (shown only while in the locked band) ---------- */

.sgx-locked-overlay {
  position: fixed;
  top: 140px;                 /* sits under your header */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 760px;
  padding: 24px 24px 20px;
  background: #070023;
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(15,23,42,0.25);
  z-index: 999;
  text-align: left;
  display: none;             /* JS toggles this via .is-active */
}

.sgx-locked-overlay.is-active {
  display: block !important;
}

/* Typography + actions (same as before) */
.sgx-locked-overlay h3 {
  margin: 0 0 20px;
  font-size: 21px;
  font-weight: 600;
  color: #ffffff;
  border-bottom: 1px #ffffff30 solid;
  padding-bottom: 12px;
}

.sgx-locked-overlay p {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: #ffffff;
}

.sgx-locked-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.sgx-locked-small {
  font-size: 0.85rem;
  color: #6b7280;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .sgx-locked-overlay {
    top: 160px;
    width: calc(100% - 24px);
    max-width: 480px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(15,23,42,0.18);
  }

  .sgx-locked-actions {
    flex-direction: column;
    align-items: stretch;
  }


}

/* Let fixed elements escape Avada wrappers */
body .fusion-row,
body .fusion-column-wrapper,
body .fusion-builder-row,
body .fusion-builder-row-inner,
body .fusion-builder-column,
body .fusion-builder-column-inner {
  overflow: visible !important;
}

/* =========================================================
LOCKED OVERLAY: 2-col desktop → 1-col mobile + divider
========================================================= */

/* 2 columns (desktop/tablet) */
.sgx-locked-overlay .sgx-locked-grid{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 52px;
  row-gap: 14px;
  align-items: start;
}

/* Columns stack internally */
.sgx-locked-overlay .sgx-locked-col{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Text spacing */
.sgx-locked-overlay .sgx-locked-lead,
.sgx-locked-overlay .sgx-locked-note{
  margin: 0;
}

/* Make both CTAs identical size */
.sgx-locked-overlay .sgx-unlock-form{ margin: 0; }

.sgx-locked-overlay .sgx-unlock-form button,
.sgx-locked-overlay .sgx-locked-col-right > .sgx-btn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 16px;
  line-height: 1.1;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Vertical divider (desktop) */
.sgx-locked-overlay .sgx-locked-grid:before{
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 50%;
  width: 1px;
  background: rgba(255,255,255,0.18);
  transform: translateX(-0.5px);
  pointer-events: none;
}

/* ✅ Mobile: FORCE single column and swap divider to horizontal */
@media (max-width: 640px){

  .sgx-locked-overlay .sgx-locked-grid{
    grid-template-columns: 1fr !important;
    column-gap: 0;
    row-gap: 14px;
  }

  /* remove vertical divider */
  .sgx-locked-overlay .sgx-locked-grid:before{
    content: none;
  }

  /* horizontal divider between left + right sections */
  .sgx-locked-overlay .sgx-locked-col-left{
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    margin-bottom: 6px;
  }

  /* allow wrap on tiny screens */
  .sgx-locked-overlay .sgx-unlock-form button,
  .sgx-locked-overlay .sgx-locked-col-right > .sgx-btn{
    white-space: normal;
    min-height: 52px;
  }
}


/* =========================================================
   MAGIC LINK BYPASS: remove blur + lock overlay
   (requires body class: pi-magic-access)
   ========================================================= */

body.pi-magic-access .sgx-gated-content--locked {
  padding-bottom: 0 !important; /* remove reserved space */
}

body.pi-magic-access .sgx-gated-content--locked .sgx-locked-body {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}

body.pi-magic-access .sgx-locked-overlay,
body.pi-magic-access .sgx-locked-overlay.is-active {
  display: none !important;
}