/**
 * Document viewer — the single-document page.
 *
 * Token-driven throughout, so dark mode and RTL come for free: the tokens are
 * redefined once in Free's frontend.css and every colour here follows. No raw
 * hex, no `margin-left` (Coding Rule 19 + the CSS token contract check).
 *
 * The three tiers share one shell so a PDF, a rendered Markdown file and a
 * download card all sit in the same box at the same width.
 *
 * @since 2.4.0
 */

.mvs-doc-viewer {
	display: flex;
	flex-direction: column;
	gap: var(--mvs-space-3);
	width: 100%;
}

/* --------------------------------------------------------------- tier 1 -- */

.mvs-doc-viewer__frame {
	width: 100%;
	/* Tall enough to read a page of a PDF without the frame itself scrolling
	   the document into a letterbox. Capped by viewport height so a long page
	   never pushes the download button off-screen on a laptop. */
	height: min(80vh, 800px);
	border: 1px solid var(--mvs-border-light);
	border-radius: var(--mvs-radius-md);
	background: var(--mvs-bg-subtle);
}

/* PDF.js viewer — the same slot the iframe occupies, so the fallback swap in
   document-pdf.js does not move the page. Scrolls itself rather than growing
   the document, which is what keeps the download button reachable on a long
   contract without hunting for it at the bottom. */
.mvs-pdf {
	width: 100%;
	/* Reserved slot height. Overridable per document via the instance property
	   --mvs-pdf-height (set by the mvs_document_pdf_height filter) — e.g. `auto`
	   to fit a short PDF instead of letterboxing it. */
	height: var(--mvs-pdf-height, min(80vh, 800px));
	overflow-y: auto;
	/* A wide page scrolls INSIDE this box; the page body must never scroll
	   sideways (a 390px phone opening an A3 drawing is the case). */
	overflow-x: auto;
	border: 1px solid var(--mvs-border-light);
	border-radius: var(--mvs-radius-md);
	background: var(--mvs-bg-subtle);
	-webkit-overflow-scrolling: touch;
}

/* Once the native iframe takes over, this element IS the frame — drop the
   double border and let the iframe's own styling apply. */
.mvs-pdf.is-native {
	height: auto;
	overflow: visible;
	border: 0;
	background: none;
}

.mvs-pdf__loading {
	margin: 0;
	padding: var(--mvs-space-6) var(--mvs-space-4);
	text-align: center;
	color: var(--mvs-text-muted);
	font-size: var(--mvs-font-sm);
}

.mvs-pdf__pages {
	display: flex;
	flex-direction: column;
	gap: var(--mvs-space-3);
	padding: var(--mvs-space-3);
}

.mvs-pdf__page {
	/* A placeholder height before the canvas lands, so lazily-rendered pages
	   have something for the observer to intersect with and the scrollbar does
	   not jump as each one draws. */
	min-height: 120px;
	background: var(--mvs-bg);
	border: 1px solid var(--mvs-border-light);
	border-radius: var(--mvs-radius-sm);
	overflow: hidden;
}

.mvs-pdf__page canvas {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 640px) {
	.mvs-pdf {
		/* Shorter on a phone, but NOT short enough to guarantee the download
		   button is above the fold — measured at 390x844 there is ~380px of
		   theme chrome above this box, so the button sits ~157px below it and
		   is one short scroll away. Sizing to fix that would mean a ~400px
		   preview: half a page, which trades a useful preview for saving one
		   flick. The earlier version of this comment claimed the opposite;
		   it was aspiration, not measurement.

		   `dvh` first because iOS Safari resolves `vh` against the LARGE
		   viewport — with the address bar showing, a `vh` box runs underneath
		   it and the last centimetre of the page is unreachable until the bar
		   collapses. `vh` stays as the fallback for browsers without `dvh`. */
		height: min(70vh, 560px);
		height: min(70dvh, 560px);
	}

	.mvs-pdf__pages {
		padding: var(--mvs-space-2);
		gap: var(--mvs-space-2);
	}
}

/* --------------------------------------------------------------- tier 2 -- */

.mvs-doc-preview {
	padding: var(--mvs-space-4);
	border: 1px solid var(--mvs-border-light);
	border-radius: var(--mvs-radius-md);
	background: var(--mvs-surface);
	color: var(--mvs-text);
	font-size: var(--mvs-font-md);
	line-height: 1.65;
	/* A rendered document is arbitrary member content: it must never widen the
	   page. Everything that could be wide scrolls inside its own box below. */
	overflow-wrap: break-word;
}

