/* ================================================================
   CONTENT PAGES — "research record" layout
   Document header + sections + specimen datasheet sidebar.
   Theme palettes are defined as CSS variables:
     computer (default)  → dark graph-paper canvas, green accent
     garden              → warm cream canvas, leaf-green accent
   ================================================================ */

.content-page-content {
    /* palette: computer */
    --page:        #0a0a10;
    --ink-1:       rgba(238,241,248,0.93);
    --ink-2:       rgba(238,241,248,0.66);
    --ink-3:       rgba(238,241,248,0.45);
    --ink-4:       rgba(238,241,248,0.30);
    --body-ink:    rgba(230,234,242,0.80);
    --line-1:      rgba(255,255,255,0.22);
    --line-2:      rgba(255,255,255,0.11);
    --line-3:      rgba(255,255,255,0.06);
    --panel:       rgba(255,255,255,0.022);
    --panel-2:     rgba(255,255,255,0.05);
    --accent:      #50fa7b;
    --link:        #6ef295;
    --link-line:   rgba(80,250,123,0.35);
    --bad:         #f87171;
    --good:        #50fa7b;
    --fc-domain:    rgba(80,250,123,0.75);
    --fc-mechanism: rgba(167,139,250,0.8);
    --fc-trigger:   rgba(251,146,60,0.8);
    --fc-antidote:  rgba(56,189,248,0.8);

    --serif: 'Crimson Pro', Georgia, 'Times New Roman', serif;
    --sans:  'Inter', 'Segoe UI', -apple-system, sans-serif;
    --mono:  'IBM Plex Mono', 'Cascadia Code', Consolas, monospace;

    background-color: var(--page);
    background-image:
        linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px);
    background-size: 36px 36px;
    color: var(--body-ink);
    font-family: var(--sans);
    padding-top: 54px;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* palette: garden */
html:not([data-theme="dark"]) .content-page-content {
    --page:        #faf2e4;
    --ink-1:       #241b16;
    --ink-2:       #52463b;
    --ink-3:       #7b6d61;
    --ink-4:       #a2907c;
    --body-ink:    #37291f;
    --line-1:      rgba(71,57,45,0.38);
    --line-2:      rgba(71,57,45,0.18);
    --line-3:      rgba(71,57,45,0.10);
    --panel:       rgba(255,252,245,0.6);
    --panel-2:     rgba(255,252,245,0.95);
    --accent:      #2f7d56;
    --link:        #1f6b46;
    --link-line:   rgba(47,125,86,0.4);
    --bad:         #b3403a;
    --good:        #2f7d56;
    --fc-domain:    #2f7d56;
    --fc-mechanism: #7c5cbf;
    --fc-trigger:   #c2711d;
    --fc-antidote:  #22779e;

    background-color: var(--page);
    background-image:
        linear-gradient(rgba(71,57,45,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(71,57,45,0.05) 1px, transparent 1px),
        radial-gradient(circle at 16% 0%, rgba(255,184,77,0.18), transparent 24rem),
        linear-gradient(180deg, #fff8eb 0%, #f6efe3 55%, #efe0c9 100%);
    background-size: 36px 36px, 36px 36px, auto, auto;
    color: var(--body-ink);
}

/* ---- base text & links ---------------------------------------- */

.content-page-content a,
.content-page-content a:link,
.content-page-content a:visited {
    color: var(--link);
    text-decoration: underline;
    text-decoration-color: var(--link-line);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.15s, text-decoration-color 0.15s;
}
.content-page-content a:hover {
    color: var(--accent);
    text-decoration-color: currentColor;
}

.content-page-content h1,
.content-page-content h2,
.content-page-content h3,
.content-page-content h4 {
    border: none !important;
    background: none !important;
}

/* keep the article column from inheriting leftover .site-content width */
.content-page-content .box,
.content-page-content .site-content {
    background: transparent !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

.tb-content-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 60px 36px 96px;
}

/* collapse the gap between the article container and the
   related-specimens container that follows it */
.site-content > .tb-content-inner + .tb-content-inner {
    padding-top: 0;
}

/* ================================================================
   DOCUMENT HEADER
   ================================================================ */

.tb-doc-head {
    padding: 18px 0 34px;
    border-bottom: 2px solid var(--line-1);
    margin-bottom: 12px;
}

.tb-doc-kicker {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-3);
    line-height: 1;
    margin-bottom: 20px;
}

.tb-doc-kicker-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cat, var(--accent));
    flex-shrink: 0;
}

