@acta-dev/web 1.0.0

package/src/styles/global.css

@@ -0,0 +1,1391 @@
+@import "./tokens/primitives.css";
+@import "./tokens/typography.css";
+@import "./tokens/semantic.css";
+@import "./themes/light.css";
+@import "./themes/dark.css";
+
+/* ── Direction A · Press — editorial reading view ─────────────────────── */
+
+:root {
+  color-scheme: light dark;
+  font-family: var(--font-serif);
+  background: var(--color-bg);
+  color: var(--color-text);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-size: 16px;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+[hidden] {
+  display: none;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.muted {
+  color: var(--color-text-muted);
+}
+
+/* Form primitives — duplicated here so React islands (graph) can use them too */
+.ui-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+  font-family: var(--font-sans);
+  font-size: 10px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+  font-weight: 500;
+}
+
+.ui-input,
+.ui-select {
+  width: 100%;
+  padding: var(--space-1-5) 0;
+  border: 0;
+  border-bottom: 1px solid var(--color-border);
+  background: transparent;
+  color: var(--color-text);
+  font-family: var(--font-sans);
+  font-size: 13px;
+  outline: none;
+}
+
+.ui-input {
+  font-family: var(--font-serif);
+  font-size: 16px;
+}
+
+.ui-input::placeholder {
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+
+.ui-select {
+  padding-right: var(--space-4);
+  appearance: none;
+  background-image:
+    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
+    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
+  background-position:
+    calc(100% - 6px) 12px,
+    calc(100% - 2px) 12px;
+  background-size: 4px 4px;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+.ui-input:focus-visible,
+.ui-select:focus-visible {
+  border-bottom-color: var(--color-accent);
+}
+
+/* ── Shell ────────────────────────────────────────────────────────────── */
+.app-shell {
+  display: grid;
+  grid-template-columns: var(--sidebar-width, 220px) minmax(0, 1fr);
+  min-height: 100vh;
+  transition: grid-template-columns 0.18s ease;
+}
+
+:root[data-sidebar="collapsed"] .app-shell {
+  --sidebar-width: 64px;
+}
+
+/* ── Sidebar ──────────────────────────────────────────────────────────── */
+.sidebar {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  padding: var(--space-7) var(--space-6) var(--space-6);
+  border-right: 1px solid var(--color-border);
+  background: var(--color-panel-muted);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-7);
+  overflow: hidden;
+}
+
+.sidebar-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding-bottom: var(--space-4-5);
+  border-bottom: 1px solid var(--color-border-soft);
+}
+
+.brand {
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
+  min-width: 0;
+}
+
+.brand-mark {
+  display: none;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+}
+
+.brand-mark > img {
+  width: 28px;
+  height: 28px;
+}
+
+.brand-label {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.brand-wordmark {
+  display: inline-flex;
+  align-items: baseline;
+  font-family: var(--font-serif);
+  font-weight: 500;
+  font-style: italic;
+  font-size: 30px;
+  letter-spacing: -0.01em;
+  line-height: 1;
+  color: var(--color-text);
+}
+
+.brand-wordmark::before {
+  content: "";
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background: var(--color-accent);
+  border-radius: 50%;
+  margin-right: var(--space-2);
+  transform: translateY(-3px);
+}
+
+.brand-kicker {
+  font-family: var(--font-sans);
+  font-size: 10px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+  font-weight: 500;
+}
+
+.ui-sidebar-toggle {
+  display: inline-grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid var(--color-border);
+  border-radius: 50%;
+  background: transparent;
+  color: var(--color-text-muted);
+  font: inherit;
+  font-family: var(--font-sans);
+  font-size: var(--text-md);
+  line-height: 1;
+  cursor: pointer;
+  flex: none;
+  transition:
+    color var(--duration-hover) var(--ease-out),
+    border-color var(--duration-hover) var(--ease-out),
+    transform var(--duration-press) var(--ease-out);
+}
+
+.ui-sidebar-toggle:hover,
+.ui-sidebar-toggle:focus-visible {
+  color: var(--color-text);
+  border-color: var(--color-text);
+  outline: none;
+}
+
+.ui-sidebar-toggle:active {
+  transform: scale(0.94);
+}
+
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.nav a {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) 0;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  letter-spacing: 0.005em;
+  transition: color 0.15s;
+}
+
+.nav-num {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  width: 18px;
+  flex: none;
+  color: var(--color-text-muted);
+  opacity: 0.55;
+}
+
+.nav-letter {
+  display: none;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.nav-bar {
+  width: 0;
+  height: 1.5px;
+  margin-left: auto;
+  background: var(--color-border);
+  transition:
+    width 0.15s,
+    background 0.15s;
+}
+
+.nav a:hover {
+  color: var(--color-text);
+}
+
+.nav a.is-active {
+  color: var(--color-text);
+  font-weight: 600;
+}
+
+.nav a.is-active .nav-bar {
+  width: 18px;
+  background: var(--color-accent);
+}
+
+.sidebar-foot {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3-5);
+  padding-top: var(--space-3-5);
+  border-top: 1px solid var(--color-border-soft);
+}
+
+/* Collapsed sidebar — hide labels, center the nav numbers */
+:root[data-sidebar="collapsed"] .sidebar {
+  padding: var(--space-4-5) var(--space-2);
+  align-items: center;
+}
+
+:root[data-sidebar="collapsed"] .brand-label,
+:root[data-sidebar="collapsed"] .nav-label,
+:root[data-sidebar="collapsed"] .nav-bar {
+  display: none;
+}
+
+:root[data-sidebar="collapsed"] .brand-mark {
+  display: grid;
+}
+
+:root[data-sidebar="collapsed"] .sidebar-head {
+  border-bottom: 0;
+  padding-bottom: 0;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+:root[data-sidebar="collapsed"] .nav {
+  width: 100%;
+}
+
+:root[data-sidebar="collapsed"] .nav a {
+  justify-content: center;
+}
+
+:root[data-sidebar="collapsed"] .nav-num {
+  display: none;
+}
+
+:root[data-sidebar="collapsed"] .nav-letter {
+  display: inline-grid;
+  place-items: center;
+}
+
+/* ── Main column ──────────────────────────────────────────────────────── */
+.content {
+  width: min(1180px, 100%);
+  padding: var(--space-10) var(--space-11) 60px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* ── Page header / breadcrumbs ────────────────────────────────────────── */
+.page-header {
+  margin-bottom: var(--space-6);
+}
+
+.eyebrow,
+.crumbs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-3-5);
+  margin: 0 0 var(--space-3-5);
+  font-family: var(--font-sans);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+  font-weight: 500;
+}
+
+.crumbs > .grow {
+  flex: 1;
+}
+
+.crumbs > span:not(:last-child):not(.grow)::after {
+  content: "·";
+  margin-left: var(--space-3-5);
+  opacity: 0.5;
+}
+
+.page-header h1 {
+  margin: var(--space-6) 0 var(--space-6);
+  font-family: var(--font-serif);
+  font-weight: 500;
+  font-size: var(--text-display);
+  line-height: 1;
+  letter-spacing: -0.025em;
+}
+
+.page-header h1 .accent-period {
+  font-style: italic;
+  color: var(--color-accent);
+  font-weight: 400;
+}
+
+.page-sub {
+  margin: var(--space-3-5) 0 0;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  color: var(--color-text-muted);
+  letter-spacing: 0.01em;
+}
+
+.page-sub b {
+  color: var(--color-text);
+  font-weight: 600;
+}
+
+/* ── Filters / toolbar ────────────────────────────────────────────────── */
+.toolbar {
+  margin-top: var(--space-8);
+  padding: var(--space-4-5) 0 var(--space-4);
+  border-top: 1.5px solid var(--color-text);
+  border-bottom: 1px solid var(--color-border);
+  display: grid;
+  grid-template-columns: 1.6fr repeat(4, 1fr) auto;
+  gap: var(--space-6);
+  align-items: end;
+}
+
+.content-search {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-top: var(--space-3);
+  color: var(--color-text-muted);
+  font-family: var(--font-sans);
+  font-size: 12px;
+}
+
+.content-search input[type="checkbox"] {
+  width: 14px;
+  height: 14px;
+  accent-color: var(--color-accent);
+}
+
+.content-loading {
+  margin-top: var(--space-3);
+  font-family: var(--font-sans);
+  font-size: 12px;
+}
+
+/* ── Document list ────────────────────────────────────────────────────── */
+.document-list {
+  display: block;
+  margin-top: var(--space-1-5);
+}
+
+.document-row {
+  display: grid;
+  grid-template-columns: 96px minmax(0, 1fr) 140px 96px;
+  gap: var(--space-7);
+  align-items: baseline;
+  padding: var(--space-5) 0;
+  border-bottom: 1px solid var(--color-border-soft);
+  transition: background var(--duration-hover) var(--ease-out);
+}
+
+.document-row:hover {
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--color-panel) 6%,
+    var(--color-panel) 94%,
+    transparent
+  );
+}
+
+.row-id {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-1-5);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  color: var(--color-text-muted);
+  font-weight: 500;
+  padding-top: var(--space-1);
+}
+
+.row-main {
+  min-width: 0;
+}
+
+.document-title {
+  display: block;
+  font-family: var(--font-serif);
+  font-size: 21px;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  color: var(--color-text);
+  transition: color var(--duration-hover) var(--ease-out);
+}
+
+.document-title:hover {
+  color: var(--color-accent);
+}
+
+.row-summary {
+  margin: var(--space-1-5) 0 0;
+  font-family: var(--font-serif);
+  font-size: 14px;
+  font-style: italic;
+  color: var(--color-text-muted);
+  line-height: 1.5;
+  max-width: 62ch;
+}
+
+.row-status {
+  align-self: start;
+  padding-top: var(--space-1-5);
+}
+
+.row-date {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--color-text-muted);
+  text-align: right;
+  padding-top: var(--space-1-5);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.empty-state {
+  margin: 0;
+  padding: var(--space-6) 0;
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+
+.list-actions {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--space-6);
+}
+
+/* ── Document view ────────────────────────────────────────────────────── */
+.doc-kicker {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  margin-top: var(--space-6);
+  font-family: var(--font-sans);
+  font-size: 11px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+
+.doc-status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1-5);
+  border: 1px solid currentColor;
+  padding: var(--space-1) var(--space-2);
+  font-weight: 500;
+}
+
+.doc-title {
+  margin: var(--space-6) 0 var(--space-6);
+  font-family: var(--font-serif);
+  font-weight: 500;
+  font-size: var(--text-3xl);
+  line-height: 1.02;
+  letter-spacing: -0.025em;
+  max-width: 18ch;
+}
+
+.doc-byline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4-5);
+  padding: var(--space-3) 0;
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
+  font-family: var(--font-sans);
+  font-size: 12px;
+  color: var(--color-text-muted);
+  letter-spacing: 0.02em;
+}
+
+.doc-byline b {
+  color: var(--color-text);
+  font-weight: 600;
+}
+
+.doc-byline code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.doc-standfirst {
+  margin: var(--space-6) 0 0;
+  max-width: 62ch;
+  font-family: var(--font-serif);
+  font-size: 19px;
+  font-style: italic;
+  line-height: 1.5;
+  color: var(--color-text-muted);
+}
+
+.document-grid {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  gap: var(--space-12);
+  margin-top: var(--space-7);
+  align-items: start;
+}
+
+/* Meta sidebar */
+.metadata-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  position: sticky;
+  top: var(--space-6);
+  align-self: start;
+  max-height: calc(100vh - 48px);
+  overflow-y: auto;
+  scrollbar-width: thin;
+  /* Recede while reading the body; restore on hover */
+  opacity: 0.55;
+  transition: opacity 0.4s ease;
+}
+
+.metadata-panel:hover,
+.metadata-panel:focus-within {
+  opacity: 1;
+  transition: opacity 0.15s ease;
+}
+
+@media (max-width: 960px) {
+  .metadata-panel {
+    position: static;
+    max-height: none;
+    overflow: visible;
+    opacity: 1;
+  }
+}
+
+.meta-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.meta-block dt,
+.meta-lbl {
+  font-family: var(--font-sans);
+  font-size: 10px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+  font-weight: 500;
+}
+
+.meta-block dd,
+.meta-val {
+  margin: 0;
+  font-family: var(--font-serif);
+  font-size: 14px;
+  color: var(--color-text);
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+
+.meta-val code,
+.meta-block dd code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  word-break: break-all;
+}
+
+.metadata-panel dl {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  margin: 0;
+}
+
+/* Connections list inside meta sidebar */
+.meta-lbl .ct {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0;
+  color: var(--color-text-muted);
+  font-weight: 400;
+  opacity: 0.8;
+}
+
+.meta-links {
+  display: flex;
+  flex-direction: column;
+  margin-top: 2px;
+}
+
+.metalink {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: var(--space-2) 0;
+  border-bottom: 1px dotted var(--color-border);
+  transition: color 0.12s;
+}
+
+.metalink:first-child {
+  padding-top: var(--space-1);
+}
+
+.metalink:last-child {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+
+.metalink .id {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+
+.metalink .t {
+  font-family: var(--font-serif);
+  font-size: 13px;
+  line-height: 1.3;
+  font-weight: 500;
+  letter-spacing: -0.005em;
+  color: var(--color-text);
+}
+
+a.metalink:hover .t {
+  color: var(--color-accent);
+}
+
+.metalink.empty .t {
+  font-style: italic;
+  font-weight: 400;
+  color: var(--color-text-muted);
+}
+
+/* ── Markdown body ────────────────────────────────────────────────────── */
+.markdown {
+  min-width: 0;
+  max-width: 64ch;
+  font-family: var(--font-serif);
+  font-size: 17px;
+  line-height: 1.65;
+}
+
+.markdown h1,
+.markdown h2 {
+  font-family: var(--font-serif);
+  font-weight: 500;
+  font-size: 32px;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  margin: var(--space-11) 0 var(--space-3-5);
+  position: relative;
+}
+
+.markdown h1::before,
+.markdown h2::before {
+  content: "";
+  display: block;
+  width: 28px;
+  height: 2px;
+  background: var(--color-accent);
+  margin-bottom: var(--space-3-5);
+}
+
+.markdown h3 {
+  font-family: var(--font-serif);
+  font-weight: 500;
+  font-style: italic;
+  font-size: 22px;
+  line-height: 1.15;
+  margin: var(--space-8) 0 var(--space-3);
+}
+
+.markdown h4 {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin: var(--space-6) 0 var(--space-1);
+}
+
+.markdown h1:first-child,
+.markdown h2:first-child,
+.markdown h3:first-child,
+.markdown h4:first-child {
+  margin-top: 0;
+}
+
+.markdown h1:first-child::before,
+.markdown h2:first-child::before {
+  content: none;
+}
+
+.markdown p {
+  margin: 0 0 var(--space-4);
+}
+
+.markdown a {
+  color: var(--color-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.markdown code {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  background: var(--color-border-soft);
+  padding: 1px 5px;
+  border-radius: 3px;
+  color: var(--color-text);
+}
+
+.markdown pre {
+  overflow-x: auto;
+  padding: var(--space-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-panel-muted);
+}
+
+.markdown pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.85em;
+}
+
+.markdown ul,
+.markdown ol {
+  margin: 0 0 var(--space-4-5);
+  padding-left: var(--space-6);
+}
+
+.markdown li {
+  margin-bottom: var(--space-2);
+}
+
+.markdown ul li::marker {
+  color: var(--color-accent);
+}
+
+.markdown ol {
+  list-style: none;
+  counter-reset: olc;
+  padding-left: 0;
+}
+
+.markdown ol li {
+  counter-increment: olc;
+  padding-left: var(--space-9);
+  position: relative;
+}
+
+.markdown ol li::before {
+  content: counter(olc, decimal-leading-zero);
+  position: absolute;
+  left: 0;
+  top: 1px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--color-accent);
+}
+
+.markdown blockquote {
+  margin: 0 0 var(--space-4-5);
+  padding-left: var(--space-4-5);
+  border-left: 2px solid var(--color-accent);
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+
+.markdown table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--font-sans);
+  font-size: 13px;
+}
+
+.markdown th,
+.markdown td {
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border);
+  text-align: left;
+}
+
+.markdown th {
+  background: var(--color-panel-muted);
+}
+
+/* ── Relations / chip lists (external references) ─────────────────────── */
+.relations {
+  margin-top: var(--space-8);
+  padding-top: var(--space-6);
+  border-top: 1px solid var(--color-border);
+}
+
+.relations h2 {
+  margin: 0 0 var(--space-3);
+  font-family: var(--font-serif);
+  font-weight: 500;
+  font-size: 22px;
+}
+
+.relation-group {
+  margin-top: var(--space-4);
+}
+
+.relation-group-header {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin: 0 0 var(--space-2);
+}
+
+.relation-group h3 {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+
+.chip-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+/* ── Validation issues ────────────────────────────────────────────────── */
+.issue-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  margin-top: var(--space-4);
+}
+
+.issue-list.compact {
+  gap: var(--space-2);
+}
+
+.issue-list h2 {
+  margin: 0 0 var(--space-2);
+  font-family: var(--font-serif);
+  font-weight: 500;
+  font-size: 18px;
+}
+
+.issue {
+  margin: 0;
+  padding: var(--space-3) var(--space-4);
+  border-left: 2px solid var(--color-border);
+  background: var(--color-panel);
+}
+
+.issue div {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+  font-family: var(--font-sans);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+
+.issue p {
+  margin: var(--space-2) 0;
+}
+
+.issue a {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--color-accent);
+}
+
+.severity-error {
+  border-left-color: var(--color-danger);
+}
+
+.severity-warning {
+  border-left-color: var(--color-warning);
+}
+
+/* ── Graph view ───────────────────────────────────────────────────────── */
+.graph-toolbar {
+  margin-top: var(--space-8);
+  margin-bottom: var(--space-4);
+  padding: var(--space-4-5) 0 var(--space-4);
+  border-top: 1.5px solid var(--color-text);
+  border-bottom: 1px solid var(--color-border);
+  display: grid;
+  grid-template-columns: repeat(2, minmax(140px, 220px));
+  gap: var(--space-6);
+  align-items: end;
+}
+
+.graph-shell {
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-panel);
+}
+
+.graph-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4);
+  margin-top: var(--space-3);
+  font-family: var(--font-sans);
+  color: var(--color-text-muted);
+  font-size: 12px;
+}
+
+.graph-legend span {
+  display: inline-flex;
+  gap: var(--space-2);
+  align-items: center;
+}
+
+.legend-line {
+  display: inline-block;
+  width: 28px;
+  border-top: 2px solid var(--color-text-muted);
+}
+
+.legend-line.related {
+  border-top-style: dashed;
+  opacity: 0.7;
+}
+
+.legend-line.supersession {
+  border-color: var(--color-warning);
+}
+
+.legend-swatch {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--color-border);
+}
+
+/* ── Theme + language toggles (sidebar foot) ──────────────────────────── */
+.ui-theme-toggle {
+  display: inline-flex;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.ui-theme-toggle legend {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.ui-theme-toggle label {
+  display: inline-flex;
+}
+
+.ui-theme-toggle input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
+
+.ui-theme-toggle span {
+  display: inline-grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--color-border);
+  border-radius: 50%;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: var(--text-md);
+  transition:
+    background var(--duration-hover) var(--ease-out),
+    color var(--duration-hover) var(--ease-out),
+    border-color var(--duration-hover) var(--ease-out),
+    transform var(--duration-press) var(--ease-out);
+}
+
+.ui-theme-toggle label:active span {
+  transform: scale(0.92);
+}
+
+.ui-theme-toggle input:checked + span {
+  background: var(--color-text);
+  color: var(--color-bg);
+  border-color: var(--color-text);
+}
+
+.ui-theme-toggle input:focus-visible + span {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 1px;
+}
+
+:root[data-sidebar="collapsed"] .sidebar-foot {
+  align-items: center;
+}
+
+/* Language popover (scales to N languages) */
+.lang-switcher {
+  position: relative;
+  font-family: var(--font-sans);
+}
+
+.lang-trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1) 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.lang-trigger .code {
+  font-size: 11px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-text);
+  font-weight: 500;
+  border-bottom: 1px solid var(--color-accent);
+  padding-bottom: 1px;
+}
+
+.lang-trigger .name {
+  font-family: var(--font-serif);
+  font-size: 11px;
+  font-style: italic;
+  color: var(--color-text-muted);
+}
+
+.lang-trigger .caret {
+  font-size: 9px;
+  color: var(--color-text-muted);
+}
+
+.lang-menu {
+  position: absolute;
+  bottom: calc(100% + var(--space-1-5));
+  left: 0;
+  z-index: 10;
+  min-width: 168px;
+  max-height: 220px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-1) 0;
+  background: var(--color-panel);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-md);
+  transform-origin: bottom left;
+  transition:
+    opacity var(--duration-popover) var(--ease-out),
+    transform var(--duration-popover) var(--ease-out);
+
+  @starting-style {
+    opacity: 0;
+    transform: scale(0.96) translateY(4px);
+  }
+}
+
+.lang-menu button {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  border: 0;
+  background: none;
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--duration-hover) var(--ease-out);
+}
+
+.lang-menu button:hover {
+  background: var(--color-panel-muted);
+}
+
+.lang-menu .code {
+  width: 22px;
+  font-family: var(--font-sans);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-text);
+}
+
+.lang-menu .name {
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-size: 13px;
+  color: var(--color-text-muted);
+}
+
+.lang-menu button.is-active .name {
+  color: var(--color-text);
+}
+
+:root[data-sidebar="collapsed"] .lang-switcher .name,
+:root[data-sidebar="collapsed"] .lang-trigger .caret {
+  display: none;
+}
+
+/* Theme control — circular toggle expanded, dropdown collapsed */
+.theme-control {
+  display: contents;
+}
+
+.theme-dropdown {
+  display: none;
+  position: relative;
+}
+
+.theme-trigger {
+  display: inline-grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--color-border);
+  border-radius: 50%;
+  background: var(--color-text);
+  color: var(--color-bg);
+  font-family: var(--font-sans);
+  font-size: var(--text-md);
+  cursor: pointer;
+  transition: transform var(--duration-press) var(--ease-out);
+}
+
+.theme-trigger:active {
+  transform: scale(0.94);
+}
+
+.theme-menu {
+  position: absolute;
+  bottom: calc(100% + var(--space-1-5));
+  left: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  min-width: 140px;
+  padding: var(--space-1) 0;
+  background: var(--color-panel);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-md);
+  transform-origin: bottom left;
+  transition:
+    opacity var(--duration-popover) var(--ease-out),
+    transform var(--duration-popover) var(--ease-out);
+
+  @starting-style {
+    opacity: 0;
+    transform: scale(0.96) translateY(4px);
+  }
+}
+
+.theme-menu button {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  border: 0;
+  background: none;
+  text-align: left;
+  cursor: pointer;
+  color: var(--color-text-muted);
+  transition:
+    background var(--duration-hover) var(--ease-out),
+    color var(--duration-hover) var(--ease-out);
+}
+
+.theme-menu button:hover {
+  background: var(--color-panel-muted);
+}
+
+.theme-menu button.is-active {
+  color: var(--color-text);
+}
+
+.theme-menu .sym {
+  width: 16px;
+  text-align: center;
+  font-family: var(--font-sans);
+}
+
+.theme-menu .name {
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-size: 13px;
+}
+
+:root[data-sidebar="collapsed"] .ui-theme-toggle {
+  display: none;
+}
+
+:root[data-sidebar="collapsed"] .theme-dropdown {
+  display: block;
+}
+
+/* ── Responsive ───────────────────────────────────────────────────────── */
+@media (max-width: 960px) {
+  .document-grid {
+    grid-template-columns: 1fr;
+    gap: var(--space-7);
+  }
+}
+
+@media (max-width: 860px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .sidebar {
+    position: static;
+    height: auto;
+    flex-direction: column;
+    border-right: 0;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .content {
+    padding: var(--space-6);
+  }
+
+  .page-header h1 {
+    font-size: 44px;
+  }
+
+  .toolbar,
+  .graph-toolbar {
+    grid-template-columns: 1fr;
+    gap: var(--space-4);
+  }
+
+  .document-row {
+    grid-template-columns: 1fr auto;
+    gap: var(--space-2) var(--space-4);
+  }
+
+  .row-id {
+    grid-column: 1 / -1;
+  }
+
+  .row-date {
+    grid-column: 1 / -1;
+    text-align: left;
+  }
+}
+
+/* ── Reduced motion ───────────────────────────────────────────────────── */
+/* Keep opacity/color transitions (aid comprehension); drop movement. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+  }
+}