:root
{
		color-scheme: var( --ua-color-scheme, light dark );

	--page-background: #f4f4f2;
	--page-background-translucent: rgb( 244 244 242 / 0.6 );
	--card-background: #ffffff;
	--ink: #16181c;
	--ink-quiet: #5c626c;
	--ink-very-quiet: #acafb4;
	--rule: #d8d8d4;
	--accent: #2f6f4f;
	--accent-quiet: #e6efe9;
	--warning: #8a2b1f;
	--warning-quiet: #f7e8e5;
}

@media ( prefers-color-scheme: dark )
{
	:root
	{
		--page-background: #17181a;
		--page-background-translucent: rgb( 23 24 26 / 0.6 );
		--card-background: #1f2124;
		--ink: #eceef1;
		--ink-quiet: #a2a8b2;
		--ink-very-quiet: #55575b;
		--rule: #32353a;
		--accent: #6fbf95;
		--accent-quiet: #23302a;
		--warning: #f0907f;
		--warning-quiet: #33221f;
	}
}

*
{
	box-sizing: border-box;
}

body.item-page
{
	margin: 0;
	padding: 2.5rem 1.5rem 4rem;
	background: var( --page-background );
	color: var( --ink );
	font: var( --text-md )/1.55 var( --font-ui, system-ui, sans-serif );
	-webkit-font-smoothing: antialiased;
}

body.item-page main
{
	max-width: 58rem;
	margin: 0 auto;
}

body.item-page a
{
	color: var( --accent );
}

.breadcrumb
{
	margin: 0 0 1.5rem;
	font-size: var( --text-base );
	color: var( --ink-quiet );
}

.item-view h1
{
	margin: 0 0 .35rem;
	font-size: var( --text-2xl );
	letter-spacing: -.015em;
	line-height: 1.2;
	word-break: break-word;
}

.urn
{
	margin: 0 0 1.25rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var( --text-sm );
	color: var( --ink-quiet );
	word-break: break-all;
}

.badges
{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 1.75rem;
}

.item-view .badge
{
	padding: .2rem .5rem;
	font-size: var( --text-xs );
	text-transform: uppercase;
}

.preview
{
	margin: 0 0 2rem;
	border: 1px solid var( --rule );
	border-radius: .75rem;
	background: var( --card-background );
	overflow: hidden;
}

.item-view { --media-max-height: 50vh; }

.tool-areas
{
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 21rem, 1fr ) );
	gap: 1rem;

		align-items: stretch;
	margin: 1.5rem 0;
}

.tool-areas .tool-area
{
	margin: 0;
	display: flex;
	flex-direction: column;
		min-width: 0;
}

.tool-areas .tool-area:has( .tool-media ) > .tool-area-footer { margin-top: auto; }

.tool-media
{
	display: grid;
	place-items: center;
		aspect-ratio: var( --item-aspect, 16 / 9 );

		width: min( 100%, calc( var( --media-max-height ) * var( --item-aspect-decimal, 1.7778 ) ) );

	margin-inline: auto;

		margin-bottom: 1.1rem;

	overflow: hidden;
	border-radius: 4px;
	background: #111;
}

.tool-media img,
.tool-media video
{
	display: block;
	width: 100%;
	height: 100%;
		object-fit: contain;
	background: #000;
}

.tool-media .preview-placeholder
{
	margin: 0;
	padding: 1rem 1.25rem;
	max-width: 28rem;
	text-align: center;
	color: #d8d8d4;
	background: transparent;
	font-size: var( --text-base );
	line-height: 1.5;
}

.tool-media .preview-placeholder[data-kind="file"]
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	font-size: var( --text-lg );
}

