* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
       margin: 0; padding: 0; color: #222; background: #fafafa; }
header { background: #2c3e50; color: white; padding: 1rem 2rem;
         box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
header a { color: white; text-decoration: none; }
header h1 { margin: 0; font-size: 1.4rem; font-weight: 500; }
nav.breadcrumb { font-size: 0.9rem; opacity: 0.85; margin-top: 0.3rem; }
nav.breadcrumb a { color: #cfe2f3; }
main { max-width: 1100px; margin: 2rem auto; padding: 0 2rem; }
h1.classname { font-size: 1.9rem; margin: 0 0 0.5rem 0; }
.fqn { color: #666; font-size: 0.9rem; margin-bottom: 1rem; font-family: monospace; }
.stereotype { display: inline-block; background: #eef; color: #336;
              padding: 0.1rem 0.5rem; border-radius: 3px;
              font-size: 0.8rem; margin-left: 0.5rem; vertical-align: middle; }
h2 { font-size: 1.2rem; color: #2c3e50; border-bottom: 1px solid #ddd;
     padding-bottom: 0.3rem; margin-top: 2rem; }
.definition { font-size: 1.05rem; line-height: 1.5; color: #444;
              background: white; padding: 1rem; border-left: 3px solid #2c3e50; }
.union-note { font-size: 0.95rem; line-height: 1.5; color: #5a4a1a;
              background: #fdf6e3; padding: 0.8rem 1rem; margin-top: 0.6rem;
              border-left: 3px solid #d4a017; }
.union-note code { background: #f3e9c9; padding: 0 0.2rem; border-radius: 2px; }
table { width: 100%; border-collapse: collapse; background: white;
        box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
th, td { padding: 0.6rem 0.8rem; text-align: left;
         border-bottom: 1px solid #eee; vertical-align: top; }
th { background: #f4f4f4; font-weight: 600; font-size: 0.9rem; color: #555; }
td.name { font-family: monospace; font-weight: 600; white-space: nowrap; }
td.type { font-family: monospace; color: #06c; }
td.mult { font-family: monospace; color: #999; white-space: nowrap; }
td.doc { color: #555; font-size: 0.95rem; }
a.classlink { color: #06c; text-decoration: none; }
a.classlink:hover { text-decoration: underline; }
.diagram { background: white; border: 1px solid #eee; position: relative; }
.diagram-viewport { overflow: auto; }
.diagram-stage { text-align: center; padding: 1rem; }
.diagram-stage object, .diagram-stage img, .diagram-stage svg { max-width: 100%; }
.diagram.is-interactive .diagram-viewport { height: 70vh; min-height: 320px;
    overflow: hidden; background: #fff; cursor: grab; touch-action: none;
    user-select: none; -webkit-user-select: none; -moz-user-select: none;
    /* position:relative makes the viewport the containing block for the absolute
       stage, and contain:paint forces the (will-change/transform composited)
       stage to be clipped to this box and confined to its own stacking context —
       otherwise panning the graph up lets it paint over the text above it. */
    position: relative; contain: paint; }
.diagram.is-interactive .diagram-viewport.grabbing { cursor: grabbing; }
.diagram.is-interactive .diagram-stage { position: absolute; top: 0; left: 0;
    padding: 0; transform-origin: 0 0; will-change: transform; }
.diagram.is-interactive .diagram-stage object,
.diagram.is-interactive .diagram-stage svg { max-width: none; display: block;
    pointer-events: none; }
.diagram.is-interactive .diagram-stage svg g.entity.clickable { pointer-events: auto;
    cursor: pointer; }
.diagram.is-interactive .diagram-stage svg g.entity.clickable:hover { opacity: 0.78; }
.diagram-toolbar { position: absolute; top: 8px; right: 8px; display: flex;
    gap: 4px; z-index: 5; }
.diagram-toolbar button { font: 600 13px/1 -apple-system, "Segoe UI", sans-serif;
    color: #fff; background: #2c3e50; border: none; border-radius: 4px;
    padding: 6px 9px; cursor: pointer; opacity: 0.85;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.diagram-toolbar button:hover { opacity: 1; }
.diagram-toast { position: absolute; bottom: 8px; right: 8px;
    background: rgba(44,62,80,0.92); color: #fff; padding: 6px 10px;
    border-radius: 4px; font-size: 12px; opacity: 0; transition: opacity 0.2s;
    pointer-events: none; z-index: 6; }
.diagram-toast.show { opacity: 1; }
.diagram pre { text-align: left; background: #f8f8f8; padding: 1rem;
               overflow-x: auto; font-size: 0.85rem; }
.overview-toggle { font: 600 13px/1 -apple-system, "Segoe UI", sans-serif;
    color: #fff; background: #2c3e50; border: none; border-radius: 4px;
    padding: 7px 12px; cursor: pointer; margin: 0 0 0.6rem; }
.overview-toggle:hover { opacity: 0.9; }
.diagram-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
    margin: 0 0 0.8rem; font-size: 0.85rem; color: #444; }
.legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.legend-swatch { width: 14px; height: 14px; border: 1px solid #404040;
    border-radius: 2px; display: inline-block; flex: none; }
.overview-section { position: relative; }
.overview-controls { position: sticky; top: 0; z-index: 6; background: #fafafa;
    padding: 0.5rem 0 0.3rem; }
.overview-controls .overview-toggle { margin: 0 0 0.5rem; }
.overview-controls .diagram-legend { margin: 0; }
/* Keep the diagram (whose interactive stage uses transform/will-change, i.e. a
   compositing layer) in its own stacking context BELOW the sticky controls, so
   panning/scrolling never paints the graph over the toggle + legend. */
.overview-section .diagram { z-index: 1; }
.empty { color: #999; font-style: italic; }
ul.classlist { list-style: none; padding: 0;
               display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
               gap: 0.5rem; }
ul.classlist li { background: white; padding: 0.6rem 0.8rem;
                  border: 1px solid #eee; border-radius: 4px; }
ul.classlist a { color: #06c; text-decoration: none; font-family: monospace;
                 font-weight: 600; }
ul.classlist .kind { color: #999; font-size: 0.8rem; margin-left: 0.5rem; }
.parent-chain { font-family: monospace; color: #555; }
.parent-chain .focus { color: #c00; font-weight: bold; }
.stereotype.inherited { background: #e8f5e9; color: #2e7d32; }
.stereotype.inherited a.classlink { color: #1b5e20; }