/*
 * OPF editor UI tokens (RR-98). Every other file in this stylesheet uses only these `--opf-ui-*` variables.
 * Values copy the openpresentation.org design system. The host loads Inter and Geist Mono; nothing here fetches a font.
 * Light is the default. Dark applies under `.dark .opf-ui`, `.opf-ui.dark`, `[data-theme=dark]` (on the root or on any ancestor) and `:root.dark`.
 */
:root,
.opf-ui {
  --opf-ui-bg: hsl(210 30% 98%);
  --opf-ui-surface: hsl(0 0% 100%);
  --opf-ui-muted: hsl(214 28% 93%);
  --opf-ui-muted-2: hsl(214 28% 96%);
  --opf-ui-fg: hsl(220 28% 11%);
  --opf-ui-muted-fg: hsl(218 14% 38%);
  --opf-ui-accent: hsl(214 57% 28%);
  --opf-ui-accent-fg: hsl(0 0% 100%);
  --opf-ui-accent-strong: hsl(214 57% 28%);
  --opf-ui-border: hsl(214 22% 83%);
  --opf-ui-border-strong: hsl(214 22% 72%);
  --opf-ui-ring: hsl(214 57% 28%);
  --opf-ui-danger: hsl(0 72% 45%);
  --opf-ui-warn: hsl(28 75% 38%);
  --opf-ui-success: hsl(152 76% 26%);
  --opf-ui-code-bg: hsl(220 30% 96%);
  --opf-ui-code-border: hsl(214 18% 84%);

  --opf-ui-font: Inter, system-ui, sans-serif;
  --opf-ui-mono: "Geist Mono", ui-monospace, Menlo, monospace;

  --opf-ui-radius-sm: 4px;
  --opf-ui-radius: 6px;
  --opf-ui-radius-md: 8px;
  --opf-ui-radius-lg: 12px;

  --opf-ui-control-h: 32px;
  --opf-ui-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.1);
  --opf-ui-ease: 120ms ease;

  color-scheme: light;
}

:root.dark,
.dark .opf-ui,
.opf-ui.dark,
[data-theme="dark"],
[data-theme="dark"] .opf-ui {
  --opf-ui-bg: hsl(220 24% 9%);
  --opf-ui-surface: hsl(220 22% 11%);
  --opf-ui-muted: hsl(220 18% 16%);
  --opf-ui-muted-2: hsl(220 18% 13%);
  --opf-ui-fg: hsl(210 28% 92%);
  --opf-ui-muted-fg: hsl(215 13% 68%);
  --opf-ui-accent: hsl(214 57% 52%);
  --opf-ui-accent-fg: hsl(220 24% 9%);
  --opf-ui-accent-strong: hsl(214 74% 72%);
  --opf-ui-border: hsl(220 17% 24%);
  --opf-ui-border-strong: hsl(220 17% 34%);
  --opf-ui-ring: hsl(214 57% 62%);
  --opf-ui-danger: hsl(0 65% 56%);
  --opf-ui-warn: hsl(32 80% 70%);
  --opf-ui-success: hsl(152 60% 70%);
  --opf-ui-code-bg: hsl(222 22% 13%);
  --opf-ui-code-border: hsl(220 16% 24%);

  --opf-ui-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.4);

  color-scheme: dark;
}

/* Touch density: controls grow to 40px, as in the mobile design. */
.opf-ui[data-density="touch"],
[data-density="touch"] .opf-ui {
  --opf-ui-control-h: 40px;
}

/* A coarse pointer (a finger) gets 44px controls, whatever the density: every control built from --opf-ui-control-h grows with it, and
   src/styles/touch.css lifts the ones that size themselves. Comes after the density rule so it wins at equal specificity. */
@media (pointer: coarse) {
  :root,
  .opf-ui,
  .opf-ui[data-density="touch"],
  [data-density="touch"] .opf-ui {
    --opf-ui-control-h: 44px;
  }
}

/* Base rules for a mounted component or a whole editor surface. */
.opf-ui {
  font-family: var(--opf-ui-font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--opf-ui-fg);
  -webkit-font-smoothing: antialiased;
}

.opf-ui *,
.opf-ui *::before,
.opf-ui *::after {
  box-sizing: border-box;
}

.opf-ui :focus-visible {
  outline: 2px solid var(--opf-ui-ring);
  outline-offset: 2px;
}

/* Motion is color and border only, and it is off when the person asks for less. */
@media (prefers-reduced-motion: reduce) {
  :root,
  .opf-ui {
    --opf-ui-ease: 0s linear;
  }

  .opf-ui,
  .opf-ui *,
  .opf-ui *::before,
  .opf-ui *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* export-menu.css */
/* RR-98: the Export menu (src/export-menu.js). Only --opf-ui-* tokens, no color literals (test/styles.mjs). */
.opf-export,
.opf-export *,
.opf-export *::before,
.opf-export *::after { box-sizing: border-box; }
.opf-export [hidden] { display: none !important; }

.opf-export {
  position: relative;
  display: inline-flex;
  font-family: var(--opf-ui-font);
  font-size: 13px;
  line-height: 1.4;
  color: var(--opf-ui-fg);
}
:where(.opf-export button) { font: inherit; color: inherit; margin: 0; }
.opf-export .opf-icon { flex: none; }

.opf-export button:focus-visible {
  outline: 2px solid var(--opf-ui-ring);
  outline-offset: 2px;
}

/* ---- trigger --------------------------------------------------------------------------------------------------------------------------- */
.opf-export .opf-export-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--opf-ui-control-h);
  padding: 0 8px 0 12px;
  border: 1px solid var(--opf-ui-accent);
  border-radius: var(--opf-ui-radius);
  background: var(--opf-ui-accent);
  color: var(--opf-ui-accent-fg);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity var(--opf-ui-ease);
}
.opf-export .opf-export-trigger:hover { opacity: 0.92; }
.opf-export .opf-export-trigger[aria-expanded="true"] { opacity: 0.92; }

/* ---- the menu (a popover under the trigger) ------------------------------------------------------------------------------------------ */
.opf-export .opf-export-popover,
.opf-export .opf-export-status {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-lg);
  box-shadow: var(--opf-ui-shadow-pop);
}
.opf-export .opf-export-popover { width: 264px; padding: 4px; border-radius: var(--opf-ui-radius-md); }
.opf-export[data-align="start"] .opf-export-popover,
.opf-export[data-align="start"] .opf-export-status { right: auto; left: 0; }

.opf-export .opf-export-menu { display: flex; flex-direction: column; }
.opf-export .opf-export-group + .opf-export-group {
  margin-top: 4px;
  border-top: 1px solid var(--opf-ui-border);
}
.opf-export .opf-export-group-label {
  padding: 6px 10px 4px;
  font: 500 10.5px/1.4 var(--opf-ui-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--opf-ui-muted-fg);
}
.opf-export .opf-export-group + .opf-export-group .opf-export-group-label { padding-top: 8px; }

.opf-export .opf-export-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--opf-ui-radius-sm);
  background: transparent;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--opf-ui-ease), color var(--opf-ui-ease);
}
.opf-export .opf-export-item .opf-icon { color: var(--opf-ui-accent-strong); }
.opf-export .opf-export-item-label { flex: 1; min-width: 0; }
.opf-export .opf-export-item-meta {
  font: 400 11px/1.4 var(--opf-ui-mono);
  color: var(--opf-ui-muted-fg);
}
.opf-export .opf-export-item:hover { background: var(--opf-ui-muted); }
.opf-export .opf-export-item:focus-visible { background: var(--opf-ui-muted); }
.opf-export .opf-export-item[aria-disabled="true"] { cursor: not-allowed; }
.opf-export .opf-export-item[aria-disabled="true"] > * { opacity: 0.5; }
.opf-export .opf-export-item[aria-disabled="true"]:hover { background: transparent; }

/* ---- the bottom sheet -------------------------------------------------------------------------------------------------------------------- */
.opf-export .opf-export-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--opf-ui-fg) 32%, transparent);
}
.opf-export .opf-export-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  max-height: 85vh;
  overflow: auto;
  padding: 8px 8px max(20px, env(safe-area-inset-bottom));
  background: var(--opf-ui-surface);
  border-top: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-lg) var(--opf-ui-radius-lg) 0 0;
  box-shadow: var(--opf-ui-shadow-pop);
}
.opf-export .opf-export-handle {
  width: 36px;
  height: 4px;
  margin: 2px auto 10px;
  border-radius: 2px;
  background: var(--opf-ui-border-strong);
}
.opf-export .opf-export-sheet-head { display: flex; align-items: center; padding: 0 8px 6px; }
.opf-export .opf-export-sheet-title { font-size: 15px; font-weight: 600; }
.opf-export .opf-export-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: 0;
  border-radius: var(--opf-ui-radius);
  background: transparent;
  color: var(--opf-ui-muted-fg);
  cursor: pointer;
  transition: background-color var(--opf-ui-ease), color var(--opf-ui-ease);
}
.opf-export .opf-export-close:hover { background: var(--opf-ui-muted); color: var(--opf-ui-fg); }
.opf-export[data-mode="sheet"] .opf-export-sheet .opf-export-item { gap: 12px; min-height: 44px; padding: 0 12px; font-size: 14px; border-radius: var(--opf-ui-radius); }
.opf-export .opf-export-sheet .opf-export-group-label { padding: 6px 12px 4px; }
.opf-export .opf-export-sheet .opf-export-group + .opf-export-group .opf-export-group-label { padding-top: 10px; }

/* ---- density ----------------------------------------------------------------------------------------------------------------------------- */
.opf-export[data-density="touch"] .opf-export-trigger { height: max(var(--opf-ui-control-h), 40px); }
.opf-export[data-density="touch"] .opf-export-item { min-height: 40px; }

/* ---- progress, result and notes ----------------------------------------------------------------------------------------------------- */
.opf-export .opf-export-status {
  width: 300px;
  max-width: calc(100vw - 16px);
  padding: 10px 12px;
  border-radius: var(--opf-ui-radius-md);
  z-index: 30;
}
.opf-export .opf-export-status-row { display: flex; align-items: flex-start; gap: 8px; }
.opf-export .opf-export-status-icon { display: inline-flex; padding-top: 2px; }
.opf-export .opf-export-status-icon:empty { display: none; }
.opf-export .opf-export-status[data-state="success"] .opf-export-status-icon { color: var(--opf-ui-success); }
.opf-export .opf-export-status[data-state="error"] .opf-export-status-icon { color: var(--opf-ui-danger); }
.opf-export .opf-export-status-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.opf-export .opf-export-status[data-state="error"] .opf-export-status-text { color: var(--opf-ui-danger); }
.opf-export .opf-export-status[data-state="busy"] .opf-export-status-text,
.opf-export .opf-export-status[data-state="cancelled"] .opf-export-status-text { color: var(--opf-ui-muted-fg); }
.opf-export .opf-export-status-action {
  flex: none;
  height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--opf-ui-radius-sm);
  background: transparent;
  color: var(--opf-ui-accent-strong);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--opf-ui-ease);
}
.opf-export .opf-export-status-action:hover { background: var(--opf-ui-muted); }

.opf-export .opf-export-progress {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 8px;
  border: 0;
  border-radius: 2px;
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  background: var(--opf-ui-muted);
  color: var(--opf-ui-accent);
}
.opf-export .opf-export-progress::-webkit-progress-bar { background: var(--opf-ui-muted); }
.opf-export .opf-export-progress::-webkit-progress-value { background: var(--opf-ui-accent); }
.opf-export .opf-export-progress::-moz-progress-bar { background: var(--opf-ui-accent); }

.opf-export .opf-export-notes {
  max-height: 140px;
  margin: 8px 0 0;
  padding: 8px 0 0 18px;
  overflow: auto;
  border-top: 1px solid var(--opf-ui-border);
  font-size: 12px;
  color: var(--opf-ui-warn);
  overflow-wrap: anywhere;
}
.opf-export .opf-export-notes li + li { margin-top: 4px; }

/* The live region is for assistive technology only. */
.opf-export .opf-export-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* On a phone the status sits at the bottom, where the sheet was. */
.opf-export[data-mode="sheet"] .opf-export-status {
  position: fixed;
  top: auto;
  left: 8px;
  right: 8px;
  bottom: max(8px, env(safe-area-inset-bottom));
  width: auto;
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .opf-export *,
  .opf-export *::before,
  .opf-export *::after { transition: none !important; animation: none !important; }
}

/* handoff.css */
/* RR-98: the agent handoff dialog (src/agent-handoff-dialog.js). Only --opf-ui-* tokens, no color literals (test/styles.mjs). */
.opf-handoff,
.opf-handoff *,
.opf-handoff *::before,
.opf-handoff *::after { box-sizing: border-box; }
.opf-handoff [hidden] { display: none !important; }

.opf-handoff {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 680px);
  justify-content: center;
  align-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--opf-ui-fg) 32%, transparent);
  font-family: var(--opf-ui-font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--opf-ui-fg);
}
:where(.opf-handoff button, .opf-handoff textarea) { font: inherit; color: inherit; margin: 0; }
.opf-handoff button:focus-visible,
.opf-handoff textarea:focus-visible {
  outline: 2px solid var(--opf-ui-ring);
  outline-offset: 2px;
}

.opf-handoff .opf-handoff-dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: min(760px, calc(100vh - 32px));
  overflow: hidden;
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-lg);
  box-shadow: var(--opf-ui-shadow-pop);
}
.opf-handoff .opf-handoff-dialog:focus { outline: none; }

.opf-handoff .opf-handoff-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 14px 20px; }
.opf-handoff .opf-handoff-intro { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.opf-handoff .opf-handoff-title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.opf-handoff .opf-handoff-description { margin: 0; line-height: 1.55; color: var(--opf-ui-muted-fg); text-wrap: pretty; }
.opf-handoff .opf-handoff-description code,
.opf-handoff .opf-handoff-note code {
  font: 12px var(--opf-ui-mono);
  color: var(--opf-ui-fg);
}
.opf-handoff .opf-handoff-x {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--opf-ui-radius);
  background: transparent;
  color: var(--opf-ui-muted-fg);
  cursor: pointer;
  transition: background-color var(--opf-ui-ease), color var(--opf-ui-ease);
}
.opf-handoff .opf-handoff-x:hover { background: var(--opf-ui-muted); color: var(--opf-ui-fg); }

/* ---- the target switch ---------------------------------------------------------------------------------------------------------------- */
.opf-handoff .opf-handoff-targets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 20px 12px; }
.opf-handoff .opf-handoff-render { margin-right: 2px; font-size: 12px; color: var(--opf-ui-muted-fg); }
.opf-handoff .opf-handoff-segments { display: flex; flex-wrap: wrap; gap: 8px; }
.opf-handoff .opf-handoff-target {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--opf-ui-border);
  border-radius: 999px;
  background: transparent;
  color: var(--opf-ui-muted-fg);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--opf-ui-ease), border-color var(--opf-ui-ease), color var(--opf-ui-ease);
}
.opf-handoff .opf-handoff-target:hover { background: var(--opf-ui-muted); color: var(--opf-ui-fg); }
.opf-handoff .opf-handoff-target[aria-checked="true"] {
  border-color: color-mix(in srgb, var(--opf-ui-accent) 35%, transparent);
  background: color-mix(in srgb, var(--opf-ui-accent) 8%, transparent);
  color: var(--opf-ui-accent-strong);
}

/* ---- the prompt ------------------------------------------------------------------------------------------------------------------------- */
.opf-handoff .opf-handoff-box {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 20px;
  overflow: hidden;
  background: var(--opf-ui-code-bg);
  border: 1px solid var(--opf-ui-code-border);
  border-radius: var(--opf-ui-radius-md);
}
.opf-handoff .opf-handoff-box-head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--opf-ui-code-border);
  font: 500 12px var(--opf-ui-mono);
}
.opf-handoff .opf-handoff-count { font-weight: 400; color: var(--opf-ui-muted-fg); }
.opf-handoff .opf-handoff-prompt {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 220px;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--opf-ui-fg);
  font: 400 12.5px/1.6 var(--opf-ui-mono);
  white-space: pre-wrap;
  resize: none;
}
.opf-handoff .opf-handoff-prompt:focus-visible { outline-offset: -2px; }
.opf-handoff .opf-handoff-note { margin: 8px 20px 0; font-size: 12px; line-height: 1.5; color: var(--opf-ui-muted-fg); }

/* ---- the footer --------------------------------------------------------------------------------------------------------------------------- */
.opf-handoff .opf-handoff-foot {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 20px;
  border-top: 1px solid var(--opf-ui-border);
  background: var(--opf-ui-muted-2);
}
.opf-handoff .opf-handoff-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--opf-ui-control-h);
  padding: 0 12px;
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
  background: var(--opf-ui-surface);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--opf-ui-ease), border-color var(--opf-ui-ease), color var(--opf-ui-ease), opacity var(--opf-ui-ease);
}
.opf-handoff .opf-handoff-button:hover { border-color: var(--opf-ui-border-strong); }
.opf-handoff .opf-handoff-close {
  margin-right: auto;
  border-color: transparent;
  background: transparent;
  color: var(--opf-ui-muted-fg);
}
.opf-handoff .opf-handoff-close:hover { border-color: transparent; background: var(--opf-ui-muted); color: var(--opf-ui-fg); }
.opf-handoff .opf-handoff-button[data-primary] {
  min-width: 124px;
  border-color: var(--opf-ui-accent);
  background: var(--opf-ui-accent);
  color: var(--opf-ui-accent-fg);
}
.opf-handoff .opf-handoff-button[data-primary]:hover { opacity: 0.92; border-color: var(--opf-ui-accent); }

