/* ============================================================
   glass.css - Glass theme component layer
   Every content element an AI agent might produce is defined
   here with tokens only. No hardcoded colors or pixels beyond
   structure (radii reference tokens).

   Component map (see components.json):
     .glass          base surfaces: header, footer, cards, panels
     .prose          long-form body: headings, lists, blockquote, hr
     table, .tbl     tables and wrapped overflow tables
     pre, code       code fences and inline code
     .callout        note/warning/danger callouts
     details/summary styled accordion
     .timeline       case-file timelines (tl-t, tl-i, tl-h, tl-c)
     .case-*         case-embed micro-classes (addr, badge, amt, ...)
     .stat-tile      hero stat tiles
     figure.chart    chart container
     .breadcrumbs    nav crumbs
     motion          motion tokens, reduced-motion respect
   ============================================================ */

/* ---- base ---------------------------------------------------------------- */
body {
    font-family: var(--font-sans);
    color: var(--ink-1);
    background: var(--page-bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    transition: background var(--motion-med);
}
/* soft gradient orbs, page depth without color noise */
body::before, body::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
body::before {
    width: 720px; height: 720px;
    top: -180px; left: -200px;
    background: radial-gradient(circle, rgba(80, 60, 40, 0.045), transparent 65%);
}
body::after {
    width: 860px; height: 860px;
    bottom: -260px; right: -240px;
    background: radial-gradient(circle, rgba(120, 100, 75, 0.04), transparent 65%);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- glass surfaces ------------------------------------------------------- */
.glass {
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-glass);
}
.glass--strong {
    background: var(--glass-fill-strong);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
}
/* shared header/footer chrome */
.site-header {
    position: sticky; top: 14px;
    z-index: 50;
    margin: 0 auto;
    width: min(1200px, calc(100% - 28px));
    display: flex; align-items: center; gap: 18px;
    padding: 12px 20px;
    background: var(--glass-fill-strong);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-glass);
    transition: padding var(--motion-med), box-shadow var(--motion-med);
}
.site-header.is-shrunk { padding: 8px 20px; }

/* ---- buttons --------------------------------------------------------------- */
.btn {
    font-family: var(--font-sans);
    font-size: 0.92rem; font-weight: 600;
    padding: 12px 24px; border-radius: 18px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast);
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--chart-2));
    color: #fff;
    box-shadow: 0 6px 20px rgba(22,32,58,0.28), inset 0 1px 0 rgba(255,255,255,0.22);
}
html[data-theme="dark"] .btn-primary { color: #0A1020; }
.btn-ghost {
    background: var(--glass-fill);
    color: var(--accent);
    border-color: var(--accent-line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ---- cards ----------------------------------------------------------------- */
.card {
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-glass);
    padding: 22px;
    display: flex; flex-direction: column; gap: 10px;
    transition: transform var(--motion-med), box-shadow var(--motion-med);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-glass-hover); }

/* ---- stat tiles ------------------------------------------------------------ */
.stat-tile {
    background: var(--glass-fill-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
}
.stat-tile .stat-n {
    font-family: var(--font-serif);
    font-size: 1.6rem; font-weight: 700;
    color: var(--accent);
}
.stat-tile .stat-k {
    font-size: 0.78rem; color: var(--ink-3); margin-top: 2px;
}

/* =====================================================================
   PROSE: long-form body (posts, research, cases).
   Applied by <div class="prose"> around rendered markdown.
   ===================================================================== */
.prose h1, .prose h2, .prose h3, .prose h4 {
    font-family: var(--font-serif); font-weight: 600;
    color: var(--ink-1); line-height: 1.25;
}
.prose h2 { font-size: 1.55rem; margin: 2.2em 0 0.6em; }
.prose h3 { font-size: 1.25rem; margin: 1.8em 0 0.5em; }
.prose p { margin-bottom: 1.3em; color: var(--ink-1); }

/* bullets and numbered lists */
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.6em; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; padding-left: 1.15em; margin-bottom: 0.45em; color: var(--ink-1); }
.prose ul > li::before {
    content: "";
    position: absolute; left: 0; top: 0.62em;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2.5px var(--accent-wash);
}
.prose ol > li { margin-bottom: 0.45em; color: var(--ink-1); padding-left: 0.3em; }
.prose ol { list-style: none; counter-reset: prose-item; }
.prose ol > li { counter-increment: prose-item; padding-left: 0.4em; }
.prose ol > li::before {
    content: counter(prose-item) ".";
    font-family: var(--font-mono);
    font-size: 0.85em; color: var(--accent);
    margin-right: 0.55em;
}

/* blockquote */
.prose blockquote {
    margin: 1.6em 0;
    padding: 18px 22px;
    border-left: 3px solid var(--accent);
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    font-style: italic; color: var(--ink-2);
}
.prose blockquote p { margin-bottom: 0; }

/* horizontal rule: thin accent divider */
.prose hr {
    border: none;
    height: 1px;
    background: var(--accent-line);
    margin: 2.4em 0;
}

/* code: fences and inline */
.prose pre {
    margin: 1.6em 0;
    padding: 18px 20px;
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    font-size: 0.88rem;
    color: var(--ink-1);
}
.prose pre code {
    font-family: var(--font-mono);
    background: none; padding: 0; color: inherit;
    border: none;
}
.prose p code, .prose td code, .prose li code {
    font-family: var(--font-mono);
    font-size: 0.84em;
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    color: var(--accent);
}

/* =====================================================================
   TABLES: .tbl-wrap for overflow; tables styled by default inside .prose
   ===================================================================== */
.tbl-wrap {
    overflow-x: auto;
    margin: 1.6em 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    border: 1px solid var(--glass-border);
}
.prose table {
    width: 100%; border-collapse: collapse;
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-size: 0.92rem;
}
.prose th {
    background: var(--accent-wash);
    text-align: left; padding: 11px 14px;
    font-family: var(--font-mono); font-size: 0.76rem;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent);
}
.prose td { padding: 11px 14px; border-top: 1px solid var(--accent-line); color: var(--ink-2); }
.prose tbody tr:last-child td { border-bottom: none; }

