/* DeepSeek Tools — v2 design system. Designed to stand visibly apart from the
   surrounding article copy: distinct typography, accented header strip, soft
   elevation, animated value updates. */

@keyframes ds-pulse {
    0%   { background-color: #fef3c7; }
    100% { background-color: transparent; }
}

.ds-tool {
    /* Palette */
    --ds-bg:           #ffffff;
    --ds-surface:      #fafaf7;
    --ds-fg:           #0f172a;
    --ds-muted:        #475569;
    --ds-line:         #e5e7eb;
    --ds-line-strong:  #cbd5e1;
    --ds-accent-flash: #2a8a9e;
    --ds-accent-pro:   #d97a1f;
    --ds-accent-slate: #5a6b7d;
    --ds-warn:         #b45309;
    --ds-good:         #15803d;
    --ds-down:         #b91c1c;
    --ds-radius:       14px;

    background: var(--ds-bg);
    color: var(--ds-fg);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    padding: 0;
    margin: 2rem 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.08);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.95rem;
    line-height: 1.55;
    overflow: hidden;
    position: relative;
}

/* Distinct accent strip up top — instantly marks the block as a tool, not body copy. */
.ds-tool::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--ds-accent-flash) 0%, var(--ds-accent-pro) 100%);
}

.ds-tool-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem 0.65rem;
    border-bottom: 1px solid var(--ds-line);
    background: linear-gradient(180deg, #fafaf7 0%, #ffffff 100%);
}
.ds-tool-badge {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: #0f172a;
    color: #fff;
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
    font-weight: 700;
}
.ds-tool-title {
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--ds-fg);
    margin: 0;
    line-height: 1.25;
}
.ds-tool-sub {
    width: 100%;
    color: var(--ds-muted);
    font-size: 0.88rem;
    margin: 0.1rem 0 0;
}
.ds-tool-body {
    padding: 1rem 1.25rem 1.1rem;
}

.ds-tool * { box-sizing: border-box; }

.ds-tool h3.ds-tool-section {
    margin: 1.1rem 0 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ds-fg);
    letter-spacing: 0.01em;
}
.ds-tool h3.ds-tool-section:first-child { margin-top: 0; }

.ds-tool label {
    display: block;
    font-weight: 600;
    margin-top: 0.7rem;
    color: var(--ds-fg);
    font-size: 0.88rem;
}
.ds-tool label small {
    font-weight: 400;
    color: var(--ds-muted);
    margin-left: 0.25rem;
}

.ds-tool input[type="text"],
.ds-tool input[type="number"],
.ds-tool input[type="password"],
.ds-tool input[type="search"],
.ds-tool textarea,
.ds-tool select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--ds-line-strong);
    border-radius: 8px;
    font: inherit;
    background: #fff;
    color: var(--ds-fg);
    margin-top: 0.3rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ds-tool input:focus,
.ds-tool textarea:focus,
.ds-tool select:focus {
    outline: 0;
    border-color: var(--ds-accent-flash);
    box-shadow: 0 0 0 3px rgba(42, 138, 158, 0.18);
}
.ds-tool textarea {
    min-height: 120px;
    resize: vertical;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.88rem;
    line-height: 1.5;
}
.ds-tool input[type="range"] { width: 100%; accent-color: var(--ds-accent-flash); }
.ds-tool input[type="checkbox"] { width: auto; accent-color: var(--ds-accent-flash); margin-right: 0.4rem; }

.ds-tool .ds-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.4rem;
}
.ds-tool .ds-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 0.4rem;
}
.ds-tool .ds-row-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 0.4rem;
}
@media (max-width: 640px) {
    .ds-tool .ds-row,
    .ds-tool .ds-row-3,
    .ds-tool .ds-row-4 { grid-template-columns: 1fr; }
}