.tb-doc-kicker-sep { color: var(--ink-4); }

.content-page-content a.tb-doc-cat,
.content-page-content a.tb-doc-cat:link,
.content-page-content a.tb-doc-cat:visited {
    color: var(--ink-2);
    text-decoration: none;
    margin-bottom: 0 !important;
    line-height: 1;
}
.content-page-content a.tb-doc-cat:hover {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: var(--link-line);
}

.tb-doc-cat,
.tb-doc-ref,
.tb-doc-kicker-sep {
    line-height: 1;
}

.tb-doc-ref { color: var(--ink-4); }

.tb-doc-title {
    font-family: var(--serif);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.005em;
    color: var(--ink-1);
    margin: 0 0 16px;
    max-width: 24ch;
}

.tb-doc-abstract {
    font-size: 18.5px;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 0;
    max-width: 60ch;
}

/* ================================================================
   TWO-COLUMN DOCUMENT GRID
   ================================================================ */

.tb-doc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 12px 68px;
    align-items: start;
}

.tb-doc-main { min-width: 0; }

.tb-doc-aside {
    padding-top: 34px;
}

@media (min-height: 900px) {
    .tb-doc-aside {
        position: sticky;
        top: 62px;
    }
}

/* ================================================================
   SECTIONS — numbered, rule-separated
   ================================================================ */

.tb-sec {
    border-top: 1px solid var(--line-2);
    padding: 30px 0 14px;
}

.tb-doc-main .tb-sec:first-child {
    border-top: none;
    padding-top: 34px;
}

.tb-sec-h {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 18px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-1);
}

.tb-sec-body {
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--body-ink);
    max-width: 66ch;
}

.tb-sec-body p {
    margin: 0 0 15px;
}
.tb-sec-body p:last-child { margin-bottom: 0; }

.tb-sec-body b,
.tb-sec-body strong {
    font-weight: 600;
    color: var(--ink-1);
}

.tb-sec-body ul {
    list-style: none;
    margin: 2px 0 16px;
    padding: 0 0 15px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.tb-sec-body ul:last-child { margin-bottom: 0; }

.tb-sec-body li {
    position: relative;
    padding-left: 22px;
    line-height: 1.65;
}

.tb-sec-body li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 10px;
    height: 2px;
    background: var(--cat, var(--accent));
    opacity: 0.85;
}

/* Related thinking bugs: circle colored by linked bug's category (--rc) */
.tb-sec--related .tb-sec-body li::before {
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rc, var(--cat, var(--accent)));
    opacity: 0.9;
}

/* ---- reframing example: original vs reframed ------------------- */

/* Scene labels (<p><b>Chase</b></p>) sit tight against the card below
   when vertical margins collapse - use padding so the gap holds. */
.tb-sec-body > p:has(+ .tb-reframe) {
    margin: 28px 0 0;
    padding-bottom: 12px;
}
/* First scene label after the intro paragraph */
.tb-sec-body > p:not(:has(+ .tb-reframe)) + p:has(+ .tb-reframe) {
    margin-top: 18px;
}

.tb-reframe {
    margin: 0 0 6px;
    border: 1px solid var(--line-2);
    background: var(--panel);
}
.tb-sec-body > p + .tb-reframe {
    margin-top: 0;
}
.tb-reframe:last-child { margin-bottom: 0; }

.tb-reframe-row {
    padding: 15px 18px 16px;
    border-left: 2px solid var(--bad);
}

.tb-reframe-row--balanced {
    border-left-color: var(--good);
    border-top: 1px dashed var(--line-2);
}

