/* The USPTO connectors' MCP App panels, and the transcript furniture around
   them, as one stylesheet shared by two pages.
   -------------------------------------------------------------------------
   Linked by BOTH /products/uspto-bundle/case-study and
   /products/uspto-bundle/walkthrough, because templates/_uspto_panels.html is
   shared by both and a shared macro with a private stylesheet is a macro that
   renders unstyled on one of its two pages.

   Every rule under .us-panel is copied from the production view modules:
       uspto_pfw_mcp/src/patent_filewrapper_mcp/ui/views.py
           SEARCH_RESULTS_HTML, FAMILY_VIEW_HTML, XML_VIEW_HTML, DOWNLOADS_HTML
       uspto_ptab_mcp/src/ptab_mcp/ui/views.py          SEARCH_RESULTS_HTML
       uspto_fpd_mcp/src/fpd_mcp/ui/views.py            SEARCH_RESULTS_HTML
       uspto_enriched_citation_mcp/.../citation_results_view.py
       uspto_enriched_citation_mcp/.../oa_citations_view.py
       hypergraph_mcp/apps/graph_view.py
   Copied deliberately, not imported: these pages must render with no server
   and no connector.

   WHAT THIS FILE MAY NOT DO. It carries no page ground, no site-chrome
   override and no engine theme; the case study's session.css owns all three,
   and the walkthrough is an ordinary site page whose chrome belongs to
   base.html. So the tokens the panels need are declared here as a scoped
   fallback block rather than on :root, and session.css's own :root wins on
   the case study by cascade order. */

/* The panel tokens. On the case study these are already set by session.css's
   :root; on the walkthrough this block is where they come from. Declared on
   :root with a lower cascade position than session.css, which is linked
   after it. */
:root {
    --sc-ink: #1c1a17;
    --sc-ink-soft: #6b6459;
    --sc-accent: #7a2e1e;
    --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;
    --sc-2: 0.9rem;
    --up-rule: #ddd6c9;
    --up-rule-soft: #ece6da;
    --up-paper: #faf8f4;
    --up-paper-alt: #f3f0e8;
    --up-paper-cool: #eef1f4;
}

/* --- 4. The transcript: turns, tool strips, quotations -------------------- */
.up-turn { margin: 0 0 10px; }
.up-turn__who {
    font-family: var(--sc-font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9a9184;
    margin: 0 0 4px;
}
.up-turn--user .up-bubble {
    background: #fff;
    border: 1px solid var(--up-rule);
    border-left: 3px solid #b9ada0;
    padding: 11px 14px;
    color: #2a2721;
    white-space: pre-line;
    font-size: 0.92em;
    line-height: 1.5;
}
.up-turn--assistant .up-bubble {
    background: transparent;
    padding: 0;
    color: var(--sc-ink);
    /* A twelve-prompt transcript set at a magazine measure runs to sixty
       viewport-heights. The measure here is the wide end of comfortable
       rather than the middle of it, and the leading is set for reading a
       record rather than reading an essay. Both are length levers that cost
       no content. */
    font-size: 0.95em;
    line-height: 1.55;
}
.up-bubble p { margin: 0 0 0.55em; max-width: 82ch; }
.up-bubble p:last-child { margin-bottom: 0; }
.up-bubble ul, .up-bubble ol { margin: 0 0 0.55em; padding-left: 1.15em; max-width: 80ch; }
.up-bubble li { margin-bottom: 0.2em; }
.up-bubble code {
    font-family: var(--sc-font-mono);
    font-size: 0.88em;
    background: #f1ede4;
    padding: 1px 4px;
    border-radius: 3px;
}

.up-tools { margin: 0 0 9px; display: flex; flex-direction: column; gap: 4px; }
.up-tool {
    font-family: var(--sc-font-mono);
    font-size: 11px;
    line-height: 1.45;
    background: #f4f1ea;
    border: 1px solid var(--up-rule-soft);
    border-left: 3px solid #b39a6d;
    padding: 6px 10px;
    color: #4a443b;
    /* Wraps rather than scrolls. Sixty tool strips is sixty scroll containers
       on a page this long, and a clipped argument list reads worse than a
       wrapped one anyway. */
    white-space: pre-wrap;
    overflow-wrap: break-word;
}
.up-tool b { color: #6b3f14; font-weight: 700; }
.up-tool .up-tool__novista {
    color: #8d8577;
    font-style: italic;
    white-space: normal;
}

.up-quote {
    margin: 0 0 0.9em;
    padding: 8px 14px;
    border-left: 3px solid #c9bda9;
    background: #fffdf8;
    color: #2a2721;
    max-width: 80ch;
}
.up-quote p { margin: 0 0 0.45em; }
.up-quote p:last-child { margin-bottom: 0; }
.up-src { font-size: 0.9em; color: var(--sc-ink-soft); }
.up-caveat {
    font-size: 0.9em;
    color: var(--sc-ink-soft);
    border-top: 1px solid var(--up-rule);
    padding-top: 8px;
    margin-top: 10px;
    max-width: 66ch;
}

/* Prose tables, set as printed tables rather than as UI. */
.up-scroll-x { overflow-x: auto; margin: 0 0 0.7em; }
.up-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--up-rule);
    font-size: 0.86em;
}
.up-table th, .up-table td {
    text-align: left;
    padding: 5px 9px;
    border-bottom: 1px solid var(--up-rule-soft);
    vertical-align: top;
}
.up-table th {
    background: #f4f1ea;
    font-size: 0.86em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sc-ink-soft);
    font-family: var(--sc-font-text);
}
.up-table td.mono, .up-table td.num { font-family: var(--sc-font-mono); font-size: 0.94em; }
.up-table td.num, .up-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.up-notlist { margin: 0; padding-left: 1.15em; max-width: 80ch; }
.up-notlist li { margin-bottom: 0.35em; }