.ds-tool .ds-pill {
    display: inline-block;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #fff;
    margin-right: 0.35rem;
    letter-spacing: 0.02em;
}
.ds-tool .ds-pill-flash { background: var(--ds-accent-flash); }
.ds-tool .ds-pill-pro   { background: var(--ds-accent-pro); }
.ds-tool .ds-pill-slate { background: var(--ds-accent-slate); }
.ds-tool .ds-pill-good  { background: var(--ds-good); }
.ds-tool .ds-pill-warn  { background: var(--ds-warn); }
.ds-tool .ds-pill-down  { background: var(--ds-down); }
.ds-tool .ds-pill-outline {
    background: #fff;
    color: var(--ds-fg);
    border: 1px solid var(--ds-line-strong);
}

.ds-tool .ds-out {
    background: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: 10px;
    padding: 0.95rem 1.1rem;
    margin-top: 0.95rem;
}
.ds-tool .ds-out strong { color: var(--ds-fg); }

.ds-tool .ds-out-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.7rem 1rem;
}
.ds-tool .ds-stat { display: flex; flex-direction: column; }
.ds-tool .ds-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ds-muted);
    font-weight: 600;
}
.ds-tool .ds-stat-value {
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--ds-fg);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    margin-top: 0.15rem;
    border-radius: 4px;
    padding: 1px 3px;
    margin-left: -3px;
}
.ds-tool .ds-stat-value.ds-pulse {
    animation: ds-pulse 0.6s ease;
}

.ds-tool .ds-bar {
    height: 10px;
    border-radius: 999px;
    background: var(--ds-line);
    overflow: hidden;
    margin-top: 0.5rem;
    border: 1px solid var(--ds-line);
}
.ds-tool .ds-bar-fill {
    height: 100%;
    background: var(--ds-accent-flash);
    width: 0%;
    transition: width 0.25s ease, background 0.25s ease;
}
.ds-tool .ds-bar-fill.ds-warn { background: var(--ds-warn); }
.ds-tool .ds-bar-fill.ds-bad  { background: var(--ds-down); }

.ds-tool button,
.ds-tool .ds-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    background: var(--ds-fg);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.6rem;
    transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
    text-decoration: none;
}
.ds-tool button:hover,
.ds-tool .ds-btn:hover { background: #1e293b; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18); }
.ds-tool button:active { transform: translateY(1px); }
.ds-tool button:disabled { opacity: 0.6; cursor: not-allowed; }
.ds-tool .ds-btn-secondary {
    background: #fff;
    color: var(--ds-fg);
    border: 1px solid var(--ds-line-strong);
}
.ds-tool .ds-btn-secondary:hover {
    background: #f8fafc;
}
.ds-tool .ds-btn-accent-flash { background: var(--ds-accent-flash); }
.ds-tool .ds-btn-accent-flash:hover { background: #226d7e; }
.ds-tool .ds-btn-accent-pro { background: var(--ds-accent-pro); }
.ds-tool .ds-btn-accent-pro:hover { background: #b25f12; }

.ds-tool pre,
.ds-tool .ds-code {
    background: #0b1220;
    color: #e2e8f0;
    padding: 0.95rem 1.1rem;
    border-radius: 10px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.55;
    overflow: auto;
    white-space: pre;
    margin: 0.7rem 0 0;
    max-height: 360px;
    border: 1px solid #1e293b;
}
.ds-tool .ds-code .tok-key { color: #fbbf24; }
.ds-tool .ds-code .tok-str { color: #86efac; }

.ds-tool .ds-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--ds-line);
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.ds-tool .ds-tab {
    padding: 0.45rem 0.95rem;
    cursor: pointer;
    color: var(--ds-muted);
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: transparent;
    margin: 0;
    font-weight: 600;
    font-size: 0.86rem;
}
.ds-tool .ds-tab:hover { color: var(--ds-fg); background: #f1f5f9; }
.ds-tool .ds-tab.ds-tab-active {
    color: var(--ds-fg);
    background: #fff;
    border-color: var(--ds-line);
    border-bottom-color: #fff;
    margin-bottom: -1px;
}

.ds-tool .ds-tool-foot {
    color: var(--ds-muted);
    font-size: 0.78rem;
    margin: 0.95rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--ds-line);
}
.ds-tool .ds-tool-foot a { color: var(--ds-accent-flash); text-decoration: underline; text-underline-offset: 2px; }

.ds-tool .ds-warn-box {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    margin-top: 0.7rem;
    font-size: 0.88rem;
}
.ds-tool .ds-good-box {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    margin-top: 0.7rem;
    font-size: 0.88rem;
}
.ds-tool .ds-info-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    margin-top: 0.7rem;
    font-size: 0.88rem;
}

.ds-tool .ds-template {
    border: 1px solid var(--ds-line);
    border-radius: 10px;
    padding: 0.95rem 1.1rem;
    margin-top: 0.85rem;
    background: #fff;
    transition: border-color 0.15s ease;
}
.ds-tool .ds-template:hover { border-color: var(--ds-line-strong); }
.ds-tool .ds-template-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}
.ds-tool .ds-template-title { font-weight: 700; color: var(--ds-fg); }
.ds-tool .ds-template-cat {
    font-size: 0.7rem;
    color: var(--ds-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    background: #f1f5f9;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
}
.ds-tool .ds-template-tags {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 0.3rem;
}
.ds-tool .ds-template-tag {
    font-size: 0.72rem;
    color: var(--ds-muted);
    background: #f8fafc;
    border: 1px solid var(--ds-line);
    padding: 0.05rem 0.45rem;
    border-radius: 4px;
}
.ds-tool .ds-template-body {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    background: var(--ds-surface);
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    white-space: pre-wrap;
    color: var(--ds-fg);
    border: 1px solid var(--ds-line);
    overflow: auto;
    max-height: 220px;
}

.ds-tool .ds-flex { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ds-tool .ds-spacer { flex: 1; }
.ds-tool small { color: var(--ds-muted); }

.ds-tool .ds-status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    margin-right: 0.45rem;
    background: #94a3b8;
    vertical-align: middle;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.18);
}
.ds-tool .ds-status-dot.ds-ok    { background: var(--ds-good); box-shadow: 0 0 0 2px rgba(21, 128, 61, 0.18); }
.ds-tool .ds-status-dot.ds-warn  { background: var(--ds-warn); box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.18); }
.ds-tool .ds-status-dot.ds-down  { background: var(--ds-down); box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.18); }