.tb-reframe-tag {
    display: block;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 7px;
    color: var(--bad);
}
.tb-reframe-row--balanced .tb-reframe-tag { color: var(--good); }

.tb-reframe-row p {
    margin: 0 !important;
    font-size: 15px;
    line-height: 1.65;
    font-style: italic;
    color: var(--ink-2);
}
.tb-reframe-row--balanced p { color: var(--body-ink); }

.tb-reframe-app-note {
    margin: 22px 0 0 !important;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-3);
}
.tb-reframe-app-note a {
    color: var(--link);
}

/* Extra air before the next section rule (Related Thinking Bugs, etc.) */
.tb-sec:has(.tb-reframe-app-note) {
    padding-bottom: 32px;
}

/* ================================================================
   DATASHEET SIDEBAR
   ================================================================ */

.tb-datasheet {
    border: 1px solid var(--line-2);
    background: var(--panel);
    border-radius: 2px;
}

/* specimen plate */
.tb-plate {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    border-bottom: 1px solid var(--line-2);
    background-image:
        linear-gradient(var(--line-3) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-3) 1px, transparent 1px);
    background-size: 14px 14px;
    background-position: center center;
}

.tb-plate::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid var(--line-2);
    pointer-events: none;
}

.tb-plate-id {
    position: absolute;
    top: 13px;
    right: 15px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* data rows */
.tb-data { margin: 0; }

.tb-data-row {
    padding: 13px 18px 14px;
    border-bottom: 1px solid var(--line-3);
}

.tb-data-row dt {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 7px;
}

.tb-data-row dd {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-1);
    line-height: 1.45;
}

/* harm index */
.tb-harm-read {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.tb-harm-num {
    font-family: var(--mono);
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    color: var(--tier, var(--accent));
}

.tb-harm-max {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 400;
    color: var(--ink-4);
}

.tb-harm-tier {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid var(--tier, var(--accent));
    color: var(--tier, var(--accent));
    border-radius: 2px;
}

.tb-harm-meter {
    display: block;
    position: relative;
    height: 6px;
    margin-top: 11px;
    background: var(--line-3);
}

.tb-harm-meter-fill {
    display: block;
    height: 100%;
    background: var(--tier, var(--accent));
    opacity: 0.9;
}

/* quartile ticks carved out of the meter */
.tb-harm-meter::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent calc(25% - 2px),
        var(--page) calc(25% - 2px),
        var(--page) 25%
    );
    pointer-events: none;
}