.opf-handoff .opf-handoff-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- density and small screens ----------------------------------------------------------------------------------------------------- */
.opf-handoff[data-density="touch"] .opf-handoff-button { height: max(var(--opf-ui-control-h), 40px); }
.opf-handoff[data-density="touch"] .opf-handoff-target { height: 40px; padding: 0 14px; }
.opf-handoff[data-density="touch"] .opf-handoff-x { width: 40px; height: 40px; }
@media (max-width: 520px) {
  .opf-handoff { padding: 8px; }
  .opf-handoff .opf-handoff-head { padding: 14px 10px 12px 14px; }
  .opf-handoff .opf-handoff-targets,
  .opf-handoff .opf-handoff-foot { padding-left: 14px; padding-right: 14px; }
  .opf-handoff .opf-handoff-box,
  .opf-handoff .opf-handoff-note { margin-left: 14px; margin-right: 14px; }
  .opf-handoff .opf-handoff-prompt { min-height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .opf-handoff *,
  .opf-handoff *::before,
  .opf-handoff *::after { transition: none !important; animation: none !important; }
}

/* layout-editor.css */
/* Layout editor (RR-99): palette, canvas, layers and inspector. Only --opf-ui-* tokens (src/styles/tokens.css); the few --opf-lx-* variables
   below are sizes local to this file. Prefix: opf-lx-. */

.opf-lx,
.opf-lx-palette,
.opf-lx-canvas,
.opf-lx-layers,
.opf-lx-inspector {
  --opf-lx-h: var(--opf-ui-control-h);
  --opf-lx-row: calc(var(--opf-ui-control-h) - 4px);
  --opf-lx-indent: 14px;
  --opf-lx-slot: 20px;
  --opf-lx-pad: 16px;
  --opf-lx-chip: calc(var(--opf-ui-control-h) - 4px);
  font-family: var(--opf-ui-font);
  font-size: 13px;
  color: var(--opf-ui-fg);
}
.opf-lx [hidden],
.opf-lx-palette [hidden],
.opf-lx-canvas [hidden],
.opf-lx-layers [hidden],
.opf-lx-inspector [hidden] { display: none !important; }
.opf-lx button,
.opf-lx-palette button,
.opf-lx-canvas button,
.opf-lx-layers button,
.opf-lx-inspector button { font: inherit; color: inherit; }
.opf-lx-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The composed editor */
.opf-lx {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  min-height: 480px;
  background: var(--opf-ui-bg);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-md);
  overflow: hidden;
}
.opf-lx-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  min-height: calc(var(--opf-ui-control-h) + 12px);
  padding: 6px 10px;
  background: var(--opf-ui-surface);
  border-bottom: 1px solid var(--opf-ui-border);
}
.opf-lx-history { display: inline-flex; gap: 2px; }
.opf-lx-top-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--opf-lx-h);
  height: var(--opf-lx-h);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--opf-ui-radius);
  color: var(--opf-ui-muted-fg);
  cursor: pointer;
  transition: color var(--opf-ui-ease), background-color var(--opf-ui-ease);
}
.opf-lx-top-button:hover:not(:disabled) { color: var(--opf-ui-fg); background: var(--opf-ui-muted); }
.opf-lx-top-button:disabled { opacity: 0.4; cursor: default; }
.opf-lx-doc-name { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; overflow: hidden; }
.opf-lx-doc-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opf-lx-doc-id { font: 11.5px var(--opf-ui-mono); color: var(--opf-ui-muted-fg); white-space: nowrap; }
.opf-lx-validity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: calc(var(--opf-lx-h) - 6px);
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
  font: 11.5px var(--opf-ui-mono);
  color: var(--opf-ui-success);
  cursor: default;
}
.opf-lx-validity[data-state="invalid"] { color: var(--opf-ui-danger); border-color: var(--opf-ui-danger); cursor: pointer; }
.opf-lx-validity:disabled { opacity: 1; }
.opf-lx-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(260px, 320px);
  flex: 1;
  min-height: 0;
}
.opf-lx-palette-host { display: flex; min-height: 0; }
.opf-lx-canvas-host { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.opf-lx-canvas-host > .opf-lx-canvas { flex: 1; }
.opf-lx-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--opf-ui-surface);
  border-left: 1px solid var(--opf-ui-border);
}
.opf-lx-side > .opf-lx-panel { display: flex; flex-direction: column; min-height: 0; }
.opf-lx-side > .opf-lx-panel[data-panel="layers"] { flex: 0 1 42%; border-bottom: 1px solid var(--opf-ui-border); }
.opf-lx-side > .opf-lx-panel[data-panel="inspector"] { flex: 1 1 58%; }
.opf-lx-side .opf-lx-layers,
.opf-lx-side .opf-lx-inspector { flex: 1; min-height: 0; }
.opf-lx-tabs { display: none; }

/* Narrow container: the palette is a row above the canvas; Layers and Inspector are tabs under it. */
.opf-lx[data-compact="true"] { min-height: 0; height: auto; }
.opf-lx[data-compact="true"] .opf-lx-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
.opf-lx[data-compact="true"] .opf-lx-palette-host { overflow-x: auto; border-bottom: 1px solid var(--opf-ui-border); }
.opf-lx[data-compact="true"] .opf-lx-palette { flex-direction: row; flex-wrap: wrap; justify-content: center; flex: 1; padding: 4px 8px; border-right: 0; }
.opf-lx[data-compact="true"] .opf-lx-tool-gap { width: 1px; height: auto; margin: 4px; }
.opf-lx[data-compact="true"] .opf-lx-viewport { min-height: 220px; }
.opf-lx[data-compact="true"] .opf-lx-side { border-left: 0; border-top: 1px solid var(--opf-ui-border); }
.opf-lx[data-compact="true"] .opf-lx-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--opf-ui-border);
}
.opf-lx-tab {
  flex: 1;
  height: var(--opf-lx-h);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--opf-ui-muted-fg);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--opf-ui-ease), border-color var(--opf-ui-ease);
}
.opf-lx-tab:hover { color: var(--opf-ui-fg); }
.opf-lx-tab[aria-selected="true"] { color: var(--opf-ui-accent-strong); border-bottom-color: var(--opf-ui-accent); }
.opf-lx[data-compact="true"] .opf-lx-side > .opf-lx-panel { flex: none; border-bottom: 0; max-height: 360px; }
.opf-lx[data-compact="true"][data-panel="layers"] .opf-lx-panel[data-panel="inspector"],
.opf-lx[data-compact="true"][data-panel="inspector"] .opf-lx-panel[data-panel="layers"] { display: none; }

/* Tool palette */
.opf-lx-palette {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  background: var(--opf-ui-surface);
  border-right: 1px solid var(--opf-ui-border);
}
.opf-lx-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--opf-lx-h);
  height: var(--opf-lx-h);
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--opf-ui-radius);
  color: var(--opf-ui-muted-fg);
  cursor: pointer;
  transition: color var(--opf-ui-ease), background-color var(--opf-ui-ease), border-color var(--opf-ui-ease);
}
.opf-lx-tool:hover:not(:disabled) { color: var(--opf-ui-fg); background: var(--opf-ui-muted); }
.opf-lx-tool.is-active,
.opf-lx-tool[aria-pressed="true"] {
  color: var(--opf-ui-accent-strong);
  background: color-mix(in srgb, var(--opf-ui-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--opf-ui-accent) 40%, transparent);
}
.opf-lx-tool:disabled { opacity: 0.4; cursor: default; }
.opf-lx-tool-gap { align-self: stretch; height: 1px; margin: 4px 2px; background: var(--opf-ui-border); }

/* Canvas */
.opf-lx-canvas {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: var(--opf-ui-muted-2);
}
.opf-lx-viewport {
  display: flex;
  flex: 1;
  min-height: 320px;
  container-type: size;
  overflow: auto;
}
.opf-lx-stage { flex: none; margin: auto; padding: var(--opf-lx-pad); }
.opf-lx-frame {
  position: relative;
  flex: none;
  width: calc(min(100cqw - 2 * var(--opf-lx-pad), (100cqh - 2 * var(--opf-lx-pad)) * 16 / 9) * var(--opf-lx-zoom, 1));
  min-width: 160px;
  aspect-ratio: 16 / 9;
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border-strong);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.opf-lx-frame:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 2px; }
.opf-lx-render { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.opf-lx-render svg { display: block; width: 100%; height: 100%; }
.opf-lx-content { position: absolute; inset: 8% 4.5%; }
.opf-lx-layer { position: absolute; inset: 0; pointer-events: none; }
.opf-lx-overlay { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.opf-lx-overlay > * { pointer-events: auto; }
.opf-lx-canvas[data-tool="select"] .opf-lx-content { cursor: default; }
.opf-lx-canvas[data-tool="split-row"] .opf-lx-content,
.opf-lx-canvas[data-tool="split-column"] .opf-lx-content { cursor: crosshair; }
.opf-lx-canvas[data-tool="hand"] .opf-lx-viewport,
.opf-lx-canvas[data-space="true"] .opf-lx-viewport { cursor: grab; }
.opf-lx-canvas[data-panning="true"] .opf-lx-viewport { cursor: grabbing; }
.opf-lx-canvas[data-tool="hand"] .opf-lx-content,
.opf-lx-canvas[data-space="true"] .opf-lx-content { cursor: grab; }

.opf-lx-implicit {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--opf-ui-border-strong);
  border-radius: var(--opf-ui-radius-sm);
  color: var(--opf-ui-muted-fg);
  font: 10.5px var(--opf-ui-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

.opf-lx-node {
  position: absolute;
  display: block;
  background: var(--opf-ui-muted-2);
  border: 1.5px solid var(--opf-ui-border-strong);
  border-radius: var(--opf-ui-radius-sm);
  pointer-events: none;
  transition: background-color var(--opf-ui-ease), border-color var(--opf-ui-ease);
}
.opf-lx-node[data-kind="split"] {
  background: transparent;
  border: 0;
  outline: 1.5px dashed var(--opf-ui-border-strong);
  outline-offset: 4px;
  border-radius: var(--opf-ui-radius);
  overflow: visible;
}
.opf-lx-node[data-heading="true"] { background: var(--opf-ui-muted); }
.opf-lx-node[data-hover="true"] { border-color: var(--opf-ui-accent); }
.opf-lx-node[data-kind="split"][data-hover="true"] { outline-color: var(--opf-ui-accent); }
.opf-lx-node.is-selected {
  border-color: var(--opf-ui-accent);
  border-style: solid;
  border-width: 2px;
  background: color-mix(in srgb, var(--opf-ui-accent) 10%, var(--opf-ui-muted-2));
}
.opf-lx-node[data-kind="split"].is-selected { background: color-mix(in srgb, var(--opf-ui-accent) 6%, transparent); outline: 2px solid var(--opf-ui-accent); border: 0; }
.opf-lx-node.is-dragging { opacity: 0.45; }
.opf-lx-node[data-into="true"] { border-color: var(--opf-ui-accent); border-style: solid; background: color-mix(in srgb, var(--opf-ui-accent) 8%, transparent); }
.opf-lx-node[data-kind="split"][data-into="true"] { outline: 2px solid var(--opf-ui-accent); border: 0; }
.opf-lx-node[data-finding="error"] { border-color: var(--opf-ui-danger); }
.opf-lx-node[data-kind="split"][data-finding="error"],
.opf-lx-node[data-kind="split"][data-finding="within"] { outline-color: var(--opf-ui-danger); }
.opf-lx-node:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 2px; }
/* The chip: the region's name and size, outside the box's top edge, in the gutter between regions. A split's tag sits at its top right. */
.opf-lx-label {
  --opf-lx-chip-h: 17px;
  position: absolute;
  bottom: calc(100% + 2px);
  left: -2px;
  z-index: 2;
  display: block;
  max-width: calc(100% + 3px);
  height: var(--opf-lx-chip-h);
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border-strong);
  border-bottom: 0;
  border-radius: var(--opf-ui-radius-sm) var(--opf-ui-radius-sm) 0 0;
  font: 500 11px/16px var(--opf-ui-mono);
  color: var(--opf-ui-fg);
}
.opf-lx-label::before { content: attr(data-text); }
.opf-lx-label::after { content: " · " attr(data-size); font-weight: 400; color: var(--opf-ui-muted-fg); }
.opf-lx-node[data-heading="true"] > .opf-lx-label { background: var(--opf-ui-muted); }
.opf-lx-node[data-kind="split"] > .opf-lx-label {
  bottom: calc(100% + 6px);
  left: auto;
  right: -2px;
  max-width: 45%;
  border-style: dashed;
  border-bottom: 0;
  background: var(--opf-ui-surface);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--opf-ui-muted-fg);
}
.opf-lx-node.is-selected > .opf-lx-label {
  background: color-mix(in srgb, var(--opf-ui-accent) 14%, var(--opf-ui-surface));
  border-color: var(--opf-ui-accent);
  color: var(--opf-ui-accent-strong);
}
.opf-lx-node[data-finding="error"] > .opf-lx-label { border-color: var(--opf-ui-danger); }
.opf-lx-badge { position: absolute; right: 6px; bottom: 4px; display: inline-flex; color: var(--opf-ui-danger); }
.opf-lx-wire {
  position: absolute;
  inset: 6px 6px 14px;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  gap: 4px;
  overflow: hidden;
  color: var(--opf-ui-muted-fg);
}
.opf-lx-wire-block {
  display: flex;
  flex: 1 1 72px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 26px;
  background: var(--opf-ui-surface);
  border: 1px dashed var(--opf-ui-border-strong);
  border-radius: var(--opf-ui-radius-sm);
  font: 10.5px var(--opf-ui-mono);
}
.opf-lx-wire-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opf-lx-wire-heading { flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; gap: 4px; inset: 5px 8px 14px; }
.opf-lx-bar { display: block; flex: none; width: 45%; height: 6px; background: var(--opf-ui-border-strong); border-radius: var(--opf-ui-radius-sm); }
.opf-lx-bar-short { width: 30%; }
/* A heading row on a very small slide is shorter than the chips of the row under it; its placeholder bars give way. */
.opf-lx-node[data-heading="true"] { container-type: size; }
@container (max-height: 44px) { .opf-lx-wire-heading { display: none; } }
/* Rendered preview: the host's drawing shows through, the boxes become outlines. */
.opf-lx-canvas[data-rendered="true"] .opf-lx-node { background: transparent; }
.opf-lx-canvas[data-rendered="true"] .opf-lx-node.is-selected { background: color-mix(in srgb, var(--opf-ui-accent) 8%, transparent); }
.opf-lx-canvas[data-rendered="true"] .opf-lx-wire { display: none; }
.opf-lx-canvas[data-rendered="loading"] .opf-lx-frame { opacity: 0.7; }

.opf-lx-divider {
  position: absolute;
  z-index: 5;
  pointer-events: auto;
  background: transparent;
  touch-action: none;
}
.opf-lx-divider::before { content: ""; position: absolute; }
.opf-lx-divider[data-orientation="vertical"] { cursor: col-resize; }
.opf-lx-divider[data-orientation="horizontal"] { cursor: row-resize; }
.opf-lx-divider[data-orientation="vertical"]::before { inset: 0 -6px; }
.opf-lx-divider[data-orientation="horizontal"]::before { inset: -6px 0; }
.opf-lx-divider::after { content: ""; position: absolute; background: transparent; border-radius: 2px; transition: background-color var(--opf-ui-ease); }
.opf-lx-divider[data-orientation="vertical"]::after { top: 4px; bottom: 4px; left: calc(50% - 1px); width: 2px; }
.opf-lx-divider[data-orientation="horizontal"]::after { left: 4px; right: 4px; top: calc(50% - 1px); height: 2px; }
.opf-lx-divider[data-fixed="false"]:hover::after,
.opf-lx-divider[data-fixed="false"]:focus-visible::after,
.opf-lx-divider[data-active="true"]::after { background: var(--opf-ui-accent); }
.opf-lx-divider[data-fixed="true"] { pointer-events: none; cursor: default; }
.opf-lx-divider:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 2px; }
.opf-lx-canvas[data-tool="insert"] .opf-lx-divider,
.opf-lx-canvas[data-tool="split-row"] .opf-lx-divider,
.opf-lx-canvas[data-tool="split-column"] .opf-lx-divider,
.opf-lx-canvas[data-tool="hand"] .opf-lx-divider,
.opf-lx-canvas[data-dragging="true"] .opf-lx-divider { pointer-events: none; }
.opf-lx-ratio {
  position: absolute;
  z-index: 14;
  padding: 2px 8px;
  background: var(--opf-ui-accent);
  border-radius: var(--opf-ui-radius-sm);
  color: var(--opf-ui-accent-fg);
  font: 500 11.5px var(--opf-ui-mono);
  white-space: nowrap;
  translate: -50% -50%;
  pointer-events: none;
}

.opf-lx-slot {
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--opf-ui-accent-strong);
  cursor: pointer;
  pointer-events: auto;
}
.opf-lx-slot::before { content: ""; position: absolute; background: var(--opf-ui-accent); opacity: 0.35; transition: opacity var(--opf-ui-ease); }
.opf-lx-slot[data-orientation="vertical"]::before { top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; }
.opf-lx-slot[data-orientation="horizontal"]::before { left: 0; right: 0; top: calc(50% - 1px); height: 2px; }
.opf-lx-slot .opf-lx-icon {
  position: relative;
  padding: 2px;
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-accent);
  border-radius: 999px;
  opacity: 0;
  transition: opacity var(--opf-ui-ease);
}
.opf-lx-slot:hover::before,
.opf-lx-slot:focus-visible::before { opacity: 1; }
.opf-lx-slot:hover .opf-lx-icon,
.opf-lx-slot:focus-visible .opf-lx-icon { opacity: 1; }
.opf-lx-slot:disabled { cursor: not-allowed; opacity: 0.4; }
.opf-lx-slot:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 2px; }

.opf-lx-cut { position: absolute; border: 0 dashed var(--opf-ui-accent); pointer-events: none; }
.opf-lx-cut[data-axis="row"] { border-left-width: 2px; }
.opf-lx-cut[data-axis="column"] { border-top-width: 2px; }
.opf-lx-drop { position: absolute; z-index: 13; background: var(--opf-ui-accent); border-radius: 2px; pointer-events: none; }
.opf-lx-drop[data-orientation="vertical"] { width: 3px !important; translate: -50% 0; }
.opf-lx-drop[data-orientation="horizontal"] { height: 3px !important; translate: 0 -50%; }
.opf-lx-drop[data-state="refused"] { background: var(--opf-ui-danger); }
.opf-lx-drop[data-state="same"] { background: var(--opf-ui-border-strong); }
.opf-lx-ghost {
  position: absolute;
  z-index: 40;
  max-width: 220px;
  padding: 3px 10px;
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-accent);
  border-radius: var(--opf-ui-radius);
  color: var(--opf-ui-accent-strong);
  font: 500 11.5px var(--opf-ui-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.opf-lx-rename {
  position: absolute;
  z-index: 16;
  height: 26px;
  padding: 0 6px;
  background: var(--opf-ui-surface);
  border: 2px solid var(--opf-ui-accent);
  border-radius: var(--opf-ui-radius-sm);
  color: var(--opf-ui-fg);
  font: 500 12px var(--opf-ui-mono);
}
.opf-lx-rename-row { position: static; flex: 1; min-width: 0; height: calc(var(--opf-lx-row) - 6px); }

.opf-lx-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 12px;
  background: var(--opf-ui-surface);
  border-bottom: 1px solid var(--opf-ui-danger);
  color: var(--opf-ui-danger);
  font-size: 12px;
}
.opf-lx-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  min-height: calc(var(--opf-lx-h) + 4px);
  padding: 2px 10px;
  background: var(--opf-ui-surface);
  border-top: 1px solid var(--opf-ui-border);
}
.opf-lx-status,
.opf-lx-alert { flex: 1; min-width: 0; margin: 0; font: 11.5px var(--opf-ui-mono); overflow: hidden; text-overflow: ellipsis; }
.opf-lx-status { color: var(--opf-ui-muted-fg); }
.opf-lx-status[data-live="true"] { color: var(--opf-ui-fg); }
.opf-lx-alert { color: var(--opf-ui-danger); }
.opf-lx-alert:not([hidden]) + .opf-lx-zoombar { margin-left: 0; }
.opf-lx-zoombar { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.opf-lx-zoom-label { min-width: 4ch; text-align: center; font: 11.5px var(--opf-ui-mono); color: var(--opf-ui-muted-fg); }
.opf-lx-zoom-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--opf-lx-h) - 4px);
  height: calc(var(--opf-lx-h) - 4px);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--opf-ui-radius);
  color: var(--opf-ui-muted-fg);
  cursor: pointer;
  transition: color var(--opf-ui-ease), background-color var(--opf-ui-ease);
}
.opf-lx-zoom-button:hover { color: var(--opf-ui-fg); background: var(--opf-ui-muted); }