/* =====================================================================
   CALLOUTS: note (default), warn, danger
   HTML: <div class="callout"><span class="callout-label">Note</span> ...
   ===================================================================== */
.callout {
    margin: 1.6em 0;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    background: var(--note-wash);
    border: 1px solid var(--accent-line);
    font-size: 0.95rem;
}
.callout--warn { background: var(--warn-wash); border-color: #E3C9A5; }
html[data-theme="dark"] .callout--warn { border-color: #5C4A2E; }
.callout--danger { background: var(--danger-wash); border-color: #E4B9B9; }
html[data-theme="dark"] .callout--danger { border-color: #5C2E2E; }
.callout-label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem; letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}
.callout--warn .callout-label { color: var(--color-warning); }
.callout--danger .callout-label { color: var(--color-danger); }
.callout-label::before { content: "\25CF "; font-size: 0.7em; }
.callout p { margin-bottom: 0.5em; }
.callout p:last-child { margin-bottom: 0; }

/* =====================================================================
   ACCORDION: native <details>/<summary>, enhanced by glass.js
   HTML: <details class="accordion"><summary>Heading</summary>...
   ===================================================================== */
details.accordion {
    margin: 0.8em 0;
    background: var(--glass-fill);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    overflow: hidden;
}
details.accordion + details.accordion { margin-top: 10px; }
details.accordion > summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 44px 14px 18px;
    font-family: var(--font-sans);
    font-weight: 600; font-size: 0.98rem;
    color: var(--ink-1);
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}
details.accordion > summary::-webkit-details-marker { display: none; }
details.accordion > summary::after {
    content: "";
    position: absolute; right: 16px; top: 50%;
    width: 8px; height: 8px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: translateY(-70%) rotate(45deg);
    transition: transform var(--motion-fast);
}
details.accordion[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
details.accordion > summary:hover { background: var(--accent-wash); }
details.accordion .accordion-body { padding: 0 18px 16px; color: var(--ink-2); font-size: 0.95rem; }

/* =====================================================================
   TIMELINE: case-file chronological steps
   HTML: <ol class="timeline"><li><span class="tl-t">Date</span>
         <div class="tl-h">Heading</div><div class="tl-c">Body</div>
   ===================================================================== */
.timeline {
    list-style: none; margin: 1.6em 0; padding: 0 0 0 26px;
    border-left: 2px solid var(--accent-line);
}
.timeline > li { position: relative; margin-bottom: 1.8em; }
.timeline > li::before {
    content: "";
    position: absolute; left: -32px; top: 0.35em;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--page-bg);
    border: 2.5px solid var(--accent);
}
.tl-t {
    display: inline-block;
    font-family: var(--font-mono); font-size: 0.74rem;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}
.tl-h { font-family: var(--font-serif); font-size: 1.12rem; font-weight: 600; color: var(--ink-1); }
.tl-c { color: var(--ink-2); font-size: 0.95rem; margin-top: 4px; }

/* =====================================================================
   CASE EMBEDS: micro-class system from public/content/case-embeds/*.html
   Styled on top of .prose; classes: card, addr, mono, badge, amt, ...
   ===================================================================== */
.case-flow-step-note, .nt {
    margin: 0.8em 0;
    padding: 10px 14px;
    background: var(--note-wash);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-md);
    font-size: 0.88rem; color: var(--ink-2);
}
.badge, .b-conf, .b-ref, .b-part {
    display: inline-block;
    font-family: var(--font-mono); font-size: 0.68rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 3px 10px; border-radius: var(--radius-pill);
    background: var(--accent-wash); color: var(--accent);
}
.addr, .mono { font-family: var(--font-mono); font-size: 0.86em; color: var(--ink-2); }
.amt, .amt-o { font-family: var(--font-mono); font-weight: 600; color: var(--accent); white-space: nowrap; }
.chain { color: var(--ink-3); font-size: 0.85em; }
.tx { font-family: var(--font-mono); font-size: 0.84em; color: var(--accent); word-break: break-all; }
.farr { color: var(--ink-3); }
.xlinks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0.6em 0; }

/* =====================================================================
   CHARTS: figure.chart with canvas[data-chart], rendered by glass.js
   ===================================================================== */
figure.chart {
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-glass);
    padding: 20px;
    margin: 1.8em 0;
}
figure.chart canvas { display: block; }
figure.chart figcaption {
    font-family: var(--font-mono); font-size: 0.7rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-3); margin-top: 12px;
}

/* =====================================================================
   MISC: breadcrumbs, progress bar, footer
   ===================================================================== */
.breadcrumbs { font-size: 0.82rem; color: var(--ink-3); margin-bottom: 18px; }
.breadcrumbs a { color: var(--ink-3); }
.breadcrumbs__sep { margin: 0 6px; }
.reading-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--chart-2));
    z-index: 60;
}
footer {
    margin-top: 84px;
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-top: 1px solid var(--glass-border);
    padding: 34px 24px;
    text-align: center;
    font-size: 0.85rem; color: var(--ink-3);
    position: relative; z-index: 1;
}

/* =====================================================================
   MOTION: respect prefers-reduced-motion everywhere
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
}