/* tier colors */
.content-page-content .harm-severe   { --tier: #ef4444; }
.content-page-content .harm-high     { --tier: #f97316; }
.content-page-content .harm-moderate { --tier: #f59e0b; }
.content-page-content .harm-mild     { --tier: #a3e635; }
.content-page-content .harm-low      { --tier: #50fa7b; }

html:not([data-theme="dark"]) .content-page-content .harm-severe   { --tier: #b91c1c; }
html:not([data-theme="dark"]) .content-page-content .harm-high     { --tier: #c2410c; }
html:not([data-theme="dark"]) .content-page-content .harm-moderate { --tier: #a16207; }
html:not([data-theme="dark"]) .content-page-content .harm-mild     { --tier: #4d7c0f; }
html:not([data-theme="dark"]) .content-page-content .harm-low      { --tier: #087a35; }

/* labeled blocks: trait profile, field tags */
.tb-data-block {
    padding: 15px 18px 18px;
    border-bottom: 1px solid var(--line-3);
}
.tb-datasheet > :last-child { border-bottom: none; }
.tb-datasheet > .tb-data-block:last-child {
    padding-bottom: 28px;
}

.tb-data-heading {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 13px;
}

/* trait rows */
.tb-traits {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tb-trait {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 10px;
    align-items: baseline;
}

.tb-trait-name {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: 0.01em;
}

.tb-trait-val {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-2);
}

.tb-trait-track {
    grid-column: 1 / -1;
    display: block;
    height: 3px;
    background: var(--line-3);
    overflow: hidden;
}

.tb-trait-fill {
    display: block;
    height: 100%;
    background: var(--cat, var(--accent));
    opacity: 0.85;
}

/* field tags */
.tb-datasheet .tb-bug-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 6px;
}

.content-page-content .tb-tag,
.content-page-content a.tb-tag,
.content-page-content a.tb-tag:link,
.content-page-content a.tb-tag:visited {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 8px;
    border: 1px solid var(--line-2);
    border-left: 2px solid var(--fc, var(--line-1));
    border-radius: 2px;
    background: transparent;
    color: var(--ink-3);
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}

.content-page-content a.tb-tag:hover {
    color: var(--ink-1);
    border-color: var(--line-1);
    border-left-color: var(--fc, var(--line-1));
    text-decoration: none;
}

.content-page-content .tb-tag--umbrella { --fc: var(--fc-domain); }
.content-page-content .tb-tag--problem  { --fc: var(--fc-trigger); }
.content-page-content .tb-tag--life     { --fc: var(--fc-antidote); }

/* ================================================================
   GENERIC PAGES (About, etc.)
   ================================================================ */

.tb-generic-page {
    max-width: 720px;
    font-size: 16.5px;
    line-height: 1.75;
}

.tb-generic-page h1:has(+ .tb-about-wordmark) {
    margin-bottom: 22px;
}

.tb-generic-page .tb-about-wordmark {
    display: block;
    width: min(100%, 220px);
    height: auto;
    margin: 0 0 32px;
    filter: invert(1);
    opacity: 0.92;
}

html:not([data-theme="dark"]) .tb-generic-page .tb-about-wordmark {
    filter: none;
    opacity: 1;
}

.tb-generic-page h1 {
    font-family: var(--serif);
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 600;
    line-height: 1.08;
    color: var(--ink-1);
    margin: 0 0 26px;
    padding-bottom: 24px;
    border-bottom: 2px solid var(--line-1) !important;
}

.tb-generic-page h2 {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-1);
    margin: 38px 0 16px;
    padding-top: 26px;
    border-top: 1px solid var(--line-2) !important;
}

.tb-generic-page p {
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--body-ink);
    margin: 0 0 16px;
    max-width: 68ch;
}

.tb-generic-page strong { color: var(--ink-1); font-weight: 600; }

.tb-generic-page .tb-ai-stats {
    width: 100%;
    max-width: 68ch;
    border-collapse: collapse;
    margin: 8px 0 28px;
    font-size: 14.5px;
    line-height: 1.4;
}

.tb-generic-page .tb-ai-stats caption {
    caption-side: bottom;
    text-align: left;
    padding-top: 12px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--ink-3);
}

.tb-generic-page .tb-ai-stats th,
.tb-generic-page .tb-ai-stats td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--line-3);
    vertical-align: baseline;
}

.tb-generic-page .tb-ai-stats thead th {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
    border-bottom: 1px solid var(--line-1);
    padding-top: 4px;
    padding-bottom: 10px;
}

.tb-generic-page .tb-ai-stats tbody th {
    font-weight: 600;
    color: var(--ink-1);
    text-align: left;
}

.tb-generic-page .tb-ai-stats td {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--ink-1);
}

.tb-generic-page .tb-ai-stats thead th:not(:first-child) {
    text-align: right;
}

/* ================================================================
   CATEGORY PAGES — specimen index
   ================================================================ */

.tb-cat-intro {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-2);
    margin-top: 2px;
}

/* Tag hubs — reuse specimen index, distinct chrome from family pages */
.tb-tag-page .tb-doc-cat {
    letter-spacing: 0.12em;
}
.tb-tag-intro {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-2);
    margin: 10px 0 0;
    max-width: 68ch;
}
.tb-tag-intro p { margin: 0 0 0.85em; }
.tb-tag-intro p:last-child { margin-bottom: 0; }
.tb-tag-see-also {
    margin: 14px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-3);
    max-width: 68ch;
}
.tb-tag-see-also a { color: var(--ink-1); text-decoration: underline; text-underline-offset: 2px; }
.tb-tag-list-title {
    margin: 28px 0 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-family: var(--mono);
}
.tb-tag-empty {
    margin: 24px 14px;
    color: var(--ink-3);
    font-size: 14px;
}
.tb-tag-page .tb-index-cols,
.tb-tag-page .tb-index-row {
    grid-template-columns: 56px minmax(0, 1fr) 150px 72px;
}

