/* =========================================================
   Quantum Lens Advisory — Subscriber Portal
   Two palettes: .qla-palette-gold  |  .qla-palette-blue
   ========================================================= */

.qla-portal, .qla-portal * { box-sizing: border-box; }

.qla-portal {
    --bg:        #0a1428;
    --bg-alt:    #101c33;
    --bg-card:   #0e1a30;
    --border:    rgba(255,255,255,0.08);
    --border-2:  rgba(255,255,255,0.14);
    --text:      #e8ecf3;
    --text-mute: #8a95a8;
    --text-dim:  #a9b3c5;
    --accent:    var(--qla-gold-accent, #F4C542);
    color: var(--text);
    background: var(--bg);
    font-family: 'Georgia', 'Playfair Display', serif;
    min-height: 100vh;
    padding: 0;
    /* Break out of Divi / theme container to full viewport width */
    position: relative;
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Anchor briefing rows */
a.qla-briefing-row,
button.qla-briefing-row { text-decoration: none; color: inherit; cursor: pointer; background: transparent; border: 1px solid var(--border); width: 100%; text-align: left; font: inherit; }
.qla-briefing-row.is-clickable:hover { border-color: var(--accent); background: rgba(255,255,255,.02); }
.qla-briefing-row.is-soon { cursor: default; opacity: .7; }

.qla-portal.qla-palette-blue { --accent: var(--qla-blue-accent, #4A9FE8); }

/* Divi wrap-neutralizer */
#page-container .qla-portal, .qla-portal { line-height: 1.45; }

/* --------- Top bar --------- */
.qla-topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding: 22px 40px 14px;
}
.qla-brand { display:flex; align-items:center; gap:12px; }
.qla-logo-mark {
    width:36px;height:36px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color: var(--accent); font-weight:700; font-size:22px;
    border: 2px solid var(--accent);
    font-family: 'Georgia', serif;
}
.qla-logo-text { letter-spacing:.15em; font-size:14px; font-family:'Inter', sans-serif; font-weight:600; }
.qla-logo-text .qla-accent { color: var(--accent); }
.qla-nav-right { display:flex; align-items:center; gap:18px; font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.15em; }
.qla-btn-outline {
    display:inline-flex; align-items:center; gap:8px;
    padding: 8px 14px; border:1px solid var(--accent); border-radius:4px;
    color: var(--accent); text-decoration:none; font-weight:600;
}
.qla-btn-outline svg { width:14px; height:14px; }
.qla-nav-logout { color: var(--text-mute); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.qla-nav-logout svg { width:14px; height:14px; }

/* --------- Nav tabs --------- */
.qla-navtabs {
    display:flex; justify-content:center; gap:44px;
    padding: 28px 40px 24px;
    border-bottom: 1px solid var(--border);
    font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.18em;
}
.qla-nav-item { color: var(--text-mute); text-decoration:none; padding: 6px 0; font-weight:600; }
.qla-nav-item.is-active { color: var(--accent); border-bottom: 2px solid var(--accent); }

/* --------- Hero --------- */
.qla-hero {
    display:grid; grid-template-columns: 1fr 340px; gap: 40px;
    padding: 60px 60px 40px;
}
.qla-eyebrow {
    color: var(--accent); font-family:'Inter',sans-serif; font-size:12px;
    letter-spacing:.18em; font-weight:600; margin-bottom:16px;
}
.qla-hero-title {
    font-family:'Georgia','Playfair Display',serif;
    font-size: 48px; font-weight:400; line-height:1.1;
    color: var(--text); margin:0 0 24px;
}
.qla-hero-body { color: var(--text-dim); font-size:16px; max-width:560px; }

.qla-hero-card {
    background: var(--bg-card); border:1px solid var(--border);
    border-radius: 8px; padding: 24px;
}
.qla-hero-card-title {
    display:flex; align-items:center; gap:12px;
    color: var(--accent); font-family:'Inter',sans-serif; font-weight:600; font-size:15px;
    padding-bottom:18px; border-bottom:1px solid var(--border);
    margin-bottom:18px;
}
.qla-hc-icon { width:34px;height:34px;border-radius:50%; border:2px solid var(--accent); display:flex;align-items:center;justify-content:center; color: var(--accent); }
.qla-hc-icon svg { width:18px; height:18px; }
.qla-hc-rows { display:flex; flex-direction:column; gap:14px; font-family:'Inter',sans-serif; }
.qla-hc-row { display:flex; flex-direction:column; padding-left:12px; border-left:1px solid var(--border-2); }
.qla-hc-row span { color: var(--text-mute); font-size:12px; letter-spacing:.05em; }
.qla-hc-row b { color: var(--text); font-weight:500; font-size:14px; margin-top:2px; }
.qla-btn-hc {
    display:block; text-align:center; margin-top:18px;
    padding: 10px; border:1px solid var(--accent); border-radius:4px;
    color: var(--accent); text-decoration:none; font-family:'Inter',sans-serif;
    font-size:12px; letter-spacing:.15em; font-weight:600;
}

/* --------- Includes --------- */
.qla-includes {
    background: var(--bg-alt);
    padding: 32px 60px;
}
.qla-inc-heading {
    color: var(--accent); font-family:'Inter',sans-serif; font-size:12px;
    letter-spacing:.18em; font-weight:600; margin-bottom:24px;
}
.qla-inc-grid { display:grid; gap:24px; }
.qla-inc-cols-5 { grid-template-columns: repeat(5,1fr); }
.qla-inc-cols-8 { grid-template-columns: repeat(8,1fr); }
.qla-inc-cols-4 { grid-template-columns: repeat(4,1fr); }
.qla-inc-item { text-align:center; }
.qla-inc-icon {
    color: var(--accent);
    width:44px; height:44px; margin: 0 auto 12px;
    display:flex; align-items:center; justify-content:center;
}
.qla-inc-icon svg { width:100%; height:100%; }
.qla-inc-title { font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color: var(--text); }
.qla-inc-sub { font-family:'Inter',sans-serif; font-size:14px; color: var(--text-dim); }

/* --------- Tabs row --------- */
.qla-tabsrow {
    display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px; padding: 20px 60px;
}
.qla-tab-card {
    display:flex; align-items:center; gap:12px;
    padding: 16px 18px; background: var(--bg-card);
    border:1px solid var(--border); border-radius:6px;
    text-decoration:none; color: var(--text);
    transition: border-color .15s, transform .15s;
}
.qla-tab-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.qla-tab-icon { color: var(--accent); width:24px; height:24px; flex-shrink:0; }
.qla-tab-icon svg { width:100%; height:100%; }
.qla-tab-body { display:flex; flex-direction:column; flex:1; font-family:'Inter',sans-serif; }
.qla-tab-label { color: var(--accent); font-size:12px; font-weight:600; letter-spacing:.1em; }
.qla-tab-sub { color: var(--text-dim); font-size:12px; margin-top:2px; }
.qla-tab-chev { color: var(--accent); width:16px; height:16px; }
.qla-tab-chev svg { width:100%; height:100%; }

/* --------- Main two-col --------- */
.qla-main {
    display:grid; grid-template-columns: 1fr 1fr; gap:20px;
    padding: 20px 60px;
}
.qla-series, .qla-current {
    background: var(--bg-card); border:1px solid var(--border);
    border-radius:6px; padding: 22px;
}

.qla-series-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:18px;
}
.qla-series-header h3 {
    font-family:'Inter',sans-serif; font-size:13px; letter-spacing:.15em;
    color: var(--text); margin:0; font-weight:600;
}
.qla-progress { display:flex; align-items:center; gap:12px; }
.qla-progress-bar {
    width:140px; height:4px; background: rgba(255,255,255,.1); border-radius:2px; overflow:hidden;
}
.qla-progress-bar span { display:block; height:100%; background: var(--accent); }
.qla-progress-txt { font-family:'Inter',sans-serif; font-size:12px; color: var(--text-dim); }

.qla-series-list { display:flex; flex-direction:column; gap:8px; }
.qla-briefing-row {
    display:grid; grid-template-columns: 42px 1fr auto; gap:14px;
    align-items:center; padding: 12px 14px;
    background: transparent; border:1px solid var(--border);
    border-radius:5px;
}
.qla-briefing-row.is-current { border-color: var(--accent); background: rgba(244,197,66,.05); }
.qla-portal.qla-palette-blue .qla-briefing-row.is-current { background: rgba(74,159,232,.06); }
.qla-briefing-row.is-done .qla-br-title { text-decoration: line-through; opacity:.6; }

.qla-br-num {
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border: 1px solid var(--border-2);
    font-family:'Inter',sans-serif; font-size:13px; color: var(--text-dim);
}
.qla-briefing-row.is-current .qla-br-num { border-color: var(--accent); color: var(--accent); }
.qla-br-title { font-family:'Inter',sans-serif; font-size:14px; color: var(--text); font-weight:600; }
.qla-briefing-row.is-current .qla-br-title { color: var(--accent); }
.qla-br-sub { font-family:'Inter',sans-serif; font-size:12px; color: var(--text-dim); margin-top:2px; }
.qla-br-status { display:flex; align-items:center; gap:8px; font-family:'Inter',sans-serif; font-size:12px; }
.qla-status-avail { color: #7bc47f; }
.qla-status-soon  { color: var(--text-mute); }
.qla-status-icon { width:14px; height:14px; color: var(--text-mute); }
.qla-status-icon svg { width:100%; height:100%; }

.qla-series-cta {
    display:block; text-align:center; margin-top: 16px;
    padding: 12px; border:1px solid var(--border-2); border-radius:4px;
    color: var(--accent); text-decoration:none;
    font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.15em; font-weight:600;
}
.qla-series-cta:hover { border-color: var(--accent); }
.qla-series-cta svg { width:12px; height:12px; vertical-align:middle; margin-left:6px; }

/* --------- Current briefing --------- */
.qla-current-eyebrow {
    color: var(--accent); font-family:'Inter',sans-serif; font-size:11px;
    letter-spacing:.18em; font-weight:600; margin-bottom:14px;
}
.qla-current-title {
    font-family:'Georgia',serif; font-size:32px; font-weight:400; line-height:1.15;
    margin:0 0 12px; color: var(--text);
}
.qla-current-sub { color: var(--accent); font-family:'Inter',sans-serif; font-size:15px; margin-bottom:14px; }
.qla-current-body { color: var(--text-dim); font-size:14px; margin-bottom:20px; }

.qla-audio {
    background: var(--bg-alt); border:1px solid var(--border);
    padding: 16px; border-radius:5px; margin-bottom:16px;
}
.qla-audio-title { color: var(--accent); font-family:'Inter',sans-serif; font-size:13px; font-weight:600; }
.qla-audio-sub { color: var(--text-dim); font-family:'Inter',sans-serif; font-size:13px; margin-bottom:10px; }
.qla-audio-player { width:100%; height:36px; }
.qla-audio-empty { color: var(--text-mute); font-family:'Inter',sans-serif; font-size:12px; padding:8px 0; }

.qla-included {
    background: var(--bg-alt); border:1px solid var(--border);
    padding: 16px; border-radius:5px;
}
.qla-included-title {
    color: var(--text); font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
    padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--border);
}
.qla-inc-line {
    display:grid; grid-template-columns: 22px 1fr auto; gap:10px;
    align-items:center; padding: 8px 0;
}
.qla-inc-check { color: var(--accent); width:18px; height:18px; }
.qla-inc-check svg { width:100%; height:100%; }
.qla-inc-info { display:flex; flex-direction:column; font-family:'Inter',sans-serif; }
.qla-inc-info b { color: var(--text); font-size:13px; font-weight:600; }
.qla-inc-info em { color: var(--text-dim); font-size:12px; font-style:normal; margin-top:2px; }
.qla-inc-btn {
    display:inline-block; padding: 6px 14px; border:1px solid var(--accent);
    color: var(--accent); text-decoration:none; background:transparent;
    font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:.1em;
    border-radius:3px; cursor:pointer;
}
.qla-inc-btn:hover { background: var(--accent); color: var(--bg); }

/* --------- Quote --------- */
.qla-quote {
    display:grid; grid-template-columns: 60px 1fr; gap: 22px;
    padding: 24px 32px; margin: 20px 60px 12px;
    background: var(--bg-card); border:1px solid var(--border);
    border-radius:6px;
}
.qla-quote.has-tip { grid-template-columns: 60px 1fr 260px; }
.qla-quote-icon { color: var(--accent); width:60px; height:60px; }
.qla-quote-icon svg { width:100%; height:100%; }
.qla-quote-body h3 { color: var(--accent); font-family:'Georgia',serif; font-size:22px; font-weight:400; margin:0 0 10px; }
.qla-quote-body p { color: var(--text-dim); font-family:'Inter',sans-serif; font-size:14px; margin:0; }
.qla-quote-tip { padding-left: 22px; border-left: 1px solid var(--border); }
.qla-tip-title { color: var(--accent); font-family:'Inter',sans-serif; font-size:13px; font-weight:600; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.qla-tip-title svg { width:14px; height:14px; }

/* --------- Help strip --------- */
.qla-helpstrip {
    display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px; padding: 24px 40px;
    margin: 0 60px 20px;
    background: var(--bg-card); border:1px solid var(--border); border-radius:6px;
}
.qla-help-item {
    display:flex; align-items:center; gap:12px;
    font-family:'Inter',sans-serif;
}
.qla-help-item > svg { width:26px; height:26px; color: var(--accent); flex-shrink:0; }
.qla-help-item b { display:block; color: var(--text); font-size:14px; font-weight:600; }
.qla-help-item em { color: var(--text-dim); font-style:normal; font-size:12px; }

.qla-footer {
    padding: 18px 60px 40px; text-align:center;
    color: var(--text-mute); font-family:'Inter',sans-serif; font-size:12px;
    display:flex; justify-content:space-between;
}
.qla-footer-links a { color: var(--text-mute); margin-left:22px; text-decoration:none; }

/* --------- Modal --------- */
.qla-modal { position:fixed; inset:0; display:none; z-index:99999; }
.qla-modal.is-open { display:block; }
.qla-modal-bg { position:absolute; inset:0; background: rgba(0,0,0,.72); }
.qla-modal-card {
    position:relative; margin:10vh auto; width: 92%; max-width: 520px;
    background: #101c33; border:1px solid var(--border-2); border-radius:8px;
    padding: 28px; color: var(--text);
    font-family:'Inter',sans-serif;
}
.qla-modal-eyebrow { color: var(--accent); font-size:11px; letter-spacing:.18em; font-weight:600; }
.qla-modal-card h3 { font-family:'Georgia',serif; font-size:22px; margin:8px 0 6px; font-weight:400; color: var(--text); }
.qla-modal-close { position:absolute; top:10px; right:14px; background:none; border:0; color: var(--text-mute); font-size:26px; cursor:pointer; }

/* --------- Archive pages --------- */
.qla-archive { padding: 60px; }
.qla-archive-header { margin-bottom:28px; }
.qla-archive-header h1 { font-family:'Georgia',serif; font-size:42px; font-weight:400; color: var(--text); margin:0; }
.qla-archive-list { display:flex; flex-direction:column; gap:12px; }
.qla-arc-row {
    display:grid; grid-template-columns: 1fr auto; gap:20px;
    padding: 20px 22px; background: var(--bg-card);
    border:1px solid var(--border); border-radius:6px;
}
.qla-arc-title { font-family:'Georgia',serif; font-size:20px; color: var(--text); margin-bottom:4px; }
.qla-arc-desc { font-family:'Inter',sans-serif; font-size:14px; color: var(--text-dim); }
.qla-arc-meta { font-family:'Inter',sans-serif; font-size:12px; color: var(--text-mute); margin-top:6px; }
.qla-arc-cta { display:flex; align-items:center; }
.qla-btn {
    display:inline-block; padding: 9px 18px; border:1px solid var(--accent);
    color: var(--accent); text-decoration:none; background:transparent;
    font-family:'Inter',sans-serif; font-size:12px; font-weight:600; letter-spacing:.12em;
    border-radius:3px;
}
.qla-btn:hover { background: var(--accent); color: var(--bg); }

.qla-locked { padding: 60px 40px; text-align:center; }

/* --------- Mobile --------- */
@media (max-width: 900px) {
    .qla-hero { grid-template-columns: 1fr; }
    .qla-main { grid-template-columns: 1fr; }
    .qla-quote { grid-template-columns: 40px 1fr; padding: 20px; margin: 12px 20px; }
    .qla-quote.has-tip { grid-template-columns: 40px 1fr; }
    .qla-quote-tip { grid-column: 1 / -1; padding-left: 0; border-left:0; border-top:1px solid var(--border); padding-top:16px; margin-top:16px; }
    .qla-inc-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .qla-navtabs { flex-wrap: wrap; gap:16px; justify-content:flex-start; overflow-x:auto; }
    .qla-hero-title { font-size: 36px; }
    .qla-topbar { padding: 16px 20px; }
    .qla-navtabs, .qla-includes, .qla-tabsrow, .qla-main, .qla-helpstrip, .qla-footer { padding-left:20px; padding-right:20px; }
    .qla-helpstrip { margin-left:20px; margin-right:20px; }
    .qla-quote { margin-left:20px; margin-right:20px; }
    .qla-archive { padding:20px; }
}