/* Case study: a replayed research session.
   -------------------------------------------------------------------------
   Loaded ONLY by /products/edgar/case-study, after style.css and after the
   scrollcraft engine stylesheet, so plain element selectors here are page
   scoped by virtue of where the file is linked.

   Two jobs:
     1. Theme the engine (six tokens and two faces) and re-pin the site chrome,
        because the engine sets its own body ground and the site header/footer
        would otherwise inherit it and go pale on pale under a dark system
        theme. Same fix, same reason, as scripts/prepare_redline_demo.py.
     2. Carry the panel mockups. Every rule under .cs-panel is copied from the
        real MCP App views in edgar_mcp/src/edgar_mcp/ui/views (search_view.py,
        diff_view.py) and namespaced under .cs-panel so it cannot reach the
        rest of the site. Copied deliberately, not imported: this page must
        render with no server and no connector. */

/* --- 1. Engine theme ------------------------------------------------------ */
:root {
    --sc-canvas: #f7f8f6;
    --sc-surface: #ffffff;
    --sc-ink: #16181d;
    --sc-ink-soft: #5d6570;
    --sc-accent: #1f4d3d;
    --sc-accent-ink: #ffffff;
    --sc-font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
        Palatino, Georgia, "Times New Roman", serif;
    --sc-font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    --sc-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    /* The default block padding is written for a page of six long acts. This
       one carries a whole case study, so it buys its length back here. */
    --sc-section: clamp(1.4rem, 2.6vw, 2.4rem);
    --cs-panel-ink: #1a3a6b;
    --cs-hair: #dde3ed;
}

/* Site chrome, pinned to the site's light palette on this page only. */
.site-header,
.notice-strip {
    background: #ffffff;
    color: #16181d;
    font-family: var(--sc-font-text);
}
.site-footer {
    background: #f6f7f4;
    color: #16181d;
    font-family: var(--sc-font-text);
}
.site-header .brand,
.site-header nav a,
.site-header nav .linklike,
.site-header nav summary,
.notice-strip,
.site-footer,
.site-footer a {
    color: #16181d;
}

/* The same light palette as tokens, so everything inside the chrome that reads
   them (the nav menus, the brand and menu marks, hover and focus colours)
   stays light when the reader's system is in dark mode. */
.site-header,
.notice-strip,
.site-footer {
    --color-bg: #ffffff;
    --color-text: #16181d;
    --color-muted: #5d6570;
    --color-border: #e3e6e2;
    --color-surface: #f6f7f4;
    --color-accent: #1f4d3d;
    --color-accent-strong: #163a2e;
    --color-accent-soft: #e9f2ec;
    --color-accent-contrast: #ffffff;
}

/* The acts are full bleed; base.html's <main class="wrap"> is not. */
main.cs-main {
    max-width: none;
    padding: 0;
    overflow-x: clip;
}

/* --- 2. Page chrome: a status bar, not a marketing bar -------------------- */
[data-sc-progress] {
    position: fixed;
    inset-inline: 0;
    top: 0;
    height: 2px;
    background: var(--sc-accent);
    transform-origin: 0 50%;
    z-index: 60;
}
.cs-status {
    position: fixed;
    right: clamp(0.75rem, 3vw, 2rem);
    bottom: clamp(0.75rem, 3vw, 2rem);
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--cs-hair);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 12px rgba(22, 40, 32, 0.1);
    font-family: var(--sc-font-mono);
    font-size: 11px;
    color: #4a5262;
}
.cs-status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sc-accent);
}
@media (max-width: 640px) {
    .cs-status { display: none; }
}