.tb-tags-stats {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--ink-3);
    font-family: var(--mono);
    letter-spacing: 0.02em;
}
.tb-tags-section {
    margin-top: 28px;
}
.tb-tags-section-title {
    margin: 0 0 8px;
    padding: 0 14px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.tb-tags-list {
    border-top: 1px solid var(--line-1);
}
.content-page-content a.tb-tags-row,
.content-page-content a.tb-tags-row:link,
.content-page-content a.tb-tags-row:visited {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border-bottom: 1px solid var(--line-3);
    color: inherit;
    text-decoration: none;
    transition: background 0.15s;
}
.content-page-content a.tb-tags-row:hover {
    background: var(--surface-2, rgba(127,127,127,0.06));
    text-decoration: none;
}
.tb-tags-row-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.tb-tags-row-label {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-1);
    line-height: 1.25;
}
.tb-tags-row-def {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink-3);
}
.tb-tags-row-count {
    text-align: right;
    font-family: var(--mono);
}
.tb-tags-row-num {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: var(--ink-1);
    line-height: 1.1;
}
.tb-tags-row-unit {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.content-page-content a.tb-doc-cat {
    color: inherit;
    text-decoration: none;
}
.content-page-content a.tb-doc-cat:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tb-index { margin-top: 8px; }

.tb-index-cols,
.tb-index-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 150px 48px;
    gap: 0 20px;
    align-items: center;
}

.tb-index-cols {
    padding: 20px 14px 10px;
    border-bottom: 1px solid var(--line-1);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
}

.tb-index-cols .tb-index-col-name { grid-column: 1 / 3; }
.tb-index-cols .tb-index-col-id { text-align: right; }

.content-page-content a.tb-index-row,
.content-page-content a.tb-index-row:link,
.content-page-content a.tb-index-row:visited {
    padding: 15px 14px;
    border-bottom: 1px solid var(--line-3);
    color: inherit;
    text-decoration: none;
    transition: background 0.15s;
}

.content-page-content a.tb-index-row:hover {
    background: var(--panel-2);
    text-decoration: none;
}

.tb-index-avatar .tb-bug-avatar {
    width: 52px;
    height: 52px;
    display: block;
}

.tb-index-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-1);
    line-height: 1.3;
}

.tb-index-desc {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-3);
    margin: 3px 0 0;
}

.tb-index-harm { min-width: 0; }

.tb-index-harm-num {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--tier, var(--ink-2));
    display: block;
    margin-bottom: 6px;
}

.tb-index-harm .tb-harm-meter { margin-top: 0; height: 4px; }

.tb-index-abbr {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-4);
    text-align: right;
}

/* ================================================================
   RELATED SPECIMENS
   ================================================================ */

.tb-related {
    border-top: 2px solid var(--line-1);
    padding-top: 26px;
}

.tb-related .tb-label {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 18px;
}

.tb-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 8px;
}

.content-page-content .tb-related-link,
.content-page-content a.tb-related-link,
.content-page-content a.tb-related-link:link,
.content-page-content a.tb-related-link:visited {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line-3);
    border-radius: 2px;
    background: var(--panel);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

.content-page-content a.tb-related-link:hover {
    border-color: var(--line-1);
    background: var(--panel-2);
    text-decoration: none;
}

.tb-related-abbr {
    width: 38px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    color: var(--ink-3);
    background: transparent;
}

.tb-related-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    line-height: 1.3;
}

.content-page-content a.tb-related-link:hover .tb-related-name {
    color: var(--ink-1);
}

.tb-related-link.is-current {
    border-color: var(--rc, var(--accent));
    pointer-events: none;
}

.tb-related-link.is-current .tb-related-abbr {
    border-color: var(--rc, var(--accent));
    color: var(--rc, var(--accent));
}

