/* Same layout and focus outline; only the interaction language changes. */
.sidebar nav a { position: relative; transition: color .15s, background-color .15s; }
.sidebar nav a[aria-current] { border-color: transparent; background: transparent; color: var(--amber); }
.sidebar nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--teal) 8%, transparent); }
/* 1: a terminal prompt marks the selected line. */
[data-nav-style="terminal"] .sidebar nav a { padding-left: 27px; }
[data-nav-style="terminal"] .sidebar nav a .nav-icon { display: none; }
[data-nav-style="terminal"] .sidebar nav a::before { content: '›'; position: absolute; left: 11px; opacity: 0; color: var(--teal); }
[data-nav-style="terminal"] .sidebar nav a:hover::before { opacity: .65; }
[data-nav-style="terminal"] .sidebar nav a[aria-current]::before { content: '❯'; color: var(--amber); opacity: 1; }
/* 2: the active line in an editor. */
[data-nav-style="rail"] .sidebar nav a[aria-current] { background: color-mix(in srgb, var(--amber) 8%, transparent); }
[data-nav-style="rail"] .sidebar nav a[aria-current]::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; background: var(--amber); }
/* 3: brackets pair with the selected identifier. */
[data-nav-style="brackets"] .sidebar nav a { padding-inline: 17px; }
[data-nav-style="brackets"] .sidebar nav a::before, [data-nav-style="brackets"] .sidebar nav a::after { position: absolute; color: var(--teal); opacity: 0; }
[data-nav-style="brackets"] .sidebar nav a::before { content: '['; left: 4px; }
[data-nav-style="brackets"] .sidebar nav a::after { content: ']'; right: 4px; }
[data-nav-style="brackets"] .sidebar nav a:hover::before, [data-nav-style="brackets"] .sidebar nav a:hover::after { opacity: .7; }
[data-nav-style="brackets"] .sidebar nav a[aria-current]::before, [data-nav-style="brackets"] .sidebar nav a[aria-current]::after { color: var(--amber); opacity: 1; }
/* 4: the selected port connects to the actual node beneath the brand. */
[data-nav-style="port"] .sidebar nav a { padding-left: 32px; }
[data-nav-style="port"] .sidebar nav a .nav-icon { display: none; }
[data-nav-style="port"] .sidebar nav a::before { content: ''; position: absolute; box-sizing: border-box; left: 15px; width: 5px; height: 5px; border: 1px solid var(--quiet); }
[data-nav-style="port"] .sidebar nav a:hover::before { border-color: var(--teal); }
[data-nav-style="port"] .sidebar nav a[aria-current]::before { background: var(--amber); border-color: var(--amber); }
.selection-connection { fill: var(--bg); stroke: var(--amber); stroke-width: 1; opacity: .85; }
.selection-connection path { fill: none; }
/* 5: a cursor at the end of the selected line, with no blinking. */
[data-nav-style="cursor"] .sidebar nav a::after { content: '▌'; color: var(--teal); opacity: 0; }
[data-nav-style="cursor"] .sidebar nav a:hover::after { opacity: .5; }
[data-nav-style="cursor"] .sidebar nav a[aria-current]::after { color: var(--amber); opacity: 1; }
/* Outer row inset is independent of readable label spacing. */
.sidebar #directory-links, .sidebar #explorer-links { padding-inline: var(--nav-inset, 12px); }
[data-nav-hover="text"] .sidebar nav a:hover,
[data-nav-hover="underline"] .sidebar nav a:hover,
[data-nav-hover="outline"] .sidebar nav a:hover { background: transparent; }
[data-nav-hover="text"] .sidebar nav a:hover { color: var(--teal); }
[data-nav-hover="underline"] .sidebar nav a:hover { box-shadow: inset 0 -1px var(--teal); }
[data-nav-hover="outline"] .sidebar nav a:hover { border-color: var(--teal); }
[data-nav-style="rail"] .sidebar nav a[aria-current]:hover { background: color-mix(in srgb, var(--amber) 8%, transparent); }

