/* The application owns all chrome tokens; white is the document's paper. */
html:has(> body.document-viewer) { height: 100%; overflow: hidden; }
body.document-viewer { margin: 0; padding: 0; height: 100dvh; min-height: 0; display: flex; flex-direction: column; background: var(--bg-app); color: var(--text-main); font-family: var(--font-sans); font-size: var(--text-xs); }
.document-viewer * { box-sizing: border-box; }
.document-viewer [hidden] { display: none !important; }
/* A single quiet row above the page; every action is an application circle. */
.document-toolbar { display: flex; align-items: center; justify-content: center; gap: calc(var(--gap-sm) * 3); padding: var(--gap-sm); flex: 0 0 auto; background: transparent; }
.document-pagination, .document-zoom { display: flex; align-items: center; gap: var(--gap-xs); }
.document-viewer button, .document-viewer input { font: inherit; color: var(--text-main); background: transparent; border: 0; }
.document-viewer button { cursor: pointer; }
.document-viewer .document-icon-button { display: inline-flex; align-items: center; justify-content: center; width: var(--artifact-control-size); height: var(--artifact-control-size); padding: 0; border-radius: 50%; corner-shape: var(--corner-shape-round); background: var(--surface-soft); color: var(--text-muted); font-size: var(--text-lg); flex: 0 0 auto; }
.document-viewer button:hover { background: var(--surface-active); color: var(--text-main); }
.document-viewer button:disabled { opacity: .35; cursor: default; }
.document-viewer :is(button,input):focus-visible { outline: 2px solid var(--text-muted); outline-offset: 2px; }
.document-pagination input { width: 3ch; min-width: 24px; height: var(--artifact-control-size); padding: 0; text-align: center; appearance: textfield; background: transparent; }
.document-pagination input::-webkit-inner-spin-button { appearance: none; }
.document-pagination label { display: flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
#page-count { white-space: nowrap; color: var(--text-muted); }
#zoom-value { min-width: 4ch; text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; }
#document-viewport { min-height: 0; flex: 1; overflow: auto; position: relative; overscroll-behavior: contain; padding: 24px; background: var(--bg-app); }
#document-content { width: fit-content; min-width: 100%; }
#document-status { color: var(--text-muted); display: grid; justify-items: center; gap: 12px; padding: 60px 20px; text-align: center; }
.document-paper { margin: 0 auto; background: white; color: black; box-shadow: var(--shadow-surface); position: relative; }
.document-paper canvas { display: block; }
.document-paper .textLayer { position: absolute; inset: 0; overflow: clip; opacity: 1; line-height: 1; text-align: initial; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; }
.textLayer :is(span,br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0 0; }
.textLayer span.markedContent { top: 0; height: 0; }
.textLayer ::selection { background: #3399ff66; }
.textLayer { --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height)); --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
#document-footer { flex: 0 0 auto; min-height: 34px; display: flex; align-items: center; gap: 12px; padding: 4px 12px; background: transparent; color: var(--text-muted); }
#document-position { margin-left: auto; white-space: nowrap; font-size: 12px; }
#column-navigation { display: flex; flex: 0 0 auto; gap: var(--gap-xs); }
#sheet-tabs { display: flex; gap: 3px; min-width: 0; overflow-x: auto; }
#sheet-tabs button { white-space: nowrap; font-size: 13px; min-height: 30px; padding: 4px 14px; border-radius: var(--radius-sm); corner-shape: var(--corner-shape-surface); }
#sheet-tabs button[aria-selected="true"] { color: var(--text-main); background: var(--bg-hover); box-shadow: inset 0 -2px var(--primary-500); }
.document-formula { flex: 0 0 auto; min-height: 34px; display: flex; gap: 12px; align-items: center; padding: 5px 12px; background: transparent; }
#cell-address { width: 60px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
#cell-value { white-space: pre-wrap; max-height: 100px; overflow: auto; flex: 1; }
.document-notice { padding: 8px 12px; background: var(--bg-elevated); color: var(--text-muted); font-size: 12px; }
.document-viewer.is-spreadsheet #document-viewport { padding: 0; }
.document-grid { table-layout: fixed; width: max-content; border-collapse: separate; border-spacing: 0; background: white; color: #202124; font-family: Arial, sans-serif; font-size: 13px; }
.document-grid td, .document-grid th { border-right: 1px solid #dfe3e7; border-bottom: 1px solid #dfe3e7; padding: 6px 9px; height: 29px; vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; }
.document-grid th { font-weight: 400; text-align: center; color: var(--text-muted); background: var(--bg-elevated); user-select: none; }
.document-grid thead th { position: sticky; top: 0; z-index: 2; }
.document-grid tbody th { position: sticky; left: 0; z-index: 1; }
.document-grid thead th:first-child { left: 0; z-index: 3; }
.document-grid td { cursor: cell; min-width: 0; }
.document-grid td.is-selected { outline: 2px solid var(--primary-500); outline-offset: -2px; }
@media(max-width:600px) {
    .document-toolbar { flex-wrap: wrap; gap: var(--gap-sm); padding: var(--gap-sm) 0; }
    .document-pagination, .document-zoom { gap: 2px; }
    #document-viewport { padding: var(--gap-sm); }
    #document-footer { gap: 4px; padding: 4px 6px; }
    #document-position { font-size: var(--text-2xs); }
}