/* Buffet -- the guest surface (/s/<token>).
 *
 * Loaded AFTER app.css and item.css and scoped under .guest-body throughout, per the rule this
 * project learned three times in one day: a globally loaded stylesheet may only style what it owns
 * by name. app.css once made the item page unscrollable and item.css capped the whole application
 * at 58rem; both were selectors reaching outside their own surface. Nothing here selects a bare
 * element. */

.guest-body
{
	max-width: 62rem;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 4rem;
}

.guest-body .guest-main h1
{
	font-size: var( --text-2xl );
	line-height: 1.25;
	margin: 0 0 1.25rem;
}

.guest-body .guest-player,
.guest-body .guest-still
{
	display: block;
	width: 100%;
	max-width: 100%;
	border-radius: 0.4rem;
	background: #000;
}

/* A RENDERED MARKDOWN FILE ON THE GUEST PAGE (D449). Jon's brief, 2026-09-20: a nice readable width,
   a height that follows the window and gives the document a lot of it, and still room outside the
   frame for what Buffet says about the item.

   WIDTH. The stage is the column's full 62rem, so its edges line up with the title above it and
   the metadata below -- the first version capped and centred it, and the frame sat forty pixels
   in from a title it should have hung under. The READABLE measure is the document's own business:
   markdown-frame.css sets the text at 46rem and centres it, on paper that runs to the frame's edge.

   HEIGHT. The window's height less a fixed allowance -- the title above it and a first glimpse of
   the description, rights and download below, so that a reader can see there IS something below
   and the page does not read as a bare document viewer. `dvh` where it exists, because on a phone
   `vh` counts the space under the browser's collapsing toolbar and the frame's foot would sit
   beneath it; `vh` first as the fallback. The page cannot measure a frame that has no origin, so
   the frame scrolls inside a height the PAGE chooses, and the floor keeps a short landscape phone
   from being handed a slot.

   The ground is the token the frame's own stylesheet paints with, as on the item page: no flash
   of another colour while it loads, no seam once it has. */
.guest-body .guest-markdown-stage
{
	width: 100%;
	margin: 0 0 1.5rem;
	height: calc( 100vh - 15rem );
	height: calc( 100dvh - 15rem );
	min-height: 24rem;
	border: 1px solid var( --rule );
	border-radius: 0.4rem;
	overflow: hidden;
	background: var( --card-background );
}

.guest-body .guest-markdown-frame
{
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: var( --card-background );
}

@media ( max-width: 46rem )
{
	/* A phone has less to spare above and below, and the title wraps: a smaller allowance, so the
	   document still gets most of the screen. */
	.guest-body .guest-markdown-stage
	{
		height: calc( 100vh - 11rem );
		height: calc( 100dvh - 11rem );
		min-height: 20rem;
	}
}

.guest-body .guest-description
{
	margin: 1.25rem 0 0;
	max-width: 46rem;
	line-height: 1.55;
}

/* A shared container's description (D320), rendered from the same subset as the shell's. */
.guest-body .guest-scope-description { margin: 0 0 1.5rem; }
.guest-body .guest-scope-description > :first-child { margin-top: 0; }
.guest-body .guest-scope-description ul, .guest-body .guest-scope-description ol { padding-left: 1.4rem; }
.guest-body .guest-scope-description blockquote { padding-left: .8rem; border-left: 3px solid currentColor; opacity: .8; margin-inline: 0; }

.guest-body .guest-actions
{
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.5rem 0 0;
}

/* The format and the size beside the verb (D321): a fact in the control's own line, quieter than
   the verb so the eye reads "Download original" first and "MOV · 3.3 GB" second. */
.guest-body .guest-download-facts
{
	opacity: 0.7;
	font-size: 0.9em;
}

/* EVERY GUEST BUTTON IS A TINT, NOT AN OUTLINE (Jon, 2026-10-08: "an aversion to too many lines in an
   area" -- first the list's Download, then "all the guest view buttons"). A fill of the ink at 10%,
   20% under the pointer, and no border: the border is kept TRANSPARENT rather than removed so that no
   control changes size and nothing reflows. It covers this page's own controls -- the downloads and
   the password gate's button -- and the item page's components as a guest page draws them: the page
   reader's bar and the view chips (item.css owns their shape and keeps its outlines in the shell).
   A state is still a state: the current view chip keeps its accent fill, a pressed reader button
   tints in the accent, a disabled one stays faded. Not the Gallery's: it shares `guest-body`, and
   its controls are its theme's. The list's switch and Download follow the same rule in
   guest-list.css. */
.guest-body .guest-download
{
	display: inline-block;
	padding: 0.55rem 1rem;
	border-radius: 0.3rem;
	color: inherit;
	text-decoration: none;
}

.guest-body:not( .gallery-body ) :is( .guest-download, .gate-form button, .page-reader-button, .rendition )
{
	border: 1px solid transparent;
	background: color-mix( in srgb, currentColor 10%, transparent );
}

.guest-body:not( .gallery-body ) :is( .guest-download, .gate-form button, .page-reader-button:not( [disabled] ), .rendition[data-state="ready"] ):is( :hover, :focus-visible )
{
	border-color: transparent;
	background: color-mix( in srgb, currentColor 20%, transparent );
}