.tb-related-link.is-current .tb-related-name {
    color: var(--ink-1);
}

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

@media (max-width: 1000px) {
    .tb-doc-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .tb-doc-aside {
        order: -1;
        position: static;
        padding-top: 30px;
        max-width: 460px;
    }
    .tb-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .tb-content-inner {
        padding: 40px 20px 72px;
    }
    .tb-doc-head { padding-bottom: 26px; }
    .tb-doc-abstract { font-size: 17px; }
    .tb-sec { padding: 26px 0 12px; }
    .tb-sec-body { font-size: 16px; line-height: 1.72; }
    .tb-doc-aside { max-width: none; }

    .tb-index-cols { display: none; }
    .tb-index { border-top: 1px solid var(--line-1); }
    .tb-index-cols,
    .tb-index-row,
    .tb-tag-page .tb-index-cols,
    .tb-tag-page .tb-index-row {
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-areas:
            "avatar main"
            "avatar meta";
        gap: 6px 16px;
    }
    .tb-index-avatar { grid-area: avatar; align-self: start; }
    .tb-index-main { grid-area: main; min-width: 0; }
    .tb-index-harm {
        grid-area: meta;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .tb-index-harm-num { margin-bottom: 0; flex-shrink: 0; }
    .tb-index-harm .tb-harm-meter { flex: 1; max-width: 140px; }
    .tb-index-abbr { display: none; }

    .tb-related-grid { grid-template-columns: 1fr; }

    .tb-tags-list .tb-tags-row,
    .content-page-content a.tb-tags-row,
    .content-page-content a.tb-tags-row:link,
    .content-page-content a.tb-tags-row:visited {
        grid-template-columns: minmax(0, 1fr) 72px;
        gap: 12px;
    }
}

/* ---- Article credits ---- */
.tb-doc-credits {
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid var(--line-3);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.55;
    color: var(--ink-3);
}

.tb-doc-credits-authors {
    margin: 0 0 8px;
}

.tb-doc-credits-label {
    display: inline-block;
    margin-right: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    color: var(--ink-4);
}

.tb-doc-credits-list {
    color: var(--ink-2);
}

.tb-doc-credits-edits {
    margin: 0;
}

.tb-doc-credits-edits > summary {
    cursor: pointer;
    list-style: none;
    color: var(--ink-3);
    user-select: none;
}

.tb-doc-credits-edits > summary::-webkit-details-marker {
    display: none;
}

.tb-doc-credits-edits > summary::before {
    content: '+';
    display: inline-block;
    width: 1em;
    margin-right: 4px;
    color: var(--ink-4);
}

.tb-doc-credits-edits[open] > summary::before {
    content: '–';
}

.tb-doc-credits-edits > summary:hover {
    color: var(--ink-2);
}

.tb-doc-credits-edit-list {
    margin: 10px 0 0;
    padding: 0 0 0 1.1em;
}

.tb-doc-credits-edit-list li {
    margin: 0 0 10px;
}

.tb-doc-credits-edit-list li:last-child {
    margin-bottom: 0;
}

.tb-doc-credits-edit-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    color: var(--ink-2);
}

.tb-doc-credits-edit-author {
    font-weight: 500;
}

.tb-doc-credits-edit-msg {
    display: block;
    margin-top: 2px;
    color: var(--ink-3);
}

/* Sources (verified refs from data/article-references.json) */
.tb-sec--refs .tb-refs {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tb-sec--refs .tb-refs li {
    position: relative;
    padding-left: 1.1em;
    margin-bottom: 0.65em;
    font-size: 0.95em;
    line-height: 1.55;
    color: var(--ink-2);
}
.tb-sec--refs .tb-refs li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cat, var(--accent));
    opacity: 0.55;
}
.tb-sec--refs .tb-refs a {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Compact accountability / AI disclosure */
.tb-article-meta {
    margin: 28px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--line-2);
}
.tb-article-meta p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-3);
}
.tb-article-meta a {
    color: var(--link);
}