.mvs-doc-preview > :first-child {
	margin-block-start: 0;
}

.mvs-doc-preview > :last-child {
	margin-block-end: 0;
}

.mvs-doc-preview h2,
.mvs-doc-preview h3,
.mvs-doc-preview h4,
.mvs-doc-preview h5,
.mvs-doc-preview h6 {
	margin-block: var(--mvs-space-4) var(--mvs-space-2);
	font-family: var(--mvs-font-heading);
	line-height: 1.3;
}

.mvs-doc-preview p,
.mvs-doc-preview ul {
	margin-block: 0 var(--mvs-space-3);
}

.mvs-doc-preview ul {
	padding-inline-start: var(--mvs-space-5);
	list-style: disc;
}

.mvs-doc-preview a {
	color: var(--mvs-primary-text, var(--mvs-primary));
}

.mvs-doc-preview code {
	padding: 0.1em 0.35em;
	border-radius: var(--mvs-radius-sm);
	background: var(--mvs-bg-muted);
	font-size: 0.9em;
}

/*
 * Text and fenced code.
 *
 * PROSE WRAPS; CODE SCROLLS. These shared one rule and `white-space: pre`, which
 * is right for code — a wrapped line changes what the code says — and wrong for
 * a plain-text document, where the newlines are the author's paragraphs and
 * everything between them is prose. A 64 KB `.txt` with few line breaks became a
 * single line: measured at scrollWidth 589,952px inside a 550px box, so the
 * member saw eight words and a scrollbar.
 *
 * `overflow-wrap` was already set on both and did nothing, because
 * `white-space: pre` forbids wrapping in the first place.
 */
.mvs-doc-preview__text,
.mvs-doc-preview__code {
	margin: 0;
	padding: var(--mvs-space-3);
	border-radius: var(--mvs-radius-sm);
	background: var(--mvs-bg-muted);
	font-size: var(--mvs-font-sm);
	line-height: 1.5;
	-webkit-overflow-scrolling: touch;
}

/*
 * Prose: wrap at the box, break a word only when one word is wider than it.
 *
 * BOUNDED, because wrapping alone traded one problem for another. Unwrapped,
 * 64 KB was a single 589,952px line in a 105px box. Wrapped, the same 64 KB
 * became roughly 1,300 lines — a 27,000px column of text with the reactions,
 * comments and everything else on the page pushed below it. A preview is a
 * sample of the file, so it occupies a sample's worth of the page and scrolls
 * inside itself; the note underneath says what is not shown and Download is
 * next to it.
 */
.mvs-doc-preview__text {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	max-height: 28rem;
	overflow-y: auto;
}

/* Code: keep the author's line breaks and scroll in its own box. */
.mvs-doc-preview__code {
	overflow-x: auto;
}

.mvs-doc-preview__code code {
	padding: 0;
	background: none;
}

/* CSV. The wrapper scrolls, not the table, so a 40-column sheet is readable on
   a phone without the page itself moving sideways. */
.mvs-doc-preview__tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.mvs-doc-preview__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--mvs-font-sm);
	/* Numbers in a spreadsheet column line up. */
	font-variant-numeric: tabular-nums;
}

.mvs-doc-preview__table th,
.mvs-doc-preview__table td {
	padding: var(--mvs-space-2) var(--mvs-space-3);
	border-bottom: 1px solid var(--mvs-border-light);
	text-align: start;
	white-space: nowrap;
}

.mvs-doc-preview__table th {
	position: sticky;
	inset-block-start: 0;
	background: var(--mvs-bg-subtle);
	font-weight: 600;
}

/* wp-admin does not load frontend.css, and frontend.css is the only place the
   token scale is defined. So on the document edit screen every spacing token in
   this file resolved to nothing: padding collapsed to 0, the deck lost its
   gaps, and the preview looked broken rather than plain.

   The values are declared HERE, scoped to `.mvs-doc-preview-wrap` — a class the
   admin panel emits and the front end never does. Scoping matters: at `:root`
   these would override the theme-derived values on the front end, which is the
   opposite of what the token layer is for. */
.mvs-doc-preview-wrap {
	--mvs-space-2: 0.5rem;
	--mvs-space-3: 1rem;
	--mvs-space-4: 1.5rem;
	--mvs-space-5: 2rem;
	--mvs-surface: #fff;
	--mvs-bg-subtle: #f6f7f7;
	--mvs-bg-muted: #f9fafb;
	--mvs-text: #1e1e1e;
	--mvs-text-muted: #646970;
	--mvs-border: #dcdcde;
	--mvs-border-light: #e9e9ea;
	--mvs-radius-sm: 6px;
	--mvs-radius-md: 8px;
	--mvs-radius-lg: 12px;
	--mvs-font-sm: 0.8125rem;
	--mvs-font-md: 0.9375rem;
	--mvs-font-lg: 1.125rem;
	--mvs-touch-min: 44px;
}

