/* Shared display contract: reading measure, bounded panels and system palette.
   Loaded last on every HTML entry point, including the standalone report deck. */
:root { color-scheme: light dark; --reading-measure: 72ch; }
body { overflow-wrap: break-word; }
button, input, select, textarea { font: inherit; }
button, .google-btn { white-space: normal; text-overflow: clip; overflow: visible; }
button { transition: background-color .16s, border-color .16s, color .16s; }
button:hover { transform: none; }
:where(button,a,input,select,textarea,summary,[tabindex],[contenteditable]):focus-visible { outline: 2px solid var(--primary-color); outline-offset: 4px; }
select,input,textarea { color-scheme: inherit !important; }
h1,h2,h3,h4,h5,h6 { text-shadow: none; overflow-wrap: break-word; }
.app-container { width: 100%; }
header, .tab-header, .admin-header, .segment-header { gap: 20px; flex-wrap: wrap; }
header > *, .tab-header > *, .admin-header > *, .segment-header > * { min-width: 0; }
#project-name { box-shadow: none; border-width: 1px; }
.container > .instructions-content .instructions-container { max-height: none; overflow: visible; margin: 20px 0; padding: clamp(20px,4vw,36px); }
.container :is(.policy-content,.changelog-content,.instructions-content) { line-height: 1.8; }
.container :is(h2,h3) { line-height: 1.35; }
.container ul,.container ol { padding-left: 1.3em; }
.editable-content, .message-content, .wh-stage-body { overflow-wrap: anywhere; }
#segment-detail-view .segment-content { max-width: 860px; margin-inline: auto; }
#segment-detail-view .editable-content { max-width: var(--reading-measure); margin-inline: auto; font: 1.05rem/1.85 Georgia,'Noto Serif Devanagari',serif; }
#sanskrit-workspace .sa-workspace-passage { max-width: 68ch; margin-inline: auto; }
.rd-stage { min-height: 0; }
.rd-page { max-width: 72ch; }
.rd-text { font-size: clamp(1.25rem,1rem + .5vw,1.65rem); }
.rd-translation { max-width: 70ch; }
/* A single scroll owner: header stays visible, all form controls remain in flow. */
.modal { display: flex !important; align-items: center; justify-content: center; padding: 24px; z-index: 2400; }
.modal .modal-content { margin: 0; width: min(560px,100%); max-height: calc(100dvh - 48px); overflow: hidden; border-radius: 14px; }
.modal .modal-header { flex: none; padding: 20px 24px; }
.modal .modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.ra-dialog .modal-content { width: min(880px,100%); }
.sa-correction .modal-content { width: min(620px,100%); }
.ra-dialog .modal-body { padding: 24px; }
.ra-footer { position: static; margin-top: 20px; bottom: auto; background: transparent; }
.close-modal { min-width: 32px; min-height: 32px; }
/* Keep the passage's measure constant across opening/closing and tab changes.
   The dock and passage form a centered pair. Only a transform moves the page,
   so lines, anchors, source selection and the scroll position never reflow. */