/* Menus: the context menu and the heading tool's menu */
.opf-lx-menu {
  position: absolute;
  z-index: 60;
  min-width: 210px;
  padding: 4px;
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-lg);
  box-shadow: var(--opf-ui-shadow-pop);
}
.opf-lx-menuitem {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--opf-lx-h);
  padding: 0 10px;
  background: transparent;
  border: 0;
  border-radius: var(--opf-ui-radius-sm);
  color: var(--opf-ui-fg);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--opf-ui-ease), color var(--opf-ui-ease);
}
.opf-lx-menuitem:hover,
.opf-lx-menuitem:focus-visible { background: var(--opf-ui-muted); }
.opf-lx-menuitem:focus-visible { outline-offset: -2px; }
.opf-lx-menuitem[aria-disabled="true"] { color: var(--opf-ui-muted-fg); opacity: 0.55; cursor: default; }
.opf-lx-menu-label { flex: 1; }
.opf-lx-menu-hint { font: 11.5px var(--opf-ui-mono); color: var(--opf-ui-muted-fg); }
.opf-lx-menuitem[aria-checked="true"] .opf-lx-icon { color: var(--opf-ui-accent-strong); }

/* Panels (layers and inspector) */
.opf-lx-layers,
.opf-lx-inspector {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--opf-ui-surface);
}
.opf-lx-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: calc(var(--opf-lx-h) + 2px);
  padding: 0 12px;
  border-bottom: 1px solid var(--opf-ui-border);
  color: var(--opf-ui-muted-fg);
}
.opf-lx-panel-title { margin: 0; font: 500 10.5px var(--opf-ui-mono); letter-spacing: 0.08em; text-transform: uppercase; }

/* Layers */
.opf-lx-layers-scroll { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 4px 0; }
.opf-lx-tree,
.opf-lx-group { margin: 0; padding: 0; list-style: none; }
.opf-lx-item { outline: none; }
.opf-lx-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: var(--opf-lx-row);
  padding-inline-end: 8px;
  border-radius: var(--opf-ui-radius-sm);
  color: var(--opf-ui-fg);
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color var(--opf-ui-ease), color var(--opf-ui-ease);
}
.opf-lx-row:hover { background: var(--opf-ui-muted-2); }
.opf-lx-row[data-selected="true"] { background: color-mix(in srgb, var(--opf-ui-accent) 10%, transparent); color: var(--opf-ui-accent-strong); }
.opf-lx-item:focus-visible > .opf-lx-row { outline: 2px solid var(--opf-ui-ring); outline-offset: -2px; }
.opf-lx-item.is-dragging > .opf-lx-row { opacity: 0.45; }
.opf-lx-item[data-into="true"] > .opf-lx-row { outline: 2px solid var(--opf-ui-accent); outline-offset: -2px; }
.opf-lx-grip { display: inline-flex; width: 14px; flex: none; color: var(--opf-ui-muted-fg); opacity: 0; cursor: grab; touch-action: none; }
.opf-lx-row:hover .opf-lx-grip,
.opf-lx-item:focus-visible > .opf-lx-row .opf-lx-grip { opacity: 1; }
.opf-lx-layers[data-density="touch"] .opf-lx-grip { opacity: 1; width: 24px; justify-content: center; }
.opf-lx-caret { display: inline-flex; width: 14px; flex: none; color: var(--opf-ui-muted-fg); }
.opf-lx-row .opf-lx-icon { flex: none; color: var(--opf-ui-muted-fg); }
.opf-lx-row[data-selected="true"] .opf-lx-icon { color: var(--opf-ui-accent-strong); }
.opf-lx-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opf-lx-item[data-kind="region"] > .opf-lx-row > .opf-lx-row-name { font-family: var(--opf-ui-mono); font-size: 12px; }
.opf-lx-row-size { flex: none; font: 11.5px var(--opf-ui-mono); color: var(--opf-ui-muted-fg); }
.opf-lx-row-flag { display: inline-flex; flex: none; color: var(--opf-ui-danger); }
.opf-lx-row[data-finding="error"] .opf-lx-row-name { text-decoration: underline wavy var(--opf-ui-danger); text-underline-offset: 3px; }
.opf-lx-tree-drop { position: absolute; z-index: 5; border-top: 2px solid var(--opf-ui-accent); pointer-events: none; }
.opf-lx-tree-drop[data-mode="into"] { border: 2px solid var(--opf-ui-accent); border-radius: var(--opf-ui-radius-sm); }
.opf-lx-tree-drop[data-state="refused"] { border-color: var(--opf-ui-danger); }
.opf-lx-tree-drop[data-state="same"] { border-color: var(--opf-ui-border-strong); }

.opf-lx-findings { flex: none; max-height: 40%; overflow: auto; border-top: 1px solid var(--opf-ui-border); }
.opf-lx-findings-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 12px;
  font: 11.5px var(--opf-ui-mono);
  color: var(--opf-ui-success);
}
.opf-lx-findings-head[data-state="error"] { color: var(--opf-ui-danger); }
.opf-lx-findings-head[data-state="warning"] { color: var(--opf-ui-warn); }
.opf-lx-findings-list { margin: 0; padding: 0 4px 6px; list-style: none; }
.opf-lx-finding {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: var(--opf-lx-row);
  padding: 4px 8px;
  background: transparent;
  border: 0;
  border-radius: var(--opf-ui-radius-sm);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--opf-ui-ease);
}
.opf-lx-finding:hover { background: var(--opf-ui-muted-2); }
.opf-lx-finding-message { color: var(--opf-ui-fg); }
.opf-lx-finding-where { font: 11px var(--opf-ui-mono); color: var(--opf-ui-muted-fg); }

/* Inspector */
.opf-lx-inspector-body { flex: 1; min-height: 0; padding: 12px; overflow: auto; }
.opf-lx-section { display: flex; flex-direction: column; gap: 12px; }
.opf-lx-section + .opf-lx-section,
.opf-lx-section + .opf-lx-help,
.opf-lx-help + .opf-lx-section { margin-top: 14px; }
.opf-lx-section-title { margin: 0; font: 500 10.5px var(--opf-ui-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--opf-ui-muted-fg); }
.opf-lx-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.opf-lx-label-text { font-size: 12px; font-weight: 500; color: var(--opf-ui-fg); }
.opf-lx-help { margin: 0; font-size: 12px; line-height: 1.4; color: var(--opf-ui-muted-fg); }
.opf-lx-field-error { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12px; line-height: 1.4; color: var(--opf-ui-danger); }
.opf-lx-field-error .opf-lx-icon { flex: none; margin-top: 2px; }
.opf-lx-loose { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; }
.opf-lx-input,
.opf-lx-select {
  width: 100%;
  min-width: 0;
  height: var(--opf-lx-h);
  padding: 0 8px;
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border-strong);
  border-radius: var(--opf-ui-radius);
  color: var(--opf-ui-fg);
  font: inherit;
  transition: border-color var(--opf-ui-ease);
}
textarea.opf-lx-input { height: auto; min-height: calc(var(--opf-lx-h) * 1.8); padding: 6px 8px; resize: vertical; line-height: 1.4; }
.opf-lx-input:hover:not(:disabled),
.opf-lx-select:hover { border-color: var(--opf-ui-muted-fg); }
.opf-lx-input:disabled { background: var(--opf-ui-muted-2); color: var(--opf-ui-muted-fg); }
.opf-lx-input[readonly] { background: var(--opf-ui-muted-2); color: var(--opf-ui-muted-fg); }
.opf-lx-input[aria-invalid="true"] { border-color: var(--opf-ui-danger); }
input.opf-lx-input[data-field="id"],
input.opf-lx-input[data-field="name"],
input.opf-lx-input[data-field="size"],
input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-size: 12.5px; }
.opf-lx-size-row { display: flex; gap: 6px; }
.opf-lx-size-input { flex: 1; }
.opf-lx-field[data-invalid="true"] .opf-lx-input,
.opf-lx-field[data-invalid="true"] .opf-lx-select { border-color: var(--opf-ui-danger); }
.opf-lx-field-check { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.opf-lx-field-check .opf-lx-label-text { order: 2; }
.opf-lx-field-check .opf-lx-check { order: 1; }
.opf-lx-field-check .opf-lx-help,
.opf-lx-field-check .opf-lx-field-error { order: 3; flex-basis: 100%; }
.opf-lx-check { width: 16px; height: 16px; margin: 0; accent-color: var(--opf-ui-accent); }
.opf-lx-segmented { display: inline-flex; align-self: flex-start; border: 1px solid var(--opf-ui-border-strong); border-radius: var(--opf-ui-radius); overflow: hidden; }
.opf-lx-segment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: calc(var(--opf-lx-h) - 2px);
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--opf-ui-muted-fg);
  cursor: pointer;
  transition: color var(--opf-ui-ease), background-color var(--opf-ui-ease);
}
.opf-lx-segment + .opf-lx-segment { border-left: 1px solid var(--opf-ui-border-strong); }
.opf-lx-segment:hover:not(:disabled) { color: var(--opf-ui-fg); background: var(--opf-ui-muted); }
.opf-lx-segment[aria-pressed="true"] { color: var(--opf-ui-accent-strong); background: color-mix(in srgb, var(--opf-ui-accent) 10%, transparent); font-weight: 600; }
.opf-lx-segment:focus-visible { outline-offset: -2px; }
.opf-lx-segment:disabled { opacity: 0.45; cursor: default; }
.opf-lx-auto { border: 1px solid var(--opf-ui-border-strong); border-radius: var(--opf-ui-radius); }
.opf-lx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.opf-lx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--opf-lx-chip);
  padding: 0 10px;
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border-strong);
  border-radius: var(--opf-ui-radius);
  color: var(--opf-ui-muted-fg);
  font: 11.5px var(--opf-ui-mono);
  cursor: pointer;
  transition: color var(--opf-ui-ease), background-color var(--opf-ui-ease), border-color var(--opf-ui-ease);
}
.opf-lx-chip:hover:not(:disabled) { color: var(--opf-ui-fg); background: var(--opf-ui-muted); }
.opf-lx-chip[aria-pressed="true"] {
  color: var(--opf-ui-accent-strong);
  background: color-mix(in srgb, var(--opf-ui-accent) 10%, transparent);
  border-color: var(--opf-ui-accent);
}
.opf-lx-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.opf-lx-action {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  height: var(--opf-lx-h);
  padding: 0 10px;
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
  color: var(--opf-ui-fg);
  cursor: pointer;
  transition: color var(--opf-ui-ease), background-color var(--opf-ui-ease), border-color var(--opf-ui-ease);
}
.opf-lx-action:hover:not(:disabled) { background: var(--opf-ui-muted); border-color: var(--opf-ui-border-strong); }
.opf-lx-action:disabled { opacity: 0.45; cursor: default; }
.opf-lx-action .opf-lx-button-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opf-lx-hints { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.opf-lx-hint-row { display: flex; align-items: center; gap: 8px; min-height: var(--opf-lx-row); }
.opf-lx-hint-key { flex: none; margin: 0; font: 12px var(--opf-ui-mono); color: var(--opf-ui-accent-strong); }
.opf-lx-hint-value { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12px var(--opf-ui-mono); color: var(--opf-ui-warn); }
.opf-lx-hint-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--opf-lx-row);
  height: var(--opf-lx-row);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--opf-ui-radius-sm);
  color: var(--opf-ui-muted-fg);
  cursor: pointer;
}
.opf-lx-hint-remove:hover { color: var(--opf-ui-fg); background: var(--opf-ui-muted); }

/* Touch density: controls are 40px (the token), dividers and slots get a wider target. */
.opf-lx[data-density="touch"] { --opf-lx-slot: 32px; }
.opf-lx-canvas[data-density="touch"] { --opf-lx-slot: 32px; }
.opf-lx-canvas[data-density="touch"] .opf-lx-divider[data-orientation="vertical"]::before { inset: 0 -14px; }
.opf-lx-canvas[data-density="touch"] .opf-lx-divider[data-orientation="horizontal"]::before { inset: -14px 0; }
.opf-lx-canvas[data-density="touch"] .opf-lx-divider[data-fixed="false"]::after { background: color-mix(in srgb, var(--opf-ui-accent) 45%, transparent); }
.opf-lx-canvas[data-density="touch"] .opf-lx-label { --opf-lx-chip-h: 19px; font-size: 12px; line-height: 18px; }
.opf-lx[data-density="touch"] .opf-lx-actions { grid-template-columns: minmax(0, 1fr); }

@media (prefers-reduced-motion: reduce) {
  .opf-lx *,
  .opf-lx-palette *,
  .opf-lx-canvas *,
  .opf-lx-layers *,
  .opf-lx-inspector * { transition: none !important; animation: none !important; }
}

/* navigator.css */
/* Slide navigator (RR-98). Uses only --opf-ui-* tokens. */
.opf-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--opf-ui-muted-fg);
  font-family: var(--opf-ui-font);
}
.opf-nav-button {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--opf-ui-control-h);
  height: var(--opf-ui-control-h);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--opf-ui-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: color var(--opf-ui-ease), background-color var(--opf-ui-ease);
}
.opf-nav[data-density="touch"] .opf-nav-button {
  width: 40px;
  height: 40px;
}
.opf-nav-button:hover:not(:disabled) {
  background: var(--opf-ui-muted);
  color: var(--opf-ui-fg);
}
.opf-nav-button:disabled {
  opacity: 0.4;
  cursor: default;
}
.opf-nav-button:focus-visible {
  outline: 2px solid var(--opf-ui-ring);
  outline-offset: 2px;
}
.opf-nav-icon {
  width: 18px;
  height: 18px;
}
.opf-nav[data-density="touch"] .opf-nav-icon {
  width: 20px;
  height: 20px;
}
.opf-nav-counter {
  min-width: 64px;
  text-align: center;
  font: 500 12px/1 var(--opf-ui-mono);
  font-variant-numeric: tabular-nums;
  color: var(--opf-ui-fg);
}
@media (prefers-reduced-motion: reduce) {
  .opf-nav-button {
    transition: none;
  }
}

/* panels.css */
/*
 * The existing editor panels, styled to the design system with only the --opf-ui-* tokens (RR-98).
 *
 * Specificity: the find, review, crop and data-grid components still inject a small fallback stylesheet of their own, so a host that
 * never loads styles.css looks as it did before. Rules here for those four start with `:root`, which wins over the injected rules
 * whichever <style> comes last in the document. Dimensions and touch rules of those components are kept; this file changes color,
 * border, radius and type.
 *
 * Tints are color-mix() of an accent, warning or danger token at 6-16% over transparent, as the visual rules ask.
 */

/* ---------------------------------------------------------------- shared controls */

:where(
    .opf-design-controls,
    .opf-review,
    .opf-template-panel,
    .opf-numbering-panel,
    .opf-chart-options,
    .opf-sm-dialog,
    .opf-layout-dialog,
    .opf-grid-dialog
  ) {
  font-family: var(--opf-ui-font);
  color: var(--opf-ui-fg);
}

:where(
    .opf-design-controls,
    .opf-template-panel,
    .opf-numbering-panel,
    .opf-chart-options,
    .opf-sm-dialog,
    .opf-layout-dialog,
    .opf-grid-dialog
  )
  :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]), select, textarea) {
  min-height: var(--opf-ui-control-h);
  padding: 4px 8px;
  font: 13px/1.4 var(--opf-ui-font);
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
  transition:
    border-color var(--opf-ui-ease),
    color var(--opf-ui-ease);
}

:where(
    .opf-design-controls,
    .opf-template-panel,
    .opf-numbering-panel,
    .opf-chart-options,
    .opf-sm-dialog,
    .opf-layout-dialog,
    .opf-grid-dialog
  )
  :is(input, select, textarea):hover:not(:disabled) {
  border-color: var(--opf-ui-border-strong);
}

:where(
    .opf-design-controls,
    .opf-template-panel,
    .opf-numbering-panel,
    .opf-chart-options,
    .opf-sm-dialog,
    .opf-layout-dialog,
    .opf-grid-dialog
  )
  :is(input, select, textarea):focus-visible {
  border-color: var(--opf-ui-ring);
  outline: 2px solid var(--opf-ui-ring);
  outline-offset: 2px;
}

:where(
    .opf-design-controls,
    .opf-template-panel,
    .opf-numbering-panel,
    .opf-chart-options,
    .opf-sm-dialog,
    .opf-layout-dialog,
    .opf-grid-dialog
  )
  :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--opf-ui-accent);
}

:where(
    .opf-design-controls,
    .opf-template-panel,
    .opf-numbering-panel,
    .opf-chart-options,
    .opf-sm-dialog,
    .opf-layout-dialog,
    .opf-grid-dialog,
    .opf-review
  )
  button:not([class*="opf-"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--opf-ui-control-h);
  padding: 0 12px;
  font: 500 13px/1.2 var(--opf-ui-font);
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
  cursor: pointer;
  transition:
    background-color var(--opf-ui-ease),
    border-color var(--opf-ui-ease),
    color var(--opf-ui-ease);
}

:where(
    .opf-design-controls,
    .opf-template-panel,
    .opf-numbering-panel,
    .opf-chart-options,
    .opf-sm-dialog,
    .opf-layout-dialog,
    .opf-grid-dialog,
    .opf-review
  )
  button:not([class*="opf-"]):hover:not(:disabled) {
  background: var(--opf-ui-muted);
  border-color: var(--opf-ui-border-strong);
}

:where(
    .opf-design-controls,
    .opf-template-panel,
    .opf-numbering-panel,
    .opf-chart-options,
    .opf-sm-dialog,
    .opf-layout-dialog,
    .opf-grid-dialog,
    .opf-review
  )
  button:not([class*="opf-"]):disabled {
  opacity: 0.45;
  cursor: default;
}

:where(
    .opf-design-controls,
    .opf-template-panel,
    .opf-numbering-panel,
    .opf-chart-options,
    .opf-sm-dialog,
    .opf-layout-dialog,
    .opf-grid-dialog,
    .opf-review
  )
  button:not([class*="opf-"]).primary {
  color: var(--opf-ui-accent-fg);
  background: var(--opf-ui-accent);
  border-color: var(--opf-ui-accent);
}

