@layer components {
  /* Word, PowerPoint and Excel previews inside the reader window; text comes from the file and is always escaped. */
  .office-reader-notice { margin: 0 0 16px; color: var(--muted-foreground); font-size: 14px; line-height: 1.6; }
  .office-reader-cut, .office-reader-more { margin: 16px 0 0; color: var(--muted-foreground); font-size: 14px; line-height: 1.6; }

  /* PowerPoint: one card per slide. */
  .office-slide {
    margin: 0 0 16px; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface); overflow-wrap: anywhere;
  }
  .office-slide-title { margin: 0 0 12px; font-size: 1rem; font-weight: 600; color: var(--foreground); }
  .office-hidden { margin-inline-start: 8px; font-size: 13px; font-weight: 400; font-style: italic; color: var(--muted-foreground); }
  .office-slide-line, .office-slide-empty { margin: 0 0 8px; }
  .office-slide-empty { color: var(--muted-foreground); font-style: italic; }
  .office-slide-list { margin: 0 0 8px; padding-inline-start: 1.25rem; }
  .office-slide-list > li { margin: 2px 0; }
  .office-slide-list > .office-level-1 { margin-inline-start: 1.25rem; }
  .office-slide-list > .office-level-2 { margin-inline-start: 2.5rem; }
  .office-slide-list > .office-level-3 { margin-inline-start: 3.75rem; }
  .office-slide-list > .office-level-4 { margin-inline-start: 5rem; }

  /* Excel: tabs scroll sideways; the selected one has a heavier weight and a bar, not only a color. */
  .office-sheet-tabs { display: flex; gap: 4px; margin: 0 0 12px; overflow-x: auto; border-bottom: 1px solid var(--border); }
  .office-sheet-tab {
    flex: none; max-width: 16rem; padding: 8px 14px; border: 0; border-bottom: 3px solid transparent;
    border-radius: var(--radius-md) var(--radius-md) 0 0; background: transparent; color: var(--muted-foreground);
    font: inherit; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  }
  .office-sheet-tab:hover { background: var(--accent); color: var(--foreground); }
  .office-sheet-tab:active { background: var(--border); }
  .office-sheet-tab:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: -2px; }
  .office-sheet-tab[aria-selected=true] { border-bottom-color: var(--foreground); color: var(--foreground); font-weight: 700; }
  .office-sheet-tab .office-hidden { margin-inline-start: 0; }
  .office-sheet-panel:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: 2px; }
  .office-sheet-panel .table-wrap { margin: 0; }
  .office-sheet-panel .table-wrap:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: 2px; }
  .office-sheet-panel :is(thead th, tbody th) { color: var(--muted-foreground); font-weight: 500; }
  .office-sheet-panel tbody th { min-width: 3rem; text-align: right; }
  .office-sheet-empty { margin: 0; color: var(--muted-foreground); }

  @media (pointer: coarse) {
    .office-sheet-tab { min-height: var(--tap); }
  }
}