/* Status checker — components grid + uptime bars */
.ds-tool .ds-component-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--ds-line);
    border-radius: 8px;
    margin-top: 0.5rem;
    background: #fff;
}
.ds-tool .ds-component-name { font-weight: 600; color: var(--ds-fg); flex: 1; }
.ds-tool .ds-component-state { font-size: 0.85rem; color: var(--ds-muted); }
.ds-tool .ds-uptime-grid {
    display: grid;
    grid-template-columns: repeat(90, 1fr);
    gap: 1px;
    margin-top: 0.6rem;
    height: 24px;
}
.ds-tool .ds-uptime-cell {
    background: var(--ds-good);
    border-radius: 2px;
    transition: transform 0.1s ease;
}
.ds-tool .ds-uptime-cell.ds-warn { background: var(--ds-warn); }
.ds-tool .ds-uptime-cell.ds-down { background: var(--ds-down); }
.ds-tool .ds-uptime-cell.ds-unknown { background: var(--ds-line); }
.ds-tool .ds-uptime-cell:hover { transform: scaleY(1.4); }

.ds-tool .ds-incident {
    border-left: 3px solid var(--ds-warn);
    padding: 0.55rem 0.85rem;
    background: var(--ds-surface);
    margin-top: 0.5rem;
    border-radius: 0 8px 8px 0;
}
.ds-tool .ds-incident.ds-incident-major { border-left-color: var(--ds-down); }
.ds-tool .ds-incident.ds-incident-resolved { border-left-color: var(--ds-good); opacity: 0.85; }
.ds-tool .ds-incident-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: baseline;
}
.ds-tool .ds-incident-title { font-weight: 600; color: var(--ds-fg); }
.ds-tool .ds-incident-when { font-size: 0.78rem; color: var(--ds-muted); }
.ds-tool .ds-incident-body { color: var(--ds-muted); font-size: 0.88rem; margin-top: 0.25rem; }