:where(
    .opf-design-controls,
    .opf-template-panel,
    .opf-numbering-panel,
    .opf-chart-options,
    .opf-sm-dialog,
    .opf-layout-dialog,
    .opf-grid-dialog,
    .opf-review
  )
  button:not([class*="opf-"]).primary:hover:not(:disabled) {
  background: var(--opf-ui-accent);
  border-color: var(--opf-ui-accent);
  filter: brightness(1.08);
}

:where(
    .opf-design-controls,
    .opf-template-panel,
    .opf-numbering-panel,
    .opf-chart-options,
    .opf-sm-dialog,
    .opf-layout-dialog,
    .opf-grid-dialog,
    .opf-review
  )
  button:not([class*="opf-"]).quiet {
  color: var(--opf-ui-muted-fg);
  background: transparent;
  border-color: transparent;
}

:where(
    .opf-design-controls,
    .opf-template-panel,
    .opf-numbering-panel,
    .opf-chart-options,
    .opf-sm-dialog,
    .opf-layout-dialog,
    .opf-grid-dialog,
    .opf-review
  )
  button:not([class*="opf-"]).quiet:hover:not(:disabled) {
  color: var(--opf-ui-fg);
  background: var(--opf-ui-muted);
  border-color: transparent;
}

/* ---------------------------------------------------------------- design controls (opf-dc-*) */

.opf-design-controls {
  display: block;
  font-size: 13px;
}

.opf-dc-group {
  border-top: 1px solid var(--opf-ui-border);
  padding: 8px 0;
}

.opf-dc-group > summary {
  padding: 5px 0;
  font: 500 11px/1.4 var(--opf-ui-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--opf-ui-muted-fg);
  cursor: pointer;
  list-style-position: inside;
  transition: color var(--opf-ui-ease);
}

.opf-dc-group > summary:hover,
.opf-dc-group[open] > summary {
  color: var(--opf-ui-fg);
}

.opf-dc-body {
  padding: 6px 0 4px;
}

.opf-dc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 11px;
}

.opf-dc-field > label {
  display: block;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--opf-ui-fg);
}

.opf-dc-field input[type="text"],
.opf-dc-field input[type="number"],
.opf-dc-field input[type="url"] {
  width: 100%;
}

.opf-dc-field select[multiple] {
  padding: 2px;
}

.opf-dc-field input[type="file"] {
  width: 100%;
  min-height: 0;
  padding: 0;
  font-size: 11.5px;
  color: var(--opf-ui-muted-fg);
  background: transparent;
  border: 0;
}

.opf-dc-check {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.opf-dc-check > label {
  font-weight: 400;
}

.opf-dc-check .opf-dc-help {
  flex-basis: 100%;
}

.opf-dc-note {
  font-weight: 400;
  color: var(--opf-ui-muted-fg);
}

.opf-dc-help {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--opf-ui-muted-fg);
}

.opf-dc-fieldset {
  margin: 0 0 10px;
  padding: 6px 10px 2px;
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
}

.opf-dc-fieldset > legend {
  padding: 0 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--opf-ui-muted-fg);
}

.opf-dc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 11px;
}

.opf-dc-actions-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 11px;
}

.opf-dc-actions-block[hidden],
.opf-dc-action[hidden] {
  display: none;
}

.opf-dc-action {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.opf-dc-action > button {
  align-self: flex-start;
}

.opf-dc-action > button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.opf-dc-status {
  min-height: 1.2em;
  margin: 10px 0 0;
  font: 11.5px/1.4 var(--opf-ui-mono);
  color: var(--opf-ui-success);
}

.opf-dc-error {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--opf-ui-danger);
}

.opf-dc-error:empty,
.opf-dc-warnings:empty {
  display: none;
}

.opf-dc-warnings {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 11.5px;
  color: var(--opf-ui-warn);
}

.opf-dc-cell {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--opf-ui-border);
}

.opf-dc-cluster {
  margin: 0 0 8px;
}

.opf-dc-summary {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 11.5px;
  color: var(--opf-ui-muted-fg);
}

.opf-dc-stop {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--opf-ui-border);
}

.opf-dc-stop button {
  margin-bottom: 8px;
}

.opf-dc-variants {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0 0 8px;
}

.opf-dc-variant {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  min-height: 56px;
  padding: 6px;
  font: inherit;
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-md);
  cursor: pointer;
  transition:
    background-color var(--opf-ui-ease),
    border-color var(--opf-ui-ease);
}

.opf-dc-variant:hover:not(:disabled) {
  background: var(--opf-ui-muted);
  border-color: var(--opf-ui-border-strong);
}

.opf-dc-variant[aria-checked="true"] {
  color: var(--opf-ui-accent-strong);
  background: color-mix(in srgb, var(--opf-ui-accent) 10%, transparent);
  border-color: var(--opf-ui-accent);
  outline: 2px solid var(--opf-ui-accent);
  outline-offset: -1px;
}

.opf-dc-variant-text {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.opf-dc-variant-chips {
  display: flex;
  gap: 3px;
}

.opf-dc-variant-chip {
  width: 9px;
  height: 9px;
  border: 1px solid var(--opf-ui-border-strong);
  border-radius: 50%;
}

/* ---------------------------------------------------------------- review panel (opf-review-*) */

:root .opf-review {
  font-size: 12px;
  color: var(--opf-ui-fg);
}

:root .opf-review-head h2 {
  font-size: 13px;
  font-weight: 600;
}

:root .opf-review-counts,
:root .opf-review-meta,
:root .opf-review-help,
:root .opf-review-empty {
  font-family: var(--opf-ui-mono);
  font-size: 11.5px;
  color: var(--opf-ui-muted-fg);
}

:root .opf-review-category-title {
  font: 500 11px/1.4 var(--opf-ui-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--opf-ui-muted-fg);
}

:root .opf-review-item {
  border-top: 1px solid var(--opf-ui-border);
}

:root .opf-review-item[aria-current="true"] {
  background: color-mix(in srgb, var(--opf-ui-accent) 8%, transparent);
}

:root .opf-review-item[aria-current="true"] .opf-review-goto {
  color: var(--opf-ui-accent-strong);
}

:root .opf-review-goto {
  border-radius: var(--opf-ui-radius-sm);
  transition:
    background-color var(--opf-ui-ease),
    color var(--opf-ui-ease);
}

:root .opf-review-goto:hover {
  background: var(--opf-ui-muted);
}

:root .opf-review-goto:focus-visible,
:root .opf-review-fix:focus-visible,
:root .opf-review-alt input:focus-visible {
  outline: 2px solid var(--opf-ui-ring);
  outline-offset: 2px;
}

:root .opf-review-sev {
  font: 500 10.5px/16px var(--opf-ui-mono);
  letter-spacing: 0.04em;
  border-radius: var(--opf-ui-radius-sm);
  background: color-mix(in srgb, currentColor 8%, transparent);
}

:root .opf-review-item[data-severity="error"] .opf-review-sev {
  color: var(--opf-ui-danger);
}

:root .opf-review-item[data-severity="warning"] .opf-review-sev {
  color: var(--opf-ui-warn);
}

:root .opf-review-item[data-severity="info"] .opf-review-sev {
  color: var(--opf-ui-accent-strong);
}

:root .opf-review-fix {
  min-height: 0;
  padding: 3px 8px;
  font: 500 12px/1.3 var(--opf-ui-font);
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
}

:root .opf-review-fix:hover:not(:disabled) {
  background: var(--opf-ui-muted);
  border-color: var(--opf-ui-border-strong);
}

:root .opf-review-fix.quiet {
  color: var(--opf-ui-muted-fg);
  background: none;
  border-color: transparent;
}

:root .opf-review-fix.quiet:hover:not(:disabled) {
  color: var(--opf-ui-fg);
  background: none;
}

:root .opf-review-alt input {
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
}

:root .opf-review-error {
  color: var(--opf-ui-danger);
}

/* ---------------------------------------------------------------- slide manager (opf-slides, opf-sm-*, opf-menu) */

.opf-slides .slide-card {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  justify-content: start;
  gap: 8px;
  width: 100%;
  margin: 0 0 5px;
  padding: 8px 7px;
  font: inherit;
  text-align: left;
  white-space: normal;
  color: var(--opf-ui-muted-fg);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--opf-ui-radius-md);
  cursor: pointer;
  transition:
    background-color var(--opf-ui-ease),
    border-color var(--opf-ui-ease),
    color var(--opf-ui-ease);
}

.opf-slides .slide-card:hover {
  color: var(--opf-ui-fg);
  background: var(--opf-ui-muted);
}

.opf-slides .slide-card[data-selected="true"] {
  background: color-mix(in srgb, var(--opf-ui-accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--opf-ui-accent) 30%, transparent);
}

.opf-slides .slide-card[aria-current="true"] {
  color: var(--opf-ui-accent-strong);
  background: color-mix(in srgb, var(--opf-ui-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--opf-ui-accent) 40%, transparent);
}

.opf-slides .slide-card[aria-current="true"][data-selected="true"] {
  background: color-mix(in srgb, var(--opf-ui-accent) 14%, transparent);
}

.opf-slides .slide-card[data-hidden="true"] .thumbnail {
  opacity: 0.55;
}

.opf-slides .slide-card.is-drag-source {
  opacity: 0.45;
}

.opf-slides .slide-card:focus-visible,
.section-toggle:focus-visible,
.section-more:focus-visible,
.slide-tool:focus-visible,
.outline-input:focus-visible {
  outline: 2px solid var(--opf-ui-ring);
  outline-offset: 2px;
}

.opf-slides .thumbnail-number {
  padding-top: 3px;
  font: 10.5px/1.4 var(--opf-ui-mono);
  font-variant-numeric: tabular-nums;
}

.opf-slides .thumbnail-content {
  min-width: 0;
}

.opf-slides .thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-sm);
  pointer-events: none;
}

.opf-slides .thumbnail svg {
  display: block;
  width: 100%;
  height: auto;
}

.opf-slides .slide-card[aria-current="true"] .thumbnail {
  border-color: var(--opf-ui-accent);
  box-shadow: 0 0 0 1px var(--opf-ui-accent);
}

.opf-slides .thumbnail-title {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slide-badge {
  display: inline-block;
  margin-top: 5px;
  padding: 0 6px;
  font: 500 10px/16px var(--opf-ui-mono);
  letter-spacing: 0.02em;
  color: var(--opf-ui-muted-fg);
  background: var(--opf-ui-muted);
  border-radius: var(--opf-ui-radius-sm);
}

.slide-toolbar {
  display: flex;
  gap: 2px;
  margin: 0 11px 6px;
  padding: 0 0 0 2px;
}

.slide-toolbar:empty {
  display: none;
}

.slide-tool,
.section-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--opf-ui-muted-fg);
  background: transparent;
  border: 0;
  border-radius: var(--opf-ui-radius);
  cursor: pointer;
  transition:
    background-color var(--opf-ui-ease),
    color var(--opf-ui-ease);
}

.slide-tool {
  width: 30px;
  height: 28px;
}

.section-more {
  width: 24px;
  height: 24px;
}

.slide-tool:hover:not(:disabled),
.section-more:hover {
  color: var(--opf-ui-fg);
  background: var(--opf-ui-muted);
}

.slide-tool:disabled {
  opacity: 0.4;
  cursor: default;
}

.slide-tool .icon,
.section-more .icon {
  width: 16px;
  height: 16px;
}

.slide-section {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 8px 0 4px;
  padding: 0 2px;
}

.slide-section:first-child {
  margin-top: 0;
}

.section-toggle {
  display: inline-flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
  gap: 6px;
  padding: 3px 4px;
  font: 500 11px/1.4 var(--opf-ui-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--opf-ui-muted-fg);
  background: transparent;
  border: 0;
  border-radius: var(--opf-ui-radius);
  cursor: pointer;
  transition:
    background-color var(--opf-ui-ease),
    color var(--opf-ui-ease);
}

.section-toggle:hover {
  color: var(--opf-ui-fg);
  background: var(--opf-ui-muted);
}

.section-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slide-section[data-unnamed="true"] .section-name {
  font-style: italic;
}

.section-count,
.section-caret {
  color: var(--opf-ui-muted-fg);
}

.section-caret {
  width: 10px;
}

.slide-section.drop-into {
  background: color-mix(in srgb, var(--opf-ui-accent) 12%, transparent);
  outline: 2px dashed var(--opf-ui-accent);
  outline-offset: -2px;
  border-radius: var(--opf-ui-radius);
}

.opf-slides .slide-card.drop-before::before,
.opf-slides .slide-card.drop-after::after {
  content: "";
  position: absolute;
  background: var(--opf-ui-accent);
  border-radius: 2px;
  pointer-events: none;
}

.opf-slides[data-variant="navigator"] .slide-card.drop-before::before {
  left: 4px;
  right: 4px;
  top: -4px;
  height: 3px;
}

.opf-slides[data-variant="navigator"] .slide-card.drop-after::after {
  left: 4px;
  right: 4px;
  bottom: -4px;
  height: 3px;
}

.opf-slides[data-variant="sorter"] .slide-card.drop-before::before {
  top: 4px;
  bottom: 4px;
  left: -7px;
  width: 3px;
}

.opf-slides[data-variant="sorter"] .slide-card.drop-after::after {
  top: 4px;
  bottom: 4px;
  right: -7px;
  width: 3px;
}

.opf-drag-badge {
  position: fixed;
  top: -100px;
  left: -100px;
  padding: 4px 10px;
  font: 500 12px var(--opf-ui-font);
  color: var(--opf-ui-accent-fg);
  background: var(--opf-ui-accent);
  border-radius: var(--opf-ui-radius-lg);
}

/* The sorter: the same cards in a grid. */

.slide-sorter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px 16px;
  align-content: start;
}

.slide-sorter .slide-section {
  grid-column: 1 / -1;
  margin: 6px 0 -4px;
}

.slide-sorter .slide-card {
  display: block;
  margin: 0;
  padding: 8px;
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-md);
}

.slide-sorter .slide-card:hover {
  background: var(--opf-ui-muted-2);
}

.slide-sorter .slide-card[data-selected="true"] {
  background: color-mix(in srgb, var(--opf-ui-accent) 8%, var(--opf-ui-surface));
  border-color: var(--opf-ui-accent);
}

.slide-sorter .thumbnail-number {
  position: absolute;
  left: 12px;
  bottom: 11px;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--opf-ui-muted-fg);
}

.slide-sorter .thumbnail-title {
  margin-top: 8px;
  padding-left: 24px;
  font-size: 12px;
}

.slide-sorter .slide-badge {
  position: absolute;
  top: 10px;
  right: 12px;
}

/* The outline view. */

.opf-outline {
  max-width: 860px;
  margin: 0 auto;
  font-family: var(--opf-ui-font);
  color: var(--opf-ui-fg);
}

.outline-toolbar {
  position: sticky;
  top: -20px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
  padding: 8px 0;
  background: var(--opf-ui-bg);
}

.outline-toolbar button {
  display: inline-flex;
  align-items: center;
  min-height: var(--opf-ui-control-h);
  padding: 0 12px;
  font: 500 13px/1.2 var(--opf-ui-font);
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
  cursor: pointer;
  transition:
    background-color var(--opf-ui-ease),
    border-color var(--opf-ui-ease);
}

.outline-toolbar button:hover:not(:disabled) {
  background: var(--opf-ui-muted);
  border-color: var(--opf-ui-border-strong);
}

.outline-toolbar button:disabled {
  opacity: 0.45;
  cursor: default;
}

.outline-help {
  margin: 0 0 14px;
  font-size: 11.5px;
  color: var(--opf-ui-muted-fg);
}

.outline-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.outline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 0 1px calc(var(--level, 0) * 26px);
}

.outline-row[data-kind="slide"] {
  margin-top: 14px;
}

.outline-row[data-kind="slide"]:first-child {
  margin-top: 0;
}

.outline-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  height: 26px;
  font: 500 11px/1 var(--opf-ui-mono);
  color: var(--opf-ui-accent-strong);
  background: color-mix(in srgb, var(--opf-ui-accent) 10%, transparent);
  border-radius: var(--opf-ui-radius-sm);
}

.outline-bullet {
  flex: 0 0 12px;
  text-align: center;
  color: var(--opf-ui-muted-fg);
}

.outline-input {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  font: 13px/1.4 var(--opf-ui-font);
  color: var(--opf-ui-fg);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--opf-ui-radius);
  transition:
    background-color var(--opf-ui-ease),
    border-color var(--opf-ui-ease);
}

.outline-row[data-kind="slide"] .outline-input {
  font-size: 15px;
  font-weight: 600;
}

.outline-row[data-kind="other"] .outline-input,
.outline-input[readonly] {
  font-style: italic;
  color: var(--opf-ui-muted-fg);
}

.outline-input:hover {
  background: var(--opf-ui-surface);
  border-color: var(--opf-ui-border);
}

.outline-input:focus {
  background: var(--opf-ui-surface);
  border-color: var(--opf-ui-ring);
}

.outline-section {
  margin: 18px 0 4px;
  padding: 3px 6px;
  font: 500 11px/1.4 var(--opf-ui-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--opf-ui-muted-fg);
  border-bottom: 1px solid var(--opf-ui-border);
}

/* The slide actions menu. */

.opf-menu {
  position: fixed;
  z-index: 1000;
  min-width: 220px;
  max-width: min(320px, 92vw);
  max-height: 80dvh;
  padding: 4px;
  overflow: auto;
  font-family: var(--opf-ui-font);
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-md);
  box-shadow: var(--opf-ui-shadow-pop);
}

.opf-menu-item {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 6px 10px;
  font: 13px/1.4 var(--opf-ui-font);
  text-align: left;
  color: var(--opf-ui-fg);
  background: transparent;
  border: 0;
  border-radius: var(--opf-ui-radius-sm);
  cursor: pointer;
  transition: background-color var(--opf-ui-ease);
}

.opf-menu-item kbd {
  font: 11px var(--opf-ui-mono);
  color: var(--opf-ui-muted-fg);
}

.opf-menu-item:hover:not(:disabled),
.opf-menu-item:focus-visible {
  background: var(--opf-ui-muted);
  outline: none;
}

.opf-menu-item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--opf-ui-ring);
}

.opf-menu-item:disabled {
  opacity: 0.45;
  cursor: default;
}

.opf-menu-separator {
  height: 1px;
  margin: 4px 2px;
  background: var(--opf-ui-border);
}

/* The slide manager dialogs (name, move, layout). */

.opf-sm-dialog,
.opf-layout-dialog,
.opf-grid-dialog {
  padding: 0;
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-lg);
  box-shadow: var(--opf-ui-shadow-pop);
}

.opf-sm-dialog::backdrop,
.opf-layout-dialog::backdrop,
.opf-grid-dialog::backdrop {
  background: color-mix(in srgb, var(--opf-ui-bg) 70%, transparent);
}

.opf-sm-dialog {
  width: min(440px, 92vw);
}

.opf-layout-dialog {
  width: min(760px, 94vw);
}

.opf-grid-dialog {
  width: min(850px, 95vw);
  max-height: 90vh;
}

.opf-sm-dialog form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
}

.opf-sm-dialog h2,
.opf-grid-dialog h2 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--opf-ui-fg);
}

.opf-sm-dialog input,
.opf-sm-dialog select {
  width: 100%;
}

.opf-sm-dialog .field-help {
  margin: 0;
  font-size: 11.5px;
  color: var(--opf-ui-muted-fg);
}

.opf-sm-dialog select[size] {
  min-height: 190px;
}

.opf-sm-error {
  min-height: 1em;
  margin: 0;
  font-size: 11.5px;
  color: var(--opf-ui-danger);
}

.opf-sm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.opf-layout-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-height: 150px;
}

.opf-layout-preview-item {
  min-width: 0;
  padding: 8px;
  background: var(--opf-ui-muted-2);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
}

.opf-layout-preview-item strong {
  display: block;
  margin-bottom: 5px;
  font: 500 11px/1.4 var(--opf-ui-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--opf-ui-muted-fg);
}

.opf-layout-preview svg,
.opf-layout-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
}

.opf-layout-diagram,
.opf-layout-split {
  display: flex;
  gap: 3px;
  min-width: 0;
  min-height: 0;
}

.opf-layout-diagram {
  aspect-ratio: 16 / 9;
}

.opf-layout-diagram span {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 2px 4px;
  overflow: hidden;
  font: 11px var(--opf-ui-mono);
  color: var(--opf-ui-accent-strong);
  background: color-mix(in srgb, var(--opf-ui-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--opf-ui-accent) 40%, transparent);
  border-radius: var(--opf-ui-radius-sm);
}

/* ---------------------------------------------------------------- custom layout editor (opf-grid-dialog) */

.opf-grid-body {
  display: grid;
  gap: 8px;
  overflow: auto;
}

.opf-grid-field {
  display: grid;
  gap: 4px;
  font-size: 12px;
}

.opf-grid-dimensions {
  display: grid;
  grid-template-columns: minmax(0, 220px);
  gap: 10px;
}

.opf-grid-structure {
  padding: 8px;
  background: var(--opf-ui-muted);
  border-radius: var(--opf-ui-radius);
}

.opf-grid-structure .opf-layout-diagram {
  max-width: 360px;
  margin: 0 auto;
}

.opf-grid-regions {
  display: grid;
  gap: 8px;
}

.opf-grid-list-wrap {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.opf-grid-list {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.opf-grid-region,
.opf-grid-split {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
}

.opf-grid-split {
  border-style: dashed;
  border-color: var(--opf-ui-border-strong);
}

.opf-grid-controls,
.opf-grid-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.opf-grid-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.opf-grid-kinds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  font-size: 11.5px;
}

.opf-grid-kinds label {
  display: flex;
  align-items: center;
  gap: 3px;
}

.opf-grid-kinds input {
  width: auto;
}

.opf-region-drop[data-drop-active="true"] {
  background: color-mix(in srgb, var(--opf-ui-accent) 16%, transparent) !important;
  border-color: var(--opf-ui-accent) !important;
}

/* ---------------------------------------------------------------- find (opf-find-*) */

:root .opf-find {
  min-height: 0;
  font-family: var(--opf-ui-font);
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-lg);
  box-shadow: var(--opf-ui-shadow-pop);
}

:root .opf-find-field > span,
:root .opf-find-where,
:root .opf-find-more,
:root .opf-find-count {
  font-family: var(--opf-ui-mono);
  font-size: 11.5px;
  color: var(--opf-ui-muted-fg);
}

:root .opf-find input[type="text"] {
  min-height: var(--opf-ui-control-h);
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
  transition: border-color var(--opf-ui-ease);
}

:root .opf-find input[type="text"]:hover {
  border-color: var(--opf-ui-border-strong);
}

:root .opf-find input[type="text"][aria-invalid="true"] {
  border-color: var(--opf-ui-danger);
}

:root .opf-find button {
  min-height: var(--opf-ui-control-h);
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
  transition:
    background-color var(--opf-ui-ease),
    border-color var(--opf-ui-ease),
    color var(--opf-ui-ease);
}

:root .opf-find button:hover:not(:disabled) {
  background: var(--opf-ui-muted);
  border-color: var(--opf-ui-border-strong);
}

:root .opf-find button.opf-find-primary {
  color: var(--opf-ui-accent-fg);
  background: var(--opf-ui-accent);
  border-color: var(--opf-ui-accent);
}

:root .opf-find button.opf-find-primary:hover:not(:disabled) {
  background: var(--opf-ui-accent);
  border-color: var(--opf-ui-accent);
  filter: brightness(1.08);
}

:root .opf-find button.opf-find-close {
  color: var(--opf-ui-muted-fg);
  background: transparent;
  border-color: transparent;
}

:root .opf-find button.opf-find-close:hover:not(:disabled) {
  color: var(--opf-ui-fg);
  background: var(--opf-ui-muted);
}

:root .opf-find button:focus-visible,
:root .opf-find input:focus-visible,
:root .opf-find-result:focus-visible {
  outline: 2px solid var(--opf-ui-ring);
  outline-offset: 2px;
}

:root .opf-find-opt {
  color: var(--opf-ui-fg);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
  transition:
    background-color var(--opf-ui-ease),
    border-color var(--opf-ui-ease);
}

:root .opf-find-opt:has(input:checked) {
  color: var(--opf-ui-accent-strong);
  background: color-mix(in srgb, var(--opf-ui-accent) 10%, transparent);
  border-color: var(--opf-ui-accent);
}

:root .opf-find-opt input {
  accent-color: var(--opf-ui-accent);
}

:root .opf-find-error {
  font-size: 11.5px;
  color: var(--opf-ui-danger);
}

:root .opf-find-results {
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
}

:root .opf-find-results li {
  border-top: 1px solid var(--opf-ui-border);
}

:root .opf-find-results li:first-child {
  border-top: 0;
}

:root .opf-find button.opf-find-result {
  color: var(--opf-ui-fg);
  background: transparent;
  border: 0;
  border-radius: 0;
}

:root .opf-find button.opf-find-result:hover:not(:disabled) {
  background: var(--opf-ui-muted);
}

:root .opf-find button.opf-find-result[aria-current="true"] {
  background: color-mix(in srgb, var(--opf-ui-accent) 10%, transparent);
}

:root .opf-find-text mark {
  color: inherit;
  background: color-mix(in srgb, var(--opf-ui-warn) 30%, transparent);
  border-radius: var(--opf-ui-radius-sm);
}

@media (pointer: coarse) {
  :root .opf-find input[type="text"] {
    font-size: 16px;
  }

  :root .opf-find button,
  :root .opf-find-opt {
    min-height: 44px;
  }

  :root .opf-find button.opf-find-close {
    min-width: 44px;
  }
}

/* ---------------------------------------------------------------- template panel (opf-template-*) */

.opf-template-panel {
  font-size: 13px;
}

.opf-template-summary {
  margin-bottom: 10px;
  font-size: 11.5px;
  color: var(--opf-ui-muted-fg);
}

.opf-template-mode {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-weight: 400;
}

.opf-template-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px 22px;
}

.opf-template-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-md);
}

.opf-template-field label {
  display: block;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--opf-ui-fg);
}

.opf-template-field :is(input[type="text"], input[type="url"], input[type="date"], textarea) {
  width: 100%;
  font-size: 13px;
}

.opf-template-field textarea {
  min-height: 84px;
  resize: vertical;
}

.opf-template-kind,
.opf-template-help {
  font: 400 11px/1.5 var(--opf-ui-mono);
  color: var(--opf-ui-muted-fg);
}

.opf-template-status {
  font: 11px/1.4 var(--opf-ui-mono);
  color: var(--opf-ui-muted-fg);
}

.opf-required {
  color: var(--opf-ui-danger);
}

.opf-template-field[data-status="unfilled"] {
  background: color-mix(in srgb, var(--opf-ui-warn) 6%, var(--opf-ui-surface));
  border-color: color-mix(in srgb, var(--opf-ui-warn) 45%, var(--opf-ui-border));
}

.opf-template-field[data-status="unfilled"] .opf-template-status {
  color: var(--opf-ui-warn);
}

.opf-template-field[data-status="filled"] {
  border-color: color-mix(in srgb, var(--opf-ui-success) 45%, var(--opf-ui-border));
}

.opf-template-field[data-status="filled"] .opf-template-status {
  color: var(--opf-ui-success);
}

.opf-template-error {
  font-size: 11.5px;
  color: var(--opf-ui-danger);
}

.opf-template-error[hidden] {
  display: none;
}

.opf-template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 8px;
}

.opf-template-live {
  min-height: 1.5em;
  font-size: 11.5px;
  color: var(--opf-ui-muted-fg);
}

.opf-template-live[data-error="true"] {
  color: var(--opf-ui-danger);
}

.opf-template-preview-section,
.opf-template-insert-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--opf-ui-border);
}

.opf-template-preview-section select {
  max-width: 420px;
}

.opf-template-insert-section summary {
  font: 500 11px/1.4 var(--opf-ui-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--opf-ui-muted-fg);
  cursor: pointer;
}

.opf-template-new-variable {
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
}

.opf-template-preview {
  padding: 16px;
  background: var(--opf-ui-muted-2);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-md);
}

.opf-template-preview svg {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: auto;
  border: 1px solid var(--opf-ui-border);
}

.opf-template-preview-status {
  margin-bottom: 8px;
  font-size: 11.5px;
  color: var(--opf-ui-muted-fg);
}

.opf-template-empty {
  font-size: 12px;
  color: var(--opf-ui-muted-fg);
}

/* ---------------------------------------------------------------- numbering panel (opf-numbering-*) */

.opf-numbering-panel {
  font-size: 13px;
}

.opf-numbering-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 12px;
}

.opf-numbering-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.opf-numbering-toggle label {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--opf-ui-fg);
}

.opf-numbering-levels {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 12px;
}

.opf-numbering-level {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 5px 10px;
  padding: 9px 12px;
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-md);
}

.opf-numbering-level label {
  margin: 0;
  font-size: 12px;
  color: var(--opf-ui-muted-fg);
}

.opf-numbering-level-name {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 600;
  color: var(--opf-ui-fg);
}

.opf-numbering-level :is(select, input) {
  width: 100%;
}

.opf-numbering-preview {
  min-height: 1.5em;
  margin: 4px 0 12px;
  padding: 8px 12px;
  font: 14px/1.5 var(--opf-ui-mono);
  letter-spacing: 0.02em;
  color: var(--opf-ui-fg);
  background: var(--opf-ui-code-bg);
  border: 1px solid var(--opf-ui-code-border);
  border-radius: var(--opf-ui-radius-md);
}

.opf-numbering-note,
.opf-numbering-help,
.opf-numbering-empty {
  font-size: 11.5px;
  color: var(--opf-ui-muted-fg);
}

.opf-numbering-entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--opf-ui-border);
}

.opf-numbering-entry input {
  max-width: 140px;
}

.opf-numbering-live {
  min-height: 1.4em;
  margin: 10px 0 0;
  font: 11.5px/1.4 var(--opf-ui-mono);
  color: var(--opf-ui-success);
}

.opf-numbering-live[data-error="true"] {
  color: var(--opf-ui-danger);
}

/* ---------------------------------------------------------------- chart options (opf-chart-*, opf-co-*) */

.opf-chart-options {
  margin: 8px 0;
  padding: 8px 0;
  border-top: 1px solid var(--opf-ui-border);
}

.opf-chart-options[hidden] {
  display: none;
}

.opf-co-title {
  margin: 0 0 8px;
  font: 500 11px/1.4 var(--opf-ui-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--opf-ui-muted-fg);
}

.opf-co-group {
  margin: 0 0 8px;
}

.opf-co-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--opf-ui-fg);
}

.opf-co-row :is(input[type="text"], select) {
  width: 100%;
}

.opf-co-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--opf-ui-fg);
}

.opf-co-content,
.opf-co-highlight,
.opf-co-colors {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
}

.opf-co-content {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.opf-co-colors {
  margin-bottom: 8px;
}

.opf-co-content legend,
.opf-co-highlight legend,
.opf-co-colors legend {
  margin: 0 0 3px;
  padding: 0;
  font-size: 12px;
  color: var(--opf-ui-fg);
}

.opf-co-choices {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 120px;
  overflow: auto;
}

.opf-co-color-row {
  gap: 4px;
}

.opf-co-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.opf-co-swatch {
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0 4px;
  font: 11px var(--opf-ui-mono);
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border-strong);
  border-radius: var(--opf-ui-radius-sm);
  cursor: pointer;
}

.opf-co-swatch:hover:not(:disabled) {
  background: var(--opf-ui-muted);
}

.opf-co-swatch[aria-pressed="true"] {
  color: var(--opf-ui-accent-strong);
  outline: 2px solid var(--opf-ui-ring);
  outline-offset: 1px;
}

.opf-co-hex {
  width: 100%;
}

/* ---------------------------------------------------------------- data grid (opf-grid-*) */

:root .opf-grid {
  --g-border: var(--opf-ui-border);
  --g-ruler: var(--opf-ui-muted-2);
  --g-text: var(--opf-ui-fg);
  --g-muted: var(--opf-ui-muted-fg);
  --g-select: var(--opf-ui-muted);
  --g-focus: var(--opf-ui-ring);
  --g-error: var(--opf-ui-danger);
  --g-warn: var(--opf-ui-warn);
  --g-gap: var(--opf-ui-muted-fg);
  font-family: var(--opf-ui-font);
}

:root .opf-grid-path,
:root .opf-grid-help,
:root .opf-grid td.opf-grid-gap::before {
  font-family: var(--opf-ui-mono);
}

:root .opf-grid-toolbar button,
:root .opf-grid-toolbar select,
:root .opf-grid-dataset button,
:root .opf-grid-format button,
:root .opf-grid-format input,
:root .opf-grid-mapping select {
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border-radius: var(--opf-ui-radius);
  transition:
    background-color var(--opf-ui-ease),
    border-color var(--opf-ui-ease);
}

:root .opf-grid-toolbar button:hover,
:root .opf-grid-dataset button:hover,
:root .opf-grid-format button:hover {
  background: var(--opf-ui-muted);
  border-color: var(--opf-ui-border-strong);
}

:root .opf-grid-toolbar [aria-disabled="true"]:hover {
  background: var(--opf-ui-surface);
  border-color: var(--g-border);
}

:root .opf-grid-scroll {
  background: var(--opf-ui-surface);
  border-radius: var(--opf-ui-radius);
}

:root .opf-grid td {
  background: var(--opf-ui-surface);
}

:root .opf-grid td textarea {
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
}

:root .opf-grid td.opf-grid-header {
  background: var(--opf-ui-muted-2);
}

:root .opf-grid td[aria-selected="true"] {
  background: var(--opf-ui-muted);
}

:root .opf-grid td.opf-grid-merged {
  background-image: linear-gradient(135deg, transparent 92%, var(--opf-ui-border-strong) 92%);
}

:root .opf-grid-status {
  font-family: var(--opf-ui-mono);
  color: var(--opf-ui-success);
}

:root .opf-grid details textarea {
  color: var(--opf-ui-fg);
  background: var(--opf-ui-code-bg);
  border: 1px solid var(--opf-ui-code-border);
  border-radius: var(--opf-ui-radius);
  font-family: var(--opf-ui-mono);
}

/* ---------------------------------------------------------------- image crop (opf-crop-*) */

:root .opf-crop-pill {
  color: var(--opf-ui-accent-fg);
  background: var(--opf-ui-accent);
  border: 1px solid var(--opf-ui-surface);
  font-family: var(--opf-ui-font);
  box-shadow: var(--opf-ui-shadow-pop);
}

:root .opf-crop-pill:focus-visible,
:root .opf-crop-rect:focus-visible,
:root .opf-crop button:focus-visible,
:root .opf-crop select:focus-visible,
:root .opf-crop input:focus-visible {
  outline: 2px solid var(--opf-ui-ring);
  outline-offset: 2px;
}

:root .opf-crop {
  color: var(--opf-ui-fg);
  background: color-mix(in srgb, var(--opf-ui-bg) 94%, transparent);
  font-family: var(--opf-ui-font);
}

:root .opf-crop-rect {
  outline: 2px solid var(--opf-ui-surface);
  box-shadow: 0 0 0 9999px color-mix(in srgb, var(--opf-ui-bg) 62%, transparent);
}

:root .opf-crop-handle {
  background: var(--opf-ui-surface);
  border: 2px solid var(--opf-ui-accent);
  border-radius: var(--opf-ui-radius-sm);
}

:root .opf-crop-focus {
  border-color: var(--opf-ui-warn);
  box-shadow: 0 0 0 2px var(--opf-ui-surface);
}

:root .opf-crop-focus::before,
:root .opf-crop-focus::after {
  background: var(--opf-ui-warn);
}

:root .opf-crop-bar {
  background: var(--opf-ui-surface);
  border-top: 1px solid var(--opf-ui-border);
}

:root .opf-crop select,
:root .opf-crop input[type="number"] {
  min-height: var(--opf-ui-control-h);
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
}

:root .opf-crop input[type="range"] {
  accent-color: var(--opf-ui-accent);
}

:root .opf-crop button {
  min-height: var(--opf-ui-control-h);
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
  font-weight: 500;
  transition:
    background-color var(--opf-ui-ease),
    border-color var(--opf-ui-ease),
    color var(--opf-ui-ease);
}

:root .opf-crop button:hover:not(:disabled) {
  background: var(--opf-ui-muted);
  border-color: var(--opf-ui-border-strong);
}

:root .opf-crop button[aria-pressed="true"] {
  color: var(--opf-ui-accent-strong);
  background: color-mix(in srgb, var(--opf-ui-accent) 12%, var(--opf-ui-surface));
  border-color: var(--opf-ui-accent);
}

:root .opf-crop button.opf-crop-apply {
  color: var(--opf-ui-accent-fg);
  background: var(--opf-ui-accent);
  border-color: var(--opf-ui-accent);
}

:root .opf-crop-readout {
  font-family: var(--opf-ui-mono);
  font-size: 11.5px;
  color: var(--opf-ui-muted-fg);
}

:root .opf-crop-error {
  color: var(--opf-ui-danger);
}