/* --- 3. The session surface ---------------------------------------------- */
.cs-wrap {
    width: 100%;
    max-width: 68rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.cs-act { position: relative; }
.cs-stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding-block: clamp(1rem, 3vh, 2rem);
}
.cs-scene-label {
    font-family: var(--sc-font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a93a3;
    margin: 0 0 6px;
}
.cs-turn { margin: 0 0 10px; }
.cs-turn__who {
    font-family: var(--sc-font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a93a3;
    margin: 0 0 4px;
}
.cs-turn--user .cs-bubble {
    background: #eef2f7;
    border: 1px solid #d8e0ea;
    border-radius: 12px 12px 12px 4px;
    padding: 12px 14px;
    color: #22262e;
    white-space: pre-line;
    max-width: 54rem;
}
.cs-turn--assistant .cs-bubble {
    background: transparent;
    padding: 0;
    color: var(--sc-ink);
}
.cs-bubble p { margin: 0 0 0.55em; }
.cs-bubble p:last-child { margin-bottom: 0; }
.cs-bubble ul, .cs-bubble ol { margin: 0 0 0.55em; padding-left: 1.1em; }
.cs-bubble li { margin-bottom: 0.25em; }

.cs-tools { margin: 0 0 10px; display: flex; flex-direction: column; gap: 5px; }
.cs-tool {
    font-family: var(--sc-font-mono);
    font-size: 11.5px;
    line-height: 1.5;
    background: #f4f6f9;
    border: 1px solid var(--cs-hair);
    border-left: 3px solid #9fb4d4;
    border-radius: 4px;
    padding: 6px 10px;
    color: #3d4756;
    overflow-x: auto;
    white-space: pre;
}
.cs-tool b { color: var(--cs-panel-ink); font-weight: 700; }

.cs-quote {
    margin: 0 0 0.9em;
    padding: 10px 14px;
    border-left: 3px solid #c5d8f7;
    background: #f8fafd;
    color: #22262e;
}
.cs-quote p { margin: 0 0 0.6em; }
.cs-quote p:last-child { margin-bottom: 0; }
.cs-src {
    font-size: 0.9em;
    color: var(--sc-ink-soft);
}
.cs-caveat {
    font-size: 0.9em;
    color: var(--sc-ink-soft);
    border-top: 1px solid var(--cs-hair);
    padding-top: 8px;
    margin-top: 10px;
}

h1.cs-title { font-size: var(--sc-t-2xl); margin: 0 0 8px; }
h2.cs-heading { font-size: var(--sc-t-lg); margin: 0 0 8px; font-family: var(--sc-font-display); }
.cs-dated {
    font-size: 0.92em;
    color: var(--sc-ink-soft);
    border: 1px solid var(--cs-hair);
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
}

/* --- 4. Panel frame ------------------------------------------------------- */
.cs-panel {
    color-scheme: light;
    background: #f6f8fb;
    color: #1a1a2e;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid #c9d2e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(22, 40, 32, 0.05), 0 8px 24px rgba(22, 40, 32, 0.07);
}
.cs-panel * { box-sizing: border-box; }
.cs-panel [hidden] { display: none !important; }
.cs-panel__frame {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: #e9edf3;
    border-bottom: 1px solid #c9d2e0;
    font-family: var(--sc-font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7a90;
}
.cs-panel__frame span.dot {
    width: 8px; height: 8px; border-radius: 50%; background: #c3ccd9;
}

/* Header / summary / toolbar / notes, from search_view.py and timeline_view. */
.cs-panel .header { background: #1a3a6b; color: #fff; padding: 10px 14px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cs-panel .header h1 { font-size: 14px; font-weight: 600; margin: 0; font-family: inherit; letter-spacing: 0; color: #fff; }
.cs-panel .query-text { font-style: italic; font-size: 12px; opacity: 0.93; }
.cs-panel .query-text::before { content: '"'; }
.cs-panel .query-text::after { content: '"'; }
.cs-panel .acc { font-family: var(--sc-font-mono); font-size: 11px; background: rgba(255,255,255,0.18); padding: 2px 7px; border-radius: 4px; }
.cs-panel .arrow { color: #cfe1ff; font-weight: 700; }
.cs-panel .hdr-links { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.cs-panel .hdr-pill { font-size: 11px; font-weight: 600; background: rgba(255,255,255,0.16); color: #fff; border: 1px solid rgba(255,255,255,0.35); padding: 3px 10px; border-radius: 12px; text-decoration: none; white-space: nowrap; }
.cs-panel .hdr-pill:hover { background: rgba(255,255,255,0.30); }
.cs-panel .hdr-pill.redline,
.cs-panel .hdr-pill.timeline { background: #f1a700; color: #1a1a2e; border-color: #f1a700; }
.cs-panel .hdr-pill.redline:hover,
.cs-panel .hdr-pill.timeline:hover { background: #ffc62e; }

.cs-panel .summary { background: #e8f0fe; border-bottom: 1px solid #c5d8f7; padding: 6px 14px; font-size: 11px; color: #1a3a6b; display: flex; gap: 16px; flex-wrap: wrap; }
.cs-panel .level-legend { background: #fafbfd; border-bottom: 1px solid #dde3ed; padding: 5px 14px; font-size: 10px; color: #555; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.cs-panel .level-legend .ll-item { display: inline-flex; align-items: center; gap: 5px; }
.cs-panel .level-legend .ll-tag { font-family: var(--sc-font-mono); font-size: 10px; font-weight: 700; color: #fff; padding: 1px 5px; border-radius: 2px; }
.cs-panel .level-legend .ll-tag.l0 { background: #c0392b; }
.cs-panel .level-legend .ll-tag.l1 { background: #d35400; }
.cs-panel .level-legend .ll-tag.l2 { background: #8e44ad; }
.cs-panel .panel-note { background: #eef3fb; border-bottom: 1px solid #c5d8f7; padding: 6px 14px; font-size: 11px; color: #1a3a6b; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cs-panel .rrf-note { background: #f4f7fd; border-bottom: 1px solid #dde3ed; padding: 6px 14px; font-size: 11px; color: #556; }
.cs-panel .reflow-note { background: #f4f7fd; border-bottom: 1px solid #dde3ed; padding: 5px 14px; font-size: 11px; color: #556; line-height: 1.45; }
.cs-panel .full-link { font-weight: 700; color: #1a3a6b; background: #fff; border: 1px solid #c5d8f7; border-radius: 12px; padding: 3px 10px; white-space: nowrap; text-decoration: none; display: inline-block; }
.cs-panel .full-link:hover, .cs-panel .full-link:focus-visible { background: #1a3a6b; color: #fff; border-color: #1a3a6b; }
.cs-panel .link-expiry { flex-basis: 100%; font-size: 10px; color: #556; line-height: 1.5; }
.cs-panel .regen-prompt { user-select: all; background: #fff; border: 1px solid #c5d8f7; border-radius: 3px; padding: 1px 5px; font-family: var(--sc-font-mono); font-size: 10px; word-break: break-word; }

.cs-panel .toolbar { background: #f4f7fd; border-bottom: 1px solid #dde3ed; padding: 6px 14px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cs-panel .tlabel { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #888; letter-spacing: 0.4px; margin-right: 2px; }
.cs-panel .pill { border: 1px solid #c5d8f7; border-radius: 12px; padding: 2px 9px; font-size: 11px; font-weight: 600; cursor: pointer; background: #fff; color: #1a3a6b; user-select: none; white-space: nowrap; font-family: inherit; }
.cs-panel .pill:hover { background: #e8f0fe; border-color: #4a90d9; }
.cs-panel .pill.active { background: #1a3a6b; color: #fff; border-color: #1a3a6b; }
.cs-panel .pill-count { font-size: 9px; background: rgba(26,58,107,0.08); padding: 0 4px; border-radius: 6px; margin-left: 3px; }
.cs-panel .pill.active .pill-count { background: rgba(255,255,255,0.25); }
.cs-panel .pill-group { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 0 1 auto; }
.cs-panel .filter-counter { font-size: 11px; color: #1a3a6b; font-weight: 600; margin-left: auto; }
.cs-panel .clear-link { font-size: 11px; color: #c0392b; font-weight: 600; cursor: pointer; padding: 2px 8px; border-radius: 4px; user-select: none; background: none; border: 0; font-family: inherit; }
.cs-panel .clear-link:hover { background: #fde8e8; text-decoration: underline; }
.cs-panel .ea-link { font-size: 11px; color: #1a3a6b; font-weight: 600; cursor: pointer; text-decoration: underline; user-select: none; white-space: nowrap; background: none; border: 0; font-family: inherit; }

.cs-panel .container { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.cs-panel .scroller { overflow-y: auto; overscroll-behavior: contain; }
.cs-panel .group-head { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 0; padding-bottom: 3px; border-bottom: 2px solid #c5d8f7; }
.cs-panel .group-head:first-child { margin-top: 0; }
.cs-panel .group-name { font-size: 13px; font-weight: 700; color: #1a3a6b; }
.cs-panel .group-meta { font-family: var(--sc-font-mono); font-size: 10px; color: #888; }

/* Hit cards, from search_view.py. */
.cs-panel .hit { background: #fff; border: 1px solid #dde3ed; border-radius: 6px; padding: 10px 12px; }
.cs-panel .hit:hover { border-color: #4a90d9; box-shadow: 0 1px 4px rgba(74,144,217,0.12); }
.cs-panel .hit.hidden, .cs-panel .group-head.hidden, .cs-panel .pair.hidden { display: none; }
.cs-panel .hit-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cs-panel .level-badge { display: inline-block; padding: 2px 7px; font-size: 10px; font-weight: 700; border-radius: 3px; font-family: var(--sc-font-mono); color: #fff; }
.cs-panel .level-0 { background: #c0392b; }
.cs-panel .level-1 { background: #d35400; }
.cs-panel .level-2 { background: #8e44ad; }
.cs-panel .score { font-size: 11px; color: #888; font-family: var(--sc-font-mono); margin-left: auto; }
.cs-panel .score .num { color: #1a3a6b; font-weight: 700; }
.cs-panel .section-chip { font-size: 11px; color: #16a085; font-weight: 600; }
.cs-panel .accession-chip { font-family: var(--sc-font-mono); font-size: 10px; color: #555; }
.cs-panel .form-chip { font-family: var(--sc-font-mono); font-size: 10px; background: #ecf0f1; color: #555; padding: 1px 5px; border-radius: 2px; }
.cs-panel .date-chip { font-family: var(--sc-font-mono); font-size: 10px; background: #eef6f0; color: #2c6e49; padding: 1px 5px; border-radius: 2px; }
.cs-panel .date-chip.period { background: #f0ecf6; color: #5b3e8e; }
.cs-panel .src-link { font-size: 10px; color: #2f6fae; text-decoration: none; }
.cs-panel .src-link:hover { text-decoration: underline; }
/* The clamp and the expander are ONE mechanism, so the clamp is gated on the
   script that operates it. Clamping without it would hide filing text behind a
   control that cannot be clicked. */
.cs-panel .hit-text { font-size: 12px; line-height: 1.5; color: #1a1a2e; white-space: pre-wrap; position: relative; }
.sc-ready .cs-panel .hit-text { max-height: 4.5em; overflow: hidden; }
.sc-ready .cs-panel .hit-text.expanded { max-height: none; }
.sc-ready .cs-panel .hit-text.has-overflow:not(.expanded)::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1.5em; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); pointer-events: none; }
.cs-panel .expand-link { display: inline-block; font-size: 11px; color: #2f6fae; cursor: pointer; margin-top: 4px; user-select: none; background: none; border: 0; padding: 0; font-family: inherit; }
.cs-panel .expand-link:hover { text-decoration: underline; }

.cs-panel .disclaimer { margin: 4px 14px 14px; padding: 8px 11px; background: #fff8e1; border: 1px solid #f3d27a; border-left: 3px solid #f1a700; border-radius: 4px; font-size: 11px; color: #6b5200; line-height: 1.45; }
.cs-panel .disclaimer strong { color: #8a6d00; }
.cs-panel .empty { text-align: center; padding: 24px; color: #888; font-size: 12px; }

/* Diff pairs, from diff_view.py. */
.cs-panel .counts-bar { background: #e8f0fe; border-bottom: 1px solid #c5d8f7; padding: 8px 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cs-panel .count-card { background: #fff; border: 1px solid #dde3ed; border-radius: 5px; padding: 4px 10px; font-size: 11px; }
.cs-panel .count-card .n { font-weight: 700; font-size: 14px; margin-right: 4px; }
.cs-panel .count-card.added .n { color: #27ae60; }
.cs-panel .count-card.removed .n { color: #c0392b; }
.cs-panel .count-card.modified .n { color: #e67e22; }
.cs-panel .count-card.reflow .n { color: #8e9bb0; }
.cs-panel .count-card.total { background: #1a3a6b; color: #fff; border-color: #1a3a6b; }
.cs-panel .count-card.total .n { color: #fff; }

.cs-panel .pair { background: #fff; border: 1px solid #dde3ed; border-radius: 6px; overflow: hidden; }
/* In a capped .scroller a flex column shrinks its children to fit; with 66
   pairs (Step 4) that squashed every card to a hairline. Cards keep their
   height and the scroller scrolls. */
.cs-panel .scroller > .pair { flex-shrink: 0; }
.cs-panel .pair-summary { cursor: pointer; width: 100%; text-align: left; background: none; border: 0; padding: 0; font: inherit; display: block; }
.cs-panel .pair-summary:hover { background: #eef3fb; }
.cs-panel .pair-head { padding: 5px 10px; background: #f4f7fd; border-bottom: 1px solid #dde3ed; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; }
.cs-panel .pair-head .ct { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 3px; color: #fff; }
.cs-panel .ct-ADDED { background: #27ae60; }
.cs-panel .ct-REMOVED { background: #c0392b; }
.cs-panel .ct-MODIFIED { background: #e67e22; }
.cs-panel .pair-head .sect { font-weight: 700; color: #16a085; font-size: 11px; }
.cs-panel .pair-head .clause-ids { font-family: var(--sc-font-mono); font-size: 10px; color: #888; }
.cs-panel .pair-head .sim { font-family: var(--sc-font-mono); font-size: 10px; color: #555; margin-left: auto; }
.cs-panel .pair-head .expand-caret { font-size: 10px; color: #888; margin-left: 4px; }
.cs-panel .pair-excerpt { padding: 4px 10px 7px; font-size: 11px; color: #556b7a; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Same rule as the hit clamp: the collapsed state exists only where something
   can open it. With no script every pair is open and both sides are readable. */
.cs-panel .pair-body { display: grid; grid-template-columns: 1fr 1fr; }
.sc-ready .cs-panel .pair:not(.expanded) .pair-body { display: none; }
.sc-ready .cs-panel .pair.expanded .pair-excerpt { display: none; }
.cs-panel .col { padding: 8px 10px; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; min-height: 30px; max-height: 18em; overflow: auto; }
.cs-panel .col.old { background: #fef5f3; border-right: 1px solid #f5c6cb; }
.cs-panel .col.new { background: #f0f9f1; }
.cs-panel .col.empty { color: #a0a6b0; font-style: italic; }
.cs-panel .pair.added .col.old { background: #f8f9fa; }
.cs-panel .pair.removed .col.new { background: #f8f9fa; }
@media (max-width: 900px) {
    .cs-panel .pair-body { grid-template-columns: 1fr; }
    .cs-panel .col.old { border-right: 0; border-bottom: 1px solid #f5c6cb; }
}

/* Plain data tables in the same idiom (resolve, financials, holders). */
.cs-panel table { width: 100%; border-collapse: collapse; background: #fff; }
.cs-panel th, .cs-panel td { text-align: left; padding: 5px 10px; border-bottom: 1px solid #eef1f6; font-size: 12px; }
.cs-panel th { background: #f4f7fd; color: #1a3a6b; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
.cs-panel td.mono, .cs-panel td.num { font-family: var(--sc-font-mono); }
.cs-panel td.num, .cs-panel th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cs-panel tr.is-focus td { background: #fff8e1; font-weight: 700; }
.cs-panel .panel-scroll { overflow-x: auto; }
.cs-panel .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; padding: 10px 14px; }
.cs-panel .metric {
    background: #fff; border: 1px solid #dde3ed; border-radius: 6px; padding: 10px 12px;
}
.cs-panel .metric .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: #8a93a3; }
.cs-panel .metric .val { font-size: 21px; font-weight: 700; color: #1a3a6b; font-variant-numeric: tabular-nums; }
.cs-panel .metric .sub { font-size: 11px; color: #5d6570; }
.cs-panel .metric .concept { font-family: var(--sc-font-mono); font-size: 10px; color: #777; word-break: break-all; }
.cs-panel .metric .delta { font-weight: 700; color: #1f7a4d; font-variant-numeric: tabular-nums; }

/* --- 5. The collapsed strip ------------------------------------------------ */
/* FACT (search_view.py, render()): the strip is what a filing search renders
   when the tool was called WITHOUT show_panel. With show_panel=true the full
   panel renders straight away. So there is no strip-to-panel unfold on this
   page: the one call that asked for the panel shows the panel, and the four
   that did not show the strip, which is exactly what a reader sees. */
.cs-strip {
    margin: 8px 14px;
    padding: 7px 11px;
    background: #f4f7fd;
    border: 1px solid #dde3ed;
    border-radius: 4px;
    font-size: 11px;
    color: #556;
}
.cs-strip .strip-link { color: #1a3a6b; font-weight: 700; text-decoration: underline; }

/* Tools that bind no view say so, the way the USPTO page does. */
.cs-binds {
    font-size: 11px;
    color: #6b7a90;
    margin: -4px 0 10px;
    padding-left: 13px;
    border-left: 3px solid transparent;
}
.cs-binds code {
    font-family: var(--sc-font-mono);
    /* The site's global code style is a dark chip, which read as a selection
       highlight sitting under a tool strip. Here it is a quiet inline token. */
    background: #eef1f6;
    color: #3d4756;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.95em;
}

/* --- 6. The agreement rail ------------------------------------------------ */
.cs-rail { display: flex; gap: clamp(1rem, 2.5vw, 2rem); align-items: stretch; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.cs-rail > * { flex: 0 0 clamp(21rem, 34vw, 30rem); }
.cs-card {
    background: #fff;
    border: 1px solid var(--cs-hair);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(22, 40, 32, 0.05), 0 8px 24px rgba(22, 40, 32, 0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cs-card h3 { margin: 0; font-size: var(--sc-t-lg); font-family: var(--sc-font-display); }
.cs-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 0.94em; }
.cs-card dt { color: var(--sc-ink-soft); font-size: 0.86em; text-transform: uppercase; letter-spacing: 0.04em; }
.cs-card dd { margin: 0; }
.cs-card--lead {
    background: transparent; border: 0; box-shadow: none; justify-content: center;
    flex: 0 0 clamp(24rem, 40vw, 36rem);
}
.cs-card--note { background: #f4f6f9; box-shadow: none; }

/* Above 640px the site header sticks over the pinned stages, so each stage is
   the viewport less the header. The stage's own air is trimmed to match, and
   the rail's agreement and note cards are set wider, so their text runs to
   fewer lines and the tallest card fits the stage (at 900px tall the note
   card ran 908 to 1,176px against 799px of stage). The panels' result lists
   are fitted from session.js. */
@media not all and (max-width: 640px) {
    .cs-stage { padding-block: clamp(0.5rem, 2vh, 1.25rem); }
    .cs-rail > article.cs-card { flex-basis: clamp(26rem, 34vw, 30rem); }
    .cs-rail > .cs-card--note { flex-basis: clamp(34rem, 44vw, 40rem); }
}
@media (prefers-reduced-motion: no-preference) {
    .sc-ready .cs-rail > * + * {
        opacity: clamp(0.55, calc(var(--sc-p, 1) * 3), 1);
        transition: opacity 220ms linear;
    }
}

/* --- 7. Reveal figure, close composer ------------------------------------- */
.cs-reveal { border-radius: 12px; overflow: hidden; }
.cs-composer {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--cs-hair);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(22, 40, 32, 0.05), 0 8px 24px rgba(22, 40, 32, 0.06);
}
.cs-composer label,
.cs-composer .cs-composer__label { flex-basis: 100%; margin: 0; font-size: 0.86em; color: var(--sc-ink-soft); }
.cs-composer input {
    flex: 1 1 20rem;
    min-width: 0;
    font: inherit;
    font-size: 0.95em;
    padding: 10px 12px;
    border: 1px solid var(--cs-hair);
    border-radius: 10px;
    background: #fbfcfd;
    color: var(--sc-ink);
}
.cs-composer button {
    font: inherit;
    font-size: 0.92em;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--sc-accent);
    background: var(--sc-accent);
    color: var(--sc-accent-ink);
    cursor: pointer;
}
.cs-composer button:hover { background: #163a2e; }
/* The walkthrough puts each prompt in the same composer: the prompt keeps its
   own block (it is several lines long), and the button sits under it. */
.cs-composer .sample-prompt { flex: 1 1 100%; margin: 0; }
/* The prompt carousel (_edgar_panels.html prompt_carousel): one prompt in a
   field-like box, the same look as the composer's read-only input, with
   Previous and Next as outline buttons beside the filled Copy prompt. */
.cs-carousel__slides { flex: 1 1 100%; min-width: 0; }
.cs-carousel__prompt {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--cs-hair);
    border-radius: 10px;
    background: #fbfcfd;
    color: var(--sc-ink);
    font-size: 0.95em;
    line-height: 1.5;
}
.cs-carousel__controls { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cs-carousel__controls .cs-carousel__copy { margin-left: auto; }
.cs-composer button.cs-carousel__step { background: #ffffff; color: var(--sc-accent); }
.cs-composer button.cs-carousel__step:hover { background: #e9f2ec; }
.cs-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
/* The closing act keeps the case study's light ground in every OS theme, so
   its links must not pick up the site's dark-mode link color (a pale green
   that all but vanished on this light card). */
.cs-act--close a { color: var(--sc-accent); }

.cs-notlist { margin: 0; padding-left: 1.1em; }
.cs-notlist li { margin-bottom: 0.45em; }
.cs-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--cs-hair); border-radius: 10px; overflow: hidden; }
.cs-table th, .cs-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #eef1f6; font-size: 0.95em; }
.cs-table th { background: #f4f6f9; font-size: 0.86em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sc-ink-soft); }
.cs-scroll-x { overflow-x: auto; }

:where(.cs-act) a:focus-visible,
.cs-panel a:focus-visible,
.cs-panel button:focus-visible,
.cs-composer :focus-visible {
    outline: 2px solid var(--sc-accent);
    outline-offset: 2px;
}

/* The engine's stack rhythm is written for a six-act page with a lot of air.
   A nine-step transcript needs the air back: this is the single largest lever
   on total page length, and length is the reader's patience. */
.cs-act .sc-stack > * + * { margin-top: var(--sc-3); }
.cs-act .sc-stack > :is(h1, h2, h3) { margin-top: var(--sc-5); }
.cs-act .sc-stack > :is(h1, h2, h3):first-child { margin-top: 0; }
.cs-bubble h2.cs-heading { margin-top: 1.1em; }

/* A pinned stage has one viewport to hold a whole turn: the prompt, its tool
   calls and the panel the calls drew. On a phone the prompts are four or five
   lines and the panel is the point, so the bubble is capped and scrolls rather
   than pushing the panel off the bottom. The prompt stays verbatim and stays
   readable; what changes is that the act's own content is on screen during the
   act, which is also what the verification harness measures contrast against. */
@media (max-width: 900px) {
    .cs-stage .cs-turn--user .cs-bubble {
        max-height: 7.5em;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .cs-stage .cs-tools { max-height: 5.5em; overflow-y: auto; }
}
/* The closing act (the prompt carousel, the links and the disclaimer) is
   taller than a phone's viewport, more so on the long ninth prompt, and a
   pinned stage clips what does not fit at both ends, which took the "Run it
   yourself" heading with it. Below 900px it scrolls as an ordinary block
   instead: the stage stops pinning and the act drops the engine's inline
   height (110vh), which the content would otherwise run past. */
@media (max-width: 900px) {
    .cs-act--close { height: auto !important; }
    .cs-act--close .cs-stage { position: relative; height: auto; overflow: visible; }
}


/* --- 8. Resolve Parties, the CIK guard ------------------------------------- */
/* Copied from resolve_view.py and namespaced. */
.cs-panel .rp-summary { background: #e8f0fe; border-bottom: 1px solid #c5d8f7; padding: 6px 12px; font-size: 11px; color: #1a3a6b; }
.cs-panel .rp-wrap { margin: 12px 14px; background: #fff; border: 1px solid #dde3ed; border-radius: 6px; overflow: hidden; }
.cs-panel .rp-wrap table { font-size: 12px; }
.cs-panel .rp-wrap th { background: #f4f7fd; padding: 6px 9px; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: #1a3a6b; border-bottom: 1px solid #dde3ed; }
.cs-panel .rp-wrap td { padding: 7px 9px; border-top: 1px solid #eef1f6; border-bottom: 0; vertical-align: top; }
.cs-panel .rp-wrap tbody tr:hover { background: #f4f7fd; }
.cs-panel tr.held td:first-child { box-shadow: inset 3px 0 0 #16a085; }
.cs-panel tr.unheld { color: #9aa3b2; }
.cs-panel tr.unheld .rp-name { font-weight: 500; }
.cs-panel tr.rp-child td:first-child { padding-left: 26px; }
.cs-panel tr.rp-child { background: #fbfcfe; }
.cs-panel tr.rp-child[hidden] { display: none; }
.cs-panel tr.rp-child .rp-name { font-weight: 600; }
.cs-panel .rp-toggle { cursor: pointer; user-select: none; display: inline-block; margin-right: 5px; color: #1a3a6b; font-size: 10px; font-weight: 700; background: none; border: 0; padding: 0; font-family: inherit; }
.cs-panel .rp-toggle .caret { display: inline-block; transition: transform 0.1s; }
.cs-panel .rp-toggle[aria-expanded="true"] .caret { transform: rotate(90deg); }
.cs-panel .via { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 0.3px; }
.cs-panel .rp-name { font-weight: 700; color: #1a1a2e; }
.cs-panel .rp-ticker { font-family: var(--sc-font-mono); font-size: 11px; color: #555; }
.cs-panel .mono-cell { font-family: var(--sc-font-mono); font-size: 11px; color: #1a3a6b; font-weight: 700; }
.cs-panel .flag { display: inline-block; padding: 1px 6px; font-size: 9px; font-weight: 700; border-radius: 8px; }
.cs-panel .flag.yes { background: #16a085; color: #fff; }
.cs-panel .flag.no { background: #ecf0f1; color: #888; }
.cs-panel .tier { display: inline-block; padding: 1px 6px; font-size: 9px; font-weight: 700; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.4px; }
.cs-panel .tier.full { background: #16a085; color: #fff; }
.cs-panel .tier.none { background: #ecf0f1; color: #888; }
.cs-panel .tier-span { font-size: 10px; color: #666; margin-left: 4px; }
.cs-panel .rp-chip { display: inline-block; padding: 1px 6px; font-size: 9px; font-weight: 600; border-radius: 8px; background: #eef3fb; color: #1a3a6b; border: 1px solid #d4e0f2; margin: 1px 2px 1px 0; }
.cs-panel .rp-chip.lineage { background: #eaf7f2; color: #0f7a5f; border-color: #b8e4d4; }
.cs-panel .role { opacity: 0.75; }
.cs-panel .rp-score { font-size: 10px; color: #888; }
.cs-panel .rp-src { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 0.3px; }

/* --- 9. Financial Facts ---------------------------------------------------- */
/* Copied from financials_view.py: the scope and resolved-metric banners, the
   Sort and Excel controls, and the fact rows. The controls work; session.js
   ports FACT_SORT_KEYS and the TSV builders. */
.cs-panel .resolved { background: #fbfcfe; border-bottom: 1px solid #eef1f6; padding: 6px 12px; font-size: 11px; color: #555; }
.cs-panel .resolved b { color: #1a3a6b; }
.cs-panel .controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #fbfcfe; border-bottom: 1px solid #eef1f6; padding: 6px 12px; font-size: 11px; }
.cs-panel .controls .grp { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; }
.cs-panel .controls .lbl { color: #888; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; margin-right: 2px; }
.cs-panel .btn { border: 1px solid #c5d8f7; background: #fff; color: #1a3a6b; border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer; font-family: inherit; }
.cs-panel .btn:hover { background: #eef3fb; }
.cs-panel .btn.active { background: #1a3a6b; color: #fff; border-color: #1a3a6b; }
.cs-panel .btn .arrow { font-size: 9px; opacity: 0.8; margin-left: 2px; }
.cs-panel .copy-status { font-size: 10px; color: #16a085; font-weight: 600; }
.cs-panel .concept { font-weight: 700; color: #1a1a2e; font-family: var(--sc-font-mono); font-size: 11px; }
.cs-panel .fact-label { font-size: 10px; color: #888; }
.cs-panel .unit-cell { font-size: 9px; color: #888; }
.cs-panel .ctx { font-size: 9px; color: #888; }
.cs-panel .pfy { display: inline-block; padding: 0 5px; font-size: 10px; font-weight: 700; border-radius: 3px; background: #eef3fb; color: #1a3a6b; }
.cs-panel .src.chip { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px; border: 1px solid #c5d8f7; border-radius: 10px; background: #fff; color: #1a3a6b; text-decoration: none; white-space: nowrap; }
.cs-panel .src.chip:hover { background: #1a3a6b; color: #fff; }
.cs-panel .copy-fallback textarea { width: 100%; height: 6em; font-family: var(--sc-font-mono); font-size: 10px; }
.cs-panel .foot-note { padding: 8px 12px; font-size: 11px; color: #6b7a90; }

/* --- 10. Filing Timeline --------------------------------------------------- */
/* Copied from timeline_view.py. */
.cs-panel .issuer-chip { font-family: var(--sc-font-mono); font-size: 11px; background: #4a90d9; padding: 2px 7px; border-radius: 4px; color: #fff; }
.cs-panel .parties { font-size: 12px; opacity: 0.92; }
.cs-panel .info-bar { background: #eef3fb; border-bottom: 1px solid #c5d8f7; padding: 7px 14px; font-size: 11px; color: #1a3a6b; line-height: 1.5; }
.cs-panel .tl-wrap { padding: 8px 14px 14px; overflow-x: auto; }
.cs-panel .tl-wrap table { border: 1px solid #dde3ed; border-radius: 6px; overflow: hidden; }
.cs-panel .tl-wrap thead { background: #1a3a6b; }
.cs-panel .tl-wrap th { background: #1a3a6b; color: #fff; padding: 7px 10px; font-size: 11px; }
.cs-panel .tl-wrap td { padding: 6px 10px; border-top: 1px solid #eef1f6; border-bottom: 0; vertical-align: top; }
.cs-panel .tl-wrap tbody tr:hover { background: #f4f7fd; }
.cs-panel .form-badge { display: inline-block; padding: 2px 7px; font-size: 10px; font-weight: 700; border-radius: 3px; font-family: var(--sc-font-mono); background: #7f8c8d; color: #fff; }
.cs-panel .item-codes { font-size: 10px; color: #888; font-family: var(--sc-font-mono); }
.cs-panel .form-badge.form-8k { background: #4a90d9; }
.cs-panel .tl-doc { font-size: 10px; color: #888; margin-top: 2px; font-family: var(--sc-font-mono); word-break: break-all; }
.cs-panel tr.is-amendment td:first-child { border-left: 3px solid #e67e22; }
.cs-panel tr.is-amendment td { background: #fdf5ea; }
.cs-panel .amendment-tag { display: inline-block; margin-left: 5px; font-size: 9px; padding: 1px 5px; background: #e67e22; color: #fff; border-radius: 2px; font-weight: 700; }
.cs-panel .hdr-pill.pill-inert { cursor: default; opacity: 0.72; }

/* --- 11. Institutional Holders, a manager's positions ---------------------- */
/* Copied from institutional_holders_view.py. */
.cs-panel .coverage-note { background: #fdf6e3; border-bottom: 1px solid #f0e3bb; padding: 5px 12px; font-size: 10px; color: #8a6d1a; }
.cs-panel .name { font-weight: 700; color: #1a1a2e; }
.cs-panel .sub { font-size: 10px; color: #888; }
.cs-panel .pct-bar { position: relative; background: #eef1f6; border-radius: 3px; height: 12px; min-width: 70px; }
.cs-panel .pct-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: #7ba3d9; border-radius: 3px; }
.cs-panel .pct-bar .lbl { position: absolute; left: 0; right: 4px; top: 0; bottom: 0; font-size: 9px; text-align: right; line-height: 12px; color: #1a3a6b; font-family: var(--sc-font-mono); }
.cs-panel .btn.pill-inert { cursor: default; }
.cs-panel a.accession { font-family: var(--sc-font-mono); font-size: 11px; color: #2f6fae; text-decoration: none; }
.cs-panel a.accession:hover { text-decoration: underline; }
.cs-panel .cap-note { text-align: center; padding: 10px; font-size: 11px; color: #556; background: #f4f7fd; border-top: 1px solid #dde3ed; }
.cs-panel .cap-note a { color: #1a3a6b; font-weight: 700; }
.cs-panel .docgroup-head { padding: 6px 10px; background: #eef3fb; border-bottom: 1px solid #dde3ed; font-size: 11px; color: #1a3a6b; display: flex; }
.cs-panel .docgroup-count { margin-left: auto; color: #556; }

/* Two calls in one turn stack their panels rather than sitting side by side:
   the reader reads them in the order the tool was called. */
.cs-panelstack { display: flex; flex-direction: column; gap: 10px; }

/* A caption under a live panel, not under a screenshot. */
figure.panel-caption { margin: 6px 0 18px; }
figure.panel-caption figcaption { font-size: 0.92em; color: var(--sc-ink-soft); line-height: 1.55; }

/* A section that continues the turn above it rather than starting a new one:
   two full section paddings back to back left a hand's width of white in the
   middle of one answer. */
.cs-act--tight { padding-bottom: 0; }
.cs-act--tight + .sc-section { padding-top: var(--sc-3); }

/* The site's global code chip is dark, which reads as a selection highlight
   inside an assistant turn. Inline tokens in a turn are quiet. */
.cs-bubble code {
    background: #eef1f6;
    color: #3d4756;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--sc-font-mono);
    font-size: 0.95em;
}

/* "Read the whole memo" (Step 9, both pages): the composer's filled-pill look,
   with the Word download as the outline variant beside it. Fixed colors, so
   the site's dark-mode link color cannot reach them. */
.cs-memo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; }
a.cs-memo-btn {
    display: inline-block;
    font-weight: 600;
    font-size: 0.92em;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--sc-accent);
    background: var(--sc-accent);
    color: var(--sc-accent-ink);
    text-decoration: none;
}
a.cs-memo-btn:hover { background: #163a2e; color: var(--sc-accent-ink); }
a.cs-memo-btn--secondary { background: #ffffff; color: var(--sc-accent); }
a.cs-memo-btn--secondary:hover { background: #e9f2ec; color: var(--sc-accent); }
a.cs-memo-btn:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }