@layer surfaces {
  /* Shell: docked sidebar geometry, side placement, and open/closed transforms. */
  .sidebar {
    --sidebar-active-action-target: var(--sidebar-action-target);
    --sidebar-card-bg: var(--panel-card-bg);
    --sidebar-card-border: var(--panel-card-border);
    --sidebar-card-border-hover: var(--panel-card-border-hover);
    --sidebar-card-gap: var(--space-cluster);
    --sidebar-card-padding: var(--space-cluster);
    --sidebar-card-radius: var(--shape-card);
    --sidebar-card-title-weight: 650;
    --sidebar-row-bg: var(--panel-row-bg);
    --sidebar-row-bg-hover: var(--panel-row-bg-hover);
    --sidebar-row-bg-active: var(--accent-surface);
    --sidebar-row-border: var(--panel-row-border);
    --sidebar-row-border-hover: var(--panel-row-border-hover);
    --sidebar-row-gap: var(--space-related);
    --sidebar-row-padding: var(--space-related);
    --sidebar-row-radius: var(--shape-control);
    --sidebar-close-button-size: 32px;
    --sidebar-close-button-hover-size: 30px;
    --sidebar-control-block-size: 36px;
    --sidebar-control-gap: var(--space-related);
    --sidebar-control-label-text: color-mix(in srgb, var(--text) 70%, var(--text-muted));
    --sidebar-control-muted-text: color-mix(in srgb, var(--text) 58%, var(--text-muted));
    --sidebar-control-radius: var(--shape-control);
    --sidebar-control-surface: var(--panel-control-surface);
    --sidebar-control-surface-hover: var(--panel-control-surface-hover);
    --sidebar-control-surface-active: var(--accent-surface);
    --sidebar-control-border: var(--panel-control-border);
    --sidebar-control-border-hover: var(--panel-control-border-hover);
    --sidebar-control-text: color-mix(in srgb, var(--text) 78%, var(--text-muted));
    --sidebar-button-bg: var(--sidebar-control-surface);
    --sidebar-button-bg-hover: var(--sidebar-control-surface-hover);
    --sidebar-button-bg-active: var(--sidebar-control-surface-active);
    --sidebar-button-border: var(--sidebar-control-border);
    --sidebar-button-border-hover: var(--sidebar-control-border-hover);
    --sidebar-button-radius: var(--shape-control);
    --sidebar-primary-button-bg: var(--accent-surface);
    --sidebar-primary-button-bg-hover: var(--accent-surface-hover);
    --sidebar-primary-button-bg-active: var(--accent-surface-active);
    --sidebar-primary-button-border: var(--accent-border-strong);
    --sidebar-primary-button-text: var(--text);
    --sidebar-field-stack-gap: var(--space-cluster);
    --sidebar-group-border: var(--surface-sidebar-shell-border);
    --sidebar-group-border-hover: var(--accent-border);
    --sidebar-panel-bg: var(--surface-sidebar-shell);
    --sidebar-panel-shadow: var(--surface-sidebar-shell-shadow);
    --sidebar-panel-body-gap: 12px;
    --sidebar-panel-body-padding: 14px;
    --sidebar-panel-header-border: 0;
    --sidebar-panel-header-padding-inline: 16px 14px;
    --sidebar-panel-secondary-bg: transparent;
    --sidebar-panel-section-gap: var(--sidebar-panel-body-gap);
    --sidebar-panel-stack-gap: var(--sidebar-panel-body-gap);
    --sidebar-segmented-block-size: 34px;
    --sidebar-selected-border: var(--accent-border-strong);
    --sidebar-selected-surface: var(--accent-surface);
    --sidebar-selected-text: var(--text);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--sidebar-panel-bg);
    block-size: calc(var(--app-shell-block-size) - var(--app-safe-top) - var(--app-safe-bottom));
    border: 0;
    border-inline-start: 1px solid var(--sidebar-group-border);
    border-radius: 0;
    box-shadow: none;
    container: sidebar / inline-size;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    inline-size: var(--sidebar-floating-inline);
    inset-block-start: var(--app-safe-top);
    max-block-size: calc(var(--app-shell-block-size) - var(--app-safe-top) - var(--app-safe-bottom));
    max-inline-size: calc(100vw - var(--app-safe-left) - var(--app-safe-right) - (2 * var(--sidebar-floating-gap)));
    opacity: 1;
    order: 0;
    overflow: hidden;
    position: fixed;
    transform: translateX(0);
    transform-origin: var(--sidebar-motion-origin, right center);
    transition: transform var(--motion-duration-panel-sheet) var(--motion-ease-emphasized), opacity var(--motion-duration-surface) var(--motion-ease-standard);
    z-index: calc(var(--z-topbar) - 1);
  }

  [data-sidebar-side="right"] .sidebar {
    --sidebar-motion-origin: right center;
    inset-inline-end: var(--app-safe-right);
  }

  [data-sidebar-side="left"] .sidebar {
    --sidebar-motion-origin: left center;
    border-inline-start: 0;
    border-inline-end: 1px solid var(--sidebar-group-border);
    inset-inline-start: var(--app-safe-left);
  }

  .sidebar[data-sidebar-open="true"] {
    pointer-events: auto;
  }

  .sidebar-sheet-drag-handle { display: none; }

  [data-sidebar-side="right"] .sidebar[data-sidebar-open="false"] {
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
  }

  [data-sidebar-side="left"] .sidebar[data-sidebar-open="false"] {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
  }
  /* Native control baseline: keep controls inherited and predictable. */
  .sidebar :where(button, input, select, textarea) { font: inherit; }
  .sidebar :where(button) { align-items: center; display: inline-flex; gap: var(--space-related); justify-content: center; min-block-size: var(--control-height); padding-inline: var(--space-related); }
  .sidebar :where(a.sidebar-primary-cta-button, a.sidebar-secondary-button) { align-items: center; display: inline-flex; font: inherit; gap: var(--space-related); justify-content: center; padding-inline: var(--space-related); text-align: center; text-decoration: none; }
  .sidebar :where(button svg, a svg) { block-size: 16px; flex: 0 0 auto; inline-size: 16px; }

  /* Panel frame: one visible panel, internal scrolling, fixed header/footer. */
  .sidebar-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: transparent;
    block-size: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: none;
    flex: 1 1 auto;
    flex-direction: column;
    max-block-size: 100%;
    min-block-size: 0;
    overflow: hidden;
  }
  .sidebar[data-panel="files"] #sidebar-panel-files,
  .sidebar[data-panel="document-tools"] #sidebar-panel-document-tools,
  .sidebar[data-panel="shelf"] #sidebar-panel-shelf,
  .sidebar[data-panel="appearance"] #sidebar-panel-appearance,
  .sidebar[data-panel="support"] #sidebar-panel-support { display: flex; }

  .sidebar-panel-header {
    align-items: center;
    background: var(--sidebar-panel-secondary-bg);
    border-block-end: var(--sidebar-panel-header-border, 1px solid color-mix(in srgb, var(--border) 58%, transparent));
    display: flex;
    flex: 0 0 auto;
    gap: var(--space-related);
    justify-content: space-between;
    min-block-size: calc(var(--topbar-h) - var(--app-safe-top));
    padding-inline: var(--sidebar-panel-header-padding-inline, var(--space-section));
  }
  .sidebar-panel-title { font-size: var(--ui-font-size); font-weight: var(--ui-font-weight-strong); letter-spacing: -0.012em; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-panel-body {
    align-content: start;
    background: var(--sidebar-panel-secondary-bg);
    block-size: auto;
    display: grid;
    flex: 1 1 0;
    gap: var(--sidebar-panel-body-gap, var(--space-section));
    grid-auto-rows: max-content;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sidebar-panel-body-padding, var(--space-section));
    scroll-padding-block: var(--surface-focus-scroll-padding);
  }


  /* Shared layout primitives: stack, grid, form, footer, and list shapes. */
  .sidebar :where(.sidebar-card-stack) { display: grid; gap: var(--sidebar-panel-stack-gap, 10px); }
  .sidebar :where(.sidebar-button-grid) { display: grid; gap: var(--space-related); grid-template-columns: repeat(2, minmax(0, 1fr)); min-inline-size: 0; }
  .sidebar :where(.sidebar-form-row) { align-items: end; display: grid; gap: var(--space-related); grid-template-columns: minmax(0, 1fr) auto; }
  .sidebar :where(.sidebar-list-item) { background: var(--sidebar-row-bg); border: 1px solid var(--sidebar-row-border); border-radius: var(--sidebar-row-radius); color: var(--text); display: grid; gap: var(--sidebar-row-gap); max-inline-size: 100%; min-inline-size: 0; overflow: hidden; padding: var(--sidebar-row-padding); text-align: start; transition: background-color var(--motion-duration-micro) var(--motion-ease-standard), border-color var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-micro) var(--motion-ease-standard); }
  .sidebar :where(.sidebar-list-item:hover, .sidebar-list-item:focus-visible) { background: var(--sidebar-row-bg-hover); border-color: var(--sidebar-row-border-hover); }
  .sidebar :where(.sidebar-list-item[aria-current="page"], .sidebar-list-item[aria-current="true"], .sidebar-list-item.is-active) { background: var(--sidebar-row-bg-active); border-color: var(--sidebar-row-border-hover); color: var(--sidebar-selected-text); }
  /* Shared card primitives: reusable generated and static sidebar surfaces. */
  .sidebar :where(.sidebar-card) {
    background: var(--sidebar-card-bg);
    border: 1px solid var(--sidebar-card-border);
    border-radius: var(--sidebar-card-radius);
    box-shadow: none;
    color: var(--text);
    inline-size: 100%;
    min-inline-size: 0;
    transition: background-color var(--motion-duration-micro) var(--motion-ease-standard), border-color var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-micro) var(--motion-ease-standard);
  }
  .sidebar :where(.sidebar-card:hover) { border-color: var(--sidebar-card-border-hover); }
  .sidebar :where(.sidebar-card-grid) { display: grid; gap: var(--sidebar-card-gap); padding: var(--sidebar-card-padding); }
  .sidebar :where(.sidebar-card-grid > .sidebar-control) {
    padding-block: var(--space-tight);
  }
  .sidebar :where(.sidebar-card-grid > .sidebar-control + .sidebar-control) {
    margin-block-start: var(--space-tight);
  }
  .sidebar :where(.sidebar-card-grid > .sidebar-field-stack) {
    gap: var(--space-cluster);
  }
  .sidebar :where(.sidebar-card-heading + .sidebar-control,
                  .sidebar-card-heading + .sidebar-field-stack,
                  .sidebar-card-title + .sidebar-control) {
    margin-block-start: var(--space-tight);
  }
  .sidebar :where(.sidebar-card-button) { justify-content: flex-start; text-align: start; }
  .sidebar :where(.sidebar-card-button:hover) { border-color: var(--border-strong); }
  .sidebar :where(.sidebar-card-header) { align-items: start; display: grid; gap: var(--space-related); grid-template-columns: minmax(0, 1fr) auto; min-inline-size: 0; }
  .sidebar :where(.sidebar-section-header) { align-items: center; display: flex; gap: var(--space-related); justify-content: space-between; min-inline-size: 0; }
  .sidebar :where(.sidebar-section-title) { color: var(--text); font-size: var(--ui-font-size); font-weight: var(--ui-font-weight-strong); letter-spacing: -0.012em; margin: 0; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar :where(.sidebar-section-count) { color: var(--text-muted); flex: 0 0 auto; font-size: var(--ui-font-size); }
  .sidebar :where(.sidebar-card-body) { display: grid; gap: var(--space-related); min-inline-size: 0; }
  .sidebar :where(.sidebar-card-heading) { display: grid; gap: 0; margin: 0; min-inline-size: 0; text-align: start; }
  .sidebar :where(.sidebar-card-title) { color: var(--text); font-size: var(--ui-font-size); font-weight: var(--sidebar-card-title-weight); letter-spacing: -0.012em; line-height: var(--ui-line-height); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar :where(.sidebar-card-title-wrap) { display: grid; gap: 2px; min-inline-size: 0; }
  .sidebar :where(.sidebar-card-meta) { color: var(--text-muted); font-size: var(--ui-font-size); overflow: hidden; overflow-wrap: anywhere; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar :where(.sidebar-card-copy) { color: var(--text-muted); font-size: var(--ui-font-size); margin: 0; overflow-wrap: anywhere; }
  .sidebar :where(.sidebar-card-value) { color: var(--text); font-size: var(--ui-font-size); font-weight: var(--ui-font-weight-strong); }
  .sidebar :where(.sidebar-card.is-active) { border-inline-start-color: var(--accent-border-strong); border-inline-start-width: 3px; }
  .sidebar :where(.sidebar-card.is-muted) { opacity: .84; }
  .sidebar :where(.sidebar-empty-card) { background: transparent; border: 1px dashed var(--sidebar-row-border); color: var(--sidebar-control-muted-text); padding: var(--sidebar-card-padding); }
  .sidebar :where(.sidebar-inline-actions) { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-related); min-inline-size: 0; }
  .sidebar :where(.sidebar-inline-actions-end) { justify-content: flex-end; }
  .sidebar :where(.sidebar-inline-actions-between) { justify-content: space-between; }
  .sidebar :where(.sidebar-card-actions) { column-gap: var(--space-related); row-gap: var(--space-related); }
  .sidebar :where(.sidebar-card-actions-fill .sidebar-small-button) { flex: 1 1 calc(50% - var(--space-related)); inline-size: auto; min-inline-size: max-content; }
  .sidebar :where(.sidebar-inline-badges) { align-items: center; display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: var(--space-tight); justify-content: flex-end; min-inline-size: 0; }
  .sidebar :where(.sidebar-badge) { background: var(--sidebar-control-surface); border: 1px solid transparent; border-radius: var(--sidebar-button-radius); color: var(--text-muted); display: inline-flex; font-size: var(--ui-font-size-compact); line-height: 1; padding: 4px 6px; }
  .sidebar :where(.sidebar-badge.is-strong) { color: var(--text); }
  .sidebar :where(.sidebar-badge.is-dashed) { border-style: dashed; }
  .sidebar :where(.sidebar-link-card-wrap) { display: grid; gap: var(--space-tight); }
  .sidebar :where(.sidebar-link-card-wrap[data-shelf-link-card-status="pending"] .sidebar-link-card) { opacity: .82; }
  .sidebar :where(.sidebar-link-card-status)::before { content: " · "; }
  .sidebar :where(.sidebar-link-card-status-line) { min-block-size: 1px; }
  .sidebar :where(.sidebar-link-card-status-line[data-status="busy"]) { color: var(--text); }
  .sidebar :where(.sidebar-link-card-status-line[data-status="error"]) { color: var(--danger, var(--text)); }
  .sidebar :where(.sidebar-link-card) {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--shape-control);
    color: var(--text);
    display: grid;
    gap: var(--space-related);
    overflow: hidden;
    text-decoration: none;
  }
  .sidebar :where(.sidebar-link-card:hover) { border-color: var(--border-strong); }
  .sidebar :where(.sidebar-link-card-image) { aspect-ratio: 16 / 9; background: var(--bg-card); inline-size: 100%; object-fit: cover; }
  .sidebar :where(.sidebar-link-card-body) { display: grid; gap: 2px; padding: var(--space-related); }
  .sidebar :where(.sidebar-link-card-title) { color: var(--accent); font-size: var(--ui-font-size); font-weight: var(--ui-font-weight-strong); overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 2px; }
  .sidebar :where(.sidebar-link-card-meta) { color: var(--text-muted); font-size: var(--ui-font-size); overflow-wrap: anywhere; }

  /* Appearance accent picker. It reuses the same segmented picker grammar
     as reading rhythm controls, but the control itself stays quieter than
     the active accent applied around the rest of the app. */
  .sidebar :where(.sidebar-accent-picker) {
    grid-auto-columns: minmax(0, 1fr);
    min-inline-size: 0;
  }

  .sidebar :where(.sidebar-accent-picker .sidebar-accent-option) {
    gap: 0;
    min-block-size: calc(var(--sidebar-segmented-block-size) - 4px);
    padding-inline: 6px;
  }

  .sidebar .sidebar-segmented-control.sidebar-accent-picker .sidebar-accent-option[aria-pressed="true"],
  .sidebar .sidebar-segmented-control.sidebar-accent-picker .sidebar-accent-option.is-active {
    background: color-mix(in srgb, var(--surface-card) 95%, var(--accent-preview, var(--accent)) 5%);
    border-color: color-mix(in srgb, var(--accent-preview, var(--accent)) 28%, var(--sidebar-control-border-hover));
    color: var(--sidebar-control-text);
    font-weight: 450;
  }

  .sidebar :where(.sidebar-accent-swatch) {
    background: color-mix(in srgb, var(--accent-preview, var(--accent)) 84%, var(--surface-card) 16%);
    block-size: 15px;
    border: 1px solid color-mix(in srgb, var(--accent-preview, var(--accent)) 42%, var(--surface-border));
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface-card) 72%, transparent);
    flex: 0 0 15px;
    inline-size: 15px;
  }

  .sidebar :where(.sidebar-accent-option:hover .sidebar-accent-swatch,
                  .sidebar-accent-option:focus-visible .sidebar-accent-swatch,
                  .sidebar-accent-option[aria-pressed="true"] .sidebar-accent-swatch,
                  .sidebar-accent-option.is-active .sidebar-accent-swatch) {
    border-color: color-mix(in srgb, var(--accent-preview, var(--accent)) 64%, var(--surface-border));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface-card) 78%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent-preview, var(--accent)) 30%, transparent);
  }

  .sidebar :where(.sidebar-accent-option[data-accent-opt="grey"]) { --accent-preview: #4A4844; }
  .sidebar :where(.sidebar-accent-option[data-accent-opt="blue-purple"]) { --accent-preview: #515DA8; }
  .sidebar :where(.sidebar-accent-option[data-accent-opt="olive"]) { --accent-preview: #667D35; }
  .sidebar :where(.sidebar-accent-option[data-accent-opt="yellow-orange"]) { --accent-preview: #B56E22; }
  .sidebar :where(.sidebar-accent-option[data-accent-opt="maroon-red"]) { --accent-preview: #963F4C; }

  /* Static panel layout primitives kept in this file, grouped by purpose. */
  .sidebar-panel-section,
  .sidebar-section,
  .sidebar-find,
  .sidebar-field,
  .sidebar-field-stack,
  .sidebar-document-list,
  .sidebar-outline-list,
  .sidebar-choice-group { display: grid; }

  .sidebar-panel-section,
  .sidebar-section,
  .sidebar-find,
  .sidebar-document-list,
  .sidebar-outline-list,
  .sidebar-choice-group { gap: var(--sidebar-panel-section-gap, 10px); }

  .sidebar-field-stack { gap: var(--sidebar-field-stack-gap); }

  .sidebar-field { gap: var(--space-related); }
  .sidebar-action-row { display: grid; gap: var(--space-related); grid-template-columns: repeat(2, minmax(0, 1fr)); min-inline-size: 0; }

  /* Shared buttons and inputs. */
  .sidebar :where(.sidebar-primary-cta-button,
                  .sidebar-secondary-button,
                  .sidebar-save-button,
                  .sidebar-small-button,
                  .sidebar-choice-button,
                  .sidebar-export-item,
                  .sidebar-destructive-button,
                  .sidebar-segmented-option) { inline-size: 100%; min-inline-size: 0; }

  .sidebar :where(.sidebar-primary-cta-button,
                  .sidebar-secondary-button,
                  .sidebar-save-button,
                  .sidebar-small-button,
                  .sidebar-choice-button,
                  .sidebar-export-item,
                  .sidebar-search-clear-button,
                  .sidebar-document-open-button,
                  .sidebar-document-save-button,
                  .sidebar-document-rename-button,
                  .sidebar-document-close-button,
                  .sidebar-destructive-button,
                  .sidebar-segmented-option) {
    background: var(--sidebar-button-bg);
    border: 1px solid var(--sidebar-button-border);
    border-radius: var(--sidebar-button-radius);
    color: var(--text);
  }

  .sidebar-close-button,
  .sidebar-search-clear-button,
  .sidebar-document-save-button,
  .sidebar-document-rename-button,
  .sidebar-document-close-button {
    flex: 0 0 auto;
    block-size: var(--sidebar-active-action-target);
    inline-size: var(--sidebar-active-action-target);
    min-block-size: var(--sidebar-active-action-target);
    min-inline-size: var(--sidebar-active-action-target);
    padding-inline: 0;
  }

  .sidebar-close-button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--shape-panel);
    color: var(--text-muted);
    inline-size: var(--sidebar-close-button-size);
    min-inline-size: var(--sidebar-close-button-size);
    block-size: var(--sidebar-close-button-size);
    min-block-size: var(--sidebar-close-button-size);
    padding: 0;
    position: relative;
    transition:
      background-color var(--motion-duration-micro) var(--motion-ease-standard),
      border-color var(--motion-duration-micro) var(--motion-ease-standard),
      color var(--motion-duration-micro) var(--motion-ease-standard),
      transform var(--motion-duration-micro) var(--motion-ease-standard);
  }

  .sidebar-close-button::before {
    background: var(--bg-card);
    border: 1px solid transparent;
    border-radius: var(--shape-panel);
    block-size: var(--sidebar-close-button-hover-size);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--text) 0%, transparent);
    content: "";
    inline-size: var(--sidebar-close-button-hover-size);
    inset-block-start: 50%;
    inset-inline-start: 50%;
    opacity: 0;
    position: absolute;
    transform: translate(-50%, -50%) scale(.72);
    transition:
      background-color var(--motion-duration-micro) var(--motion-ease-standard),
      border-color var(--motion-duration-micro) var(--motion-ease-standard),
      box-shadow var(--motion-duration-micro) var(--motion-ease-standard),
      opacity var(--motion-duration-micro) var(--motion-ease-standard),
      transform var(--motion-duration-micro) var(--motion-ease-standard);
  }

  .sidebar-close-button svg {
    position: relative;
    transform: scale(.92);
    transition: transform var(--motion-duration-micro) var(--motion-ease-standard);
    z-index: 1;
  }

  .sidebar-close-button:hover,
  .sidebar-close-button:focus-visible {
    background: transparent;
    border-color: transparent;
    color: var(--text);
    transform: translateY(-1px);
  }

  .sidebar-close-button:hover::before,
  .sidebar-close-button:focus-visible::before {
    border-color: var(--border);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .sidebar-close-button:focus-visible::before {
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
  }

  .sidebar-close-button:hover svg,
  .sidebar-close-button:focus-visible svg {
    transform: scale(1);
  }
  .sidebar :where(.sidebar-save-button,
                  .sidebar-choice-button,
                  .sidebar-export-item) { justify-content: flex-start; }

  .sidebar :where(.sidebar-primary-cta-button,
                  .sidebar-secondary-button,
                  .sidebar-save-button,
                  .sidebar-small-button,
                  .sidebar-choice-button,
                  .sidebar-export-item,
                  .sidebar-search-clear-button,
                  .sidebar-document-save-button,
                  .sidebar-document-rename-button,
                  .sidebar-document-close-button,
                  .sidebar-destructive-button,
                  .sidebar-segmented-option):where(:hover, :focus-visible) {
    background: var(--sidebar-button-bg-hover);
    border-color: var(--sidebar-button-border-hover);
  }

  .sidebar :where(.sidebar-primary-cta-button,
                  .sidebar-secondary-button,
                  .sidebar-save-button,
                  .sidebar-small-button,
                  .sidebar-choice-button,
                  .sidebar-export-item,
                  .sidebar-search-clear-button,
                  .sidebar-document-save-button,
                  .sidebar-document-rename-button,
                  .sidebar-document-close-button,
                  .sidebar-destructive-button,
                  .sidebar-segmented-option):where(:active) {
    background: var(--sidebar-button-bg-active);
  }

  .sidebar :where(.sidebar-primary-cta-button) {
    background: var(--sidebar-primary-button-bg);
    border-color: var(--sidebar-primary-button-border);
    color: var(--sidebar-primary-button-text);
    font-weight: var(--ui-font-weight-strong);
  }

  .sidebar :where(.sidebar-primary-cta-button:hover,
                  .sidebar-primary-cta-button:focus-visible) {
    background: var(--sidebar-primary-button-bg-hover);
    border-color: var(--sidebar-primary-button-border);
    color: var(--sidebar-primary-button-text);
  }

  .sidebar :where(.sidebar-primary-cta-button:active) {
    background: var(--sidebar-primary-button-bg-active);
  }

  .sidebar :where(.sidebar-primary-cta-button:disabled,
                  .sidebar-secondary-button:disabled,
                  .sidebar-save-button:disabled,
                  .sidebar-small-button:disabled,
                  .sidebar-choice-button:disabled,
                  .sidebar-export-item:disabled,
                  .sidebar-search-clear-button:disabled,
                  .sidebar-document-save-button:disabled,
                  .sidebar-document-rename-button:disabled,
                  .sidebar-document-close-button:disabled,
                  .sidebar-destructive-button:disabled,
                  .sidebar-segmented-option:disabled) {
    cursor: not-allowed;
    opacity: .48;
    transform: none;
  }

  .sidebar :where(.sidebar-small-button) { min-block-size: max(var(--small-control-height), 24px); }
  .sidebar :where(.sidebar-primary-cta-button,
                  .sidebar-secondary-button,
                  .sidebar-save-button,
                  .sidebar-small-button,
                  .sidebar-choice-button,
                  .sidebar-export-item,
                  .sidebar-destructive-button,
                  .sidebar-segmented-option) {
    min-block-size: 34px;
  }

  .sidebar :where(.sidebar-destructive-button) {
    color: var(--danger, var(--text));
  }

  .sidebar :where(.sidebar-destructive-button:hover,
                  .sidebar-destructive-button:focus-visible,
                  .sidebar-destructive-button[data-review-delete-confirm="true"]) {
    border-color: color-mix(in srgb, var(--danger, var(--text)) 22%, transparent);
    color: var(--danger, var(--text));
  }
  .sidebar-export-wrap { position: relative; }

  .sidebar :where(.sidebar-select,
                  .sidebar-search-input,
                  .sidebar-replace-input,
                  .sidebar-document-rename-input,
                  .sidebar-input) {
    background: var(--sidebar-control-surface);
    border: 1px solid var(--sidebar-control-border);
    border-radius: var(--sidebar-control-radius);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--ui-field-font-size);
    font-weight: var(--ui-field-font-weight);
    line-height: var(--ui-field-line-height);
    inline-size: 100%;
    min-block-size: var(--control-height);
    padding-inline: var(--space-related);
  }

  .sidebar-empty-state {
    background: transparent;
    border: 1px dashed var(--sidebar-row-border);
    border-radius: var(--sidebar-card-radius);
    color: var(--sidebar-control-muted-text);
    display: grid;
    gap: var(--space-tight);
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow: hidden;
    padding: var(--sidebar-card-padding);
    text-align: start;
  }

  .sidebar-help-text,
  .sidebar-status {
    background: transparent;
    border: 0;
    color: var(--sidebar-control-muted-text);
    display: block;
    font-size: var(--ui-font-size);
    line-height: var(--ui-line-height);
    margin: 0;
    min-block-size: 0;
    overflow-wrap: anywhere;
    padding: 0;
  }

  .sidebar-document-item,
  .sidebar-outline-item,
  .sidebar-search-result {
    background: var(--sidebar-row-bg);
    border: 1px solid var(--sidebar-row-border);
    border-radius: var(--sidebar-row-radius);
    color: var(--text);
    display: grid;
    gap: var(--sidebar-row-gap);
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow: hidden;
    padding: var(--sidebar-row-padding);
    text-align: start;
  }

  .sidebar-document-item[aria-current="page"],
  .sidebar-outline-item[aria-current="true"],
  .sidebar-search-result.is-active {
    background: var(--sidebar-row-bg-active);
    border-color: var(--sidebar-row-border-hover);
    color: var(--sidebar-selected-text);
  }

  .sidebar-document-actions {
    align-items: center;
    display: grid;
    flex: 0 0 auto;
    gap: var(--space-tight);
    min-inline-size: 0;
    grid-auto-columns: var(--sidebar-active-action-target);
    grid-auto-flow: column;
    justify-content: end;
  }
  .sidebar-document-name { display: block; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-outline-item { padding-inline-start: calc(var(--space-related) + var(--outline-depth, 0) * var(--space-cluster)); }


  /* Files, outline, find, and appearance controls. */
  .sidebar-document-open-button {
    background: transparent;
    border: 0;
    color: inherit;
    display: grid;
    gap: var(--space-related);
    grid-template-columns: auto minmax(0, 1fr);
    inline-size: 100%;
    justify-content: start;
    min-inline-size: 0;
    overflow: hidden;
    padding: 0;
    text-align: start;
  }
  .sidebar-document-content { display: block; min-inline-size: 0; overflow: hidden; }
  .sidebar-document-rename-input { grid-column: 1 / -1; min-inline-size: 0; }
  .sidebar-checkbox-row { align-items: center; display: flex; gap: var(--space-related); min-block-size: var(--touch-target); }
  .sidebar-checkbox-input { accent-color: var(--accent); block-size: 18px; inline-size: 18px; }
  .sidebar-checkbox-box { display: none; }
  .sidebar-hex-field { align-items: center; display: block; inline-size: 100%; position: relative; }
  .sidebar-hex-prefix { align-items: center; color: var(--text-muted); display: inline-flex; font-family: var(--font-mono); inset-block: 0; inset-inline-start: 12px; justify-content: center; pointer-events: none; position: absolute; }
  .sidebar-hex-input { font-family: var(--font-mono); padding-inline-start: 28px; text-transform: uppercase; }
  .sidebar-choice-button[aria-pressed="true"],
  .sidebar-choice-button.is-active { border-color: var(--accent-border-strong); }
  .sidebar-document-item {
    align-items: center;
    column-gap: var(--space-related);
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-related);
  }
  .sidebar-document-item.sidebar-card-grid { gap: var(--space-related); padding: var(--space-cluster); }
  .sidebar-empty-icon { block-size: 24px; inline-size: 24px; }
  .sidebar-empty-icon svg { block-size: 100%; inline-size: 100%; }
  .sidebar-document-dirty-dot { align-self: center; background: var(--text); border-radius: 50%; block-size: 6px; flex: 0 0 auto; inline-size: 6px; justify-self: center; }


  .sidebar-document-item.is-close-confirming {
    align-items: stretch;
    background: var(--sidebar-row-bg-active);
    border-color: var(--sidebar-row-border-hover);
  }

  .sidebar-document-item.is-close-confirming .sidebar-document-actions {
    opacity: .72;
  }

  .sidebar-document-close-confirmation {
    display: grid;
    gap: var(--space-cluster);
    grid-column: 1 / -1;
    margin-block-start: 2px;
    min-inline-size: 0;
    padding: var(--space-cluster);
  }

  .sidebar-document-close-copy {
    display: grid;
    gap: var(--space-tight);
    min-inline-size: 0;
  }

  .sidebar-document-close-title,
  .sidebar-document-close-message {
    margin: 0;
  }

  .sidebar-document-close-title {
    color: var(--text);
    font-size: var(--ui-font-size);
    font-weight: var(--ui-font-weight-strong);
    line-height: 1.25;
  }

  .sidebar-document-close-message {
    color: var(--text-muted);
    font-size: var(--ui-font-size);
    line-height: 1.35;
  }

  .sidebar-document-close-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-related);
    justify-content: flex-end;
  }

  .sidebar-document-close-actions .sidebar-small-button {
    inline-size: auto;
    min-inline-size: max-content;
    padding-inline: var(--space-cluster);
  }
  .sidebar-history-retention-label { display: grid; gap: var(--space-tight); }
  .sidebar-history-retention-label span { color: var(--text-muted); font-size: var(--ui-font-size); }
  /* Review and history states. */
  .sidebar-review-overview { gap: var(--space-cluster); }
  .sidebar-review-group { gap: var(--space-related); }
  .sidebar-review-delete-button[data-review-delete-confirm="true"] { border-color: color-mix(in srgb, var(--danger, var(--text)) 22%, transparent); }
  .sidebar-review-field,
  .sidebar-review-warning,
  .sidebar-review-conflict-text { margin: 0; }
  .sidebar-review-field { background: var(--sidebar-control-surface); border: 1px solid var(--sidebar-control-border); border-radius: var(--sidebar-control-radius); color: var(--text); display: grid; gap: 2px; min-inline-size: 0; padding: var(--space-related); }
  .sidebar-review-field-label { color: var(--text-muted); font-size: var(--ui-font-size); line-height: var(--ui-line-height); }
  .sidebar-review-field-value { color: var(--text); font-size: var(--ui-font-size); line-height: var(--ui-line-height); margin: 0; overflow-wrap: anywhere; }
  .sidebar-review-warning { color: var(--text); font-weight: var(--ui-font-weight-strong); }
  .sidebar-review-conflict-text { border: 1px dashed var(--sidebar-row-border); border-radius: var(--sidebar-row-radius); color: var(--text-muted); display: grid; gap: var(--space-tight); padding: var(--sidebar-row-padding); }
  .sidebar-review-conflict-text p { margin: 0; }
  .sidebar-review-actions,
  .sidebar-review-decision-actions { align-items: stretch; }
  .sidebar-review-actions .sidebar-small-button,
  .sidebar-review-decision-actions .sidebar-small-button { min-inline-size: 0; text-align: center; white-space: normal; }
  .sidebar-review-decision-actions { border-block-start: 1px solid var(--border); padding-block-start: var(--space-related); }
  .sidebar-review-decision-button { font-weight: var(--ui-font-weight-strong); }
  .sidebar-review-accept-button { border-color: var(--border-strong); }

  /* Account panel. */
  .sidebar-account-card { gap: var(--space-cluster); }
  .sidebar-account-meta { border-block-start: 1px solid var(--border); padding-block-start: var(--space-related); }
  .sidebar-account-capabilities { justify-content: flex-start; }
  .sidebar-account-summary { background: var(--sidebar-control-surface); border-radius: var(--sidebar-control-radius); display: grid; gap: 0; overflow: hidden; }
  .sidebar-account-summary-row { align-items: baseline; background: color-mix(in srgb, var(--sidebar-panel-bg) 58%, transparent); display: grid; gap: var(--space-related); grid-template-columns: minmax(72px, .42fr) minmax(0, 1fr); min-inline-size: 0; padding: var(--space-tight) var(--space-related); }
  .sidebar-account-summary-row + .sidebar-account-summary-row { border-block-start: 1px solid var(--sidebar-row-border); }
  .sidebar-account-summary-label { color: var(--sidebar-control-muted-text); font-size: var(--ui-font-size-compact); line-height: var(--ui-line-height); }
  .sidebar-account-summary-value { color: var(--text); font-size: var(--ui-font-size); line-height: var(--ui-line-height); min-inline-size: 0; overflow-wrap: anywhere; }
  .sidebar-account-summary[data-account-attention="billing"] { outline: 1px solid color-mix(in srgb, var(--danger, var(--text)) 22%, transparent); outline-offset: 0; }
  .sidebar-account-actions { justify-content: stretch; }
  .sidebar-account-flow-actions :where(.sidebar-primary-cta-button, .sidebar-secondary-button) { white-space: normal; }
  .sidebar-account-plan-features {
    background: var(--sidebar-control-surface);
    border: 1px solid var(--sidebar-control-border);
    border-radius: var(--sidebar-control-radius);
    display: grid;
    gap: 0;
    overflow: hidden;
  }
  .sidebar-account-plan-feature {
    background: color-mix(in srgb, var(--sidebar-panel-bg) 58%, transparent);
    color: var(--text-muted);
    font-size: var(--ui-font-size);
    line-height: var(--ui-line-height);
    margin: 0;
    padding: var(--space-related);
  }
  .sidebar-account-plan-feature + .sidebar-account-plan-feature { border-block-start: 1px solid var(--sidebar-row-border); }
  .sidebar-season-card { gap: var(--space-cluster); }
  .sidebar-season-hero-card {
    gap: 0;
    overflow: hidden;
    padding: 0;
  }
  .sidebar-season-card-body,
  .sidebar-season-animal-body {
    display: grid;
    gap: var(--space-cluster);
    min-inline-size: 0;
    padding: var(--space-cluster);
  }
  .sidebar-season-title-block { gap: 2px; }
  .sidebar-season-media {
    background: var(--sidebar-control-surface);
    border-block-end: 1px solid var(--sidebar-row-border);
  }
  .sidebar-season-image { object-position: center 50%; }
  .sidebar-season-focus-group {
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
  }
  .sidebar-season-focus-heading {
    color: var(--text);
    font-size: var(--ui-font-size);
    font-weight: var(--ui-font-weight-strong);
    line-height: var(--ui-line-height-tight, 1.25);
    margin: 0;
  }
  .sidebar-season-focus-list {
    background: var(--sidebar-control-surface);
    border: 1px solid var(--sidebar-control-border);
    border-radius: var(--sidebar-control-radius);
    display: grid;
    gap: 0;
    min-inline-size: 0;
    overflow: hidden;
  }
  .sidebar-season-focus-item {
    background: color-mix(in srgb, var(--sidebar-panel-bg) 58%, transparent);
    display: grid;
    gap: var(--space-tight);
    min-inline-size: 0;
    padding: var(--space-related);
  }
  .sidebar-season-focus-item + .sidebar-season-focus-item { border-block-start: 1px solid var(--sidebar-row-border); }
  .sidebar-season-focus-item strong {
    color: var(--text);
    font-size: var(--ui-font-size);
    font-weight: var(--ui-font-weight-strong);
    line-height: 1.25;
  }
  .sidebar-season-focus-item span {
    color: var(--text-muted);
    display: block;
    font-size: var(--ui-font-size);
    line-height: var(--ui-line-height);
  }
  .sidebar-season-animal-card { overflow: hidden; }
  .sidebar-season-animal-heading {
    line-height: var(--ui-line-height);
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  .sidebar-season-actions :where(.sidebar-secondary-button, .sidebar-primary-cta-button) {
    white-space: normal;
  }
  .sidebar-season-actions .sidebar-primary-cta-button {
    flex: 1 1 auto;
  }
  .sidebar-season-link-button { font-weight: var(--ui-font-weight-strong); }
  .sidebar-season-action-form {
    margin: 0;
  }
  .sidebar-team-spaces-overview,
  .sidebar-team-spaces-card,
  .sidebar-team-member-card { gap: var(--space-cluster); }
  .sidebar-team-spaces-list { justify-content: flex-start; }
  .sidebar-team-spaces-list :where(.sidebar-primary-cta-button, .sidebar-secondary-button) {
    flex: 0 1 auto;
    inline-size: auto;
    min-inline-size: max-content;
  }
  .sidebar-team-spaces-create-form,
  .sidebar-team-spaces-add-member-form,
  .sidebar-team-spaces-filter-form { gap: var(--space-related); }
  .sidebar-team-spaces-create-form { align-items: end; grid-template-columns: minmax(0, 1fr) auto; }
  .sidebar-team-spaces-add-member-form,
  .sidebar-team-spaces-filter-form { grid-template-columns: minmax(0, 1fr); }
  .sidebar-team-spaces-field { gap: var(--space-tight); min-inline-size: 0; }
  .sidebar-team-spaces-members { gap: var(--space-related); }

  /* Shelf behavior and content rhythm only. Visual surfaces come from shared sidebar primitives. */
  .sidebar-shelf-overview { border-block-end: 0; padding-block-end: 0; }
  .shelf-composer-expanded { display: grid; gap: var(--sidebar-panel-body-gap, var(--space-cluster)); }
  .shelf-composer.is-collapsed .shelf-composer-expanded { display: none; }
  .shelf-title-input {
    font-family: var(--font-ui);
    font-size: var(--ui-field-font-size);
    font-weight: var(--ui-field-font-weight);
    line-height: var(--ui-field-line-height);
  }
  .shelf-note-editor {
    min-block-size: 210px;
    overflow: auto;
  }
  .shelf-note-editor .tiptap {
    background: transparent;
    color: var(--text);
    font-family: var(--ed-body-font);
    font-size: var(--ui-font-size);
    line-height: var(--ed-line-height);
    margin: 0;
    max-inline-size: none;
    min-block-size: 208px;
    outline: none;
    padding: var(--space-cluster);
  }
  .shelf-note-editor .is-editor-empty:first-child::before {
    color: var(--text-muted);
    content: attr(data-placeholder);
    float: inline-start;
    height: 0;
    pointer-events: none;
  }
  .shelf-note-editor .tiptap :where(p, ul, ol, blockquote, pre) { margin-block: 0 var(--ed-paragraph-spacing); }
  .shelf-note-editor .tiptap :where(h1, h2, h3, h4, h5, h6) {
    color: var(--ed-heading-color);
    font-family: var(--ed-heading-font);
    line-height: var(--ed-line-height);
    margin-block: calc(var(--ed-paragraph-spacing) * 2.25) calc(var(--ed-paragraph-spacing) * 0.625);
  }
  .shelf-note-editor .tiptap :where(h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child) { margin-block-start: 0; }
  .shelf-note-content {
    color: var(--text);
    display: grid;
    font-family: var(--ed-body-font);
    font-size: var(--ui-font-size);
    gap: var(--space-related);
    line-height: var(--ed-line-height);
    max-block-size: 8.5rem;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .shelf-note-content :where(h1, h2, h3, h4, h5, h6) { color: var(--ed-heading-color); font-family: var(--ed-heading-font); line-height: var(--ed-line-height); margin-block: 0 var(--ed-paragraph-spacing); }
  .shelf-note-content :where(h1, h2, h3) { font-size: var(--ui-font-size); }
  .shelf-note-content :where(p, ul, ol, blockquote, pre) { margin-block: 0 var(--ed-paragraph-spacing); }
  .shelf-note-content :where(ul, ol) { padding-inline-start: var(--space-section); }
  .shelf-note-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
  .sidebar-history-retention-status[data-status="success"] { color: var(--text); }
  .sidebar-history-retention-status[data-status="error"] { color: var(--danger, var(--text)); }

  /* Responsive adjustments. */
  #sidebar-panel-document-tools {
    --sidebar-card-gap: var(--space-cluster);
    --sidebar-card-padding: 12px;
  }

  .sidebar :where(.sidebar-find) {
    gap: var(--space-cluster);
  }

  .sidebar :where(.sidebar-find-card-header) {
    align-items: baseline;
  }

  .sidebar :where(.sidebar-search-count) {
    color: var(--sidebar-control-muted-text);
    font-size: var(--ui-font-size);
    line-height: var(--ui-line-height);
    white-space: nowrap;
  }

  .sidebar :where(.sidebar-search-count:empty) {
    display: none;
  }

  .sidebar :where(.sidebar-search-box) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-inline-size: 0;
    position: relative;
  }

  .sidebar :where(.sidebar-search-input) {
    grid-area: 1 / 1 / 2 / 3;
    padding-inline-end: calc(var(--sidebar-control-block-size) + var(--space-related));
  }

  .sidebar :where(.sidebar-search-input::-webkit-search-decoration,
                  .sidebar-search-input::-webkit-search-cancel-button,
                  .sidebar-search-input::-webkit-search-results-button,
                  .sidebar-search-input::-webkit-search-results-decoration) {
    appearance: none;
    display: none;
  }

  .sidebar :where(.sidebar-search-clear-button) {
    align-self: center;
    block-size: calc(var(--sidebar-control-block-size) - 8px);
    border-radius: calc(var(--sidebar-control-radius) - 1px);
    box-shadow: none;
    grid-area: 1 / 2 / 2 / 3;
    inline-size: calc(var(--sidebar-control-block-size) - 8px);
    justify-self: end;
    margin-inline-end: 4px;
    min-block-size: 0;
    min-inline-size: 0;
    position: relative;
  }

  .sidebar :where(.sidebar-search-clear-button[hidden],
                  .sidebar-find-results-card[hidden]) {
    display: none !important;
  }

  .sidebar :where(.sidebar-find-options) {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
  }

  .sidebar :where(.sidebar-find-options .sidebar-checkbox-row) {
    color: var(--sidebar-control-text);
    gap: 6px;
    min-block-size: 28px;
  }

  .sidebar :where(.sidebar-find-options .sidebar-checkbox-label) {
    font-size: var(--ui-font-size);
    line-height: var(--ui-line-height);
  }

  .sidebar :where(.sidebar-find-actions) {
    gap: var(--space-related);
  }

  .sidebar :where(.sidebar-find-actions .sidebar-small-button) {
    border-radius: var(--sidebar-control-radius);
    box-shadow: none;
  }

  .sidebar :where(.sidebar-find-actions .sidebar-small-button:disabled) {
    cursor: not-allowed;
    opacity: .46;
    transform: none;
  }

  .sidebar :where(.sidebar-find-results) {
    display: grid;
    gap: 0;
    min-inline-size: 0;
  }

  .sidebar :where(.sidebar-search-result-row) {
    display: grid;
    min-inline-size: 0;
  }

  .sidebar :where(.sidebar-search-result-row + .sidebar-search-result-row) {
    border-block-start: 1px solid color-mix(in srgb, var(--sidebar-group-border) 76%, transparent);
  }

  .sidebar :where(.sidebar-search-result) {
    align-items: start;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--sidebar-control-radius);
    box-shadow: none;
    color: var(--sidebar-control-text);
    display: grid;
    gap: 10px;
    grid-template-columns: 2.1ch minmax(0, 1fr);
    min-block-size: 34px;
    padding-block: 8px;
    padding-inline: 4px 8px;
    text-align: start;
  }

  .sidebar :where(.sidebar-search-result:hover) {
    background: var(--sidebar-control-surface-hover);
    border-color: transparent;
    color: var(--text);
  }

  .sidebar :where(.sidebar-search-result:focus-visible) {
    outline: var(--focus-ring-width) solid color-mix(in srgb, var(--focus-ring-color) 32%, transparent);
    outline-offset: 2px;
  }

  .sidebar :where(.sidebar-search-result.is-active,
                  .sidebar-search-result[aria-current="true"]) {
    background: var(--sidebar-selected-surface);
    border-color: var(--sidebar-selected-border);
    color: var(--text);
  }

  .sidebar :where(.sidebar-search-result-index) {
    align-self: start;
    color: color-mix(in srgb, var(--sidebar-control-muted-text) 72%, transparent);
    font-size: var(--ui-font-size-compact);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    line-height: var(--ui-line-height);
    padding-block-start: 1px;
    text-align: end;
  }

  .sidebar :where(.sidebar-search-result.is-active .sidebar-search-result-index,
                  .sidebar-search-result[aria-current="true"] .sidebar-search-result-index) {
    color: var(--sidebar-control-muted-text);
  }

  .sidebar :where(.sidebar-search-result-context) {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar :where(.sidebar-search-result-match) {
    background: color-mix(in srgb, var(--accent) 24%, transparent);
    border-radius: var(--shape-technical);
    color: var(--text);
    font-weight: 650;
    padding-inline: 1px;
  }

  .sidebar :where(.sidebar-search-result-before,
                  .sidebar-search-result-after) {
    color: var(--sidebar-control-muted-text);
  }

  .sidebar :where(.sidebar-find-empty) {
    background: transparent;
    border: 0;
    color: var(--sidebar-control-muted-text);
    min-block-size: auto;
    padding: var(--space-tight) 0;
  }

  @container sidebar (max-width: 300px) {
    .sidebar-document-item { grid-template-columns: minmax(0, 1fr); }
    .sidebar-document-actions { justify-content: start; }
    .sidebar :where(.sidebar-section-header) { align-items: start; flex-direction: column; }
    .sidebar :where(.sidebar-inline-badges) { justify-content: flex-start; }
  }

  @media (pointer: coarse) {
    .sidebar { --sidebar-active-action-target: var(--sidebar-coarse-action-target); }
  }

  @media (min-width: 600px) and (max-width: 1079px) {
    .sidebar {
      inline-size: var(--sidebar-floating-inline);
    }
  }

  @media (max-width: 599px), (max-width: 767px) and (pointer: coarse) {
    .sidebar {
      block-size: var(--sidebar-sheet-closed-block-size);
      border: 0;
      border-block-start: 1px solid var(--border);
      border-radius: var(--shape-panel) var(--shape-panel) 0 0;
      bottom: 0;
      flex-basis: auto;
      inline-size: 100%;
      inset-block-start: auto;
      inset-inline: 0;
      max-block-size: calc(var(--app-viewport-block) * var(--sidebar-sheet-max-block-fraction));
      max-inline-size: none;
      opacity: 1;
      order: 2;
      pointer-events: none;
      position: fixed;
      transform: var(--sidebar-sheet-closed-transform);
      z-index: var(--z-sidebar);
    }

    .sidebar[data-sidebar-open="true"] {
      block-size: min(calc(var(--app-viewport-block) * var(--sidebar-sheet-snap-default)), calc(var(--app-viewport-block) - var(--app-safe-top)));
      pointer-events: auto;
      touch-action: auto;
      transform: var(--sidebar-sheet-open-transform);
    }

    [data-sidebar-side="right"] .sidebar,
    [data-sidebar-side="left"] .sidebar {
      inset-inline: 0;
    }

    [data-sidebar-side="right"] .sidebar[data-sidebar-open="false"],
    [data-sidebar-side="left"] .sidebar[data-sidebar-open="false"],
    .sidebar[data-sidebar-open="false"] { block-size: var(--sidebar-sheet-closed-block-size); inline-size: 100%; opacity: 1; pointer-events: none; transform: var(--sidebar-sheet-closed-transform); }
    .sidebar::before { content: none; }
    .sidebar-sheet-drag-handle {
      align-items: center;
      cursor: grab;
      display: flex;
      inline-size: 100%;
      inset-block-start: 0;
      inset-inline: 0;
      justify-content: center;
      min-block-size: var(--sidebar-sheet-drag-zone);
      position: absolute;
      touch-action: none;
      z-index: 2;
    }
    .sidebar-sheet-drag-handle::before {
      background: color-mix(in srgb, var(--text-muted) 40%, transparent);
      border-radius: 50vw;
      block-size: 4px;
      content: "";
      inline-size: 38px;
    }
    .sidebar-panel-header { cursor: default; padding-block-start: var(--sidebar-sheet-drag-zone); touch-action: auto; }
    .sidebar-panel {
      block-size: 100%;
      min-block-size: 0;
    }
    .sidebar-panel-body {
      block-size: 0;
      flex: 1 1 auto;
      max-block-size: 100%;
      min-block-size: 0;
      overscroll-behavior-y: contain;
      padding-block-end: max(var(--sidebar-panel-body-padding, var(--space-section)), calc(var(--app-safe-bottom) + var(--space-section)));
      touch-action: pan-y pinch-zoom;
    }
    .sidebar :where(.sidebar-card-grid.sidebar-card-responsive-compact) { gap: var(--space-related); padding: var(--space-related); }
    .sidebar :where(.sidebar-inline-actions-end) { justify-content: flex-start; }
  }
}