@media (pointer: coarse) {
  :root .opf-crop button,
  :root .opf-crop select,
  :root .opf-crop input[type="number"] {
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------- JSON editor (CodeMirror, opf-json / opf-code) */
/* The editor ships no CSS of its own. Put it in an `.opf-ui`, `.opf-json` or `.opf-code` element (or the component that holds it) to get this look. */

:is(.opf-ui, .opf-json, .opf-code) .cm-editor {
  font: 12.5px/1.65 var(--opf-ui-mono);
  color: var(--opf-ui-fg);
  background: var(--opf-ui-code-bg);
  border: 1px solid var(--opf-ui-code-border);
  border-radius: var(--opf-ui-radius-md);
}

:is(.opf-ui, .opf-json, .opf-code) .cm-editor.cm-focused {
  outline: 2px solid var(--opf-ui-ring);
  outline-offset: 2px;
}

:is(.opf-ui, .opf-json, .opf-code) .cm-scroller,
:is(.opf-ui, .opf-json, .opf-code) .cm-content {
  font-family: var(--opf-ui-mono);
}

:is(.opf-ui, .opf-json, .opf-code) .cm-content {
  caret-color: var(--opf-ui-fg);
}

:is(.opf-ui, .opf-json, .opf-code) .cm-cursor,
:is(.opf-ui, .opf-json, .opf-code) .cm-dropCursor {
  border-left-color: var(--opf-ui-fg);
}

:is(.opf-ui, .opf-json, .opf-code) .cm-gutters {
  color: var(--opf-ui-muted-fg);
  background: var(--opf-ui-code-bg);
  border-right: 1px solid var(--opf-ui-code-border);
}

/* A wrapped line continues under its own indentation (src/source-wrap.js, VS Code's wrappingIndent "indent"): `opf-hang-<n>` says how many
   columns, the first line keeps its place (a negative text-indent of the same width) and every continuation line starts n columns in.
   The hang is capped at 40% of the line so a deeply nested line still leaves room for text at 320px; the cap is applied to n in source-wrap.js,
   from the measured width, because a percentage here makes style and layout of every line very slow (replacing the text of an 848-line
   document took 8.5 s instead of 0.56 s). Text inside an inline widget does not inherit the negative indent. `--opf-line-start` is the line's own
   left padding (the source pane sets it to 2px). */
.cm-line.opf-hang-0 { --opf-hang: 0; }
.cm-line.opf-hang-1 { --opf-hang: 1; }
.cm-line.opf-hang-2 { --opf-hang: 2; }
.cm-line.opf-hang-3 { --opf-hang: 3; }
.cm-line.opf-hang-4 { --opf-hang: 4; }
.cm-line.opf-hang-5 { --opf-hang: 5; }
.cm-line.opf-hang-6 { --opf-hang: 6; }
.cm-line.opf-hang-7 { --opf-hang: 7; }
.cm-line.opf-hang-8 { --opf-hang: 8; }
.cm-line.opf-hang-9 { --opf-hang: 9; }
.cm-line.opf-hang-10 { --opf-hang: 10; }
.cm-line.opf-hang-11 { --opf-hang: 11; }
.cm-line.opf-hang-12 { --opf-hang: 12; }
.cm-line.opf-hang-13 { --opf-hang: 13; }
.cm-line.opf-hang-14 { --opf-hang: 14; }
.cm-line.opf-hang-15 { --opf-hang: 15; }
.cm-line.opf-hang-16 { --opf-hang: 16; }
.cm-line.opf-hang-17 { --opf-hang: 17; }
.cm-line.opf-hang-18 { --opf-hang: 18; }
.cm-line.opf-hang-19 { --opf-hang: 19; }
.cm-line.opf-hang-20 { --opf-hang: 20; }
.cm-line.opf-hang-21 { --opf-hang: 21; }
.cm-line.opf-hang-22 { --opf-hang: 22; }
.cm-line.opf-hang-23 { --opf-hang: 23; }
.cm-line.opf-hang-24 { --opf-hang: 24; }
.cm-line.opf-hang-25 { --opf-hang: 25; }
.cm-line.opf-hang-26 { --opf-hang: 26; }
.cm-line.opf-hang-27 { --opf-hang: 27; }
.cm-line.opf-hang-28 { --opf-hang: 28; }
.cm-line.opf-hang-29 { --opf-hang: 29; }
.cm-line.opf-hang-30 { --opf-hang: 30; }
.cm-line.opf-hang-31 { --opf-hang: 31; }
.cm-line.opf-hang-32 { --opf-hang: 32; }
:is(.opf-ui, .opf-json, .opf-code) .cm-line {
  padding-left: calc(var(--opf-line-start, 6px) + var(--opf-hang, 0) * 1ch);
  text-indent: calc(-1 * var(--opf-hang, 0) * 1ch);
}

:is(.opf-ui, .opf-json, .opf-code) .cm-line > * {
  text-indent: 0;
}

:is(.opf-ui, .opf-json, .opf-code) .cm-activeLine,
:is(.opf-ui, .opf-json, .opf-code) .cm-line.is-hover {
  background: color-mix(in srgb, var(--opf-ui-accent) 8%, transparent);
}

:is(.opf-ui, .opf-json, .opf-code) .cm-activeLineGutter {
  color: var(--opf-ui-fg);
  background: color-mix(in srgb, var(--opf-ui-accent) 8%, transparent);
}

:is(.opf-ui, .opf-json, .opf-code) .cm-selectionBackground,
:is(.opf-ui, .opf-json, .opf-code) .cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {
  background: color-mix(in srgb, var(--opf-ui-accent) 20%, transparent);
}

:is(.opf-ui, .opf-json, .opf-code) .cm-selectionMatch {
  background: color-mix(in srgb, var(--opf-ui-warn) 25%, transparent);
}

:is(.opf-ui, .opf-json, .opf-code) .cm-matchingBracket {
  background: color-mix(in srgb, var(--opf-ui-accent) 16%, transparent);
  outline: 1px solid var(--opf-ui-accent);
}

:is(.opf-ui, .opf-json, .opf-code) .tok-key {
  color: var(--opf-ui-accent-strong);
}

:is(.opf-ui, .opf-json, .opf-code) .tok-str {
  color: var(--opf-ui-fg);
}

:is(.opf-ui, .opf-json, .opf-code) .tok-num {
  color: var(--opf-ui-warn);
}

:is(.opf-ui, .opf-json, .opf-code) .tok-punct,
:is(.opf-ui, .opf-json, .opf-code) .tok-brace {
  color: var(--opf-ui-muted-fg);
}

:is(.opf-ui, .opf-json, .opf-code) .code-key.is-active {
  background: color-mix(in srgb, var(--opf-ui-accent) 14%, transparent);
  border-radius: var(--opf-ui-radius-sm);
}

:is(.opf-ui, .opf-json, .opf-code) .cm-panels {
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border-color: var(--opf-ui-border);
  font-family: var(--opf-ui-font);
}

:is(.opf-ui, .opf-json, .opf-code) .cm-panels input,
:is(.opf-ui, .opf-json, .opf-code) .cm-panels button {
  font: 12px var(--opf-ui-font);
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-sm);
}

:is(.opf-ui, .opf-json, .opf-code) .cm-tooltip {
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-md);
  box-shadow: var(--opf-ui-shadow-pop);
}

:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip.cm-tooltip-autocomplete > ul {
  font-family: var(--opf-ui-mono);
  font-size: 12px;
}

:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip.cm-tooltip-autocomplete > ul > li {
  padding: 2px 8px;
  color: var(--opf-ui-fg);
}

:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
  color: var(--opf-ui-accent-fg);
  background: var(--opf-ui-accent);
}

:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip-autocomplete .cm-completionDetail {
  margin-left: 12px;
  font-family: var(--opf-ui-font);
  font-style: normal;
  color: var(--opf-ui-muted-fg);
}

:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip-autocomplete > ul > li[aria-selected] .cm-completionDetail {
  color: inherit;
  opacity: 0.85;
}

:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip-autocomplete > .opf-completion-footer {
  padding: 4px 8px;
  font: 12px/1.4 var(--opf-ui-font);
  color: var(--opf-ui-muted-fg);
  border-top: 1px solid var(--opf-ui-border);
}

:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip-autocomplete .cm-completionMatchedText {
  font-weight: 600;
  text-decoration: none;
}

:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip .cm-completionInfo {
  max-width: 280px;
  padding: 6px 8px;
  font: 12px/1.45 var(--opf-ui-font);
  white-space: pre-wrap;
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-md);
}

/* The live region next to the code: read by screen readers, never seen. */
.opf-source-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The documentation cards: beside the selected suggestion and over a key or a value. */
:is(.opf-ui, .opf-json, .opf-code) .cm-tooltip .opf-doc,
.opf-source-code .cm-tooltip .opf-doc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 340px;
  padding: 2px 0;
  font: 12px/1.45 var(--opf-ui-font);
  white-space: normal;
}
.opf-doc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.opf-doc-title { font-family: var(--opf-ui-mono); font-weight: 600; }
.opf-doc-type { color: var(--opf-ui-muted-fg); }
.opf-doc-badge { padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--opf-ui-accent) 14%, transparent); color: var(--opf-ui-accent-strong); font-size: 11px; font-weight: 500; }
.opf-doc-text, .opf-doc-note, .opf-doc-example, .opf-doc-source { margin: 0; }
.opf-doc-note, .opf-doc-source { color: var(--opf-ui-muted-fg); }
.opf-doc-values { display: flex; flex-wrap: wrap; gap: 4px; }
.opf-doc-chip { padding: 0 5px; border: 1px solid var(--opf-ui-border); border-radius: var(--opf-ui-radius-sm); font-size: 11px; }
.opf-doc-more { color: var(--opf-ui-muted-fg); font-size: 11px; }

/* A problem's tooltip and the quick fix list. */
.cm-tooltip-lint .opf-problem { display: flex; flex-direction: column; gap: 2px; max-width: 360px; white-space: normal; }
.opf-problem-next { color: var(--opf-ui-muted-fg); }
.cm-tooltip-lint .cm-diagnosticAction { margin: 4px 6px 0 0; padding: 1px 8px; border: 1px solid var(--opf-ui-border); border-radius: var(--opf-ui-radius-sm); background: var(--opf-ui-muted); color: var(--opf-ui-fg); font: 12px var(--opf-ui-font); cursor: pointer; }
.cm-tooltip-lint .cm-diagnosticSource { color: var(--opf-ui-muted-fg); }
.opf-problem-hint { color: var(--opf-ui-muted-fg); font-size: 11px; }
.cm-tooltip .opf-fixes { display: flex; flex-direction: column; min-width: 180px; padding: 3px; font: 12px var(--opf-ui-font); }
.opf-fix { padding: 3px 8px; border-radius: var(--opf-ui-radius-sm); white-space: nowrap; }
.opf-fix[aria-selected="true"] { background: var(--opf-ui-accent); color: var(--opf-ui-accent-fg); }
:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip .cm-completionInfo { white-space: normal; }

/* The shape hint (Cmd/Ctrl+Shift+Space): the fields of the object around the caret, each set, next or optional. The state is a word and a mark, not only a color. */
.cm-tooltip.opf-hint { display: flex; flex-direction: column; min-width: 22em; max-width: 38em; padding: 4px 0; font: 12.5px var(--opf-ui-font); white-space: normal; }
.opf-hint-head { display: flex; justify-content: space-between; gap: 24px; padding: 2px 12px 5px; border-bottom: 1px solid var(--opf-ui-border); }
.opf-hint-title { font: 600 12px var(--opf-ui-mono); }
.opf-hint-aside { color: var(--opf-ui-muted-fg); font-size: 11.5px; white-space: nowrap; }
.opf-hint-rows { display: flex; flex-direction: column; margin: 0; padding: 3px 0 0; list-style: none; }
.opf-hint-row { display: grid; grid-template-columns: 8em minmax(0, 1fr) 5.5em; gap: 12px; align-items: baseline; padding: 1px 12px; }
.opf-hint-key { font: 12px var(--opf-ui-mono); overflow-wrap: anywhere; }
.opf-hint-description { color: var(--opf-ui-muted-fg); }
.opf-hint-state { text-align: right; color: var(--opf-ui-muted-fg); font-size: 11.5px; }
.opf-hint-row[data-state="set"] .opf-hint-state::before { content: "\2713\00a0"; }
.opf-hint-row[data-state="next"] { background: color-mix(in srgb, var(--opf-ui-accent) 12%, transparent); box-shadow: inset 2px 0 0 var(--opf-ui-accent); }
.opf-hint-row[data-state="next"] .opf-hint-key,
.opf-hint-row[data-state="next"] .opf-hint-state { color: var(--opf-ui-accent-strong); font-weight: 600; }
.opf-hint-row[data-state="next"] .opf-hint-state::before { content: "\25B6\00a0"; }
/* No animation either way; the rule is explicit so a later one cannot add motion for someone who asked for less. */
@media (prefers-reduced-motion: reduce) {
  .cm-tooltip.opf-hint, .cm-tooltip.opf-hint * { animation: none !important; transition: none !important; }
}

/* Ctrl+Space with the list open hides the documentation panel (and shows it again). */
.cm-editor.opf-docs-off .cm-completionInfo { display: none; }

:is(.opf-ui, .opf-json, .opf-code) .cm-diagnostic-error {
  border-left-color: var(--opf-ui-danger);
}

:is(.opf-ui, .opf-json, .opf-code) .cm-diagnostic-warning {
  border-left-color: var(--opf-ui-warn);
}

/* The field-options popover. Its inline style uses system colors; color-scheme follows the theme, and these keep it on the tokens. */
:is(.opf-ui, .opf-json, .opf-code) .json-field-menu {
  color: var(--opf-ui-fg) !important;
  background: var(--opf-ui-surface) !important;
  border-color: var(--opf-ui-border) !important;
  border-radius: var(--opf-ui-radius-lg) !important;
  box-shadow: var(--opf-ui-shadow-pop) !important;
  font-family: var(--opf-ui-font) !important;
}

:is(.opf-ui, .opf-json, .opf-code) .json-field-menu button[role="option"]:hover,
:is(.opf-ui, .opf-json, .opf-code) .json-field-menu button.is-highlighted {
  background: var(--opf-ui-muted) !important;
}

:is(.opf-ui, .opf-json, .opf-code) .json-field-menu input {
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
}

:is(.opf-ui, .opf-json, .opf-code) .json-field-hint,
:is(.opf-ui, .opf-json, .opf-code) .json-field-footnote,
:is(.opf-ui, .opf-json, .opf-code) .json-field-regions,
:is(.opf-ui, .opf-json, .opf-code) .json-field-group {
  color: var(--opf-ui-muted-fg) !important;
}

/* ---------------------------------------------------------------- persistence banner (restore prompt) */
/* `createPersistenceUi` fills a host element; give that element the class `restore-banner` (the playground does). */

.restore-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 16px;
  font-family: var(--opf-ui-font);
  color: var(--opf-ui-fg);
  background: color-mix(in srgb, var(--opf-ui-warn) 10%, var(--opf-ui-surface));
  border-bottom: 1px solid color-mix(in srgb, var(--opf-ui-warn) 40%, var(--opf-ui-border));
}

.restore-banner[hidden] {
  display: none;
}

.restore-text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 13px;
}

.restore-note {
  flex: 1 1 100%;
  margin: 0;
  font: 11.5px/1.4 var(--opf-ui-mono);
  color: var(--opf-ui-muted-fg);
}

.restore-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.restore-banner button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--opf-ui-control-h);
  padding: 0 12px;
  font: 500 13px/1.2 var(--opf-ui-font);
  color: var(--opf-ui-fg);
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius);
  cursor: pointer;
  transition:
    background-color var(--opf-ui-ease),
    border-color var(--opf-ui-ease);
}

.restore-banner button:hover:not(:disabled) {
  background: var(--opf-ui-muted);
  border-color: var(--opf-ui-border-strong);
}

.restore-banner button.primary {
  color: var(--opf-ui-accent-fg);
  background: var(--opf-ui-accent);
  border-color: var(--opf-ui-accent);
}

.restore-banner button:focus-visible {
  outline: 2px solid var(--opf-ui-ring);
  outline-offset: 2px;
}

.restore-banner button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Motion is color and border only; it is off when the person asks for less. */
@media (prefers-reduced-motion: reduce) {
  :root .opf-find *,
  :root .opf-crop *,
  :root .opf-grid *,
  :root .opf-review *,
  .opf-design-controls *,
  .opf-template-panel *,
  .opf-numbering-panel *,
  .opf-chart-options *,
  .opf-slides *,
  .opf-menu *,
  .opf-outline *,
  .restore-banner * {
    transition: none !important;
  }
}

/* presenter.css */
/* RR-98: the presenter and the Present button (src/presenter.js). Only --opf-ui-* tokens, no color literals (test/styles.mjs). */

/* ---- the presenter -------------------------------------------------------------------------------------------------------------------- */
.opf-presenter,
.opf-presenter *,
.opf-presenter *::before,
.opf-presenter *::after { box-sizing: border-box; }
.opf-presenter[hidden] { display: none !important; }

.opf-presenter {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Slides are letterboxed on black in every theme, so the bars never take a token's light or dark value. */
  background: black;
  font-family: var(--opf-ui-font);
  font-size: 13px;
  line-height: 1.4;
  color: var(--opf-ui-fg);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  outline: none;
}
.opf-presenter[data-chrome="hidden"] { cursor: none; }

.opf-presenter .opf-presenter-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The slide's own width and height attributes give its shape (viewBox); this makes it as large as the screen allows. */
.opf-presenter .opf-presenter-slide svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.opf-presenter .opf-presenter-message {
  position: absolute;
  margin: 0;
  max-width: 40ch;
  padding: 12px 16px;
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-md);
  background: var(--opf-ui-surface);
  color: var(--opf-ui-muted-fg);
  text-align: center;
  font: 400 13px/1.5 var(--opf-ui-font);
}
.opf-presenter .opf-presenter-message[hidden] { display: none; }
.opf-presenter .opf-presenter-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- the counter and the exit button (they appear on pointer move) ---------------------------------------------------------------------- */
.opf-presenter .opf-presenter-counter,
.opf-presenter .opf-presenter-close {
  position: absolute;
  background: var(--opf-ui-surface);
  color: var(--opf-ui-muted-fg);
  border: 1px solid var(--opf-ui-border);
  opacity: 0;
  transition: opacity var(--opf-ui-ease), color var(--opf-ui-ease), border-color var(--opf-ui-ease);
}
.opf-presenter[data-chrome="visible"] .opf-presenter-counter,
.opf-presenter[data-chrome="visible"] .opf-presenter-close,
.opf-presenter .opf-presenter-close:focus-visible { opacity: 1; }