/* Comparison-tool benchmark bars */
.ds-tool .ds-bench-row {
    display: grid;
    grid-template-columns: 140px 1fr 60px;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    font-size: 0.85rem;
}
.ds-tool .ds-bench-label { color: var(--ds-fg); font-weight: 500; }
.ds-tool .ds-bench-bar {
    height: 14px;
    background: var(--ds-line);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.ds-tool .ds-bench-bar-fill {
    height: 100%;
    background: var(--ds-accent-flash);
    border-radius: 999px;
}
.ds-tool .ds-bench-bar-fill.ds-bench-pro { background: var(--ds-accent-pro); }
.ds-tool .ds-bench-bar-fill.ds-bench-comp { background: var(--ds-accent-slate); }
.ds-tool .ds-bench-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--ds-fg); font-weight: 600; }

/* GPU matrix table for hardware calc */
.ds-tool .ds-gpu-grid {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.4rem 0.85rem;
    margin-top: 0.65rem;
    font-size: 0.86rem;
    align-items: baseline;
}
.ds-tool .ds-gpu-grid > div { padding: 0.4rem 0.7rem; border-radius: 6px; border: 1px solid var(--ds-line); background: #fff; }
.ds-tool .ds-gpu-grid > div.ds-fits { background: #f0fdf4; border-color: #bbf7d0; }
.ds-tool .ds-gpu-grid > div.ds-tight { background: #fff7ed; border-color: #fed7aa; }
.ds-tool .ds-gpu-grid > div.ds-nope { background: #fef2f2; border-color: #fecaca; opacity: 0.85; }
.ds-tool .ds-gpu-name { font-weight: 600; color: var(--ds-fg); }
.ds-tool .ds-gpu-vram { color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.ds-tool .ds-gpu-verdict { font-weight: 600; text-align: right; }

/* Compact help / FAQ disclosure */
.ds-tool details.ds-faq {
    margin-top: 0.75rem;
    border: 1px solid var(--ds-line);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.ds-tool details.ds-faq summary {
    cursor: pointer;
    padding: 0.65rem 0.95rem;
    font-weight: 600;
    color: var(--ds-fg);
    list-style: none;
}
.ds-tool details.ds-faq summary::-webkit-details-marker { display: none; }
.ds-tool details.ds-faq summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 0.5rem;
    transition: transform 0.15s ease;
    font-size: 0.7rem;
    color: var(--ds-muted);
}
.ds-tool details.ds-faq[open] summary::before { transform: rotate(90deg); }
.ds-tool details.ds-faq .ds-faq-body { padding: 0 0.95rem 0.85rem; color: var(--ds-fg); font-size: 0.9rem; }

/* In-template placeholder highlighting */
.ds-tool .ds-tmpl-ph { color: var(--ds-accent-pro); font-weight: 700; }

/* Hide JSON-LD output (it's only for crawlers) */
.ds-tool-jsonld { display: none; }

/* Search/filter bar in templates */
.ds-tool .ds-search {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.4rem;
}
.ds-tool .ds-chip {
    padding: 0.18rem 0.65rem;
    border: 1px solid var(--ds-line-strong);
    background: #fff;
    border-radius: 999px;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--ds-muted);
    font-weight: 600;
    margin-top: 0;
    transition: all 0.15s ease;
}
.ds-tool .ds-chip:hover { color: var(--ds-fg); }
.ds-tool .ds-chip.ds-chip-active {
    background: var(--ds-fg);
    color: #fff;
    border-color: var(--ds-fg);
}

/* Side-by-side comparison tables */
.ds-tool table.ds-compare {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.7rem;
    font-size: 0.88rem;
}
.ds-tool table.ds-compare th,
.ds-tool table.ds-compare td {
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--ds-line);
    text-align: left;
}
.ds-tool table.ds-compare th {
    font-weight: 700;
    color: var(--ds-fg);
    background: var(--ds-surface);
    border-bottom: 2px solid var(--ds-line-strong);
}
.ds-tool table.ds-compare tr:last-child td { border-bottom: 0; }
.ds-tool table.ds-compare td.ds-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.ds-tool table.ds-compare .ds-best {
    background: rgba(21, 128, 61, 0.06);
}

/* Currency selector inline */
.ds-tool select.ds-currency {
    width: auto;
    display: inline-block;
    margin: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

/* Print - keep tools readable */
@media print {
    .ds-tool { box-shadow: none; border: 1px solid #cbd5e1; break-inside: avoid; }
    .ds-tool button, .ds-tool .ds-btn { display: none; }
}


/* ──────────────────────────────────────────────────────────────────
 * Fact Box — sidebar variant. Sits in the left sidebar above the ToC,
 * matching the ToC card's visual language (white card, soft border,
 * stacked key/value), with a teal-to-amber accent stripe on top.
 * ──────────────────────────────────────────────────────────────── */

.ds-side {
    /* Block layout: factbox flows above ToC, ToC sticks during scroll. */
    display: block;
    align-self: start;
}
.ds-side .ds-factbox + .ds-toc-sidebar {
    margin-top: 14px;
}
.ds-side .ds-toc-sidebar {
    /* Restore the ToC's own sticky behaviour inside the new wrapper. */
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}

.ds-factbox {
    --fb-accent:    #0D7377;
    --fb-accent-2:  #d97a1f;
    --fb-line:      #E2E8F0;
    --fb-line-soft: #F1F5F9;
    --fb-fg:        #1E293B;
    --fb-fg-2:      #334155;
    --fb-muted:     #64748B;
    --fb-card:      #FFFFFF;
    background: var(--fb-card);
    color: var(--fb-fg);
    border: 1px solid var(--fb-line);
    border-radius: 14px;
    padding: 18px 20px 14px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    position: relative;
    overflow: hidden;
}

/* Accent stripe across the top */
.ds-factbox::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--fb-accent) 0%, var(--fb-accent-2) 100%);
}

.ds-factbox * { box-sizing: border-box; }

.ds-factbox-head {
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--fb-line-soft);
}

.ds-factbox-eyebrow {
    color: var(--fb-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.ds-factbox-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    color: var(--fb-fg);
}

.ds-factbox-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
}

/* Stacked key/value — fits the narrow sidebar cleanly */
.ds-fact-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    border: none;
}
.ds-fact-row + .ds-fact-row { border: none; }

