@layer surfaces {
  /* Unified dock shell: the navigation rail and active panel share one outer
     surface on desktop/tablet. Compact mode reuses the existing bottom sheet. */
  .sidebar-dock {
    --sidebar-dock-closed-inline: calc(
      var(--topbar-action-target) + var(--topbar-action-target) +
      var(--topbar-action-target) + var(--topbar-action-target) +
      var(--topbar-action-target) + var(--floating-chrome-control-gap) +
      var(--floating-chrome-control-gap) + var(--floating-chrome-control-gap) +
      var(--floating-chrome-control-gap) + var(--floating-chrome-plate-padding) +
      var(--floating-chrome-plate-padding)
    );
    --sidebar-dock-header-block: var(--topbar-floating-chrome-plate-block-size);
    --sidebar-dock-bottom-clearance: max(var(--app-safe-bottom), var(--sidebar-floating-block-gap));
    --sidebar-dock-open-block: max(
      var(--sidebar-dock-header-block),
      calc(
        var(--app-shell-block-size) - var(--app-safe-top) - var(--space-related) -
        var(--sidebar-dock-bottom-clearance)
      )
    );
    --sidebar-dock-open-header-block: var(--sidebar-dock-header-block);
    --sidebar-dock-content-delay: 55ms;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface-sidebar-shell);
    block-size: var(--sidebar-dock-header-block);
    border: 1px solid var(--surface-sidebar-shell-border);
    border-radius: var(--floating-chrome-plate-radius);
    box-shadow: var(--surface-sidebar-shell-shadow);
    display: grid;
    grid-template-rows: var(--sidebar-dock-header-block) minmax(0, 1fr);
    inline-size: var(--sidebar-dock-closed-inline);
    inset-block-start: calc(var(--app-safe-top) + var(--space-related));
    max-block-size: var(--sidebar-dock-open-block);
    max-inline-size: calc(100vw - var(--app-safe-left) - var(--app-safe-right) - (2 * var(--sidebar-floating-gap)));
    overflow: hidden;
    position: fixed;
    transition:
      background-color var(--motion-duration-surface) var(--motion-ease-standard),
      block-size var(--motion-duration-panel-sheet) var(--motion-ease-emphasized),
      border-color var(--motion-duration-surface) var(--motion-ease-standard),
      border-radius var(--motion-duration-surface) var(--motion-ease-standard),
      inline-size var(--motion-duration-panel-sheet) var(--motion-ease-emphasized),
      inset-block-start var(--motion-duration-panel-sheet) var(--motion-ease-emphasized),
      left var(--motion-duration-panel-sheet) var(--motion-ease-emphasized),
      right var(--motion-duration-panel-sheet) var(--motion-ease-emphasized);
    z-index: var(--z-topbar);
  }

  :root[data-sidebar-open="true"]:not([data-sidebar-mode="compact"]) .sidebar-dock {
    background: var(--surface-sidebar-shell);
    block-size: var(--sidebar-dock-open-block);
    border: 1px solid var(--surface-sidebar-shell-border);
    border-radius: var(--shape-panel);
    grid-template-rows: var(--sidebar-dock-open-header-block) minmax(0, 1fr);
    inline-size: max(var(--sidebar-dock-closed-inline), var(--sidebar-floating-inline));
    inset-block-start: calc(var(--app-safe-top) + var(--space-related));
    max-block-size: var(--sidebar-dock-open-block);
  }

  :root[data-sidebar-mode-transition="true"] .sidebar-dock,
  .sidebar-dock[data-sidebar-mode-transition="true"] {
    transition: none;
  }

  [data-sidebar-side="right"] .sidebar-dock {
    left: auto;
    right: calc(var(--app-safe-right) + var(--sidebar-floating-gap));
    transform-origin: right top;
  }

  [data-sidebar-side="left"] .sidebar-dock {
    left: calc(var(--app-safe-left) + var(--sidebar-floating-gap));
    right: auto;
    transform-origin: left top;
  }


  .sidebar-dock-header {
    align-items: center;
    direction: ltr;
    background: transparent;
    border-block-end: 1px solid transparent;
    display: flex;
    gap: var(--space-related);
    inline-size: 100%;
    justify-content: flex-end;
    min-inline-size: 0;
    padding: 0;
    transition:
      border-color var(--motion-duration-surface) var(--motion-ease-standard),
      padding var(--motion-duration-panel-sheet) var(--motion-ease-emphasized);
  }

  :root[data-sidebar-open="true"]:not([data-sidebar-mode="compact"]) .sidebar-dock-header {
    background: var(--surface-sidebar-shell);
    border-block-end-color: color-mix(in srgb, var(--surface-sidebar-shell-border) 78%, transparent);
  }

  [data-sidebar-side="left"] .sidebar-dock-header {
    flex-direction: row-reverse;
  }

  .sidebar-dock-title {
    color: var(--text);
    flex: 1 1 auto;
    font-size: var(--ui-font-size);
    font-weight: var(--ui-font-weight-strong);
    letter-spacing: -0.012em;
    min-inline-size: 0;
    opacity: 0;
    overflow: hidden;
    padding-inline-start: var(--space-cluster);
    text-align: start;
    text-overflow: ellipsis;
    transform: translateY(2px);
    transition:
      opacity var(--motion-duration-state) var(--motion-ease-standard),
      transform var(--motion-duration-state) var(--motion-ease-out);
    white-space: nowrap;
  }

  [data-sidebar-side="left"] .sidebar-dock-title {
    padding-inline-end: var(--space-cluster);
    padding-inline-start: 0;
  }

  .sidebar-dock-title > span { display: none; }
  .sidebar-dock[data-panel="files"] [data-sidebar-dock-title="files"],
  .sidebar-dock[data-panel="document-tools"] [data-sidebar-dock-title="document-tools"],
  .sidebar-dock[data-panel="shelf"] [data-sidebar-dock-title="shelf"],
  .sidebar-dock[data-panel="appearance"] [data-sidebar-dock-title="appearance"],
  .sidebar-dock[data-panel="support"] [data-sidebar-dock-title="support"] { display: inline; }

  :root[data-sidebar-open="true"]:not([data-sidebar-mode="compact"]) .sidebar-dock-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--sidebar-dock-content-delay);
  }

  :root[dir="rtl"] .sidebar-dock-title {
    direction: rtl;
    text-align: right;
  }

  /* The closed navigation rail and open destination remain one inset floating
     utility surface. Header and body share the same neutral shell so the dock
     reads as one unit; lighter cards provide the internal hierarchy. */
  :root,
  body,
  #app {
    background: var(--surface-app-ground);
  }

  .sidebar-dock-header {
    background: var(--surface-sidebar-shell);
  }


  @media (forced-colors: active) {
    .sidebar,
    .sidebar-dock-header,
    .sidebar-panel,
    .sidebar-panel-header,
    .sidebar-panel-body {
      background: Canvas;
      color: CanvasText;
      forced-color-adjust: auto;
    }

    .sidebar-dock {
      background: Canvas;
      border: 1px solid CanvasText;
      color: CanvasText;
      forced-color-adjust: auto;
    }

    :root[data-sidebar-open="true"]:not([data-sidebar-mode="compact"]) .sidebar-dock {
      border: 1px solid CanvasText;
    }

    :root[data-sidebar-open="true"]:not([data-sidebar-mode="compact"]) .sidebar-dock-header {
      border-block-end-color: CanvasText;
    }
  }

  .sidebar-dock-navigation-host {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    min-inline-size: 0;
  }

  .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-active);
    --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-solid);
    --sidebar-primary-button-bg-hover: var(--accent-solid-hover);
    --sidebar-primary-button-bg-active: var(--accent-solid-active);
    --sidebar-primary-button-border: var(--accent-border-strong);
    --sidebar-primary-button-text: var(--accent-solid-foreground);
    --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: 12px;
    --sidebar-panel-header-border: 0;
    --sidebar-panel-header-padding-inline: 16px 14px;
    --sidebar-panel-secondary-bg: var(--sidebar-panel-bg);
    --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);
    --sidebar-selected-control-border: var(--accent-border-strong);
    --sidebar-selected-control-surface: var(--accent-solid);
    --sidebar-selected-control-text: var(--accent-solid-foreground);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--sidebar-panel-bg);
    block-size: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    container: sidebar / inline-size;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    inline-size: 100%;
    inset: auto;
    max-block-size: 100%;
    max-inline-size: none;
    min-block-size: 0;
    opacity: 0;
    overflow: hidden;
    position: relative;
    transform: none;
    transition: opacity var(--motion-duration-exit) var(--motion-ease-in);
    z-index: auto;
  }

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

  :root[data-sidebar-open="true"]:not([data-sidebar-mode="compact"]) .sidebar {
    opacity: 1;
    transition-delay: var(--sidebar-dock-content-delay);
    transition-duration: var(--motion-duration-state);
    transition-timing-function: var(--motion-ease-out);
  }

  .sidebar-sheet-drag-handle { display: none; }
  /* 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: var(--sidebar-panel-bg);
    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: none;
    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;
    padding: var(--sidebar-panel-body-padding, var(--space-section));
  }


  /* 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-inline-actions.sidebar-button-grid) { display: grid; }
  .sidebar :where(.sidebar-button-grid > button, .sidebar-button-grid > a) { inline-size: 100%; min-inline-size: 0; }
  .sidebar :where(.sidebar-button-grid > :only-child) { grid-column: 1 / -1; }
  .sidebar :where(.sidebar-typography-reset-button) { inline-size: 100%; justify-content: center; }
  .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); }

  /* Appearance uses the same quiet card hierarchy as the other utility panels.
     The shared sidebar-card primitive owns each settings group's background,
     border, radius, padding, and spacing. */
  .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-attention) {
    border-color: color-mix(in srgb, var(--danger, var(--accent)) 28%, var(--sidebar-card-border));
    border-inline-start-color: color-mix(in srgb, var(--danger, var(--accent)) 74%, var(--sidebar-card-border));
    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-inline-badges.is-start) { justify-content: flex-start; }
  .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-status-label) {
    --sidebar-status-indicator: var(--text-muted);
    align-items: center;
    color: var(--text-muted);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--ui-font-size-compact);
    font-weight: var(--ui-field-font-weight);
    gap: 6px;
    line-height: var(--ui-line-height);
    white-space: nowrap;
  }
  .sidebar :where(.sidebar-status-label)::before {
    background: var(--sidebar-status-indicator);
    block-size: 6px;
    border-radius: 50%;
    content: "";
    flex: 0 0 auto;
    inline-size: 6px;
  }
  .sidebar :where(.sidebar-status-label.is-accent) {
    --sidebar-status-indicator: var(--accent);
    color: var(--text);
  }
  .sidebar :where(.sidebar-status-label.is-neutral) {
    --sidebar-status-indicator: var(--text-muted);
    color: var(--text-muted);
  }
  .sidebar :where(.sidebar-status-label.is-attention) {
    --sidebar-status-indicator: var(--accent);
    color: var(--text);
  }

  .sidebar :where(.sidebar-card-footer) {
    border-block-start: 1px solid var(--sidebar-card-border);
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
    padding-block-start: var(--space-cluster);
  }
  .sidebar :where(.sidebar-card-footer.is-quiet) {
    border-block-start: 0;
    padding-block-start: 0;
  }
  .sidebar :where(.sidebar-metric-grid) {
    display: grid;
    gap: var(--space-cluster) var(--space-section);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-metric) {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-metric-label) {
    color: var(--text-muted);
    font-size: var(--ui-font-size-compact);
    line-height: var(--ui-line-height);
    margin: 0;
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-metric-value) {
    color: var(--text);
    font-size: var(--ui-font-size);
    font-weight: var(--ui-font-weight-strong);
    line-height: var(--ui-line-height);
    margin: 0;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar :where(.sidebar-summary-list) {
    background: var(--sidebar-control-surface);
    border-radius: var(--sidebar-control-radius);
    display: grid;
    gap: 0;
    margin: 0;
    min-inline-size: 0;
    overflow: hidden;
  }
  .sidebar :where(.sidebar-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 :where(.sidebar-summary-row + .sidebar-summary-row) {
    border-block-start: 1px solid var(--sidebar-row-border);
  }
  .sidebar :where(.sidebar-summary-label) {
    color: var(--sidebar-control-muted-text);
    font-size: var(--ui-font-size-compact);
    line-height: var(--ui-line-height);
    margin: 0;
  }
  .sidebar :where(.sidebar-summary-value) {
    color: var(--text);
    font-size: var(--ui-font-size);
    line-height: var(--ui-line-height);
    margin: 0;
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }
  .sidebar :where(.sidebar-summary-list.is-compact .sidebar-summary-row) {
    padding-block: var(--space-tight);
  }
  .sidebar :where(.sidebar-detail-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 :where(.sidebar-detail-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 :where(.sidebar-detail-item + .sidebar-detail-item) {
    border-block-start: 1px solid var(--sidebar-row-border);
  }
  .sidebar :where(.sidebar-detail-title) {
    color: var(--text);
    font-size: var(--ui-font-size);
    font-weight: var(--ui-font-weight-strong);
    line-height: var(--ui-line-height);
    margin: 0;
    overflow-wrap: anywhere;
  }
  .sidebar :where(.sidebar-detail-copy) {
    color: var(--sidebar-control-muted-text);
    font-size: var(--ui-font-size-compact);
    line-height: var(--ui-line-height);
    overflow-wrap: anywhere;
  }
  .sidebar :where(.sidebar-selectable-card) {
    align-items: start;
    appearance: none;
    background: var(--sidebar-control-surface);
    border: 1px solid var(--sidebar-control-border);
    border-radius: var(--sidebar-control-radius);
    color: var(--text);
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: var(--space-related);
    grid-template-columns: 18px minmax(0, 1fr);
    inline-size: 100%;
    margin: 0;
    min-inline-size: 0;
    padding: var(--space-related);
    text-align: start;
  }
  .sidebar :where(.sidebar-selectable-card:hover) {
    background: var(--sidebar-control-surface-hover);
    border-color: var(--sidebar-control-border-hover);
  }
  .sidebar :where(.sidebar-selectable-card:focus-visible) {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }
  .sidebar :where(.sidebar-selectable-card.is-selected) {
    background: var(--sidebar-selected-surface);
    border-color: var(--sidebar-selected-border);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
  }
  .sidebar :where(.sidebar-selectable-card.is-summary) { cursor: default; }
  .sidebar :where(.sidebar-selectable-card.is-summary:hover) {
    background: var(--sidebar-selected-surface);
    border-color: var(--sidebar-selected-border);
  }
  .sidebar :where(.sidebar-selectable-card-indicator) {
    align-self: start;
    background: var(--sidebar-panel-bg);
    border: 1px solid var(--sidebar-control-border-hover);
    border-radius: 50%;
    block-size: 18px;
    box-shadow: inset 0 0 0 4px var(--sidebar-panel-bg);
    inline-size: 18px;
    margin-block-start: 1px;
  }
  .sidebar :where(.sidebar-selectable-card.is-selected .sidebar-selectable-card-indicator) {
    background: var(--accent);
    border-color: var(--accent-border-strong);
  }
  .sidebar :where(.sidebar-selectable-card-content) {
    display: grid;
    gap: var(--space-tight);
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-selectable-card-heading) {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tight) var(--space-related);
    justify-content: space-between;
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-selectable-card-title) {
    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);
  }
  .sidebar :where(.sidebar-selectable-card-meta,
                  .sidebar-selectable-card-copy) {
    color: var(--sidebar-control-muted-text);
    font-size: var(--ui-font-size-compact);
    line-height: var(--ui-line-height);
  }
  .sidebar :where(.sidebar-selectable-card-copy) { display: block; }
  .sidebar :where(.sidebar-selectable-card-details) {
    border-block-start: 1px solid var(--sidebar-row-border);
    display: grid;
    gap: var(--space-tight);
    margin-block-start: var(--space-tight);
    padding-block-start: var(--space-related);
  }
  .sidebar :where(.sidebar-selectable-card-detail) {
    color: var(--sidebar-control-muted-text);
    display: grid;
    font-size: var(--ui-font-size-compact);
    gap: var(--space-tight);
    grid-template-columns: 6px minmax(0, 1fr);
    line-height: var(--ui-line-height);
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-selectable-card-detail)::before {
    align-self: start;
    background: var(--accent);
    block-size: 5px;
    border-radius: 50%;
    content: "";
    inline-size: 5px;
    margin-block-start: .55em;
  }
  .sidebar :where(.sidebar-selectable-group) {
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-selectable-group.is-joined) {
    background: var(--sidebar-control-surface);
    border: 1px solid var(--sidebar-control-border);
    border-radius: var(--sidebar-control-radius);
    gap: 0;
    overflow: clip;
  }
  .sidebar :where(.sidebar-selectable-group.is-joined > .sidebar-selectable-row) {
    background: transparent;
    border: 0;
    border-radius: 0;
    min-block-size: 0;
    padding: var(--space-cluster) var(--space-related);
  }
  .sidebar :where(.sidebar-selectable-group.is-joined > .sidebar-selectable-row + .sidebar-selectable-row) {
    border-block-start: 1px solid var(--sidebar-row-border);
  }
  .sidebar :where(.sidebar-selectable-group.is-joined > .sidebar-selectable-row:hover) {
    background: var(--sidebar-control-surface-hover);
  }
  .sidebar :where(.sidebar-selectable-group.is-joined > .sidebar-selectable-row:focus-visible) {
    outline-offset: -2px;
    position: relative;
    z-index: 2;
  }
  .sidebar :where(.sidebar-selectable-group.is-joined > .sidebar-selectable-row.is-selected) {
    background: var(--sidebar-selected-surface);
    border-color: transparent;
    box-shadow: inset 0 0 0 1px var(--accent-border-strong);
    position: relative;
    z-index: 1;
  }
  .sidebar :where(.sidebar-selectable-row.is-heading-stacked .sidebar-selectable-card-heading) {
    align-items: start;
    flex-direction: column;
    gap: 1px;
    justify-content: flex-start;
  }
  .sidebar :where(.sidebar-selectable-row.is-heading-stacked .sidebar-selectable-card-meta) {
    margin-inline-start: 0;
    text-align: start;
    white-space: normal;
  }
  .sidebar :where(.sidebar-selectable-row.is-details-plain .sidebar-selectable-card-details) {
    border-block-start: 0;
    margin-block-start: 0;
    padding-block-start: var(--space-tight);
  }
  .sidebar :where(.sidebar-overflow) {
    align-self: start;
    position: relative;
    z-index: 4;
  }

  /* An open floating menu must sit above later cards and their overflow
     triggers. Without elevating the owning card as well as the menu root,
     WebKit can paint a following row's ellipsis button over the menu. */
  .sidebar :where(.sidebar-card):has(.sidebar-overflow-trigger[aria-expanded="true"]) {
    position: relative;
    z-index: 20;
  }
  .sidebar :where(.sidebar-overflow):has(.sidebar-overflow-trigger[aria-expanded="true"]) {
    z-index: 24;
  }
  .sidebar :where(.sidebar-overflow[hidden]) { display: none !important; }
  .sidebar :where(.sidebar-overflow-trigger) {
    block-size: 34px;
    color: var(--text-muted);
    inline-size: 34px;
    min-block-size: 34px;
    min-inline-size: 34px;
    padding: 0;
  }
  .sidebar :where(.sidebar-overflow-trigger svg) {
    block-size: 16px;
    inline-size: 16px;
  }
  .sidebar :where(.sidebar-overflow-trigger[aria-expanded="true"]) {
    background: var(--sidebar-button-bg-active);
    border-color: var(--sidebar-button-border-hover);
    color: var(--text);
  }
  /* Shelf is the canonical sidebar overflow treatment. Shared overflow
     consumers use the same geometry, transparent menu rows, and destructive
     divider rather than maintaining near-matching feature variants. */
  .sidebar :where(.sidebar-overflow-menu) {
    display: grid;
    gap: 2px;
    inline-size: min(176px, calc(100vw - 32px));
    inset-block-start: calc(100% + var(--space-tight));
    inset-inline-end: 0;
    max-block-size: min(240px, calc(100vh - 32px));
    padding: var(--space-tight);
    position: absolute;
    z-index: 12;
  }
  .sidebar :where(.sidebar-overflow-menu[hidden]) { display: none !important; }
  .sidebar :where(.sidebar-menu-action) {
    background: transparent;
    border-color: transparent;
    justify-content: flex-start;
    padding-inline: var(--space-related);
    text-align: start;
  }
  .sidebar :where(.sidebar-overflow-menu .sidebar-menu-action.sidebar-destructive-button) {
    border-block-start-color: var(--sidebar-card-border);
    color: var(--danger);
    margin-block-start: 2px;
  }

  .sidebar :where(.sidebar-disclosure-card) {
    overflow: clip;
    padding: 0;
  }
  .sidebar :where(.sidebar-disclosure) {
    border-block-start: 1px solid var(--sidebar-card-border);
    margin: 0;
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-disclosure-summary) {
    align-items: center;
    cursor: pointer;
    display: grid;
    gap: var(--space-related);
    grid-template-columns: minmax(0, 1fr) auto;
    list-style: none;
    min-block-size: var(--sidebar-control-block-size);
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-disclosure-card > .sidebar-disclosure-summary) {
    min-block-size: var(--touch-target);
    padding: var(--sidebar-card-padding);
  }
  .sidebar :where(.sidebar-disclosure-summary)::-webkit-details-marker { display: none; }
  .sidebar :where(.sidebar-disclosure-summary:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: calc(-1 * var(--focus-ring-width));
  }
  .sidebar :where(.sidebar-disclosure-heading) {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-disclosure-card.is-active) {
    background: color-mix(in srgb, var(--accent-surface) 24%, var(--sidebar-card-bg));
    border-color: var(--accent-border-strong);
  }
  .sidebar :where(.sidebar-disclosure-card-header) {
    align-items: start;
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-disclosure-heading > .sidebar-inline-badges) {
    justify-content: flex-start;
  }
  .sidebar :where(.sidebar-disclosure-chevron) {
    block-size: 16px;
    color: var(--text-muted);
    flex: 0 0 auto;
    inline-size: 16px;
    transition: transform var(--motion-duration-micro) var(--motion-ease-standard);
  }
  .sidebar :where(details[open] > .sidebar-disclosure-summary .sidebar-disclosure-chevron) {
    transform: rotate(180deg);
  }
  .sidebar :where(.sidebar-disclosure-card > .sidebar-disclosure-body) {
    border-block-start: 1px solid var(--sidebar-card-border);
    padding: var(--sidebar-card-padding);
  }
  .sidebar :where(.sidebar-disclosure > .sidebar-disclosure-body) {
    padding-block-start: var(--space-related);
  }

  .sidebar :where(.sidebar-confirmation-surface) {
    gap: var(--space-cluster);
    grid-column: 1 / -1;
    margin-block-start: 2px;
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-confirmation-copy) {
    display: grid;
    gap: var(--space-tight);
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-confirmation-title, .sidebar-confirmation-message) { margin: 0; }
  .sidebar :where(.sidebar-confirmation-title) {
    color: var(--text);
    font-size: var(--ui-font-size);
    font-weight: var(--ui-font-weight-strong);
    line-height: var(--ui-line-height);
  }
  .sidebar :where(.sidebar-confirmation-message) {
    color: var(--text-muted);
    font-size: var(--ui-font-size);
    line-height: var(--ui-line-height);
  }
  .sidebar :where(.sidebar-confirmation-actions .sidebar-small-button) {
    inline-size: auto;
    min-inline-size: max-content;
    padding-inline: var(--space-cluster);
  }

  .sidebar :where(.sidebar-link-card-status-line) { min-block-size: 1px; }
  .sidebar :where(.sidebar-link-card-status-line[data-status="error"]) { color: var(--danger, var(--text)); }

  /* Appearance accent picker. Light appearance shows the opaque material
     pigment directly. Dark appearance keeps that pigment in the compact swatch
     while the selected tile uses the authored night fill and boundary, avoiding
     a broad software-colour block inside the mineral sidebar. */
  .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: var(--accent-preview, var(--accent-solid));
    border-color: var(--accent-preview, var(--accent-border-strong));
    box-shadow: var(--accent-solid-shadow);
    color: var(--accent-preview-on, var(--accent-solid-foreground));
    font-weight: 620;
  }

  [data-theme="dark"] .sidebar .sidebar-segmented-control.sidebar-accent-picker .sidebar-accent-option[aria-pressed="true"],
  [data-theme="dark"] .sidebar .sidebar-segmented-control.sidebar-accent-picker .sidebar-accent-option.is-active {
    background: var(--accent-solid);
    border-color: var(--accent-border-strong);
    color: var(--accent-solid-foreground);
  }

  .sidebar :where(.sidebar-accent-swatch) {
    background: var(--accent-preview, var(--accent-vivid));
    block-size: 16px;
    border: 1px solid color-mix(in srgb, var(--accent-preview, var(--accent-vivid)) 78%, var(--surface-border));
    border-radius: 50%;
    flex: 0 0 16px;
    inline-size: 16px;
  }

  .sidebar :where(.sidebar-accent-option:hover .sidebar-accent-swatch,
                  .sidebar-accent-option:focus-visible .sidebar-accent-swatch) {
    border-color: var(--accent-preview, var(--accent-vivid));
    transform: scale(1.08);
  }

  [data-theme="dark"] .sidebar :where(.sidebar-accent-swatch) {
    background: var(--accent-preview-dark, var(--accent-dark-swatch));
    border-color: color-mix(in srgb, var(--accent-preview-dark, var(--accent-dark-swatch)) 76%, var(--surface-border));
  }

  [data-theme="dark"] .sidebar :where(.sidebar-accent-option:hover .sidebar-accent-swatch,
                                       .sidebar-accent-option:focus-visible .sidebar-accent-swatch) {
    border-color: var(--accent-preview-dark, var(--accent-dark-swatch));
  }

  /* The dark neutral is intentionally almost black. Its fine ivory ring carries
     the picker contrast so the swatch reads as black lacquer, not an empty or
     disabled choice. Selected state continues to use the governed foreground. */
  [data-theme="dark"] .sidebar :where(.sidebar-accent-option[data-accent-opt="grey"] .sidebar-accent-swatch) {
    border-color: var(--accent-pewter-dark-swatch-ring);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-pewter-dark-swatch-ring) 24%, transparent);
  }

  .sidebar :where(.sidebar-accent-option[aria-pressed="true"] .sidebar-accent-swatch,
                  .sidebar-accent-option.is-active .sidebar-accent-swatch) {
    background: transparent;
    border: 2px solid var(--accent-preview-on, var(--accent-solid-foreground));
    block-size: 12px;
    flex-basis: 12px;
    inline-size: 12px;
  }

  [data-theme="dark"] .sidebar :where(.sidebar-accent-option[aria-pressed="true"] .sidebar-accent-swatch,
                                       .sidebar-accent-option.is-active .sidebar-accent-swatch) {
    background: var(--accent-preview-dark, var(--accent-dark-swatch));
    border-color: var(--accent-solid-foreground);
    block-size: 14px;
    flex-basis: 14px;
    inline-size: 14px;
  }

  .sidebar :where(.sidebar-accent-option[data-accent-opt="grey"]) { --accent-preview: var(--accent-pewter-vivid); --accent-preview-dark: var(--accent-pewter-dark-swatch); --accent-preview-on: var(--accent-pewter-on); }
  .sidebar :where(.sidebar-accent-option[data-accent-opt="purple"]) { --accent-preview: var(--accent-aubergine-vivid); --accent-preview-dark: var(--accent-aubergine-dark-swatch); --accent-preview-on: var(--accent-aubergine-on); }
  .sidebar :where(.sidebar-accent-option[data-accent-opt="blue"]) { --accent-preview: var(--accent-lapis-vivid); --accent-preview-dark: var(--accent-lapis-dark-swatch); --accent-preview-on: var(--accent-lapis-on); }
  .sidebar :where(.sidebar-accent-option[data-accent-opt="olive"]) { --accent-preview: var(--accent-olive-vivid); --accent-preview-dark: var(--accent-olive-dark-swatch); --accent-preview-on: var(--accent-olive-on); }
  .sidebar :where(.sidebar-accent-option[data-accent-opt="yellow"]) { --accent-preview: var(--accent-mango-vivid); --accent-preview-dark: var(--accent-mango-dark-swatch); --accent-preview-on: var(--accent-mango-on); }
  .sidebar :where(.sidebar-accent-option[data-accent-opt="orange"]) { --accent-preview: var(--accent-persimmon-vivid); --accent-preview-dark: var(--accent-persimmon-dark-swatch); --accent-preview-on: var(--accent-persimmon-on); }
  .sidebar :where(.sidebar-accent-option[data-accent-opt="red"]) { --accent-preview: var(--accent-claret-vivid); --accent-preview-dark: var(--accent-claret-dark-swatch); --accent-preview-on: var(--accent-claret-on); }

  /* 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-field.is-inline {
    align-items: end;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .sidebar-field.is-inline > :where(.sidebar-field-label, .sidebar-field-help, .sidebar-field-error) {
    grid-column: 1 / -1;
  }
  .sidebar-field-help,
  .sidebar-feedback {
    color: var(--sidebar-control-muted-text);
    font-size: var(--ui-font-size-compact);
    line-height: var(--ui-line-height);
    margin: 0;
    overflow-wrap: anywhere;
  }
  .sidebar-feedback.is-error { color: var(--danger); }
  .sidebar-feedback.is-attention { color: var(--text); }
  .sidebar-feedback.is-success { color: var(--accent-ink, var(--text)); }
  .sidebar-feedback[hidden] { display: none; }
  .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-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 {
    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: none;
    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: none;
  }

  .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-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-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);
    box-shadow: var(--accent-solid-shadow);
    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-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) {
    background: var(--danger-surface);
    border-color: var(--danger-border);
    color: var(--danger);
  }

  .sidebar :where(.sidebar-destructive-button:hover,
                  .sidebar-destructive-button:focus-visible,
                  .sidebar-destructive-button[data-review-delete-confirm="true"]) {
    background: var(--danger-surface-hover);
    border-color: var(--danger);
    color: var(--danger);
  }
  .sidebar :where(.sidebar-command-button.is-inline) { inline-size: auto; }
  .sidebar :where(.sidebar-command-button.is-compact) {
    min-block-size: max(var(--small-control-height), 24px);
    padding-inline: var(--space-related);
  }
  .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-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-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-outline-item { padding-inline-start: calc(var(--space-related) + var(--outline-depth, 0) * var(--space-cluster)); }


  /* Outline, find, and appearance controls. */
  .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-empty-icon { block-size: 24px; inline-size: 24px; }
  .sidebar-empty-icon svg { block-size: 100%; inline-size: 100%; }
  .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-stats-footer { display: none; }
  #sidebar-panel-files .sidebar-panel-body:has(#files-tabpanel-history:not([hidden])) {
    grid-template-rows: max-content minmax(0, 1fr);
    overflow: hidden;
  }
  #files-tabpanel-history {
    block-size: 100%;
    min-block-size: 0;
    overflow: hidden;
  }
  .sidebar-history-list-layout {
    block-size: 100%;
    display: grid;
    gap: var(--space-section);
    grid-template-rows: minmax(0, 1fr) max-content;
    min-block-size: 0;
    min-inline-size: 0;
  }
  .sidebar-history-timeline {
    align-content: start;
    display: grid;
    grid-auto-rows: max-content;
    min-block-size: 0;
    min-inline-size: 0;
  }
  .sidebar-history-list {
    align-content: start;
    display: grid;
    gap: var(--space-section);
    grid-auto-rows: max-content;
    min-inline-size: 0;
  }
  .sidebar-history-date-group {
    align-content: start;
    align-self: start;
    display: grid;
    gap: var(--space-related);
    grid-auto-rows: max-content;
    min-inline-size: 0;
  }
  .sidebar-history-date-group-header {
    margin: 0;
    min-block-size: 0;
    padding: 0;
  }
  .sidebar-history-date-group-title {
    line-height: var(--ui-line-height);
    margin: 0;
    padding: 0;
  }
  .sidebar-history-date-group-list {
    align-content: start;
    align-self: start;
    grid-auto-rows: max-content;
    min-inline-size: 0;
  }
  .sidebar-history-item {
    align-self: start;
    cursor: pointer;
    font-family: var(--font-ui);
    overflow: visible;
    position: relative;
  }
  .sidebar-history-item:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
  }
  .sidebar-history-item.is-current {
    border-color: var(--accent-border-strong);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  }
  .sidebar-history-item[aria-busy="true"] { cursor: progress; }
  .sidebar-history-item-header { align-items: start; }
  .sidebar-history-kind-label {
    color: var(--text-muted);
    font-size: var(--ui-font-size);
    font-weight: var(--ui-field-font-weight);
    letter-spacing: 0;
    line-height: var(--ui-line-height);
    white-space: normal;
  }
  .sidebar-history-name {
    color: var(--text);
    font-weight: var(--ui-font-weight-strong);
    white-space: pre-wrap;
  }
  .sidebar-history-note {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: pre-wrap;
  }
  .sidebar-history-item.is-current .sidebar-history-note {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
  }
  .sidebar-metadata-footer {
    align-items: center;
    border-block-start: 1px solid var(--sidebar-row-border);
    display: flex;
    gap: var(--space-related);
    inline-size: 100%;
    justify-content: space-between;
    margin-block-start: var(--space-related);
    min-inline-size: 0;
    padding-block-start: var(--space-related);
  }
  .sidebar-metadata-date {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar-history-metadata-footer { grid-column: 1 / -1; }
  .sidebar-history-word-count { flex: 0 0 auto; }
  .sidebar-history-details {
    border-block-start: 1px solid var(--sidebar-row-border);
    display: grid;
    gap: var(--space-related);
    padding-block-start: var(--space-related);
  }
  .sidebar-history-actions :where(.sidebar-primary-cta-button, .sidebar-secondary-button) {
    white-space: normal;
  }
  .sidebar-history-empty { min-block-size: 0; }
  .sidebar-history-list-footer { margin-block-start: 0; min-block-size: 0; }
  .sidebar-history-save-version-button { inline-size: 100%; justify-content: center; min-block-size: 40px; }
  .sidebar-history-composer { gap: var(--space-cluster); }
  .sidebar-history-save-form { padding: 0; }
  .sidebar-history-save-actions { margin-block-start: var(--space-tight); }
  .sidebar-history-composer[hidden] { display: none; }
  /* Review state hooks shared by the canonical Review presentation below. */
  .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 .sidebar-review-menu-action {
    background: transparent;
    border-color: transparent;
    inline-size: 100%;
    justify-content: flex-start;
    padding-inline: var(--space-related);
    text-align: start;
  }
  .sidebar .sidebar-review-menu-action.sidebar-destructive-button {
    border-block-start-color: var(--sidebar-card-border);
    color: var(--danger);
    margin-block-start: 2px;
  }

  /* Account panel. */
  #support-tabpanel-account > .sidebar-support-section-header { display: none; }
  .sidebar-account-onboarding-card { align-content: start; }
  .sidebar-account-onboarding-card.is-account-flow-expanded {
    border-color: color-mix(in srgb, var(--sidebar-control-border) 82%, var(--text) 18%);
    gap: var(--space-related);
  }
  .sidebar-account-inline-flow {
    border-block-start: 1px solid var(--sidebar-row-border);
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
    padding-block-start: var(--space-cluster);
  }
  .sidebar-account-inline-preparing {
    color: var(--sidebar-control-muted-text);
    font-size: var(--ui-font-size);
    line-height: var(--ui-line-height);
    margin: 0;
  }
  .sidebar-account-inline-form {
    display: grid;
    gap: var(--space-cluster);
    min-inline-size: 0;
  }
  .sidebar-account-inline-form .sidebar-field { min-inline-size: 0; }
  .sidebar-account-inline-form .sidebar-input { inline-size: 100%; min-inline-size: 0; }
  .sidebar :where(.sidebar-stepper-field) {
    align-items: end;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .sidebar :where(.sidebar-stepper-field > .sidebar-field-label) { grid-column: 1 / -1; }
  .sidebar :where(.sidebar-stepper) {
    display: grid;
    gap: var(--space-tight);
    grid-template-columns: repeat(2, var(--sidebar-control-block-size));
  }
  .sidebar :where(.sidebar-stepper-button) {
    block-size: var(--sidebar-control-block-size);
    inline-size: var(--sidebar-control-block-size);
    min-block-size: var(--sidebar-control-block-size);
    min-inline-size: var(--sidebar-control-block-size);
    padding: 0;
  }
  .sidebar :where(.sidebar-stepper-summary) {
    background: var(--sidebar-control-surface);
    border: 1px solid var(--sidebar-control-border);
    border-radius: var(--sidebar-control-radius);
    padding: var(--space-related);
  }
  .sidebar :where(.sidebar-button-grid.is-form-actions) {
    border-block-start: 1px solid var(--sidebar-row-border);
    padding-block-start: var(--space-cluster);
  }
  .sidebar :where(.sidebar-button-grid.is-form-actions > .sidebar-command-button) {
    white-space: normal;
  }
  .sidebar-season-hero-card {
    gap: 0;
    overflow: hidden;
    padding: 0;
  }
  .sidebar-season-card-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-animal-card { overflow: hidden; }
  .sidebar-season-animal-heading {
    line-height: var(--ui-line-height);
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  /* 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-compose-card {
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
  }
  .shelf-note-surface {
    display: grid;
    min-inline-size: 0;
    padding: var(--sidebar-card-padding);
  }
  .shelf-title-row {
    align-items: start;
    display: grid;
    gap: var(--space-tight);
    grid-template-columns: minmax(0, 1fr) auto;
    min-inline-size: 0;
    position: relative;
  }
  .sidebar .shelf-title-input {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--sidebar-control-radius);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: calc(var(--ui-field-font-size) * 1.22);
    font-synthesis: weight;
    font-weight: 700;
    inline-size: 100%;
    letter-spacing: -0.012em;
    line-height: 1.3;
    min-block-size: 38px;
    min-inline-size: 0;
    outline: none;
    padding: 2px 0 var(--space-tight);
  }
  .sidebar .shelf-title-input::placeholder {
    color: var(--text-muted);
    font-weight: 700;
    opacity: 1;
  }
  .shelf-tag-input::placeholder { color: var(--text-muted); opacity: 1; }
  .shelf-note-more-actions {
    align-self: start;
    position: relative;
  }
  .shelf-note-more-actions[hidden] { display: none; }
  .sidebar :where(.shelf-note-menu-action, [data-shelf-note-menu-action]) {
    background: transparent;
    border-color: transparent;
    justify-content: flex-start;
    padding-inline: var(--space-related);
    text-align: start;
  }
  .sidebar .shelf-note-menu-action[aria-checked="true"]::after {
    color: var(--accent);
    content: "✓";
    margin-inline-start: auto;
  }
  .sidebar [data-shelf-note-menu-destructive] {
    border-block-start-color: var(--sidebar-card-border);
    color: var(--danger);
    margin-block-start: 2px;
  }
  .shelf-title-input:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }
  .shelf-note-editor {
    max-block-size: clamp(260px, 46dvh, 520px);
    min-block-size: clamp(112px, 14dvh, 156px);
    overscroll-behavior-block: contain;
  }
  .shelf-note-editor[data-selection-dragging="true"] {
    overflow-anchor: none;
    scroll-behavior: 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: clamp(112px, 14dvh, 156px);
    outline: none;
    padding: var(--space-tight) 0 var(--space-cluster);
  }
  .shelf-tag-editor {
    display: grid;
    min-inline-size: 0;
    padding-block-start: var(--space-tight);
  }
  .shelf-tag-control {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tight);
    min-block-size: 30px;
    min-inline-size: 0;
  }
  .shelf-tag-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tight);
    min-inline-size: 0;
  }
  .shelf-tag-list:empty { display: none; }
  .sidebar .shelf-tag-chip {
    align-items: center;
    border-radius: calc(var(--sidebar-control-radius) - 2px);
    color: var(--accent);
    display: inline-flex;
    gap: 0;
    max-inline-size: 100%;
    min-block-size: 24px;
    padding-inline-start: 3px;
    transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
  }
  .shelf-tag-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (hover: hover) {
    .sidebar .shelf-tag-chip:hover { background: var(--accent-surface); }
  }
  .sidebar .shelf-tag-chip:focus-within {
    background: var(--accent-surface);
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 1px;
  }
  .shelf-tag-remove-button {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: currentColor;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 24px;
    inline-size: 24px;
    justify-content: center;
    min-block-size: 24px;
    min-inline-size: 24px;
    opacity: .58;
    padding: 0;
  }
  .shelf-tag-remove-button:hover,
  .shelf-tag-remove-button:focus-visible {
    background: transparent;
    opacity: 1;
    outline: 0;
  }
  .shelf-tag-remove-button svg {
    block-size: 12px;
    inline-size: 12px;
  }
  .shelf-tag-input {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--sidebar-control-radius);
    color: var(--text);
    flex: 0 1 96px;
    font: inherit;
    inline-size: auto;
    min-block-size: 28px;
    min-inline-size: 76px;
    outline: none;
    padding: 0;
  }
  .shelf-tag-input:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
  }
  .shelf-note-footer {
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
  }
  .shelf-note-completion-actions {
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
  }
  .shelf-note-editor .tiptap:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }
  .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-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-summary) {
    color: var(--sidebar-control-muted-text);
    font-size: var(--ui-font-size-compact);
    line-height: var(--ui-line-height);
    margin: -2px 0 2px;
  }

  .sidebar :where(.sidebar-find-results-summary[hidden]) {
    display: 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.6ch minmax(0, 1fr);
    min-block-size: 48px;
    padding-block: 8px;
    padding-inline: 4px 8px;
    text-align: start;
  }

  .sidebar :where(.sidebar-search-result-group) {
    min-block-size: 54px;
  }

  .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 var(--focus-ring-color);
    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: 550;
    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-copy) {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
  }

  .sidebar :where(.sidebar-search-result-meta) {
    color: var(--sidebar-control-muted-text);
    font-size: var(--ui-font-size-compact);
    font-weight: 550;
    line-height: var(--ui-line-height);
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar :where(.sidebar-search-result-context) {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    line-height: 1.42;
    min-inline-size: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-wrap: pretty;
    white-space: normal;
  }

  .sidebar :where(.sidebar-search-result-group .sidebar-search-result-context) {
    -webkit-line-clamp: 3;
  }

  .sidebar :where(.sidebar-search-result-match) {
    -webkit-box-decoration-break: clone;
    background: color-mix(in srgb, var(--accent) 24%, transparent);
    border-radius: var(--shape-technical);
    box-decoration-break: clone;
    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;
  }

  @media (forced-colors: active) {
    .sidebar :where(.sidebar-search-result.is-active,
                    .sidebar-search-result[aria-current="true"]) {
      border-color: Highlight;
    }

    .sidebar :where(.sidebar-search-result-match) {
      background: Highlight;
      color: HighlightText;
      forced-color-adjust: none;
    }
  }

  @container sidebar (max-width: 300px) {
    .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 {
      /* The dock border owns the tablet width. The panel body must consume the
         dock content box rather than re-applying the outer width and spilling
         one border-width beyond the shared shell. */
      inline-size: 100%;
    }
  }

  @media (max-width: 599px), (max-width: 767px) and (pointer: coarse) {
    .sidebar-dock {
      display: contents;
    }

    .sidebar-dock-header {
      display: none;
    }

    .sidebar {
      background: var(--sidebar-panel-bg);
      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;
      transition: var(--sidebar-sheet-transition);
      position: fixed;
      transform: var(--sidebar-sheet-closed-transform);
      z-index: var(--z-sidebar);
    }

    .sidebar[data-sidebar-open="true"] {
      block-size: var(--sidebar-sheet-open-block-size);
      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; display: flex; 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;
      padding-block-end: max(var(--sidebar-panel-body-padding, var(--space-section)), calc(var(--app-safe-bottom) + var(--space-section)));
    }
    .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; }
    .sidebar .sidebar-noncompact-only { display: none; }
  }
}