@layer components {
  /* Shelf detail shared pieces. */
  .sidebar-shelf-panel.is-detail-mode .shelf-filter-section,
  .sidebar-shelf-panel.is-detail-mode .shelf-note-list {
    display: none;
  }

  .sidebar-detail-header {
    align-items: center;
    border-block-end: 1px solid var(--border);
    display: flex;
    min-block-size: 40px;
    padding: var(--space-related);
  }

  .shelf-back-note-btn { color: var(--text-muted); }
  .shelf-back-note-btn:hover,
  .shelf-back-note-btn:focus-visible { color: var(--text); }
}



@layer components {
  @keyframes sidebar-panel-enter {
    from { opacity: 0; transform: translateY(var(--motion-distance-reveal)); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes sidebar-empty-enter {
    from { opacity: 0; transform: translateY(calc(var(--motion-distance-reveal) * .75)); }
    to { opacity: 1; transform: translateY(0); }
  }

  .sidebar[data-sidebar-open="true"] :where(.sidebar-panel) {
    animation: sidebar-panel-enter var(--motion-duration-surface) var(--motion-ease-out) both;
  }

  .sidebar :where(.sidebar-panel-header, .sidebar-panel-body) {
    transition: border-color var(--motion-duration-surface) var(--motion-ease-standard), background-color var(--motion-duration-surface) var(--motion-ease-standard);
  }

  .sidebar :where(.sidebar-empty-card, .sidebar-empty-state) {
    animation: sidebar-empty-enter var(--motion-duration-panel-sheet) var(--motion-ease-out) both;
  }

  .sidebar :where(.sidebar-list-item, .sidebar-card, .sidebar-link-card, .sidebar-primary-cta-button, .sidebar-secondary-button, .sidebar-save-button, .sidebar-small-button, .sidebar-choice-button, .sidebar-export-item, .sidebar-destructive-button, .sidebar-close-button, .sidebar-search-clear-button, .sidebar-document-open-button, .sidebar-document-save-button, .sidebar-document-rename-button, .sidebar-document-close-button, .sidebar-segmented-option) {
    transition: background-color var(--motion-duration-micro) var(--motion-ease-standard), border-color var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-micro) var(--motion-ease-standard), transform var(--motion-duration-state) var(--motion-ease-out);
  }

  .sidebar :where(.sidebar-card-button:hover, .sidebar-list-item:hover, .sidebar-link-card:hover, .sidebar-choice-button:hover, .sidebar-export-item:hover) {
    transform: translateY(-1px);
  }

  .sidebar :where(.sidebar-card-button:active, .sidebar-list-item:active, .sidebar-link-card:active, .sidebar-choice-button:active, .sidebar-export-item:active) {
    transform: translateY(0);
  }
}

@layer surfaces {
  /* Shared sidebar grammar: quiet surface, outline cards, and consistent controls. */
  #sidebar-panel-appearance {
    --sidebar-card-gap: 18px;
    --sidebar-card-padding: 14px;
    --sidebar-field-stack-gap: 18px;
  }

  .sidebar :where(.sidebar-control) {
    border: 0;
    display: grid;
    gap: var(--sidebar-control-gap);
    margin: 0;
    padding: 0;
  }

  .sidebar :where(.sidebar-control-label,
                  .sidebar-field-label,
                  .sidebar-section-label) {
    background: transparent;
    border: 0;
    color: var(--sidebar-control-label-text);
    display: block;
    font-size: var(--ui-font-size);
    font-weight: 450;
    inline-size: auto;
    letter-spacing: 0;
    line-height: var(--ui-line-height);
    margin: 0;
    min-block-size: auto;
    padding: 0;
  }

  .sidebar :where(.sidebar-field,
                  .sidebar-field-stack,
                  .sidebar-field-stack > .sidebar-field) {
    border: 0;
    display: grid;
    margin: 0;
    padding: 0;
  }

  .sidebar :where(.sidebar-field:not(.sidebar-control)) {
    gap: var(--sidebar-control-gap);
  }

  .sidebar :where(.sidebar-field-stack) {
    gap: var(--sidebar-field-stack-gap);
  }

  .sidebar :where(.sidebar-field + .sidebar-field,
                  .sidebar-field + .sidebar-field-stack,
                  .sidebar-field-stack + .sidebar-field,
                  .sidebar-field-stack + .sidebar-field-stack,
                  .sidebar-field-stack > .sidebar-field + .sidebar-field) {
    margin-block-start: 0;
    padding: 0;
  }

  .sidebar :where(.sidebar-field + .sidebar-field)::before,
  .sidebar :where(.sidebar-field + .sidebar-field-stack)::before,
  .sidebar :where(.sidebar-field-stack + .sidebar-field)::before,
  .sidebar :where(.sidebar-field-stack + .sidebar-field-stack)::before,
  .sidebar :where(.sidebar-field-stack > .sidebar-field + .sidebar-field)::before {
    content: none;
  }

  .sidebar :where(.sidebar-segmented-control) {
    background: var(--sidebar-control-surface);
    border: 1px solid var(--sidebar-control-border);
    border-radius: var(--sidebar-control-radius);
    box-shadow: none;
    display: grid;
    gap: 2px;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    overflow: hidden;
    padding: 2px;
  }

  .sidebar :where(.sidebar-segmented-control .sidebar-choice-button,
                  .sidebar-segmented-control .sidebar-segmented-option) {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: calc(var(--sidebar-control-radius) - 2px);
    box-shadow: none;
    color: var(--sidebar-control-text);
    display: inline-flex;
    font-size: var(--ui-font-size);
    font-weight: 450;
    justify-content: center;
    line-height: var(--ui-line-height);
    min-block-size: calc(var(--sidebar-segmented-block-size) - 4px);
    min-inline-size: 0;
    padding-block: 3px;
    padding-inline: 8px;
    text-align: center;
    transition: background-color var(--motion-duration-micro) var(--motion-ease-standard), border-color var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-micro) var(--motion-ease-standard);
  }

  .sidebar :where(.sidebar-segmented-control .sidebar-choice-button:hover,
                  .sidebar-segmented-control .sidebar-segmented-option:hover) {
    background: var(--sidebar-control-surface-hover);
    border-color: var(--sidebar-control-border-hover);
    color: var(--text);
  }

  .sidebar .sidebar-segmented-control .sidebar-choice-button.is-active,
  .sidebar .sidebar-segmented-control .sidebar-choice-button[aria-pressed="true"],
  .sidebar .sidebar-segmented-control .sidebar-segmented-option.is-active,
  .sidebar .sidebar-segmented-control .sidebar-segmented-option[aria-selected="true"] {
    background: var(--sidebar-selected-surface);
    border-color: var(--sidebar-selected-border);
    box-shadow: none;
    color: var(--sidebar-selected-text);
    font-weight: 620;
    justify-content: center;
    text-align: center;
  }

  .sidebar :where(.sidebar-segmented-control .sidebar-choice-button:focus-visible,
                  .sidebar-segmented-control .sidebar-segmented-option:focus-visible) {
    outline: var(--focus-ring-width) solid color-mix(in srgb, var(--focus-ring-color) 32%, transparent);
    outline-offset: 2px;
  }

  .sidebar :where(.sidebar-segmented-label,
                  .sidebar-choice-label) {
    display: block;
    font: inherit;
    letter-spacing: 0;
    line-height: inherit;
  }

  .sidebar :where(.sidebar-select,
                  .sidebar-search-input,
                  .sidebar-replace-input,
                  .sidebar-document-rename-input,
                  .sidebar-input) {
    background-color: var(--sidebar-control-surface);
    border: 1px solid var(--sidebar-control-border);
    border-radius: var(--sidebar-control-radius);
    box-shadow: none;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--ui-field-font-size);
    font-weight: var(--ui-field-font-weight);
    line-height: var(--ui-field-line-height);
    min-block-size: var(--sidebar-control-block-size);
  }

  .sidebar :where(.sidebar-select) {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-inline-end: 40px;
  }

  :root[data-theme="dark"] .sidebar :where(.sidebar-select) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f7f4ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }

  .sidebar :where(.sidebar-select:hover,
                  .sidebar-search-input:hover,
                  .sidebar-replace-input:hover,
                  .sidebar-document-rename-input:hover,
                  .sidebar-input:hover,
                  .sidebar-hex-field:hover) {
    background-color: var(--sidebar-control-surface-hover);
    border-color: var(--sidebar-control-border-hover);
  }

  .sidebar :where(.sidebar-select:focus-visible,
                  .sidebar-search-input:focus-visible,
                  .sidebar-replace-input:focus-visible,
                  .sidebar-document-rename-input:focus-visible,
                  .sidebar-input:focus-visible) {
    border-color: var(--sidebar-control-border-hover);
    outline: var(--focus-ring-width) solid color-mix(in srgb, var(--focus-ring-color) 32%, transparent);
    outline-offset: 2px;
  }

  .sidebar :where(.sidebar-select:disabled,
                  .sidebar-search-input:disabled,
                  .sidebar-replace-input:disabled,
                  .sidebar-document-rename-input:disabled,
                  .sidebar-input:disabled) {
    cursor: not-allowed;
    opacity: .56;
  }

  .sidebar :where(.sidebar-hex-field) {
    background: var(--sidebar-control-surface);
    border: 1px solid var(--sidebar-control-border);
    border-radius: var(--sidebar-control-radius);
    display: block;
    inline-size: 100%;
    min-block-size: var(--sidebar-control-block-size);
    overflow: hidden;
    position: relative;
  }

  .sidebar :where(.sidebar-hex-prefix) {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--sidebar-control-muted-text);
    display: inline-flex;
    font-family: var(--font-mono);
    font-size: var(--ui-field-font-size);
    font-weight: var(--ui-field-font-weight);
    inset-block: 0;
    inset-inline-start: 12px;
    justify-content: center;
    line-height: var(--ui-field-line-height);
    padding: 0;
    pointer-events: none;
    position: absolute;
  }

  .sidebar :where(.sidebar-hex-input) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--font-mono);
    font-size: var(--ui-field-font-size);
    font-weight: var(--ui-field-font-weight);
    inline-size: 100%;
    line-height: var(--ui-field-line-height);
    min-block-size: var(--sidebar-control-block-size);
    min-inline-size: 0;
    padding-inline: 28px 12px;
  }

  .sidebar :where(.sidebar-hex-field:focus-within) {
    border-color: var(--sidebar-control-border-hover);
    outline: var(--focus-ring-width) solid color-mix(in srgb, var(--focus-ring-color) 32%, transparent);
    outline-offset: 2px;
  }


  .sidebar :where(.sidebar-outline-list) {
    display: grid;
    gap: var(--space-cluster);
  }

  .sidebar :where(.sidebar-outline-card) {
    align-content: start;
  }

  .sidebar :where(.sidebar-outline-count) {
    color: var(--sidebar-control-muted-text);
  }

  .sidebar :where(.sidebar-outline-tree,
                  .sidebar-outline-children) {
    display: grid;
    gap: 2px;
    list-style: none;
    margin: 0;
    min-inline-size: 0;
    padding: 0;
  }

  .sidebar :where(.sidebar-outline-children) {
    border-inline-start: 1px solid color-mix(in srgb, var(--sidebar-group-border) 82%, transparent);
    margin-block-start: 2px;
    margin-inline-start: calc(8px + var(--outline-depth, 0) * var(--space-cluster));
    padding-inline-start: var(--space-related);
  }

  .sidebar :where(.sidebar-outline-node) {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
  }

  .sidebar :where(.sidebar-outline-item) {
    background: transparent;
    border-color: transparent;
    color: var(--sidebar-control-text);
    display: flex;
    justify-content: flex-start;
    min-block-size: 30px;
    padding-inline: calc(8px + var(--outline-depth, 0) * var(--space-cluster)) 8px;
    position: relative;
    text-align: start;
  }

  .sidebar :where(.sidebar-outline-children .sidebar-outline-item)::before {
    background: color-mix(in srgb, var(--sidebar-group-border) 82%, transparent);
    block-size: 1px;
    content: "";
    inline-size: var(--space-related);
    inset-block-start: 50%;
    inset-inline-start: calc(-1 * var(--space-related));
    position: absolute;
    transform: translateY(-50%);
  }

  .sidebar :where(.sidebar-outline-item:hover) {
    background: var(--sidebar-row-bg-hover);
    border-color: transparent;
    color: var(--text);
  }

  .sidebar :where(.sidebar-outline-item:focus-visible) {
    outline: var(--focus-ring-width) solid color-mix(in srgb, var(--focus-ring-color) 32%, transparent);
    outline-offset: 2px;
  }

  .sidebar :where(.sidebar-outline-item[aria-current="true"],
                  .sidebar-outline-item.is-active) {
    background: var(--sidebar-row-bg-active);
    border-color: var(--sidebar-row-border-hover);
    color: var(--sidebar-selected-text);
    font-weight: 620;
  }

  .sidebar :where(.sidebar-outline-item.is-scrolled-over:not(.is-active):not([aria-current="true"])) {
    background: color-mix(in srgb, var(--text) 4%, transparent);
    color: var(--text);
  }

  .sidebar :where(.sidebar-outline-label) {
    display: block;
    font-size: var(--ui-font-size);
    line-height: var(--ui-line-height);
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar :where(.sidebar-outline-item[data-level="1"] .sidebar-outline-label) {
    font-weight: 620;
  }

  .sidebar :where(.sidebar-outline-item[data-level="2"] .sidebar-outline-label) {
    font-weight: 520;
  }

  .sidebar :where(.sidebar-outline-item[data-level="3"] .sidebar-outline-label,
                  .sidebar-outline-item[data-level="4"] .sidebar-outline-label,
                  .sidebar-outline-item[data-level="5"] .sidebar-outline-label,
                  .sidebar-outline-item[data-level="6"] .sidebar-outline-label) {
    color: inherit;
    font-weight: 450;
  }

  @container sidebar (max-width: 300px) {
    .sidebar :where(.sidebar-segmented-control) {
      grid-auto-flow: row;
      grid-auto-rows: minmax(var(--sidebar-segmented-block-size), auto);
    }
  }
}

