:root {
  --ink: #16221d;
  --ink-soft: #52615a;
  --paper: #f3f1e9;
  --paper-deep: #e7e3d7;
  --line: #c9c9be;
  --moss: #365b46;
  --moss-dark: #1c382c;
  --lichen: #b8c58f;
  --ochre: #c88a4a;
  --clay: #a8563a;
  --night: #17231e;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Manrope", system-ui, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --controls-width: 250px;
  --details-width: 330px;
}

/* Page shell */
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--night); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 2000; top: 10px; left: 10px; transform: translateY(-180%); padding: 10px 14px; color: var(--ink); background: #fff; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.map-page { min-height: calc(100vh - 88px); background: var(--paper); }
.map-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 470px); align-items: end; gap: 36px; padding: 28px clamp(22px, 4vw, 64px) 30px; border-bottom: 1px solid var(--line); }
.map-intro h1 { max-width: 780px; margin: 8px 0 0; font: 400 clamp(34px, 4.2vw, 58px)/1.04 var(--serif); letter-spacing: -0.04em; }
.map-intro__lede { max-width: 470px; margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.eyebrow { margin: 21px 0 0; color: var(--clay); font: 500 9px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--ink-soft); font: 9px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.breadcrumbs a, .breadcrumbs button { padding: 0; border: 0; color: inherit; background: none; text-decoration: none; cursor: pointer; }
.breadcrumbs a:hover, .breadcrumbs button:hover { color: var(--clay); }
.breadcrumbs strong { color: var(--ink); font-weight: 500; }

.map-app { position: relative; display: grid; grid-template-columns: var(--controls-width) minmax(430px, 1fr) var(--details-width); height: clamp(720px, calc(100vh - 220px), 860px); min-height: 610px; border-bottom: 1px solid var(--line); }
.map-controls, .map-details { min-width: 0; overflow-y: auto; background: #ebe9df; }
.map-controls { border-right: 1px solid var(--line); }
.map-details { border-left: 1px solid var(--line); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 20px; border-bottom: 1px solid var(--line); color: var(--clay); font: 500 9px/1.4 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.icon-button { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.mobile-close { display: none; }

/* Controls, filters, and search */
.search-wrap { position: relative; padding: 21px 18px 17px; border-bottom: 1px solid var(--line); }
.search-wrap > label, .filters legend, .legend > p { display: block; margin: 0 0 10px; color: var(--ink-soft); font: 500 9px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.search-field { position: relative; }
.search-field input { width: 100%; height: 42px; padding: 0 37px 0 12px; border: 1px solid #adb2a8; border-radius: 0; color: var(--ink); background: var(--paper); font-size: 12px; }
.search-field span { position: absolute; top: 8px; right: 12px; color: var(--moss); font-size: 20px; pointer-events: none; }
.search-results { position: absolute; z-index: 50; top: calc(100% - 13px); right: 18px; left: 18px; max-height: 250px; margin: 0; padding: 0; overflow-y: auto; border: 1px solid var(--line); background: #fff; box-shadow: 0 12px 24px rgba(22, 34, 29, .14); list-style: none; }
.search-results button { width: 100%; display: grid; gap: 3px; padding: 10px 12px; border: 0; border-bottom: 1px solid #deded5; text-align: left; background: #fff; cursor: pointer; }
.search-results button:hover, .search-results button:focus-visible { background: var(--paper); }
.search-results strong { font-size: 12px; font-weight: 600; }
.search-results small { color: var(--ink-soft); font: 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.search-empty { padding: 12px; color: var(--ink-soft); font-size: 11px; }
.overview-button { width: calc(100% - 36px); min-height: 43px; display: flex; align-items: center; justify-content: space-between; margin: 17px 18px 0; padding: 0 13px; border: 1px solid var(--moss); color: var(--paper); background: var(--moss); font-size: 11px; font-weight: 600; cursor: pointer; }
.overview-button:hover { background: var(--moss-dark); }
.filters { display: grid; gap: 0; margin: 0; padding: 22px 18px; border: 0; border-bottom: 1px solid var(--line); }
.filters label { display: grid; grid-template-columns: 17px 9px 1fr; align-items: center; gap: 8px; min-height: 34px; color: var(--ink-soft); font-size: 11px; cursor: pointer; }
.filters input { width: 14px; height: 14px; margin: 0; accent-color: var(--moss); }
.type-dot { width: 8px; height: 8px; display: inline-block; border: 1px solid currentColor; border-radius: 50%; }
.type-discipline { color: var(--moss); background: var(--moss); }
.type-practice { color: var(--ochre); background: var(--ochre); }
.type-method { color: #70816b; background: #70816b; }
.type-object { color: var(--clay); background: transparent; }
.type-context { border-radius: 0; color: #67746f; background: transparent; transform: rotate(45deg); }
.legend { padding: 21px 18px; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.legend > div { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.legend-line { width: 26px; height: 1px; display: inline-block; background: #75827b; }
.legend-line--shared { height: 0; border-top: 1px dashed var(--ochre); background: none; }
.legend small { display: block; margin-top: 16px; font-size: 10px; line-height: 1.55; }

/* Map canvas */
.map-workspace { position: relative; min-width: 0; overflow: hidden; background: #f7f5ef; }
.map-toolbar { position: relative; z-index: 20; min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--line); background: rgba(247, 245, 239, .94); }
.map-toolbar > div { display: flex; align-items: center; gap: 10px; }
.map-toolbar p { margin: 0; color: var(--ink-soft); font: 8px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.status-dot { width: 6px; height: 6px; display: inline-block; margin-right: 7px; border-radius: 50%; background: var(--lichen); box-shadow: 0 0 0 3px rgba(184, 197, 143, .22); }
.toolbar-button { min-height: 29px; padding: 0 9px; border: 1px solid var(--line); color: var(--ink-soft); background: transparent; font: 8px var(--mono); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.toolbar-button:hover { color: var(--ink); border-color: var(--moss); }
[data-action="open-controls"] { display: none; }
.map-canvas { position: absolute; inset: 48px 0 0; overflow: hidden; background-image: linear-gradient(rgba(54, 91, 70, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(54, 91, 70, .055) 1px, transparent 1px); background-size: 42px 42px; }
.map-stage { position: relative; min-width: 100%; min-height: 100%; }
.map-stage--scrollable { background-color: #f7f5ef; background-image: linear-gradient(rgba(54, 91, 70, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(54, 91, 70, .055) 1px, transparent 1px); background-size: 42px 42px; }
.map-canvas::after { position: absolute; inset: 22px; border: 1px solid rgba(82, 97, 90, .11); pointer-events: none; content: ""; }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.edge-path { fill: none; stroke: #9ba39d; stroke-width: 1.25; opacity: .7; transition: opacity .25s ease, stroke .25s ease, stroke-width .25s ease; }
.edge-path.is-shared { stroke: var(--ochre); stroke-dasharray: 4 5; opacity: .62; }
.edge-path.is-handoff { stroke: var(--clay); stroke-width: 1.5; stroke-dasharray: 2 4; }
.edge-path.is-educational { stroke: var(--moss); stroke-width: 1.8; stroke-dasharray: none; }
.edge-path.is-geographic { stroke: var(--ochre); stroke-dasharray: 5 4; }
.edge-path.is-institutional { stroke: var(--clay); stroke-width: 2; stroke-dasharray: 2 3; }
.edge-path.is-organizational { stroke: var(--moss-dark); stroke-width: 2; stroke-dasharray: none; }
.edge-path.is-regional { stroke: #718078; stroke-width: 1.6; stroke-dasharray: 8 5; }
.edge-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.edge-group:hover .edge-path, .edge-group:focus .edge-path, .edge-group.is-selected .edge-path { stroke: var(--clay); stroke-width: 2.5; opacity: 1; }
.map-stage.has-node-focus .edge-group.is-muted .edge-path { opacity: .24; }
.map-stage.has-node-focus .edge-group.is-related .edge-path { stroke-width: 2; opacity: 1; }
.map-stage.has-node-focus .edge-group.is-muted .edge-label { opacity: .16; }
.edge-label { fill: var(--ink-soft); stroke: #f7f5ef; stroke-width: 4px; paint-order: stroke fill; font: 7px var(--mono); letter-spacing: .04em; pointer-events: none; transition: opacity .2s ease; }
.graph-node { cursor: grab; touch-action: none; user-select: none; transition: left .46s cubic-bezier(.2,.75,.25,1), top .46s cubic-bezier(.2,.75,.25,1), transform .42s cubic-bezier(.2,.75,.25,1), opacity .22s ease; }
.graph-node button { position: absolute; inset: 0; width: 100%; height: 100%; padding: 8px; border: 1px solid #afb5ae; border-radius: 50%; color: var(--ink); background: rgba(247, 245, 239, .97); box-shadow: 0 3px 11px rgba(22, 34, 29, .08); cursor: grab; touch-action: none; user-select: none; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.graph-node button:hover, .graph-node button:focus-visible, .graph-node.is-selected button { z-index: 2; border-color: var(--clay); box-shadow: 0 5px 18px rgba(22, 34, 29, .18); transform: scale(1.045); }
.graph-node.is-dragging { z-index: 30; transition: none; }
.graph-node.is-dragging button { cursor: grabbing; border-color: var(--ochre); box-shadow: 0 12px 28px rgba(22, 34, 29, .25); transform: scale(1.035); }
.graph-node.has-collision button { outline: 2px solid rgba(168, 86, 58, .5); outline-offset: 3px; }
.map-stage.has-node-focus .graph-node.is-muted { opacity: .68 !important; }
.map-node-dragging, .map-node-dragging * { cursor: grabbing !important; }
.graph-node__type { display: block; margin-bottom: 5px; color: var(--ink-soft); font: 7px/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.graph-node__name { display: block; font-size: 10px; font-weight: 600; line-height: 1.18; }
.graph-node--active button { border: 2px solid var(--moss); color: var(--paper); background: var(--moss-dark); box-shadow: 0 0 0 8px rgba(184, 197, 143, .22), 0 10px 28px rgba(22, 34, 29, .24); }
.graph-node--active .graph-node__type { color: var(--lichen); }
.graph-node--active .graph-node__name { font-family: var(--serif); font-size: 16px; font-weight: 400; }
.graph-node--practice button { border-color: #bf9b70; background: #f6eee2; }
.graph-node--practice .graph-node__type { color: #916133; }
.graph-node--discipline:not(.graph-node--active) button { border-color: #718078; background: #e3e8df; }
.graph-node--discipline:not(.graph-node--active) .graph-node__name { font-size: 9px; }
.graph-node--method button { border-color: #83917b; background: #eef0e6; }
.graph-node--object button { border-color: var(--clay); border-radius: 8px; background: #f2e8df; }
.graph-node--context button { border-color: #77827d; border-radius: 0; background: #e6e9e5; }
.graph-node--context .graph-node__name { font-size: 9px; }
.graph-node--institution button { border-radius: 12px; }
.graph-node--organization button { border: 2px solid var(--moss-dark); border-radius: 12px; background: #e3e8df; }
.graph-node--campus button { border-color: var(--moss); border-radius: 12px; background: #eef1e6; }
.graph-node--regional_institution button { border-color: #718078; border-style: dashed; border-radius: 12px; background: #edf0ed; }
.graph-node--program button { border-color: #bf9b70; border-radius: 10px; background: #f6eee2; }
.graph-node--course button { border-color: #83917b; border-radius: 10px; background: #eef0e6; }
.graph-node--county button { border-color: var(--ochre); border-radius: 4px; background: #f4ead8; }
.graph-node--resource button { border-color: #8b6b42; background: #f6f0df; }
.graph-node--land button { border-color: #526f5d; border-radius: 4px; background: #e3e8df; }
.type-institution { background: var(--moss-dark); }
.type-organization { background: var(--moss); }
.type-campus { background: var(--lichen); }
.type-regional-institution { background: #718078; }
.type-program { background: var(--ochre); }
.type-course { background: #83917b; }
.type-county { background: #f1b85f; }
.type-resource { background: #8b6b42; }
.type-land { background: #526f5d; }
.capacity-legend .legend-line.is-educational { height: 0; border-top: 2px solid var(--moss); background: none; }
.capacity-legend .legend-line.is-geographic { height: 0; border-top: 2px dashed var(--ochre); background: none; }
.capacity-legend .legend-line.is-institutional { height: 0; border-top: 2px dotted var(--clay); background: none; }
.capacity-legend .legend-line.is-organizational { height: 0; border-top: 2px solid var(--moss-dark); background: none; }
.capacity-legend .legend-line.is-regional { height: 0; border-top: 2px dashed #718078; background: none; }
.map-loading, .map-error { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 13px; padding: 32px; color: var(--ink-soft); text-align: center; font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.map-loading span { width: 22px; height: 22px; border: 2px solid var(--line); border-top-color: var(--moss); border-radius: 50%; animation: spin .8s linear infinite; }
.map-error strong { color: var(--clay); font-family: var(--sans); font-size: 18px; text-transform: none; }
.map-error p { max-width: 380px; margin: 0; line-height: 1.6; text-transform: none; }
.canvas-note { position: absolute; right: 16px; bottom: 14px; z-index: 10; max-width: 190px; padding: 9px 11px; border-left: 2px solid var(--lichen); background: rgba(247, 245, 239, .88); pointer-events: none; }
.canvas-note span { display: block; margin-bottom: 3px; color: var(--ink-soft); font: 7px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.canvas-note strong { display: block; overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Detail panel */
.detail-content { padding: 23px 20px 32px; }
.detail-kicker { margin: 0 0 10px; color: var(--clay); font: 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.detail-content h2 { margin: 0 0 12px; font: 400 30px/1.06 var(--serif); letter-spacing: -.025em; }
.detail-description { margin: 0 0 21px; color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.detail-action { width: 100%; min-height: 40px; display: flex; justify-content: space-between; align-items: center; margin: 0 0 22px; padding: 0 12px; border: 1px solid var(--moss); color: var(--paper); background: var(--moss); font-size: 10px; font-weight: 600; cursor: pointer; }
.detail-action:hover { background: var(--moss-dark); }
.detail-section { margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--line); }
.detail-section h3 { margin: 0 0 12px; color: var(--ink-soft); font: 500 9px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.detail-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.detail-list button { min-height: 29px; padding: 5px 8px; border: 1px solid var(--line); background: var(--paper); font-size: 9px; cursor: pointer; }
.detail-list button:hover { border-color: var(--moss); }
.relationship-card { margin-top: 9px; padding: 13px 12px; border: 1px solid var(--line); background: var(--paper); }
.relationship-card:first-of-type { margin-top: 0; }
.relationship-card__top { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.relationship-card strong { font-size: 11px; line-height: 1.35; }
.relationship-card__top span { flex: 0 0 auto; color: var(--clay); font: 7px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.relationship-card p { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
.relationship-card dl { display: grid; gap: 7px; margin: 11px 0 0; }
.relationship-card dt { color: var(--ink-soft); font: 7px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.relationship-card dd { margin: 2px 0 0; font-size: 10px; line-height: 1.5; }
.confidence { display: inline-flex; align-items: center; gap: 6px; margin-top: 17px; color: var(--ink-soft); font: 7px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.confidence::before { width: 6px; height: 6px; border-radius: 50%; background: var(--ochre); content: ""; }
.empty-state { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.mobile-actions, .panel-scrim { display: none; }

/* Responsive */
@media (max-width: 1180px) {
  :root { --controls-width: 220px; --details-width: 290px; }
  .map-app { min-height: 590px; }
  .graph-node__name { font-size: 9px; }
}

@media (max-width: 900px) {
  .map-intro { grid-template-columns: 1fr; align-items: start; gap: 17px; }
  .map-intro__lede { max-width: 680px; }
  .map-app { display: block; height: 680px; min-height: 0; }
  .map-workspace { position: absolute; inset: 0; }
  .map-controls, .map-details { position: fixed; z-index: 1300; top: 0; bottom: 0; width: min(350px, calc(100vw - 36px)); border: 0; box-shadow: 0 0 40px rgba(10, 20, 15, .3); transition: transform .25s ease; }
  .map-controls { left: 0; transform: translateX(-105%); }
  .map-details { right: 0; transform: translateX(105%); }
  body.controls-open .map-controls, body.details-open .map-details, .relationship-map-root.controls-open .map-controls, .relationship-map-root.details-open .map-details { transform: translateX(0); }
  .mobile-close { display: inline-grid; place-items: center; }
  [data-action="open-controls"] { display: inline-block; }
  .mobile-actions { position: sticky; z-index: 50; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #4d5c54; background: var(--night); }
  .mobile-actions button { min-height: 48px; border: 0; border-right: 1px solid #4d5c54; color: var(--paper); background: transparent; font: 9px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
  .panel-scrim { position: fixed; z-index: 1200; inset: 0; background: rgba(10, 18, 14, .48); }
  body.controls-open .panel-scrim, body.details-open .panel-scrim, .relationship-map-root.controls-open .panel-scrim, .relationship-map-root.details-open .panel-scrim { display: block; }
}

@media (max-width: 600px) {
  .map-intro { padding: 22px 18px 24px; }
  .map-intro h1 { font-size: 38px; }
  .map-app { height: 620px; }
  .map-canvas { overflow: auto; overscroll-behavior: contain; }
  .map-toolbar { padding-inline: 10px; }
  .map-toolbar p { max-width: 145px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .canvas-note { display: none; }
  .graph-node__type { display: none; }
  .graph-node__name { font-size: 8px; }
  .graph-node--active .graph-node__name { font-size: 13px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}