@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;
  }

}



@layer components {
  @keyframes sidebar-panel-enter {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @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) backwards;
  }

  :root:not([data-sidebar-mode="compact"]) .sidebar[data-sidebar-open="true"] :where(.sidebar-panel) {
    animation-delay: var(--sidebar-dock-content-delay);
  }

  .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) backwards;
  }

  .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-selectable-card, .sidebar-export-item, .sidebar-destructive-button, .sidebar-close-button, .sidebar-search-clear-button, .sidebar-document-open-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-selectable-card:not(.is-summary):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-selectable-card:not(.is-summary):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-control-surface);
    border-color: var(--sidebar-selected-control-border);
    box-shadow: var(--accent-solid-shadow);
    color: var(--sidebar-selected-control-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 var(--focus-ring-color);
    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-textarea) {
    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(--ed-body-font, var(--font-ui));
    font-size: var(--ui-field-font-size);
    font-weight: var(--ui-field-font-weight);
    inline-size: 100%;
    line-height: var(--ed-line-height, var(--ui-field-line-height));
    min-block-size: 72px;
    min-inline-size: 0;
    padding: var(--space-related) var(--space-cluster);
    resize: vertical;
  }

  .sidebar :where(.sidebar-textarea::placeholder) {
    color: var(--sidebar-control-muted-text);
    opacity: 1;
  }

  .sidebar :where(.sidebar-textarea:hover) {
    background-color: var(--sidebar-control-surface-hover);
    border-color: var(--sidebar-control-border-hover);
  }

  .sidebar :where(.sidebar-textarea:focus-visible) {
    border-color: var(--sidebar-control-border-hover);
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: calc(-1 * var(--focus-ring-width));
  }

  .sidebar :where(.sidebar-textarea[aria-invalid="true"]) {
    border-color: var(--danger);
    outline: var(--focus-ring-width) solid var(--danger);
    outline-offset: calc(-1 * var(--focus-ring-width));
  }

  .sidebar :where(.sidebar-textarea:disabled) {
    cursor: not-allowed;
    opacity: .56;
  }

  .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 var(--focus-ring-color);
    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 var(--focus-ring-color);
    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 var(--focus-ring-color);
    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-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-format-description,
  .sidebar-export-status {
    margin: 0;
  }

  .sidebar-export-format-description {
    color: var(--sidebar-control-muted-text);
  }

  .sidebar-export-pdf-options {
    display: grid;
    gap: var(--space-cluster);
    min-inline-size: 0;
  }

  .sidebar-export-pdf-options[hidden],
  .sidebar-export-status[hidden] {
    display: none !important;
  }

  .sidebar-export-status[data-state="error"] {
    color: var(--danger);
  }

  .sidebar-export-status[data-state="busy"] {
    color: var(--status-info, var(--text-muted));
  }

  .sidebar-export-status[data-state="success"] {
    color: var(--text);
  }

  .sidebar-export-workspace-card[aria-busy="true"] {
    cursor: progress;
  }

  .sidebar-export-workspace-footer { gap: var(--space-cluster); }
  .sidebar-export-workspace-actions { grid-template-columns: minmax(0, 1fr); }

  .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-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;
  }

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

    .sidebar[data-sidebar-open="true"] :where(.sidebar-panel) {
      animation-duration: var(--motion-duration-reduced);
      animation-delay: 0ms;
      transform: none;
    }

    .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 note title must remain a heading after the global UI-field typography reset. */
  #sidebar .shelf-title-input,
  #sidebar .shelf-title-input::placeholder {
    font-size: calc(var(--ui-field-font-size) * 1.22);
    font-weight: 700;
    letter-spacing: -0.012em;
    line-height: 1.3;
  }
}

