/* ==========================================================================
   Pando shared page theme — v3
   --------------------------------------------------------------------------
   Loaded LAST on every public /connect page and every /demos page. Ports the
   exact design system from connect/outcomes_calculator.html — the "Pando
   proposal" look — onto every other page: Playfair Display serif headings,
   Inter sans body, navy + cream + gold + sage palette, hairline borders,
   quiet navy chrome instead of bright blue gradients.

   Rules here use the class names the pages already use (.page-header,
   .card, .section, .btn, .btn-primary, .stat-card, .modal-content ...), so
   no page markup has to change.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Exact tokens from outcomes_calculator.html */
    --navy:        #12314C;
    --navy-deep:   #0C2236;
    --navy-soft:   #1F4462;
    --cream:       #F6F4EF;
    --paper:       #FFFFFF;
    --ink:         #1B2430;
    --ink-soft:    #4B5563;
    --muted:       #7C8594;
    --line:        #E4E0D6;
    --line-strong: #CFC9BA;
    --gold:        #B9A77E;
    --gold-soft:   #EFE9DA;
    --sage:        #4E6E4A;
    --sage-soft:   #94AD82;
    --sage-tint:   #EEF2EC;
    --danger:      #A23B3B;
    --danger-tint: #F7ECEC;

    --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Re-point the variables individual pages already use to the brand palette */
    --primary:      var(--navy);
    --primary-dark: var(--navy-deep);
    --secondary:    var(--ink);
    --accent:       var(--gold);
    --success:      var(--sage);
    --border:       var(--line);
    --light-gray:   var(--cream);
    --gray-50:      var(--cream);
    --gray-500:     var(--muted);
    --gray-600:     var(--ink-soft);
    --gray-700:     var(--ink-soft);

    /* Back-compat aliases in case any older rule still references these */
    --pando-navy: var(--navy);
    --pando-gold: var(--gold);
    --pando-ink: var(--ink);
    --pando-muted: var(--muted);
    --pando-border: var(--line);
    --pando-bg: var(--cream);
}

/* ---------- Base --------------------------------------------------------
   Playfair Display for every heading, Inter for everything else, cream page
   background — the three biggest signals of the proposal look.            */
html { -webkit-font-smoothing: antialiased; scrollbar-color: var(--line-strong) transparent; }
body {
    font-family: var(--sans);
    background: var(--cream);
    color: var(--ink);
    line-height: 1.55;
}
h1, h2, h3, h4 {
    font-family: var(--serif) !important;
    font-weight: 500;
    letter-spacing: -0.01em;
}
::selection { background: rgba(18, 49, 76, .16); }
.container { padding: 1.5rem 1.75rem 3rem; }

a { color: var(--navy); }
a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

/* ---------- Hero / page header ------------------------------------------
   Solid navy (never a bright-blue gradient), a 2px gold hairline on top —
   exactly like the plan-strip / kpi accent bars in outcomes_calculator —
   and a serif title instead of bold sans.                                  */
