/* Shared controls and surfaces; app-specific geometry stays in each project. */
html, body { background-color: var(--bg); color: var(--text); font-family: var(--font-ui); }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
button, input, select, textarea { font-family: inherit; }
button { color: var(--text); background: var(--panel-2); border: 1px solid var(--control-border); border-radius: var(--radius-control); }
button:hover { background: var(--border); }
button:active:not(:disabled) { border-color: var(--accent); }
button.primary, button[data-variant="primary"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
button.primary:hover, button[data-variant="primary"]:hover { background: var(--accent-hover); }
button[data-variant="focus"] { background: var(--focus); border-color: var(--focus); color: var(--bg); }
button[data-variant="focus"]:hover:not(:disabled) { background: color-mix(in srgb, var(--focus) 85%, white); }
button[data-variant="focus"]:active:not(:disabled) { background: var(--focus); border-color: var(--focus); }
button:disabled { opacity: .5; cursor: default; }
input:not([type="range"]):not([type="checkbox"]):not([type="color"]):not([type="file"]), select, textarea { background: var(--bg); color: var(--text); border: 1px solid var(--control-border); border-radius: var(--radius-control); }
input[type="range"], input[type="checkbox"], progress { accent-color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.panel, .card, .dialog { background: var(--panel); color: var(--text); border-color: var(--border); border-radius: var(--radius-panel); }
.hint, .note, .host { color: var(--muted); }
.error { color: var(--danger); }
.viewer, .canvasWrap { background: var(--bg); }
.drop { border-color: var(--control-border); border-radius: var(--radius-panel); }
.drop.drag { background: var(--panel-2); border-color: var(--accent); }
.card.selected { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.stat { background: var(--bg); }
.stat b { color: var(--accent); }
code, pre, kbd { font-family: var(--font-code); }
/* Converter headings and supporting copy use the same surfaces and colors. */
body > header { background: var(--panel-2); border-color: var(--border); }
body > header a { color: var(--accent); }
body > header p, main p { color: var(--muted); }
.metric { border-color: var(--border); }
/* Compact terminal-like identifiers; prose and form labels stay proportional. */
h1, .brand-mark, .menubar .brand, .story-label {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .025em;
}
.story-label { color: var(--accent); font-size: .75rem; text-transform: uppercase; }
.site-header, body > header { border-top: 3px solid var(--accent-dim); }
.nav a, .site-main code, .stat, .viewer, .canvasWrap { border-radius: var(--radius-control); }
.card-list li { border-radius: var(--radius-panel); }
.badge { border-radius: var(--radius-control); font-family: var(--font-code); }
input[aria-invalid="true"] { border-color: var(--danger); }

/* Website-based header, shared by the hosted and standalone tools. */
.tool-header { padding: 0; background: var(--panel-2); border-bottom: 1px solid var(--border); border-top: 3px solid var(--accent-dim); }
.topbar-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10.8px 21.6px; padding: 14.4px 25.2px; font: 16px/1.55 var(--font-ui); }
.topbar-brand { display: flex; align-items: baseline; gap: 7.2px; color: var(--text); text-decoration: none; }
.topbar-brand:hover { color: var(--text); text-decoration: none; }
.topbar-brand .brand-mark { font-family: var(--font-display); font-weight: 600; letter-spacing: .12em; color: var(--accent); }
.topbar-brand .brand-host { color: var(--muted); font-size: .85rem; }
.topbar-nav { display: flex; flex-wrap: wrap; gap: 3.6px; }
.topbar-nav a, .topbar-nav > span { padding: 5.4px 9px; color: var(--text); border-radius: var(--radius-control); text-decoration: none; }
.topbar-nav a:hover { background: var(--panel); color: var(--accent); }
.topbar-nav [aria-current] { color: var(--accent); background: var(--bg); }
/* Converter navigation lives in one bar: home/path on the left, modes on the right. */
.converter-header .topbar-main { flex-wrap: nowrap; gap: 12px; }
.converter-header .breadcrumbs, .compact-tool-header .breadcrumbs { font-size: 16px; }
.converter-header .breadcrumbs .brand-mark, .compact-tool-header .breadcrumbs .brand-mark { color: var(--accent); letter-spacing: .12em; }
.compact-tool-header .topbar-main { gap: 12px; }
.compact-tool-header .topbar-actions { flex-shrink: 0; margin-left: auto; gap: 0; padding: 2px; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--panel); }
.compact-tool-header .topbar-actions .menu > button { padding: 5.4px 9px; }
.compact-tool-header .topbar-actions .menu-list { left: auto; right: 0; }
.converter-header .converter-toggle { flex-wrap: nowrap; flex-shrink: 0; gap: 0; padding: 2px; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--panel); }
.converter-header .converter-toggle [aria-current] { background: var(--bg); color: var(--accent); }
.topbar-context { display: flex; flex-wrap: wrap; align-items: center; gap: 7.2px 14.4px; padding: 7.2px 25.2px; border-top: 1px solid var(--border); font: 13px/1.5 var(--font-ui); }
.topbar-context .topbar-nav { margin-left: auto; }
.topbar-context .mode-note { width: 100%; margin: 0; font-size: 12px; color: var(--muted); }
.breadcrumbs { min-width: 0; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 3.6px; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 3.6px; min-width: 0; overflow-wrap: anywhere; }
.breadcrumbs li + li::before { content: "›" / ""; color: var(--muted); }
body:not([data-hub-hosted]) .breadcrumbs .hub-only + li::before { content: none; }
.breadcrumbs a, .breadcrumbs button, .breadcrumbs span { padding: 3.6px; }
.breadcrumbs a, .breadcrumbs button { color: var(--accent); text-decoration: none; }
.breadcrumbs button { font: inherit; background: transparent; border: 0; cursor: pointer; }
.breadcrumbs a:hover, .breadcrumbs button:hover { color: var(--accent-hover); background: var(--panel); }
.breadcrumbs [aria-current] { color: var(--text); }
.site-breadcrumbs { flex-basis: 100%; font-size: 13px; }
.hub-only { display: none !important; }
body[data-hub-hosted] .hub-only { display: flex !important; }
body[data-hub-hosted] .standalone-only { display: none !important; }
.tool-header [hidden] { display: none !important; }
@media (max-width: 600px) {
  .topbar-main { padding: 14.4px 18px; }
  .topbar-context { padding: 7.2px 18px; }
}

[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }