skills/manage-code-ontology/assets/workbench.css

.quality-panel { min-height: auto; margin-bottom: 14px; }
.quality-content { margin-top: 14px; }
.quality-summary { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 8px; }
.quality-stat { min-width: 0; padding: 10px 11px; border: 1px solid #21453a; border-radius: 10px; background: #0c201a; }
.quality-stat strong { display: block; color: #e8f7f1; font-size: 16px; font-variant-numeric: tabular-nums; }
.quality-stat span { display: block; margin-top: 4px; color: #78938a; font-size: 9px; line-height: 1.4; }
.quality-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
.quality-subsection { min-width: 0; padding: 11px; border: 1px solid #1d3d34; border-radius: 10px; background: rgba(9, 28, 23, .72); }
.quality-subsection h4 { margin: 0 0 9px; color: #8fa79f; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.quality-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.quality-chip, .quality-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 23px;
  padding: 3px 7px;
  border: 1px solid #315348;
  border-radius: 999px;
  color: #a9c0b7;
  background: #11251f;
  font-size: 9px;
}
.quality-chip strong { color: #e0eee8; font-variant-numeric: tabular-nums; }
.quality-status--supported { border-color: #287357; color: #aaf3d4; background: #103629; }
.quality-status--partial { border-color: #70582e; color: #ffd27d; background: #2d2415; }
.quality-status--unsupported { border-color: #713b43; color: #ffadb4; background: #2b171b; }
.quality-status--unknown { border-color: #3a4c46; color: #91aaa1; background: #15211e; }
.adapter-list { display: grid; gap: 8px; }
.adapter-row { padding: 9px; border: 1px solid #224139; border-radius: 9px; background: #0c1e19; }
.adapter-heading { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.adapter-heading strong { color: #dcece5; font-size: 10px; }
.adapter-capabilities { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.adapter-runtime-gap { margin: 7px 0 0; color: #c0a66e; font-size: 9px; line-height: 1.45; }
.quality-runtime-warning, .quality-legacy, .quality-interpretation {
  margin: 10px 0 0;
  padding: 9px 10px;
  border-radius: 9px;
  color: #9db4ac;
  background: #0d211b;
  font-size: 9px;
  line-height: 1.55;
}
.quality-runtime-warning { border: 1px solid #665126; color: #e4c781; background: #251f13; }
.quality-legacy { border: 1px dashed #355249; }
.quality-interpretation { padding: 0; background: transparent; }

.graph-text-alternative summary { min-height: 34px; padding: 9px 11px; cursor: pointer; color: #d9eee6; font-weight: 700; }
.graph-text-summary { padding: 0 11px 9px; color: #809b91; line-height: 1.45; }
.graph-text-list { display: grid; gap: 5px; padding: 0 8px 8px; }
.graph-text-list--edges { padding-top: 8px; border-top: 1px solid #1e3b32; }
.graph-text-group { border: 1px solid #24483b; border-radius: 8px; background: #0a1d18; }
.graph-text-group > summary { min-height: 34px; padding: 8px; color: #d1e7df; cursor: pointer; }
.graph-text-list-inner { display: grid; gap: 5px; padding: 0 6px 6px; }
.graph-text-button {
  width: 100%;
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid #24483b;
  border-radius: 7px;
  color: #b8cec6;
  background: #0d251e;
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
}
.graph-text-button:hover, .graph-text-button:focus-visible { border-color: #58b48f; color: #f2fff9; }
.graph-text-button.is-selected { border-color: #65f0ba; background: #164535; }
.empty-state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--muted); text-align: center; }
.empty-state strong { color: var(--text); }

.change-list { min-height: 230px; }
.change-items { display: grid; gap: 6px; margin-top: 12px; }
.change-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid #214238; border-radius: 9px; background: #0d201a; cursor: pointer; text-align: left; }
.change-item:hover { border-color: #3b765f; }
.change-item strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.change-item span { color: #78938a; font-size: 9px; white-space: nowrap; }
.change-added { color: #82e7ba; }
.change-removed { color: #ff9aa2; }
.change-modified { color: #b69cff; }

.details-content { margin-top: 12px; }
.details-placeholder { min-height: 320px; display: grid; align-content: center; justify-items: center; text-align: center; }
.placeholder-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 15px; border: 1px solid #2a5043; border-radius: 14px; color: var(--accent); background: #10271f; font-size: 22px; }
.details-placeholder strong { font-size: 14px; }
.details-placeholder p { max-width: 260px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.details-header h3 { margin: 8px 0 4px; font-size: 18px; overflow-wrap: anywhere; }
.details-subtitle { color: var(--muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.details-actions { display: flex; gap: 7px; margin: 14px 0; }
.details-section { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.details-section h4 { margin: 0 0 10px; color: #8fa79f; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.property-list { display: grid; gap: 8px; margin: 0; }
.property-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; }
.property-row dt { color: #6f8980; font-size: 11px; }
.property-row dd { margin: 0; color: #c8d9d2; font-size: 11px; overflow-wrap: anywhere; }
.relation-group { margin-top: 12px; }
.relation-group:first-child { margin-top: 0; }
.relation-group-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: #b9ccc5; font-size: 10px; }
.neighbor-list { display: grid; gap: 5px; }
.neighbor-button { width: 100%; padding: 7px 8px; border: 0; border-radius: 7px; color: #a8c0b7; background: #10231d; cursor: pointer; text-align: left; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neighbor-button:hover { color: var(--text); background: #173329; }
.edge-evidence-list { display: grid; gap: 8px; }
.edge-evidence-card { padding: 10px; border: 1px solid #284a40; border-radius: 9px; background: #0d211b; }
.edge-evidence-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.edge-evidence-heading strong { min-width: 0; color: #dcece5; font-size: 10px; overflow-wrap: anywhere; }
.edge-evidence-location { margin-top: 7px; color: #9fb8af; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9px; overflow-wrap: anywhere; }
.edge-evidence-runtime { margin-top: 7px; color: #e4c781; font-size: 9px; line-height: 1.45; }
.edge-evidence-limitations { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.edge-evidence-note { margin: 9px 0 0; color: #738f85; font-size: 9px; line-height: 1.5; }
.raw-details summary { color: #78938a; cursor: pointer; font-size: 10px; }
.raw-details pre { max-height: 260px; overflow: auto; padding: 10px; border-radius: 8px; color: #9eb6ad; background: #07120f; font-size: 9px; white-space: pre-wrap; overflow-wrap: anywhere; }
.evidence-note { margin-top: 20px; padding: 12px; border: 1px solid #5a4926; border-radius: 11px; background: #251f13; color: #c9ad74; font-size: 9px; line-height: 1.55; }
.evidence-note strong { display: block; margin-bottom: 4px; color: #f4cb77; }

.type-chip { min-height: 22px; padding: 3px 7px; border-color: #345348; color: #9fbab0; background: #132620; }
.relation-chip { min-height: 20px; padding: 2px 7px; border-color: #3d4f68; color: #abc5e5; background: #172334; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: #315248; background-clip: content-box; }


/* Source atlas: one spatial canvas, progressive inspection. */
:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --bg:#050a12; --panel:#0b1420; --panel-soft:#101f2b; --panel-strong:#132a35; --line:#24404c; --line-soft:#18313b; --text:#eaf8fc; --muted:#94aebc; --accent:#71f0d6; --accent-strong:#a8ffee; --accent-soft:#133b3b; --warning:#ffd28d; --danger:#ff849c; --blue:#76cfff; --purple:#bba6ff; --shadow:0 24px 80px #0008; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; min-width:0; width:100%; height:100%; overflow:hidden; }
body { background:var(--bg); color:var(--text); }
button, input, select, summary { font:inherit; min-width:24px; min-height:24px; }
button { color:inherit; cursor:pointer; }
button:disabled { opacity:.35; cursor:default; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.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; }
.skip-link { position:fixed; z-index:100; top:-60px; left:16px; background:var(--accent); color:#07131a; padding:12px; border-radius:8px; }
.skip-link:focus { top:12px; }
.topbar { height:84px; position:fixed; z-index:30; inset:0 0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 28px; gap:30px; border-bottom:1px solid #8bdcf018; background:linear-gradient(180deg,#09121df5,#080f19ed); backdrop-filter:blur(20px); }
.brand-block { display:flex; align-items:center; gap:13px; min-width:0; }
.brand-mark { flex:none; width:42px; height:42px; display:grid; place-items:center; border:1px solid #7af3e875; border-radius:13px; background:linear-gradient(145deg,#21505c5c,#0c26314a); box-shadow:0 0 25px #5af0e91a,inset 0 0 15px #76d7e813; transform:rotate(-6deg); }
.brand-mark span { color:var(--accent); font-size:30px; transform:rotate(6deg); }
.brand-block h1 { margin:0; font-size:12px; font-weight:800; letter-spacing:.15em; white-space:nowrap; }
.brand-block h1 span { color:#7294a5; font-weight:500; }
.brand-block p { max-width:260px; margin:5px 0 0; color:#94aebc; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lens-nav { display:flex; align-items:center; gap:6px; padding:5px; border:1px solid #93cbea1c; border-radius:13px; background:#111e2a85; }
.lens-button { min-width:76px; min-height:36px; border:1px solid transparent; border-radius:9px; background:transparent; font-size:13px; font-weight:600; color:#8da6b6; transition:background .2s,color .2s,border-color .2s; }
.lens-button:hover { color:#d9f8ff; background:#6cd2e80c; }
.lens-button.is-active { color:#bdfff4; border-color:#70e8de42; background:linear-gradient(145deg,#26505a80,#15363e91); box-shadow:0 0 18px #6aeddf0d,inset 0 1px #cafff019; }
.global-search { position:relative; justify-self:end; width:min(310px,100%); }
.global-search input { width:100%; height:42px; border:1px solid #88c7df29; border-radius:11px; padding:0 48px 0 39px; background:#101c28a6; color:#eaf8fc; font-size:13px; }
.global-search input::placeholder { color:#87a0b2; }
.global-search input:focus { background:#102737; border-color:#6be7dc66; }
.search-icon { position:absolute; top:7px; left:13px; color:#8bbcc9; font-size:23px; }
.global-search kbd { position:absolute; right:12px; top:13px; font-size:11px; color:#748e9e; }
.app-shell { position:fixed; inset:84px 0 0; }
.main-content { position:absolute; inset:0; min-width:0; padding:0; }
.workspace-heading { position:absolute; top:30px; left:34px; right:34px; z-index:3; display:flex; justify-content:space-between; align-items:flex-start; gap:20px; pointer-events:none; }
.workspace-identity { min-width:0; max-width:60%; }
.section-kicker { color:#77a3b4; font-size:10px; font-weight:650; letter-spacing:.16em; text-transform:uppercase; }
.workspace-heading h2 { margin:10px 0 0; font-size:clamp(23px,2.5vw,36px); font-weight:550; line-height:1.15; letter-spacing:-.035em; max-width:680px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.view-description { color:#90aebf; font-size:12px; line-height:1.6; margin:9px 0 0; }
.snapshot-strip { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; max-width:45%; pointer-events:auto; }
.status-badge, .count-pill, .type-chip, .relation-chip { display:inline-flex; align-items:center; gap:5px; max-width:100%; min-height:25px; padding:4px 8px; border:1px solid #60c3da29; border-radius:6px; color:#97c7d4; background:#0e202cac; font-size:10px; line-height:1.4; overflow-wrap:anywhere; }
.status-badge--quiet { color:#97afbd; border-color:#80bdd325; background:#0d1822ab; }
.status-badge--warning { border-color:#f1c06655; color:#ffd797; background:#30291da6; }
.graph-view { position:absolute; inset:0; min-height:0; height:auto; border:0; border-radius:0; box-shadow:none; overflow:hidden; background:#060d15; }
#graph { position:absolute; inset:0; }
.graph-3d { position:absolute; inset:0; overflow:hidden; background:radial-gradient(ellipse at 51% 50%,#12324770 0%,#07132155 48%,#050911 83%); }
.graph-3d::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#070e19aa,transparent 24%,transparent 80%,#070d19aa); }
#graph-3d-canvas { display:block; width:100%; height:100%; cursor:grab; touch-action:none; }
#graph-3d-canvas.is-dragging { cursor:grabbing; }
#graph-3d-canvas:focus-visible { outline:2px solid #71f0d666; outline-offset:-3px; }
.graph-3d-legend { position:absolute; top:auto; left:34px; bottom:35px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; display:flex; gap:15px; z-index:1; color:#8aabba; font-size:10px; pointer-events:none; }
.graph-3d-legend span { display:inline-flex; align-items:center; gap:7px; }
.legend-shape { width:6px; height:6px; border:1px solid #98d9ee; background:#77c9e6; border-radius:50%; }
.legend-shape--root { width:8px; height:8px; border:1px solid #98fff1; background:#83f1df; box-shadow:0 0 8px #65f0da77; }
.legend-line { width:18px; border-top:1px solid #6eaece; }
.graph-3d-status { position:absolute; top:auto; right:34px; bottom:35px; padding:0; border:0; border-radius:0; background:transparent; max-width:300px; color:#78a0b4; font-size:10px; letter-spacing:.02em; pointer-events:none; z-index:1; }
.graph-note { position:absolute; bottom:64px; left:34px; padding:0; border:0; border-radius:0; background:transparent; z-index:1; max-width:calc(100% - 68px); color:#718c9d; font-size:10px; pointer-events:none; }
.graph-toolbar { position:absolute; z-index:12; bottom:26px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:4px; padding:7px 9px; border:1px solid #86d9ed30; border-radius:15px; background:linear-gradient(180deg,#152636e8,#0b1724ed); box-shadow:0 8px 32px #0008,inset 0 1px #c9f3ff0b; backdrop-filter:blur(18px); }
.dock-button { display:inline-flex; gap:7px; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 9px; border:1px solid transparent; border-radius:8px; background:transparent; color:#bdd5df; font-size:20px; }
.dock-button span { font-size:11px; }
.dock-button:hover:not(:disabled) { background:#72dcf012; border-color:#78dbe025; color:#cefff3; }
.dock-button[aria-pressed="true"] { color:#96ebda; }
.dock-divider { display:block; width:1px; height:20px; margin:0 3px; background:#739cbd2b; }
.view-options { position:relative; }
.view-options > summary { width:34px; height:36px; list-style:none; display:grid; place-items:center; font-size:24px; cursor:pointer; border-radius:8px; }
.view-options > summary::-webkit-details-marker { display:none; }
.view-options > summary:hover { background:#72dcf012; }
.view-options-panel { position:absolute; bottom:54px; right:0; width:230px; display:grid; gap:14px; padding:17px; border:1px solid #527f964f; border-radius:13px; background:#0c1a28f7; box-shadow:var(--shadow); }
.view-mode-switch { display:flex; gap:3px; border:1px solid #598ba736; padding:3px; border-radius:8px; }
.view-mode-switch button { flex:1; height:33px; background:transparent; border:0; border-radius:5px; font-size:12px; color:#89a7b8; }
.view-mode-switch button.is-active { background:#294d58; color:#bdfff3; }
.toolbar-field { display:grid; gap:7px; font-size:11px; color:#91aebb; }
select { height:34px; padding:4px 8px; width:100%; min-width:0; border:1px solid #527b8f55; border-radius:7px; background:#112635; color:#c3d9e3; font-size:11px; }
.sidebar, .details-panel, .overview-view { position:absolute; z-index:21; border:1px solid #83c3df36; border-radius:16px; background:linear-gradient(145deg,#111f30f5,#0b1724f7); backdrop-filter:blur(26px); box-shadow:var(--shadow),inset 0 1px #d8f9ff0a; }
.sidebar { top:16px; right:26px; width:350px; max-height:calc(100% - 38px); display:flex; flex-direction:column; overflow:hidden; }
.sidebar-section { padding:18px 15px 10px; }
.search-section { min-height:0; display:flex; flex-direction:column; }
.section-heading-row, .card-heading, .drawer-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.drawer-heading { margin-bottom:18px; }
.icon-button { width:32px; height:32px; border:1px solid transparent; border-radius:7px; background:transparent; color:#9fbece; font-size:20px; }
.icon-button:hover { color:#e2fff8; border-color:#a4def528; background:#74c7df0c; }
.facet-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:13px 0; }
.search-results { overflow:auto; min-height:0; }
.search-result { display:block; width:100%; padding:12px 9px; border:1px solid transparent; border-radius:9px; background:transparent; text-align:left; margin-bottom:4px; }
.search-result:hover, .search-result[data-active="true"] { border-color:#84cddd38; background:#7bc8dc0a; }
.search-result.is-selected { border-color:#68e5d45e; background:#25544e38; }
.result-title { display:block; font-size:13px; color:#cfe9f5; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result-meta { display:flex; align-items:center; gap:7px; margin-top:7px; font-size:10px; color:#98b3c5; }
.result-context { display:block; margin-top:5px; color:#819cac; font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.empty-results { padding:22px 10px; color:#8faaba; font-size:12px; line-height:1.5; text-align:center; }
.details-panel { top:135px; right:26px; bottom:110px; width:350px; padding:20px; overflow:auto; }
.details-header h3 { font-size:23px; line-height:1.2; font-weight:550; overflow-wrap:anywhere; color:#edffff; margin:10px 0; letter-spacing:-.025em; }
.details-subtitle { color:#8faebb; font-size:11px; line-height:1.65; overflow-wrap:anywhere; }
.details-actions { display:flex; gap:7px; margin:17px 0; }
.primary-button, .secondary-button { border:1px solid #78c2d342; border-radius:8px; min-height:34px; padding:7px 10px; background:#1e39474d; color:#b6d6e1; font-size:11px; }
.primary-button { border-color:#6febce65; background:#245a5044; color:#b1f7e3; }
.primary-button:hover, .secondary-button:hover { background:#4aadbd24; }
.details-section { padding-top:17px; margin-top:17px; border-top:1px solid #95c6df20; }
.details-section h4 { font-size:11px; font-weight:600; color:#8fabbb; margin:0 0 12px; }
.property-list { margin:0; }
.property-row { display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; margin-bottom:9px; font-size:11px; line-height:1.6; }
.property-row dt { color:#7f9fac; }
.property-row dd { margin:0; color:#bdd2dd; overflow-wrap:anywhere; }
.more-button { display:block; width:100%; margin-top:8px; min-height:32px; border:1px solid #6cb8d333; border-radius:7px; background:#24445535; color:#97cad9; font-size:11px; }
.selection-link { margin:14px 0 0; padding:10px; width:100%; font-family:monospace; font-size:10px; color:#c5e5ee; border:1px solid #559fac55; border-radius:8px; background:#08121e; overflow-wrap:anywhere; }
.overview-view { top:85px; right:26px; bottom:95px; width:550px; padding:22px; overflow:auto; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:20px; }
.metric-card { padding:12px; border:1px solid #77a7c126; border-radius:10px; background:#1b324733; }
.metric-label { font-size:10px; color:#8ba5b6; }
.metric-value { margin-top:9px; font-size:24px; color:#d7f0fa; font-weight:550; }
.metric-note { margin-top:6px; font-size:10px; line-height:1.5; color:#7899ac; }
.surface-card { padding:18px; border:1px solid #729bbc26; border-radius:12px; background:#152636b3; }
.surface-card h3 { margin:0; font-size:15px; font-weight:550; }
.link-status { position:absolute; z-index:22; top:10px; left:50%; transform:translateX(-50%); max-width:min(620px,85%); margin:0; padding:10px 16px; border:1px solid #ffce8655; border-radius:9px; background:#292519f5; color:#f0cf94; font-size:12px; }

.graph-text-alternative { position:absolute; z-index:20; left:34px; right:auto; top:auto; bottom:103px; width:112px; max-height:calc(100% - 250px); border:1px solid #729fba35; border-radius:9px; background:#0f1d2de8; color:#aec6d5; box-shadow:var(--shadow); font-size:11px; overflow:auto; }
.graph-text-alternative[open] { width:min(370px,calc(100% - 44px)); }
.graph-text-alternative > summary { padding:10px 12px; min-height:36px; }
.graph-text-group { background:#0c1b2b; border-color:#5e98b63d; }
.graph-text-button { background:#132b3a; border-color:#71b6cb29; color:#b6d3df; }
.graph-text-button.is-selected { background:#24534e; border-color:#72daca7a; }
.quality-stat, .quality-subsection, .adapter-row, .edge-evidence-card { background:#12293866; border-color:#629bb63b; }
.quality-stat strong { color:#d7f5ff; }
.quality-chip, .quality-status, .relation-chip, .type-chip { color:#adccd6; background:#183b4b88; border-color:#71bbcf35; }
.edge-evidence-card.is-selected { border-color:#8bffe59e; box-shadow:0 0 20px #5cc7d014; }
.quality-runtime-warning, .evidence-note { color:#b1c5d3; background:#1b2b3929; border-color:#7892a128; font-size:10px; }
.evidence-note { margin-top:20px; padding:10px 0 0; border:0; border-top:1px solid #7aafc220; }
.evidence-note strong { color:#829cac; font-weight:400; }
.quality-interpretation { color:#8ba5b7; }
.neighbor-button { background:#162d3d; border-color:#5b91aa44; color:#b0d0de; font-size:11px; }
.neighbor-button:hover { background:#254b57; }
.raw-details { display:none; }
.changes-view { position:absolute; z-index:5; inset:135px 34px 30px; overflow:auto; display:grid; align-content:start; gap:16px; padding-bottom:20px; }
.change-summary { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; }
.change-list-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.change-item { background:#13283990; border-color:#70a1b924; }
.change-item strong { font-size:12px; }
.change-added { color:#89f0d0 !important; }
.change-removed { color:#f098ab !important; }
.change-modified { color:#e6c584 !important; }
.change-context { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:9px; padding:11px 15px; }
.change-context h3 { font-size:11px; color:#8eabb9; }
.change-context .view-description { margin:0; font-size:10px; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:9px; background:#47738a; background-clip:content-box; }
@media (max-width:1100px) { .topbar { gap:18px; padding:0 20px; } .brand-block h1 { font-size:10px; letter-spacing:.1em; } .brand-block p { max-width:180px; } .lens-button { min-width:62px; } .graph-3d-status { display:none; } .graph-3d-legend { bottom:96px; } .graph-note { bottom:121px; } .graph-text-alternative { bottom:150px; } .details-panel { width:320px; right:20px; } .workspace-heading { left:26px; right:26px; } }
@media (max-width:760px) { html, body { min-width:0; } .topbar { height:118px; grid-template-columns:1fr auto; gap:10px 16px; padding:12px 16px; } .brand-mark { width:32px; height:32px; border-radius:10px; } .brand-mark span { font-size:24px; } .brand-block { gap:10px; } .brand-block p { max-width:210px; font-size:11px; } .lens-nav { grid-column:2; grid-row:1; padding:3px; gap:2px; } .lens-button { min-width:48px; min-height:32px; font-size:12px; } .global-search { grid-column:1/-1; grid-row:2; width:100%; } .global-search input { height:34px; } .global-search kbd { top:10px; } .search-icon { top:3px; } .app-shell { top:118px; } .workspace-heading { top:23px; left:20px; right:20px; flex-direction:column; gap:11px; } .workspace-identity { max-width:100%; } .workspace-heading h2 { font-size:25px; margin-top:8px; } .snapshot-strip { max-width:100%; justify-content:flex-start; } .snapshot-strip #snapshot-badge { display:none; } .view-description { font-size:11px; margin-top:5px; } .sidebar { top:10px; left:16px; right:16px; width:auto; max-height:calc(100% - 26px); } .details-panel { top:auto; bottom:94px; left:16px; right:16px; width:auto; max-height:44%; padding:16px; } .overview-view { top:20px; right:16px; left:16px; bottom:94px; width:auto; padding:16px; } .quality-grid, .quality-summary { grid-template-columns:1fr; } .metric-grid { grid-template-columns:1fr 1fr; } .graph-toolbar { bottom:20px; padding:5px; max-width:calc(100% - 20px); gap:1px; } .dock-button { min-width:31px; padding:0 6px; } .dock-button span { font-size:10px; } .graph-3d-legend { left:20px; bottom:83px; font-size:9px; gap:12px; } .graph-note { left:20px; bottom:105px; max-width:calc(100% - 40px); font-size:9px; } .graph-text-alternative { left:20px; bottom:136px; width:95px; max-height:calc(100% - 230px); } .graph-text-alternative > summary { font-size:10px; padding:8px; } .changes-view { inset:147px 16px 15px; } .change-summary { grid-template-columns:repeat(3,minmax(0,1fr)); } .change-list-grid { grid-template-columns:1fr; } .view-options-panel { right:0; } }
@media (max-width:400px) { .topbar { padding-inline:12px; gap:8px; } .brand-block h1 { font-size:9px; letter-spacing:.06em; } .brand-block p { max-width:125px; } .brand-mark { display:none; } .lens-button { min-width:42px; } .dock-button span { display:none; } .metric-grid { grid-template-columns:1fr 1fr; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }
@media (forced-colors:active) { body,.topbar,.sidebar,.details-panel,.overview-view,.graph-view,.graph-3d { background:Canvas; color:CanvasText; } button,input,select,.lens-nav,.view-mode-switch,.graph-toolbar,.graph-text-alternative { border:2px solid ButtonText; background:Canvas; color:CanvasText; forced-color-adjust:auto; } .graph-3d::after { display:none; } button:focus-visible,input:focus-visible,summary:focus-visible,#graph-3d-canvas:focus-visible { outline:3px solid Highlight; } .legend-shape { border-color:CanvasText; background:Highlight; } .legend-line { border-color:CanvasText; } }