.page-header,
.hero-section,
.section-intro,
main .hero,
.container > .header,
.admin-header,
.shell .hero {
    background: var(--navy);
    color: #fff;
    padding: 1.6rem 1.8rem 1.5rem;
    border: 0;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    box-shadow: none;
    text-align: left;
    position: relative;
}
.page-header::after,
.hero-section::after,
.section-intro::after,
main .hero::after,
.container > .header::after,
.admin-header::after,
.shell .hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: var(--gold);
    border-radius: 6px 6px 0 0;
}
.page-header h1,
.hero-section h1,
.section-intro h1,
main .hero h1,
.container > .header h1,
.admin-header h1,
.shell .hero h1 {
    margin: 0 0 .4rem;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: #fff;
    display: flex;
    align-items: center;
    gap: .65rem;
}
.page-header h1 i,
.hero-section h1 i,
.section-intro h1 i,
main .hero h1 i,
.container > .header h1 i,
.admin-header h1 i,
.shell .hero h1 i { font-size: .8em; color: var(--gold); }
.page-header p,
.hero-section p,
.hero-section .subtitle,
.section-intro p,
main .hero p,
.container > .header p,
.admin-header p,
.shell .hero p {
    margin: 0;
    max-width: 820px;
    color: rgba(255, 255, 255, .75);
    font-size: .95rem;
    font-family: var(--sans);
    font-weight: 400;
}
.page-header p a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.page-header p strong { color: #fff; }
.page-header code { background: rgba(255, 255, 255, .16); color: #fff; padding: .05rem .35rem; border-radius: 3px; }

/* Controls that live inside a hero read as frosted glass, never navy-on-navy */
.page-header .btn,
.page-header .header-actions button,
.page-header .header-actions a {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .34);
    box-shadow: none;
    backdrop-filter: blur(4px);
}
.page-header .btn:hover:not(:disabled),
.page-header .header-actions button:hover:not(:disabled),
.page-header .header-actions a:hover {
    background: rgba(255, 255, 255, .26);
    color: #fff;
    transform: none;
    filter: none;
}
.page-header .btn-danger { background: rgba(162, 59, 59, .55); border-color: rgba(255, 255, 255, .4); }

/* ---------- Cards / sections ---------------------------------------------
   White paper, hairline border, 6px radius, no drop shadow — exactly
   outcomes_calculator's .card.                                             */
.card,
.section,
.settings-section,
.filters-section,
.panel,
.outcomes-panel,
.activity-feed-section,
.recent-replies-section,
.connections-section,
.stat-card,
.summary-card,
.state-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: none;
}
.stat-card, .summary-card { position: relative; overflow: hidden; }
.stat-card::before, .summary-card::before {
    content: '';
    position: absolute;
    left: 1.1rem; right: 1.1rem; top: 0;
    height: 2px;
    background: var(--line-strong);
}
.stat-card:hover, .summary-card:hover { box-shadow: 0 6px 18px rgba(18, 49, 76, .07); }
.stat-value, .summary-value { font-family: var(--serif); color: var(--navy); }
.stat-label, .summary-label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.section h2, .settings-section h2, .card h2, .card-header h2,
.section-title, .card-title, .section-title-modern {
    color: var(--navy);
    font-weight: 500;
    letter-spacing: -.005em;
}
.section h2, .settings-section h2, .card h2, .card-header h2, .section-title, .card-title { font-size: 1.15rem; }
.section h2 > i:first-child, .settings-section h2 > i:first-child, .card h2 > i:first-child, .card-header h2 > i:first-child,
.section-title > i:first-child, .card-title > i:first-child { color: var(--gold); }

/* Compact, uppercase micro-labels above form controls (matches .field label) */
.form-group > label,
.filter-group > label,
.field > label,
.settings-section .form-group label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    font-family: var(--sans);
}
.help-text, .form-help { color: var(--muted); font-size: .78rem; }

/* ---------- Form controls ------------------------------------------------
   Hairline borders, 4px radius, navy focus ring — matches .inp.            */