@layer surfaces {
  /* Visual repair: keep the sidebar airy without turning status text and fields into bulky cards. */
  .sidebar-file-action-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sidebar-files-tabpanel,
  .sidebar-document-tools-tabpanel {
    display: grid;
    gap: var(--sidebar-panel-section-gap, 10px);
    min-inline-size: 0;
  }

  .sidebar-files-tabpanel[hidden],
  .sidebar-document-tools-tabpanel[hidden] {
    display: none !important;
  }

  .sidebar-files-tabs,
  .sidebar-document-tools-tabs,
  .sidebar-shelf-tabs {
    margin-block-end: 0;
  }

  .sidebar-export-list,
  .sidebar-export-format-grid,
  .sidebar-export-format-actions {
    gap: var(--space-related);
  }

  .sidebar-export-format-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar-export-list .sidebar-export-item {
    justify-content: center;
  }

  .sidebar-file-action-button,
  .sidebar-save-button { justify-content: center; text-align: center; }

  .sidebar-file-action-button svg,
  .sidebar-save-button svg { block-size: 16px; inline-size: 16px; }

  .sidebar-document-item:hover,
  .sidebar-document-item:focus-within {
    background: var(--sidebar-row-bg-hover);
    border-color: var(--sidebar-row-border-hover);
  }

  .sidebar-review-overview {
    gap: 8px;
  }

  .sidebar-review-list,
  .sidebar-review-group {
    gap: 10px;
  }

  .sidebar-review-list .sidebar-section-header {
    margin-block-start: 2px;
  }

  #sidebar-panel-document-tools .sidebar-card-grid,
  .sidebar-outline-card {
    padding: 12px;
  }

  .sidebar :where(.sidebar-outline-tree,
                  .sidebar-outline-children) {
    gap: 1px;
  }

  .sidebar :where(.sidebar-outline-item) {
    min-block-size: 28px;
    padding-block: 4px;
  }

  #sidebar-panel-document-tools .sidebar-card-grid {
    gap: 10px;
  }

  .sidebar-find-options {
    margin-block-start: -2px;
  }

  .sidebar-find-results {
    gap: 0;
  }

  .sidebar-account-card {
    background: var(--sidebar-card-bg);
  }

  @media (prefers-reduced-motion: reduce) {
    .sidebar-close-button,
    .sidebar-close-button::before,
    .sidebar-close-button svg {
      transition-duration: var(--motion-duration-reduced);
    }

    .sidebar-close-button:hover,
    .sidebar-close-button:focus-visible {
      transform: none;
    }
  }

}