/* Office prose. Measure is capped rather than filled: a .docx rendered edge to
   edge on a desktop is a 200-character line, which is unreadable however good
   the extraction was. */
.mvs-doc-preview__doc {
	max-width: 68ch;
}

.mvs-doc-preview__para {
	margin: 0 0 var(--mvs-space-3);
}

.mvs-doc-preview__para:last-child {
	margin-bottom: 0;
}

/* Slide decks. Each slide is a bounded block so the eye can tell where one
   ends — a deck flattened into continuous paragraphs loses the only structure
   a presentation actually has. */
.mvs-doc-preview__slide {
	padding: var(--mvs-space-4);
	border: 1px solid var(--mvs-border-light);
	border-radius: var(--mvs-radius-md);
	background: var(--mvs-bg-subtle);
}

.mvs-doc-preview__deck {
	display: flex;
	flex-direction: column;
	gap: var(--mvs-space-4);
}

.mvs-doc-preview__slide-title {
	margin: 0 0 var(--mvs-space-2);
	color: var(--mvs-text-muted);
	font-size: var(--mvs-font-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* An office sheet has no header row it can promise, so unlike the CSV table
   every cell is a <td>. Wrapping is allowed here because a spreadsheet cell
   holding a sentence is common and nowrap would push the grid off-screen.
   Scoped to the sheet modifier: unscoped, this would silently unpick the CSV
   table's deliberate nowrap, since both render through the same class. */
.mvs-doc-preview__table--sheet td {
	white-space: normal;
	min-width: 6ch;
}

/* The caveat under a preview is a CAPTION, not a paragraph of the page.
   It rendered at 15px against a 16px body, full width, in the gap between the
   preview card and the buttons — so it read as content the member was meant to
   take in, rather than a footnote about the thing above it. Pulled up tight
   against the card it describes and dropped a step in size. */
.mvs-doc-viewer__note {
	/* Negative margin closes the parent flex gap so the note hugs its card. */
	margin: calc(var(--mvs-space-3) * -1 + var(--mvs-space-1)) 0 0;
	max-width: 68ch;
	color: var(--mvs-text-muted);
	/* `--mvs-font-xs` is NOT defined anywhere in either plugin — measured at
	   runtime, it resolves to nothing, so this rule did nothing without the
	   fallback. Other files use the same token and are silently no-ops too;
	   raised separately. The fallback is the sanctioned form (Coding Rule 19). */
	font-size: var(--mvs-font-xs, 0.8125rem);
	line-height: 1.5;
}

/* Share and Download are one decision, so they sit on one row. As direct
   children of the column-flex viewer they landed on separate lines 60px apart. */
.mvs-doc-viewer__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mvs-space-2);
	/* The viewer ends here, and the social block's rule starts immediately
	   below. Without this the buttons sit ON that line. */
	padding-block-end: var(--mvs-space-3);
}

/* Tiers 3 + 4 use Free's `.mvs-doc-card` markup and Free's stylesheet styles
   it — Free renders the same card when Pro is absent, and one card with two
   stylesheets is one card that drifts. */

.mvs-doc-viewer--notice {
	padding: var(--mvs-space-4);
	border: 1px solid var(--mvs-border-light);
	border-radius: var(--mvs-radius-md);
	background: var(--mvs-bg-subtle);
	color: var(--mvs-text-muted);
}

/* ----------------------------------------------------------------- 390px -- */

@media (max-width: 640px) {

	.mvs-doc-viewer__frame {
		/* A phone-height PDF frame: tall enough to be worth showing, short
		   enough that the download button stays within a thumb's reach. */
		height: min(60vh, 480px);
	}

	.mvs-doc-preview {
		padding: var(--mvs-space-3);
	}

}

/* ---------------------------------------------------------------- share -- */

.mvs-doc-share-button {
	align-self: flex-start;
	min-height: var(--mvs-touch-min);
	padding: 0 var(--mvs-space-4);
	border: 1px solid var(--mvs-border);
	border-radius: var(--mvs-radius-md);
	background: var(--mvs-surface);
	color: var(--mvs-text);
	font-size: var(--mvs-font-md);
	font-weight: 600;
	cursor: pointer;
}