@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:not(.is-detail-mode) .sidebar-panel-body {
    grid-template-rows: minmax(0, 1fr);
    overflow-y: hidden;
  }

  .sidebar-shelf-panel:not(.is-detail-mode) .shelf-composer.is-collapsed {
    display: none;
  }

  .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-list-layout,
  .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;
    padding: var(--sidebar-panel-body-padding);
  }

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

  .shelf-list-layout {
    block-size: 100%;
    display: grid;
    gap: var(--sidebar-panel-body-gap);
    grid-template-rows: max-content minmax(0, 1fr) max-content;
    min-block-size: 0;
  }

  .shelf-filter-section {
    min-inline-size: 0;
  }

  .shelf-filter-select-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shelf-filter-select-row > .sidebar-select {
    min-inline-size: 0;
  }

  .shelf-note-list {
    align-content: start;
    gap: var(--space-related);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-block-size: 0;
    padding-inline-end: 2px;
  }

  .shelf-note-card {
    --sidebar-card-gap: var(--space-related);
    --sidebar-card-padding: 8px 10px;
    cursor: pointer;
    min-block-size: 84px;
  }

  .shelf-note-card:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
  }

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

  .shelf-note-card .sidebar-card-heading {
    block-size: 100%;
    gap: var(--space-related);
    grid-template-rows: minmax(0, 1fr) max-content;
  }

  .shelf-note-card .sidebar-card-title {
    display: block;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shelf-note-card .shelf-note-card-meta {
    display: grid;
    font-size: var(--ui-font-size-compact);
    gap: 1px;
    grid-template-rows: max-content max-content;
    line-height: 1.2;
    min-inline-size: 0;
    white-space: nowrap;
  }

  .shelf-note-card-date,
  .shelf-note-card-time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shelf-note-card-time-row {
    align-items: center;
    display: grid;
    gap: var(--space-tight);
    grid-template-columns: minmax(0, 1fr) 14px;
    min-inline-size: 0;
  }

  .shelf-note-pin-slot {
    align-items: center;
    block-size: 14px;
    color: var(--accent);
    display: inline-grid;
    inline-size: 14px;
    justify-items: center;
  }

  .shelf-note-pin-indicator {
    block-size: 14px;
    fill: none;
    inline-size: 14px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .sidebar-list-footer,
  .shelf-list-footer {
    background: var(--sidebar-panel-secondary-bg);
    border-block-start: 1px solid color-mix(in srgb, var(--sidebar-group-border) 72%, transparent);
    display: grid;
    min-inline-size: 0;
    padding-block-start: var(--space-related);
    position: relative;
    z-index: 2;
  }

  .shelf-new-note-button {
    justify-content: center;
    min-block-size: 40px;
  }

  .shelf-note-editor {
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  /* The detail composer consumes the panel's available block space. The note
     surface grows on desktop, while its editor becomes the internal scrollport
     so the completion actions remain available at every viewport height. */
  .sidebar-shelf-panel.is-detail-mode .sidebar-panel-body {
    grid-template-rows: minmax(0, 1fr);
  }

  .sidebar-shelf-panel.is-detail-mode :where(
    .shelf-composer,
    .shelf-composer-expanded,
    .shelf-compose-card,
    .shelf-note-surface
  ) {
    block-size: 100%;
    min-block-size: 0;
  }

  .sidebar-shelf-panel.is-detail-mode .shelf-composer-expanded {
    grid-template-rows: minmax(0, 1fr);
  }

  .sidebar-shelf-panel.is-detail-mode .shelf-compose-card {
    grid-template-rows: minmax(0, 1fr) max-content;
  }

  .sidebar-shelf-panel.is-detail-mode .shelf-note-surface {
    grid-template-rows: max-content minmax(0, 1fr) max-content;
  }

  .sidebar-shelf-panel.is-detail-mode .shelf-note-editor {
    block-size: 100%;
    max-block-size: none;
    min-block-size: 0;
  }

  .sidebar-shelf-panel.is-detail-mode .shelf-note-editor .tiptap {
    box-sizing: border-box;
    min-block-size: 100%;
  }

  /* Compact Shelf detail does not need the generic panel title row because the
     note itself owns its title and Done is the exit action. Remove that hidden
     row, but preserve the sheet drag zone so the note begins near the top
     without sitting beneath the drag target. */
  :root[data-sidebar-mode="compact"] .sidebar-shelf-panel.is-detail-mode > .sidebar-panel-header {
    display: none;
  }

  :root[data-sidebar-mode="compact"] .sidebar-shelf-panel.is-detail-mode .sidebar-panel-body {
    padding-block-start: calc(var(--sidebar-sheet-drag-zone) + var(--space-tight));
  }

  @media (max-width: 599px), (max-width: 767px) and (pointer: coarse) {
    /* Mobile keyboards reduce the visual viewport without always resizing the
       layout viewport. Lift and resize the open sheet to the visible area so
       Done and Add to document stay above the keyboard. */
    :root[data-keyboard-visible="true"] .sidebar[data-sidebar-open="true"] {
      block-size: var(--app-visual-viewport-block);
      bottom: var(--visual-keyboard-inset, 0px);
      max-block-size: var(--app-visual-viewport-block);
    }

    :root[data-keyboard-visible="true"] .sidebar-shelf-panel.is-detail-mode .sidebar-panel-body {
      padding-block-end: var(--sidebar-panel-body-padding, var(--space-section));
    }

    :root[data-keyboard-visible="true"] .sidebar-shelf-panel.is-detail-mode .shelf-note-editor {
      min-block-size: 72px;
    }
  }
}

@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: visible;
  }

}

