/* Saylor's Accountant — Ledger Green on Dark Navy */

[data-brand="saylors-accountant"] {
    --color-primary: #3ddc97;
    --color-primary-rgb: 61, 220, 151;
    --color-primary-dark: #1fb47a;
    --color-primary-light: #6ce6b2;
    --color-accent: #ffb547;
    --color-accent-rgb: 255, 181, 71;

    --color-bg: #0a1118;
    --color-bg-elevated: #101a23;
    --color-bg-card: #14202b;
    --color-bg-card-hover: #1a2a38;
    --color-bg-subtle: #0e1822;

    --color-text: #e8efef;
    --color-text-secondary: #9aa8ae;
    --color-text-tertiary: #6f7f87;
    --color-text-inverse: #0a1118;

    --color-border: rgba(232, 239, 239, 0.08);
    --color-border-hover: rgba(61, 220, 151, 0.25);

    --gradient-hero: linear-gradient(135deg, #0e2420 0%, #0a1118 45%, #102030 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    --gradient-text: linear-gradient(135deg, #3ddc97 0%, #6ce6b2 60%, #ffb547 100%);
    --gradient-card: linear-gradient(145deg, rgba(61,220,151,0.04) 0%, rgba(255,181,71,0.02) 100%);
    --gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(61,220,151,0.15) 0%, transparent 60%);

    --pattern-dots: radial-gradient(circle, rgba(232,239,239,0.04) 1px, transparent 1px);
    --pattern-size: 24px 24px;

    color-scheme: dark;
}