.tool-media .preview-placeholder .no-preview-extension { color: #f0f0ee; }
.tool-media .preview-placeholder .no-preview-noun { color: #b6b6b2; }

.preview-caption
{
	padding: .7rem .9rem;
	border-top: 1px solid var( --rule );
	font-size: var( --text-sm );
	color: var( --ink-quiet );
}

.preview-placeholder
{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 12rem;
	padding: 2rem 1.5rem;
	text-align: center;
	color: var( --ink-quiet );
	font-size: var( --text-md );
}

.preview[data-state="dead"] .preview-placeholder,
.preview[data-state="failed"] .preview-placeholder
{
	color: var( --warning );
}

.item-view section
{
	margin: 0 0 2rem;
}

.item-view .item-columns .details-form,
.item-view .item-columns .share-note,
.item-view .item-columns .tool-area-summary { max-width: none; }

.details-form + .details-state { margin: 1rem 0 0; }

.details-save-row { display: flex; justify-content: flex-end; margin-top: 1rem; }

.item-depth
{
	margin: 0 0 2rem;
	border: 1px solid var( --rule );
	border-radius: .6rem;
}

.item-depth-summary
{
	position: relative;
	display: grid;
	gap: .15rem;
	padding: .75rem 1rem .8rem 2.1rem;
	cursor: pointer;
	background: var( --card-background );
	border-radius: .6rem;
	list-style: none;
}

.item-depth-summary::-webkit-details-marker { display: none; }

.item-depth[ open ] .item-depth-summary
{
	border-radius: .6rem .6rem 0 0;
	border-bottom: 1px solid var( --rule );
}

.item-depth-summary::before
{
	content: "";
	position: absolute;
	left: 1rem;
	top: 1.15rem;
	width: .4rem;
	height: .4rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate( -45deg );
	opacity: .65;
}

.item-depth[ open ] .item-depth-summary::before
{
	top: 1.05rem;
	transform: rotate( 45deg );
}

.item-depth-summary:focus-visible
{
	outline: 2px solid var( --accent );
	outline-offset: 2px;
}

.item-depth-title
{
	font-weight: 600;
	font-size: var( --text-md );
	letter-spacing: -.005em;
}

.item-depth-hint
{
	font-size: var( --text-sm );
	color: var( --ink-quiet );
}

.item-depth-body
{
	padding: 1.25rem 1rem .25rem;
}

.item-depth-body > section:last-child { margin-bottom: .75rem; }

.item-view h2
{
	margin: 0 0 .7rem;
	font-size: var( --text-lg );
	letter-spacing: -.005em;
}

.item-view table
{
	width: 100%;
	border-collapse: collapse;
	background: var( --card-background );
	border: 1px solid var( --rule );
	border-radius: .6rem;
	overflow: hidden;
	font-size: var( --text-base );
}

.item-view caption
{
	padding: 0 0 .55rem;
	text-align: left;
	font-size: var( --text-sm );
	color: var( --ink-quiet );
}

.item-view th, .item-view td
{
	padding: .55rem .8rem;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid var( --rule );
}

.item-view thead th
{
	border-top: 0;
	font-size: var( --text-xs );
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var( --ink-quiet );
	white-space: nowrap;
}

.item-view tbody th
{
	width: 13rem;
	font-weight: 600;
	white-space: nowrap;
}

.mono
{
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var( --text-sm );
	word-break: break-all;
}

.quiet
{
	color: var( --ink-quiet );
}

.warn
{
	color: var( --warning );
}

.table-scroll
{
	overflow-x: auto;
}

.item-view footer
{
	margin-top: 2.5rem;
	padding-top: 1rem;
	border-top: 1px solid var( --rule );
	font-size: var( --text-sm );
	color: var( --ink-quiet );
}

.outcome
{
	margin: 1.5rem 0;
	padding: .9rem 1.1rem;
	border: 1px solid var( --outcome-edge, #d8d8d8 );
	border-left: 3px solid var( --outcome-accent, #999 );
	border-radius: 4px;
	background: var( --outcome-ground, #fafafa );
}
.outcome h2 { margin: 0 0 .4rem; font-size: var( --text-md ); }
.outcome p { margin: 0 0 .4rem; font-size: var( --text-base ); line-height: 1.5; }
.outcome-next { font-weight: 500; }
.outcome-assurance { opacity: .85; font-style: italic; }
.outcome-technical { margin-bottom: 0; opacity: .6; font-size: var( --text-sm ); }

.outcome-more { margin-top: .2rem; }
.outcome-more summary { cursor: pointer; font-size: var( --text-sm ); opacity: .7; }
.outcome-more summary:hover { opacity: 1; }
.outcome-more > p { margin-top: .4rem; }

.outcome-compact { margin: .8rem 0; padding: .45rem .8rem; }
.outcome-compact .outcome-line { margin: 0; font-size: var( --text-base ); }
.outcome-compact .outcome-line strong { font-weight: 600; }

.outcome[data-tone="notice"]  { --outcome-accent: #4a7fb5; --outcome-ground: #f5f8fb; --outcome-edge: #dbe4ee; }
.outcome[data-tone="warning"] { --outcome-accent: #b5822a; --outcome-ground: #fdf9f1; --outcome-edge: #ede0c8; }
.outcome[data-tone="error"]   { --outcome-accent: #a51d2d; --outcome-ground: #fdf3f4; --outcome-edge: #eed3d6; }

.player { margin: 1.5rem 0; }
.loop-view { margin: 0; }

.player-pending
{
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	background: #111 center / contain no-repeat;
}
.player-pending p
{
	max-width: 32rem; margin: 0; padding: 1rem 1.4rem; text-align: center;
	background: rgba( 0, 0, 0, 0.62 ); color: #f2f2f2; border-radius: 4px; font-size: var( --text-base );
}

.renditions
{
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: center;
	margin: .6rem 0 0;
	padding: 0;
}

.rendition
{
	display: inline-flex;
	align-items: baseline;
	gap: .35rem;
	padding: .34rem .8rem;
	border: 1px solid var( --rule );
	border-radius: 999px;
	font-size: var( --text-base );
	font-family: inherit;
	line-height: 1.4;
	text-decoration: none;
	color: var( --ink );
	background: var( --card-background );
}

.rendition[hidden]
{
	display: none;
}

.rendition .ar-quicklook-glyph
{
	width: 1.1em;
	height: 1.1em;
	object-fit: cover;
	border-radius: 999px;
	align-self: center;
}

.rendition[data-state="ready"]:hover
{
	border-color: var( --ink-quiet );
}

.rendition:focus-visible
{
	outline: 2px solid var( --accent );
	outline-offset: 2px;
}

.rendition[aria-current="true"]
{
	border-color: var( --accent );
	background: var( --accent );
	color: var( --page-background );
	font-weight: 600;
}

.rendition-note
{
	font-variant: all-small-caps;
	letter-spacing: .03em;
	opacity: .75;
}

.rendition[data-state="working"]
{
	color: var( --ink-quiet );
	border-color: var( --rule );
	background-color: color-mix( in srgb, var( --ink-quiet ) 8%, var( --card-background ) );
	background-image: linear-gradient
	(
		100deg,
		transparent 25%,
		color-mix( in srgb, var( --accent ) 26%, transparent ) 48%,
		transparent 71%
	);
	background-size: 220% 100%;
	background-repeat: no-repeat;
	animation: affordance-sweep 2.1s linear infinite;
}

@media ( prefers-reduced-motion: reduce )
{
	.rendition[data-state="working"]
	{
		animation: none;
		background-image: none;
	}
}

.rendition[data-state="failed"],
.rendition[data-state="dead"]
{
	color: var( --warning );
	border-color: color-mix( in srgb, var( --warning ) 45%, transparent );
	background: var( --warning-quiet );
}

.rendition[aria-disabled="true"] { cursor: default; }

.rendition[data-state="absent"]
{
	border-style: dashed;
	color: var( --ink-quiet );
	background: transparent;
}

.action-outcome
{
	margin: 1rem 0 0;
	padding: .55rem .85rem;
	border-radius: 4px;
	font-size: var( --text-base );
	background: var( --accent-quiet );
	color: var( --accent );
}

.action-outcome[data-tone="refused"]
{
	background: var( --warning-quiet );
	color: var( --warning );
}

.tool-area
{
	margin: 1.5rem 0;
	padding: 1rem 1.15rem 1.15rem;
	border: 1px solid var( --rule );
	border-radius: 8px;
	background: var( --card-background );
}

.tool-area-header { margin: 0 0 .85rem; }

.tool-area-title
{
	margin: 0;
	font-size: var( --text-md );
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var( --ink );
}

.tool-area-badges
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	margin: .35rem 0 0;
}

.tool-area-badges .badge[data-key-image-state="pending"]
{
	background: var( --warning-quiet );
	color: var( --warning );
}

.tool-area-badges .badge[data-key-image-state="borrowed"],
.tool-area-badges .badge[data-key-image-state="chosen"]
{
	background: var( --accent-quiet );
	color: var( --accent );
}

.tool-area-summary
{
	margin: .25rem 0 0;
	max-width: 46rem;
	font-size: var( --text-base );
	line-height: 1.5;
	color: var( --ink-quiet );
}

.tool-area-empty
{
	margin: .5rem 0;
	font-size: var( --text-base );
	color: var( --ink-quiet );
}

.tool-controls
{
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	align-items: center;
	margin: .85rem 0 0;
	padding: 0;
}

.tool-area .preview { margin: 0; border: 0; background: transparent; overflow: visible; }
.tool-area .player { margin: 0; }
.tool-area .renditions { margin-top: .75rem; }

.lifecycle-area
{
	margin: 2.5rem 0 1rem;

		border-left: 3px solid var( --ink-quiet );
	border-radius: 0 8px 8px 0;
}

.lifecycle-confirm
{
	display: flex;
	align-items: baseline;
	gap: .45rem;
	margin: .55rem 0 0;
	font-size: var( --text-base );
	color: var( --ink );
	cursor: pointer;
}

.model-viewer
{
	width: 100%;
	height: 100%;
		background: #16181d;
}

.model-viewer canvas
{
	display: block;
	width: 100%;
	height: 100%;
		touch-action: pan-y;
}

.model-viewer canvas:focus-visible
{
		outline: 2px solid #8ab4f8;
	outline-offset: -2px;
}

.markdown-stage
{
	height: min( 75vh, 52rem );
	min-height: 18rem;
	margin-bottom: .75rem;
	border: 1px solid var( --rule );
	border-radius: 6px;
	overflow: hidden;
	background: var( --card-background );
}

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

.page-reader
{
	display: flex;
	flex-direction: column;
	margin-bottom: .75rem;
	border: 1px solid var( --rule );
	border-radius: 6px;
	overflow: hidden;
	background: #4a4d52;
}

.page-reader-bar
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .4rem;
	padding: .4rem .6rem;
	border-bottom: 1px solid var( --rule );
	background: var( --card-background );
	color: var( --ink );
	font-size: var( --text-sm );
}

.page-reader-bar-group
{
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.page-reader-bar[hidden] { display: none; }

.page-reader-position
{
	min-width: 6.5rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
	color: var( --ink-quiet );
}

.page-reader-button
{
	padding: .2rem .65rem;
	border: 1px solid var( --rule );
	border-radius: 999px;
	background: var( --card-background );
	color: var( --ink );
		font: inherit;
	font-size: var( --text-sm );
	white-space: nowrap;
	cursor: pointer;
}

.page-reader-button:hover { border-color: var( --ink-quiet ); }
.page-reader-button:focus-visible { outline: 2px solid var( --accent ); outline-offset: 2px; }
.page-reader-button[aria-pressed="true"] { border-color: var( --accent ); color: var( --accent ); }
.page-reader-button[disabled] { opacity: .45; cursor: default; }

.page-reader-pages
{
		position: relative;
	display: flex;
	flex-direction: column;
	gap: .75rem;
		height: max( var( --media-max-height, 50vh ), 24rem );
	min-height: 18rem;
	padding: .75rem;
	overflow: auto;
		overscroll-behavior: contain;
}

.page-reader-pages:focus-visible { outline: 2px solid var( --accent ); outline-offset: -2px; }

.page-reader-page
{
	display: block;
	flex: none;
	width: calc( var( --page-reader-zoom, 1 ) * 100% );
	max-width: none;
	height: auto;
	margin-inline: auto;
	background: #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .35 );
}

.page-reader[data-fit="page"] .page-reader-page
{
	width: auto;
	max-width: 100%;
	max-height: 100%;
}

.tool-band[data-focus-applied] .tool-area[data-focused] .page-reader-pages { height: min( 80vh, 64rem ); }

.page-reader-full-page .page-reader-pages
{
	height: calc( 100vh - 17rem );
	height: calc( 100dvh - 17rem );
	min-height: 22rem;
}

.page-reader:fullscreen
{
	border: 0;
	border-radius: 0;
}

.page-reader:fullscreen .page-reader-pages
{
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
}

.page-reader-note { margin-top: -.25rem; }

@media ( max-width: 46rem )
{
		.page-reader-pages { padding: .4rem; gap: .4rem; }
	.page-reader-position { min-width: 0; }
}

@media print
{
		.page-reader { border: 0; background: none; }
	.page-reader-bar { display: none; }
	.page-reader-pages { height: auto; overflow: visible; padding: 0; }
	.page-reader-page { width: 100%; box-shadow: none; break-inside: avoid; }
}

.link-stage
{
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 16rem, 100% ), 1fr ) );
	gap: 1rem 1.25rem;
	align-items: center;
	margin-bottom: .75rem;
}

.link-picture
{
	aspect-ratio: 16 / 9;
	border: 1px solid var( --rule );
	border-radius: 6px;
	overflow: hidden;
	background: var( --card-background );
	font-size: var( --text-lg );
}

.link-picture img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.link-facts
{
	display: grid;
	gap: .45rem;
	min-width: 0;
}

.link-facts p
{
	margin: 0;
}

.link-site
{
	font-size: var( --text-xl );
	font-weight: 650;
	overflow-wrap: anywhere;
}

.link-address
{
	color: var( --ink-quiet );
	font-size: var( --text-sm );
	overflow-wrap: anywhere;
}

.link-address-field
{
	width: 100%;
	min-width: 0;
	margin-top: .4rem;
	padding: .35rem .5rem;
	font: inherit;
	font-size: var( --text-sm );
}

.flash-stage > *
{
	grid-area: 1 / 1;
}

.flash-stage .flash-intro,
.flash-stage .flash-status
{
	margin: 0;
	padding: 1rem;
	max-width: 32rem;
	text-align: center;
	color: #d8d8d4;
	font-size: var( --text-sm );
}

.flash-stage .flash-status
{
	z-index: 2;
	border-radius: 4px;
	background: rgba( 0, 0, 0, .72 );
}

.flash-asked p
{
	margin: 0 0 .5rem;
	padding: .5rem .75rem;
	border-left: 3px solid #c98a1b;
	border-radius: 2px;
	background: rgba( 201, 138, 27, .12 );
	font-size: var( --text-sm );
}

.flash-viewer
{
	z-index: 1;
	width: 100%;
	height: 100%;
	background: #000;
}

.flash-viewer iframe
{
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.spatial-viewer
{
	width: 100%;
	height: 100%;
	background: #16181d;
}

.spatial-viewer canvas
{
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
	cursor: grab;
}

.spatial-viewer canvas:focus-visible
{
	outline: 2px solid #8ab4f8;
	outline-offset: -2px;
}

.loop-view video[data-scrubbing="yes"]
{
	cursor: ew-resize;
	touch-action: none;
}

.view-select .rendition
{
	font: inherit;
	background: none;
	cursor: pointer;
}

.view-select .rendition[disabled]
{
	cursor: default;
}

.view-select .rendition[aria-current="true"]
{
	background: var( --accent );
}

.tool-media img[hidden],
.tool-media video[hidden],
.tool-media .model-viewer[hidden],
.tool-media .spatial-viewer[hidden]
{
	display: none;
}

.loop-view > [data-view]
{
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
}

.rights-area .rights-line { margin: 0 0 0.35rem; }
.rights-area .rights-provenance { display: block; font-size: var( --text-base ); margin-bottom: 0.75rem; }
.rights-area .rights-ai-training { font-size: var( --text-base ); margin: 0 0 0.75rem; }
.rights-area .rights-attribution { margin: 0 0 1rem; display: grid; gap: 0.25rem; max-width: 46rem; }
.rights-area .rights-attribution textarea { font: inherit; font-size: var( --text-base ); }
.rights-area .credits-list { margin: 0 0 0.75rem; padding-left: 1.1rem; }
.rights-area .rights-conditions { margin: 0 0 0.75rem; white-space: pre-line; }

.credits-rows { display: grid; gap: 0.4rem; border: 0; padding: 0; margin: 0; }
.credits-rows legend { font-size: var( --text-base ); padding: 0; margin-bottom: 0.25rem; }
.credits-row,
.credits-row-head
{
	display: grid;
		grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.4rem;
	align-items: center;
}
.credits-row-head { font-size: var( --text-sm ); }
.credits-row input[ type="text" ] { padding-block: 0.3rem; }

.credits-row .credit-role-label { display: none; grid-row: 2; grid-column: 1; }
.credits-row:has( option[ value="other" ]:checked ) .credit-role-label { display: block; }

@media ( max-width: 40rem )
{
	.credits-row-head { display: none; }
	.credits-row { grid-template-columns: 1fr; }
	.credits-row .credit-role-label { grid-row: auto; grid-column: auto; }
}

.signing-area .signing-state { margin: 0 0 0.35rem; }
.signing-area .signing-trust { font-size: var( --text-base ); margin: 0 0 0.9rem; }

.signing-area .signing-what { font-size: var( --text-base ); margin: 0 0 1.1rem; }

.signing-area .signing-checksum
{
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var( --text-sm );
		white-space: nowrap;
}

.signing-area .signing-provenance { display: block; font-size: var( --text-sm ); font-weight: 400; margin-top: 0.15rem; }
.signing-area .signing-footnote { font-size: var( --text-sm ); margin: 0.75rem 0 0; }
.signing-area .signing-receipt-link { white-space: nowrap; }

@media ( max-width: 46rem )
{
		.signing-area thead th, .signing-area tbody th { white-space: normal; width: auto; }
	.signing-area .signing-provenance { overflow-wrap: anywhere; }
	.signing-area th, .signing-area td { padding: .5rem .55rem; }
}

.transcript-area .transcript-state { margin: 0 0 0.75rem; font-size: var( --text-base ); }
.transcript-area .details-form.transcript-form { max-width: none; }

.transcript-area .transcript-text
{
	width: 100%;
	box-sizing: border-box;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var( --text-base );
	line-height: 1.5;
	resize: vertical;
}

.transcript-area .transcript-panel
{
	padding: 1rem 1.1rem 1.1rem;
	border: 1px solid var( --rule );
	border-radius: 0.75rem;
	background: var( --page-background );
}

.transcript-area .transcript-panel .transcript-text { background: var( --card-background ); }

.transcript-area .transcript-hint { margin: 0; font-size: var( --text-sm ); color: var( --ink-quiet ); }
.transcript-area .transcript-language input { max-width: 8rem; }
.transcript-area .transcript-downloads { margin: 0.75rem 0 0; font-size: var( --text-base ); }

.transcript-area .action-row-disclosure { margin: 0; padding: 0; border: 0; }
.transcript-area .action-row-disclosure > summary { display: flex; list-style: none; cursor: pointer; }
.transcript-area .action-row-disclosure > summary::-webkit-details-marker { display: none; }
.transcript-area .action-row-disclosure > summary:focus-visible { outline: 2px solid var( --accent ); outline-offset: 2px; }
.transcript-area .action-row-disclosure[open] > summary { border-bottom: 0; padding-bottom: .3rem; }
.transcript-area .action-row-disclosure[open] > .transcript-panel { margin: 0 0 .9rem; }
.transcript-area .action-row-disclosure[open]:not( :last-child ) { border-bottom: 1px solid var( --rule ); padding-bottom: .9rem; }
.transcript-area .transcript-state-note { font-size: var( --text-sm ); }

.transcript-area .transcript-actions { display: flex; justify-content: flex-end; gap: .5rem; margin: .75rem 0 0; }
.transcript-area summary > .action-row-controls { display: flex; flex-direction: column; gap: .4rem; }
.transcript-unsaved { padding: 0; border: 0; background: transparent; }
.transcript-unsaved::backdrop { background: rgba( 0, 0, 0, .35 ); }
.transcript-unsaved .interstitial { margin: 0; }
.transcript-unsaved .transcript-actions { justify-content: flex-end; }

.tool-area-footer .tool-area-subheading { margin: 1.1rem 0 .2rem; font-size: var( --text-xs ); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var( --ink-quiet ); }

.transcript-area .transcript-fixes
{
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid var( --rule );
	border-radius: 0.5rem;
	background: var( --card-background );
}

.transcript-area .transcript-fixes-title { margin: 0 0 0.25rem; font-size: var( --text-md ); }
.transcript-area .transcript-fixes .transcript-hint { margin: 0 0 0.75rem; }
.transcript-area .transcript-fixes-list { list-style: none; margin: 0 0 0.75rem; padding: 0; }

.transcript-area .transcript-fix
{
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	gap: 0.25rem 0.75rem;
	align-items: start;
	padding: 0.5rem 0;
	border-top: 1px solid var( --rule );
}

.transcript-area .transcript-fix:first-child { border-top: 0; }
.transcript-area .transcript-fix input[type="checkbox"] { margin: 0.2rem 0 0; }

.transcript-area .transcript-fix-line
{
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var( --text-sm );
	color: var( --ink-quiet );
	padding-top: 0.1rem;
	white-space: nowrap;
}

.transcript-area .transcript-fix-body { display: block; min-width: 0; font-size: var( --text-base ); line-height: 1.45; }
.transcript-area .transcript-fix-context { display: block; overflow-wrap: anywhere; }
.transcript-area .transcript-fix-context mark { padding: 0 0.15em; background: var( --warning-quiet ); color: inherit; border-radius: 0.2em; }
.transcript-area .transcript-fix-change { display: block; font-size: var( --text-base ); color: var( --ink-quiet ); }
.transcript-area .transcript-fix-skip { font-size: var( --text-sm ); }

.transcript-area .transcript-fixes-empty { margin: 0 0 0.75rem; font-size: var( --text-base ); color: var( --ink-quiet ); }

.transcript-area .transcript-corrections { margin: 0 0 0.75rem; font-size: var( --text-base ); line-height: 1.5; }
.transcript-area .transcript-correction { white-space: nowrap; }
.transcript-area .transcript-correction s { color: var( --ink-quiet ); }

@media ( max-width: 40rem )
{
	.transcript-area .transcript-fix { grid-template-columns: auto auto 1fr; }
	.transcript-area .transcript-fix-skip { grid-column: 3; justify-self: end; }
}

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

.tool-area-header { position: relative; }

.tool-area-focus
{
	position: absolute;
	top: -.15rem;
	right: -.25rem;
	padding: .15rem .5rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var( --ink-quiet );
	font: inherit;
	font-size: var( --text-xs );
	cursor: pointer;
}

.tool-area-focus:hover,
.tool-area-focus:focus-visible { border-color: var( --rule ); color: var( --ink ); }

.timeline-area .tool-area-focus[data-media-fullscreen] { right: 5.2rem; }

.tool-area-focus .tool-area-focus-restore { display: none; }
.tool-area-focus[aria-pressed="true"] .tool-area-focus-expand { display: none; }
.tool-area-focus[aria-pressed="true"] .tool-area-focus-restore { display: inline; }
.tool-area-focus[aria-pressed="true"] { border-color: var( --rule ); color: var( --ink ); }

.tool-areas:not( .tool-band ) .tool-area-focus { display: none; }

.tool-band[data-focus-applied] > .tool-area:not( [data-focused] ) { display: none; }
.tool-band[data-focus-applied="1"] { grid-template-columns: minmax( 0, 1fr ); }
.tool-band[data-focus-applied="2"] { grid-template-columns: minmax( 0, 3fr ) minmax( 20rem, 2fr ); }

.tool-band[data-focus-applied="2"][data-focus="timeline"] { grid-template-columns: minmax( 0, 1fr ) minmax( 20rem, 40rem ); }

@media ( max-width: 60rem )
{
		.tool-band[data-focus-applied="2"],
	.tool-band[data-focus-applied="2"][data-focus="timeline"] { grid-template-columns: minmax( 0, 1fr ); }
}

.timeline-list
{
	list-style: none;
	margin: 0 0 .75rem;
	padding: 0;
	max-height: 22rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-top: 1px solid var( --rule );
		position: relative;
}

.tool-band[data-focus-applied] .timeline-list { max-height: min( 70vh, 52rem ); }

.timeline-row
{
	display: grid;
	grid-template-columns: 4.2rem 4.6rem minmax( 0, 1fr );
	gap: .5rem;
	align-items: baseline;
	padding: .4rem .25rem;
	border-bottom: 1px solid var( --rule );
	font-size: var( --text-sm );
}

.timeline-list .timeline-row[hidden] { display: none; }

.timeline-toolbar { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0 0 .6rem; }

.timeline-language-select
{
	padding: .2rem .45rem;
	border: 1px solid var( --rule );
	border-radius: .4rem;
		background-color: var( --card-background );
	color: var( --ink );
	font: inherit;
	font-size: var( --text-xs );
}

.timeline-tab
{
	padding: .2rem .65rem;
	border: 1px solid var( --rule );
	border-radius: 999px;
	background: transparent;
	color: var( --ink-quiet );
	font: inherit;
	font-size: var( --text-xs );
	cursor: pointer;
}

.timeline-tab[aria-pressed="true"] { background: var( --accent-quiet ); color: var( --ink ); border-color: transparent; }

.timeline-area[data-timeline-tab="transcript"] .timeline-row:not( [data-kind="turn"] ),
.timeline-area[data-timeline-tab="subtitles"] .timeline-row:not( [data-kind="caption"] ):not( [data-kind="speaker"] ),
.timeline-area[data-timeline-tab="chapters"] .timeline-row:not( [data-kind="chapter"] ):not( [data-kind="key-image"] ),
.timeline-area[data-timeline-tab="notes"] .timeline-row:not( [data-kind="note"] ) { display: none; }

.timeline-transcript-head { margin: 0 0 .6rem; }
.timeline-area:not( [data-timeline-tab="transcript"] ) .timeline-transcript-head { display: none; }
.timeline-area[data-language-role="primary"] .timeline-offer[data-offer="translate"],
.timeline-area[data-language-role="translation"] .timeline-offer[data-offer="transcribe"],
.timeline-area[data-language-role="untranslated"] .timeline-offer[data-offer="transcribe"] { display: none; }
.timeline-transcript-head[data-compact] .action-row-text,
.timeline-transcript-head[data-compact] .timeline-offer[data-offer="translate"] select { display: none; }
.timeline-transcript-head[data-compact] .action-row { padding: 0; border: 0; }
.timeline-transcript-head[data-compact] .action-row > .action-row-controls { flex-direction: row; flex-wrap: wrap; align-items: center; margin-left: 0; }
.timeline-untranslated { display: none; margin: .4rem 0 0; color: var( --ink-quiet ); font-size: var( --text-sm ); }
.timeline-area[data-language-role="untranslated"] .timeline-untranslated { display: block; }

.timeline-subtoolbar { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: baseline; margin: 0 0 .6rem; }
.timeline-subtoolbar .timeline-reflow-form,
.timeline-subtoolbar .timeline-speakers-disclosure { margin: 0; }
.timeline-area:not( [data-timeline-tab="transcript"] ):not( [data-timeline-tab="subtitles"] ) .timeline-subtoolbar,
.timeline-area:not( [data-timeline-tab="subtitles"] ) .timeline-review-bar,
.timeline-area[data-timeline-tab="transcript"] .timeline-reflow-form { display: none; }

.timeline-area[data-timeline-tab="transcript"] .tool-area-footer,
.timeline-area[data-timeline-tab="subtitles"] .tool-area-footer,
.timeline-area[data-timeline-tab="chapters"] .timeline-kind-field,
.timeline-area[data-timeline-tab="chapters"] .timeline-add-to,
.timeline-area[data-timeline-tab="chapters"] .timeline-pin-button { display: none; }

.timeline-tab-empty { display: none; }
.timeline-area[data-timeline-tab="subtitles"]:not( :has( .timeline-row[data-kind="caption"] ) ) .timeline-tab-empty[data-tab="subtitles"],
.timeline-area[data-timeline-tab="chapters"]:not( :has( .timeline-row[data-kind="chapter"] ) ) .timeline-tab-empty[data-tab="chapters"],
.timeline-area[data-timeline-tab="notes"]:not( :has( .timeline-row[data-kind="note"] ) ) .timeline-tab-empty[data-tab="notes"] { display: block; }

.timeline-area[data-transcript-view="text"] .timeline-row[data-kind="caption"],
.timeline-area[data-transcript-view="text"] .timeline-row[data-kind="speaker"],
.timeline-area[data-transcript-view="text"] .timeline-review-bar,
.timeline-area[data-transcript-view="text"] .timeline-reflow-form,
.timeline-area[data-transcript-view="subtitles"] .timeline-row[data-kind="turn"] { display: none; }

.timeline-row.timeline-turn { display: block; padding: .6rem .25rem .7rem; }
.timeline-turn .timeline-speaker-name { display: block; margin: 0 0 .25rem; }
.timeline-turn-text { margin: 0; line-height: 1.55; }

.timeline-area:not( [data-focused] ) .timeline-turn-form { display: none; }
.timeline-area[data-focused] .timeline-turn:has( .timeline-turn-form ) .timeline-turn-text { display: none; }

.timeline-turn-field
{
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: .45rem .55rem;
	border: 1px solid var( --rule );
	border-radius: .4rem;
	background: var( --card-background );
	color: inherit;
	font: inherit;
	font-size: var( --text-sm );
	line-height: 1.55;
	resize: vertical;
}

.timeline-turn-field:focus { outline: 2px solid var( --accent ); outline-offset: 1px; }
.timeline-turn-actions { display: flex; justify-content: space-between; align-items: center; margin: .35rem 0 0; }

.timeline-cue-open { white-space: pre-line; }
.timeline-cue-open:focus-visible,
.timeline-cue-open[data-nav-focus]:focus,
.timeline-time[data-nav-focus]:focus { outline: 2px solid var( --accent ); outline-offset: 2px; border-radius: .2rem; }

.timeline-subtitle-overlay
{
	position: absolute;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0 4% 5%;
	box-sizing: border-box;
	pointer-events: none;
	z-index: 3;
}

.timeline-subtitle-overlay[hidden] { display: none; }

.timeline-subtitle-overlay[data-draggable] > span { pointer-events: auto; cursor: move; touch-action: none; outline: 1px dashed rgb( 255 255 255 / .6 ); outline-offset: 2px; }

.timeline-placement { display: inline-grid; grid-template-columns: repeat( 3, .85rem ); gap: 2px; padding: 2px; border: 1px solid var( --rule ); border-radius: .25rem; align-self: center; }
.timeline-placement-point { width: .85rem; height: .55rem; padding: 0; border: 0; border-radius: 1px; background: var( --rule ); cursor: pointer; }
.timeline-placement-point:hover,
.timeline-placement-point:focus-visible { background: var( --ink-quiet ); }
.timeline-placement-point[aria-pressed="true"] { background: var( --accent ); }

.timeline-subtitle-overlay > span
{
	white-space: pre-line;
	text-align: center;
	line-height: 1.3;
	padding: .1em .45em;
	border-radius: .2em;
	background: rgb( 0 0 0 / .72 );
	color: #fff;
}

.timeline-player-bar
{
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: .4rem 0 0;
	font-size: var( --text-xs );
	color: var( --ink-quiet );
}

.timeline-player-clock { white-space: nowrap; font-variant-numeric: tabular-nums; }
.timeline-player-scrubber { flex: 1 1 auto; min-width: 4rem; accent-color: var( --accent ); }

.timeline-row.timeline-speaker
{
	grid-template-columns: minmax( 0, 1fr );
	padding-top: .65rem;
	border-bottom: 0;
}

.timeline-speaker-name
{
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 600;
	color: var( --ink );
	text-align: left;
	cursor: pointer;
}

.timeline-speaker-name:hover,
.timeline-speaker-name:focus-visible { text-decoration: underline dotted var( --ink-quiet ); text-underline-offset: .2em; }

.timeline-row.timeline-speaker
{
	position: sticky;
	top: 0;
	z-index: 2;
	background: var( --card-background );
}

.timeline-area:not( [data-focused] ) .timeline-speakers-disclosure { display: none; }

.timeline-row[data-kind="caption"] { grid-template-columns: 4.2rem minmax( 0, 1fr ); }
.timeline-time { white-space: nowrap; }

.timeline-cue-open
{
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: default;
}

.tool-area[data-focused] .timeline-cue-open { cursor: pointer; }
.tool-area[data-focused] .timeline-cue-open:hover,
.tool-area[data-focused] .timeline-cue-open:focus-visible { text-decoration: underline dotted var( --ink-quiet ); text-underline-offset: .2em; }

.timeline-cue-form[hidden] { display: none; }

.timeline-row[data-editing] { background: var( --accent-quiet ); }
.timeline-cue-open[contenteditable]:not( [contenteditable="false"] ):focus { outline: none; }

.timeline-row[data-kind="caption"] .timeline-body { position: relative; }
.timeline-row[data-editing] .timeline-cue-open { display: inline; width: auto; }

.timeline-shift-glyph { display: none; }

.timeline-row[data-editing] .timeline-shift-glyph
{
	display: inline-grid;
	place-items: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0;
	border: 1px solid var( --rule );
	border-radius: 999px;
	background: var( --card-background );
	color: var( --ink-quiet );
	font: inherit;
	font-size: var( --text-xs );
	line-height: 1;
	cursor: pointer;
	vertical-align: text-bottom;
}

.timeline-shift-glyph:hover,
.timeline-shift-glyph:focus-visible { border-color: var( --accent ); color: var( --ink ); }

.timeline-row[data-editing] .timeline-shift-up { position: absolute; left: -1.75rem; top: .1rem; }
.timeline-shift-down { margin-left: .4rem; }

.timeline-cue-form .timeline-voice-field
{
	border: 0;
	border-bottom: 2px solid var( --accent );
	border-radius: 0;
	background: transparent;
	padding: .1rem .1rem;
	font: inherit;
	color: inherit;
	flex: 0 1 11rem;
}

.timeline-cue-form .timeline-voice-field:focus { outline: none; border-bottom-color: var( --ink ); }

.timeline-cue-actions
{
	flex-basis: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: .2rem;
}

.timeline-cue-meter { font-size: var( --text-xs ); color: var( --ink-quiet ); white-space: nowrap; align-self: center; }
.timeline-cue-meter[data-over] { color: var( --warning ); font-weight: 600; }
.timeline-area[data-timeline-tab="subtitles"] .timeline-row[data-cue-over] .timeline-time { border-color: var( --warning ); color: var( --warning ); }

.timeline-area[data-timeline-tab="subtitles"] .timeline-time[data-flag-label] { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.timeline-area[data-timeline-tab="subtitles"] .timeline-time[data-flag-label]::after { content: attr( data-flag-label ); font-size: .7em; letter-spacing: .02em; }

.timeline-area:not( [data-timeline-tab="subtitles"] ) .timeline-subtitles-head { display: none; }
.timeline-player-captions { margin: 0 0 .6rem; }

.timeline-transcript-head[data-compact] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.timeline-transcript-head[data-compact] .timeline-untranslated { flex-basis: 100%; order: 3; }
.timeline-text-tools-set { margin-left: auto; }
.timeline-text-tools { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; font-size: var( --text-xs ); color: var( --ink-quiet ); }
.timeline-text-tools[hidden] { display: none; }
.timeline-text-remove { display: inline; margin: 0; }

.timeline-cue-fixes { display: none; gap: .3rem; align-items: center; }
.timeline-cue-meter[data-over] + .timeline-cue-fixes { display: inline-flex; }

.timeline-review-bar
{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	margin: 0 0 .6rem;
	padding: .35rem .5rem;
	border: 1px solid var( --rule );
	border-radius: .5rem;
}

.timeline-review-bar[hidden] { display: none; }
.timeline-review-summary { font-size: var( --text-xs ); color: var( --ink-quiet ); flex: 1 1 12rem; }

.timeline-reflow-form { display: inline-block; margin: 0 0 .6rem; }

.timeline-cue-form
{
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: .3rem 0 0;
}

.timeline-cue-form .timeline-body-field { flex: 1 1 14rem; }
.timeline-voice-field { flex: 0 1 9rem; min-width: 7rem; }

.timeline-speakers-disclosure { margin: 0 0 .6rem; }

.timeline-speakers-form
{
	display: flex;
	flex-direction: column;
	gap: .4rem;
	margin: .4rem 0 0;
	align-items: flex-start;
}

.timeline-voice-row
{
	display: grid;
	grid-template-columns: minmax( 6rem, 11rem ) minmax( 0, 1fr );
	gap: .5rem;
	align-items: center;
	align-self: stretch;
	font-size: var( --text-sm );
}

.timeline-speakers-hint { margin: 0; font-size: var( --text-xs ); color: var( --ink-quiet ); }

.timeline-raw-vtt { display: none; margin: 0 0 .75rem; padding: .6rem .7rem; border: 1px solid var( --rule ); border-radius: .5rem; }
.timeline-area[data-timeline-tab="transcript"][data-raw-vtt="open"] .timeline-raw-vtt:not( [hidden] ) { display: block; }

.timeline-fixes { margin: 0 0 .75rem; padding: .5rem .7rem; border: 1px solid var( --rule ); border-radius: .5rem; }
.timeline-area:not( [data-timeline-tab="transcript"] ) .timeline-fixes,
.timeline-area:not( [data-language-role="primary"] ) .timeline-fixes { display: none; }

.timeline-time
{
	justify-self: start;
	padding: .05rem .4rem;
	border: 1px solid var( --rule );
	border-radius: 6px;
	background: transparent;
	color: var( --accent );
	font: inherit;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.timeline-time:hover,
.timeline-time:focus-visible { border-color: var( --accent ); }

.timeline-kind { color: var( --ink-quiet ); font-size: var( --text-xs ); }

.timeline-row[data-kind="chapter"] .timeline-text { font-weight: 600; color: var( --ink ); }
.timeline-row[data-kind="caption"] .timeline-text { color: var( --ink-quiet ); }
.timeline-row[data-resolved] .timeline-text { color: var( --ink-quiet ); text-decoration: line-through; }

.timeline-row[data-current] { box-shadow: inset 3px 0 0 var( --accent ); }
.timeline-row[data-current][data-kind="caption"] .timeline-text { color: var( --ink ); }
.timeline-row[data-highlight] { background: var( --accent-quiet ); }

.timeline-body { min-width: 0; overflow-wrap: anywhere; }
.timeline-badge { margin-left: .4rem; }

.timeline-byline
{
	display: block;
	margin-top: .15rem;
	color: var( --ink-quiet );
	font-size: var( --text-xs );
}

.timeline-replies
{
	list-style: none;
	margin: .4rem 0 0;
	padding: 0 0 0 .75rem;
	border-left: 2px solid var( --rule );
}

.timeline-reply { margin: 0 0 .4rem; }

.timeline-row-controls
{
	display: flex;
	flex-wrap: wrap;
	gap: .15rem .6rem;
	align-items: baseline;
	margin-top: .25rem;
}

.timeline-inline-form { display: inline; margin: 0; }

.timeline-quiet-button
{
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --ink-quiet );
	font: inherit;
	font-size: var( --text-xs );
	text-decoration: underline;
	cursor: pointer;
}

.timeline-quiet-button:hover,
.timeline-quiet-button:focus-visible { color: var( --ink ); }

.timeline-reply-disclosure,
.timeline-edit-disclosure { display: inline-block; }
.timeline-reply-disclosure[open],
.timeline-edit-disclosure[open] { display: block; flex-basis: 100%; }
.timeline-reply-disclosure > summary,
.timeline-edit-disclosure > summary { list-style: none; display: inline; }
.timeline-reply-disclosure > summary::-webkit-details-marker,
.timeline-edit-disclosure > summary::-webkit-details-marker { display: none; }

.timeline-reply-form,
.timeline-edit-form,
.timeline-add-form
{
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: center;
	margin: .35rem 0 0;
}

.timeline-add-at,
.timeline-add-to { display: inline-flex; align-items: center; gap: .35rem; color: var( --ink-quiet ); font-size: var( --text-sm ); }
.timeline-seconds-field,
.timeline-end-field { width: 5.5rem; font-variant-numeric: tabular-nums; }
.timeline-body-field { flex: 1 1 12rem; min-width: 0; }
.timeline-pin-button[aria-pressed="true"] { border-color: var( --accent ); color: var( --accent ); }

.tool-media:fullscreen
{
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
}

.tool-media:fullscreen video
{
	width: auto;
	height: auto;
	max-width: 100vw;
	max-height: 100vh;
}

.timeline-pins
{
	position: absolute;
	pointer-events: none;
	z-index: 2;
}

.timeline-pins[data-pinning] { pointer-events: auto; cursor: crosshair; outline: 2px dashed var( --accent ); outline-offset: -2px; }

.timeline-pin
{
	position: absolute;
	width: 1.15rem;
	height: 1.15rem;
	margin: -.575rem 0 0 -.575rem;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var( --accent );
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, .55 ), 0 1px 6px rgba( 0, 0, 0, .5 );
	pointer-events: auto;
	cursor: pointer;
}

.timeline-pin[data-draft] { background: var( --warning ); cursor: default; }

.item-depth-metagroup
{
	border: 1px solid var( --rule );
	border-radius: .5rem;
	margin-bottom: .4rem;
	background: var( --card-background );
	overflow: hidden;
}

.item-depth-metagroup > summary
{
	display: flex;
	gap: .5rem;
	align-items: baseline;
	padding: .45rem .7rem;
	cursor: pointer;
	font-size: var( --text-sm );
	list-style: none;
}

.item-depth-metagroup > summary::-webkit-details-marker { display: none; }

.item-depth-metagroup > summary::before
{
	content: "▸";
	color: var( --ink-quiet );
	font-size: var( --text-xs );
	transition: transform .12s ease;
}

.item-depth-metagroup[ open ] > summary::before { transform: rotate( 90deg ); }

.item-depth-metagroup > summary:focus-visible
{
	outline: 2px solid var( --accent );
	outline-offset: -2px;
}

.item-depth-metagroup-name
{
	font-weight: 600;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.item-view .item-depth-metagroup table
{
	border: 0;
	border-top: 1px solid var( --rule );
	border-radius: 0;
	background: transparent;
}

.item-view .item-depth-metagroup th
{
	width: 38%;
	font-weight: 400;
	color: var( --ink-quiet );
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var( --text-xs );
	word-break: break-word;
}

.item-view .item-depth-metagroup td
{
	font-size: var( --text-xs );
	word-break: break-word;
}

.item-depth-metaflagged
{
	background: var( --warning-quiet );
}

.item-depth-metaflag
{
	display: inline-block;
	margin-left: .35rem;
	padding: 0 .3rem;
	border: 1px solid var( --warning );
	border-radius: .25rem;
	color: var( --warning );
	font-size: var( --text-xs );
	white-space: nowrap;
}