.mvs-doc-share-button:hover,
.mvs-doc-share-button:focus-visible {
	border-color: var(--mvs-primary);
	color: var(--mvs-primary-text, var(--mvs-primary));
}

.mvs-share {
	position: fixed;
	inset: 0;
	z-index: var(--mvs-z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--mvs-space-4);
	background: var(--mvs-overlay);
}

.mvs-share[hidden] {
	display: none;
}

.mvs-share__panel {
	display: flex;
	flex-direction: column;
	gap: var(--mvs-space-3);
	width: 100%;
	max-width: 30rem;
	padding: var(--mvs-space-5);
	border-radius: var(--mvs-radius-lg);
	background: var(--mvs-surface);
	box-shadow: var(--mvs-shadow-lg);
}

.mvs-share__title {
	margin: 0;
	color: var(--mvs-text);
	font-size: var(--mvs-font-lg);
}

.mvs-share__intro,
.mvs-share__note {
	margin: 0;
	color: var(--mvs-text-muted);
	font-size: var(--mvs-font-sm);
}

.mvs-share__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mvs-space-2);
}

.mvs-share__create,
.mvs-share__close {
	min-height: var(--mvs-touch-min);
	padding: 0 var(--mvs-space-4);
	border-radius: var(--mvs-radius-md);
	font-size: var(--mvs-font-md);
	font-weight: 600;
	cursor: pointer;
}

.mvs-share__create {
	border: 0;
	background: var(--mvs-primary);
	color: var(--mvs-on-primary);
}

.mvs-share__create:hover {
	background: var(--mvs-primary-hover);
}

.mvs-share__close {
	border: 1px solid var(--mvs-border);
	background: var(--mvs-surface);
	color: var(--mvs-text);
}

.mvs-share__link-label {
	color: var(--mvs-text);
	font-size: var(--mvs-font-sm);
	font-weight: 600;
}

.mvs-share__link {
	width: 100%;
	min-height: var(--mvs-touch-min);
	padding: 0 var(--mvs-space-3);
	border: 1px solid var(--mvs-border);
	border-radius: var(--mvs-radius-sm);
	background: var(--mvs-bg-subtle);
	color: var(--mvs-text);
	font-family: monospace;
	font-size: var(--mvs-font-sm);
}

.mvs-share__panel :focus-visible {
	outline: 2px solid var(--mvs-primary);
	outline-offset: 2px;
}

/* --- sharing with people and roles ------------------------------------- */

/* The panel can now be taller than the viewport on a phone, so it scrolls
   inside itself rather than pushing the close button off-screen. */
.mvs-share__panel {
	max-height: calc(100vh - var(--mvs-space-5) * 2);
	overflow-y: auto;
}

/*
 * `display: flex` below and the UA's `[hidden] { display: none }` carry the SAME
 * specificity, so the later sheet wins and `hidden` silently does nothing. The
 * role section is hidden that way for members who may not share by role, and it
 * kept rendering — an empty dropdown beside a live Share button, which is worse
 * than the control it replaced (Basecamp 10263258669).
 *
 * Anything toggled with the `hidden` attribute needs this pairing whenever the
 * element also has a display rule of its own.
 */
.mvs-share__section[hidden] {
	display: none;
}

.mvs-share__section {
	display: flex;
	flex-direction: column;
	gap: var(--mvs-space-2);
	padding-top: var(--mvs-space-3);
	border-top: 1px solid var(--mvs-border-light);
}

.mvs-share__heading {
	margin: 0;
	color: var(--mvs-text);
	font-size: var(--mvs-font-sm);
	font-weight: 600;
}

.mvs-share__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mvs-space-2);
}

.mvs-share__input {
	flex: 1 1 11rem;
	min-width: 0;
	min-height: var(--mvs-touch-min);
	padding: 0 var(--mvs-space-3);
	border: 1px solid var(--mvs-border);
	border-radius: var(--mvs-radius-md);
	/* Colour only, and !important for the same reason the dashboard toolbar's
	   search field needs it: BuddyX's bx-tokens-applied.css styles
	   `input:not([type="submit"])…` through five chained :not()s — specificity
	   (0,5,1), which no class selector beats. Without this the field stayed
	   white with grey text on a dark share panel, while the select beside it
	   went dark, because the theme's grouped selector only carries that weight
	   on its `input` branch. */
	background: var(--mvs-surface) !important;
	color: var(--mvs-text) !important;
	font-size: var(--mvs-font-sm);
}