.ds-fact-key {
    color: var(--fb-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

.ds-fact-val {
    color: var(--fb-fg-2);
    font-size: 13.5px;
    line-height: 1.45;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.ds-factbox-tiers {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
}
.ds-factbox-tiers li {
    margin: 2px 0;
    font-size: 13px;
    line-height: 1.4;
}
.ds-factbox-tiers strong {
    color: var(--fb-accent);
}

.ds-factbox-note {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--fb-line-soft);
    color: var(--fb-muted);
    font-size: 11.5px;
    line-height: 1.45;
    font-style: italic;
}
.ds-factbox-note em { font-style: italic; }

.ds-factbox-foot {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--fb-line-soft);
    color: var(--fb-muted);
    font-size: 11px;
}
.ds-factbox-source {
    color: var(--fb-accent);
    text-decoration: none;
    font-weight: 600;
}
.ds-factbox-source:hover { text-decoration: underline; }

@media (max-width: 980px) {
    .ds-side .ds-toc-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }
}


/* ──────────────────────────────────────────────────────────────────
 * Sources & Methodology — at the end of each article.
 * ──────────────────────────────────────────────────────────────── */

.ds-sources {
    --src-fg:        #1E293B;
    --src-fg-2:      #334155;
    --src-muted:     #64748B;
    --src-line:      #E2E8F0;
    --src-line-soft: #F1F5F9;
    --src-card:      #FFFFFF;
    --src-surface:   #FAFAF7;
    --src-accent:    #0D7377;
    --src-accent-2:  #d97a1f;

    margin: 36px 0 12px;
    padding: 24px 26px;
    background: var(--src-surface);
    border: 1px solid var(--src-line);
    border-radius: 14px;
    color: var(--src-fg);
    font-size: 15px;
    line-height: 1.6;
    scroll-margin-top: 100px; /* anchor target offset for the "View sources" link */
}
.ds-sources * { box-sizing: border-box; }