.guest-body:not( .gallery-body ) .page-reader-button[aria-pressed="true"]
{
	border-color: transparent;
	color: var( --accent );
	background: color-mix( in srgb, var( --accent ) 16%, transparent );
}

.guest-body:not( .gallery-body ) .rendition[aria-current="true"]
{
	border-color: transparent;
	background: var( --accent );
}

.guest-body .guest-count
{
	margin: -0.75rem 0 1.5rem;
	opacity: 0.7;
	font-size: var( --text-base );
}

/* auto-fill rather than auto-fit: a delivery folder holding one approved cut should show one card
   at its natural size, not one card stretched across the whole viewport. */
.guest-body .guest-grid
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 15rem, 1fr ) );
	gap: 1.25rem;
}

.guest-body .guest-card a
{
	display: block;
	text-decoration: none;
}

/* THE BOX, which the picture used to be. The aspect ratio, the corner and the empty colour moved off
   the img and onto a wrapper of its own so that there is something to clip against -- which is what
   the crop hint needs, and what the shell's card has had all along (D365). Without a box, a picture
   scaled past its frame simply overflows the card.

   `overflow: hidden` and `position: relative` are the two properties that make the wrapper a window;
   everything else here is what the img was already doing. */
.guest-body .guest-card-preview
{
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 0.3rem;
	background: #0003;
}

.guest-body .guest-card img
{
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The crop hint, spending the four percentages keyimage.php computed. The identical rule to the
   shell's, on a different class, and the duplication is the price of the guest document sharing no
   stylesheet with the application (which is deliberate -- D211 keeps /assets/ away from anyone who
   has not signed in). If a third surface ever wants it, that is the moment for a shared file. */
.guest-body .guest-card-preview[data-key-crop] img
{
	inset: auto;
	left: var( --key-crop-left );
	top: var( --key-crop-top );
	width: var( --key-crop-width );
	height: var( --key-crop-height );
}

.guest-body .guest-card .no-preview
{
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	font-size: var( --text-base );
	opacity: 0.7;
}

.guest-body .guest-card-title
{
	display: block;
	margin-top: 0.5rem;
	line-height: 1.35;
}

.guest-body .gate-form
{
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: end;
	margin-top: 1.25rem;
}

.guest-body .gate-form label { display: block; width: 100%; font-size: var( --text-base ); }
.guest-body .gate-form input { padding: 0.5rem 0.6rem; min-width: 14rem; }
.guest-body .gate-form button { padding: 0.55rem 1.1rem; }
.guest-body .gate-error { color: #b3261e; }

.guest-body .guest-footer
{
	margin-top: 4rem;
	padding-top: 1.25rem;
	border-top: 1px solid #8884;
	font-size: var( --text-base );
	opacity: 0.7;
}

.guest-body .guest-pending
{
	margin: 0.85rem 0 0;
	font-size: var( --text-base );
	opacity: 0.75;
}

/* The rights block a client reads under the work (D343, widened at D370): the line, then the same
   rightsholder / credits / conditions block the item page shows a reader who may not edit, then the
   copiable byline where the licence obliges one. The block's own rules live in item.css, scoped to
   `.rights-area`, and this document loads that sheet -- so what is left here is the guest-side
   spacing and the smaller type a page with one work on it wants.
   `.guest-rights-conditions` was retired with the hand-written conditions paragraph it styled: the
   conditions now come from renderRightsReadOnly() as `.rights-conditions`, styled in item.css. */
.guest-body .guest-rights { margin: 0.75rem 0 0; font-size: var( --text-md ); }
.guest-body .guest-rights-area { margin: 0; }
.guest-body .guest-rights-area h3 { margin: 0.75rem 0 0.2rem; font-size: var( --text-base ); }
.guest-body .guest-rights-area .rights-rightsholder,
.guest-body .guest-rights-area .credits-list,
.guest-body .guest-rights-area .rights-conditions { font-size: var( --text-base ); margin: 0 0 0.35rem; }
.guest-body .guest-rights-area .credits-list { padding-left: 1.1rem; }
.guest-body .guest-rights-area .rights-conditions { white-space: pre-line; }
.guest-body .guest-rights-area .rights-attribution { margin: 0.6rem 0 0; display: grid; gap: 0.2rem; max-width: 46rem; }
.guest-body .guest-rights-area .rights-attribution textarea { font: inherit; font-size: var( --text-base ); width: 100%; }
.guest-body .guest-rights-area .share-url-hint { font-size: var( --text-sm ); opacity: 0.75; }
/* The AI-training reservation, said to the guest as well as the crawler (D347). */
.guest-body .guest-ai-training { margin: 0.35rem 0 0; font-size: var( --text-base ); opacity: 0.8; }


/* ---------------------------------------------------------------------------------------------
   THE TOUCH-SCREEN FONT FLOOR, the guest document.

   app.css states the rule and the whole argument for it: under a coarse pointer no text-entry
   control may compute below 16px, because iOS Safari zooms the page in on focusing one and never
   zooms back out. This file loads AFTER app.css, so every field it sizes here wins the tie against
   that floor and has to repeat it. A stranger on a phone is the likeliest reader this
   surface has, which makes it the worst place to leave the trigger armed.
   --------------------------------------------------------------------------------------------- */

@media ( pointer: coarse )
{
	.guest-body .guest-rights-area .rights-attribution textarea
	{
		font-size: max( 16px, 1em );
	}
}