/* --- 5. The mock-document banners ---------------------------------------- */
/* These stay outside the disclosure control on purpose: a banner a reader has
   to open a card to see is not a banner. */
.up-banner {
    background: #fdf1ec;
    border: 1px solid #e5b5a4;
    border-left: 5px solid #a63c1c;
    padding: 12px 15px;
    margin: 0 0 10px;
    font-size: 0.93em;
    line-height: 1.6;
    color: #6f2a12;
    max-width: 68ch;
}
.up-banner strong { color: #8c2f14; }

/* Long administrative documents are disclosure cards, opened on scroll. The
   summary is a plate; the banner above it never collapses. */
.up-fold {
    border: 1px solid var(--up-rule);
    background: #fff;
    margin: 0 0 14px;
}
.up-fold > summary {
    cursor: pointer;
    list-style: none;
    padding: 10px 15px;
    font-family: var(--sc-font-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b3f14;
    background: #f4f1ea;
    border-bottom: 1px solid transparent;
}
.up-fold > summary::-webkit-details-marker { display: none; }
.up-fold > summary::before {
    content: "\25B8\00a0\00a0";
    color: #a1907a;
}
.up-fold[open] > summary { border-bottom-color: var(--up-rule); }
.up-fold[open] > summary::before { content: "\25BE\00a0\00a0"; }
.up-fold__body { padding: 12px 15px 14px; }
.up-fold__body > :first-child { margin-top: 0; }

/* --- 6. Panel frame, shared by all five servers -------------------------- */
/* The five MCP App views share one skeleton and differ only in an accent
   triple, so the skeleton is written once here and each panel sets its own
   four custom properties. */
.us-panel {
    color-scheme: light;
    --up-dark: #1a3a6b;
    --up-mid: #4a90d9;
    --up-tint: #e8f0fe;
    --up-edge: #c5d8f7;
    --up-card: #dde3ed;
    --up-filter: #f4f7fd;
    background: #f8f9fa;
    color: #1a1a2e;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid var(--up-card);
    border-radius: 8px;
    /* NOT overflow:hidden. A rounded clip on a box containing nested scroll
       containers, repeated fifteen times down a page this tall, crashes the
       renderer outright (found by the verification pass, reproducible at a
       fixed scroll position). The corners are rounded on the first and last
       children instead, which looks identical and composites normally. */
    margin: 0 0 14px;
    box-shadow: 0 1px 2px rgba(40, 32, 22, 0.06), 0 8px 24px rgba(40, 32, 22, 0.06);
}
.us-panel > :first-child { border-radius: 7px 7px 0 0; }
.us-panel > :last-child { border-radius: 0 0 7px 7px; }
.us-panel * { box-sizing: border-box; }
.us-panel [hidden] { display: none !important; }
.us-panel--ptab {
    --up-dark: #3d2a6b; --up-mid: #7a5fd0; --up-tint: #efe9fe;
    --up-edge: #d5c8f7; --up-card: #e0dcec; --up-filter: #f6f3fd;
}
.us-panel--fpd {
    --up-dark: #1e4d5c; --up-mid: #3d8ba3; --up-tint: #e6f2f6;
    --up-edge: #c2dde6; --up-card: #d8e4e8; --up-filter: #f2f8fa;
}
.us-panel--oa {
    --up-dark: #2d4a22; --up-mid: #5a8a3a; --up-tint: #eef6e8;
    --up-edge: #c3ddb3; --up-card: #dde3ed; --up-filter: #f4f8f1;
}

/* The window chrome that says "this is a panel a tool drew", the same device
   the EDGAR page uses, so a reader who has seen both reads them the same way. */
.us-panel__frame {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: #efece4;
    border-bottom: 1px solid var(--up-card);
    font-family: var(--sc-font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #857c6d;
}
.us-panel__frame span.dot { width: 8px; height: 8px; border-radius: 50%; background: #cdc4b4; }
.us-panel__frame .uri { margin-left: auto; text-transform: none; letter-spacing: 0; }

.us-panel .header { background: var(--up-dark); color: #fff; padding: 10px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.us-panel .header h1 { font-size: 14px; font-weight: 600; margin: 0; color: #fff; font-family: inherit; letter-spacing: 0; }
.us-panel .header .badge { background: var(--up-mid); border-radius: 4px; padding: 2px 7px; font-size: 11px; }
.us-panel .header .count { background: var(--up-mid); border-radius: 4px; padding: 2px 7px; font-size: 11px; }
.us-panel .header .refresh { margin-left: auto; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 11px; border-radius: 4px; padding: 3px 9px; font-family: inherit; }

.us-panel .summary-bar { background: var(--up-tint); border-bottom: 1px solid var(--up-edge); padding: 7px 14px; font-size: 12px; color: var(--up-dark); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.us-panel .summary-bar b { font-weight: 600; }
.us-panel .summary-bar .dim { color: #888; font-weight: 400; font-size: 11px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.us-panel .field-notice { background: #fffbe6; border-bottom: 1px solid #ffe58f; padding: 5px 14px; font-size: 11px; color: #7d5a00; line-height: 1.5; }
.us-panel .tip-bar { background: #fff9e6; border-bottom: 1px solid #ffe08a; padding: 5px 14px; font-size: 11px; color: #6b5000; line-height: 1.5; }
.us-panel .notes-bar { background: #fffbe6; border-bottom: 1px solid #ffe58f; padding: 5px 14px; font-size: 11px; color: #7d5a00; line-height: 1.55; }

.us-panel .filter-bar { background: var(--up-filter); border: 1px solid var(--up-edge); border-radius: 6px; margin: 8px 14px 0; padding: 7px 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.us-panel .sort-bar { background: var(--up-filter); border: 1px solid var(--up-edge); border-radius: 6px; margin: 6px 14px 0; padding: 5px 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.us-panel .filter-label { font-size: 10px; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-right: 2px; }
.us-panel .fdiv { width: 1px; background: var(--up-edge); height: 18px; margin: 0 4px; align-self: center; flex-shrink: 0; }
.us-panel .pill { border: 1px solid var(--up-edge); border-radius: 12px; padding: 2px 9px; font-size: 11px; font-weight: 700; cursor: pointer; background: #fff; color: var(--up-dark); user-select: none; font-family: inherit; white-space: nowrap; }
.us-panel .pill:hover { border-color: var(--up-mid); background: var(--up-tint); }
.us-panel .pill.active { background: var(--up-dark); color: #fff; border-color: var(--up-dark); }
.us-panel .pill-count { font-size: 9px; font-weight: 700; background: var(--up-tint); color: var(--up-dark); border-radius: 8px; padding: 0 4px; margin-left: 3px; }
.us-panel .pill.active .pill-count { background: rgba(255,255,255,0.25); color: #fff; }
.us-panel .sort-pill { border: 1px solid var(--up-edge); border-radius: 4px; padding: 2px 8px; font-size: 10px; font-weight: 600; cursor: pointer; background: #fff; color: #555; user-select: none; font-family: inherit; }
.us-panel .sort-pill.active { background: var(--up-dark); color: #fff; border-color: var(--up-dark); }
.us-panel .filter-result { font-size: 11px; color: #888; margin-left: auto; }
.us-panel .clear-link { font-size: 11px; color: #c0392b; cursor: pointer; text-decoration: underline; background: none; border: 0; padding: 0; font-family: inherit; }

.us-panel .container { padding: 10px 14px; }
.us-panel .scroller { overflow-y: auto; overscroll-behavior: contain; }
.us-panel .card { background: #fff; border: 1px solid var(--up-card); border-radius: 6px; margin-bottom: 8px; padding: 10px 12px; }
.us-panel .card:last-child { margin-bottom: 0; }
.us-panel .card:hover { border-color: var(--up-mid); box-shadow: 0 1px 4px rgba(74,144,217,0.15); }
.us-panel .card.hidden { display: none; }
.us-panel .card-title { font-weight: 600; font-size: 13px; margin: 0 0 5px; }
.us-panel .app-num { font-size: 11px; color: var(--up-mid); font-weight: 700; font-family: var(--sc-font-mono); margin: 0; }
.us-panel .proc-num { font-size: 12px; color: var(--up-mid); font-weight: 700; font-family: var(--sc-font-mono); margin: 0; }
.us-panel .pet-id { font-size: 11px; color: var(--up-mid); font-weight: 700; font-family: var(--sc-font-mono); margin: 0; }
.us-panel .meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; font-size: 11px; margin-top: 6px; }
.us-panel .meta--wide { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); color: #555; }
.us-panel .meta-item { display: flex; flex-direction: column; min-width: 0; }
.us-panel .meta-label { color: #888; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; }
.us-panel .meta-val { color: #1a1a2e; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-panel .actions { margin-top: 7px; display: flex; gap: 6px; flex-wrap: wrap; }
.us-panel .btn { display: inline-block; border: 1px solid transparent; border-radius: 4px; padding: 3px 9px; font-size: 11px; text-decoration: none; font-family: inherit; }
.us-panel .btn-primary { background: var(--up-dark); color: #fff; }
.us-panel .btn-primary:hover { background: var(--up-mid); }
.us-panel .btn-secondary { background: var(--up-tint); color: var(--up-dark); border-color: var(--up-edge); }
.us-panel .btn-secondary:hover { background: var(--up-edge); }
.us-panel .btn-inert { background: var(--up-dark); color: #fff; opacity: 0.55; cursor: default; }

.us-panel .status-badge, .us-panel .type-badge, .us-panel .decision-badge, .us-panel .badge-chip {
    display: inline-block; border-radius: 3px; padding: 1px 6px; font-size: 10px; font-weight: 600; color: #fff; margin-left: 6px;
}
.us-panel .status-granted { background: #27ae60; }
.us-panel .status-pending { background: #e67e22; }
.us-panel .status-abandoned { background: #888; }
.us-panel .type-IPR { background: #2b6cb0; font-weight: 700; }
.us-panel .type-Appeal { background: #276749; font-weight: 700; }
.us-panel .decision-DENIED { background: #9b2c2c; font-weight: 700; }
.us-panel .type-badge--soft { background: var(--up-tint); color: var(--up-dark); font-weight: 600; }
.us-panel .badge-examiner { background: var(--up-dark); font-weight: 600; margin-left: 0; }
.us-panel .badge-cat { background: #8e44ad; font-weight: 700; }
.us-panel .badge-x { background: #c0392b; font-weight: 700; }
.us-panel .badge-y { background: #e67e22; font-weight: 700; }
.us-panel .badge-a { background: #27ae60; font-weight: 700; }
.us-panel .badge-inoa { background: #5a8a3a; font-weight: 700; }
.us-panel .badge-action { background: #c0392b; font-weight: 700; }
.us-panel .badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 5px; }
.us-panel .badges > * { margin-left: 0; }

.us-panel .empty-result { text-align: center; padding: 24px; color: #888; font-size: 12px; }
.us-panel .passage { margin-top: 6px; background: #f0f4ff; border-left: 3px solid #4a90d9; padding: 4px 8px; font-size: 11px; color: #444; border-radius: 0 3px 3px 0; }
.us-panel .note-card { background: #fff9e6; border: 1px solid #ffe08a; border-radius: 4px; padding: 7px 12px; margin-bottom: 8px; font-size: 11px; color: #6b5000; }

/* Family view. */
.us-panel .gen-label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.4px; margin: 8px 0 4px; }
.us-panel .gen-label:first-child { margin-top: 0; }
.us-panel .node { background: #fff; border: 1px solid var(--up-card); border-radius: 6px; padding: 9px 11px; margin-bottom: 6px; }
.us-panel .node.queried { border-color: var(--up-dark); border-left: 4px solid var(--up-dark); background: var(--up-filter); }
.us-panel .node-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.us-panel .queried-tag { background: var(--up-dark); color: #fff; border-radius: 3px; padding: 1px 6px; font-size: 10px; font-weight: 700; }
.us-panel .rel-label { background: var(--up-tint); color: var(--up-dark); border: 1px solid var(--up-edge); border-radius: 3px; padding: 1px 6px; font-size: 10px; font-weight: 700; }
.us-panel .rel-desc { color: #888; font-size: 11px; }
.us-panel .fp-head { font-size: 12px; font-weight: 600; color: var(--up-dark); margin: 14px 0 6px; }
.us-panel .fp-row { background: #fff; border: 1px solid var(--up-card); border-radius: 6px; padding: 7px 11px; display: flex; gap: 14px; font-size: 11px; }

/* XML view. */
.us-panel .meta-strip { background: var(--up-tint); border-bottom: 1px solid var(--up-edge); padding: 8px 14px; }
.us-panel .meta-strip h2 { font-size: 14px; font-weight: 600; color: var(--up-dark); margin: 0 0 4px; font-family: inherit; }
.us-panel .meta-grid { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: #555; }
.us-panel .tabs { display: flex; background: #fff; border-bottom: 2px solid var(--up-card); padding: 0 14px; }
.us-panel .tab { padding: 8px 14px; font-size: 12px; font-weight: 600; color: #888; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; background: none; font-family: inherit; cursor: pointer; }
.us-panel .tab.active { color: var(--up-dark); border-bottom-color: var(--up-dark); }
.us-panel .claims-header { font-size: 11px; font-weight: 600; color: var(--up-dark); background: var(--up-tint); border: 1px solid var(--up-edge); border-radius: 4px; padding: 4px 10px; margin-bottom: 8px; }
.us-panel .claim { background: #fff; border: 1px solid var(--up-card); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; }
.us-panel .claim-num { font-size: 11px; font-weight: 700; color: var(--up-mid); font-family: var(--sc-font-mono); }
.us-panel .claim-type { border-radius: 3px; padding: 1px 5px; font-size: 9px; font-weight: 700; color: #fff; margin-left: 6px; }
.us-panel .claim-type-ind { background: var(--up-dark); }
.us-panel .claim-type-dep { background: #6c757d; }
.us-panel .claim-text { font-size: 12px; line-height: 1.6; color: #333; white-space: pre-wrap; margin: 4px 0 0; }

/* Recent downloads: shown in its empty state, because this session issued no
   download call. The button is inert by construction. */
.us-panel .dl-empty { text-align: center; padding: 40px 20px; color: #888; }
.us-panel .dl-empty .icon { font-size: 32px; }
.us-panel .dl-empty .text { font-size: 13px; }
.us-panel .dl-empty .hint { font-size: 11px; color: #aaa; }

/* A counter's text changes on every frame of its window. Give it a fixed box
   and containment so the write is a repaint and never a relayout of the
   chapters after it. */
.up-chapter [data-sc-count] {
    display: inline-block;
    min-width: 3ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
    contain: layout style;
}

/* Two page-voice labels that keep a reader from mistaking what they are
   looking at. `.up-behind` marks material the model saw but the chat never
   displayed; `.up-mocknote` marks a control in a mockup that does not do what
   the real one does. Both are the page talking, not the transcript, so they
   are set apart from the replay. */
.up-behind,
.up-mocknote {
    font-size: 0.86em;
    line-height: 1.55;
    color: var(--sc-ink-soft);
    background: #f4f1ea;
    border-left: 3px solid #b9ada0;
    padding: 6px 11px;
    margin: 0 0 8px;
    max-width: 70ch;
}
.up-mocknote { background: #f7f4ec; font-style: italic; }
.up-behind code { font-family: var(--sc-font-mono); font-size: 0.92em; }

/* Semantic-search hits. A scored list rather than a fused table, because that
   is the shape the retrieval server returns for a single query: one score per
   hit and, uniquely in this session, a link of its own. */
.up-hits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 10px; }
/* min-width and overflow-wrap let a long title, file name or citation wrap
   on a phone instead of pushing the card past the screen edge. */
.up-hit {
    min-width: 0;
    overflow-wrap: anywhere;
    border: 1px solid var(--up-rule);
    border-left: 3px solid #7a6a55;
    background: #fff;
    padding: 9px 12px;
}
.up-hit__head {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 0 0 3px;
}
.up-hit__rank {
    font-family: var(--sc-font-mono);
    font-size: 0.82em;
    color: var(--sc-ink-soft);
    min-width: 1.4em;
}
.up-hit__title { font-weight: 600; line-height: 1.35; flex: 1 1 auto; min-width: 0; }
.up-hit__score {
    font-family: var(--sc-font-mono);
    font-size: 0.84em;
    color: #4a6741;
    white-space: nowrap;
}
.up-hit__meta {
    font-size: 0.84em;
    color: var(--sc-ink-soft);
    margin: 0 0 5px;
}
/* Deliberately NOT a scroll container. The excerpt is trimmed to a paragraph
   in the prepare script instead, because five more capped scrollers is five
   more of what nearly killed this page's renderer. */
.up-hit__excerpt {
    font-size: 0.9em;
    line-height: 1.6;
    margin: 0;
    white-space: pre-line;
}

/* --- 6c. The hypergraph's graph panel ------------------------------------- */
/* Colours, sizes and the whole skeleton are hypergraph_mcp/apps/graph_view.py.
   The one deliberate difference is the viewBox: the real view has no viewBox
   and a fixed 560px stage, which cannot fit a 390px phone. */
.us-panel--graph {
    --hg-line: #b9c0c8;
    --hg-entity: #2563eb;
    --hg-entity-fill: #dbeafe;
    --hg-hyper: #7c3aed;
    --hg-hyper-fill: #ede9fe;
    --hg-shift: #dc2626;
    --hg-panel: #f6f7f9;
    --hg-chip: #e5e7eb;
    --hg-muted: #667;
    background: #fff;
    font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #1a1a1a;
}
/* Claude's own panel chrome, reproduced because it is what a reader sees. */
.hg-host {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-bottom: 1px solid #eceff2;
    background: #fbfcfd; font-size: 13px;
}
.hg-host__badge {
    width: 16px; height: 16px; border-radius: 4px; background: #e9d8c4;
    color: #7a5b32; font-size: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.hg-host__server { font-weight: 600; color: #1a1a1a; }
.hg-host__tool { color: var(--hg-muted); }
.hg-host__code { margin-left: auto; color: #9aa3ad; font-family: var(--sc-font-mono); }
.hg-hostfoot { display: flex; justify-content: center; padding: 10px 0 14px; }
.hg-hostfoot__btn {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e2e6ea;
    display: inline-flex; align-items: center; justify-content: center;
    color: #6b7280; background: #fff;
}

.hg-wrap { display: flex; align-items: stretch; }
.hg-stage { position: relative; flex: 1; min-width: 0; padding: 8px 0 0; }
.hg-title { position: absolute; top: 8px; left: 12px; margin: 0; font-weight: 700; font-size: 14px; }
.hg-svg { display: block; width: 100%; height: auto; cursor: grab; touch-action: pan-y; }
.hg-svg.panning { cursor: grabbing; }
.hg-legend {
    position: absolute; left: 10px; bottom: 8px; margin: 0;
    font-size: 11px; color: var(--hg-muted);
    background: rgba(255, 255, 255, 0.82); padding: 4px 8px; border-radius: 6px;
}
.hg-legend .sw { display: inline-block; width: 10px; height: 10px; margin: 0 3px -1px 8px; }
.hg-legend .sw--entity { background: var(--hg-entity); border-radius: 50%; }
.hg-legend .sw--hyper { background: var(--hg-hyper); }
.hg-legend .sw--shift { background: var(--hg-shift); border-radius: 50%; }

.hg-node { cursor: pointer; }
.hg-node text { fill: #1a1a1a; font-size: 11px; pointer-events: none; }
.hg-entity { fill: var(--hg-entity-fill); stroke: var(--hg-entity); stroke-width: 2; }
.hg-hyper { fill: var(--hg-hyper-fill); stroke: var(--hg-hyper); stroke-width: 2; }
.hg-badge { fill: var(--hg-shift); }
.hg-badge-text { fill: #fff; font-size: 9px; font-weight: 700; pointer-events: none; }
.hg-link { cursor: pointer; }
.hg-link line.vis { stroke: var(--hg-line); stroke-width: 1.5; }
.hg-link line.hit { stroke: transparent; stroke-width: 14; pointer-events: stroke; }
.hg-edge-label { fill: var(--hg-muted); font-size: 9px; pointer-events: none; }
.hg-edge-label.culled { opacity: 0; }
.hg-link:hover .hg-edge-label { opacity: 1; fill: #1a1a1a; }
.hg-link:hover line.vis { stroke: #1a1a1a; }
.hg-node:focus-visible rect,
.hg-node:focus-visible circle { outline: 2px solid var(--sc-accent); outline-offset: 2px; }

.hg-side {
    width: 250px; flex: 0 0 250px;
    border-left: 1px solid var(--hg-line);
    background: var(--hg-panel);
    padding: 10px 12px; overflow-y: auto; max-height: 34rem;
    scrollbar-gutter: stable;
}
.hg-side h3 { margin: 2px 0 6px; font-size: 13px; }
.hg-side .kind { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--hg-muted); }
.hg-side .fact { margin: 6px 0; }
.hg-side .role { display: inline-block; background: var(--hg-chip); border-radius: 8px; padding: 1px 7px; margin: 2px 3px 2px 0; font-size: 11px; }
.hg-side .shift {
    border-left: 3px solid var(--hg-shift); padding: 4px 8px; margin: 8px 0;
    background: #fff; border-radius: 0 6px 6px 0;
}
/* Framework-shift names come back with underscores and no spaces
   (Updated_Obviousness_Guidance_2024), so in a 250px column they run off the
   right edge unless they are allowed to break inside the word. */
.hg-side .shift .name {
    font-weight: 700;
    color: var(--hg-shift);
    overflow-wrap: anywhere;
}
.hg-side .shift .meta { font-size: 11px; color: var(--hg-muted); }
.hg-close {
    float: right; border: 0; background: none; color: var(--hg-muted);
    font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.hg-close:hover { color: #1a1a1a; }
@media (max-width: 900px) {
    .hg-wrap { flex-direction: column; }
    .hg-side { width: auto; flex: none; border-left: 0; border-top: 1px solid var(--hg-line); }
}


/* --- Focus, and the two scroll-container rules the panels depend on ------ */
:where(.up-chapter) a:focus-visible,
.us-panel a:focus-visible,
.us-panel button:focus-visible,
.up-fold > summary:focus-visible,
.up-composer :focus-visible {
    outline: 2px solid var(--sc-accent);
    outline-offset: 2px;
}

/* TWO CLASSES ON PURPOSE. `.up-scroll-x` below sets `overflow: visible`, and
   a capped table carries BOTH classes; written as a single class this rule
   lost the cascade to it (same specificity, declared earlier) and every capped
   table kept its 26rem height while it stopped clipping. The table then
   painted straight through the prose after it. John caught it in two places
   and it is what his overlap screenshots show. The two-class selector wins on
   specificity regardless of order, and lab/overlap.mjs now fails the build if
   any two text blocks overlap again. */
.up-scroll-x.up-scroll-x--tall {
    max-height: 26rem;
    overflow: auto;
    overscroll-behavior: contain;
}

/* SCROLL CONTAINERS ARE THE THIRD COST, and the one that finally fixed it.
   Every `overflow: auto` box is a composited scrolling layer with its own
   raster tiles, kept resident while it is anywhere near the viewport. This
   page had 31 of them against the EDGAR case study's 43, but across 43,000px
   rather than 16,000px, and the renderer died somewhere past 24,000px.
   Measured in a real Chrome: at 31 containers the page hangs partway down; at
   8 it holds a steady 17ms frame to the very end, on a page 2,600px TALLER.
   Length was not the variable. The number of scrolling layers was.

   So a prose table is not a scroll container on a wide screen: the content
   column is about 880px and these tables fit. Below 900px, where the folio
   column collapses and a wide table may not fit, the horizontal scroller comes
   back, on the platform whose overlay scrollbars make it cheap and which never
   showed the fault. Only the four capped tables and the four panel bodies
   scroll on desktop, and every one of them reserves its gutter. */
.up-scroll-x { overflow: visible; }
@media (max-width: 900px) {
    .up-scroll-x { overflow-x: auto; overflow-y: hidden; }
}

/* Every capped scroll container reserves its gutter, so the width its content
   is laid out into cannot change when a scrollbar appears. See the note
   above. */
.up-scroll-x.up-scroll-x--tall,
.us-panel .scroller,
.up-rules { scrollbar-gutter: stable; }

/* Long panels scroll inside themselves rather than growing the page. */
.us-panel .scroller--tall { max-height: 24rem; }
.us-panel .scroller--mid { max-height: 17rem; }

@media (max-width: 900px) {
    .us-panel .meta { grid-template-columns: 1fr 1fr; }
}

/* A cite_as link, drawn wherever a record carries one. Deliberately quiet:
   the citation is there to be clicked when a reader doubts a line, not to
   compete with the line for attention. */
.up-cite {
    color: #7a2e1e;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.up-cite:hover { text-decoration-thickness: 2px; }
.us-panel .up-cite { font-size: 0.92em; }
.up-cites {
    font-size: 0.86em;
    line-height: 1.7;
    color: var(--sc-ink-soft);
    margin: 4px 0 0;
}
.up-cites .up-cite { margin-right: 10px; white-space: nowrap; }

/* An empty result's own explanation, in the panel rather than only in the
   prose beside it. A zero that says why it is a zero is the product's
   answer to the hardest question a reader asks of an empty screen. */
.us-panel .empty-note {
    max-width: 62ch;
    margin: 6px auto 0;
    padding: 8px 12px;
    background: #f7f5f0;
    border-left: 3px solid #b9ada0;
    font-size: 0.86em;
    line-height: 1.6;
    color: #4a4640;
    text-align: left;
}

/* A TOOL RESULT, NOT A PANEL, and it must not be mistaken for one. No app
   chrome, no coloured header, no cards: a plain block in the reading face's
   monospace, the way the result actually arrives at the model. Used for
   PFW_get_oa_text, which binds no view at all, and for the scope and coverage
   notes that ride an empty search's TEXT result while its panel draws only
   "No proceedings found." */
.up-result {
    border: 1px solid var(--up-rule);
    border-left: 3px solid #b9ada0;
    background: #fbfaf7;
    padding: 10px 13px;
    margin: 0 0 14px;
    font-family: var(--sc-font-mono);
    font-size: 0.82em;
    line-height: 1.65;
    color: #35322c;
    white-space: pre-line;
    max-width: 78ch;
}
.up-result--sections { white-space: normal; }
.up-result__row + .up-result__row {
    border-top: 1px dashed var(--up-rule);
    margin-top: 10px;
    padding-top: 10px;
}
.up-result__head {
    margin: 0 0 4px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.up-result__fields {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 1px 12px;
    margin: 0;
}
.up-result__fields dt { color: var(--sc-ink-soft); }
.up-result__fields dd { margin: 0; }
.up-result__note {
    margin: 6px 0 0;
    font-family: var(--sc-font-text);
    font-size: 1.06em;
    line-height: 1.55;
    color: #4a4640;
}
.up-result__cite { margin: 6px 0 0; }
@media (max-width: 640px) {
    .up-result__fields { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
    .up-result__fields dd { margin: 0 0 4px; }
}

/* A page-voice line, distinct from everything quoted around it. The follow-up
   chapters are a transcript; these five lines are not, and a reader has to be
   able to tell which is which without being told twice. */
.up-fix {
    border-left: 3px solid #4a6741;
    background: #f2f5ef;
    padding: 9px 13px;
    margin: 10px 0 14px;
    font-size: 0.92em;
    line-height: 1.65;
    color: #33402f;
    max-width: 72ch;
}
.up-fix a { color: #33402f; }

/* Quoted tool text, grouped by the tool it came from. */
.up-result--notes { white-space: normal; font-family: var(--sc-font-text); font-size: 0.88em; }
.up-result--notes p { margin: 0 0 8px; }
.up-result--notes p:last-child { margin-bottom: 0; }
.up-result__from {
    font-family: var(--sc-font-mono);
    font-size: 0.86em;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--sc-accent);
    margin-top: 12px !important;
}
.up-result--notes .up-result__from:first-child { margin-top: 0 !important; }

/* AN INERT CONTROL THAT LOOKS LIKE A LINK IS A LIE, so the download chips are
   drawn as chips: no underline, no pointer, no href. Each real one is a
   single-use credential minted for one person, and the page prints its shape
   rather than its value. */
.up-chip {
    display: inline-block;
    border: 1px dashed #b9ada0;
    border-radius: 3px;
    background: #f4f1ea;
    padding: 2px 9px;
    font-family: var(--sc-font-mono);
    font-size: 0.82em;
    color: #6b6459;
    cursor: not-allowed;
    user-select: none;
}
.up-chip__note {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.82em;
    color: var(--sc-ink-soft);
}

/* The ordered call log: 70 lines, one JSON object each, wrapped rather than
   scrolled sideways, inside a disclosure card. */
.up-log {
    margin: 0;
    font-family: var(--sc-font-mono);
    font-size: 11px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    color: #35322c;
    max-height: 28rem;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}