@media (min-width: 1200px) {
 /* The passage font grows with the viewport, so the page grows with it to hold ~55-60ch. */
 #reader-view { --sa-dock: clamp(320px,32vw,460px); --sa-gap: 32px; --sa-page: min(clamp(720px,30vw + 220px,860px),calc(100vw - var(--sa-dock) - 80px)); }
 #reader-view .rd-page:has(.sa-toolbar),#reader-view.sa-inspecting .rd-page,#reader-view:has(.sa-guiding).sa-inspecting .rd-page { width: var(--sa-page); max-width: var(--sa-page); margin-inline: auto; padding-bottom: 0; transition: transform .22s ease; }
 #reader-view.sa-inspecting .rd-page { transform: translateX(calc((var(--sa-dock) + var(--sa-gap)) / -2)); }
 #reader-view .sa-inspector,#reader-view .sa-inspector.sa-guiding { position: fixed; top: 76px; bottom: 72px; left: auto; right: max(24px,calc((100vw - var(--sa-page) - var(--sa-dock) - var(--sa-gap)) / 2)); width: var(--sa-dock); height: calc(100dvh - 148px); max-height: calc(100dvh - 148px) !important; border-radius: 14px; padding: 18px; z-index: 30; }
 #reader-view .rd-stage { padding: 36px 24px 60px; }
 .sa-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
 .sa-heading { min-width: 0 !important; }
 .sa-script-switch { margin: 0; }
 .sa-view-switch { grid-column: 1 / -1; order: 2; width: 100%; }
 .sa-mode-toggle { justify-self: end; grid-column: 2; grid-row: 3; }
 .sa-inspector-top { top: -18px; }
 .sa-guiding>.sa-tabs { margin: 8px 0; }
 .sa-guiding .sa-original { max-height: 3em; }

 .sg-feed { min-height: 0; }
 .sg-orientation { flex-direction: column; align-items: stretch; gap: 3px; }
 .sg-guide { gap: 8px; }
 .sg-history { max-height: 90px; }
 .sg-chips { gap: 4px; }
 .sg-empty h3 { padding-left: 0; }
 #sanskrit-workspace .sa-inspector { position: fixed; top: 80px; right: max(24px,calc((100vw - var(--workspace-page) - var(--workspace-dock) - 32px) / 2)); width: var(--workspace-dock); height: calc(100dvh - 104px); max-height: calc(100dvh - 104px); z-index: 1400; }
 #sanskrit-workspace .sa-inspector.sa-guiding { left: auto; bottom: 24px; }
 body:has(#sanskrit-workspace) { --workspace-dock: clamp(320px,32vw,460px); --workspace-page: min(820px,calc(100vw - var(--workspace-dock) - 80px)); }
 #segment-detail-view .segment-content:has(#sanskrit-workspace) { width: var(--workspace-page); max-width: var(--workspace-page); position: relative; left: 0; transition: left .22s ease; }
 #segment-detail-view .segment-content:has(#sanskrit-workspace.sa-inspecting) { left: calc((var(--workspace-dock) + 32px) / -2); }
 #sanskrit-workspace.sa-inspecting { margin-right: 0; min-width: 0; }
 #sanskrit-workspace.sa-inspecting .sa-toolbar { display: flex; }
}
@media (max-width: 700px) {
 .modal { padding: 8px; }
 .modal .modal-content { max-height: calc(100dvh - 16px); }
 .modal .modal-header { padding: 16px; }
 .ra-dialog .modal-body { padding: 18px 16px; }
 #sanskrit-workspace .sa-inspector:not(.sa-guiding) { position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 57dvh; z-index: 1400; }
}
/* Reports use fluid cards, not horizontal comparison strips. */
.wh-layout { grid-template-columns: 240px minmax(0,1fr); }
.wh-main,.wh-model-col,.wh-chart { min-width: 0; }
.wh-compare-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,330px),1fr)); overflow: visible; }
.wh-stage-body,.wh-verdict-text,.wh-boundary-body,.wh-passage { max-width: 72ch; line-height: 1.8; }
/* Report prose starts at its card's content edge, aligned with the headings above it. */
.wh-verdict-text,.wh-boundary-body,.wh-passage { margin-inline: 0; }
.wh-passage > div { font: 1.15rem/1.85 Georgia,'Noto Serif Devanagari',serif; }
.wh-header-actions { flex-wrap: wrap; }
.wh-charts-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,400px),1fr)); }
.wh-chart svg { max-width: 100%; height: auto; }
@media (max-width: 900px) { .wh-layout { grid-template-columns: 1fr; } }
/* A landscape report on desktop, with the phone deck retained on phones. */
@media (min-width: 701px) {
 .rt-presentation-body { --rt-w: min(calc(100vw - 64px),2240px); --rt-h: min(calc(100dvh - 100px),1300px); }
 .rt-deck { width: var(--rt-w); height: var(--rt-h); border: 1px solid var(--rt-line); border-radius: 16px; }
 .rt-slide { padding: clamp(28px,4vw,64px); }
 .rt-slide-inner { max-width: 1100px; width: 100%; margin-inline: auto; }
 .rt-title-slide .rt-slide-inner { display: grid; grid-template-columns: 1fr 1.3fr; grid-template-rows: 1fr auto auto 1fr; column-gap: 48px; }
 .rt-title-slide .rt-sigil { position: static; grid-column: 1; grid-row: 1 / -1; align-self: center; }
 .rt-title-slide .rt-kicker { grid-column: 2; grid-row: 2; }
 .rt-title-slide h1 { grid-column: 2; grid-row: 3; font-size: clamp(2.2rem,4vw,4.4rem); }
 .rt-title-slide .rt-meta { grid-column: 2; grid-row: 4; }
 .rt-copy,.rt-statement,.rt-quote { max-width: 55ch; }
 /* The progress track sits inside the deck's lower right edge, wherever the deck is. */
 .rt-progress-track { top: calc(50dvh + var(--rt-h) / 2 - 22px); bottom: auto; width: min(300px,25vw); left: calc(50vw + var(--rt-w) / 2 - min(300px,25vw) - 28px); }
 .rt-controls { opacity: 1; bottom: 8px; }
 .rt-close { position: static; }
 .rt-signature svg { max-height: calc(100dvh - 300px); }
 .rt-chart-host { max-width: 100%; margin-inline: 0; }
 .rt-chart-host > .wh-chart { padding-inline: 0; }
}
.rt-controls { opacity: .9; }
.rt-control:focus-visible { outline-color: var(--rt-accent); }
.admin-table { table-layout: fixed; font-size: .85rem; }
/* Cells wrap at spaces; email addresses carry <wbr> after @ and dots, so nothing breaks mid-word. */
.admin-table th,.admin-table td { overflow-wrap: break-word; padding: 12px 10px; }
.admin-table td :is(input,select) { max-width: 100%; }
.user-actions button { white-space: normal; overflow: visible; font-size: .75rem; }
@media (max-width: 900px) {
 .admin-table thead { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
 .admin-table,.admin-table tbody { display: block; width: 100%; }
 .admin-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 24px; padding: 18px; border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 16px; background: var(--light-bg); }
 .admin-table td { display: block; border: 0; padding: 0; min-width: 0; }
 .admin-table td::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--light-text); margin-bottom: 6px; }
 .admin-table td:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; } }