.opf-presenter .opf-presenter-counter {
  bottom: 16px;
  left: 0;
  right: 0;
  width: max-content;
  margin: 0 auto;
  padding: 4px 10px;
  border-radius: var(--opf-ui-radius);
  font: 500 11.5px/1.4 var(--opf-ui-mono);
  letter-spacing: 0.04em;
  pointer-events: none;
}
.opf-presenter .opf-presenter-close {
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--opf-ui-control-h);
  height: var(--opf-ui-control-h);
  padding: 0;
  margin: 0;
  border-radius: var(--opf-ui-radius);
  font: inherit;
  cursor: pointer;
}
.opf-presenter .opf-presenter-close:hover { color: var(--opf-ui-fg); background: var(--opf-ui-muted); }
.opf-presenter .opf-presenter-close:focus-visible {
  outline: 2px solid var(--opf-ui-ring);
  outline-offset: 2px;
}
.opf-presenter .opf-icon { flex: none; }

/* ---- the Present button (quiet like the toolbar's undo and redo by default; data-variant="primary" is the Export trigger's look) ------------------------------------------------------------------------------- */
.opf-present-button,
.opf-present-button *,
.opf-present-button *::before,
.opf-present-button *::after { box-sizing: border-box; }
.opf-present-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--opf-ui-control-h);
  height: var(--opf-ui-control-h);
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--opf-ui-radius);
  background: transparent;
  color: var(--opf-ui-muted-fg);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--opf-ui-ease), color var(--opf-ui-ease), opacity var(--opf-ui-ease);
}
.opf-present-button:hover { background: var(--opf-ui-muted); color: var(--opf-ui-fg); }
.opf-present-button[data-variant="primary"] {
  border-color: var(--opf-ui-accent);
  background: var(--opf-ui-accent);
  color: var(--opf-ui-accent-fg);
}
.opf-present-button[data-variant="primary"]:hover {
  background: var(--opf-ui-accent);
  color: var(--opf-ui-accent-fg);
  opacity: 0.92;
}
.opf-present-button:focus-visible {
  outline: 2px solid var(--opf-ui-ring);
  outline-offset: 2px;
}
.opf-present-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.opf-present-button[aria-disabled="true"]:hover { background: transparent; color: var(--opf-ui-muted-fg); }
.opf-present-button[data-variant="primary"][aria-disabled="true"]:hover {
  background: var(--opf-ui-accent);
  color: var(--opf-ui-accent-fg);
  opacity: 0.5;
}
.opf-present-button .opf-icon { flex: none; }

@media (prefers-reduced-motion: reduce) {
  .opf-presenter .opf-presenter-counter,
  .opf-presenter .opf-presenter-close,
  .opf-present-button { transition: none; }
}

/* shortcuts.css */
/* The keyboard shortcuts dialog (src/source-shortcuts.js). Only --opf-ui-* tokens, no color literals (test/styles.mjs). */
.opf-shortcuts,
.opf-shortcuts *,
.opf-shortcuts *::before,
.opf-shortcuts *::after { box-sizing: border-box; }
.opf-shortcuts [hidden] { display: none !important; }
.opf-shortcuts {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
  align-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--opf-ui-fg) 32%, transparent);
  font-family: var(--opf-ui-font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--opf-ui-fg);
}
.opf-shortcuts .opf-shortcuts-dialog {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-height: min(720px, calc(100vh - 32px));
  padding: 16px 18px 12px;
  overflow: hidden;
  background: var(--opf-ui-surface);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-lg);
  box-shadow: var(--opf-ui-shadow-pop);
}
.opf-shortcuts .opf-shortcuts-dialog:focus { outline: none; }
.opf-shortcuts .opf-shortcuts-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.opf-shortcuts .opf-shortcuts-title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.opf-shortcuts .opf-shortcuts-help { margin: 0; color: var(--opf-ui-muted-fg); }
.opf-shortcuts .opf-shortcuts-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--opf-ui-radius);
  background: transparent;
  color: var(--opf-ui-muted-fg);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.opf-shortcuts .opf-shortcuts-close:hover { background: var(--opf-ui-muted); color: var(--opf-ui-fg); }
.opf-shortcuts .opf-shortcuts-search {
  width: 100%;
  min-height: 34px;
  padding: 4px 10px;
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-md);
  background: var(--opf-ui-bg);
  color: inherit;
  font: inherit;
}
.opf-shortcuts button:focus-visible,
.opf-shortcuts input:focus-visible,
.opf-shortcuts .opf-shortcuts-list:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 2px; }
.opf-shortcuts .opf-shortcuts-status { min-height: 18px; color: var(--opf-ui-muted-fg); font-size: 12px; }
.opf-shortcuts .opf-shortcuts-list { flex: 1; min-height: 120px; overflow: auto; padding-right: 4px; }
.opf-shortcuts .opf-shortcuts-group { margin: 0 0 12px; }
.opf-shortcuts .opf-shortcuts-group-title { margin: 8px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--opf-ui-muted-fg); }
.opf-shortcuts .opf-shortcuts-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 4px 0; border-bottom: 1px solid var(--opf-ui-border); }
.opf-shortcuts .opf-shortcuts-name { min-width: 0; }
.opf-shortcuts .opf-shortcuts-when { color: var(--opf-ui-muted-fg); font-size: 12px; }
.opf-shortcuts .opf-shortcuts-keys { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex: none; max-width: 55%; }
.opf-shortcuts .opf-shortcuts-or { color: var(--opf-ui-muted-fg); font-size: 11px; padding: 0 2px; align-self: center; }
.opf-shortcuts .opf-shortcuts-key {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  border: 1px solid var(--opf-ui-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--opf-ui-radius-sm);
  background: var(--opf-ui-muted);
  font: 12px var(--opf-ui-mono);
  text-align: center;
  white-space: nowrap;
}
.opf-shortcuts .opf-shortcuts-none { color: var(--opf-ui-muted-fg); }
@media (forced-colors: active) {
  .opf-shortcuts .opf-shortcuts-dialog,
  .opf-shortcuts .opf-shortcuts-key { border-color: CanvasText; }
}

/* The symbol picker (src/source-outline.js) */
.opf-quickpick {
  position: absolute;
  top: 6px;
  left: 50%;
  z-index: 40;
  width: min(480px, calc(100% - 24px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--opf-ui-surface);
  color: var(--opf-ui-fg);
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-lg);
  box-shadow: var(--opf-ui-shadow-pop);
  font: 13px var(--opf-ui-font);
}
.opf-quickpick-input { width: 100%; min-height: 30px; padding: 3px 8px; border: 1px solid var(--opf-ui-border); border-radius: var(--opf-ui-radius-md); background: var(--opf-ui-bg); color: inherit; font: inherit; }
.opf-quickpick-input:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 1px; }
.opf-quickpick-list { margin: 0; padding: 2px 0 0; list-style: none; max-height: 280px; overflow: auto; }
.opf-quickpick-item { display: flex; align-items: baseline; gap: 8px; min-height: 26px; padding: 3px 10px; border-radius: var(--opf-ui-radius-sm); cursor: pointer; }
.opf-quickpick-item.is-selected { background: var(--opf-ui-accent); color: var(--opf-ui-accent-fg); }
.opf-quickpick-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opf-quickpick-detail { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; opacity: 0.75; }
.opf-quickpick-kind { margin-left: auto; font-size: 11px; opacity: 0.75; flex: none; }
.opf-quickpick-more { padding: 4px 10px; color: var(--opf-ui-muted-fg); font-size: 12px; }
.opf-quickpick-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (forced-colors: active) { .opf-quickpick-item.is-selected { outline: 2px solid Highlight; } }

/* source-navigation.css */
/*
 * Go to definition, peek, references and rename (source-navigation.js): one block widget under the line of the symbol. Tokens only. The declaration is
 * marked by a word, an arrow and a heavier line as well as by color, and nothing animates.
 */
.opf-sym {
  box-sizing: border-box;
  margin: 4px 0 6px 12px;
  padding: 6px 10px 8px;
  border: 1px solid var(--opf-ui-border-strong);
  border-left: 3px solid var(--opf-ui-accent);
  border-radius: var(--opf-ui-radius);
  background: var(--opf-ui-surface);
  color: var(--opf-ui-fg);
  box-shadow: var(--opf-ui-shadow-pop);
  font: 12px/1.45 var(--opf-ui-font);
  text-align: start;
  white-space: normal;
  cursor: default;
}
.opf-sym:focus-visible,
.opf-sym-list:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 1px; }
.opf-sym-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.opf-sym-title { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.opf-sym-where { color: var(--opf-ui-muted-fg); }
.opf-sym-close {
  flex: none;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-sm);
  background: var(--opf-ui-muted-2);
  color: var(--opf-ui-fg);
  font: inherit;
  cursor: pointer;
}
.opf-sym-close:hover { background: var(--opf-ui-muted); }
.opf-sym-close:focus-visible,
.opf-sym-input:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 1px; }
.opf-sym-lines, .opf-sym-list { margin: 6px 0 0; padding: 0; list-style: none; max-height: 260px; overflow: auto; }
.opf-sym-line, .opf-sym-ref { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 1px 4px; border-radius: var(--opf-ui-radius-sm); }
.opf-sym-no { flex: none; min-width: 3ch; color: var(--opf-ui-muted-fg); font-family: var(--opf-ui-mono); text-align: end; }
.opf-sym-mark { flex: none; width: 1ch; color: var(--opf-ui-accent-strong); }
.opf-sym-text { flex: 1 1 auto; min-width: 0; font-family: var(--opf-ui-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.opf-sym-line.is-target { background: var(--opf-ui-muted-2); font-weight: 600; }
.opf-sym-ref { cursor: pointer; }
.opf-sym-ref:hover { background: var(--opf-ui-muted-2); }
.opf-sym-ref[aria-selected="true"] { background: var(--opf-ui-accent); color: var(--opf-ui-accent-fg); }
.opf-sym-ref[aria-selected="true"] .opf-sym-no,
.opf-sym-ref[aria-selected="true"] .opf-sym-badge { color: inherit; }
.opf-sym-badge { flex: none; min-width: 6.5em; color: var(--opf-ui-muted-fg); font-size: 11px; }
.opf-sym-ref.is-declaration .opf-sym-badge { font-weight: 600; }
.opf-sym-hint { margin: 6px 0 0; color: var(--opf-ui-muted-fg); font-size: 11px; }
.opf-sym-field { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.opf-sym-label { flex: none; color: var(--opf-ui-muted-fg); }
.opf-sym-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--opf-ui-control-h);
  padding: 0 8px;
  border: 1px solid var(--opf-ui-border-strong);
  border-radius: var(--opf-ui-radius-sm);
  background: var(--opf-ui-bg);
  color: var(--opf-ui-fg);
  font: 13px var(--opf-ui-mono);
}
.opf-sym-input[aria-invalid="true"] { border-color: var(--opf-ui-danger); }
.opf-sym-message { min-height: 1.45em; margin-top: 4px; }
.opf-sym-message.is-error { color: var(--opf-ui-danger); font-weight: 600; }
.opf-sym-message.is-error::before { content: "Error: "; }
.opf-sym-preview { margin-top: 6px; }
.opf-sym-image { display: block; max-width: 100%; max-height: 160px; border: 1px solid var(--opf-ui-border); border-radius: var(--opf-ui-radius-sm); }
@media (forced-colors: active) {
  .opf-sym { border: 1px solid CanvasText; }
  .opf-sym-ref[aria-selected="true"] { outline: 2px solid Highlight; }
}

/* source-pane.css */
/* Source pane (RR-98). Only --opf-ui-* tokens (src/styles/tokens.css). */
.opf-source {
  --_h: var(--opf-ui-control-h);
  --_bar: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: var(--opf-ui-code-bg);
  color: var(--opf-ui-fg);
  font-family: var(--opf-ui-font);
  font-size: 13px;
}
.opf-source[data-density="touch"] { --_h: 40px; --_bar: 48px; }
.opf-source [hidden] { display: none !important; }
.opf-source button { font: inherit; color: inherit; }

/* Bar: file name, format menu, actions. It wraps: where the name, the format and the actions do not fit on one row (a narrow pane, or 44px
   buttons under a coarse pointer), the actions drop to their own row on the right instead of squeezing the name. */
.opf-source-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 14px;
  flex: none;
  min-height: var(--_bar);
  padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--opf-ui-code-border);
}
.opf-source-file {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  font: 500 13px var(--opf-ui-mono);
  white-space: nowrap;
}
.opf-source-name,
.opf-source-format {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: calc(var(--_h) - 6px);
  padding: 2px 4px;
  border: 0;
  border-radius: var(--opf-ui-radius-sm);
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: background-color var(--opf-ui-ease), color var(--opf-ui-ease);
}
.opf-source-name { margin-left: -4px; color: var(--opf-ui-fg); cursor: text; overflow: hidden; text-overflow: ellipsis; max-width: 24ch; }
.opf-source-name:disabled { cursor: default; }
.opf-source-format { padding-left: 5px; color: var(--opf-ui-muted-fg); }
.opf-source-name:not(:disabled):hover,
.opf-source-format:hover { background: var(--opf-ui-muted); }
.opf-source-format:hover,
.opf-source-format[aria-expanded="true"] { color: var(--opf-ui-fg); }
.opf-source-format[aria-expanded="true"] { background: var(--opf-ui-muted); }
.opf-source-name-input {
  box-sizing: content-box;
  min-height: calc(var(--_h) - 10px);
  margin-left: -5px;
  padding: 2px 4px;
  border: 1px solid var(--opf-ui-ring);
  border-radius: var(--opf-ui-radius-sm);
  background: var(--opf-ui-surface);
  color: var(--opf-ui-fg);
  font: inherit;
  outline: none;
}
.opf-source-actions { display: flex; gap: 2px; margin-left: auto; }
.opf-source-action {
  display: grid;
  place-items: center;
  width: var(--_h);
  height: var(--_h);
  padding: 0;
  border: 0;
  border-radius: var(--opf-ui-radius);
  background: transparent;
  color: var(--opf-ui-muted-fg);
  cursor: pointer;
  transition: background-color var(--opf-ui-ease), color var(--opf-ui-ease);
}
.opf-source-action:hover { background: var(--opf-ui-muted); color: var(--opf-ui-fg); }
.opf-source-action:disabled { opacity: 0.4; cursor: default; }
.opf-source-action:disabled:hover { background: transparent; color: var(--opf-ui-muted-fg); }
.opf-source-icon { flex: none; }
.opf-source[data-density="touch"] .opf-source-icon-braces,
.opf-source[data-density="touch"] .opf-source-icon-copy,
.opf-source[data-density="touch"] .opf-source-icon-download,
.opf-source[data-density="touch"] .opf-source-icon-check { width: 16px; height: 16px; }

:where(.opf-source button, .opf-source input):focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 2px; }
.opf-source-name-input:focus-visible { outline-offset: 0; }

/* Format menu */
.opf-source-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 6;
  width: 264px;
  padding: 4px;
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-md);
  background: var(--opf-ui-surface);
  box-shadow: var(--opf-ui-shadow-pop);
  font-family: var(--opf-ui-font);
  white-space: normal;
}
.opf-source-menu-heading {
  padding: 6px 10px 4px;
  color: var(--opf-ui-muted-fg);
  font: 500 10.5px var(--opf-ui-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.opf-source-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-height: var(--_h);
  padding: 7px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--opf-ui-ease);
}
.opf-source-menu-item:hover,
.opf-source-menu-item:focus-visible { background: var(--opf-ui-muted); }
.opf-source-menu-item[aria-checked="true"] { background: color-mix(in srgb, var(--opf-ui-accent) 8%, transparent); }
.opf-source-menu-item[aria-checked="true"]:hover { background: color-mix(in srgb, var(--opf-ui-accent) 14%, transparent); }
.opf-source-menu-item:focus-visible { outline-offset: -2px; }
.opf-source-menu-check { display: grid; place-items: center; width: 14px; height: 18px; color: var(--opf-ui-accent-strong); visibility: hidden; }
.opf-source-menu-item[aria-checked="true"] .opf-source-menu-check { visibility: visible; }
.opf-source-menu-body { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.opf-source-menu-label { font-size: 13px; font-weight: 500; line-height: 18px; }
.opf-source-menu-description { color: var(--opf-ui-muted-fg); font-size: 12px; line-height: 16px; }
.opf-source-menu-extension { color: var(--opf-ui-muted-fg); font: 11px/18px var(--opf-ui-mono); }

/* Code */
.opf-source-code { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; }
/* The pane frame draws the edge: the editor inside it has no border or radius of its own (panels.css gives a standalone editor both). */
.opf-source-code > .cm-editor { flex: 1; min-width: 0; height: 100%; background: transparent; color: var(--opf-ui-fg); border: 0; border-radius: 0; }
.opf-source-code .cm-editor.cm-focused { outline: none; }
.opf-source-code .cm-scroller { overflow: auto; font: 400 13.5px/22px var(--opf-ui-mono); }
.opf-source[data-density="touch"] .opf-source-code .cm-scroller { font-size: 13px; line-height: 21px; }
.opf-source-code .cm-content { padding: 16px 16px 16px 4px; caret-color: var(--opf-ui-fg); }
.opf-source-code .cm-line { --opf-line-start: 2px; padding-top: 0; padding-right: 2px; padding-bottom: 0; }
.opf-source-code .cm-gutters { border: 0; background: transparent; color: color-mix(in srgb, var(--opf-ui-muted-fg) 60%, transparent); }
.opf-source-code .cm-lineNumbers .cm-gutterElement { min-width: 30px; padding: 0 12px 0 0; text-align: right; font-size: 11px; }
.opf-source-code .cm-activeLine { background: transparent; }
.opf-source-code .cm-selectionBackground,
.opf-source-code .cm-focused .cm-selectionBackground { background: color-mix(in srgb, var(--opf-ui-accent) 16%, transparent); }
.opf-source-code .cm-cursor { border-left-color: var(--opf-ui-fg); }
.opf-source-code .tok-key { color: var(--opf-ui-accent-strong); }
.opf-source-code .tok-str { color: var(--opf-ui-fg); }
.opf-source-code .tok-num { color: var(--opf-ui-warn); }
.opf-source-code .tok-punct,
.opf-source-code .tok-brace,
.opf-source-code .tok-comment,
.opf-source-code .tok-meta { color: var(--opf-ui-muted-fg); }
.opf-source-code .tok-head { color: var(--opf-ui-accent-strong); font-weight: 600; }
.opf-source-code .tok-comment { font-style: italic; }
.opf-source-code .code-key.is-active { background: color-mix(in srgb, var(--opf-ui-accent) 10%, transparent); border-radius: var(--opf-ui-radius-sm); }
.opf-source-code .cm-line.is-hover { background: color-mix(in srgb, var(--opf-ui-accent) 6%, transparent); }
.opf-source-code .cm-panels { background: var(--opf-ui-surface); color: var(--opf-ui-fg); border-color: var(--opf-ui-border); }
.opf-source-code .cm-tooltip { background: var(--opf-ui-surface); border: 1px solid var(--opf-ui-border); border-radius: var(--opf-ui-radius); color: var(--opf-ui-fg); }
.opf-source-code .cm-lintRange-error { background-image: none; text-decoration: underline wavy var(--opf-ui-danger); }

/* Findings under the code */
.opf-source-findings {
  flex: none;
  border-top: 1px solid var(--opf-ui-code-border);
  background: color-mix(in srgb, var(--opf-ui-danger) 5%, transparent);
  max-height: 40%;
  display: flex;
  flex-direction: column;
}
.opf-source-findings[data-tone="warning"] { background: color-mix(in srgb, var(--opf-ui-warn) 6%, transparent); }
.opf-source-findings[data-tone="info"] { background: var(--opf-ui-muted-2); }
.opf-source-findings-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  width: 100%;
  min-height: var(--_h);
  padding: 0 10px 0 14px;
  border: 0;
  background: transparent;
  color: var(--opf-ui-danger);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.opf-source-findings[data-tone="warning"] .opf-source-findings-toggle { color: var(--opf-ui-warn); }
.opf-source-findings[data-tone="info"] .opf-source-findings-toggle { color: var(--opf-ui-muted-fg); }
.opf-source-findings-toggle > .opf-source-icon { margin-left: auto; transition: transform var(--opf-ui-ease); }
.opf-source-findings-toggle[aria-expanded="false"] > .opf-source-icon { transform: rotate(-90deg); }
.opf-source-findings-icon { display: inline-grid; place-items: center; }
.opf-source-findings-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0 8px 8px; list-style: none; overflow: auto; }
.opf-source-finding-item { display: flex; flex-direction: column; }
.opf-source-finding {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  grid-template-areas: "icon head where" "icon next rule";
  align-items: baseline;
  column-gap: 8px;
  row-gap: 1px;
  width: 100%;
  min-height: calc(var(--_h) - 4px);
  padding: 4px 6px;
  border: 0;
  border-radius: var(--opf-ui-radius-sm);
  background: transparent;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--opf-ui-ease);
}
.opf-source-finding:hover { background: var(--opf-ui-muted); }
/* The severity is a shape as well as a color; the word is for screen readers. */
.opf-source-finding::before { grid-area: icon; align-self: start; color: var(--opf-ui-danger); font-size: 11px; line-height: 1.7; content: "\2716"; }
.opf-source-finding[data-severity="warning"]::before { color: var(--opf-ui-warn); content: "\25B2"; }
.opf-source-finding[data-severity="info"]::before { color: var(--opf-ui-muted-fg); content: "\25CF"; }
.opf-source-finding-severity { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.opf-source-finding-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.opf-source-finding-path {
  flex: none;
  padding: 1px 5px;
  border-radius: var(--opf-ui-radius-sm);
  background: color-mix(in srgb, var(--opf-ui-danger) 10%, transparent);
  color: var(--opf-ui-danger);
  font: 12px var(--opf-ui-mono);
}
.opf-source-finding[data-severity="warning"] .opf-source-finding-path { background: color-mix(in srgb, var(--opf-ui-warn) 12%, transparent); color: var(--opf-ui-warn); }
.opf-source-finding[data-severity="info"] .opf-source-finding-path { background: var(--opf-ui-muted); color: var(--opf-ui-muted-fg); }
.opf-source-finding-message { min-width: 0; color: var(--opf-ui-fg); overflow-wrap: anywhere; }
.opf-source-finding-next { grid-area: next; min-width: 0; color: var(--opf-ui-muted-fg); overflow-wrap: anywhere; }
.opf-source-finding-line { grid-area: where; justify-self: end; color: var(--opf-ui-muted-fg); font: 11px var(--opf-ui-mono); white-space: nowrap; }
.opf-source-finding-rule { grid-area: rule; justify-self: end; color: var(--opf-ui-muted-fg); font: 10.5px var(--opf-ui-mono); }
.opf-source-finding-fixes { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 6px 4px 28px; }
.opf-source-finding-fix {
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--opf-ui-border);
  border-radius: var(--opf-ui-radius-sm);
  background: var(--opf-ui-surface);
  font-size: 12px;
  cursor: pointer;
}
.opf-source-finding-fix:hover { background: var(--opf-ui-muted); }
.opf-source-finding-details {
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--opf-ui-radius-sm);
  background: transparent;
  color: var(--opf-ui-muted-fg);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