.mvs-share__select {
	min-height: var(--mvs-touch-min);
	padding: 0 var(--mvs-space-2);
	border: 1px solid var(--mvs-border);
	border-radius: var(--mvs-radius-md);
	background: var(--mvs-surface);
	color: var(--mvs-text);
	font-size: var(--mvs-font-sm);
}

.mvs-share__select--role {
	flex: 1 1 8rem;
	min-width: 0;
}

.mvs-share__go {
	min-height: var(--mvs-touch-min);
	padding: 0 var(--mvs-space-4);
	border: 1px solid var(--mvs-border-light);
	border-radius: var(--mvs-radius-md);
	background: var(--mvs-surface);
	color: var(--mvs-text);
	font-size: var(--mvs-font-sm);
	font-weight: 600;
	cursor: pointer;
}

.mvs-share__go:hover,
.mvs-share__go:focus-visible {
	border-color: var(--mvs-primary);
	color: var(--mvs-primary-text, var(--mvs-primary));
}

.mvs-share__empty {
	margin: 0;
	color: var(--mvs-text-muted);
	font-size: var(--mvs-font-sm);
}

.mvs-share__empty[hidden] { display: none; }

.mvs-share__grants {
	display: flex;
	flex-direction: column;
	gap: var(--mvs-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mvs-share__grant {
	display: flex;
	align-items: center;
	gap: var(--mvs-space-2);
	font-size: var(--mvs-font-sm);
}

.mvs-share__grant-who {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	color: var(--mvs-text);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mvs-share__grant-level {
	flex: 0 0 auto;
	padding: 0 var(--mvs-space-2);
	border-radius: var(--mvs-radius-sm);
	background: var(--mvs-bg-muted);
	color: var(--mvs-text-secondary);
	font-size: var(--mvs-font-xs, 0.8125rem);
}

.mvs-share__grant-remove {
	flex: 0 0 auto;
	min-height: var(--mvs-touch-min);
	padding: 0 var(--mvs-space-2);
	border: 0;
	background: none;
	color: var(--mvs-text-muted);
	font-size: var(--mvs-font-sm);
	cursor: pointer;
	text-decoration: underline;
}

.mvs-share__grant-remove:hover,
.mvs-share__grant-remove:focus-visible {
	color: var(--mvs-danger);
}

.mvs-share__link-intro {
	margin: 0;
	color: var(--mvs-text-muted);
	font-size: var(--mvs-font-sm);
}

.mvs-share__create {
	align-self: flex-start;
	min-height: var(--mvs-touch-min);
	padding: 0 var(--mvs-space-4);
	border: 1px solid var(--mvs-border-light);
	border-radius: var(--mvs-radius-md);
	background: var(--mvs-surface);
	color: var(--mvs-text);
	font-size: var(--mvs-font-sm);
	font-weight: 600;
	cursor: pointer;
}

/* Type-ahead member search in the "Share with someone" field (Basecamp
   10231341360). The combobox wraps the input so the suggestion list can anchor
   to it; the list floats over the panel content below. */
.mvs-share__combobox {
	position: relative;
	flex: 1 1 11rem;
	min-width: 0;
}

.mvs-share__combobox .mvs-share__input {
	width: 100%;
}

.mvs-share__suggest {
	position: absolute;
	z-index: 1;
	inset-inline: 0;
	top: calc(100% + 2px);
	margin: 0;
	padding: var(--mvs-space-1);
	max-height: 14rem;
	overflow-y: auto;
	list-style: none;
	border: 1px solid var(--mvs-border-light);
	border-radius: var(--mvs-radius-md);
	background: var(--mvs-surface);
	box-shadow: var(--mvs-shadow-lg);
}

.mvs-share__suggest[hidden] {
	display: none;
}

.mvs-share__suggest-item {
	display: flex;
	align-items: center;
	gap: var(--mvs-space-2);
	padding: var(--mvs-space-2);
	border-radius: var(--mvs-radius-sm);
	cursor: pointer;
}

.mvs-share__suggest-item[aria-selected="true"],
.mvs-share__suggest-item:hover {
	background: var(--mvs-bg-subtle);
}

/* Non-interactive error row (search failed). Muted, no pointer, no hover. */
.mvs-share__suggest-error,
.mvs-share__suggest-error:hover {
	cursor: default;
	background: none;
	color: var(--mvs-text-muted);
}

.mvs-share__suggest-avatar {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
}

.mvs-share__suggest-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--mvs-text);
	font-size: var(--mvs-font-sm);
}