/*
 * National STR Map — Claim CTA + printable Market Tear Sheet (str-brief.js).
 * Namespaced .sb-*. On-screen bits inherit the .sm dark "trading terminal"
 * tokens; the tear sheet (#sb-print-root / .sb-brief) is a self-contained
 * white/black stylesheet meant to be read only through @media print.
 */

/* ---- Shared wrapper (state-tools / market-tools slots) ------------- */
.sb-wrap { margin-top: 14px; display: grid; gap: 10px; min-width: 0; }
.sb-wrap *, .sb-card *, .sb-actions * { box-sizing: border-box; }

/* ---- Claim / coverage card ------------------------------------------ */
.sb-card {
    border-radius: 12px; padding: 12px 13px; border: 1px solid var(--sm-line);
    background: var(--sm-bg); font-size: .82rem; line-height: 1.5;
}
.sb-card.sb-open { border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .06); }
.sb-card.sb-covered { border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .06); }
.sb-tag {
    display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; border-radius: 999px; padding: 3px 9px; margin-bottom: 8px;
}
.sb-tag-open { color: #FBBF24; background: rgba(251, 191, 36, .16); }
.sb-tag-covered { color: #6EE7B7; background: rgba(52, 211, 153, .16); }
.sb-line { margin: 0 0 10px; color: var(--sm-text); }
.sb-btn {
    display: block; text-align: center; text-decoration: none; border-radius: 9px;
    padding: 9px 11px; font-size: .82rem; font-weight: 700; border: 1px solid var(--sm-line);
    color: var(--sm-text); background: var(--sm-raise); transition: border-color .15s, background .15s;
    font-family: inherit;
}
.sb-btn:hover { border-color: var(--sm-faint); }
.sb-btn-claim, .sb-btn-match {
    background: var(--sm-accent-deep); border-color: var(--sm-accent-deep); color: #05231A;
}
.sb-btn-claim:hover, .sb-btn-match:hover { background: var(--sm-accent); border-color: var(--sm-accent); }
.sb-quiet {
    display: block; text-align: center; margin-top: 7px; font-size: .74rem;
    color: var(--sm-dim); text-decoration: none;
}
.sb-quiet:hover { color: var(--sm-text); text-decoration: underline; }
.sb-card :focus-visible, .sb-actions :focus-visible {
    outline: 2px solid var(--sm-accent); outline-offset: 2px; border-radius: 6px;
}

/* ---- Tear-sheet tool buttons (print + share) ------------------------- */
.sb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sb-tool-btn {
    flex: 1 1 auto; min-width: 0; font-family: inherit; cursor: pointer;
    border-radius: 9px; padding: 9px 11px; font-size: .8rem; font-weight: 700;
    border: 1px solid var(--sm-line); color: var(--sm-text); background: var(--sm-bg);
    transition: border-color .15s, background .15s;
}
.sb-tool-btn:hover { border-color: var(--sm-faint); background: var(--sm-raise); }
.sb-tool-btn:disabled { opacity: .65; cursor: default; }

@media (max-width: 420px) {
    .sb-actions { flex-direction: column; }
}

/* =====================================================================
   Printable Market Tear Sheet
   Lives in #sb-print-root, appended to <body>. Invisible on screen;
   shown only inside @media print, at which point everything else in
   the document is hidden so the brief prints alone, on white.
   ===================================================================== */
#sb-print-root { display: none; }

.sb-brief {
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    color: #14181F; background: #fff; font-size: 9.5pt; line-height: 1.32;
}
.sb-brief * { box-sizing: border-box; }
.sb-block { break-inside: avoid; page-break-inside: avoid; margin: 0 0 8pt; }

.sb-brief .sb-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10pt;
    border-bottom: 2px solid #14181F; padding-bottom: 4pt; margin-bottom: 6pt;
}
.sb-brief .sb-word { font-size: 14pt; font-weight: 800; letter-spacing: .01em; }
.sb-brief .sb-word-str { color: #10B981; }
.sb-brief .sb-word-hub { color: #2563EB; margin-left: .32em; }
.sb-brief .sb-head-meta {
    font-size: 8.5pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4B5563;
}
.sb-brief .sb-title { font-size: 16pt; font-weight: 800; margin: 0 0 1pt; }
.sb-brief .sb-sub { font-size: 8pt; color: #4B5563; word-break: break-all; }

.sb-brief .sb-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(85pt, 1fr)); gap: 6pt;
}
.sb-brief .sb-kpi { border: 1px solid #D1D5DB; border-radius: 6pt; padding: 5pt 7pt; }
.sb-brief .sb-kpi-v { font-size: 12pt; font-weight: 800; }
.sb-brief .sb-kpi-tag {
    font-size: 6.5pt; font-weight: 700; text-transform: uppercase; color: #B45309; margin-top: 1pt;
}
.sb-brief .sb-kpi-l {
    font-size: 7pt; color: #4B5563; text-transform: uppercase; letter-spacing: .04em; margin-top: 2pt;
}

.sb-brief .sb-sec-h {
    font-size: 8pt; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: #2563EB; border-bottom: 1px solid #D1D5DB; padding-bottom: 2pt; margin-bottom: 3pt;
}
.sb-brief .sb-row {
    display: flex; justify-content: space-between; gap: 10pt; padding: 1.8pt 0;
    border-bottom: 1px solid #EEF0F2; font-size: 8.3pt;
}
.sb-brief .sb-row:last-child { border-bottom: none; }
.sb-brief .sb-row-l { color: #4B5563; flex: 0 0 auto; }
.sb-brief .sb-row-v { font-weight: 700; text-align: right; }
/* Long values (regulation prose) read better stacked and left-aligned than
   squeezed into a right-aligned column. */
.sb-brief .sb-row.sb-row-stack { flex-direction: column; align-items: flex-start; gap: 1pt; }
.sb-brief .sb-row.sb-row-stack .sb-row-l { flex: none; }
.sb-brief .sb-row.sb-row-stack .sb-row-v { text-align: left; font-weight: 500; }
.sb-brief .sb-callout {
    margin-top: 4pt; padding: 5pt 7pt; border: 1px solid #D1D5DB; border-left: 3px solid #B45309;
    background: #FFFBEB; font-size: 8pt; border-radius: 0 5pt 5pt 0;
}
.sb-brief .sb-finenote { font-size: 7.3pt; color: #4B5563; margin: 3pt 0 0; }
.sb-brief .sb-links .sb-link-row { font-size: 8pt; margin: 1.5pt 0; word-break: break-all; }
.sb-brief .sb-links .sb-link-row span { font-weight: 700; color: #4B5563; }
.sb-brief .sb-rank-list { margin: 0; padding-left: 14pt; font-size: 8pt; }
.sb-brief .sb-rank-list li { margin: 1.5pt 0; }
.sb-brief .sb-prepared {
    padding-top: 6pt; border-top: 1px solid #D1D5DB; font-size: 8.5pt; color: #374151;
}
.sb-brief .sb-foot { font-size: 6.8pt; color: #6B7280; line-height: 1.4; }
.sb-brief .sb-foot p { margin: 1.5pt 0; }
.sb-brief .sb-foot .sb-attrib { font-style: italic; }

@media print {
    body > *:not(#sb-print-root) { display: none !important; }
    html, body { background: #fff !important; }
    #sb-print-root { display: block !important; position: static; margin: 0; padding: 0; }
    @page { margin: 14mm; }
    .sb-brief a { color: inherit; text-decoration: none; }
}