select,
textarea,
input[type="text"], input[type="search"], input[type="number"], input[type="date"],
input[type="email"], input[type="url"], input[type="password"], input[type="tel"],
input[type="time"], input[type="datetime-local"] {
    font-family: var(--sans);
    border: 1.5px solid var(--line-strong);
    border-radius: 4px;
    background-color: var(--paper);
    color: var(--ink);
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
select:hover, textarea:hover,
input[type="text"]:hover, input[type="search"]:hover, input[type="number"]:hover, input[type="date"]:hover {
    border-color: var(--muted);
}
select:focus, textarea:focus,
input[type="text"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="date"]:focus,
input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="tel"]:focus,
input[type="time"]:focus, input[type="datetime-local"]:focus {
    outline: none;
    border-color: var(--navy);
    background-color: var(--paper);
    box-shadow: 0 0 0 3px rgba(18, 49, 76, .1);
}
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--navy); }
::placeholder { color: #B4B9C2; }

/* ---------- Buttons -------------------------------------------------------
   4px radius, navy solid primary, hairline outline secondary — matches
   .btn / .btn-primary / .btn-outline.                                      */
.btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-accent {
    font-family: var(--sans);
    font-weight: 600;
    border-radius: 4px;
    letter-spacing: .01em;
}
.btn-primary {
    background: var(--navy);
    color: #fff;
    border-color: transparent;
    box-shadow: none;
}
.btn-primary:hover:not(:disabled) {
    background: var(--navy-soft);
    color: #fff;
    filter: none;
    box-shadow: none;
}
.btn-secondary {
    background: var(--paper);
    color: var(--navy);
    border: 1.5px solid var(--line-strong);
    box-shadow: none;
}
.btn-secondary:hover:not(:disabled) { background: #FBFAF7; border-color: var(--navy); color: var(--navy); }
.btn:disabled, .btn-primary:disabled, .btn-secondary:disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none; }

/* ---------- Tables ---------------------------------------------------------
   Uppercase, letter-spaced, muted headers on white — matches .tbl th.       */
table th,
.data-table th,
.org-dashboard-table th {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--paper);
    border-bottom: 1px solid var(--line-strong);
    font-family: var(--sans);
}
table td { color: var(--ink); border-bottom: 1px solid var(--line); }
table tbody tr:hover td { background: #FBFAF7; }

/* ---------- Modals / toasts ------------------------------------------- */
.modal { backdrop-filter: blur(3px); }
.modal-content, .modal-dialog, .dialog {
    border-radius: 10px;
    box-shadow: 0 28px 70px rgba(18, 49, 76, .22);
    border: 1px solid var(--line);
}
.modal-header { border-bottom: 1px solid var(--line); }
.modal-footer { border-top: 1px solid var(--line); }

/* ---------- Small components ------------------------------------------ */
.badge, .pill, .status-pill {
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 3px;
}
.alert { border-radius: 4px; border: 1px solid var(--line); }
.empty-state i, .loading i { color: var(--navy); }
.empty-state, .empty { color: var(--muted); }

/* ---------- Pulse dashboard (index.html) ------------------------------ */
.hero-section { animation: none; }
.section-title-modern { font-size: 1.4rem; }
.section-header-modern { border-bottom-color: var(--line); }
.outcomes-panel-header { background: var(--cream); }

@media (max-width: 720px) {
    .container { padding: 1rem 1rem 2rem; }
    .page-header, .hero-section, main .hero { padding: 1.25rem 1.2rem; border-radius: 6px; }
}

/* ---------- Site headers on pages that carry their own (demos) --------- */
.hc-demo-header, .portal-header { background: var(--navy); }
.section-intro { opacity: 1; }
.section-intro p { opacity: 1; }

/* ---------- Utility / diagnostic pages: plain titled card -------------- */
.container > h1:first-child,
body > h1:first-child,
.card > h1:first-child {
    color: var(--navy);
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.25;
    margin: 0 0 1rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--line);
}
.container > h1:first-child > i, body > h1:first-child > i, .card > h1:first-child > i { color: var(--gold); }

/* Hero text: beat page-level colours on subtitles and links */
:is(.page-header, .hero-section, .section-intro, main .hero, .container > .header, .admin-header, .shell .hero) :is(p, .subtitle, .sub, [class*="subtitle"]) { color: rgba(255, 255, 255, .75); }
:is(.page-header, .hero-section, .section-intro, main .hero, .container > .header, .admin-header, .shell .hero) p a:not([class*="btn"]) { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
:is(.page-header, .hero-section, .section-intro, main .hero, .container > .header, .admin-header, .shell .hero) :is(p, .subtitle) strong { color: #fff; }