.opf-source-finding-details:hover { background: var(--opf-ui-muted); }
.opf-source-finding-details[aria-expanded="true"] { text-decoration: none; background: var(--opf-ui-muted); }
.opf-source-finding-explain { display: flex; flex-direction: column; gap: 4px; margin: 0 6px 6px 28px; padding: 6px 8px; border-left: 2px solid var(--opf-ui-border); color: var(--opf-ui-fg); font-size: 12px; }
.opf-source-finding-explain[hidden] { display: none; }
.opf-source-finding-explain-line { margin: 0; overflow-wrap: anywhere; }
.opf-source-finding-explain-example { font: 11px var(--opf-ui-mono); overflow-wrap: anywhere; white-space: pre-wrap; }
.opf-source-finding-explain-example code { padding: 1px 4px; border-radius: var(--opf-ui-radius-sm); background: var(--opf-ui-muted); }
.opf-source-finding-explain-link { color: var(--opf-ui-muted-fg); }
.opf-source-finding-more { padding: 3px 6px; color: var(--opf-ui-muted-fg); font-size: 12px; }

.opf-source-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .opf-source *,
  .opf-source *::before { transition: none !important; }
}

/* Canonicalize with OPF: the question before a rewrite that drops comments. */
.opf-source-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  flex: none;
  padding: 8px 14px;
  border-bottom: 1px solid var(--opf-ui-code-border);
  background: color-mix(in srgb, var(--opf-ui-warn) 8%, transparent);
}
.opf-source-confirm-text { margin: 0; flex: 1 1 18em; min-width: 0; }
.opf-source-confirm button {
  height: var(--_h);
  padding: 0 12px;
  border: 1px solid var(--opf-ui-code-border);
  border-radius: var(--opf-ui-radius);
  background: var(--opf-ui-muted-2);
  cursor: pointer;
}
.opf-source-confirm button:hover { background: var(--opf-ui-muted); }
.opf-source-confirm-accept { font-weight: 600; }

/* Fold gutter (src/source-folding.js) */
.opf-source-code .cm-foldGutter { width: 16px; }
.opf-source-code .cm-foldGutter .cm-gutterElement { display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.opf-source-code .cm-foldGutter .opf-fold-marker { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 100%; color: var(--opf-ui-muted-fg); opacity: 0; transition: opacity var(--opf-ui-ease); }
.opf-source-code .cm-foldGutter .opf-fold-marker.is-folded,
.opf-source-code:hover .cm-foldGutter .opf-fold-marker,
.opf-source-code .cm-foldGutter .opf-fold-marker:hover { opacity: 1; }
.opf-source-code .cm-foldGutter .opf-fold-marker:hover { color: var(--opf-ui-fg); }
.opf-source-code .cm-foldPlaceholder { border: 0; background: var(--opf-ui-muted); color: var(--opf-ui-muted-fg); border-radius: var(--opf-ui-radius-sm); padding: 0 5px; margin: 0 2px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .opf-source-code .cm-foldGutter .opf-fold-marker { transition: none; } }
@media (forced-colors: active) { .opf-source-code .cm-foldGutter .opf-fold-marker { opacity: 1; } }

/* Outline panel (opt-in `outline` option) */
.opf-source-body { display: flex; flex: 1; min-height: 0; min-width: 0; }
.opf-source-body > .opf-source-code { flex: 1; min-width: 0; }
.opf-source-outline { flex: none; width: 220px; max-width: 40%; overflow: auto; border-right: 1px solid var(--opf-ui-code-border); padding: 4px 0; }
.opf-source-outline-list { margin: 0; padding: 0; list-style: none; }
.opf-source-outline-item { display: flex; align-items: baseline; gap: 6px; width: 100%; min-height: 26px; padding: 2px 8px; border: 0; background: transparent; color: var(--opf-ui-fg); text-align: left; font: inherit; cursor: pointer; }
.opf-source-outline-item:hover { background: var(--opf-ui-muted); }
.opf-source-outline-item:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: -2px; }
.opf-source-outline-item[aria-current="true"] { background: var(--opf-ui-muted); font-weight: 600; }
.opf-source-outline-item.is-section { color: var(--opf-ui-muted-fg); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.opf-source-outline-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opf-source-outline-detail { margin-left: auto; flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--opf-ui-muted-fg); }
.opf-source-outline-empty { padding: 8px 10px; color: var(--opf-ui-muted-fg); }
@media (forced-colors: active) { .opf-source-outline-item[aria-current="true"] { outline: 1px solid Highlight; } }

/* Forced colors (Windows high contrast): the selection of a list is an outline and a problem keeps its underline and a different shape per severity. */
@media (forced-colors: active) {
  .opf-source-code .cm-tooltip-autocomplete > ul > li[aria-selected],
  .cm-tooltip .opf-fix[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; forced-color-adjust: none; background: Canvas; color: CanvasText; }
  .opf-source-code .cm-lintRange-error { text-decoration: underline wavy CanvasText; }
  .opf-source-code .cm-lintRange-warning { text-decoration: underline dashed CanvasText; }
  .opf-source-code .cm-lintRange-info { text-decoration: underline dotted CanvasText; }
  .opf-source-finding { border: 1px solid CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-tooltip, .cm-tooltip * { animation: none !important; transition: none !important; }
}

/* thumbnails.css */
/* Thumbnail strip (RR-98). Uses only --opf-ui-* tokens. */
.opf-thumbs {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  font-family: var(--opf-ui-font);
  color: var(--opf-ui-fg);
  scrollbar-width: thin;
}
.opf-thumbs[data-orientation="horizontal"] {
  overflow-x: auto;
  overflow-y: hidden;
}
.opf-thumbs[data-orientation="vertical"] {
  overflow-x: hidden;
  overflow-y: auto;
}
.opf-thumbs-list {
  display: flex;
  gap: 12px;
  margin: 0;
  /* Room for the 2px ring and its 2px offset, which the scroll container would otherwise clip. */
  padding: 6px 6px 6px;
  list-style: none;
}
.opf-thumbs[data-orientation="horizontal"] .opf-thumbs-list {
  flex-direction: row;
  align-items: flex-start;
  width: max-content;
}
.opf-thumbs[data-orientation="vertical"] .opf-thumbs-list {
  flex-direction: column;
}
.opf-thumbs[data-density="touch"] .opf-thumbs-list {
  gap: 16px;
}
.opf-thumbs-slot {
  flex: none;
  width: var(--opf-thumbs-w);
}
.opf-thumbs-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  font-weight: 400;
  white-space: normal;
  border: 0;
  border-radius: var(--opf-ui-radius-sm);
  background: transparent;
  color: var(--opf-ui-muted-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color var(--opf-ui-ease);
}
.opf-thumbs-item:hover {
  color: var(--opf-ui-fg);
}
.opf-thumbs-item[aria-current="true"] {
  color: var(--opf-ui-accent-strong);
}
.opf-thumbs-item:focus-visible {
  outline: 2px solid var(--opf-ui-ring);
  outline-offset: 2px;
}
.opf-thumbs-frame {
  display: block;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  aspect-ratio: var(--opf-thumbs-ratio);
  border-radius: 3px;
  background: var(--opf-ui-muted-2);
  box-shadow: 0 0 0 1px var(--opf-ui-border);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color var(--opf-ui-ease);
  pointer-events: none;
}
.opf-thumbs-item[aria-current="true"] .opf-thumbs-frame {
  outline-color: var(--opf-ui-accent);
}
.opf-thumbs-frame > svg {
  display: block;
  width: 100%;
  height: auto;
}
.opf-thumbs-frame[data-state="error"] {
  display: grid;
  place-items: center;
  padding: 4px;
  font: 11.5px/1.3 var(--opf-ui-mono);
  text-align: center;
  color: var(--opf-ui-muted-fg);
}
.opf-thumbs-item[data-hidden="true"] .opf-thumbs-frame {
  opacity: 0.55;
}
.opf-thumbs-label {
  position: relative;
  display: flex;
  gap: 6px;
  width: 100%;
  min-width: 0;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}
.opf-thumbs-index {
  flex: none;
  font-family: var(--opf-ui-mono);
}
.opf-thumbs-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opf-thumbs-title[data-untitled="true"] {
  font-style: italic;
}
/* The "hidden" note is for assistive technology; the dimmed thumbnail shows it visually. */
.opf-thumbs-note {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.opf-thumbs[data-density="touch"] .opf-thumbs-item {
  min-height: 40px;
}
.opf-thumbs[data-density="touch"] .opf-thumbs-label {
  font-size: 12.5px;
}
@media (prefers-reduced-motion: reduce) {
  .opf-thumbs-item,
  .opf-thumbs-frame {
    transition: none;
  }
}

/* touch.css */
/*
 * Touch: a coarse pointer (a finger) gets a 44px hit area on every control, and the text in a field is 16px so iOS Safari does not
 * zoom the page when the field gets focus. tokens.css already raises --opf-ui-control-h to 44px under `(pointer: coarse)`, which lifts every
 * control that is sized by it; this file lifts the ones that size themselves (compact buttons, rows, menu items, completion items) and
 * keeps the visual look: the padding grows, the type does not. The code in an editor stays at its own size: it is not a field.
 * Tokens only, no color literals (test/styles.mjs).
 */
@media (pointer: coarse) {
  /* ---- fields: 16px, 44px ------------------------------------------------------------------------------------------------------ */
  :is(.opf-ui, .opf-source, .opf-json, .opf-code, .opf-shortcuts, .opf-quickpick, .opf-sym)
    :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"]), select, textarea):not(.opf-inline-input, .opf-rich-input) {
    font-size: 16px;
  }
  :is(.opf-ui, .opf-source, .opf-json, .opf-code, .opf-shortcuts, .opf-quickpick, .opf-sym)
    :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"]), select):not(.opf-inline-input, .opf-rich-input) {
    min-height: 44px;
  }
  /* WebKit sizes a native select by its text unless the height is set. */
  :is(.opf-ui, .opf-source, .opf-json, .opf-code) select {
    height: 44px;
  }
  .opf-ui input[type="file"] {
    min-height: 44px;
  }

  /* ---- the source pane ---------------------------------------------------------------------------------------------------------- */
  .opf-source,
  .opf-source[data-density="touch"] {
    --_h: 44px;
    --_bar: 52px;
  }
  .opf-source-name,
  .opf-source-format {
    min-height: var(--_h);
  }
  .opf-source-name {
    min-width: 44px;
  }
  .opf-source-finding {
    min-height: var(--_h);
  }
  .opf-source-finding-fix,
  .opf-source-finding-details {
    min-height: var(--_h);
    padding: 0 12px;
  }
  .opf-source-finding-fixes {
    gap: 6px;
  }
  .opf-source-outline-item {
    min-height: var(--_h);
  }
  .opf-source-finding-explain-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .opf-sym-close {
    min-width: 44px;
    min-height: 44px;
  }
  .opf-sym-ref {
    min-height: 44px;
    align-items: center;
  }
  .opf-shortcuts .opf-shortcuts-close {
    width: 44px;
    height: 44px;
  }
  .opf-shortcuts .opf-shortcuts-search,
  .opf-quickpick-input {
    min-height: 44px;
  }
  .opf-quickpick-item {
    min-height: 44px;
    align-items: center;
  }

  /* ---- CodeMirror's lists and panels (completions, problems, quick fixes, search) ---------------------------------------------- */
  :root :is(.opf-ui, .opf-source, .opf-json, .opf-code) .cm-tooltip.cm-tooltip-autocomplete > ul > li {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 2px 12px;
  }
  :root :is(.opf-ui, .opf-source, .opf-json, .opf-code) .cm-tooltip-autocomplete .cm-completionLabel {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cm-tooltip .opf-fix {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 3px 12px;
  }
  .cm-tooltip-lint .cm-diagnosticAction {
    min-height: 44px;
    padding: 0 14px;
  }
  :root .cm-panels .cm-panel.cm-search :is(input, button, label) {
    min-height: 44px;
  }
  :root .cm-panels .cm-panel.cm-search :is(input[type="text"], input:not([type])) {
    font-size: 16px;
  }
  /* The find and replace fields take a row of their own each, the buttons and options wrap beneath, the close button stays in the corner. */
  :root .cm-panels .cm-panel.cm-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 52px 6px 8px;
  }
  :root .cm-panels .cm-panel.cm-search br {
    display: none;
  }
  :root .cm-panels .cm-panel.cm-search input[type="text"],
  :root .cm-panels .cm-panel.cm-search input:not([type]) {
    flex: 1 1 100%;
    min-width: 0;
    margin: 0;
  }
  :root .cm-panels .cm-panel.cm-search button,
  :root .cm-panels .cm-panel.cm-search label {
    margin: 0;
  }
  :root .cm-panels .cm-panel.cm-search label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  :root .cm-panels .cm-panel.cm-search button {
    min-width: 44px;
  }
  :root .cm-panels .cm-panel.cm-search button[name="close"] {
    top: 0;
    right: 4px;
  }

  /* ---- menus, dialogs and the compact controls of the panels --------------------------------------------------------------------- */
  .opf-export .opf-export-close {
    width: 44px;
    height: 44px;
  }
  .opf-export[data-density="touch"] .opf-export-trigger,
  .opf-export[data-density="touch"] .opf-export-item,
  .opf-export .opf-export-item {
    min-height: 44px;
  }
  .opf-export .opf-export-status-action {
    height: 44px;
  }
  .opf-handoff[data-density="touch"] .opf-handoff-button,
  .opf-handoff .opf-handoff-button {
    height: 44px;
  }
  .opf-handoff[data-density="touch"] .opf-handoff-target,
  .opf-handoff .opf-handoff-target {
    height: 44px;
    padding: 0 14px;
  }
  .opf-handoff[data-density="touch"] .opf-handoff-x,
  .opf-handoff .opf-handoff-x {
    width: 44px;
    height: 44px;
  }
  .opf-nav[data-density="touch"] .opf-nav-button,
  .opf-nav .opf-nav-button {
    width: 44px;
    height: 44px;
  }
  .opf-thumbs[data-density="touch"] .opf-thumbs-item,
  .opf-thumbs .opf-thumbs-item {
    min-height: 44px;
  }
  :root .opf-review-fix {
    min-height: 44px;
    padding: 0 12px;
  }
  :root .opf-find button.opf-find-close,
  :root .opf-find button[aria-label="Previous match"],
  :root .opf-find button[aria-label="Next match"] {
    min-width: 44px;
  }
  .opf-dc-group > summary,
  .opf-template-insert-section summary {
    min-height: 44px;
    padding-block: calc((44px - 1lh) / 2);
  }
  .opf-dc-check {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
  }
  .opf-dc-check > input {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
  }
  .opf-dc-check > label {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
  }
}