/* OpenPress workspace/control UI design system.
   Scope: editor workspace, viewer chrome, and portal overlays only.
   Output runtime/page/slide/document styling stays in page-contract, slide theme, or print CSS. */

@layer base {
  /* workspace foundation */
  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) {
    --op-workspace-bg: #141414;
    --op-workspace-main-bg: #141414;
    --op-workspace-panel-bg: #171717;
    --op-workspace-surface: rgb(18 18 18 / 96%);
    --op-workspace-surface-muted: rgb(255 255 255 / 4%);
    --op-workspace-surface-hover: rgb(255 255 255 / 7%);
    --op-workspace-surface-raised: rgb(46 47 46 / 96%);
    --op-workspace-surface-dialog: rgb(18 18 18);
    --op-workspace-gallery-bg: linear-gradient(180deg, #171813, #10110f 42rem), #10110f;
    --op-workspace-card-surface: #f7f5ee;
    --op-workspace-card-text: #141411;
    --op-workspace-card-text-muted: #65635d;
    --op-workspace-card-border: rgb(255 255 255 / 8%);
    --op-workspace-card-hover-border: rgb(255 255 255 / 30%);
    --op-workspace-card-hover-shadow: var(--op-workspace-shadow-floating);
    --op-workspace-press-preview-bg: #f8f8f5;
    --op-workspace-press-preview-grid: rgb(20 20 17 / 5%);
    --op-workspace-press-preview-outline: transparent;
    --op-workspace-press-preview-shadow: 0 18px 36px rgb(20 20 17 / 18%), 0 0 0 1px rgb(20 20 17 / 8%);
    --op-workspace-page-outline: transparent;
    --op-workspace-page-shadow: 0 16px 48px rgb(0 0 0 / 24%);
    --op-workspace-progress-track: rgb(255 255 255 / 7%);
    --op-workspace-progress-bar: rgb(242 242 240 / 46%);
    --op-workspace-border: rgb(255 255 255 / 12%);
    --op-workspace-border-muted: rgb(255 255 255 / 8%);
    --op-workspace-border-strong: rgb(242 242 240 / 16%);
    --op-workspace-text: rgb(242 242 238 / 94%);
    --op-workspace-text-muted: rgb(160 166 173 / 70%);
    --op-workspace-text-soft: rgb(226 229 230 / 86%);
    --op-workspace-text-inverse: rgb(255 255 255 / 92%);
    --op-workspace-tab-active-bg: #000000;
    --op-workspace-accent: rgb(240 182 76 / 92%);
    --op-workspace-accent-hover: rgb(240 182 76 / 96%);
    --op-workspace-accent-surface: rgb(240 182 76 / 8%);
    --op-workspace-accent-border: rgb(240 182 76 / 34%);
    --op-workspace-success: rgb(110 231 160 / 90%);
    --op-workspace-warning: rgb(240 182 76 / 92%);
    --op-workspace-danger: rgb(248 113 113 / 90%);
    --op-workspace-danger-surface: rgb(248 113 113 / 10%);
    --op-workspace-danger-border: rgb(248 113 113 / 34%);
    --op-workspace-radius-sm: 4px;
    --op-workspace-radius-md: 6px;
    --op-workspace-radius-lg: 8px;
    --op-workspace-radius-xl: 12px;
    --op-workspace-radius-pill: 999px;
    --op-workspace-shadow-popover: 0 18px 42px rgb(0 0 0 / 34%);
    --op-workspace-shadow-dialog: 0 24px 68px rgb(0 0 0 / 42%);
    --op-workspace-shadow-floating: 0 18px 44px rgb(0 0 0 / 28%);
    --op-workspace-duration-fast: 140ms;
    --op-workspace-duration-base: 180ms;
    --op-workspace-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
    --op-workspace-font-ui: "Nunito Sans Variable", "Noto Sans TC", "PingFang TC", ui-sans-serif, system-ui, sans-serif;
    --op-workspace-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --op-workspace-text-xs: 10px;
    --op-workspace-text-sm: 11px;
    --op-workspace-text-md: 12px;
    --op-workspace-text-lg: 15px;
    --op-workspace-leading-tight: 1.1;
    --op-workspace-leading-normal: 1.45;
    --background: var(--op-workspace-bg);
    --foreground: var(--op-workspace-text);
    --card: var(--op-workspace-surface);
    --card-foreground: var(--op-workspace-text);
    --popover: var(--op-workspace-surface-raised);
    --popover-foreground: var(--op-workspace-text);
    --primary: var(--op-workspace-accent);
    --primary-foreground: var(--op-workspace-text-inverse);
    --secondary: var(--op-workspace-surface-muted);
    --secondary-foreground: var(--op-workspace-text);
    --muted: var(--op-workspace-surface-muted);
    --muted-foreground: var(--op-workspace-text-muted);
    --accent: var(--op-workspace-surface-hover);
    --accent-foreground: var(--op-workspace-text);
    --destructive: var(--op-workspace-danger);
    --border: var(--op-workspace-border);
    --input: var(--op-workspace-border-muted);
    --ring: var(--op-workspace-accent-border);
    --radius: var(--op-workspace-radius-md);
  }

  :where(.op-workspace[data-openpress-workspace-color-mode="light"]),
  :root[data-openpress-workspace-color-mode="light"] :where(.op-workspace-overlay, .op-workspace-chrome) {
    --op-workspace-bg: #f0f1ef;
    --op-workspace-main-bg: #e4e6e2;
    --op-workspace-panel-bg: rgb(250 250 248 / 98%);
    --op-workspace-surface: rgb(255 255 253 / 96%);
    --op-workspace-surface-muted: rgb(20 24 28 / 4%);
    --op-workspace-surface-hover: rgb(20 24 28 / 7%);
    --op-workspace-surface-raised: rgb(255 255 253 / 98%);
    --op-workspace-surface-dialog: rgb(255 255 253);
    --op-workspace-gallery-bg: linear-gradient(180deg, #f7f7f4, #f0f1ef 42rem), #f0f1ef;
    --op-workspace-card-surface: rgb(255 255 253 / 98%);
    --op-workspace-card-text: rgb(22 24 27 / 94%);
    --op-workspace-card-text-muted: rgb(76 84 94 / 68%);
    --op-workspace-card-border: rgb(20 24 28 / 10%);
    --op-workspace-card-hover-border: rgb(20 24 28 / 18%);
    --op-workspace-card-hover-shadow: none;
    --op-workspace-press-preview-bg: #f7f7f4;
    --op-workspace-press-preview-grid: rgb(20 24 28 / 5%);
    --op-workspace-press-preview-outline: rgb(20 24 28 / 14%);
    --op-workspace-press-preview-shadow: none;
    --op-workspace-page-outline: rgb(20 24 28 / 12%);
    --op-workspace-page-shadow: none;
    --op-workspace-progress-track: rgb(20 24 28 / 8%);
    --op-workspace-progress-bar: rgb(22 24 27 / 42%);
    --op-workspace-border: rgb(20 24 28 / 12%);
    --op-workspace-border-muted: rgb(20 24 28 / 8%);
    --op-workspace-border-strong: rgb(20 24 28 / 18%);
    --op-workspace-text: rgb(22 24 27 / 94%);
    --op-workspace-text-muted: rgb(76 84 94 / 68%);
    --op-workspace-text-soft: rgb(38 43 48 / 84%);
    --op-workspace-text-inverse: rgb(255 255 255 / 94%);
    --op-workspace-tab-active-bg: #ffffff;
    --op-workspace-accent: rgb(176 113 18 / 94%);
    --op-workspace-accent-hover: rgb(147 93 14 / 96%);
    --op-workspace-accent-surface: rgb(176 113 18 / 10%);
    --op-workspace-accent-border: rgb(176 113 18 / 34%);
    --op-workspace-success: rgb(25 136 81 / 92%);
    --op-workspace-warning: rgb(176 113 18 / 94%);
    --op-workspace-danger: rgb(198 44 44 / 92%);
    --op-workspace-danger-surface: rgb(198 44 44 / 10%);
    --op-workspace-danger-border: rgb(198 44 44 / 32%);
    --op-workspace-shadow-popover: 0 18px 42px rgb(24 28 33 / 14%);
    --op-workspace-shadow-dialog: 0 24px 68px rgb(24 28 33 / 18%);
    --op-workspace-shadow-floating: 0 18px 44px rgb(24 28 33 / 12%);
  }

  :where(.op-workspace[data-openpress-workspace-accent="blue"]),
  :root[data-openpress-workspace-accent="blue"] :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) {
    --op-workspace-accent: rgb(96 165 250 / 94%);
    --op-workspace-accent-hover: rgb(125 180 252 / 96%);
    --op-workspace-accent-surface: rgb(96 165 250 / 8%);
    --op-workspace-accent-border: rgb(96 165 250 / 34%);
  }

  :where(.op-workspace[data-openpress-workspace-accent="emerald"]),
  :root[data-openpress-workspace-accent="emerald"] :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) {
    --op-workspace-accent: rgb(52 211 153 / 94%);
    --op-workspace-accent-hover: rgb(82 220 168 / 96%);
    --op-workspace-accent-surface: rgb(52 211 153 / 8%);
    --op-workspace-accent-border: rgb(52 211 153 / 34%);
  }

  :where(.op-workspace[data-openpress-workspace-accent="violet"]),
  :root[data-openpress-workspace-accent="violet"] :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) {
    --op-workspace-accent: rgb(167 139 250 / 94%);
    --op-workspace-accent-hover: rgb(184 162 252 / 96%);
    --op-workspace-accent-surface: rgb(167 139 250 / 8%);
    --op-workspace-accent-border: rgb(167 139 250 / 34%);
  }

  :where(.op-workspace[data-openpress-workspace-accent="rose"]),
  :root[data-openpress-workspace-accent="rose"] :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) {
    --op-workspace-accent: rgb(251 113 133 / 94%);
    --op-workspace-accent-hover: rgb(252 139 156 / 96%);
    --op-workspace-accent-surface: rgb(251 113 133 / 8%);
    --op-workspace-accent-border: rgb(251 113 133 / 34%);
  }

  :where(.op-workspace[data-openpress-workspace-color-mode="light"][data-openpress-workspace-accent="blue"]),
  :root[data-openpress-workspace-color-mode="light"][data-openpress-workspace-accent="blue"] :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) {
    --op-workspace-accent: rgb(37 99 235 / 94%);
    --op-workspace-accent-hover: rgb(29 78 216 / 96%);
    --op-workspace-accent-surface: rgb(37 99 235 / 10%);
    --op-workspace-accent-border: rgb(37 99 235 / 34%);
  }

  :where(.op-workspace[data-openpress-workspace-color-mode="light"][data-openpress-workspace-accent="emerald"]),
  :root[data-openpress-workspace-color-mode="light"][data-openpress-workspace-accent="emerald"] :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) {
    --op-workspace-accent: rgb(5 150 105 / 94%);
    --op-workspace-accent-hover: rgb(4 120 87 / 96%);
    --op-workspace-accent-surface: rgb(5 150 105 / 10%);
    --op-workspace-accent-border: rgb(5 150 105 / 34%);
  }

  :where(.op-workspace[data-openpress-workspace-color-mode="light"][data-openpress-workspace-accent="violet"]),
  :root[data-openpress-workspace-color-mode="light"][data-openpress-workspace-accent="violet"] :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) {
    --op-workspace-accent: rgb(124 58 237 / 94%);
    --op-workspace-accent-hover: rgb(109 40 217 / 96%);
    --op-workspace-accent-surface: rgb(124 58 237 / 10%);
    --op-workspace-accent-border: rgb(124 58 237 / 34%);
  }

  :where(.op-workspace[data-openpress-workspace-color-mode="light"][data-openpress-workspace-accent="rose"]),
  :root[data-openpress-workspace-color-mode="light"][data-openpress-workspace-accent="rose"] :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) {
    --op-workspace-accent: rgb(225 29 72 / 94%);
    --op-workspace-accent-hover: rgb(190 18 60 / 96%);
    --op-workspace-accent-surface: rgb(225 29 72 / 10%);
    --op-workspace-accent-border: rgb(225 29 72 / 34%);
  }
}