.ds-sources-h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--src-fg);
}
.ds-sources-meta {
    margin: 0 0 18px;
    color: var(--src-muted);
    font-size: 14px;
}
.ds-sources-meta strong { color: var(--src-fg-2); font-weight: 700; }

.ds-sources-h3 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--src-muted);
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--src-line-soft);
}

.ds-sources-bucket { margin-bottom: 14px; }
.ds-sources-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.ds-source-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "badge name"
        "badge used"
        "badge checked";
    column-gap: 12px;
    row-gap: 1px;
    background: var(--src-card);
    border: 1px solid var(--src-line);
    border-radius: 10px;
    padding: 12px 14px;
}

.ds-source-badge {
    grid-area: badge;
    display: inline-block;
    align-self: start;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--src-accent);
    color: #ffffff;
    white-space: nowrap;
    margin-top: 2px;
}
/* Variants per badge type */
.ds-badge-pricing,
.ds-badge-pricing-snapshot { background: var(--src-accent-2); }
.ds-badge-benchmark        { background: #5a6b7d; }
.ds-badge-news             { background: #0F766E; }
.ds-badge-analysis         { background: #6b21a8; }
.ds-badge-repository       { background: #1f2937; }
.ds-badge-model-card       { background: #047857; }
.ds-badge-technical-report { background: #7c3aed; }
.ds-badge-source           { background: #475569; }

.ds-source-name {
    grid-area: name;
    color: var(--src-accent);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.35;
}
.ds-source-name:hover { text-decoration: underline; }

.ds-source-used {
    grid-area: used;
    color: var(--src-fg-2);
    font-size: 13.5px;
}

.ds-source-checked {
    grid-area: checked;
    color: var(--src-muted);
    font-size: 12px;
    margin-top: 2px;
}

.ds-sources-block {
    margin: 18px 0 0;
    padding: 14px 16px;
    background: var(--src-card);
    border: 1px solid var(--src-line);
    border-radius: 10px;
}
.ds-sources-block p { margin: 0; color: var(--src-fg-2); font-size: 14.5px; line-height: 1.55; }
.ds-sources-confidence { border-left: 4px solid var(--src-accent-2); }

/* Fact Box "View sources" link */
.ds-factbox-source-link {
    color: var(--fb-accent, #0D7377);
    text-decoration: none;
    font-weight: 600;
}
.ds-factbox-source-link:hover { text-decoration: underline; }

@media (max-width: 540px) {
    .ds-sources { padding: 18px 16px; }
    .ds-source-card {
        grid-template-columns: 1fr;
        grid-template-areas: "badge" "name" "used" "checked";
        row-gap: 4px;
    }
    .ds-source-badge { justify-self: start; margin-top: 0; }
}

/* Source citation rendered without a deeplink (prose-only mention) */
.ds-source-name--no-url {
    color: var(--src-fg);
    font-weight: 600;
    font-style: italic;
    cursor: default;
}

/* ---------- Historical-model banner ----------
   Sits at the very top of articles in DS_HISTORICAL_MODELS. Matches the
   editorial palette but uses warm amber to signal "documented for context,
   not current". */
.ds-historical-banner {
    margin: 0 0 1.75rem;
    padding: 1rem 1.15rem;
    background: linear-gradient(180deg, #fff8eb 0%, #fff4e0 100%);
    border-left: 3px solid var(--ds-accent, #d97a1f);
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #2b2017;
}
.ds-historical-banner .ds-historical-tag {
    display: inline-block;
    margin: 0 0 0.45rem;
    padding: 0.18rem 0.65rem;
    background: #d97a1f;
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ds-historical-banner .ds-historical-body { margin: 0; }
.ds-historical-banner a {
    color: #b65912;
    border-bottom: 1px dotted currentColor;
    text-decoration: none;
}
.ds-historical-banner a:hover { color: #8a4209; border-bottom-style: solid; }