.mley-article-graph { --ag-height:380px; --ag-accent:#b52b63; --ag-article:#146d62; --ag-law:#95641b; --ag-node-ink:#fff; --ag-outgoing:#2563eb; --ag-incoming:#b45309; --ag-other:#788494; }
:root[data-theme="dark"] .mley-article-graph { --ag-accent:#ef78a5; --ag-article:#54c9ae; --ag-law:#ecc575; --ag-node-ink:#172532; --ag-outgoing:#7db6ff; --ag-incoming:#f5b46b; --ag-other:#a4b0c0; }
.article-graph-toolbar,.article-graph-filters,.article-graph-legend { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:1rem 0; }
.article-graph-toolbar button[aria-pressed="true"] { box-shadow:inset 0 -3px var(--ag-accent); font-weight:700; }
.article-graph-filters { align-items:flex-end; }
.article-graph-status:empty { display:none; }
.article-graph-status.is-partial { padding:.75rem 1rem; border-left:3px solid var(--ag-accent); border-radius:0 10px 10px 0; background:var(--bg-surface-2,#f7f9fb); color:var(--ag-accent) !important; font-weight:600; line-height:1.5; }
.article-graph-filters label { font-size:.85rem; margin:0; min-width:0; max-width:100%; flex:1 1 180px; }
.article-graph-filters .form-control { width:100%; max-width:100%; }
.article-graph-filters label:has([data-graph-section]) { flex-basis:100%; }
.article-graph-check { padding:.4rem; }
.article-graph-legend { color:var(--text-muted,#5a6470); font-size:.8rem; gap:1rem; }
.article-graph-legend span { display:inline-flex; align-items:center; gap:.4rem; }
.article-graph-legend [hidden] { display:none; }
.article-graph-arrow { position:relative; display:inline-block; width:28px; height:0; border-top:3px solid var(--ag-outgoing); }
.article-graph-arrow::after { content:""; position:absolute; right:-1px; top:-6px; border-left:8px solid var(--ag-outgoing); border-top:5px solid transparent; border-bottom:5px solid transparent; }
.article-graph-arrow.is-incoming { border-top-color:var(--ag-incoming); border-top-style:dashed; }
.article-graph-arrow.is-incoming::after { border-left-color:var(--ag-incoming); }
.article-graph-arrow.is-other { border-top-color:var(--ag-other); }
.article-graph-arrow.is-other::after { border-left-color:var(--ag-other); }
.article-graph-symbol { display:inline-block; width:13px; height:13px; border:2px solid var(--ag-article); border-radius:50%; }
.article-graph-symbol.is-current { background:var(--ag-accent); border-color:var(--ag-accent); }
.article-graph-symbol.is-law { border-radius:2px; width:20px; border-color:var(--ag-law); }
.article-graph-workspace { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; }
.article-graph-stage { height:var(--ag-height); min-width:0; border:1px solid var(--border-color,#d8dee5); border-radius:12px; background:var(--bg-surface-2,#f7f9fb); touch-action:none; }
/* Keep the server-rendered links readable while the map loads, in its final space. */
.js .mley-article-graph:not([data-graph-view]) .article-graph-list { height:var(--ag-height); overflow:auto; }
.article-graph-stage[hidden],.article-graph-list[hidden],.article-graph-details[hidden] { display:none !important; }
.article-graph-details { padding:1rem; border:1px solid var(--border-color,#d8dee5); border-radius:12px; background:var(--surface-raised,#fff); overflow-wrap:anywhere; max-height:450px; overflow:auto; }
.article-graph-details h3 { font-size:1.05rem; margin:0 0 .5rem; }
.article-graph-details blockquote { margin:1rem 0; padding-left:.8rem; border-left:3px solid var(--ag-accent); font-size:.9rem; }
.article-graph-details a,.article-graph-details button { margin:.2rem .5rem .2rem 0; }
.article-graph-list li { padding:.8rem 0; background:transparent; }
.article-graph-list .article-graph-list-actions { margin-top:.4rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.article-graph-list button { font-size:.85rem; }
.mley-article-graph :focus-visible { outline:3px solid var(--ag-accent); outline-offset:3px; }
.mley-article-graph.is-expanded { margin-top:0 !important; }
.article-graph-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-bottom:.75rem; border-bottom:1px solid var(--border-color,#d8dee5); }
.article-graph-heading { min-width:0; }
.article-graph-header h1 { font-size:1.2rem; line-height:1.35; margin:0 0 .2rem; }
.article-graph-law-link { color:var(--text-muted,#5a6470); font-size:.8rem; line-height:1.4; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.article-graph-law-link:hover { color:var(--ag-accent); }
.article-graph-modes,.article-graph-view-switch { display:inline-flex; align-items:center; gap:3px; padding:3px; border:1px solid var(--border-color,#d8dee5); border-radius:10px; background:var(--bg-surface-2,#f7f9fb); flex-shrink:0; }
.article-graph-modes a,.article-graph-modes span { padding:.35rem .6rem; font-size:.8rem; white-space:nowrap; border-radius:7px; color:var(--text-muted,#5a6470); }
.article-graph-modes a:hover { color:var(--ag-accent); background:var(--surface-raised,#fff); }
.article-graph-modes [aria-current="page"],.article-graph-toolbar button[aria-pressed="true"] { background:var(--surface-raised,#fff); color:var(--ag-accent); box-shadow:0 1px 3px rgba(0,0,0,.08); font-weight:600; }
.article-graph-toolbar { position:relative; gap:.5rem; margin:.75rem 0; }
.article-graph-toolbar .btn,.article-graph-map-tools .btn { min-height:34px; border-radius:8px; font-size:.82rem; box-shadow:none; }
.article-graph-view-switch .btn { border:0; background:transparent; min-height:28px; padding:.25rem .6rem; }
.article-graph-view-switch button[aria-pressed="true"] { background:var(--surface-raised,#fff); }
.article-graph-search { display:flex; align-items:center; gap:.5rem; margin:0 auto 0 0; min-width:0; }
.article-graph-search label { font-size:.82rem; margin:0; color:var(--text-muted,#5a6470); }
.article-graph-search input { width:100px; min-width:0; height:34px; }
.article-graph-filter-menu > summary { display:flex; align-items:center; gap:.45rem; cursor:pointer; list-style:none; }
.article-graph-filter-menu > summary::-webkit-details-marker,.article-graph-legend-panel > summary::-webkit-details-marker { display:none; }
.article-graph-filter-menu[open] > summary { color:var(--ag-accent); border-color:var(--ag-accent); }
.article-graph-filter-menu:not([open]) .article-graph-filter-panel { display:none; }
.article-graph-filter-count { min-width:1.3rem; text-align:center; border-radius:1rem; background:var(--ag-accent); color:var(--ag-node-ink); font-size:.75rem; }
.article-graph-filter-panel { position:absolute; top:calc(100% + 8px); right:0; z-index:10; width:min(480px,100%); padding:1rem; border:1px solid var(--border-color,#d8dee5); border-radius:12px; background:var(--surface-raised,#fff); box-shadow:0 12px 32px rgba(0,0,0,.15); }
.article-graph-filter-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.9rem; }
.article-graph-filter-heading button { font-size:1.2rem; line-height:1; }
.article-graph-filter-panel .article-graph-filters { margin:.75rem 0; gap:.8rem; }
.article-graph-filter-panel label { font-size:.8rem; }
.article-graph-filter-panel .article-graph-check { display:flex; align-items:center; gap:.5rem; flex-basis:100%; padding:0; }
.article-graph-filter-summary { margin:0 0 .65rem; font-size:.78rem; color:var(--text-muted,#5a6470); overflow-wrap:anywhere; }
.article-graph-reset { font-size:.75rem !important; }
.article-graph-canvas { position:relative; min-width:0; }
.article-graph-map-tools { position:absolute; right:12px; bottom:12px; display:flex; gap:2px; padding:3px; border:1px solid var(--border-color,#d8dee5); border-radius:10px; background:var(--surface-raised,#fff); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.article-graph-map-tools .btn { background:transparent; border:0; }
.article-graph-map-tools [data-graph-zoom] { min-width:34px; font-size:1.1rem; }
.mley-article-graph.is-expanded { --ag-height:clamp(360px,calc(100dvh - 275px),1100px); }
.article-graph-legend-panel { margin-top:.6rem; }
.article-graph-legend-panel > summary { display:none; list-style:none; cursor:pointer; font-size:.8rem; color:var(--text-muted,#5a6470); }
.article-graph-legend-panel .article-graph-legend { margin:0; gap:.4rem 1rem; font-size:.72rem; }
.article-graph-canvas[hidden],.article-graph-legend-panel[hidden],.article-graph-filter-summary[hidden],.article-graph-reset[hidden],.article-graph-filter-count[hidden] { display:none !important; }
@media(min-width:1100px) { .article-graph-workspace:has(.article-graph-details:not([hidden])) { grid-template-columns:minmax(0,1fr) 310px; } }
@media(max-width:600px) { .mley-article-graph:not(.is-expanded) { --ag-height:330px; } .article-graph-toolbar .btn { padding:.45rem .6rem; } .article-graph-filters label { flex:1 1 45%; } .article-graph-details { max-height:none; } }
@media(max-width:639px) {
  .js .mley-article-graph:not([data-legend-ready]) .article-graph-legend { display:none; }
  .article-graph-header { flex-wrap:wrap; gap:.65rem; }
  .article-graph-header h1 { font-size:1.1rem; }
  .article-graph-law-link { font-size:.75rem; }
  .article-graph-modes { padding:2px; }
  .article-graph-modes a,.article-graph-modes span { padding:.3rem .6rem; }
  .article-graph-search { flex-basis:100%; margin:0 0 .2rem; }
  .article-graph-search input { flex:1; width:0; }
  .article-graph-filter-menu { margin-left:auto; }
  .article-graph-filter-panel .article-graph-filters label { flex-basis:100%; }
  .article-graph-toolbar .btn { min-height:38px; }
  .article-graph-legend-panel > summary { display:flex; align-items:center; justify-content:space-between; padding:.4rem 0; }
  .article-graph-legend-panel > summary::after { content:"+"; }
  .article-graph-legend-panel[open] > summary::after { content:"−"; }
  .article-graph-legend-panel .article-graph-legend { padding:.4rem 0; }
}