@layer components {
  /* workspace layout */
  .op-workspace,
  .op-workspace-overlay,
  .op-workspace-chrome {
    color-scheme: dark;
    color: var(--op-workspace-text);
    font-family: var(--op-workspace-font-ui);
  }

  :where(.op-workspace[data-openpress-workspace-color-mode="light"]),
  :root[data-openpress-workspace-color-mode="light"] :where(.op-workspace-overlay, .op-workspace-chrome) {
    color-scheme: light;
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome):not(.op-output-runtime),
  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome)
    :where(*, *::before, *::after):not(.op-output-runtime):not(.op-output-runtime *) {
    border-color: var(--border);
    outline-color: var(--ring);
  }

  .op-workspace-shell {
    background: var(--op-workspace-bg);
    color: var(--op-workspace-text);
    font-family: var(--op-workspace-font-ui);
  }

  .op-workspace-sidebar,
  .op-workspace-inspector,
  .op-workspace-panel {
    background: var(--op-workspace-surface);
    color: var(--op-workspace-text);
  }

  .op-workspace-topbar,
  .op-workspace-toolbar {
    background: var(--op-workspace-surface);
    border-color: var(--op-workspace-border-muted);
    color: var(--op-workspace-text-soft);
  }

  .op-workspace-main,
  .op-workspace-canvas {
    background: var(--op-workspace-main-bg);
  }

  :where(.op-workspace[data-openpress-workspace-color-mode="light"]) .op-workspace-main :where(.reader-page):not(.measurement) {
    box-shadow: none;
  }

  .op-workspace .op-canvas-frame {
    --op-canvas-chrome-bg: var(--op-workspace-main-bg);
    --op-canvas-chrome-border: var(--op-workspace-border-muted);
  }

  /* workspace UI components */
  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(
    .op-ui-button,
    .op-ui-icon-button,
    .op-ui-menu-item
  ):not(.op-output-runtime *) {
    font-family: var(--op-workspace-font-ui);
    transition-duration: var(--op-workspace-duration-fast);
    transition-timing-function: var(--op-workspace-ease-standard);
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-button):not(.op-output-runtime *) {
    display: inline-flex;
    min-height: 2rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid var(--op-workspace-border);
    border-radius: var(--op-workspace-radius-sm);
    background: transparent;
    padding: 0 0.75rem;
    color: var(--op-workspace-text-soft);
    font-size: var(--op-workspace-text-sm);
    font-weight: 650;
    line-height: var(--op-workspace-leading-tight);
    transition-property: background, border-color, color, opacity, transform;
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-button:hover, .op-ui-button[data-state="open"]):not(.op-output-runtime *) {
    border-color: var(--op-workspace-accent-border);
    color: var(--op-workspace-accent);
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-button:focus-visible):not(.op-output-runtime *) {
    outline: 2px solid var(--op-workspace-accent-border);
    outline-offset: 2px;
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-button:disabled):not(.op-output-runtime *) {
    cursor: not-allowed;
    opacity: 0.45;
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-button[data-state="active"], .op-ui-button[data-state="selected"]):not(.op-output-runtime *) {
    border-color: var(--op-workspace-accent-border);
    background: var(--op-workspace-accent-surface);
    color: var(--op-workspace-accent);
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-button-primary):not(.op-output-runtime *) {
    border-color: var(--op-workspace-accent-border);
    background: var(--op-workspace-accent);
    color: var(--op-workspace-text-inverse);
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-button-primary:hover, .op-ui-button-primary[data-state="active"], .op-ui-button-primary[data-state="selected"], .op-ui-button-primary[data-state="open"]):not(.op-output-runtime *) {
    background: var(--op-workspace-accent-hover);
    color: var(--op-workspace-text-inverse);
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-button-danger):not(.op-output-runtime *) {
    border-color: var(--op-workspace-danger-border);
    background: var(--op-workspace-danger-surface);
    color: color-mix(in srgb, var(--op-workspace-danger) 58%, white);
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-button-danger:hover, .op-ui-button-danger[data-state="active"], .op-ui-button-danger[data-state="selected"], .op-ui-button-danger[data-state="open"]):not(.op-output-runtime *) {
    border-color: var(--op-workspace-danger);
    color: color-mix(in srgb, var(--op-workspace-danger) 24%, white);
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-icon-button):not(.op-output-runtime *) {
    display: inline-flex;
    width: 1.875rem;
    height: 1.875rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--op-workspace-radius-sm);
    background: transparent;
    color: var(--op-workspace-text-muted);
    padding: 0;
    transition-property: background, border-color, color, opacity, transform;
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-icon-button:hover, .op-ui-icon-button[data-state="active"], .op-ui-icon-button[data-state="selected"], .op-ui-icon-button[data-state="open"]):not(.op-output-runtime *) {
    background: var(--op-workspace-surface-hover);
    color: var(--op-workspace-text);
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-icon-button:focus-visible):not(.op-output-runtime *) {
    outline: 2px solid var(--op-workspace-accent-border);
    outline-offset: 2px;
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-icon-button:disabled):not(.op-output-runtime *) {
    cursor: not-allowed;
    opacity: 0.45;
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-divider):not(.op-output-runtime *) {
    height: 1px;
    background: var(--op-workspace-border-muted);
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-dialog, .op-ui-menu):not(.op-output-runtime *) {
    border: 1px solid var(--op-workspace-border);
    border-radius: var(--op-workspace-radius-md);
    background: var(--op-workspace-surface-raised);
    color: var(--op-workspace-text);
    box-shadow: var(--op-workspace-shadow-popover);
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-dialog):not(.op-output-runtime *) {
    box-shadow: var(--op-workspace-shadow-dialog);
  }

  :where(.op-workspace-theme-dialog) {
    width: min(920px, calc(100vw - 64px)) !important;
    max-width: min(920px, calc(100vw - 64px)) !important;
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-popover[data-state="open"], .op-ui-menu[data-state="open"], .op-ui-dialog[data-state="open"]):not(.op-output-runtime *) {
    border-color: var(--op-workspace-border-strong);
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-menu:hover, .op-ui-dialog:hover):not(.op-output-runtime *) {
    border-color: var(--op-workspace-border-strong);
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-menu:focus-visible, .op-ui-dialog:focus-visible):not(.op-output-runtime *) {
    outline: 2px solid var(--op-workspace-accent-border);
    outline-offset: 2px;
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-menu[disabled], .op-ui-dialog[disabled]):not(.op-output-runtime *) {
    opacity: 0.45;
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-menu[data-state="active"], .op-ui-menu[data-state="selected"], .op-ui-dialog[data-state="active"], .op-ui-dialog[data-state="selected"]):not(.op-output-runtime *) {
    border-color: var(--op-workspace-accent-border);
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-menu-item):not(.op-output-runtime *) {
    display: flex;
    min-height: 1.875rem;
    cursor: pointer;
    align-items: center;
    gap: 0.55rem;
    border-radius: var(--op-workspace-radius-sm);
    color: var(--op-workspace-text-soft);
    font-size: var(--op-workspace-text-md);
    line-height: var(--op-workspace-leading-tight);
    padding: 0 0.625rem;
    transition-property: background, color, opacity;
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-menu-item:hover, .op-ui-menu-item[data-state="active"], .op-ui-menu-item[data-state="selected"], .op-ui-menu-item[data-state="open"]):not(.op-output-runtime *) {
    background: var(--op-workspace-surface-hover);
    color: var(--op-workspace-text);
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-menu-item:focus-visible):not(.op-output-runtime *) {
    outline: 2px solid var(--op-workspace-accent-border);
    outline-offset: 2px;
  }

  :where(.op-workspace, .op-workspace-overlay, .op-workspace-chrome) :where(.op-ui-menu-item:disabled, .op-ui-menu-item[disabled]):not(.op-output-runtime *) {
    cursor: not-allowed;
    opacity: 0.45;
  }

  .op-workspace :where(.reader-bookmarks .bookmark-group),
  .op-workspace-chrome :where(.reader-bookmarks .bookmark-group) {
    position: relative;
  }

  .op-workspace :where(.reader-bookmarks .bookmark-group)::before,
  .op-workspace-chrome :where(.reader-bookmarks .bookmark-group)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
    width: 1px;
    border-radius: var(--op-workspace-radius-pill);
    background: var(--op-workspace-border-strong);
    opacity: 0.42;
    pointer-events: none;
  }

  .op-workspace :where(.reader-bookmarks .bookmark-group[data-openpress-bookmark-state="active"])::before,
  .op-workspace-chrome :where(.reader-bookmarks .bookmark-group[data-openpress-bookmark-state="active"])::before {
    background: color-mix(in srgb, var(--op-workspace-accent) 46%, var(--op-workspace-border-strong));
    opacity: 0.72;
  }

  .op-workspace :where(.reader-bookmarks .bookmark-group[data-openpress-bookmark-state="future"])::before,
  .op-workspace-chrome :where(.reader-bookmarks .bookmark-group[data-openpress-bookmark-state="future"])::before {
    opacity: 0.18;
  }

  .op-workspace :where(.reader-bookmarks .bookmark-item),
  .op-workspace-chrome :where(.reader-bookmarks .bookmark-item) {
    position: relative;
    border-radius: var(--op-workspace-radius-sm);
    background: transparent;
    transition:
      background var(--op-workspace-duration-fast) var(--op-workspace-ease-standard),
      color var(--op-workspace-duration-fast) var(--op-workspace-ease-standard);
  }

  .op-workspace :where(.reader-bookmarks .bookmark-item)::before,
  .op-workspace-chrome :where(.reader-bookmarks .bookmark-item)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
    width: 2px;
    border-radius: var(--op-workspace-radius-pill);
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition:
      background var(--op-workspace-duration-fast) var(--op-workspace-ease-standard),
      opacity var(--op-workspace-duration-fast) var(--op-workspace-ease-standard);
  }

  .op-workspace :where(.reader-bookmarks .bookmark-subs),
  .op-workspace-chrome :where(.reader-bookmarks .bookmark-subs) {
    max-height: 0;
    overflow: hidden;
    padding-bottom: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.375rem);
  }

  .op-workspace :where(.reader-bookmarks .bookmark-subs.is-open),
  .op-workspace-chrome :where(.reader-bookmarks .bookmark-subs.is-open) {
    max-height: none;
    overflow: visible;
    padding-bottom: 0.5rem;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .op-workspace :where(.reader-bookmarks .bookmark-item[data-openpress-bookmark-state="read"])::before,
  .op-workspace-chrome :where(.reader-bookmarks .bookmark-item[data-openpress-bookmark-state="read"])::before {
    background: var(--op-workspace-border-strong);
    opacity: 0.62;
  }

  .op-workspace :where(.reader-bookmarks .bookmark-item.is-active),
  .op-workspace-chrome :where(.reader-bookmarks .bookmark-item.is-active) {
    color: var(--op-workspace-text);
  }

  .op-workspace :where(.reader-bookmarks .bookmark-item.is-active)::before,
  .op-workspace-chrome :where(.reader-bookmarks .bookmark-item.is-active)::before {
    background: var(--op-workspace-accent);
    opacity: 0.96;
  }

  .op-workspace :where(.reader-bookmarks .bookmark-item.is-active .bookmark-index),
  .op-workspace-chrome :where(.reader-bookmarks .bookmark-item.is-active .bookmark-index) {
    color: var(--op-workspace-accent) !important;
  }

  .op-workspace :where(.reader-bookmarks .bookmark-item[data-openpress-bookmark-state="future"]),
  .op-workspace-chrome :where(.reader-bookmarks .bookmark-item[data-openpress-bookmark-state="future"]) {
    color: color-mix(in srgb, var(--op-workspace-text-muted) 52%, transparent);
  }

  .op-workspace :where(.reader-bookmarks .bookmark-item[data-openpress-bookmark-state="future"])::before,
  .op-workspace-chrome :where(.reader-bookmarks .bookmark-item[data-openpress-bookmark-state="future"])::before {
    background: var(--op-workspace-border-strong);
    opacity: 0.2;
  }

  .op-workspace :where(.reader-bookmarks .bookmark-item[data-openpress-bookmark-state="future"] .bookmark-index),
  .op-workspace-chrome :where(.reader-bookmarks .bookmark-item[data-openpress-bookmark-state="future"] .bookmark-index) {
    color: color-mix(in srgb, var(--op-workspace-text-muted) 48%, transparent) !important;
  }

  .op-workspace :where(.reader-bookmarks .bookmark-item[data-openpress-bookmark-current="true"]),
  .op-workspace-chrome :where(.reader-bookmarks .bookmark-item[data-openpress-bookmark-current="true"]) {
    background: transparent;
    color: var(--op-workspace-accent) !important;
  }

  /* workspace chrome */
  .op-workspace-chrome {
    background: var(--op-workspace-bg);
    color: var(--op-workspace-text);
    font-family: var(--op-workspace-font-ui);
  }

  /* ─── Inline edit: block-level save animation ─────────────────────────────
     [data-openpress-inline-save="saving"] — renders while the source-edit POST
     and document refresh are in flight: a subtle amber shimmer on the page.
     [data-openpress-inline-save="saved"]  — plays once when the new page HTML
     has been patched in: a green flash to confirm the re-render landed.

     Scoped under .openpress-reader-app so the animation only fires in the
     workspace / reader context, not in nav-panel elements that also carry
     data-openpress-page-index.                                                */

  .openpress-reader-app [data-openpress-page-index][data-openpress-inline-save] {
    position: relative;
  }

  /* saving: amber pulse outline around the whole page while saving is in flight */
  .openpress-reader-app [data-openpress-page-index][data-openpress-inline-save="saving"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    border: 1.5px solid rgb(240 182 76 / 55%);
    background: rgb(240 182 76 / 3%);
    pointer-events: none;
    animation: op-inline-save-shimmer 900ms ease-in-out infinite;
    z-index: 10;
  }

  /* saved: green flash sweeps over the page confirming re-render completed */
  .openpress-reader-app [data-openpress-page-index][data-openpress-inline-save="saved"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    border: 1.5px solid rgb(110 231 160 / 70%);
    background: rgb(110 231 160 / 7%);
    pointer-events: none;
    animation: op-inline-save-flash 650ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    z-index: 10;
  }
}

/* Keyframes are declared outside @layer so they are unconditionally accessible
   from any layer (browsers do not always resolve @keyframes declared inside a
   named layer when referenced from a different context). */
@keyframes op-inline-save-shimmer {
  0%   { opacity: 0.9; }
  50%  { opacity: 0.45; }
  100% { opacity: 0.9; }
}

@keyframes op-inline-save-flash {
  0%   { opacity: 1; }
  55%  { opacity: 0.5; }
  100% { opacity: 0; }
}

.openpress-search-panel {
  background: var(--op-workspace-panel-bg);
  color: var(--op-workspace-text);
  isolation: isolate;
  opacity: 1;
}