/* #397 experimental document navigation. Chrome floats; paper geometry is unchanged. */
:root { --tabs-stack: 0px; }
.crumb > .document-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 500; }
.tabs-trigger { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ink-2); cursor: pointer; }
.tabs-trigger:hover, .tabs-trigger[aria-expanded="true"] { background: var(--sunken); }
.document-tabs { position: fixed; z-index: 9; left: var(--s3); top: calc(var(--topbar-h) + var(--s5)); width: var(--rail-w); max-height: 40dvh; overflow: auto; padding: 14px 12px; border-radius: 10px; background: var(--surface); box-shadow: var(--e3); font-size: var(--t-sm); }
body:has(.editing[data-mode="edit"]) .document-tabs { top: calc(var(--topbar-h) + var(--ribbon-h) + var(--s5)); }
.document-tabs[hidden], .tabs-dialog:not([open]) { display: none; }
/* Keep the pinned panel's space while a topbar picker temporarily takes over. */
body:has([data-version-picker][open]) .document-tabs { visibility: hidden; pointer-events: none; }
.tabs-heading { display: flex; justify-content: space-between; align-items: center; }
.tabs-heading button { background: transparent; border: 0; color: var(--ink-2); cursor: pointer; }
.document-tabs nav { display: grid; gap: 3px; margin: 8px -5px; }
.document-tabs nav a { display: grid; gap: 3px; padding: 9px 8px; border-radius: 5px; overflow-wrap: anywhere; }
.document-tabs .tabs-row:has(> [data-document-tab][aria-current="page"]) { background: var(--sunken); }
.document-tabs [data-document-tab][aria-current="page"] { font-weight: 600; }
.document-tabs small { font-size: var(--t-xs); font-weight: normal; color: var(--ink-3); }
.tabs-add { display: block; width: 100%; padding: 12px 4px 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink-2); text-align: left; font: inherit; cursor: pointer; }
@media (min-width: 701px) {
  body.tabs-pinned .rail { top: calc(var(--topbar-h) + var(--ribbon-on) + var(--s5) + var(--tabs-stack)); max-height: calc(100dvh - var(--topbar-h) - var(--ribbon-on) - var(--s5) - var(--tabs-stack) - var(--s4)); }
}
.tabs-dialog { margin: auto; width: 440px; max-width: calc(100vw - 28px); max-height: calc(100dvh - 32px); overflow: auto; overflow-wrap: anywhere; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: var(--e3); }
.tabs-dialog::backdrop { background: rgb(20 19 15 / .25); }
.tabs-dialog h2 { font-size: 18px; }
.tabs-dialog ul { padding: 0; list-style: none; margin: 18px 0; }
.tabs-dialog li { padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.tabs-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }
.tabs-path { display: grid; gap: 7px; margin-top: 20px; }
.tabs-path input { padding: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.comparison-tabs { padding: 12px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; font: var(--t-sm) var(--ui); }
.comparison-tabs nav { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.comparison-tabs a { display: grid; gap: 3px; padding: 6px 0; overflow-wrap: anywhere; }
.comparison-tabs a[aria-current] { border-bottom: 2px solid var(--ink); font-weight: 600; }
/* Merge's state and its one action, on the desk above the pages (#693). */
.merge-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; font: var(--t-sm) var(--ui); }
.merge-state p { margin: 0; flex: 1 1 240px; }
.comparison-tabs small { font-size: var(--t-xs); font-weight: normal; }
.comparison-tabs p { margin-top: 8px; }
.document-screen .mode > .empty-doc { display: grid; gap: var(--s3); max-width: var(--sheet-w); margin: 0 auto 16px; font-family: var(--ui); }
.document-screen .mode > .empty-doc h1 { font-size: 18px; }
.document-screen .mode > .empty-doc p { font-size: var(--t-sm); }
.paper:has(.compare) .comparison-tabs { grid-row: 1; }
.paper:has(.compare) .compare { grid-row: 2; }
.paper:has(.compare) .compare-foot { grid-row: 3; }
/* Merge's card heads the comparison; alone, it heads the one page (#693). */
.paper:has(.compare) .merge-state { grid-row: 1; }
.paper:has(.compare):has(.merge-state) .comparison-tabs { grid-row: 2; }
.paper:has(.compare):has(.merge-state) .compare { grid-row: 3; }
.paper:has(.compare):has(.merge-state) .compare-foot { grid-row: 4; }
.paper:not(:has(.compare)) .merge-state { max-width: var(--sheet-w); margin: 0 auto 16px; }
@media (max-width: 700px) {
  body:has(.tabs-trigger) .topbar { gap: 3px; padding-inline: 6px; }
  body:has(.tabs-trigger) #crumb { display: contents !important; }
  body:has(.tabs-trigger) .crumb { display: flex; flex: 1 1 auto; min-width: 0; gap: 4px; }
  body:has(.tabs-trigger) .crumb > .document-name { display: block; flex: 0 1 auto; max-width: 76px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body:has(.tabs-trigger) .crumb > .mono,
  body:has(.tabs-trigger) .crumb > .crumb-sep,
  body:has(.tabs-trigger) .mobile-doc-context { display: none; }
  .document-tabs { left: 12px; width: 292px; max-width: calc(100vw - 24px); max-height: 65dvh; }
  .tabs-trigger { width: 24px; }
  body:has(.tabs-trigger) .edit-picker { flex: none; }
  body:has(.tabs-trigger) .edit-picker > summary span { min-width: 42px; max-width: 66px; }
  .mobile-activity-toggle[data-selection-hidden]:not(:focus-visible) { opacity: 0; pointer-events: none; }
}
@media print { .document-tabs, .tabs-trigger, .comparison-tabs, .tabs-dialog { display: none !important; } }
body[data-clean] .document-tabs { display: none; }

.tabs-row { display: flex; align-items: center; min-width: 0; }
.document-tabs .tabs-row > [data-document-tab] { flex: 1; min-width: 0; }
.document-tabs .tabs-delete { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 34px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--ink-3); cursor: pointer; font: inherit; }
.document-tabs .tabs-delete:hover, .document-tabs .tabs-delete:focus-visible,
.document-tabs .tabs-rename:hover, .document-tabs .tabs-rename:focus-visible { color: var(--ink); background: var(--sunken); }
.document-tabs { transition: top var(--mid) var(--ease); }
.tabs-dialog [role="status"] { min-height: 1.5em; margin-top: 12px; }
.tabs-dialog[aria-busy="true"] { cursor: progress; }
.comparison-help { margin-top: 6px; color: var(--ink-2); }
.comparison-help summary { cursor: pointer; width: fit-content; }
@media (prefers-reduced-motion: reduce) { .document-tabs { transition: none; } }

/* Base identity is an outline, independent of the active fill. */
.tabs-row { border: 1px solid transparent; border-radius: 6px; }
.tabs-base { border-color: var(--ink-2); }
.tabs-controls { display: flex; align-items: center; opacity: 0; pointer-events: none; }
.tabs-row:hover .tabs-controls, .tabs-row:focus-within .tabs-controls { opacity: 1; pointer-events: auto; }
.document-tabs .tabs-rename { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 34px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--ink-2); cursor: pointer; }
.tabs-menu { display: none; }
.tabs-path input { min-width: 0; width: 100%; box-sizing: border-box; }
@media (hover: none), (pointer: coarse), (max-width: 700px) {
  .tabs-row { flex-wrap: wrap; }
  .tabs-menu { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--ink-2); cursor: pointer; font-size: 24px; }
  .tabs-controls { display: none; flex-basis: 100%; justify-content: flex-end; }
  .tabs-row:has([data-tab-menu][aria-expanded="true"]) .tabs-controls { display: flex; opacity: 1; pointer-events: auto; }
  .document-tabs .tabs-controls > * { min-width: 44px; min-height: 44px; }
}