@layer surfaces {
  /* Documents Export workspace: PDF options use shared fields and reveal only relevant controls. */

  .sidebar-pdf-colour-control {
    align-items: center;
    display: grid;
    gap: var(--space-related);
    grid-template-columns: var(--control-block-size) minmax(0, 1fr);
  }

  .sidebar-pdf-colour-swatch {
    appearance: none;
    background: transparent;
    block-size: var(--control-block-size);
    border: 1px solid var(--control-border);
    border-radius: var(--shape-control);
    cursor: pointer;
    inline-size: var(--control-block-size);
    padding: 3px;
  }

  .sidebar-pdf-colour-swatch::-webkit-color-swatch-wrapper { padding: 0; }
  .sidebar-pdf-colour-swatch::-webkit-color-swatch,
  .sidebar-pdf-colour-swatch::-moz-color-swatch {
    border: 0;
    border-radius: calc(var(--shape-control) - 4px);
  }

  .sidebar-pdf-colour-swatch:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  .sidebar-pdf-branding-preview {
    --pdf-brand-heading-colour: var(--colour-ink-950);
    background: var(--colour-linen-50);
    border: 1px solid color-mix(in srgb, var(--colour-ink-950) 16%, transparent);
    border-radius: var(--shape-control);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--colour-linen-50) 70%, transparent);
    display: grid;
    gap: 6px;
    margin-block-start: var(--space-tight);
    min-block-size: 74px;
    padding: 12px 14px;
  }

  .sidebar-pdf-branding-preview-heading,
  .sidebar-pdf-branding-preview-rule,
  .sidebar-pdf-branding-preview-line {
    border-radius: var(--shape-technical);
    display: block;
  }

  .sidebar-pdf-branding-preview-heading {
    background: var(--pdf-brand-heading-colour);
    block-size: 7px;
    inline-size: 48%;
  }

  .sidebar-pdf-branding-preview-rule {
    background: var(--colour-stone-400);
    block-size: 1px;
    inline-size: 100%;
    margin-block: 2px;
  }

  .sidebar-pdf-branding-preview-line {
    background: var(--colour-ink-650);
    block-size: 4px;
    inline-size: 68%;
    opacity: 0.68;
  }

  .sidebar-pdf-branding-preview-line-long { inline-size: 91%; }

  .sidebar-pdf-colour-reset {
    justify-self: start;
    margin-block-start: calc(var(--space-tight) * -1);
  }

  .sidebar-pdf-subsection-label {
    border-block-start: 1px solid var(--panel-row-border);
    color: var(--text-sec);
    font-size: var(--type-size-meta);
    font-weight: var(--type-weight-strong);
    letter-spacing: .04em;
    margin-block-start: var(--space-related);
    padding-block-start: var(--space-section);
    text-transform: uppercase;
  }
  .sidebar-pdf-section {
    border: 0;
    display: grid;
    gap: var(--space-cluster);
    margin: 0;
    min-inline-size: 0;
    padding: 0;
  }

  /* PDF groups use ordinary section headings rather than fieldset legends.
     This keeps each divider on its own row, with equal breathing room above
     and below, instead of letting WebKit draw the border through the legend. */
  .sidebar-pdf-section + .sidebar-pdf-section {
    border-block-start: 1px solid color-mix(in srgb, var(--sidebar-card-border) 82%, transparent);
    margin-block-start: var(--space-cluster);
    padding-block-start: var(--space-cluster);
  }

  .sidebar-pdf-section-title {
    margin: 0;
  }

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

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

  .sidebar-pdf-unlocked-controls {
    display: grid;
    gap: 0;
    min-inline-size: 0;
  }

  .sidebar-export-lock-copy[hidden],
  .sidebar-pdf-unlocked-controls[hidden],
  .sidebar-pdf-section [hidden],
  .sidebar-export-logo-empty[hidden],
  .sidebar-export-logo-selected[hidden] {
    display: none !important;
  }

  .sidebar-export-logo-empty,
  .sidebar-export-logo-selected {
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
  }

  .sidebar-export-logo-empty .sidebar-secondary-button {
    inline-size: 100%;
  }

  .sidebar-export-logo-summary {
    align-items: center;
    display: grid;
    gap: var(--space-related);
    grid-template-columns: 44px minmax(0, 1fr);
    min-inline-size: 0;
  }

  .sidebar-export-logo-preview {
    background: var(--sidebar-control-bg);
    block-size: 44px;
    border: 1px solid var(--sidebar-control-border);
    border-radius: var(--sidebar-control-radius);
    inline-size: 44px;
    object-fit: contain;
    padding: 4px;
  }

  .sidebar-export-logo-name {
    color: var(--text);
    font-size: var(--ui-font-size-compact);
    line-height: var(--ui-line-height);
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

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

  .sidebar-field-optional {
    color: var(--sidebar-control-muted-text);
    font-weight: 400;
    margin-inline-start: var(--space-tight);
  }

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

@layer surfaces {
  .sidebar[data-account-inline-flow="true"] .sidebar-panel-body {
    scroll-padding-block: var(--space-cluster) min(42dvh, 320px);
  }

  .sidebar-account-inline-form {
    scroll-margin-block: var(--space-cluster);
  }

  .sidebar-account-inline-form [aria-invalid="true"] {
    border-color: var(--danger);
    outline: 2px solid color-mix(in srgb, var(--danger) 32%, transparent);
    outline-offset: 1px;
  }

  .sidebar-account-inline-form[aria-busy="true"] {
    cursor: progress;
  }

  @media (max-width: 767px) {
    .sidebar-account-inline-flow {
      max-block-size: calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - var(--toolbar-h));
      overscroll-behavior: contain;
    }

    .sidebar-account-inline-form .sidebar-input {
      font-size: max(16px, var(--ui-field-font-size));
    }
  }

  @media (max-width: 420px) {
    .sidebar :where(.sidebar-button-grid.is-responsive-stack) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (forced-colors: active) {
    .sidebar-account-inline-form [aria-invalid="true"] {
      border-color: Mark;
      outline: 2px solid Mark;
    }
  }
}

@layer surfaces {
  /* Documents workspace: document state remains core-owned while this surface
     consumes the same card, status, metric, footer, and overflow primitives as
     Shelf, Review, and the other revised sidebars. */
  .sidebar-documents-entry-card .sidebar-card-grid,
  .sidebar-files-document-card .sidebar-card-grid {
    gap: var(--space-cluster);
  }

  .sidebar-document-list {
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
  }

  .sidebar-document-item {
    overflow: visible;
    position: relative;
  }

  .sidebar-document-row {
    align-items: start;
    display: grid;
    gap: var(--space-related);
    grid-template-columns: minmax(0, 1fr) auto;
    min-inline-size: 0;
  }

  .sidebar-document-item.is-saving {
    border-color: color-mix(in srgb, var(--accent) 44%, var(--sidebar-card-border));
  }

  .sidebar-document-item.is-save-error {
    border-color: color-mix(in srgb, var(--danger, var(--text)) 52%, var(--sidebar-card-border));
  }

  .sidebar-document-item[aria-busy="true"] { cursor: progress; }
  .sidebar-document-item[aria-busy="true"] .sidebar-document-open-button { opacity: .72; }

  .sidebar-document-open-button {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: flex;
    inline-size: 100%;
    justify-content: flex-start;
    min-block-size: 34px;
    min-inline-size: 0;
    padding: 0;
    text-align: start;
  }

  /* The document title is the card's primary click target, but focus belongs to
     the document card as a whole. This avoids a second accent rectangle around
     only the title and status after switching documents in WebKit. */
  .sidebar-document-open-button:focus-visible { outline: none; }

  .sidebar-document-item:has(.sidebar-document-open-button:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  .sidebar-document-heading { gap: 2px; inline-size: 100%; }
  .sidebar-document-name { cursor: text; display: block; min-inline-size: 0; }
  .sidebar-document-item.is-current {
    background: color-mix(in srgb, var(--accent-surface) 34%, var(--sidebar-card-bg));
    border-color: var(--accent-border-strong);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
  }

  /* Selection belongs to the complete document card. The title keeps the
     standard text colour so it does not become a second, competing accent. */
  .sidebar-document-item.is-current .sidebar-document-name { color: var(--text); }

  .sidebar-document-status {
    inline-size: max-content;
    max-inline-size: 100%;
  }

  .sidebar-document-file-link {
    display: block;
    max-inline-size: 100%;
  }

  .sidebar-document-file-link[hidden] { display: none; }

  .sidebar-document-stats-footer { min-inline-size: 0; }
  .sidebar-document-metrics { inline-size: 100%; }

  .sidebar-document-rename-input {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .sidebar-document-item.is-renaming .sidebar-document-stats-footer { display: none; }

  .sidebar-document-item.is-close-confirming {
    background: var(--sidebar-card-bg);
    border-color: var(--sidebar-card-border-hover);
  }

  /* Shelf is the visual source of truth for overflow menus. These late-layer
     rules intentionally follow the generic button rules so Documents, Review,
     and other shared-menu consumers receive the same unboxed rows and separated
     destructive action as Shelf. */
  .sidebar .sidebar-overflow-menu .sidebar-menu-action {
    background: transparent;
    border-color: transparent;
    justify-content: flex-start;
    padding-inline: var(--space-related);
    text-align: start;
  }

  .sidebar .sidebar-overflow-menu .sidebar-menu-action.sidebar-destructive-button {
    background: transparent;
    border-color: transparent;
    border-block-start-color: var(--sidebar-card-border);
    color: var(--danger);
    margin-block-start: 2px;
  }

  @container sidebar (max-width: 300px) {
    .sidebar-file-action-list,
    .sidebar-history-actions {
      grid-template-columns: minmax(0, 1fr);
    }

    .sidebar-overflow-menu {
      inline-size: min(176px, calc(100vw - 24px));
    }
  }

  @media (pointer: coarse) {
    .sidebar-overflow-trigger {
      block-size: var(--touch-target);
      inline-size: var(--touch-target);
      min-block-size: var(--touch-target);
      min-inline-size: var(--touch-target);
    }
  }

  @media (forced-colors: active) {
    .sidebar-document-item.is-current,
    .sidebar-document-item.is-saving,
    .sidebar-document-item.is-save-error {
      border-color: Highlight;
    }
  }

  .sidebar :where(.sidebar-hex-field:has(.sidebar-hex-input[aria-invalid="true"]),
                  .sidebar-hex-input[aria-invalid="true"]) {
    border-color: var(--danger);
  }

}

@layer overrides {
  /* Shelf headings need their own compact scale. This override layer follows
     the shared editor layer, so the narrow note editor no longer inherits the
     document page's heading sizes unchanged. */
  .shelf-note-editor .tiptap :where(h1, h2, h3, h4, h5, h6) {
    color: var(--ed-heading-color);
    font-family: var(--ed-heading-font);
    margin-block: 1em 0.45em;
  }

  .shelf-note-editor .tiptap h1 { font-size: 24px; font-weight: 400; letter-spacing: -0.025em; line-height: 1.14; }
  .shelf-note-editor .tiptap h2 { font-size: 21px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.18; }
  .shelf-note-editor .tiptap h3 { font-size: 18px; font-weight: 400; letter-spacing: -0.015em; line-height: 1.22; }
  .shelf-note-editor .tiptap h4 { font-size: 16px; font-weight: 400; line-height: 1.25; }
  .shelf-note-editor .tiptap h5 { font-size: 14px; font-weight: 400; letter-spacing: 0.015em; line-height: 1.30; }
  .shelf-note-editor .tiptap h6 { font-size: 13px; font-style: italic; font-weight: 400; letter-spacing: 0.01em; line-height: 1.32; }

  .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 notes use the same horizontally scrollable control language as the
     document toolbar while remaining attached to the note body. */
  .shelf-note-toolbar {
    --toolbar-action-target: 34px;
    --toolbar-block-select-inline-size: 104px;
    --toolbar-align-select-inline-size: 78px;
    --toolbar-select-padding-inline: 6px;
    border-block: 1px solid color-mix(in srgb, var(--sidebar-card-border) 78%, transparent);
    display: block;
    min-inline-size: 0;
    overflow: hidden;
    padding-block: var(--space-tight);
    position: relative;
  }

  .shelf-note-toolbar[aria-disabled="true"] {
    opacity: .62;
  }

  .shelf-note-toolbar-rail {
    align-items: center;
    display: flex;
    gap: var(--toolbar-control-gap, 2px);
    inline-size: 100%;
    min-inline-size: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    padding-inline: 1px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
  }

  .shelf-note-toolbar-rail::-webkit-scrollbar {
    display: none;
  }

  .shelf-note-toolbar :where(.toolbar-button, .toolbar-select, .toolbar-divider) {
    flex-shrink: 0;
    scroll-snap-align: nearest;
  }

  .shelf-note-toolbar .toolbar-button {
    flex-basis: var(--toolbar-action-target);
  }

  .sidebar-shelf-panel.is-detail-mode .shelf-note-surface {
    grid-template-rows: max-content minmax(0, 1fr) max-content max-content;
  }

  @media (max-width: 359px) {
    .shelf-note-toolbar {
      --toolbar-action-target: 32px;
      --toolbar-block-select-inline-size: 96px;
      --toolbar-align-select-inline-size: 72px;
    }
  }

  @media (forced-colors: active) {
    .shelf-note-toolbar {
      border-color: CanvasText;
    }
  }
}

@layer overrides {
  /* Review and Team share one collapsible collection shell. Feature code owns
     only labels, counts, datasets, and expansion state. */
  .sidebar-collapsible-section {
    align-content: start;
    gap: var(--space-cluster);
  }

  .sidebar-collapsible-section-body {
    gap: var(--space-related);
  }

  .sidebar-collapsible-section + .sidebar-collapsible-section {
    margin-block-start: 0;
  }

  .sidebar-collapsible-section-header {
    align-items: start;
    margin: 0;
    min-block-size: 0;
    padding: 0;
  }

  .sidebar-collapsible-section-title,
  .sidebar-collapsible-section-count {
    line-height: var(--ui-line-height);
    margin: 0;
  }

  .sidebar-collapsible-section-count {
    align-self: start;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--text-muted);
    display: block;
    font-size: var(--ui-font-size);
    padding: 0;
  }

  .sidebar-review-group[data-review-status="attention"] .sidebar-review-group-count {
    color: var(--sidebar-selected-text);
  }

  .sidebar-collapsible-section-toggle {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--sidebar-button-radius);
    color: inherit;
    cursor: pointer;
    display: grid;
    font: inherit;
    grid-template-columns: minmax(0, 1fr) auto;
    inline-size: 100%;
    text-align: start;
  }

  .sidebar-collapsible-section-toggle:hover { background: var(--sidebar-row-bg-hover); }
  .sidebar-collapsible-section-toggle:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
  }

  .sidebar-collapsible-section-meta {
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 4px;
    margin-inline-start: auto;
  }

  .sidebar-collapsible-chevron {
    block-size: 16px;
    color: var(--sidebar-control-muted-text);
    display: block;
    flex: 0 0 auto;
    inline-size: 16px;
    inset-block-start: 1px;
    position: relative;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .sidebar-collapsible-section.is-expanded .sidebar-collapsible-chevron { transform: rotate(0deg); }
  .sidebar-collapsible-section-body[hidden] { display: none; }

  /* Embedded collections remain part of their parent card. Archive is a Space
     state, so Team uses the same disclosure primitive without creating a
     second top-level card. */
  .sidebar-collapsible-subsection {
    background: transparent;
    border: 0;
    border-block-start: 1px solid var(--sidebar-row-border);
    border-radius: 0;
    box-shadow: none;
    gap: var(--space-related);
    padding: var(--space-cluster) 0 0;
  }

  .sidebar-collapsible-subsection > .sidebar-collapsible-section-header {
    padding-inline: 0;
  }

  .sidebar-collapsible-subsection > .sidebar-collapsible-section-body {
    padding-inline: 0;
  }

  /* Review and Team also share the exact expandable item-card shell, including
     selected treatment, summary trigger, detail divider, and overflow slot. */
  .sidebar-expandable-item {
    font-family: var(--font-ui);
    overflow: visible;
    position: relative;
  }

  .sidebar-expandable-item.is-current {
    border-color: var(--accent-border-strong);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  }

  .sidebar-expandable-item-header {
    align-items: start;
    inline-size: 100%;
  }

  .sidebar-expandable-item-trigger {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: calc(var(--sidebar-card-radius) - 1px);
    color: inherit;
    cursor: pointer;
    display: block;
    font: inherit;
    inline-size: 100%;
    min-block-size: 0;
    min-inline-size: 0;
    padding: 0;
    text-align: start;
  }

  .sidebar-expandable-item-trigger:hover { background: var(--sidebar-row-bg-hover); }
  .sidebar-expandable-item-trigger:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
  }

  .sidebar-expandable-item-summary-content {
    align-items: start;
    inline-size: 100%;
    padding: var(--space-tight);
  }

  .sidebar-expandable-item:not(.is-current) > .sidebar-expandable-item-header > .sidebar-overflow { display: none; }
  .sidebar-expandable-item.is-current > .sidebar-expandable-item-header > .sidebar-overflow { display: block; }

  .sidebar-expandable-item-body[hidden] { display: none; }
  .sidebar-expandable-item-body {
    border-block-start: 1px solid var(--sidebar-row-border);
    padding-block-start: var(--space-related);
  }

  .sidebar-review-item {
    font-family: var(--font-ui);
  }

  .sidebar-review-item.is-editing { overflow: visible; }

  .sidebar-review-summary-topline {
    align-items: center;
    order: -1;
    display: flex;
    gap: var(--space-related);
    justify-content: space-between;
    min-inline-size: 0;
  }

  /* Review type labels use the same quiet label grammar as Suggested change. */
  .sidebar-review-kind { font-weight: 450; }

  .sidebar-review-anchor-title,
  .sidebar-review-summary-copy {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }

  .sidebar-review-anchor-title {
    -webkit-line-clamp: 2;
    color: var(--text-muted);
    font-size: var(--ui-font-size);
    font-weight: var(--ui-field-font-weight);
    letter-spacing: 0;
    line-height: var(--ui-line-height);
  }
  .sidebar-review-summary-copy { -webkit-line-clamp: 2; }

  .sidebar-review-item.is-current .sidebar-review-anchor-title {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .sidebar-review-metadata-footer {
    align-items: center;
    border-block-start: 1px solid var(--sidebar-row-border);
    display: flex;
    gap: var(--space-related);
    grid-column: 1 / -1;
    inline-size: 100%;
    justify-content: space-between;
    margin-block-start: var(--space-related);
    min-inline-size: 0;
    padding-block-start: var(--space-related);
  }

  .sidebar-review-metadata-date {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-review-metadata-status { margin-inline-start: auto; }

  .sidebar-review-item.is-current .sidebar-review-metadata-footer-compact { display: none; }
  .sidebar-review-item.is-current .sidebar-review-summary-copy { display: none; }

  .sidebar-review-overflow-menu[hidden],
  .sidebar-review-details[hidden],
  .sidebar-review-composer[hidden],
  .sidebar-review-composer [hidden] { display: none; }

  .sidebar-review-body,
  .sidebar-review-change-text,
  .sidebar-review-text-value {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .sidebar-review-warning {
    color: var(--text);
    font-size: var(--ui-font-size-compact);
    font-weight: var(--ui-font-weight-strong);
  }

  .sidebar-review-conflict-text {
    border: 1px dashed var(--sidebar-row-border);
    border-radius: var(--sidebar-row-radius);
    padding: var(--space-related);
  }

  .sidebar-review-inline-editor {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .sidebar-review-inline-editor .review-note-surface {
    max-block-size: min(620px, calc(var(--app-visual-viewport-block, 100dvh) - 112px));
    min-block-size: 0;
  }

  .sidebar-review-inline-editor .review-note-editor-surface {
    gap: var(--sidebar-control-gap);
    min-block-size: 0;
  }

  .sidebar-review-inline-editor .review-note-body {
    max-block-size: min(420px, 46dvh);
    padding-block: var(--focus-ring-width);
    padding-inline: calc(var(--focus-ring-width) + 3px);
    scroll-padding-block: var(--space-related);
  }

  .sidebar-review-inline-editor .sidebar-review-editor-label {
    color: var(--sidebar-control-label-text);
    font-size: var(--ui-font-size);
    font-weight: 450;
    letter-spacing: 0;
    line-height: var(--ui-line-height);
    white-space: normal;
  }

  .sidebar-review-inline-editor .review-note-anchor-preview {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    max-block-size: calc(3 * var(--ed-line-height) * 1em);
    overflow: hidden;
  }

  .sidebar-review-inline-editor .review-note-actions {
    flex: 0 0 auto;
  }

  .sidebar-review-inline-editor[data-busy="true"] :where(.review-note-body) {
    opacity: .72;
    pointer-events: none;
  }

  .sidebar-review-composer {
    color: var(--text);
    flex: 0 0 auto;
    font-family: var(--font-ui);
    font-size: var(--ui-font-size);
    inline-size: 100%;
    margin-block-end: var(--space-cluster);
    overflow: visible;
  }

  .sidebar-review-inline-editor .review-note-surface {
    gap: var(--space-cluster);
  }

  .sidebar-review-composer .review-note-surface {
    min-block-size: 0;
  }

  .sidebar-review-composer .review-note-editor-surface:focus-within {
    border-color: var(--accent-border-strong);
  }

  .sidebar-review-composer .review-note-editor-surface > .review-note-actions {
    border-block-start: 1px solid var(--sidebar-row-border);
    padding-block-start: var(--space-cluster);
  }

  .sidebar-review-composer .review-note-header { align-items: center; }

  .sidebar-review-composer .review-note-kind-switch {
    inline-size: 100%;
  }

  .sidebar-review-composer .review-note-kind-option {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .sidebar-review-composer .review-note-body {
    max-block-size: min(390px, 48dvh);
    min-block-size: 0;
  }

  .sidebar-review-composer .review-note-anchor-preview {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--text-muted);
    display: -webkit-box;
    font-family: var(--ed-body-font);
    font-style: italic;
    line-height: var(--ed-line-height);
    max-block-size: calc(2 * var(--ed-line-height) * 1em);
    overflow: hidden;
  }

  .sidebar-review-composer .review-note-replacement { min-block-size: 96px; }
  .sidebar-review-composer .review-note-context-textarea { min-block-size: 76px; }

  .sidebar-review-composer .review-note-status[data-type="error"] { color: var(--danger); }

  .sidebar-review-composer[data-busy="true"] :where(.review-note-body, .review-note-kind-switch) {
    opacity: .72;
  }

  @container sidebar (max-width: 300px) {
    .sidebar-review-summary-topline {
      align-items: start;
      flex-direction: column;
      gap: 2px;
    }

    .sidebar-review-metadata-footer {
      align-items: start;
      flex-direction: column;
    }

    .sidebar-review-metadata-date {
      max-inline-size: none;
      text-align: start;
      white-space: normal;
    }

    .sidebar-review-metadata-status { margin-inline-start: 0; }

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

  @media (max-width: 599px), (max-width: 767px) and (pointer: coarse) {
    .sidebar-review-item.is-current { scroll-margin-block: calc(var(--sidebar-sheet-drag-zone) + var(--space-cluster)); }

    .sidebar-collapsible-section-toggle,
    .sidebar-review-overflow-trigger,
    .sidebar .sidebar-review-menu-action,
    .sidebar-review-actions > button,
    .sidebar-review-inline-editor .review-note-close,
    .sidebar-review-composer .review-note-close,
    .sidebar-review-inline-editor .review-note-actions > button {
      min-block-size: 44px;
      touch-action: manipulation;
    }

    .sidebar-review-overflow-trigger {
      block-size: 44px;
      inline-size: 44px;
      min-inline-size: 44px;
    }

    .sidebar-review-inline-editor .review-note-surface {
      max-block-size: min(500px, calc(var(--app-visual-viewport-block, 100dvh) - 132px));
    }

    .sidebar-review-inline-editor .review-note-body {
      max-block-size: min(330px, 40dvh);
    }

    .sidebar-review-composer .review-note-surface {
      max-block-size: min(500px, calc(var(--app-visual-viewport-block) - 132px));
    }

    .sidebar-review-composer .review-note-body {
      max-block-size: min(330px, 42dvh);
    }

    :root[data-keyboard-visible="true"] .sidebar-review-composer .review-note-surface {
      max-block-size: min(390px, calc(var(--app-visual-viewport-block) - 118px));
    }

    :root[data-keyboard-visible="true"] .sidebar-review-composer .review-note-body {
      max-block-size: none;
    }

    :root[data-keyboard-visible="true"] .sidebar-review-inline-editor .review-note-surface {
      max-block-size: min(390px, calc(var(--app-visual-viewport-block, 100dvh) - 118px));
    }

    :root[data-keyboard-visible="true"] .sidebar-review-inline-editor .review-note-body {
      max-block-size: min(230px, 34dvh);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sidebar-collapsible-chevron { transition: none; }
  }

  @media (forced-colors: active) {
    .sidebar-review-item.is-current,
    .sidebar-review-inline-editor .review-note-editor-surface,
    .sidebar-review-composer .review-note-editor-surface {
      border-color: Highlight;
      box-shadow: none;
    }

    .sidebar-review-item.is-current { outline: 2px solid Highlight; outline-offset: -2px; }
    .sidebar .sidebar-textarea { outline-color: CanvasText; }
    .sidebar .sidebar-textarea[aria-invalid="true"] { outline-color: Mark; }
  }
}

@layer overrides {
  /* Account owns the outer frame while each Account tab owns its own scroll
     surface. Team therefore keeps its action footer fixed in the same way as
     Shelf and Versions instead of placing primary actions in a summary card. */
  .sidebar-support-panel .sidebar-panel-body {
    grid-template-rows: max-content minmax(0, 1fr);
    overflow: hidden;
  }

  /* Keep Account and Team in the constrained scroll row even when the
     Account/Team tablist is hidden for signed-out and non-Team accounts. Without
     explicit placement, CSS grid auto-placement moves Account into the
     max-content row, leaving the mobile sheet clipped and non-scrollable. */
  .sidebar-support-tabs { grid-row: 1; }

  .sidebar-support-tabpanel {
    grid-row: 2;
    min-block-size: 0;
    min-inline-size: 0;
  }

  #support-tabpanel-account {
    align-content: start;
    display: grid;
    gap: var(--sidebar-panel-section-gap);
    padding-inline-end: 2px;
  }

  #support-tabpanel-team {
    flex-direction: column;
    gap: var(--sidebar-panel-section-gap);
    overflow: hidden;
  }

  #support-tabpanel-team:not([hidden]) { display: flex; }

  #team-state { flex: 1 1 auto; }

  .sidebar-contained-list-scroll {
    align-content: start;
    min-block-size: 0;
    min-inline-size: 0;
    padding-inline-end: 2px;
  }

  .sidebar-list-footer:empty { display: none; }

  /* Team uses the same fixed-footer behaviour as Shelf and Versions. The
     default actions keep their complete intrinsic height, while an open footer
     composer may shrink and scroll inside compact sheets. */
  #team-actions-footer {
    flex: 0 0 auto;
    min-block-size: 0;
    overflow: visible;
  }

  #team-actions-footer:has(.sidebar-footer-composer) {
    flex-shrink: 1;
    overflow: hidden;
  }

  #team-actions-footer .sidebar-footer-composer {
    max-block-size: 100%;
  }

  /* Versions and Team share one footer-composer shell rather than shipping
     panel-specific form cards with subtly different spacing and alignment. */
  .sidebar-footer-composer {
    gap: var(--space-cluster);
    min-inline-size: 0;
  }

  .sidebar-footer-composer-form { padding: 0; }
  .sidebar-footer-composer-fields { display: contents; }
  .sidebar-footer-composer-actions { margin-block-start: var(--space-tight); }

  /* Keep every shared ellipsis control square in WebKit as well as Chromium
     and Firefox. The late rule deliberately wins over the generic full-width
     small-button rule and fixes the flex/grid shrink seen in Safari on macOS. */
  .sidebar .sidebar-overflow {
    --sidebar-overflow-control-size: 34px;
    block-size: var(--sidebar-overflow-control-size);
    flex: 0 0 var(--sidebar-overflow-control-size);
    inline-size: var(--sidebar-overflow-control-size);
    max-block-size: var(--sidebar-overflow-control-size);
    max-inline-size: var(--sidebar-overflow-control-size);
    min-block-size: var(--sidebar-overflow-control-size);
    min-inline-size: var(--sidebar-overflow-control-size);
  }

  .sidebar .sidebar-overflow-trigger {
    -webkit-appearance: none;
    appearance: none;
    aspect-ratio: 1;
    block-size: var(--sidebar-overflow-control-size, 34px);
    box-sizing: border-box;
    flex: 0 0 var(--sidebar-overflow-control-size, 34px);
    inline-size: var(--sidebar-overflow-control-size, 34px);
    line-height: 1;
    max-block-size: var(--sidebar-overflow-control-size, 34px);
    max-inline-size: var(--sidebar-overflow-control-size, 34px);
    min-block-size: var(--sidebar-overflow-control-size, 34px);
    min-inline-size: var(--sidebar-overflow-control-size, 34px);
    overflow: hidden;
    padding: 0;
  }

  @media (pointer: coarse) {
    .sidebar .sidebar-overflow { --sidebar-overflow-control-size: var(--touch-target); }
  }
}

@layer overrides {
  /* Compact footer composers become focused task workspaces. Keeping the
     directory or timeline mounted behind the form made the software keyboard
     leave only a thin, unstable strip for editing. The same host/content/slot
     contract now governs Team and Versions. */
  @media (max-width: 599px), (max-width: 767px) and (pointer: coarse) {
    .sidebar-footer-composer-host.is-footer-composer-mode {
      min-block-size: 0;
    }

    .sidebar-footer-composer-host.is-footer-composer-mode > .sidebar-footer-composer-content {
      display: none;
    }

    .sidebar-footer-composer-host.is-footer-composer-mode > .sidebar-footer-composer-slot {
      block-size: 100%;
      border-block-start: 0;
      flex: 1 1 auto;
      min-block-size: 0;
      overflow: hidden;
      padding-block-start: 0;
    }

    .sidebar-history-list-layout.sidebar-footer-composer-host.is-footer-composer-mode {
      gap: 0;
      grid-template-rows: minmax(0, 1fr);
    }

    .sidebar-footer-composer-host.is-footer-composer-mode .sidebar-footer-composer {
      block-size: 100%;
      grid-template-rows: max-content minmax(0, 1fr);
      max-block-size: none;
      overflow: hidden;
    }

    .sidebar-footer-composer-host.is-footer-composer-mode .sidebar-footer-composer-form {
      display: grid;
      gap: 0;
      grid-template-rows: minmax(0, 1fr) max-content;
      min-block-size: 0;
      overflow: hidden;
    }

    .sidebar-footer-composer-host.is-footer-composer-mode .sidebar-footer-composer-fields {
      align-content: start;
      display: grid;
      gap: var(--space-cluster);
      min-block-size: 0;
      padding-inline-end: 2px;
      scroll-padding-block: var(--space-cluster) var(--space-section);
    }

    .sidebar-footer-composer-host.is-footer-composer-mode .sidebar-footer-composer-actions {
      background: var(--sidebar-card-bg);
      border-block-start: 1px solid var(--sidebar-row-border);
      bottom: auto;
      margin-block-start: 0;
      padding-block-end: max(var(--space-related), var(--app-safe-bottom));
      padding-block-start: var(--space-cluster);
      position: static;
      z-index: 2;
    }

    :root[data-keyboard-visible="true"] .sidebar-footer-composer-host.is-footer-composer-mode .sidebar-footer-composer-fields {
      scroll-padding-block-end: calc(var(--touch-target) + var(--space-section) + var(--app-safe-bottom));
    }
  }
}