/* Density changes whitespace, not type size, contrast, or the independent row inset. */
[data-density="compact"] { --space: .8; --content-x: 32px; --content-y: 27px; --page-min: 480px; --header-top: 8px; }
[data-density="dense"] { --space: .62; --content-x: 24px; --content-y: 21px; --page-min: 410px; --header-top: 5px; }
[data-density]:not([data-density="comfortable"]) .site-header { padding-top: var(--header-top); }
[data-density]:not([data-density="comfortable"]) .content { padding: var(--content-y) var(--content-x); }
[data-density]:not([data-density="comfortable"]) .page { min-height: var(--page-min); }
[data-density]:not([data-density="comfortable"]) .breadcrumb { padding: calc(12px * var(--space)) var(--content-x); }
[data-density]:not([data-density="comfortable"]) .explorer-title { padding-block: calc(13px * var(--space)); }
[data-density]:not([data-density="comfortable"]) .sidebar #directory-links,
[data-density]:not([data-density="comfortable"]) .sidebar #explorer-links { padding-block: calc(16px * var(--space)) calc(20px * var(--space)); }
[data-density]:not([data-density="comfortable"]) .sidebar nav a { padding-block: calc(10px * var(--space)); }
[data-density]:not([data-density="comfortable"]) .intro-links { margin-block: calc(23px * var(--space)) calc(39px * var(--space)); gap: calc(14px * var(--space)) 24px; }
[data-density]:not([data-density="comfortable"]) .section-label { padding-top: calc(18px * var(--space)); margin-bottom: calc(17px * var(--space)); }
[data-density]:not([data-density="comfortable"]) .doors { gap: calc(16px * var(--space)); }
[data-density]:not([data-density="comfortable"]) .door { padding: calc(19px * var(--space)) calc(20px * var(--space)) calc(13px * var(--space)); }
[data-density]:not([data-density="comfortable"]) .door-heading { margin-top: calc(16px * var(--space)); }
[data-density]:not([data-density="comfortable"]) .door p { margin-block: calc(11px * var(--space)) calc(22px * var(--space)); }
[data-density]:not([data-density="comfortable"]) .home-note { margin-top: calc(26px * var(--space)); }
[data-density]:not([data-density="comfortable"]) .about-availability { margin-top: calc(28px * var(--space)); padding: calc(19px * var(--space)) calc(20px * var(--space)); }
[data-density]:not([data-density="comfortable"]) .about-index { margin-block: calc(26px * var(--space)) calc(34px * var(--space)); }
[data-density]:not([data-density="comfortable"]) .about-section { margin-bottom: calc(32px * var(--space)); }
[data-density]:not([data-density="comfortable"]) .web-project { margin-top: calc(33px * var(--space)); padding-block: calc(28px * var(--space)); gap: calc(27px * var(--space)); }
[data-density]:not([data-density="comfortable"]) .schema-title { margin-top: calc(30px * var(--space)); }
[data-density]:not([data-density="comfortable"]) .schema { padding-block: calc(30px * var(--space)) calc(22px * var(--space)); }
[data-density]:not([data-density="comfortable"]) .command-area { padding-block: calc(12px * var(--space)); }
@media(max-width:720px) {
  [data-density="compact"] { --content-x: 20px; --content-y: 22px; }
  [data-density="dense"] { --content-x: 16px; --content-y: 18px; }
  [data-density]:not([data-density="comfortable"]) .page { min-height: 0; }
  [data-density] .sidebar nav a { min-height: 34px; }
  /* Phones: two short nav rows (DIR, then EXPLORER) keep the connection readable and the name near the top. */
  [data-density]:not([data-density="comfortable"]) .sidebar #directory-links,
  [data-density]:not([data-density="comfortable"]) .sidebar #explorer-links,
  [data-density] .sidebar #directory-links, [data-density] .sidebar #explorer-links { padding-block: 3px; }
  [data-density]:not([data-density="comfortable"]) .sidebar nav a, [data-density] .sidebar nav a { padding-block: 4px; }
  [data-density] .sidebar .sidebar-heading { padding-block: 7px; }
}