/* ============================================================================
   brief.css — shared dark-signal components for thinkwright research briefs
   (article shell, prose, data panels, tables, callouts, glossary, conclusions,
   and the quote-card generator chrome). Pages link this after dark-signal.css.
   ========================================================================== */

:root {
    /* legacy aliases kept for the inline citation styles in the prose */
    --accent-warm: rgba(169,215,232,0.6);
    --accent: #A9D7E8;
    --text-secondary: #8F8F8A;
}

/* article shell */
.brief { padding-top:108px; }
.brief-head { margin-bottom:54px; }
.brief-head h1 { font-size:clamp(32px,3.3vw,42px); line-height:1.1; margin-bottom:16px; }
.brief-head .lede { font-size:18px; margin-bottom:24px; }
.byline { font:400 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }

/* prose */
.prose p { font-size:15.5px; line-height:1.75; color:#B8B8B3; margin-bottom:18px; max-width:62ch; }
.prose p.lead { font-size:17px; color:var(--ink-soft); }
.prose h2 { font-size:23px; font-weight:500; letter-spacing:-0.005em; color:var(--ink); margin:56px 0 20px; }
.prose h2:first-child { margin-top:0; }
.prose .section-label + h2 { margin-top:0; }
.prose strong { color:var(--ink); font-weight:600; }
.prose a { color:var(--cyan-dim); text-decoration:none; }
.prose a:hover { color:var(--cyan); }

.section-label { font:400 10.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--cyan-dim); margin:56px 0 14px; }

/* pull quote */
.pull-quote { border-left:1px solid var(--cyan-dim); padding:8px 0 8px 26px; margin:34px 0; }
.pull-quote blockquote { font-size:16.5px; font-style:italic; line-height:1.7; color:var(--ink-soft); margin-bottom:10px; }
.pull-quote cite { font:400 10.5px/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase; font-style:normal; color:var(--ink-faint); }

/* data panels — override the landing card behaviors from the shared sheet */
.card, .card-wide {
    display:block; min-height:0;
    border:1px solid var(--frame); background:transparent;
    padding:26px 24px 22px; margin:38px 0;
}
.card:hover { background:transparent; box-shadow:none; border-color:var(--frame); }
.card-label { font:400 10.5px/1.6 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--cyan-dim); margin-bottom:18px; }

/* tables */
.data-table, .compare-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th, .compare-table th {
    text-align:left; font:500 10px/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink-dim); padding:8px 10px; border-bottom:1px solid var(--frame);
}
.compare-table th:first-child { width:120px; }
.data-table td, .compare-table td {
    padding:9px 10px; color:#A8A8A2; border-bottom:1px solid rgba(236,236,232,0.07);
    vertical-align:top; line-height:1.55;
}
.data-table tr:last-child td, .compare-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:rgba(236,236,232,0.03); }
.data-table strong, .compare-table strong { color:var(--ink); font-weight:500; }

.conf-high { font-family:var(--mono); font-size:11px; color:var(--cyan); }
.conf-med  { font-family:var(--mono); font-size:11px; color:var(--ink-dim); }
.conf-low  { font-family:var(--mono); font-size:11px; color:var(--ink-faint); }

/* chart */
.chart-container { padding:6px 0 0; }
.chart-container svg { display:block; width:100%; height:auto; }

/* entity spotlight */
.entity-list { margin-top:4px; }
.entity { display:flex; gap:14px; padding:10px 0; border-bottom:1px solid rgba(236,236,232,0.07); align-items:baseline; }
.entity:last-child { border-bottom:none; }
.entity-name { flex-shrink:0; width:150px; font-size:13.5px; font-weight:500; color:var(--ink); }
.entity-detail { font-size:13.5px; color:var(--ink-dim); line-height:1.55; }

/* assessment callouts */
.callout { border:1px solid var(--frame); border-left-width:2px; padding:18px 22px 14px; margin:14px 0; max-width:660px; }
.callout-label { font:500 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px; }
.callout p { font-size:14px; color:var(--ink-dim); line-height:1.65; }
.callout-yes { border-left-color:var(--cyan); }
.callout-yes .callout-label { color:var(--cyan); }
.callout-no { border-left-color:rgba(236,236,232,0.4); }
.callout-no .callout-label { color:var(--ink-soft); }
.callout-mixed { border-left-color:var(--cyan-faint); }
.callout-mixed .callout-label { color:var(--cyan-dim); }

/* glossary */
.glossary { display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; margin-top:4px; }
.glossary-item { font-size:12.5px; color:var(--ink-faint); line-height:1.55; }
.glossary-item strong { display:block; font:500 11px/1.6 var(--mono); letter-spacing:.06em; color:var(--ink-soft); }

/* conclusions */
.conclusions { margin-top:20px; max-width:660px; }
.conclusion { display:flex; gap:16px; margin-bottom:22px; }
.conclusion:last-child { margin-bottom:0; }
.conclusion-num {
    flex-shrink:0; width:26px; height:26px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--frame); color:var(--cyan); font:500 11px/1 var(--mono); margin-top:2px;
}
.conclusion-text { font-size:15px; color:#B8B8B3; line-height:1.7; }
.conclusion-text strong { color:var(--ink); font-weight:600; }

/* sources */
.article-sources { margin-top:64px; padding-top:22px; border-top:1px solid var(--frame); font:400 11px/1.8 var(--mono); color:var(--ink-faint); }
.article-sources strong { color:var(--ink-dim); font-weight:500; }

@media print { .side, .toc { display:none !important; } main { margin:0; } }
@media (max-width:600px) { .glossary { grid-template-columns:1fr; } }

.quote-fab {
    position: absolute; display: none; z-index: 10000;
    background: var(--bg); color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    padding: 8px 14px;
    font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
    cursor: pointer; transition: box-shadow .3s, color .3s;
}
.quote-fab:hover { color: var(--cyan-bright); box-shadow: 0 0 20px rgba(169,215,232,.18); }
.quote-overlay {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(0,0,0,0.65); display: none;
    align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.quote-overlay.active { display: flex; }
.quote-modal { background: var(--bg-lift); border: 1px solid var(--frame); padding: 24px; max-width: 680px; width: 90%; }
.quote-modal canvas { width: 100%; border: 1px solid var(--frame); display: block; }
.quote-modal-actions { display: flex; gap: 10px; margin-top: 16px; justify-content: flex-end; }
.quote-modal-btn {
    background: transparent; color: var(--cyan); border: 1px solid var(--cyan-dim);
    padding: 9px 16px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
    cursor: pointer; transition: box-shadow .3s, color .3s;
}
.quote-modal-btn:hover { color: var(--cyan-bright); box-shadow: 0 0 20px rgba(169,215,232,.15); }
.quote-modal-btn.secondary { color: var(--ink-dim); border-color: var(--frame); }
.quote-modal-btn.secondary:hover { color: var(--ink); box-shadow: none; }