/* Hero text on gradient */
[data-brand="saylors-accountant"] .hero--gradient { color: #fff; }
[data-brand="saylors-accountant"] .hero--gradient .hero__subtitle { color: rgba(255,255,255,0.78); }
[data-brand="saylors-accountant"] .hero--gradient .hero__lede     { color: rgba(255,255,255,0.88); }
[data-brand="saylors-accountant"] .hero--gradient .hero__eyebrow {
    background: rgba(61, 220, 151, 0.12);
    border-color: rgba(61, 220, 151, 0.4);
    color: #6ce6b2;
}

/* Header on dark background */
[data-brand="saylors-accountant"] .site-header { color: #ffffff; }
[data-brand="saylors-accountant"] .site-header .nav-link { color: rgba(255, 255, 255, 0.75); }
[data-brand="saylors-accountant"] .site-header .nav-link:hover { color: #ffffff; background: rgba(61, 220, 151, 0.12); }
[data-brand="saylors-accountant"] .site-header .logo { color: #ffffff; }
[data-brand="saylors-accountant"] .site-header.scrolled { background: rgba(10, 17, 24, 0.95); }
[data-brand="saylors-accountant"] .site-header.scrolled .nav-link { color: var(--color-text-secondary); }
[data-brand="saylors-accountant"] .site-header.scrolled .nav-link:hover { color: var(--color-text); background: rgba(61, 220, 151, 0.1); }
[data-brand="saylors-accountant"] .site-header.scrolled .logo { color: var(--color-text); }

/* Footer on dark */
[data-brand="saylors-accountant"] .site-footer { background: var(--color-bg-elevated); }
[data-brand="saylors-accountant"] .site-footer .footer-logo { color: var(--color-text); }

/* Card borders on dark */
[data-brand="saylors-accountant"] .card { border-color: rgba(61, 220, 151, 0.1); }
[data-brand="saylors-accountant"] .card:hover { border-color: rgba(61, 220, 151, 0.28); }

/* Gradient text override */
[data-brand="saylors-accountant"] .gradient-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Monospace: the ledger voice. Applied to data tables and inline figures
   so numbers align visually down columns and the "accountant's ledger"
   feel is consistent with the brand. */
[data-brand="saylors-accountant"] .tranche-preview,
[data-brand="saylors-accountant"] .tranches-table,
[data-brand="saylors-accountant"] code {
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Zebra striping on the main tranches table for readability with 100+ rows.
   Subtle so it doesn't fight the ledger aesthetic. */
[data-brand="saylors-accountant"] .tranches-table tbody tr:nth-child(even) {
    background: rgba(232, 239, 239, 0.02);
}
[data-brand="saylors-accountant"] .tranches-table tbody tr:hover {
    background: rgba(61, 220, 151, 0.06);
}

/* Form inputs on dark background (matches BtcTreasury pattern) */
[data-brand="saylors-accountant"] .form-input {
    background: var(--color-bg-elevated);
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-brand="saylors-accountant"] .form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.15);
}

/*
 * Units toggle (BTC count <-> $-notional). Default state is BTC: USD spans
 * are hidden until the JS reads the persisted preference and toggles
 * data-units="usd" on <html> (alongside data-brand, which is also on
 * <html>). We render both formats server-side so the swap is instant.
 *
 * The toggle attribute lives on <html> rather than <body> so the descendant
 * selector `html[data-brand][data-units="usd"]` chains attributes on the
 * same element — without that, a rule like `[data-brand] [data-units="usd"]`
 * matches *body* when body itself carries data-units="usd", which would
 * blank the page in USD mode.
 */
html[data-brand="saylors-accountant"] [data-units="usd"] {
    display: none;
}
html[data-brand="saylors-accountant"][data-units="usd"] [data-units="btc"] {
    display: none;
}
html[data-brand="saylors-accountant"][data-units="usd"] [data-units="usd"] {
    display: inline;
}
[data-brand="saylors-accountant"] .sa-units-btn[aria-pressed="true"] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 600;
}

/*
 * Horizontal scrolling wrapper for wide tables. The table is wrapped in a
 * container with overflow-x: auto so the native horizontal scrollbar stays
 * attached to that wrapper, and the table can be scrolled sideways when its
 * natural width exceeds the available space. scrollbar-gutter: stable
 * reserves space for the scrollbar so the wrapper's height remains
 * consistent whether the scrollbar is currently shown or not.
 */
[data-brand="saylors-accountant"] .sa-sticky-scroll {
    overflow-x: auto;
    /* Reserve space for the scrollbar so the sticky strip below has a
     * consistent height. */
    scrollbar-gutter: stable;
}
[data-brand="saylors-accountant"] .sa-sticky-scroll > table {
    /* Keep the table at its natural width — required for horizontal scroll
     * to actually exist on wide tables. */
    min-width: max-content;
}

/* Filing-token <abbr>: dotted underline cue + nowrap so "8-K" never
 * splits across a line. Used the first time a filing form (8-K, 10-K, 10-Q)
 * is mentioned on a page; the surrounding prose then uses plain
 * "8&#8209;K" entity refs with no tooltip.
 *
 * The whole token is wrapped in a non-breaking-hyphen entity so the
 * fallback (when CSS doesn't load) is still unbreakable. */
[data-brand="saylors-accountant"] abbr.sa-filing {
    text-decoration: underline dotted var(--color-primary) 1px;
    text-underline-offset: 3px;
    cursor: help;
    white-space: nowrap;
}
[data-brand="saylors-accountant"] abbr.sa-filing:hover {
    color: var(--color-primary);
}

/* Data-freshness banner. Appears between header and main content when the
 * weekly tranche refresh has stalled (see Pages/_SiteBanner.cshtml).
 * Amber tint keyed off --color-accent so it reads as informational/warning
 * without the alarm-red of an error state. The page below stays readable —
 * we want the visitor to know the data may lag, not to scare them away. */
[data-brand="saylors-accountant"] .data-freshness-banner {
    background: rgba(var(--color-accent-rgb), 0.08);
    border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.4);
    color: var(--color-text-secondary);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.5;
    padding: 0.625rem 0;
}
[data-brand="saylors-accountant"] .data-freshness-banner strong {
    color: var(--color-accent);
}
[data-brand="saylors-accountant"] .data-freshness-banner time {
    color: var(--color-text);
    white-space: nowrap;
}

/* TAL detail metrics. Phase 1 renders terse debug math before the polished
 * gated template lands, so keep the cards quiet and dense. */
[data-brand="saylors-accountant"] .metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-3, 0.75rem);
    margin: var(--space-6, 1.5rem) 0;
}
[data-brand="saylors-accountant"] .metric-card {
    background: rgba(61, 220, 151, 0.06);
    border: 1px solid rgba(61, 220, 151, 0.16);
    border-radius: 8px;
    padding: var(--space-4, 1rem);
}
[data-brand="saylors-accountant"] .metric-card strong {
    display: block;
    color: var(--color-text);
    font-family: "JetBrains Mono", monospace;
    font-size: var(--text-xl, 1.25rem);
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0.25rem;
}
[data-brand="saylors-accountant"] .metric-label {
    color: var(--color-text-secondary);
    display: block;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* TAL feed. The archive is a compact work surface: tally, filter chips,
 * then rows that are stable on mobile and desktop. */
[data-brand="saylors-accountant"] .transaction-feed {
    display: grid;
    gap: var(--space-5, 1.25rem);
}
[data-brand="saylors-accountant"] .transaction-feed__header {
    align-items: start;
    border-bottom: 1px solid var(--color-border);
    display: grid;
    gap: var(--space-4, 1rem);
    grid-template-columns: minmax(14rem, 1fr) minmax(18rem, 1.4fr);
    padding-bottom: var(--space-5, 1.25rem);
}
[data-brand="saylors-accountant"] .transaction-feed__tally {
    color: var(--color-text);
    font-family: "JetBrains Mono", monospace;
    font-size: var(--text-lg, 1.125rem);
    font-weight: 600;
    line-height: 1.4;
    margin: 0.25rem 0 0;
}
[data-brand="saylors-accountant"] .transaction-feed__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}
[data-brand="saylors-accountant"] .transaction-filter-chip {
    background: rgba(232, 239, 239, 0.04);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-sm, 0.875rem);
    min-height: 2.25rem;
    padding: 0.45rem 0.85rem;
}
[data-brand="saylors-accountant"] .transaction-filter-chip:hover,
[data-brand="saylors-accountant"] .transaction-filter-chip[aria-pressed="true"] {
    background: rgba(61, 220, 151, 0.12);
    border-color: rgba(61, 220, 151, 0.38);
    color: var(--color-primary-light);
}
[data-brand="saylors-accountant"] .transaction-list {
    display: grid;
    gap: var(--space-3, 0.75rem);
}
[data-brand="saylors-accountant"] .transaction-row {
    align-items: start;
    background: var(--gradient-card);
    border: 1px solid rgba(61, 220, 151, 0.12);
    border-radius: 8px;
    display: grid;
    gap: var(--space-4, 1rem);
    grid-template-columns: minmax(8rem, 0.45fr) minmax(18rem, 1.35fr) minmax(7rem, 0.35fr);
    padding: var(--space-4, 1rem);
}
[data-brand="saylors-accountant"] .transaction-row:hover {
    border-color: rgba(61, 220, 151, 0.3);
}
[data-brand="saylors-accountant"] .transaction-row__meta {
    color: var(--color-text-secondary);
    display: grid;
    font-family: "JetBrains Mono", monospace;
    font-size: var(--text-sm, 0.875rem);
    gap: 0.35rem;
}
[data-brand="saylors-accountant"] .transaction-row__meta span {
    color: var(--color-accent);
}
[data-brand="saylors-accountant"] .transaction-row__body h2 {
    font-size: var(--text-xl, 1.25rem);
    line-height: 1.25;
    margin: 0;
}
[data-brand="saylors-accountant"] .transaction-row__body h2 a {
    color: var(--color-text);
    text-decoration: none;
}
[data-brand="saylors-accountant"] .transaction-row__body h2 a:hover {
    color: var(--color-primary-light);
}
[data-brand="saylors-accountant"] .transaction-row__body p {
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin: 0.6rem 0 0;
}
[data-brand="saylors-accountant"] .transaction-row__source {
    font-size: var(--text-sm, 0.875rem);
}
[data-brand="saylors-accountant"] .transaction-row__action {
    align-items: end;
    display: grid;
    gap: 0.75rem;
    justify-items: end;
}
[data-brand="saylors-accountant"] .transaction-row__action a {
    color: var(--color-primary-light);
    font-weight: 600;
}
[data-brand="saylors-accountant"] .transaction-verdict {
    border: 1px solid var(--color-border);
    border-radius: 999px;
    display: inline-flex;
    font-family: "JetBrains Mono", monospace;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    line-height: 1;
    padding: 0.45rem 0.65rem;
    text-transform: uppercase;
}
[data-brand="saylors-accountant"] .transaction-verdict--accretive {
    background: rgba(61, 220, 151, 0.12);
    border-color: rgba(61, 220, 151, 0.36);
    color: var(--color-primary-light);
}
[data-brand="saylors-accountant"] .transaction-verdict--neutral,
[data-brand="saylors-accountant"] .transaction-verdict--pending {
    background: rgba(232, 239, 239, 0.06);
    color: var(--color-text-secondary);
}
[data-brand="saylors-accountant"] .transaction-verdict--dilutive {
    background: rgba(255, 107, 107, 0.12);
    border-color: rgba(255, 107, 107, 0.36);
    color: #ff9d9d;
}
[data-brand="saylors-accountant"] .transaction-verdict--mixed {
    background: rgba(var(--color-accent-rgb), 0.12);
    border-color: rgba(var(--color-accent-rgb), 0.36);
    color: var(--color-accent);
}
[data-brand="saylors-accountant"] .transaction-empty {
    background: rgba(232, 239, 239, 0.04);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--space-5, 1.25rem);
}
[data-brand="saylors-accountant"] .transaction-empty h2 {
    font-size: var(--text-xl, 1.25rem);
    margin: 0 0 0.5rem;
}
[data-brand="saylors-accountant"] .transaction-empty p {
    color: var(--color-text-secondary);
    margin: 0;
}