@layer overrides {
  /* Control labels stay text-sized on coarse pointers; the actual inputs provide the touch target. */
  @media (pointer: coarse) {
    .sidebar :where(.sidebar-control-label,
                    .sidebar-field-label,
                    .sidebar-section-label) {
      min-block-size: auto;
    }
  }
}

@layer overrides {
  /* Shelf audit cleanup: consume the universal sidebar card/button/input system. */
  #sidebar-panel-shelf {
    --sidebar-card-gap: 18px;
    --sidebar-card-padding: 14px;
    --sidebar-field-stack-gap: 18px;
  }

  .sidebar-shelf-panel .sidebar-panel-body {
    position: relative;
  }

  .sidebar-shelf-panel.is-detail-mode .shelf-filter-section,
  .sidebar-shelf-panel.is-detail-mode .shelf-note-list,
  .sidebar-shelf-panel.is-detail-mode .shelf-new-note-button {
    display: none;
  }

  .sidebar-shelf-panel.is-detail-mode > .sidebar-panel-header {
    visibility: hidden;
    pointer-events: none;
  }

  .sidebar-shelf-panel.is-detail-mode .sidebar-panel-body {
    align-content: start;
    gap: var(--sidebar-panel-body-gap);
    grid-auto-rows: max-content;
    overflow-y: auto;
    padding: var(--sidebar-panel-body-padding);
  }

  .sidebar-shelf-panel.is-detail-mode .shelf-composer {
    gap: 0;
  }

  .sidebar-detail-header {
    align-items: center;
    border-block-end: 0;
    display: flex;
    justify-content: space-between;
    min-block-size: var(--sidebar-control-block-size);
    padding: 0;
  }

  .shelf-back-note-btn {
    align-items: center;
    display: inline-flex;
    gap: 4px;
  }

  .shelf-back-note-btn svg {
    block-size: 16px;
    inline-size: 16px;
  }

  .shelf-note-list {
    gap: var(--sidebar-panel-body-gap);
    padding-block-end: calc(var(--space-section) + var(--space-cluster));
  }

  .shelf-note-card {
    cursor: pointer;
  }

  .shelf-note-card:focus-visible {
    outline: var(--focus-ring-width) solid color-mix(in srgb, var(--focus-ring-color) 32%, transparent);
    outline-offset: 2px;
  }

  .shelf-note-card .sidebar-card-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .shelf-link-card-stack {
    display: none;
  }

  .shelf-new-note-button {
    align-items: center;
    background: var(--sidebar-control-surface);
    border: 1px solid var(--sidebar-group-border);
    border-radius: var(--shape-panel);
    box-shadow: var(--elevation-soft);
    color: var(--text);
    display: inline-flex;
    block-size: 44px;
    inline-size: 44px;
    justify-content: center;
    margin-block-start: var(--space-related);
    margin-inline-start: auto;
    min-block-size: 44px;
    min-inline-size: 44px;
    position: sticky;
    inset-block-end: var(--space-cluster);
    z-index: 2;
  }

  .shelf-new-note-button:hover,
  .shelf-new-note-button:focus-visible {
    background: var(--sidebar-control-surface-hover);
    border-color: var(--sidebar-group-border-hover);
  }

  .shelf-new-note-button svg {
    block-size: 18px;
    inline-size: 18px;
  }

  .shelf-note-editor {
    background: var(--sidebar-control-surface);
    border: 0;
    border-radius: var(--sidebar-control-radius);
  }
}