:root[data-theme="light"] :is(button.danger) { color: #fff; }:root[data-theme="light"] :is(.rt-presentation-body) { --rt-ink: #263c3d; --rt-muted: #536665; --rt-bg: #faf8ef; --rt-surface: #fffefa; --rt-line: #b7c1b8; --rt-accent: #76551e; --rt-accent-alt: #3a6852; }:root[data-theme="light"] :is(.rt-slide) { background: radial-gradient(circle at 85% 8%,#d6be8d33,transparent 45%),#f8f7ef; }:root[data-theme="light"] :is(.rt-slide :is(.rt-kicker,.rt-stat-value,strong,.rt-rank-position)) { color: #76551e; }:root[data-theme="light"] :is(.rt-control) { color: #293e40; }:root[data-theme="light"] :is(.rt-controls) { background: #fffef4ed; border-color: #9baea0; }:root[data-theme="light"] :is(.wh-chart svg text) { fill: #3a4e50; }:root[data-theme="light"] :is(.sg-tree circle) { stroke: #355d4c; stroke-width: 1.5px; }:root[data-theme="light"] :is(.sa-member-source) { color: #3c431e; }

@media (prefers-color-scheme: light) {
:root:not([data-theme]) :is(button.danger) { color: #fff; }:root:not([data-theme]) :is(.rt-presentation-body) { --rt-ink: #263c3d; --rt-muted: #536665; --rt-bg: #faf8ef; --rt-surface: #fffefa; --rt-line: #b7c1b8; --rt-accent: #76551e; --rt-accent-alt: #3a6852; }:root:not([data-theme]) :is(.rt-slide) { background: radial-gradient(circle at 85% 8%,#d6be8d33,transparent 45%),#f8f7ef; }:root:not([data-theme]) :is(.rt-slide :is(.rt-kicker,.rt-stat-value,strong,.rt-rank-position)) { color: #76551e; }:root:not([data-theme]) :is(.rt-control) { color: #293e40; }:root:not([data-theme]) :is(.rt-controls) { background: #fffef4ed; border-color: #9baea0; }:root:not([data-theme]) :is(.wh-chart svg text) { fill: #3a4e50; }:root:not([data-theme]) :is(.sg-tree circle) { stroke: #355d4c; stroke-width: 1.5px; }:root:not([data-theme]) :is(.sa-member-source) { color: #3c431e; }

}
:root[data-theme="light"] :is(footer) { background: #e8eee7; border-color: #b6c4ba; }:root[data-theme="light"] :is(.project-card) { box-shadow: 0 3px 18px #17372b12; }:root[data-theme="light"] :is(button.secondary) { color: #245d88; }:root[data-theme="light"] :is(.button:hover,a.button:hover,.back-link:hover) { color: #61451a; }

@media (prefers-color-scheme: light) {
:root:not([data-theme]) :is(footer) { background: #e8eee7; border-color: #b6c4ba; }:root:not([data-theme]) :is(.project-card) { box-shadow: 0 3px 18px #17372b12; }:root:not([data-theme]) :is(button.secondary) { color: #245d88; }:root:not([data-theme]) :is(.button:hover,a.button:hover,.back-link:hover) { color: #61451a; }

}
#reader-view.is-idle .rd-bar { opacity: .7; }
:root[data-theme="light"] :is(.sa-inspector) { box-shadow: 0 16px 50px #263a3026; }:root[data-theme="light"] :is(.rt-deck) { box-shadow: 0 18px 60px #263a3026; }:root[data-theme="light"] :is(.rt-close) { background: transparent; }

@media (prefers-color-scheme: light) {
:root:not([data-theme]) :is(.sa-inspector) { box-shadow: 0 16px 50px #263a3026; }:root:not([data-theme]) :is(.rt-deck) { box-shadow: 0 18px 60px #263a3026; }:root:not([data-theme]) :is(.rt-close) { background: transparent; }

}
/* Long evaluator names and a broadcast input must shrink inside narrow cards. */
.wh-chat-bar { flex-wrap: wrap; }
.wh-chat-bar input { min-width: 0; flex: 1 1 200px; max-width: 100%; }
.wh-evaluate-bar select,.wh-presentation-actions select { min-width: 0; max-width: 100%; }
/* The fixed keyboard discovery hint owns a small strip below document content. */
body:has(.keynav-nudge) > footer { margin-bottom: 64px; }
/* The source and tabs stay in sight; long commentary belongs to the scroll body. */
.sa-inspector:not([hidden]) { display:flex; flex-direction:column; overflow:hidden; }
.sa-inspector>.sa-inspector-top { position:static; flex:none; padding:0; }
.sa-inspector .sa-original { max-height:none; overflow:visible; margin:10px 0; }
.sa-inspector>.sa-context { flex:none; max-height:30%; overflow:auto; scrollbar-width:thin; }
.sa-context summary { cursor:pointer; font-size:.75rem; min-height:32px; padding:5px 0; color:var(--light-text); }
.sa-inspector>.sa-tabs { flex:none; margin:8px 0 12px; }
.sa-inspector>.sa-tab-content { min-height:0; flex:1; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:3px 3px 12px; }
.sa-inspector.sa-guiding>.sa-context { display:none; }
.sa-inspector.sa-guiding>.sa-tab-content { overflow:hidden; padding:0; }
:root[data-theme="light"] :is(.rt-versus-side,.rt-rank-row) { background:#fffefa; }:root[data-theme="light"] :is(.rt-versus-label) { color:#245d88; }:root[data-theme="light"] :is(.model-selectors) { background:var(--light-bg); }

@media (prefers-color-scheme: light) {
:root:not([data-theme]) :is(.rt-versus-side,.rt-rank-row) { background:#fffefa; }:root:not([data-theme]) :is(.rt-versus-label) { color:#245d88; }:root:not([data-theme]) :is(.model-selectors) { background:var(--light-bg); }

}
@media (min-width: 1100px) {
 .rt-versus { grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr); gap:20px; }
 .rt-versus-rule { flex-direction:column; }
 .rt-versus-rule::before,.rt-versus-rule::after { width:1px; height:auto; min-height:16px; }
}
/* Context actions share the discussion scroll area; the conversation retains room. */
.sg-feed>.sg-refresh:empty { display:none; }
.sg-feed>.sg-refresh { margin:0 0 8px; }
.sg-guide .sg-refresh button,#reader-view .sg-guide .sg-refresh button { font-size:.75rem; min-height:30px; padding:4px 7px; }
/* A long freshness explanation wraps rather than colliding in the reader footer. */
.rd-status { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 12px; }
.rd-status>span:last-child { flex-basis:100%; }
#reader-view:has(.sa-toolbar) .rd-status>span:last-child { font-size:.75rem; }
@media (min-width:701px) and (max-height:700px) {
 .sa-guiding>.sa-tabs { display:flex; flex-wrap:nowrap; gap:3px; margin:6px 0; }
 .sa-guiding>.sa-tabs button,#reader-view .sa-guiding>.sa-tabs button { flex:1 1 auto!important; min-width:0; font-size:12px!important; padding:5px 2px!important; min-height:32px; }
 .sa-guiding>.sa-original { margin:6px 0; max-height:1.8em; }
 .sa-guiding .sg-orientation { padding-bottom:4px; }
 .sa-guiding .sg-layer-row { margin-top:2px; }

}

/* Full-height shell; header and footer share the same content edges. */
body:has(> .app-container) { min-height:100dvh; display:flex; flex-direction:column; }
body > .app-container { flex:1 0 auto; }
body > footer { flex:none; }
.footer-content { max-width:1160px; gap:20px; flex-wrap:wrap; }
.app-container>header #auth-section { margin-left:auto; }
.app-container>header #admin-link-container { display:flex; align-items:center; gap:12px; }
/* Guide chrome never sits over a proposed edit. Structure scrolls with discussion. */
.sg-guide { overflow:hidden; }
.sg-guide>.sg-feed { flex:1 1 0; min-height:100px; position:relative; }
.sg-guide>.sg-orientation { padding:0 0 4px; }
.sg-map { margin:0 0 10px; border-bottom:1px solid var(--border-color); }
.sg-map>summary { cursor:pointer; font-size:12px; padding:6px 0; min-height:30px; }
.sg-map .sg-tree { display:block; width:100%; height:132px; overflow:visible; }
.sg-tree text { font:12px system-ui,sans-serif; fill:var(--text-color); }
.sg-map-key { display:flex; flex-wrap:wrap; gap:4px 10px; font:12px/1.6 Georgia,'Noto Serif Devanagari',serif; margin:0 0 10px; }
.sg-guide .sg-chips { display:flex; }
.sg-guide .sg-input-label { font-size:12px; }
.sg-guide textarea.sg-input { min-height:40px; height:44px; resize:vertical; }
.sg-guide .sg-proposal-actions { position:static; }
.sg-guide .sg-composer { box-shadow:none; }
.sg-guide .sg-history { max-height:80px; }
@media (min-width:701px) and (max-height:800px) {
 #reader-view .sa-inspector.sa-guiding { top:var(--sa-top,76px); bottom:var(--sa-bottom,84px); height:calc(100dvh - var(--sa-top,76px) - var(--sa-bottom,84px)); max-height:calc(100dvh - var(--sa-top,76px) - var(--sa-bottom,84px))!important; padding:12px 16px; }
 #sanskrit-workspace .sa-inspector.sa-guiding { top:24px; bottom:24px; height:calc(100dvh - 48px); max-height:calc(100dvh - 48px)!important; }
 .sa-guiding>.sa-original { margin:5px 0; max-height:1.8em; }
 .sa-guiding>.sa-tabs { margin:4px 0; }
 .sa-guiding .sg-guide { gap:5px; }
 .sa-guiding .sg-composer { padding:6px 9px; }
 .sa-guiding .sg-history summary { padding:2px 0; min-height:22px; }
 .sg-guide>.sg-feed { min-height:0; }
}
@media (max-width:700px) and (max-height:570px) {
 .sa-guiding .sg-orientation { display:none; }
 .sa-guiding .sg-chips { display:flex; gap:3px; }
 .sa-guiding .sg-chips button { padding:3px 5px; min-height:28px; }

 .sa-guiding .sg-guide { gap:4px; }
 .sa-guiding .sg-composer-actions { padding-top:3px; }
 .sa-guiding textarea.sg-input { height:32px; min-height:32px; }
 .sa-guiding .sg-composer { padding:4px 8px; }
 .sg-guide>.sg-feed { min-height:60px; }
}

.sa-inspector { scrollbar-gutter:auto; }
.ra-dialog .modal-content { scrollbar-gutter:auto; }
.ra-dialog .modal-header { position:relative; border-bottom:0; }
.ra-dialog .modal-header::after { content:''; position:absolute; height:1px; background:var(--border-color); left:24px; right:calc(24px + var(--ra-scrollbar,15px)); bottom:0; }
@media(max-width:700px){.ra-dialog .modal-header::after{left:16px;right:calc(16px + var(--ra-scrollbar,0px))}}

/* Tablet popovers keep the full reading measure; only wide screens reserve a dock. */
@media(min-width:701px) and (max-width:1199px){
 #reader-view .rd-page:has(.sa-toolbar),#reader-view.sa-inspecting .rd-page,#reader-view:has(.sa-guiding).sa-inspecting .rd-page {width:min(720px,calc(100vw - 48px));max-width:min(720px,calc(100vw - 48px));margin-inline:auto;transform:none;padding-bottom:0}
 #segment-detail-view .segment-content:has(#sanskrit-workspace){width:min(820px,calc(100vw - 64px));max-width:100%;left:0}
 #sanskrit-workspace.sa-inspecting{margin-right:0}
 #reader-view .sa-inspector,#reader-view .sa-inspector.sa-guiding,#sanskrit-workspace .sa-inspector {position:fixed;left:auto;right:24px;width:min(390px,calc(100vw - 48px));top:80px;bottom:84px;height:calc(100dvh - 164px);max-height:calc(100dvh - 164px)!important;border-radius:14px;padding:16px;z-index:30}
 #sanskrit-workspace .sa-inspector{z-index:1400}
}
@media(min-width:701px){
 #reader-view .sa-inspector,#reader-view .sa-inspector.sa-guiding{top:var(--sa-top,76px);bottom:var(--sa-bottom,84px);height:calc(100dvh - var(--sa-top,76px) - var(--sa-bottom,84px));max-height:calc(100dvh - var(--sa-top,76px) - var(--sa-bottom,84px))!important}
 .sa-toolbar,.sa-inspecting .sa-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:10px}
 .sa-heading{grid-column:1/-1;overflow-wrap:normal;word-break:normal;line-height:1.6}
 .sa-heading .sa-eyebrow{overflow-wrap:normal;word-break:normal}
 .sa-view-switch{grid-column:1/-1;grid-row:auto}
 .sa-mode-toggle{grid-row:auto}
}
.sa-source-disclosure {flex:none;max-height:28%;overflow-y:auto;scrollbar-width:thin;margin:8px 0}
.sa-source-disclosure>summary {cursor:pointer;font-size:13px;line-height:1.6;min-height:28px;color:var(--light-text)}
.sa-source-preview {display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font:1rem/1.8 'Noto Serif Devanagari',Georgia,serif;color:var(--text-color)}
.sa-source-disclosure[open] .sa-source-preview {display:none}
.sa-source-disclosure .sa-original {max-height:none!important;overflow:visible!important;white-space:normal;overflow-wrap:break-word}
.wh-passage {font-family:Georgia,'Noto Serif Devanagari',serif;overflow-wrap:break-word;word-break:normal}
@media(min-width:901px){.wh-sidebar{position:sticky;top:24px;align-self:start;max-height:calc(100dvh - 48px);overflow-y:auto}}
/* Supporting text is readable at native scale, including common laptop heights. */
.sg-guide :is(small,.sg-eyebrow,.sg-layer,.sg-reason,.sg-diff-label,.sg-edit-state,.sg-input-label,.sg-quote,.sg-history,.sg-source-note),.sg-guide>.sg-input-label {font-size:12px;line-height:1.6}
.sg-guide button,#reader-view .sg-guide button,.sg-guide .sg-refresh button,#reader-view .sg-guide .sg-refresh button {font-size:12px;min-height:32px}
.sa-tabs button,#reader-view .sa-tabs button,.sa-guiding>.sa-tabs button,#reader-view .sa-guiding>.sa-tabs button {font-size:12px!important;line-height:1.5;min-height:36px}
.sa-guiding>.sa-tabs{flex-wrap:wrap}
#reader-view .rd-status,#reader-view:has(.sa-toolbar) .rd-status>span:last-child{font-size:13px;line-height:1.6}
.sg-guide .sg-history{max-height:none;overflow:visible}
.sa-expression{overflow-wrap:break-word}

.sa-close:hover,#reader-view .sa-close:hover {background:var(--control-bg-hover);color:var(--primary-color);border-color:var(--primary-color)}

@media(min-width:701px) and (max-height:800px){
 .sa-guiding>.sa-tabs{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
 .sa-guiding>.sa-tabs button,#reader-view .sa-guiding>.sa-tabs button{font-family:system-ui,sans-serif;padding:4px 2px!important}
}
.sg-tree text,.sg-map>summary,.sa-context summary{font-size:12px}

/* Short windows: the discussion keeps its room. Hints become one scrollable row and
   Send sits beside the hint, so nothing is hidden and nothing is clipped. */
@media(min-width:701px) and (max-height:760px),(max-width:700px){
 /* Hints wrap compactly rather than hiding behind a scroll edge. */
 .sa-guiding .sg-chips{flex-wrap:wrap;gap:4px 5px}
 .sa-guiding .sg-chips button,#reader-view .sa-guiding .sg-chips button{flex:none;white-space:nowrap;min-height:30px;padding:3px 10px;font-family:system-ui,sans-serif}
 .sa-guiding .sg-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:end;padding:6px 10px 5px}
 .sa-guiding .sg-composer-actions{display:contents}
 .sa-guiding .sg-composer .sg-input-label{grid-column:1;grid-row:1}
 .sa-guiding .sg-composer .sg-send,#reader-view .sa-guiding .sg-composer .sg-send{grid-column:2;grid-row:1;align-self:end;margin-bottom:2px;max-width:none;white-space:nowrap}
 .sa-guiding .sg-composer .sg-quote{grid-column:1/-1;grid-row:2;border-top:1px solid var(--border-color);padding-top:3px}
 .sa-guiding .sg-guide textarea.sg-input{height:36px;min-height:36px}
 /* The source disclosure collapses to one line: marker and preview; the label stays for assistive tech. */
 .sa-guiding>.sa-source-disclosure{margin:4px 0}
 .sa-guiding>.sa-source-disclosure:not([open])>summary{display:flex;align-items:baseline;gap:6px;min-height:0}
 .sa-guiding>.sa-source-disclosure:not([open]) .sa-source-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .sa-guiding>.sa-source-disclosure:not([open]) .sa-source-preview{flex:1;min-width:0}
 .sa-guiding>.sa-source-disclosure:not([open])>summary::before{content:'▸';flex:none;color:var(--light-text)}
}

/* Phones: the Guide sheet stops below the reader bar so its controls stay usable.
   Tabs form a balanced 3 + 2 grid. While typing the sheet fills that space. */
@media(max-width:700px){
 #reader-view .sa-inspector.sa-guiding{max-height:calc(var(--sg-viewport,100dvh) - var(--sa-top,24px) - 8px)!important}
 .sa-inspector>.sa-tabs{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
 .sa-inspector>.sa-tabs button{grid-column:span 2;min-width:0}
 .sa-inspector>.sa-tabs button:nth-last-child(-n+2):nth-child(n+4){grid-column:span 3}
 .sa-guiding.sg-keyboard-open,#reader-view .sa-inspector.sa-guiding.sg-keyboard-open{height:calc(var(--sg-viewport,100dvh) - var(--sa-top,24px) - 8px)}
}
/* A phone sheet owns the lower screen; the footer it would half-cover steps aside until it closes. */
@media(max-width:700px){#reader-view.sa-inspecting .rd-bottom{visibility:hidden}}
/* Toolbar: heading; script switch (sized to its buttons) beside the reader-mode toggle; views. */
@media(min-width:701px){
 .sa-toolbar,.sa-inspecting .sa-toolbar{grid-template-columns:auto minmax(0,1fr) auto!important;grid-template-areas:"heading heading heading" "script . mode" "view view view"}
 .sa-toolbar>.sa-heading{grid-area:heading}
 .sa-toolbar>.sa-script-switch{grid-area:script;justify-self:start;width:auto;margin:0}
 .sa-toolbar>.sa-mode-toggle{grid-area:mode;justify-self:end;align-self:center}
 .sa-toolbar>.sa-view-switch{grid-area:view}
}
/* Phone footer: arrows and the passage action share a row; the status reads on a full line. */
@media(max-width:480px){
 #reader-view .rd-bottom{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:4px}
 #reader-view .rd-bottom>.rd-prev{grid-area:1/1}
 #reader-view .rd-bottom>.rd-next{grid-area:1/3}
 #reader-view .rd-bottom>.rd-status{display:contents}
 #reader-view .rd-bottom>.rd-status>button{grid-area:1/2;justify-self:center}
 #reader-view .rd-bottom>.rd-status>span{grid-area:2/1/3/4;text-align:center;font-size:12px}
}
/* The notebook title uses the bar's free space before it ellipsises. */
@media(min-width:641px){.rd-title{max-width:min(40vw,460px)}}
/* Narrow phones: previous · position · next on one row, the reader entry below. */
@media(max-width:420px){
 .segment-nav{display:grid!important;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
 .segment-nav>button{white-space:nowrap}
 .segment-nav>.segment-position{text-align:center}
 .segment-nav>.read-btn{grid-column:1/-1}
}
/* The back control and the segment heading never touch. */
#back-to-project-btn,#friends-view>.back-to-projects-btn{margin-bottom:16px}
/* Inspector tabs look the same in the workspace as in the reader. */
#sanskrit-workspace .sa-inspector>.sa-tabs button{border:1px solid light-dark(#586763,#68717b);border-radius:7px}
/* Sections after the workspace share its column, so the docked inspector never covers them. */
@media(min-width:1200px){
 #segment-detail-view:has(#sanskrit-workspace)>:is(.danger-zone,.annotation-controls){width:var(--workspace-page);max-width:var(--workspace-page);margin-inline:auto;position:relative;left:0;transition:left .22s ease;box-sizing:border-box}
 #segment-detail-view:has(#sanskrit-workspace.sa-inspecting)>:is(.danger-zone,.annotation-controls){left:calc((var(--workspace-dock) + 32px) / -2)}
}
#segment-detail-view>.danger-zone+.annotation-controls{margin-top:28px}
/* Tablet popovers: all five inspector tabs on one balanced row. */
@media(min-width:701px) and (max-width:1199px){
 .sa-inspector>.sa-tabs{display:grid!important;grid-template-columns:repeat(5,auto);gap:3px}
 .sa-inspector>.sa-tabs button,#reader-view .sa-inspector>.sa-tabs button{font-family:system-ui,sans-serif;padding:4px 3px!important;min-width:0}
}
/* Tablets: the inspector floats as a card at the foot of the reading column, never over the
   passage's controls; the selected expression is scrolled into the space above it. */
@media(min-width:701px) and (max-width:1199px){
 #reader-view .sa-inspector,#reader-view .sa-inspector.sa-guiding,#sanskrit-workspace .sa-inspector,#sanskrit-workspace .sa-inspector.sa-guiding{left:max(24px,calc(50vw - 380px))!important;right:max(24px,calc(50vw - 380px))!important;width:auto!important;top:auto!important;bottom:var(--sa-bottom,84px)!important;height:min(calc(100dvh - var(--sa-top,76px) - var(--sa-bottom,84px) - 150px),640px)!important;max-height:calc(100dvh - var(--sa-top,76px) - var(--sa-bottom,84px))!important;border-radius:16px;box-shadow:0 -12px 50px #0006}
 #sanskrit-workspace .sa-inspector,#sanskrit-workspace .sa-inspector.sa-guiding{height:min(calc(100dvh - 166px),640px)!important}
 #sanskrit-workspace .sa-inspector,#sanskrit-workspace .sa-inspector.sa-guiding{bottom:16px!important}
 #reader-view.sa-inspecting .rd-stage{padding-bottom:calc(min(100dvh - 300px,640px) + 32px)}
 #segment-detail-view:has(#sanskrit-workspace.sa-inspecting){padding-bottom:calc(min(100dvh - 166px,640px) + 32px)}
}
/* Short tablet windows: the footer steps aside while the card is open, and the card leaves
   room above it for the selected expression. Phones reserve the same room above the Guide sheet. */
@media(min-width:701px) and (max-width:1199px) and (max-height:760px){
 #reader-view.sa-inspecting .rd-bottom{visibility:hidden}
 #reader-view .sa-inspector,#reader-view .sa-inspector.sa-guiding{bottom:12px!important;height:calc(100dvh - var(--sa-top,76px) - 12px - 150px)!important}
 /* The selected expression is in view above the card, so the card need not repeat it. */
 #reader-view .sa-inspector>.sa-source-disclosure{display:none}
}
/* Shared reader-sheet.css owns keyboard sizing and keeps analysis tabs available. */
@media(max-width:700px) and (min-height:700px){
 #reader-view .sa-inspector.sa-guiding:not(.sg-keyboard-open){max-height:calc(var(--sg-viewport,100dvh) - var(--sa-top,24px) - 8px - 132px)!important}
}
/* The return ribbon spans the reading column like the toolbar and passage; the overview note
   keeps a prose measure. */
.sa-place,#reader-view button.sa-place{max-width:none}
.sa-scaffold{max-width:min(100%,72ch)}
/* Docked and floating inspectors keep all five tabs on one row at every desktop size. */
@media(min-width:701px){
 .sa-inspector>.sa-tabs{display:grid!important;grid-template-columns:repeat(5,auto);gap:3px}
 .sa-inspector>.sa-tabs button,#reader-view .sa-inspector>.sa-tabs button{font-family:system-ui,sans-serif;padding:4px 3px!important;min-width:0}
}
/* Short windows with a proposal to decide on: the decision gets the room. Hint chips step
   aside, and an empty composer is a single line (the cost line appears with the first word). */
@media(min-width:701px) and (max-height:760px),(max-width:700px){
 .sa-guiding .sg-guide:has(.sg-proposal.is-proposed) .sg-chips{display:none}
 /* Never tied to focus: a layout change on blur would move a hint chip mid-click. */
 .sa-guiding .sg-composer .sg-input-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .sa-guiding .sg-composer:has(.sg-input:placeholder-shown) .sg-quote{display:none}
}
@media(min-width:701px) and (max-height:760px){
 .sa-guiding .sg-diff{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
 .sa-guiding .sg-diff>*{margin:0;min-width:0}
 .sa-guiding .sg-proposal{display:flex;flex-direction:column}
 /* Decision first: title, before/after, actions; the explanation follows. */
 .sa-guiding .sg-proposal>.sg-reason{order:5;margin:6px 0 0}
 .sa-guiding .sg-proposal>.sg-diff{order:3}
 .sa-guiding .sg-proposal>.sg-proposal-actions{order:4;padding-top:6px}
}
/* Short desktop windows: while the inspector is open the reader footer steps aside and the
   dock runs to the foot of the window, giving the discussion and proposals their room. */
@media(min-width:1200px) and (max-height:760px){
 #reader-view.sa-inspecting .rd-bottom{visibility:hidden}
 #reader-view .sa-inspector,#reader-view .sa-inspector.sa-guiding{bottom:12px!important;height:calc(100dvh - var(--sa-top,76px) - 12px)!important;max-height:calc(100dvh - var(--sa-top,76px) - 12px)!important}
}
@media(min-width:701px) and (max-height:760px){
 .sa-guiding .sg-diff{gap:0}
 .sa-guiding .sg-diff>.sg-before,.sa-guiding .sg-diff>.sg-after{padding:7px 9px}
 .sa-guiding .sg-diff>.sg-after{border-top:0;border-left:1px solid light-dark(#586763,#718b7d)}
 .sa-guiding .sg-diff p{max-height:6.9em}
}
/* The inspector's prose scales with the passage: explanatory text is set in a readable sans
   (not monospace) and grows on wide screens; restored forms grow with it. */
.sa-inspector :is(.sa-member-gloss,.sa-evidence,.sa-problem,.sa-tree-explanation p,.sa-sense,.sa-role,.sa-facts){font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:clamp(12.5px,.3vw + 7px,15px);line-height:1.55;letter-spacing:0}
@media(min-width:1600px){
 .sa-inspector .sa-member-form{font-size:clamp(18.9px,.45vw + 12px,22px)}
 .sa-inspector .sa-source-preview,.sa-inspector .sa-original{font-size:clamp(16px,.35vw + 10px,19px)}
 .sa-inspector>.sa-tabs button,#reader-view .sa-inspector>.sa-tabs button,.sa-inspector .sa-source-label,.sa-inspector .sa-eyebrow{font-size:13px!important}
}
/* Large displays: slide content scales with the deck instead of floating small in its middle. */
@media (min-width: 1900px) and (min-height: 1050px) { .rt-slide-inner { zoom: 1.35; } .rt-controls { zoom: 1.3; } }
@media (min-width: 2400px) and (min-height: 1300px) { .rt-slide-inner { zoom: 1.75; } .rt-controls { zoom: 1.6; } }

/* Passages wrap at the member or syllable boundaries their <wbr> marks, never at a letter by preference. */
.sa-passage{overflow-wrap:break-word}
/* The discussion fades at its scroll edges, so a line passing under the tab rule or the
   composer dissolves instead of being sliced. Padding keeps resting content clear of the fade. */
.sa-guiding .sg-guide>.sg-feed{padding-top:10px;padding-bottom:10px;mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%)}
/* Tablet cards always have the selected expression in view above them, so they do not repeat it. */
@media(min-width:701px) and (max-width:1199px){#reader-view .sa-inspector>.sa-source-disclosure{display:none}}
/* Wide screens: the reader's chrome and the Guide/inspector text scale with the passage, and
   the bar controls sit within a centred band instead of the far corners of the screen. */
@media(min-width:1600px){
 #reader-view .rd-bar{padding-inline:max(24px,calc((100vw - 1800px) / 2))}
 #reader-view .rd-bar button,#reader-view .rd-title,#reader-view .rd-position{font-size:clamp(12px,.35vw + 6px,15px)!important}
 #reader-view .rd-bar button{min-height:clamp(34px,1.2vw + 14px,44px);padding-inline:clamp(10px,.5vw,16px)!important}
 #reader-view .rd-status,#reader-view:has(.sa-toolbar) .rd-status>span:last-child,#reader-view .rd-status .sa-button{font-size:clamp(13px,.3vw + 8px,15px)}
 .sa-guiding .sg-diff p,.sa-guiding .sg-message-text{font-size:clamp(.91rem,.35vw + .55rem,1.12rem)}
 .sa-guiding .sg-proposal h4,#reader-view .sa-guiding .sg-proposal h4{font-size:clamp(1.1rem,.4vw + .7rem,1.35rem)}
 .sa-guiding .sg-reason,.sa-guiding .sg-diff-label,.sa-guiding .sg-eyebrow,.sa-guiding .sg-layer{font-size:13px}
 .sa-inspector-footer button,.sa-inspector button.sa-button{font-size:13px!important}
}
@media(min-width:1600px){
 .sa-toolbar button,#reader-view .sa-toolbar button,.sa-toolbar .sa-eyebrow{font-size:clamp(12px,.32vw + 7px,15px)!important}
 .sa-view-switch button,#reader-view .sa-view-switch button{min-height:clamp(36px,1vw + 20px,46px)}
 .sa-scaffold,.sa-scaffold p{font-size:clamp(1rem,.35vw + .6rem,1.2rem)}
 .sa-place-title,.sa-place-position{font-size:clamp(12px,.3vw + 7px,14px)}
 .sa-place-excerpt{font-size:clamp(1.08rem,.35vw + .7rem,1.3rem)}
}
/* Wide screens: ordinary pages (home, project, admin, reports, policies) scale as a whole, so
   their type and controls keep proportion with the screen. The workspace and reader keep their
   own wide layouts, and the admin tables gain room so addresses and actions stay on one line. */
@media(min-width:1600px){
 .app-container:not(:has(#segment-detail-view:not(.hidden),#reader-view:not(.hidden))),body > .container,body > footer{zoom:1.15}
 .app-container:not(.wh-container){max-width:1400px}
 .admin-table{table-layout:auto}
 .admin-table td.admin-email{white-space:nowrap}
 .admin-table .user-actions{flex-wrap:nowrap}
}
@media(min-width:2200px) and (min-height:1200px){
 .app-container:not(:has(#segment-detail-view:not(.hidden),#reader-view:not(.hidden))),body > .container,body > footer{zoom:1.4}
}
/* The Guide's empty-state heading aligns with its eyebrow and text at every size. */
.sg-empty h3,#reader-view .sg-empty h3{padding-left:0}
/* Notes span their section like the blocks around them, starting under their heading. */
#segment-detail-view .notes-section .editable-content{max-width:none;margin-inline:0}
/* Tablet/zoom cards cover their column exactly (no slivers of covered text beside them), and
   a soft scrim above the card fades the line passing under its top edge instead of cutting it. */
@media(min-width:701px) and (max-width:1199px){
 #sanskrit-workspace .sa-inspector,#sanskrit-workspace .sa-inspector.sa-guiding{left:max(32px,calc(50vw - 410px))!important;right:max(32px,calc(50vw - 410px))!important}
 #reader-view .sa-inspector,#reader-view .sa-inspector.sa-guiding{box-shadow:0 -34px 30px -6px var(--rd-bg),0 -12px 50px #0006!important}
 #sanskrit-workspace .sa-inspector,#sanskrit-workspace .sa-inspector.sa-guiding{box-shadow:0 -34px 30px -6px var(--sa-page-bg,var(--dark-bg)),0 -12px 50px #0006!important}
}
@media(min-width:701px) and (max-height:760px),(max-width:1199px){
 /* Once a hint is written the suggestion chips have done their job; the discussion gets the room. */
 .sa-guiding .sg-guide:has(.sg-input:not(:placeholder-shown)) .sg-chips{display:none}
}
/* Read-ahead: estimate, spending cap and Start live in a fixed dock below the scrolling body. */
.ra-dialog .modal-content{display:flex;flex-direction:column}
.ra-dialog .modal-body{flex:1 1 auto;min-height:0}
.ra-dock{flex:none;padding:12px 24px 16px;border-top:1px solid var(--border-color);background:light-dark(#f0f3f2,#202730)}
.ra-dock .ra-budget{margin:0 0 10px;padding:0 0 10px;border-top:0;gap:18px;align-items:end}
.ra-dock .ra-budget strong{font-size:1.25rem}
.ra-dock .ra-footer,.ra-dialog .ra-dock .ra-footer{position:static;margin:0;padding:0;border:0;background:transparent;backdrop-filter:none}
.ra-dock .ra-upload-status:empty,.ra-dock .ra-error[hidden]{display:none}
@media(max-height:700px){.ra-dock .ra-budget small{display:none}.ra-dock .ra-budget strong{font-size:1.05rem}}
@media(max-width:700px){.ra-dock{padding:10px 16px 12px}.ra-dock .ra-budget{grid-template-columns:1fr 1fr;gap:12px}.ra-dock .ra-budget small{display:none}}
@media(min-width:701px) and (max-height:760px),(max-width:1199px){
 /* After the first reply the hint chips wait until the hint box is focused. */
 .sa-guiding .sg-guide.sg-has-replies:not(.sg-show-hints) .sg-chips{display:none}
}