@media (max-width: 760px) {
    [data-brand="saylors-accountant"] .transaction-feed__header,
    [data-brand="saylors-accountant"] .transaction-row {
        grid-template-columns: 1fr;
    }
    [data-brand="saylors-accountant"] .transaction-feed__filters {
        justify-content: flex-start;
    }
    [data-brand="saylors-accountant"] .transaction-row__action {
        align-items: start;
        justify-items: start;
    }
}

/* ─── Transaction Accretion Ledger — per-transaction detail (#356) ───
   Free + paid sections + paywall banner. The page hero already carries the
   editorial headline, teaser, verdict badge, and source link; the styles
   below cover the secondary stack: free critique, paid math grid, gated
   banner, and the Markdig-rendered editorial markdown body. Selectors are
   data-brand-scoped to match the rest of this stylesheet. */
[data-brand="saylors-accountant"] .transaction-detail__meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
    margin-top: var(--space-4, 1rem);
}
[data-brand="saylors-accountant"] .transaction-detail__source {
    color: var(--color-text-secondary);
    font-size: var(--text-sm, 0.875rem);
}
[data-brand="saylors-accountant"] .transaction-detail__section-title {
    font-size: var(--text-xl, 1.25rem);
    margin: 0 0 var(--space-3, 0.75rem);
}
[data-brand="saylors-accountant"] .transaction-detail__subsection-title {
    font-size: var(--text-lg, 1.125rem);
    margin: var(--space-5, 1.25rem) 0 var(--space-2, 0.5rem);
}
[data-brand="saylors-accountant"] .transaction-detail__free {
    background: rgba(232, 239, 239, 0.04);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: var(--space-5, 1.25rem);
    padding: var(--space-5, 1.25rem);
}
[data-brand="saylors-accountant"] .transaction-detail__critique {
    color: var(--color-text-secondary);
    font-size: var(--text-base, 1rem);
    line-height: 1.6;
    margin: 0 0 var(--space-3, 0.75rem);
}
[data-brand="saylors-accountant"] .transaction-detail__verdict-line {
    color: var(--color-text);
    margin: 0;
}
[data-brand="saylors-accountant"] .transaction-detail__paid {
    background: rgba(232, 239, 239, 0.04);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--space-5, 1.25rem);
}
[data-brand="saylors-accountant"] .transaction-detail__math-derivation,
[data-brand="saylors-accountant"] .transaction-detail__comparison {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}
[data-brand="saylors-accountant"] .transaction-detail__calculator-warning {
    background: rgba(255, 107, 107, 0.08);
    border-left: 3px solid #ff9d9d;
    border-radius: 4px;
    color: #ff9d9d;
    margin: var(--space-3, 0.75rem) 0;
    padding: var(--space-3, 0.75rem);
}
[data-brand="saylors-accountant"] .transaction-detail__editorial {
    line-height: 1.65;
}
[data-brand="saylors-accountant"] .transaction-detail__editorial h2,
[data-brand="saylors-accountant"] .transaction-detail__editorial h3 {
    margin-top: var(--space-4, 1rem);
}
[data-brand="saylors-accountant"] .transaction-detail__editorial p {
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3, 0.75rem);
}
[data-brand="saylors-accountant"] .transaction-detail__editorial ul,
[data-brand="saylors-accountant"] .transaction-detail__editorial ol {
    color: var(--color-text-secondary);
    padding-left: 1.5rem;
}
[data-brand="saylors-accountant"] .transaction-detail__banner {
    background: rgba(var(--color-accent-rgb), 0.10);
    border: 1px solid rgba(var(--color-accent-rgb), 0.36);
    border-radius: 8px;
    padding: var(--space-5, 1.25rem);
}
[data-brand="saylors-accountant"] .transaction-detail__banner-headline {
    color: var(--color-accent);
    font-size: var(--text-xl, 1.25rem);
    margin: 0 0 var(--space-2, 0.5rem);
}
[data-brand="saylors-accountant"] .transaction-detail__banner-body {
    color: var(--color-text);
    line-height: 1.6;
    margin: 0 0 var(--space-4, 1rem);
}
[data-brand="saylors-accountant"] .transaction-detail__banner-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
}
[data-brand="saylors-accountant"] .transaction-detail__banner-subscribe {
    background: var(--color-accent);
    border-radius: 6px;
    color: var(--color-surface, #000);
    font-weight: 700;
    padding: 0.65rem 1rem;
    text-decoration: none;
}
[data-brand="saylors-accountant"] .transaction-detail__banner-subscribe:hover {
    filter: brightness(1.06);
}
[data-brand="saylors-accountant"] .transaction-detail__banner-login {
    align-self: center;
    color: var(--color-text-secondary);
    font-size: var(--text-sm, 0.875rem);
}

@media (max-width: 760px) {
    [data-brand="saylors-accountant"] .transaction-detail__free,
    [data-brand="saylors-accountant"] .transaction-detail__paid,
    [data-brand="saylors-accountant"] .transaction-detail__banner {
        padding: var(--space-4, 1rem);
    }
    [data-brand="saylors-accountant"] .transaction-detail__banner-cta {
        flex-direction: column;
        align-items: stretch;
    }
}