@layer overrides {
  /* Shelf detail mode overrides stay last because they intentionally reshape the panel. */
  .sidebar.is-shelf-detail-mode {
    --sidebar-panel-body-gap: var(--space-cluster);
  }
  .sidebar-shelf-panel.is-detail-mode .shelf-compose-card {
    overflow: hidden;
  }

  .sidebar-shelf-panel.is-detail-mode .shelf-compose-actions-card {
    border-color: transparent;
    box-shadow: none;
    margin-block-start: calc(-1 * var(--sidebar-panel-body-gap, var(--space-cluster)));
    max-block-size: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(calc(-1 * var(--motion-distance-reveal)));
    transition:
      border-color var(--motion-duration-micro) var(--motion-ease-standard),
      box-shadow var(--motion-duration-micro) var(--motion-ease-standard),
      margin-block-start var(--motion-duration-surface) var(--motion-ease-out),
      max-block-size var(--motion-duration-surface) var(--motion-ease-out),
      opacity var(--motion-duration-micro) var(--motion-ease-standard),
      transform var(--motion-duration-surface) var(--motion-ease-out);
  }

  .sidebar-shelf-panel.is-detail-mode .shelf-compose-actions-card .sidebar-card-grid {
    padding-block: 0;
    transition: padding-block var(--motion-duration-surface) var(--motion-ease-out);
  }

  .sidebar-shelf-panel.is-detail-mode .shelf-compose-actions-card.has-note-actions {
    border-color: var(--sidebar-card-border);
    box-shadow: var(--sidebar-card-shadow, none);
    margin-block-start: 0;
    max-block-size: 180px;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .sidebar-shelf-panel.is-detail-mode .shelf-compose-actions-card.has-note-actions .sidebar-card-grid {
    padding-block: var(--sidebar-card-padding);
  }

  @media (prefers-reduced-motion: reduce) {
    .sidebar-shelf-panel.is-detail-mode .shelf-compose-actions-card,
    .sidebar-shelf-panel.is-detail-mode .shelf-compose-actions-card .sidebar-card-grid {
      transition-duration: var(--motion-duration-reduced);
    }
  }

  .sidebar-shelf-panel.is-detail-mode .shelf-note-editor {
    background: var(--sidebar-control-surface);
    border: 0;
    border-radius: var(--sidebar-control-radius);
    min-block-size: 210px;
    overflow: auto;
  }
}

@layer surfaces {
  /* Files Export PDF card: use the same sidebar card, field, checkbox, and button grammar. */
  .sidebar-pdf-export-grid,
  .sidebar-pdf-section {
    gap: var(--space-cluster);
  }

  .sidebar-pdf-section {
    border: 0;
    display: grid;
    margin: 0;
    min-inline-size: 0;
    padding: 0;
  }

  .sidebar-pdf-settings-grid,
  .sidebar-pdf-cover-grid {
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
  }

  .sidebar-pdf-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sidebar-pdf-cover-grid,
  .sidebar-pdf-export-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar-field-optional {
    color: var(--sidebar-control-muted-text);
    font-weight: 400;
  }

  @container sidebar (max-width: 390px) {
    .sidebar-pdf-settings-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

@layer surfaces {
  .sidebar-pdf-lock-actions,
  .sidebar-pdf-export-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar-pdf-settings-grid .sidebar-control-label {
    white-space: nowrap;
  }
}