/* ---- Social sharing ---- */
.tb-social-share {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--line-2);
    text-align: center;
}

.tb-social-share-text {
    margin: 0 0 16px;
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-2);
}

.tb-social-share-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.content-page-content .tb-share-btn,
.content-page-content a.tb-share-btn,
.content-page-content a.tb-share-btn:link,
.content-page-content a.tb-share-btn:visited,
.content-page-content button.tb-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    background: var(--panel-2);
    color: var(--ink-2);
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    padding: 0;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.content-page-content .tb-share-btn:hover,
.content-page-content .tb-share-btn:focus-visible,
.content-page-content a.tb-share-btn:hover,
.content-page-content a.tb-share-btn:focus-visible {
    text-decoration: none !important;
    outline: none;
}

.tb-share-icon {
    width: 18px;
    height: 18px;
    fill: var(--ink-2);
    transition: fill 0.2s ease;
}

.tb-share-icon path,
.tb-share-icon circle {
    fill: var(--ink-2);
    transition: fill 0.2s ease;
}

.content-page-content .tb-share-btn:hover .tb-share-icon,
.content-page-content .tb-share-btn:focus-visible .tb-share-icon,
.content-page-content .tb-share-btn:hover .tb-share-icon path,
.content-page-content .tb-share-btn:focus-visible .tb-share-icon path,
.content-page-content .tb-share-btn:hover .tb-share-icon circle,
.content-page-content .tb-share-btn:focus-visible .tb-share-icon circle {
    fill: #fff;
}

/* Brand-colored hover (specificity must beat base a/button rules) */
.content-page-content .tb-share-btn--twitter:hover,
.content-page-content .tb-share-btn--twitter:focus-visible,
.content-page-content a.tb-share-btn--twitter:hover,
.content-page-content a.tb-share-btn--twitter:focus-visible {
    background: #1DA1F2;
    border-color: #1DA1F2;
    color: #fff;
}

.content-page-content .tb-share-btn--facebook:hover,
.content-page-content .tb-share-btn--facebook:focus-visible,
.content-page-content a.tb-share-btn--facebook:hover,
.content-page-content a.tb-share-btn--facebook:focus-visible {
    background: #4267B2;
    border-color: #4267B2;
    color: #fff;
}

.content-page-content .tb-share-btn--linkedin:hover,
.content-page-content .tb-share-btn--linkedin:focus-visible,
.content-page-content a.tb-share-btn--linkedin:hover,
.content-page-content a.tb-share-btn--linkedin:focus-visible {
    background: #0077B5;
    border-color: #0077B5;
    color: #fff;
}

.content-page-content .tb-share-btn--reddit:hover,
.content-page-content .tb-share-btn--reddit:focus-visible,
.content-page-content a.tb-share-btn--reddit:hover,
.content-page-content a.tb-share-btn--reddit:focus-visible {
    background: #FF4500;
    border-color: #FF4500;
    color: #fff;
}

.content-page-content .tb-share-btn--whatsapp:hover,
.content-page-content .tb-share-btn--whatsapp:focus-visible,
.content-page-content a.tb-share-btn--whatsapp:hover,
.content-page-content a.tb-share-btn--whatsapp:focus-visible {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
}

.content-page-content .tb-share-btn--email:hover,
.content-page-content .tb-share-btn--email:focus-visible,
.content-page-content a.tb-share-btn--email:hover,
.content-page-content a.tb-share-btn--email:focus-visible {
    background: #EA4335;
    border-color: #EA4335;
    color: #fff;
}

.content-page-content .tb-share-btn--copy:hover,
.content-page-content .tb-share-btn--copy:focus-visible,
.content-page-content button.tb-share-btn--copy:hover,
.content-page-content button.tb-share-btn--copy:focus-visible {
    background: #6B7280;
    border-color: #6B7280;
    color: #fff;
}

.tb-copy-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink-1);
    color: var(--page);
    padding: 12px 24px;
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 14px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000;
    pointer-events: none;
}

.tb-copy-toast--visible {
    opacity: 1;
    visibility: visible;
}