:root
{
		color-scheme: var( --ua-color-scheme );

		--ua-color-scheme: light dark;

		--logo-light-display: block;
	--logo-dark-display: none;
		--logo-neon-filter: invert( 1 );
			--logo-neon-overlay: linear-gradient( 90deg, #ff2d55, #ff9500 14%, #ffd60a 28%, #34c759 43%, #00c7ff 57%, #3a5cff 71%, #bf5af2 86%, #ff2d55 );
	--logo-neon-drift-duration: 16s;
	--logo-neon-overlay-blend: normal;
		--logo-neon-hover-overlay: #00f5e1;
	--logo-neon-hover-glow: drop-shadow( 0 0 .25rem #00f5e1 ) drop-shadow( 0 0 .6rem rgb( 0 245 225 / .55 ) );

	--page-background: #f4f4f2;
	--page-background-translucent: rgb( 244 244 242 / 0.2 );
	--card-background: #ffffff;
	--ink: #16181c;
	--ink-quiet: #5c626c;
		--ink-very-quiet: #acafb4;
	--rule: #d8d8d4;
	--accent: #4c92b2;
	--in-use: #2468d2;
		--weather-1: #2468d2;
	--weather-2: #c98a12;
	--weather-3: #d4561c;
	--weather-4: #8f1d14;
	--accent-quiet: #e6efe9;
	--warning: #8a2b1f;
	--warning-quiet: #f7e8e5;

		--accent-quiet-translucent: color-mix( in srgb, var( --accent-quiet ) 70%, transparent );

			--control-height: 2.35rem;

		--icon-button-size: 1.75rem;
	--icon-button-glyph: 1.1rem;

	--create: #2c6b34;
	--create-quiet: #e6f1e6;
	--danger: #a32219;
	--danger-quiet: #f9e6e4;
	--favorite: #9a6708;
	--favorite-quiet: #fbf0d8;

		--sidebar-background: #dfdfdf;
	--sidebar-ink: #2a2d33;
	--selection-background: #d9dde0;
	--selection-accent: #4c92b2;
	--shadow-card: 0 1px 2px rgba( 20, 22, 26, .06 ), 0 4px 12px rgba( 20, 22, 26, .04 );

		--sidebar-width-minimum: 16.5rem;
	--sidebar-width-maximum: 34rem;
	--sidebar-width-preference: var( --sidebar-width-minimum );
	--toolbar-height: 3.25rem;
		--footer-height: 2.75rem;

		--grid-tile-default: 160px;
	--grid-tile-gap: 2px;

		--grid-ground: #ffffff;
	--grid-tile-empty: #ececeb;

		--lightbox-ground: rgba( 12, 12, 14, .95 );
	--lightbox-ink: #f4f4f5;

		--attention-rhythm: 1.9s;
}

@keyframes attention-pulse
{
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}

@media ( prefers-color-scheme: dark )
{
	:root
	{
				--logo-light-display: none;
		--logo-dark-display: block;
		--logo-neon-filter: invert( 0 );

		--page-background: #17181a;
		--page-background-translucent: rgb( 23 24 26 / 0.2 );
		--card-background: #1f2124;
		--ink: #eceef1;
		--ink-quiet: #a2a8b2;
		--ink-very-quiet: #55575b;
		--rule: #32353a;
		--accent: #2b5060;
		--in-use: #6ea8ff;
		--weather-1: #6ea8ff;
		--weather-2: #e0b04a;
		--weather-3: #f07a3e;
		--weather-4: #c0392b;
		--accent-quiet: #23302a;
		--warning: #f0907f;
		--warning-quiet: #33221f;

				--create: #79c98a;
		--create-quiet: #1d2c21;
		--danger: #f08a80;
		--danger-quiet: #33201e;
		--favorite: #e8b551;
		--favorite-quiet: #33290f;

		--sidebar-background: #121315;
		--sidebar-ink: #d6dae0;
		--selection-background: #2c3035;
		--selection-accent: #6fbf95;
		--shadow-card: 0 1px 2px rgba( 0, 0, 0, .4 );

		--grid-ground: #0b0c0d;
		--grid-tile-empty: #191a1c;
	}
}

@media ( max-width: 46rem ), ( pointer: coarse )
{
	:root
	{
		--icon-button-size: 2.5rem;
		--icon-button-glyph: 1.35rem;
	}
}

*
{
	box-sizing: border-box;
}

html, body
{
	margin: 0;
}

html { height: 100%; }

body.app-shell-body
{
	height: 100%;
	overflow: hidden;
}

body
{
	background: var( --page-background );
	color: var( --ink );
	font: var( --text-base )/1.5 var( --font-ui, system-ui, sans-serif );
	-webkit-font-smoothing: antialiased;
}

a
{
	color: var( --accent );
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

input[ type="text" ],
input[ type="search" ],
input[ type="email" ],
input[ type="url" ],
input[ type="tel" ],
input[ type="number" ],
input[ type="password" ],
input[ type="date" ],
input[ type="datetime-local" ],
select,
textarea
{
	border: 1px solid var( --rule );
	border-radius: .35rem;
	background: var( --card-background );
	color: var( --ink );
	font: inherit;
}

input[ type="text" ],
input[ type="search" ],
input[ type="email" ],
input[ type="url" ],
input[ type="tel" ],
input[ type="number" ],
input[ type="password" ],
input[ type="date" ],
input[ type="datetime-local" ],
select
{
	min-height: var( --control-height );
}

select
{
	appearance: none;
	-webkit-appearance: none;
	padding: .2rem 1.9rem .2rem .55rem;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right .6rem center;
	background-size: .7rem;
}

input::placeholder,
textarea::placeholder
{
	color: var( --ink-quiet );
}

input:disabled,
select:disabled,
textarea:disabled
{
		background-color: var( --page-background );
	color: var( --ink-quiet );
	cursor: not-allowed;
}

:focus-visible
{
	outline: 2px solid var( --selection-accent );
	outline-offset: -2px;
	border-radius: .3rem;
}

.mono
{
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .82em;
}

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

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

.visually-hidden
{
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.app-shell
{
		--sidebar-width: clamp( var( --sidebar-width-minimum ), var( --sidebar-width-preference ), var( --sidebar-width-maximum ) );

	display: grid;
	grid-template-columns: var( --sidebar-width ) minmax( 0, 1fr );
	grid-template-rows: minmax( 0, 1fr ) auto;
	grid-template-areas:
		"sidebar content"
		"footer  footer";
	height: 100vh;
	height: 100dvh;
}

.app-sidebar
{
	grid-area: sidebar;
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var( --sidebar-background );
	border-right: 1px solid var( --rule );
	color: var( --sidebar-ink );
	user-select: none;

		position: relative;
}

.sidebar-resizer
{
	position: absolute;
	top: 0;
	right: -3px;
	bottom: 0;
	width: 7px;
	z-index: 5;
	padding: 0;
	border: 0;
	background: none;
	cursor: col-resize;

		touch-action: none;
}

.sidebar-resizer::before
{
	content: "";
	position: absolute;
	inset: 0 3px;
	background: var( --selection-accent );
	opacity: 0;
	transition: opacity .12s ease;
}

.sidebar-resizer:hover::before,
.sidebar-resizer:focus-visible::before,
body[ data-sidebar-resizing="true" ] .sidebar-resizer::before
{
	opacity: .7;
}

body[ data-sidebar-resizing="true" ]
{
	cursor: col-resize;
	user-select: none;
}

.sidebar-header
{
	display: flex;
	align-items: center;
	gap: .5rem;
		padding: .85rem 0 .6rem 1.1rem;
		position: relative;
	container-type: inline-size;
}

.sidebar-logo
{
	display: block;
	width: 100%;
	max-width: 915px;
	height: auto;
}

.sidebar-logo-light { display: var( --logo-light-display ); }
.sidebar-logo-dark { display: var( --logo-dark-display ); }

.sidebar-wordmark { position: relative; }

html[data-instance="dev"] .sidebar-wordmark::before,
html[data-instance="staging"] .sidebar-wordmark::before
{
	position: absolute;
	right: .35rem;
	top: -.35rem;
	z-index: 2;
	padding: .1rem .45rem;
	border-radius: 999px;
	font: 600 var( --text-xs, .7rem ) / 1.3 var( --font-ui, sans-serif );
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	pointer-events: none;
}
html[data-instance="dev"] .sidebar-wordmark::before { content: "dev"; background: #7a4bd1; }
html[data-instance="staging"] .sidebar-wordmark::before { content: "staging"; background: #d18a1f; }

.sidebar-logo-neon
{
	position: absolute;
	top: .15rem;
	left: .35rem;
	width: calc( 100% - .7rem );
	max-width: 915px;
	height: auto;
	pointer-events: none;
	filter: var( --logo-neon-filter );
}

.sidebar-wordmark::after
{
	content: "";
	position: absolute;
	top: .15rem;
	left: .35rem;
	width: calc( 100% - .7rem );
	max-width: 915px;
	aspect-ratio: 915 / 172;
	pointer-events: none;
	background: var( --logo-neon-overlay );
		background-size: 200% 100%;
	mix-blend-mode: var( --logo-neon-overlay-blend );
	-webkit-mask: url( "/assets/buffet_neon.png" ) center / 100% 100% no-repeat;
	mask: url( "/assets/buffet_neon.png" ) center / 100% 100% no-repeat;
}

body:not([data-logo-light="on"]) { --logo-neon-overlay: none; }

body[data-logo-light="on"] .sidebar-wordmark::after
{
	animation: logo-neon-drift var( --logo-neon-drift-duration ) linear infinite;
}

.sidebar-logo-switch
{
	--logo-switch-logo-width: min( 100cqw - .7rem, 915px );
	position: absolute;
	left: calc( 1.45rem + .893 * var( --logo-switch-logo-width ) + .5rem );
	top: calc( 1rem + .0951 * var( --logo-switch-logo-width ) );
	transform: translateY( -50% );
	display: grid;
	place-items: center;
	width: 1.1rem;
	height: 1.1rem;
	padding: 0;
	border: 0;
	border-radius: .3rem;
	background: none;
	color: var( --ink-quiet );
	cursor: pointer;
	opacity: 0;
	transition: opacity .15s ease;
}

.sidebar-header:hover .sidebar-logo-switch,
.sidebar-logo-switch:focus-visible
{
	opacity: 1;
}

@media ( hover: none )
{
	.sidebar-logo-switch { opacity: .5; }
}

.sidebar-logo-switch:hover { color: var( --ink ); }

.sidebar-logo-switch svg
{
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.25;
}

.sidebar-logo-switch .switch-lever
{
	fill: currentColor;
	stroke: none;
	transform: translateY( 4px );
	transition: transform .15s ease, fill .15s ease;
}

body[data-logo-light="on"] .sidebar-logo-switch .switch-lever
{
	fill: var( --logo-neon-hover-overlay );
	transform: none;
}

@keyframes logo-neon-drift
{
	from { background-position: 0% 0; }
	to   { background-position: 200% 0; }
}

@media ( prefers-reduced-motion: reduce )
{
	.sidebar-wordmark::after { animation: none; }
}

.sidebar-wordmark
{
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: var( --text-lg );
	font-weight: 650;
	letter-spacing: -.01em;
	color: var( --ink );
	padding: .15rem .35rem;
	border-radius: .4rem;
}

.sidebar-wordmark:hover
{
	text-decoration: none;
}

.sidebar-wordmark:hover::after
{
	background: var( --logo-neon-hover-overlay );
}

.sidebar-wordmark:hover .sidebar-logo-neon
{
	filter: var( --logo-neon-filter ) var( --logo-neon-hover-glow );
}

.sidebar-wordmark .mark
{
	display: grid;
	place-items: center;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: .35rem;
	background: var( --accent );
	color: #fff;
	font-size: var( --text-sm );
	font-weight: 700;
}

.sidebar-search
{
		position: relative;
	padding: 0 .9rem .55rem;
}

.sidebar-search input
{
	width: 100%;
		padding: .35rem 6.6rem .35rem 1.75rem;
	border: 1px solid var( --rule );
	border-radius: .45rem;
	background: var( --card-background ) url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235c626c' stroke-width='1.5'><circle cx='6.75' cy='6.75' r='4.25'/><path d='M10 10l3.5 3.5'/></svg>" ) no-repeat .45rem 50% / .9rem;
	color: var( --ink );
	font: inherit;
}

.sidebar-search input::placeholder
{
	color: var( --ink-quiet );
}

.sidebar-search input::-webkit-search-cancel-button
{
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.sidebar-search .search-clear
{
	position: absolute;
	top: 50%;
	right: calc( .9rem + .3rem );
	transform: translateY( -50% );
	margin-top: -.275rem; 
	display: inline-flex;
	align-items: center;
	justify-content: center;
		width: calc( var( --icon-button-size ) * .8 );
	height: calc( var( --icon-button-size ) * .8 );
	padding: 0;
	border: 0;
	border-radius: .3rem;
	background: transparent;
	color: var( --ink-quiet );
	font: inherit;
	font-size: var( --text-lg );
	line-height: 1;
	cursor: pointer;
}

.sidebar-search .search-clear:hover,
.sidebar-search .search-clear:focus-visible
{
	color: var( --ink );
	background: var( --rule );
}

.sidebar-search input:placeholder-shown ~ .search-clear
{
	display: none;
}

.sidebar-search .search-key-hint
{
	position: absolute;
	top: 50%;
		right: calc( .9rem + .3rem + var( --icon-button-size ) * .8 + .25rem );
	transform: translateY( -50% );
	margin-top: -.275rem; 
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	color: var( --ink-quiet );
	font-size: var( --text-xs );
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}

.sidebar-search .search-key-hint kbd
{
	display: inline-block;
	min-width: 1.1em;
	padding: .1rem .3rem;
	border: 1px solid var( --rule );
	border-radius: .3rem;
	background: var( --page-background, transparent );
	color: inherit;
	font: inherit;
	font-size: var( --text-sm );
	text-align: center;
}

.sidebar-scroll
{
		position: relative;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 0 .55rem 1rem;
	overscroll-behavior: contain;
}

.sidebar-section
{
	margin: 0 0 .55rem;
}

.sidebar-section-heading
{
	display: flex;
	align-items: center;
	gap: .3rem;
	width: 100%;
	padding: .3rem .35rem .25rem;
	border: 0;
	background: none;
	color: var( --ink-quiet );
	font: inherit;
	font-size: var( --text-xs );
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: left;
	cursor: default;
}

.icon
{
	width: var( --icon-size, 1rem );
	height: var( --icon-size, 1rem );
	flex: 0 0 auto;
	display: block;
	color: inherit;
	stroke: currentColor;
	fill: none;
	vertical-align: middle;
}

.sidebar-disclosure
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .2rem;
	margin-left: -.2rem;

		border: 0;
	background: none;
	color: var( --ink-quiet );
	line-height: 1;
	cursor: pointer;
}

.sidebar-section-heading .sidebar-disclosure
{
	flex: 1 1 auto;
	min-width: 0;
	justify-content: flex-start;
	gap: .3rem;
	white-space: nowrap;
	text-align: left;

	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}

.sidebar-section-name
{
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar-section-heading .disclosure
{
	--icon-size: 1.05rem;
	color: var( --ink-quiet );
	transition: transform .14s ease;
}

.sidebar-section-heading:hover .disclosure
{
	color: var( --ink );
}

.sidebar-section[data-collapsed="true"] .sidebar-list,
.sidebar-section[data-collapsed="true"] .sidebar-empty
{
	display: none;
}

.sidebar-list li[data-collapsible="true"][data-collapsed="true"] > .sidebar-list
{
	display: none;
}

.row-disclosure
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1rem;
	margin-left: -.3rem;
	border-radius: .25rem;
	color: var( --ink-quiet );
	transition: transform 120ms ease;
}

.row-disclosure:not( [data-empty] )
{
	align-self: stretch;
	cursor: pointer;
}

.row-disclosure:not( [data-empty] ):hover
{
	color: var( --ink );
	background: color-mix( in srgb, var( --ink ) 12%, transparent );
}

.row-disclosure .icon { --icon-size: .62rem; }

li[data-collapsed="true"] > .sidebar-row .row-disclosure .icon
{
	transform: rotate( -90deg );
}

@media ( prefers-reduced-motion: reduce )
{
	.row-disclosure { transition: none; }
}

@media ( max-width: 46rem ), ( pointer: coarse )
{
	.row-disclosure
	{
		box-sizing: border-box;
		width: 2.5rem;
		margin-left: -.45rem;
		justify-content: flex-start;
		padding-left: .5rem;
	}

	.row-disclosure .icon { --icon-size: .8rem; }

		.row-disclosure:not( [data-empty] ):active
	{
		color: var( --ink );
		background: color-mix( in srgb, var( --ink ) 18%, transparent );
	}

	.sidebar-row
	{
		padding-top: .42rem;
		padding-bottom: .42rem;
		padding-left: calc( .4rem + var( --depth, 0 ) * .7rem );
	}
}

.sidebar-section-tools
{
	margin-left: auto;
	display: flex;
	gap: .1rem;
}

.sidebar-tool
{
	border: 0;
	background: none;
	color: var( --ink-quiet );
	font: inherit;
	font-size: var( --text-sm );
	line-height: 1;
	padding: .15rem .25rem;
	border-radius: .3rem;
	cursor: pointer;
}

.sidebar-tool:hover
{
	background: var( --selection-background );
	color: var( --ink );
}

.sidebar-tool[aria-pressed="true"]
{
	color: var( --selection-accent );
}

.sidebar-list
{
	list-style: none;
	margin: 0;
	padding: 0;
}

@media not all and ( max-width: 46rem )
{
	.sidebar-scroll li[data-filtered-out]
	{
		display: none;
	}
}

@media ( max-width: 46rem )
{
	.sidebar-scroll li[data-filtered-out] { opacity: .3; }
	.sidebar-scroll li[data-filtered-out] li[data-filtered-out] { opacity: 1; }
}

.sidebar-row
{
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .28rem .4rem;
	padding-left: calc( .4rem + var( --depth, 0 ) * .85rem );
	border-radius: .4rem;
	color: var( --sidebar-ink );
	font-size: var( --text-base );
	cursor: default;
	white-space: nowrap;
}

.sidebar-row:hover
{
	text-decoration: none;
	background: color-mix( in srgb, var( --selection-background ) 55%, transparent );
}

.sidebar-row[aria-current="page"]
{
	background: var( --selection-background );
	font-weight: 600;
}

.sidebar-row .row-glyph
{
	--icon-size: 1.05rem;
	flex: 0 0 1.15rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var( --ink-quiet );
	font-size: var( --text-md );
}

.sidebar-row .row-glyph[data-icon="folder"],
.sidebar-row .row-glyph[data-icon="folder-open"]
{
	--icon-size: 1.15rem;
}

.sidebar-row .row-glyph[data-icon="team"]
{
	color: color-mix( in srgb, var( --selection-accent ) 70%, var( --ink-quiet ) );
}

.sidebar-row[aria-current="page"] .row-glyph
{
	color: var( --selection-accent );
}

.sidebar-row .row-label
{
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar-row .row-count
{
	color: var( --ink-quiet );
	font-size: var( --text-xs );
	font-variant-numeric: tabular-nums;
}

.sidebar-row[data-visibility="path"] .row-label
{
	color: var( --ink-quiet );
	font-style: italic;
}

.sidebar-row[data-archived="true"]
{
	opacity: .58;
}

.sidebar-row[data-archived="true"]:hover,
.sidebar-row[data-archived="true"][aria-current="page"]
{
	opacity: 1;
}

.sidebar-row .row-share
{
	color: var( --selection-accent );
	font-size: var( --text-xs );
}

.sidebar-disclosure[aria-expanded="false"] .disclosure
{
	transform: rotate( -90deg );
}

.sidebar-empty
{
	padding: .2rem .5rem .5rem;
	color: var( --ink-quiet );
	font-size: var( --text-sm );
	font-style: italic;
}

.sidebar-links
{
	padding: 0 .55rem .5rem;
}

.sidebar-links .sidebar-list
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .1rem .35rem;
}

.sidebar-links .sidebar-row
{
	gap: .3rem;
	padding: .16rem .5rem;
	font-size: var( --text-sm );
	color: var( --ink-quiet );
}

.sidebar-links button.sidebar-row
{
	width: auto;
	box-shadow: none;
}

.sidebar-links .row-disclosure
{
	display: none;
}

.sidebar-links .row-glyph
{
	--icon-size: .9rem;
	flex-basis: auto;
}

.sidebar-links .sidebar-row .row-label
{
	flex: none;
}

.actor-signout
{
	margin: 0;
}

.sidebar-standin
{
	padding: 0 .55rem .7rem;
}

.sidebar-standin select
{
		appearance: auto;
	-webkit-appearance: auto;
	width: 100%;
	padding: .3rem .4rem;
	border: 1px solid var( --rule );
	border-radius: .4rem;
	background: var( --card-background );
	color: var( --ink );
	font: inherit;
	font-size: var( --text-base );
}

button.sidebar-row
{
	width: 100%;
	border: 0;
	background: none;
	font: inherit;
	font-size: var( --text-base );
	text-align: left;
	cursor: default;
}

.actor-standin
{
	margin-top: .55rem;
	padding-top: .55rem;
	border-top: 1px dashed var( --rule );
}

.actor-standin-row
{
	display: flex;
	align-items: center;
	gap: .4rem;
}

.actor-standin-row select
{
	flex: 1 1 auto;
	min-width: 0;
}

.actor-standin-row .control-pill
{
	flex: 0 0 auto;
}

.actor-standin-note
{
	margin: .35rem 0 0;
	color: var( --ink-quiet );
	font-size: var( --text-xs );
	line-height: 1.35;
}

[data-standing-in="yes"]
{
	margin-top: .55rem;
	padding: .5rem .55rem .55rem;
	border: 1px solid color-mix( in srgb, var( --warning ) 45%, var( --rule ) );
	border-radius: .45rem;
	background: var( --warning-quiet );
}

.actor-standin-banner
{
	margin: 0;
	font-size: var( --text-sm );
	font-weight: 600;
	line-height: 1.35;
}

.actor-standin-detail
{
	margin: .25rem 0 .45rem;
	color: var( --ink-quiet );
	font-size: var( --text-xs );
	line-height: 1.35;
}

.app-content
{
	grid-area: content;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;

		position: relative;

		--toolbar-overlap: calc( var( --toolbar-height ) + var( --top-clearance, 0px ) );
}

.app-toolbar
{
	display: flex;
	align-items: center;
	gap: .75rem;
	min-height: var( --toolbar-height );
		padding: 0 1rem;

		background: color-mix( in srgb, var( --page-background ) 90%, transparent );
	-webkit-backdrop-filter: saturate( 180% ) blur( 12px );
	backdrop-filter: saturate( 180% ) blur( 12px );
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;

		container: toolbar / inline-size;
}

.toolbar-mark
{
	display: none;
	flex: 0 0 auto;
	line-height: 0;
}

.toolbar-mark-image
{
	width: 2.55rem;
	height: 2.55rem;
}

.toolbar-mark-light { display: var( --logo-light-display ); }
.toolbar-mark-dark { display: var( --logo-dark-display ); }

.breadcrumb
{
	display: flex;
	align-items: center;
	gap: .3rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var( --text-base );
}

.breadcrumb li
{
	display: flex;
	align-items: center;
	gap: .3rem;
	min-width: 0;
}

.breadcrumb li + li::before
{
	content: "›";
	color: var( --ink-quiet );
}

.breadcrumb a
{
	color: var( --ink-quiet );
	padding: .15rem .3rem;
	border-radius: .3rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.breadcrumb a:hover
{
	text-decoration: none;
	background: var( --selection-background );
	color: var( --ink );
}

.breadcrumb li:last-child a
{
	color: var( --ink );
	font-weight: 600;
}

.breadcrumb-new-window
{
	--icon-size: .95rem;
	display: inline-flex;
	align-items: center;
	margin-left: .1rem;
	padding: .15rem .3rem;
	border: 0;
	border-radius: .3rem;
	background: none;
	color: var( --create );
	cursor: pointer;
}

.breadcrumb-new-window:hover { background: color-mix( in srgb, var( --create ) 14%, transparent ); }
.breadcrumb-new-window:focus-visible { outline: 2px solid var( --accent ); outline-offset: 1px; }

.breadcrumb-copy-address
{
	--icon-size: .95rem;
	display: inline-flex;
	align-items: center;
	margin-left: .1rem;
	padding: .15rem .3rem;
	border: 0;
	border-radius: .3rem;
	background: none;
	color: var( --ink-quiet );
	cursor: pointer;
}

.breadcrumb-copy-address:hover { background: color-mix( in srgb, var( --ink-quiet ) 14%, transparent ); color: var( --ink ); }
.breadcrumb-copy-address:focus-visible { outline: 2px solid var( --accent ); outline-offset: 1px; }
.breadcrumb-copy-address + .breadcrumb-new-window { margin-left: 0; }

.rendition .rendition-new-window
{
	--icon-size: .8em;
	margin-left: .3em;
	color: var( --create );
	vertical-align: -.05em;
}

.container-color-choices
{
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0 0 1rem;
}

.app-toolbar .breadcrumb[data-crumbs-truncated="true"]:hover,
.app-toolbar .breadcrumb[data-crumbs-truncated="true"]:focus-within
{
	position: absolute;
	z-index: 30;
	top: .45rem;
	left: 1rem;
	max-width: calc( 100% - 2rem );
	flex-wrap: wrap;
	row-gap: .1rem;
	padding: .3rem .5rem;
	border: 1px solid var( --rule );
	border-radius: .5rem;
	background: var( --card-background );
	box-shadow: 0 8px 20px -10px rgba( 0, 0, 0, .5 );
}

.app-toolbar .breadcrumb[data-crumbs-truncated="true"]:hover a,
.app-toolbar .breadcrumb[data-crumbs-truncated="true"]:focus-within a
{
	overflow: visible;
	max-width: none;
	text-overflow: clip;
}

.toolbar-spacer
{
	flex: 1;
}

.toolbar-controls
{
	display: flex;
	align-items: center;
	gap: .4rem;
}

.toolbar-controls select,
.toolbar-controls button
{
	padding: .28rem .5rem;
	border: 1px solid var( --rule );
	border-radius: .42rem;
	background: var( --card-background );
	color: var( --ink );
	font: inherit;
	font-size: var( --text-sm );
	cursor: pointer;

			height: 1.8rem;
	min-height: 1.8rem;
	min-width: 4rem;
}

.toolbar-select { display: contents; }
.toolbar-select-glyph { display: none; }

.toolbar-controls select
{
	appearance: auto;
	-webkit-appearance: auto;
}

.toolbar-controls select[data-view-param="kind"]
{
	max-width: 12rem;
}

.toolbar-controls button[disabled]
{
	opacity: .45;
	cursor: not-allowed;
}

.toolbar-upload
{
	height: 1.8rem;
	min-height: 1.8rem;
	flex: 0 0 auto;
	white-space: nowrap;
}

.toolbar-upload[data-upload-allowed="false"]
{
	opacity: .55;
	cursor: not-allowed;
}

.toolbar-upload-limits:empty
{
	display: none;
}

.toolbar-upload-limits
{
	max-width: 16rem;
	color: var( --warning );
	font-size: var( --text-xs );
	font-weight: 600;
	line-height: 1.2;
}

.toolbar-upload[data-upload-allowed="true"][aria-disabled="true"]
{
	border-color: var( --warning );
	opacity: .75;
}

.load-strip
{
		position: absolute;
	top: calc( var( --toolbar-overlap ) - 2px );
	left: 0;
	right: 0;
	z-index: 4;
	height: 2px;
	background: transparent;
	overflow: hidden;
}

.app-content[data-busy="true"] .load-strip::after
{
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 35%;
	background: var( --accent );
	animation: load-sweep 1.1s ease-in-out infinite;
}

@keyframes load-sweep
{
	0%   { transform: translateX( -100% ); }
	100% { transform: translateX( 385% ); }
}

@media ( prefers-reduced-motion: reduce )
{
	.app-content[data-busy="true"] .load-strip::after
	{
		animation: none;
		width: 100%;
		opacity: .5;
	}
}

.app-main
{
		--card-track: 17.5rem;

		--card-gap: 1rem;

	flex: 1;
	min-height: 0;
	overflow-y: auto;
			--main-padding-bottom: 3rem;
		padding: calc( var( --toolbar-overlap ) + 1rem ) 1rem var( --main-padding-bottom );
	scroll-padding-top: var( --toolbar-overlap );
	scroll-behavior: smooth;
}

.app-main[data-stale="true"]
{
	opacity: .55;
	pointer-events: none;
}

.view-heading
{
	display: flex;
	align-items: baseline;
	gap: .6rem;
	flex-wrap: wrap;
	margin: 0 0 .3rem;
}

.view-heading h1
{
	margin: 0;
	font-size: var( --text-xl );
	letter-spacing: -.015em;
}

.view-switch
{
	display: inline-flex;
	gap: .2rem;
	margin: .1rem 0 1rem;
	padding: .2rem;
	border: 1px solid var( --rule );
	border-radius: 999px;
	background: var( --card-background );
}

.view-switch-option
{
	padding: .3rem .85rem;
	border-radius: 999px;
	font-size: var( --text-base );
	font-weight: 600;
	color: var( --ink-quiet );
	text-decoration: none;
}

.view-switch-option:hover { color: var( --ink ); }
.view-switch-option[aria-current="page"] { background: var( --accent-quiet ); color: var( --ink ); }
.view-switch-option:focus-visible { outline: 2px solid var( --accent ); outline-offset: 1px; }

.queue-page tr[data-job-status="running"] .queue-status { color: var( --accent ); font-weight: 600; }
.queue-page tr[data-job-status="failed"] .queue-status,
.queue-page tr[data-job-status="dead"] .queue-status { color: var( --warning ); font-weight: 600; }
.queue-page tr[data-job-status="queued"] .queue-status { color: var( --ink-quiet ); }

.queue-page tr[data-job-settled="true"] .queue-status { color: var( --ink-quiet ); font-weight: 400; }
.queue-page tr[data-job-settled="true"] td { color: var( --ink-quiet ); }
.queue-ok-form { display: inline; margin: 0 0 0 .35rem; }
.queue-ok { font-size: var( --text-xs ); padding: .2rem .5rem; }
.queue-acknowledged { font-size: var( --text-sm ); color: var( --ink-quiet ); margin-left: .35rem; }

.view-subtitle
{
	margin: 0 0 1.2rem;
	color: var( --ink-quiet );
	font-size: var( --text-base );
}

.section-byline
{
	margin: -.35rem 0 .9rem;
	color: var( --ink-quiet );
	font-size: var( --text-sm );
}

.scope-description
{
	max-width: 46rem;
	max-height: 11rem;
	overflow-y: auto;
	margin: -.4rem 0 1.2rem;
	padding: .6rem .85rem;
	border: 1px solid var( --rule );
	border-radius: .5rem;
	background: color-mix( in srgb, var( --ink-quiet ) 4%, transparent );
	line-height: 1.5;
	font-size: var( --text-md );
}

.scope-description > :first-child { margin-top: 0; }
.scope-description > :last-child { margin-bottom: 0; }
.scope-description p, .scope-description ul, .scope-description ol, .scope-description blockquote { margin: 0 0 .6rem; }
.scope-description h2, .scope-description h3, .scope-description h4 { margin: .4rem 0 .3rem; font-size: 1em; }
.scope-description h2 { font-size: 1.08em; }
.scope-description ul, .scope-description ol { padding-left: 1.4rem; }
.scope-description blockquote { padding-left: .8rem; border-left: 3px solid var( --rule ); color: var( --ink-quiet ); }
.scope-description code { font-size: .92em; }

.guide-prose
{
	max-width: 44rem;
	line-height: 1.55;
	font-size: var( --text-md );
}

.actions-prose
{
	max-width: 44rem;
	line-height: 1.55;
	font-size: var( --text-md );
}

.actions-prose p, .actions-prose ul { margin: 0 0 .9rem; }
.actions-prose h2 { margin: 1.6rem 0 .5rem; font-size: var( --text-lg ); letter-spacing: -.01em; }
.actions-prose ul { padding-left: 1.5rem; }
.actions-prose li { margin: 0 0 .35rem; }

.guide-prose > :first-child { margin-top: 0; }
.guide-prose p, .guide-prose ul, .guide-prose ol, .guide-prose blockquote, .guide-prose pre { margin: 0 0 .9rem; }
.guide-prose h2 { margin: 2rem 0 .6rem; font-size: var( --text-lg ); letter-spacing: -.01em; }
.guide-prose h3 { margin: 1.4rem 0 .5rem; font-size: var( --text-md ); }
.guide-prose h4 { margin: 1.1rem 0 .4rem; font-size: var( --text-md ); }
.guide-prose ul, .guide-prose ol { padding-left: 1.5rem; }
.guide-prose li { margin: 0 0 .3rem; }
.guide-prose blockquote { padding-left: .9rem; border-left: 3px solid var( --rule ); color: var( --ink-quiet ); }
.guide-prose code { font-size: .9em; }
.guide-prose pre
{
	padding: .7rem .9rem;
	border: 1px solid var( --rule );
	border-radius: .5rem;
	background: color-mix( in srgb, var( --ink-quiet ) 6%, transparent );
	overflow-x: auto;
	line-height: 1.45;
}
.guide-prose pre code { font-size: .88em; }
.guide-missing { color: var( --ink-quiet ); }

.guide-frame { container-type: inline-size; }

.guide-layout
{
	display: grid;
	grid-template-columns: minmax( 12rem, 44rem ) 13rem;
	grid-template-areas: "title ." "prose contents";
	justify-content: center;
	align-items: start;
	column-gap: 3rem;
}

.guide-layout > .guide-heading { grid-area: title; }
.guide-layout > .guide-prose { grid-area: prose; min-width: 0; }

.guide-contents
{
	grid-area: contents;
	position: sticky;
	top: 0;
	max-height: calc( 100dvh - 9rem );
	overflow-y: auto;
	font-size: var( --text-sm );
	line-height: 1.4;
}

.guide-contents-title
{
	margin: 0 0 .5rem;
	color: var( --ink-quiet );
	font-weight: 600;
}

.guide-contents ol { margin: 0; padding: 0; list-style: none; }
.guide-contents ol ol { margin: .2rem 0 .3rem .8rem; }
.guide-contents li { margin: 0 0 .25rem; }
.guide-contents a { color: inherit; text-decoration: none; }
.guide-contents a:hover, .guide-contents a:focus-visible { text-decoration: underline; }

.guide-media { margin: 1.2rem 0 1.4rem; }
.guide-media img, .guide-media video { display: block; max-width: 100%; height: auto; border-radius: .5rem; }
.guide-media figcaption { margin-top: .45rem; color: var( --ink-quiet ); font-size: var( --text-sm ); }
.guide-media-missing { color: var( --ink-quiet ); font-style: italic; }

.guide-prose h2, .guide-prose h3 { scroll-margin-top: 1rem; }

@container ( max-width: 62rem )
{
	.guide-layout
	{
		grid-template-columns: minmax( 0, 44rem );
		grid-template-areas: "title" "contents" "prose";
	}

	.guide-contents
	{
		position: static;
		max-height: none;
		padding: 0 0 1rem;
		margin-bottom: 1rem;
		border-bottom: 1px solid var( --rule );
	}

		.guide-contents ol ol { display: none; }
}

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

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

.view-section > h2 .count
{
	color: var( --ink-quiet );
	font-weight: 400;
}

.archived-section > summary
{
	display: flex;
	align-items: center;
	gap: .45rem;
	cursor: pointer;
	list-style: none;
	opacity: .7;
}

.archived-section > summary::-webkit-details-marker { display: none; }

.archived-section > summary::before
{
	content: '▸';
	flex: 0 0 auto;
	width: .9rem;
	color: var( --ink-quiet );
	font-size: var( --text-base );
	line-height: 1;
}

.archived-section[open] > summary::before { content: '▾'; }

.archived-section > summary:hover,
.archived-section[open] > summary
{
	opacity: 1;
}

.archived-section > summary > h2 { margin: 0; }

.archived-section-body { margin-top: .7rem; }

.badge
{
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .14rem .42rem;
	border: 0;
	border-radius: 3px;
		background: color-mix( in srgb, var( --ink-quiet ) 8%, transparent );
	color: var( --ink-quiet );
	font-size: var( --text-xs );
	font-weight: 600;
	letter-spacing: .045em;
	white-space: nowrap;
}

.control-pill
{
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .2rem .6rem;
	border: 1px solid var( --rule );
	border-radius: 999px;
	background: var( --card-background );
	color: var( --ink );

		font: inherit;
	font-size: var( --text-sm );
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;

		min-height: var( --control-height );
	justify-content: center;
}

.control-pill:hover { border-color: var( --ink-quiet ); }
.control-pill:focus-visible { outline: 2px solid var( --accent ); outline-offset: 2px; }

.control-pill[data-tone="create"]
{
	border-color: var( --create );
	color: var( --create );
	background: color-mix( in srgb, var( --create ) 8%, var( --card-background ) );
	font-weight: 600;
}

.control-pill[data-tone="create"]:hover { border-color: var( --create ); background: color-mix( in srgb, var( --create ) 16%, var( --card-background ) ); }

.control-pill[data-tone="accent"]
{
	border-color: var( --accent );
	color: var( --accent );
	background: color-mix( in srgb, var( --accent ) 8%, var( --card-background ) );
	font-weight: 600;
}

.control-pill[data-tone="accent"]:hover { border-color: var( --accent ); background: color-mix( in srgb, var( --accent ) 16%, var( --card-background ) ); }

.control-pill[data-tone="in-use"]
{
	border-color: var( --in-use );
	color: var( --in-use );
	background: color-mix( in srgb, var( --in-use ) 8%, var( --card-background ) );
	font-weight: 600;
}

.control-pill[data-tone="in-use"]:hover { border-color: var( --in-use ); background: color-mix( in srgb, var( --in-use ) 16%, var( --card-background ) ); }

.control-pill[data-tone="danger"],
.control-pill[data-tone="warning"]
{
	border-color: var( --danger );
	color: var( --danger );
	background: color-mix( in srgb, var( --danger ) 8%, var( --card-background ) );
	font-weight: 600;
}

.control-pill[data-tone="danger"]:hover,
.control-pill[data-tone="warning"]:hover { border-color: var( --danger ); background: color-mix( in srgb, var( --danger ) 16%, var( --card-background ) ); }

.control-pill[data-default="true"]
{
	background: var( --accent );
	border-color: var( --accent );
	color: var( --card-background );
	font-weight: 600;
}

.control-pill[data-default="true"]:hover
{
	background: color-mix( in srgb, var( --accent ) 85%, var( --ink ) );
	border-color: color-mix( in srgb, var( --accent ) 85%, var( --ink ) );
}

.control-pill[data-default="true"][data-tone="create"]
{
	background: var( --create );
	border-color: var( --create );
	color: var( --card-background );
}

.control-pill[data-default="true"][data-tone="danger"],
.control-pill[data-default="true"][data-tone="warning"]
{
	background: var( --danger );
	border-color: var( --danger );
	color: var( --card-background );
}

.control-pill .pill-plus
{
	font-size: 1.05em;
	line-height: 1;
		margin-top: -0.06em;
}

button:not( [class] ),
input[ type="submit" ]:not( [class] )
{
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .2rem .6rem;
	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;
}

button:not( [class] ):hover { border-color: var( --ink-quiet ); }
button:not( [class] ):focus-visible { outline: 2px solid var( --accent ); outline-offset: 2px; }

.action-row
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: .6rem 1.2rem;
	margin: 0;
	padding: .9rem 0;

		border-bottom: 1px solid var( --rule );
}

.action-row:last-child { padding-bottom: .15rem; border-bottom: 0; }

.action-row-text { flex: 1 1 9rem; max-width: 46rem; }

.action-row-title
{
	margin: 0;
	font-size: var( --text-base );
	font-weight: 600;
	color: var( --ink );
}

.action-row-detail
{
	margin: .25rem 0 0;
	font-size: var( --text-base );
	line-height: 1.5;
	color: var( --ink-quiet );
}

.action-row > .control-pill,
.action-row > .badge
{
	flex: 0 0 auto;
	margin-left: auto;
	min-width: 9.5rem;
	justify-content: center;
	text-align: center;
}

.action-row > .action-row-controls
{
	flex: 0 0 auto;
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .4rem;
}

.action-row-controls > .control-pill
{
	min-width: 9.5rem;
	justify-content: center;
	text-align: center;
}

.action-row-controls > .action-row-select
{
	min-width: 9.5rem;
	max-width: 14rem;
}

.action-row-controls > .control-pill[hidden] { display: none; }

.action-row-refusal
{
	margin-top: .35rem;
	padding-left: .6rem;
	border-left: 2px solid color-mix( in srgb, var( --ink-quiet ) 35%, transparent );
}

.badge[data-state="working"]
{
	background-color: color-mix( in srgb, var( --ink-quiet ) 10%, transparent );
	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;
}

@keyframes affordance-sweep
{
	from { background-position: -70% 0; }
	to   { background-position: 190% 0; }
}

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

.badge[data-tone="accent"]
{
	background: var( --accent-quiet );
	color: var( --accent );
}

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

.badge[data-tone="quiet"]
{
	background: color-mix( in srgb, var( --ink-quiet ) 7%, transparent );
}

.indicators
{
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin: 0;
}

.indicator
{
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	font-size: var( --text-xs );
	color: var( --ink-quiet );
	cursor: help;
}

.indicator[data-tone="accent"]
{
	color: var( --accent );
}

.indicator[data-tone="warning"]
{
	color: var( --warning );
}

.scope-tile[data-archived="true"]
{
	opacity: .62;
}

.scope-tile[data-archived="true"]:hover
{
	opacity: 1;
}

.listing-footer
{
	display: flex;
	gap: .8rem;
	align-items: center;
	flex-wrap: wrap;
	margin: 1rem 0 0;
	font-size: var( --text-sm );
	color: var( --ink-quiet );
}

.listing-footer.is-loading .listing-more
{
	opacity: .55;
	pointer-events: none;
}

.section-see-all
{
	margin-left: .6rem;
	font-size: var( --text-sm );
	font-weight: normal;
	color: var( --ink-quiet );
	text-decoration: underline;
	text-underline-offset: .15em;
}

.section-see-all:hover { color: var( --ink ); }

.view-note
{
	margin: 1.2rem 0 0;
	font-size: var( --text-sm );
	color: var( --ink-quiet );
}

.indicator[data-tone="quiet"]
{
	color: var( --ink-quiet );
}

.indicator[data-tone="result"]
{
	gap: .25rem;
	color: var( --ink );
}

.indicator[data-tone="result"] .glyph
{
	font-size: .5rem;
	color: var( --ink-quiet );
}

.indicator .glyph
{
	font-size: var( --text-sm );
	line-height: 1;
}

.person-chip
{
	display: inline-grid;
	place-items: center;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: var( --selection-background );
	color: var( --ink );
	font-size: var( --text-2xs );
	font-weight: 700;
	letter-spacing: .02em;
	cursor: help;
}

.item-grid
{
		position: relative;
	display: grid;
		grid-template-columns: repeat( auto-fill, minmax( var( --card-track, 15.5rem ), 1fr ) );
	gap: var( --card-gap, 1rem );
	margin: 0;
	padding: 0;
	list-style: none;
}

.item-card
{
	position: relative;
		display: grid;
	grid-template-columns: minmax( 0, 1fr );
	grid-template-rows: auto 1fr auto;
	background: var( --card-background );
	border: 1px solid var( --rule );
	border-radius: .6rem;
	box-shadow: var( --shadow-card );
	overflow: hidden;
}

.item-card
{
	cursor: pointer;
}

.item-card[data-state="removed"]
{
	opacity: .6;
	border-style: dashed;
}

.item-card[data-changed]
{
	outline: 2px solid var( --accent );
	outline-offset: 1px;
}

.item-card[data-changed="new"]
{
	outline-width: 3px;
}

@media ( prefers-reduced-motion: no-preference )
{
		.item-card[data-changed]
	{
		animation: card-changed-arrival .6s ease-out 1;
	}
}

@keyframes card-changed-arrival
{
	from { outline-color: transparent }
	to   { outline-color: var( --accent ) }
}

.item-card .card-preview
{
	position: relative;
	display: grid;
	place-items: center;
		aspect-ratio: 16 / 9;
	background: repeating-conic-gradient( var( --page-background ) 0% 25%, color-mix( in srgb, var( --page-background ) 60%, var( --card-background ) ) 0% 50% ) 50% / 1.25rem 1.25rem;
	overflow: hidden;
}

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

.item-card .card-preview img.thumb-arriving
{
	opacity: 0;
	transition: none;
}

@media ( prefers-reduced-motion: no-preference )
{
	.item-card .card-preview img
	{
		transition: opacity .3s ease-out;
	}
}

.item-card .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 );
}

.item-card .card-preview .no-preview
{
	padding: .5rem;
	color: var( --ink-quiet );
	font-size: var( --text-xs );
	text-align: center;
}

.no-preview[data-kind="file"]
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .25em;
	width: 100%;
	height: 100%;
}

.no-preview-extension
{
	font-size: 2.1em;
	font-weight: 650;
	letter-spacing: .04em;
	line-height: 1;
	color: var( --ink );

		max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.no-preview-noun
{
	font-size: .95em;
	color: var( --ink-quiet );
}

.item-card .card-type
{
	--icon-size: .8rem;
	position: absolute;
	top: .4rem;
		right: .4rem;
	display: inline-flex;
	align-items: center;
	gap: .22rem;
	padding: .16rem .38rem;
	border-radius: .3rem;
	background: color-mix( in srgb, var( --card-background ) 82%, transparent );
	color: var( --ink-quiet );
	font-size: var( --text-2xs );
	letter-spacing: .04em;
	text-transform: uppercase;
	backdrop-filter: blur( 4px );
}

.item-card .card-type-suffix
{
	padding-left: .28rem;
	border-left: 1px solid var( --rule );
	color: var( --ink );
	font-weight: 650;
}

.item-card .card-type:has( .card-type-suffix ) .card-type-family
{
	display: none;
}

.item-card .card-type:has( .card-type-suffix ) .card-type-suffix
{
	padding-left: 0;
	border-left: 0;
}

.item-card .card-type-fact
{
	color: var( --ink-quiet );
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: none;
		font-variant-numeric: tabular-nums;
}

.item-card .card-type-fact::before
{
	content: "·";
	margin: 0 .1rem 0 .04rem;
	color: var( --ink-quiet );
}

.item-card .card-person
{
	display: flex;
	align-items: center;
	gap: .4rem;
	min-width: 0;
	margin: .2rem 0 0;
	padding-top: .55rem;
	border-top: 1px solid var( --rule );
	color: var( --ink-quiet );
	font-size: var( --text-xs );
	line-height: 1.25;
}

.item-card .card-person-name
{
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var( --ink );
	font-weight: 500;
}

.item-card .card-person-when
{
	flex: none;
	white-space: nowrap;
}

.item-card .card-person-when::before
{
	content: "· ";
}

.item-card .card-body
{
	display: flex;
	flex-direction: column;
	gap: .35rem;
		padding: .75rem .8rem .7rem;
}

body:not( [data-library-layout="list"] ) .card-meta:not( :has( .meta-cell:not( .meta-list-only ):not( :empty ) ) )
{
	display: none;
}

.item-card .card-footer
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem .4rem;
	min-width: 0;
	padding: .5rem .8rem .55rem;
	border-top: 1px solid color-mix( in srgb, var( --rule ) 70%, transparent );
	background: color-mix( in srgb, var( --page-background ) 45%, var( --card-background ) );
}

.item-card .card-footer:empty
{
	display: none;
}

body:not( [data-library-layout="list"] ) .card-footer .card-legend,
body:not( [data-library-layout="list"] ) .card-footer .indicators
{
	display: contents;
}

body:not( [data-library-layout="list"] ) .card-footer .indicator
{
	gap: .3rem;
	padding: .18rem .5rem;
	border-radius: 3px;
	background: color-mix( in srgb, var( --ink-quiet ) 9%, transparent );
	color: var( --ink );
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
}

body:not( [data-library-layout="list"] ) .card-footer .indicator[data-tone="accent"]
{
	background: var( --accent-quiet );
	color: var( --accent );
}

body:not( [data-library-layout="list"] ) .card-footer .indicator[data-tone="warning"]
{
	background: var( --warning-quiet );
	color: var( --warning );
}

body:not( [data-library-layout="list"] ) .card-footer .indicator .glyph
{
	font-size: var( --text-xs );
}

body:not( [data-library-layout="list"] ) .card-footer .indicator[data-tone="result"] .glyph
{
	font-size: .45rem;
}

.item-card .card-title
{
	margin: 0;
		padding-right: calc( 2 * var( --icon-button-size ) + .2rem );
	font-size: var( --text-base );
	font-weight: 600;
	line-height: 1.3;
	color: var( --ink );
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.item-card .card-title:hover
{
	text-decoration: underline;
}

.item-card .card-context
{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2rem .3rem;
	min-width: 0;
	color: var( --ink-quiet );
	font-size: var( --text-xs );
	line-height: 1.25;
}

.card-context .context-crumb
{
	min-width: 0;
	color: var( --ink-quiet );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.card-context .context-crumb:hover
{
	color: var( --ink );
	text-decoration: underline;
}

.card-context .context-crumb:not( :first-child )::before,
.card-context .context-more::before
{
	content: "›";
	margin-right: .3rem;
	color: var( --ink-quiet );
}

.card-context [hidden]
{
	display: none;
}

.card-context .context-more
{
	padding: 0;
	border: 0;
	background: none;
	color: var( --ink-quiet );
	font: inherit;
	line-height: inherit;
	cursor: pointer;
}

.card-context .context-more:hover
{
	color: var( --ink );
}

body:not( [data-library-layout="list"] ) .card-context ~ .card-meta .meta-folder
{
	display: none;
}

.item-card .card-meta
{
	color: var( --ink-quiet );
	font-size: var( --text-xs );
}

body:not( [data-library-layout="list"] ) .card-meta .meta-cell:empty
{
	display: none;
}

.card-meta .meta-list-only
{
	display: none;
}

body:not( [data-library-layout="list"] ) .card-meta .meta-cell:not( .meta-list-only ):not( :empty ) ~ .meta-cell:not( .meta-list-only ):not( :empty )::before
{
	content: " · ";
}

.card-meta .meta-views .views-figure
{
	display: none;
}

.item-list-head
{
	display: none;
}

[data-library-layout="list"] .item-grid
{
						--list-columns: 2.9rem minmax( 9rem, 16rem ) 6.2rem 4.6rem 4.4rem 3.6rem 6.4rem minmax( 5rem, 10rem ) 1.9rem
		minmax( 4.5rem, 7.5rem ) minmax( 5rem, 7rem ) 4.8rem 5.4rem 5.8rem 3.8rem minmax( 6rem, 1fr );

	display: block;
	grid-template-columns: none;
	gap: 0;
	border: 1px solid var( --rule );
	border-radius: .6rem;
	background: var( --card-background );
	overflow: hidden;
}

[data-library-layout="list"] .item-grid[data-folder-column="no"]
{
	--list-columns: 2.9rem minmax( 9rem, 18rem ) 6.2rem 4.6rem 4.4rem 3.6rem 6.4rem 1.9rem
		minmax( 4.5rem, 7.5rem ) minmax( 5rem, 7rem ) 4.8rem 5.4rem 5.8rem 3.8rem minmax( 6rem, 1fr );
}

[data-library-layout="list"] .item-list-head,
[data-library-layout="list"] .item-card
{
	display: grid;
	grid-template-columns: var( --list-columns );
		grid-template-rows: none;
	align-items: center;
	column-gap: .7rem;
}

[data-library-layout="list"] .item-list-head
{
	padding: .4rem .7rem;
	border-bottom: 1px solid transparent;
	background: color-mix( in srgb, var( --page-background ) 55%, var( --card-background ) );
	color: var( --ink-quiet );
	font-size: var( --text-2xs );
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

[data-library-layout="list"] .item-card
{
	padding: .3rem .7rem;
	border: 0;
	border-top: 1px solid var( --rule );
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

[data-library-layout="list"] .item-grid > .item-card:first-of-type
{
	border-top: 0;
}

[data-library-layout="list"] .item-card:hover
{
	background: color-mix( in srgb, var( --accent-quiet ) 55%, transparent );
}

[data-library-layout="list"] .item-card[data-state="removed"]
{
	border-top-style: dashed;
}

[data-library-layout="list"] .card-body,
[data-library-layout="list"] .card-meta,
[data-library-layout="list"] .card-footer
{
	display: contents;
}

[data-library-layout="list"] .card-meta .meta-list-only
{
	display: block;
}

[data-library-layout="list"] .card-meta .meta-cell::before
{
	content: none;
}

[data-library-layout="list"] .item-card .card-preview
{
	width: 2.9rem;
	border-radius: .25rem;
	background-size: .5rem .5rem;
}

[data-library-layout="list"] .item-card .card-type,
[data-library-layout="list"] .item-card .card-progress
{
	display: none;
}

[data-library-layout="list"] .item-card .card-preview .no-preview
{
	padding: .15rem;
	font-size: var( --text-2xs );
}

[data-library-layout="list"] .item-card .card-preview .no-preview:not( [data-kind] )
{
	display: none;
}

[data-library-layout="list"] .no-preview-extension,
[data-library-layout="list"] .card-link-glyph
{
	font-size: var( --text-2xs );
	letter-spacing: 0;
}

[data-library-layout="list"] .no-preview-noun,
[data-library-layout="list"] .card-link-site
{
	display: none;
}

[data-library-layout="list"] .item-card .card-person
{
	display: none;
}

[data-library-layout="list"] .item-card .card-alias-line
{
	display: none;
}

[data-library-layout="list"] .item-card .card-title
{
	display: block;
	-webkit-line-clamp: none;
	font-size: var( --text-sm );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

[data-library-layout="list"] .meta-cell
{
	min-width: 0;
	color: var( --ink-quiet );
	font-size: var( --text-xs );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

[data-library-layout="list"] .meta-feature,
[data-library-layout="list"] .head-captions,
[data-library-layout="list"] .head-transcript,
[data-library-layout="list"] .head-translation,
[data-library-layout="list"] .head-rights
{
	text-align: center;
}

[data-library-layout="list"] .meta-feature .feature-dot
{
	color: var( --ink );
	font-size: var( --text-base );
	line-height: 1;
}

[data-library-layout="list"] .item-grid
{
	overflow-x: auto;
}

[data-library-layout="list"] .item-list-head,
[data-library-layout="list"] .item-card
{
	min-width: max-content;
}

[data-library-layout="list"] .meta-feature .feature-warning
{
	color: var( --warning );
}

[data-library-layout="list"] .meta-duration,
[data-library-layout="list"] .meta-views
{
	font-variant-numeric: tabular-nums;
}

[data-library-layout="list"] .card-meta .meta-views .views-figure
{
	display: inline;
}

[data-library-layout="list"] .card-meta .meta-views .views-phrase
{
	display: none;
}

[data-library-layout="list"] .meta-privacy .glyph
{
	margin-right: .25rem;
}

[data-library-layout="list"] .meta-privacy[data-tone="accent"]
{
	color: var( --accent );
}

[data-library-layout="list"] .indicator[data-name="publicity"],
[data-library-layout="list"] .indicator[data-name="captions"],
[data-library-layout="list"] .indicator[data-name="result"][data-surface="transcript"]
{
	display: none;
}

[data-library-layout="list"] .head-sort
{
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

[data-library-layout="list"] .head-sort:hover,
[data-library-layout="list"] .head-sort[data-sort-state="forward"],
[data-library-layout="list"] .head-sort[data-sort-state="reverse"]
{
	color: var( --ink );
}

[data-library-layout="list"] .head-sort[data-sort-state="forward"] .head-sort-mark::after
{
	content: " ▾";
}

[data-library-layout="list"] .head-sort[data-sort-state="reverse"] .head-sort-mark::after
{
	content: " ▴";
}

[data-library-layout="list"] .meta-kind
{
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: var( --text-2xs );
}

[data-library-layout="list"] .meta-kind .card-type-suffix
{
	margin-left: .3rem;
	padding-left: .3rem;
	border-left: 1px solid var( --rule );
	color: var( --ink );
	font-weight: 650;
}

[data-library-layout="list"] .card-context
{
	display: none;
}

[data-library-layout="list"] .indicators
{
	display: flex;
	flex-wrap: nowrap;
	gap: .25rem;
	min-width: 0;
	margin: 0;
	overflow: hidden;
}

[data-library-layout="list"] .item-card .pin-button
{
		grid-row: auto;
	top: 50%;
	right: .25rem;
	transform: translateY( -50% );
}

@media ( max-width: 62rem )
{
	[data-library-layout="list"] .item-grid,
	[data-library-layout="list"] .item-grid[data-folder-column="no"]
	{
		--list-columns: 2.6rem minmax( 0, 1fr ) 6.4rem;
	}

	[data-library-layout="list"] .meta-kind,
	[data-library-layout="list"] .meta-size,
	[data-library-layout="list"] .meta-duration,
	[data-library-layout="list"] .meta-views,
	[data-library-layout="list"] .meta-folder,
	[data-library-layout="list"] .meta-person,
	[data-library-layout="list"] .meta-privacy,
	[data-library-layout="list"] .meta-feature,
	[data-library-layout="list"] .indicators,
	[data-library-layout="list"] .head-kind,
	[data-library-layout="list"] .head-size,
	[data-library-layout="list"] .head-duration,
	[data-library-layout="list"] .head-views,
	[data-library-layout="list"] .head-folder,
	[data-library-layout="list"] .head-person,
	[data-library-layout="list"] .head-privacy,
	[data-library-layout="list"] .head-captions,
	[data-library-layout="list"] .head-transcript,
	[data-library-layout="list"] .head-translation,
	[data-library-layout="list"] .head-rights,
	[data-library-layout="list"] .head-status
	{
		display: none;
	}
}

.layout-control
{
	display: inline-flex;
	margin: 0;
}

.toolbar-controls .layout-control .layout-choice
{
	border-radius: 0;
	display: inline-flex;
	align-items: center;
	--icon-size: .95rem;
}

.layout-choice .icon
{
	display: none;
}

.toolbar-controls .layout-control .layout-choice:first-child
{
	border-radius: .42rem 0 0 .42rem;
}

.toolbar-controls .layout-control .layout-choice:last-child
{
	border-radius: 0 .42rem .42rem 0;
}

.toolbar-controls .layout-control .layout-choice + .layout-choice
{
	margin-left: -1px;
}

.toolbar-controls .layout-control .layout-choice[aria-pressed="true"]
{
	background: var( --accent-quiet );
	border-color: var( --rule );
	color: var( --ink );
	font-weight: 600;
}

[data-library-layout="grid"] .app-shell
{
	grid-template-columns: minmax( 0, 1fr );
	grid-template-areas:
		"content"
		"footer";
}

[data-library-layout="grid"] .app-sidebar,
[data-library-layout="grid"] .app-footer
{
	display: none;
}

[data-library-layout="grid"] .app-toolbar
{
		container-type: normal;
	min-height: 0;
	padding: 0;
	border-bottom: 0;
	background: none;
	backdrop-filter: none;
	overflow: visible;
}

[data-library-layout="grid"] .app-toolbar > *:not( .grid-controls )
{
	display: none;
}

[data-library-layout="grid"] .load-strip
{
	top: var( --top-clearance, 0px );
}

[data-library-layout="grid"] .app-main
{
		--card-track: var( --grid-tile-size, var( --grid-tile-default ) );
	--card-gap: var( --grid-tile-gap );

	padding: 0 0 4rem;
	scroll-padding-top: 0;
	background: var( --grid-ground );
	scroll-behavior: auto;
}

[data-library-layout="grid"] .view-heading
{
	padding: 1rem 1rem .6rem;
	margin: 0;
}

[data-library-layout="grid"] .view-heading h1
{
	font-size: var( --text-lg );
}

[data-library-layout="grid"] .view-section > h2
{
	padding: .9rem 1rem .35rem;
	margin: 0;
	font-size: var( --text-sm );
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --ink-quiet );
}

[data-library-layout="grid"] .view-subtitle,
[data-library-layout="grid"] .fyi-rail,
[data-library-layout="grid"] .scope-actions,
[data-library-layout="grid"] .view-heading .badge
{
	display: none;
}

[data-library-layout="grid"] .view-section > h2 .count
{
	font-size: inherit;
	font-weight: 400;
}

[data-library-layout="grid"] .scope-grid
{
	--card-gap: .5rem;

	padding: 0 1rem .4rem;
}

[data-library-layout="grid"] .item-card
{
	background: var( --grid-tile-empty );
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

[data-library-layout="grid"] .item-card .card-preview
{
	aspect-ratio: 1;
	background: none;
	width: 100%;
}

[data-library-layout="grid"] .item-card .card-preview img
{
	object-fit: contain;
}

[data-library-layout="grid"] .item-card .card-preview[data-key-crop] img
{
	inset: 0;
	left: auto;
	top: auto;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

[data-library-layout="grid"] .card-body,
[data-library-layout="grid"] .card-footer,
[data-library-layout="grid"] .item-card .card-type,
[data-library-layout="grid"] .item-card .card-person,
[data-library-layout="grid"] .item-card .indicators,
[data-library-layout="grid"] .item-card .pin-button,
[data-library-layout="grid"] .item-list-head
{
	display: none;
}

[data-library-layout="grid"] .item-card .card-progress
{
	display: inline-flex;
}

[data-library-layout="grid"] .item-card .card-preview .no-preview
{
	font-size: var( --text-2xs );
}

[data-library-layout="grid"] .item-card[data-preview-video] .card-preview::after
{
	content: "▶";
	position: absolute;
	right: .35rem;
	bottom: .3rem;
	z-index: 1;
	font-size: var( --text-sm );
	line-height: 1;
	color: #fff;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, .8 );
	pointer-events: none;
}

[data-library-layout="grid"] .item-card:hover .card-preview,
[data-library-layout="grid"] .item-card .card-preview:focus-visible
{
	outline: 2px solid var( --accent );
	outline-offset: -2px;
}

[data-library-layout="cards"] .item-card:has( > .card-preview:focus-visible )
{
	outline: 2px solid var( --ink );
	outline-offset: 3px;
}

[data-library-layout="list"] .item-card:has( > .card-preview:focus-visible )
{
	outline: 2px solid var( --ink );
	outline-offset: -2px;
}

[data-library-layout="cards"] .item-card .card-preview:focus-visible,
[data-library-layout="list"] .item-card .card-preview:focus-visible
{
	outline: none;
}

[data-library-layout="grid"] .item-card[data-state="removed"]
{
	opacity: .45;
}

.grid-controls
{
	display: none;
}

[data-library-layout="grid"] .grid-controls
{
	position: fixed;
	top: .75rem;
	right: 1rem;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .35rem .55rem;
	border: 1px solid var( --rule );
	border-radius: 1.2rem;
	background: color-mix( in srgb, var( --grid-ground ) 82%, transparent );
	backdrop-filter: saturate( 180% ) blur( 12px );
	box-shadow: var( --shadow-card );
	opacity: .55;
	transition: opacity .14s ease;
}

[data-library-layout="grid"] .grid-controls:hover,
[data-library-layout="grid"] .grid-controls:focus-within
{
	opacity: 1;
}

.grid-controls form
{
	display: flex;
	align-items: center;
	margin: 0;
}

.grid-controls input[ type="range" ]
{
	width: 7rem;
	accent-color: var( --accent );
	cursor: ew-resize;
}

.icon-size-form
{
	display: none;
	align-items: center;
	margin: 0;
}

[data-library-layout="icons"] .icon-size-form { display: flex; }

.icon-size-form input[ type="range" ]
{
	width: 6rem;
	accent-color: var( --accent );
	cursor: ew-resize;
}

.grid-controls .grid-exit
{
	padding: .2rem .7rem;
	border: 1px solid var( --rule );
	border-radius: .9rem;
	background: var( --card-background );
	color: var( --ink );
	font: inherit;
	font-size: var( --text-sm );
	cursor: pointer;
}

.grid-controls .grid-exit:hover
{
	border-color: var( --accent );
	color: var( --accent );
}

.grid-controls .grid-slideshow
{
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: 0 .6rem 0 0;
	border: 0;
	border-right: 1px solid var( --rule );
	min-width: 0;
	font-size: var( --text-sm );
	color: var( --ink );
}

.grid-controls .grid-slideshow label
{
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	white-space: nowrap;
	cursor: pointer;
}

.grid-controls .grid-slideshow input[ type="number" ]
{
	width: 3.4rem;
	padding: .15rem .3rem;
	border: 1px solid var( --rule );
	border-radius: .5rem;
	background: var( --card-background );
	color: var( --ink );
	font: inherit;
	font-size: var( --text-sm );
	text-align: right;
}

.grid-controls .grid-slideshow input[ type="checkbox" ]
{
	margin: 0;
	accent-color: var( --accent );
}

.grid-controls .grid-slideshow-start
{
	padding: .2rem .7rem;
	border: 1px solid var( --rule );
	border-radius: .9rem;
	background: var( --card-background );
	color: var( --ink );
	font: inherit;
	font-size: var( --text-sm );
	cursor: pointer;
}

.grid-controls .grid-slideshow-start:hover
{
	border-color: var( --accent );
	color: var( --accent );
}

@media ( max-width: 44rem )
{
	[data-library-layout="grid"] .grid-size-form,
	[data-library-layout="grid"] .grid-slideshow
	{
		display: none;
	}
}

.lightbox
{
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	padding: 0;
	border: 0;
	background: var( --lightbox-ground );
	color: var( --lightbox-ink );
	overflow: hidden;
}

.lightbox::backdrop
{
	background: var( --lightbox-ground );
}

.lightbox-stage
{
	position: absolute;
	inset: 0;
	display: grid;
		grid-template-areas: "picture";
		grid-template-columns: minmax( 0, 1fr );
	grid-template-rows: minmax( 0, 1fr );
	place-items: center;
	padding: 3rem 3.5rem;
}

.lightbox-stage img,
.lightbox-stage video,
.lightbox-stage .lightbox-note
{
	grid-area: picture;
}

.lightbox-stage img,
.lightbox-stage video
{
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}

.lightbox-stage .lightbox-upgrade
{
	opacity: 0;
	transition: opacity .18s ease;
}

.lightbox-stage .lightbox-upgrade[data-ready="true"]
{
	opacity: 1;
}

.lightbox-note
{
	max-width: 28rem;
	text-align: center;
	font-size: var( --text-base );
	color: color-mix( in srgb, var( --lightbox-ink ) 70%, transparent );
}

.lightbox-caption
{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	padding: .7rem 1rem 1rem;
	font-size: var( --text-sm );
	color: color-mix( in srgb, var( --lightbox-ink ) 78%, transparent );
	background: linear-gradient( to top, rgba( 0, 0, 0, .55 ), transparent );
	pointer-events: none;
}

.lightbox-caption a
{
	color: var( --lightbox-ink );
	pointer-events: auto;
	text-decoration: underline;
}

.lightbox button
{
	position: absolute;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .1 );
	color: var( --lightbox-ink );
	font-size: var( --text-xl );
	line-height: 1;
	width: 2.6rem;
	height: 2.6rem;
	cursor: pointer;
	transition: background .12s ease;
}

.lightbox button:hover,
.lightbox button:focus-visible
{
	background: rgba( 255, 255, 255, .24 );
}

.lightbox .lightbox-close  { top: 1rem; right: 1rem; }
.lightbox .lightbox-previous { left: .6rem; top: 50%; transform: translateY( -50% ); }
.lightbox .lightbox-next     { right: .6rem; top: 50%; transform: translateY( -50% ); }

.lightbox button[disabled]
{
	opacity: .25;
	cursor: default;
}

@media ( max-width: 44rem )
{
	.lightbox-stage { padding: 2.5rem .5rem 3.5rem; }
}

.lightbox[data-slideshow="true"] .lightbox-stage
{
		padding: 0;
		transition: opacity .5s ease;
}

.lightbox[data-slideshow="true"] .lightbox-stage[data-entering="true"]
{
	opacity: 0;
}

.lightbox[data-slideshow="true"][data-idle="true"]
{
	cursor: none;
}

.lightbox[data-slideshow="true"]:focus
{
	outline: none;
}

.lightbox[data-slideshow="true"] .slideshow-chrome
{
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

.lightbox[data-slideshow="true"][data-controls="true"] .slideshow-chrome
{
	opacity: 1;
	pointer-events: auto;
}

.slideshow-bar
{
	position: absolute;
	top: 1rem;
	left: 50%;
	transform: translateX( -50% );
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .35rem .6rem;
	border-radius: 999px;
	background: rgba( 0, 0, 0, .55 );
	font-size: var( --text-sm );
	color: color-mix( in srgb, var( --lightbox-ink ) 85%, transparent );
}

.slideshow-position
{
	padding: 0 .4rem;
	font-variant-numeric: tabular-nums;
}

.lightbox[data-empty="true"] .slideshow-position
{
	display: none;
}

.lightbox .slideshow-bar button
{
	position: static;
	width: auto;
	height: auto;
	padding: .3rem .8rem;
	border-radius: 999px;
	font-size: var( --text-sm );
	line-height: 1.2;
}

@media ( prefers-reduced-motion: reduce )
{
	.lightbox[data-slideshow="true"] .lightbox-stage,
	.lightbox[data-slideshow="true"] .slideshow-chrome
	{
		transition: none;
	}
}

.scope-grid
{
	display: grid;
		grid-template-columns: repeat( auto-fill, minmax( var( --card-track, 14rem ), 1fr ) );
	gap: var( --card-gap, .7rem );
	margin: 0;
	padding: 0;
	list-style: none;
}

.scope-grid > li { display: flex; min-width: 0; }

.scope-tile
{
	flex: 1;
		min-width: 0;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .65rem .75rem;
	border: 1px solid var( --rule );
	border-radius: .55rem;
	background: var( --card-background );
	color: var( --ink );
}

.scope-tile:hover
{
	text-decoration: none;
	border-color: var( --selection-accent );
}

.scope-tile .tile-glyph
{
	--icon-size: 1.5rem;
	display: flex;
	align-items: center;
	font-size: var( --text-xl );
	color: var( --ink-quiet );
}

.scope-tile .tile-text
{
	min-width: 0;
		overflow-wrap: anywhere;
}

.scope-tile .tile-name
{
	font-weight: 600;
	font-size: var( --text-base );
}

.scope-tile .tile-meta
{
	color: var( --ink-quiet );
	font-size: var( --text-xs );
}

.scope-grid[data-tile-size="large"] .scope-tile
{
	gap: .8rem;
	padding: .8rem .9rem;
}

.scope-grid[data-tile-size="large"] .scope-tile .tile-glyph
{
	--icon-size: 1.9rem;
	flex: none;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	font-size: var( --text-2xl );
}

.scope-grid[data-tile-size="large"] .tile-thumb
{
	display: block;
	width: 3rem;
	height: 3rem;
	object-fit: cover;
	border-radius: .3rem;
	background: var( --rule );
}

.scope-grid .tile-thumb[data-key-crop]
{
	object-position: var( --key-crop-focus );
}

.scope-grid[data-tile-size="large"] .scope-tile .tile-name
{
	white-space: normal;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
		overflow: hidden;
	line-height: 1.25;
}

.scope-grid[data-tile-size="large"] .scope-tile .tile-meta
{
	white-space: normal;
	margin-top: .15rem;
}

.rail-more
{
	margin: .55rem 0 0;
	font-size: var( --text-base );
}

.scope-tile .person-chip
{
	cursor: inherit;
}

.scope-tile[data-person-result]:not( a )
{
	cursor: default;
}

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

.data-table th,
.data-table td
{
	padding: .45rem .65rem;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid var( --rule );
}

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

.data-table tbody tr:hover > td
{
	background: color-mix( in srgb, var( --ink ) 4%, var( --card-background ) );
}

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

.table-load-more { margin-top: .6rem; }
.table-load-more[hidden] { display: none; }

.notice
{
	display: flex;
	gap: .6rem;
	padding: .7rem .85rem;
	margin: 0 0 1.25rem;
	border-radius: .5rem;
	background: var( --accent-quiet );
	color: var( --accent );
	font-size: var( --text-base );
	line-height: 1.45;
}

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

.notice[data-tone="quiet"]
{
	background: color-mix( in srgb, var( --ink-quiet ) 9%, transparent );
	color: var( --ink-quiet );
}

.notice .notice-glyph
{
	flex: 0 0 auto;
}

.empty-state
{
	padding: 2.5rem 1.5rem;
	border: 1px dashed var( --rule );
	border-radius: .6rem;
	color: var( --ink-quiet );
	text-align: center;
	font-size: var( --text-base );
}

.app-content
{
	position: relative;
}

.toast-host
{
	position: absolute;
	top: calc( var( --toolbar-height ) + .6rem );
	right: 1rem;
	z-index: 40;

	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .4rem;

	width: min( 22rem, calc( 100% - 2rem ) );

		pointer-events: none;
}

.toast
{
	pointer-events: auto;

	display: flex;
	align-items: flex-start;
	gap: .5rem;
	width: 100%;

	padding: .5rem .55rem .5rem .7rem;
	border: 1px solid var( --rule );
	border-left: 3px solid var( --accent );
	border-radius: .45rem;
	background: var( --card-background );
	box-shadow: var( --shadow-card );
	font-size: var( --text-sm );

	animation: toast-arrive .18s ease-out;
}

.toast[data-tone="warning"]
{
	border-left-color: var( --warning );
}

.toast[data-kind="applied"]
{
	background: var( --accent-quiet );
	border-color: color-mix( in srgb, var( --accent ) 35%, var( --rule ) );
}

.toast-body
{
	flex: 1 1 auto;
	min-width: 0;
	color: var( --ink );
	line-height: 1.4;
}

a.toast-body:hover
{
	color: var( --accent );
	text-decoration: none;
}

.toast-title
{
	font-weight: 600;
		display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

.toast-dismiss
{
	flex: 0 0 auto;
	border: 0;
	border-radius: .3rem;
	padding: 0;
	min-width: var( --icon-button-size );
	min-height: var( --icon-button-size );
	background: transparent;
	color: var( --ink-quiet );
	font: inherit;
	font-size: var( --icon-button-glyph );
	line-height: 1;
	cursor: pointer;
}

.toast-dismiss:hover
{
	background: var( --selection-background );
	color: var( --ink );
}

@keyframes toast-arrive
{
	from { opacity: 0; transform: translateY( -.35rem ); }
	to   { opacity: 1; transform: none; }
}

.toolbar-stale
{
	display: inline-flex;
	align-items: center;
	gap: .35rem;

	border: 1px solid color-mix( in srgb, var( --accent ) 45%, var( --rule ) );
	border-radius: 999px;
	padding: .15rem .6rem .15rem .5rem;

		background: color-mix( in srgb, var( --accent ) 14%, var( --card-background ) );
	color: var( --ink );
	font: inherit;
	font-size: var( --text-sm );
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;

	animation: attention-halo var( --attention-rhythm ) ease-out infinite;
}

@keyframes attention-halo
{
	0%   { box-shadow: 0 0 0 0     color-mix( in srgb, var( --accent ) 60%, transparent ); }
	40%  { box-shadow: 0 0 0 .3rem color-mix( in srgb, var( --accent ) 30%, transparent ); }
	75%  { box-shadow: 0 0 0 .55rem color-mix( in srgb, var( --accent ) 0%, transparent ); }
	100% { box-shadow: 0 0 0 0     color-mix( in srgb, var( --accent ) 0%, transparent ); }
}

.toolbar-stale::before
{
	content: "";
	width: .45rem;
	height: .45rem;
	border-radius: 50%;
		background: var( --accent );

		animation:
		attention-pulse var( --attention-rhythm ) ease-in-out infinite,
		attention-swell var( --attention-rhythm ) ease-in-out infinite;
}

@keyframes attention-swell
{
	0%, 100% { transform: scale( 1 ); }
	50%      { transform: scale( 1.6 ); }
}

.toolbar-stale[hidden]
{
	display: none;
}

@media ( prefers-reduced-motion: reduce )
{
	.toast
	{
		animation: none;
	}

	.toolbar-stale,
	.toolbar-stale::before
	{
		animation: none;
	}
}

.app-footer
{
	grid-area: footer;
	display: flex;
	align-items: center;
		gap: .5rem;
	min-height: var( --footer-height );
	padding: 0 .75rem;
	border-top: 1px solid var( --rule );
	background: var( --sidebar-background );
	color: var( --ink-quiet );
	font-size: var( --text-xs );
}

.app-footer .status-group
{
	display: flex;
	align-items: center;
	gap: .35rem;
	white-space: nowrap;
}

.app-footer .status-group[hidden]
{
	display: none;
}

.app-footer .status-group[data-tone="accent"]
{
	color: var( --accent );
}

.app-footer .status-group[data-tone="warning"]
{
	color: var( --warning );
}

.app-footer .status-spacer
{
	flex: 1;
}

.app-footer .daily-tip-slot
{
	display: flex;
	justify-content: center;
	min-width: 0;
}

.app-footer .daily-tip
{
	display: flex;
	align-items: center;
	gap: .35rem;
	min-width: 0;
	color: var( --ink-quiet );
	font-size: var( --text-sm );
}

.app-footer .daily-tip-label
{
	flex: none;
	font-weight: 600;
}

.app-footer .daily-tip-text
{
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.app-footer .daily-tip-text a { color: inherit; }

.app-footer .daily-tip-dismiss { flex: none; margin: 0; }

.app-footer .daily-tip-dismiss-button
{
	min-width: 1.75rem;
	min-height: 1.75rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var( --text-md );
	line-height: 1;
	cursor: pointer;
}

.app-footer .daily-tip-dismiss-button:hover,
.app-footer .daily-tip-dismiss-button:focus-visible { background: color-mix( in srgb, var( --ink ) 10%, transparent ); }

@media ( max-width: 46rem )
{
	.app-footer .daily-tip { display: none; }
}

.app-footer .status-dot
{
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: currentColor;
}

.app-footer .status-dot[data-pulse="true"]
{
	animation: attention-pulse var( --attention-rhythm ) ease-in-out infinite;
}

@media ( prefers-reduced-motion: reduce )
{
	.app-footer .status-dot[data-pulse="true"] { animation: none; }
}

.app-footer .status-attention
{
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	border-radius: 999px;
	padding: .05rem .42rem .05rem .32rem;
	background: color-mix( in srgb, var( --warning ) 16%, transparent );
	color: var( --warning );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	--icon-size: .85rem;
}

.app-footer .status-attention[hidden] { display: none; }

.sidebar-toggle
{
	display: none;
	align-items: center;
	justify-content: center;
	border: 1px solid var( --rule );
	background: var( --card-background );
	color: var( --ink );
	font: inherit;
	line-height: 1;
	padding: 0;
	cursor: pointer;
}

.sidebar-scrim
{
	display: none;
}

.camera-floater
{
	display: none;
	align-items: center;
	justify-content: center;
	border: 1px solid var( --rule );
	background: var( --card-background );
	color: var( --ink );
	cursor: pointer;
	--icon-size: 1.35rem;
}

.app-main .view-breadcrumb
{
	display: none;
	flex-wrap: wrap;
	row-gap: .1rem;
	margin: 0 0 .5rem;
}

.app-main .view-breadcrumb li:last-child a
{
	color: var( --ink-quiet );
	font-weight: 400;
}

.app-main .view-breadcrumb li:last-child::after
{
	content: "›";
	color: var( --ink-quiet );
}

@media ( max-width: 46rem )
{
	.app-shell
	{
		grid-template-columns: minmax( 0, 1fr );
		grid-template-areas:
			"content"
			"footer";
	}

	.app-sidebar
	{
		position: fixed;
		inset: auto 0 0 0;
				width: auto;

				max-height: 85vh;
		max-height: 85dvh;

				padding-bottom: calc( 4.25rem + env( safe-area-inset-bottom ) );

		border-right: 0;
		border-top: 1px solid var( --rule );
		border-radius: 1rem 1rem 0 0;
		z-index: 20;
		transform: translateY( 100% );
		box-shadow: 0 -.5rem 2rem rgba( 0, 0, 0, .28 );

				visibility: hidden;
		transition: transform .22s ease, visibility 0s linear .22s;
	}

	body[data-sidebar="open"] .app-sidebar
	{
		transform: none;
		visibility: visible;
		transition: transform .22s ease, visibility 0s;
	}

		.sidebar-scrim
	{
		display: none;
		position: fixed;
		inset: 0;
		z-index: 19;
		background: rgba( 0, 0, 0, .38 );
		opacity: 0;
		pointer-events: none;
		transition: opacity .22s ease, display .22s ease;
		transition-behavior: allow-discrete;
	}

	body[data-sidebar="open"] .sidebar-scrim
	{
		display: block;
		opacity: 1;
		pointer-events: auto;
	}

		@starting-style
	{
		body[data-sidebar="open"] .sidebar-scrim
		{
			opacity: 0;
		}
	}

		.sidebar-toggle
	{
		display: inline-flex;
		position: fixed;
		right: 1rem;
		bottom: calc( var( --footer-height ) + 1rem + env( safe-area-inset-bottom ) );
		z-index: 21;
		width: 3.1rem;
		height: 3.1rem;
		border-radius: 50%;
		box-shadow: 0 .25rem 1rem rgba( 0, 0, 0, .28 );
		font-size: var( --text-xl );
	}

		.camera-floater
	{
		display: inline-flex;
		position: fixed;
		left: 1rem;
		bottom: calc( var( --footer-height ) + 1rem + env( safe-area-inset-bottom ) );
		z-index: 18;
		width: 3.1rem;
		height: 3.1rem;
		border-radius: 50%;
		box-shadow: 0 .25rem 1rem rgba( 0, 0, 0, .28 );
	}

		.sidebar-resizer
	{
		display: none;
	}

		.app-toolbar .breadcrumb
	{
		display: none;
	}

	.app-main .view-breadcrumb
	{
		display: flex;
	}

		.app-toolbar
	{
		padding: 0 .75rem;
		gap: .5rem;
	}

		.toolbar-mark
	{
		display: flex;
		align-items: center;
	}
}

@container toolbar ( max-width: 55rem )
{
	.layout-choice .icon
	{
		display: block;
	}

		.toolbar-controls .layout-control .layout-choice
	{
		min-width: 0;
		position: relative;
	}

	.layout-choice .layout-choice-label
	{
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
	}

		.toolbar-select
	{
		position: relative;
		display: grid;
		place-items: center;
		flex: none;
		width: 2.6rem;
		height: 2.1rem;
		border: 1px solid var( --rule );
		border-radius: .42rem;
		background: var( --card-background );
		color: var( --ink );
	}

	.toolbar-select-glyph
	{
		--icon-size: 1.15rem;
		display: grid;
		pointer-events: none;
	}

	.toolbar-controls .toolbar-select select
	{
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		min-width: 0;
		min-height: 0;
		padding: 0;
		border: 0;
		opacity: 0;
	}

	.toolbar-select:focus-within { outline: 2px solid var( --accent ); outline-offset: 1px; }
	.toolbar-select:has( select:disabled ) { opacity: .45; }

	.toolbar-select[data-narrowing="true"]
	{
		border-color: var( --accent );
		background: var( --accent-quiet );
		color: var( --accent );
	}

		.toolbar-controls .layout-control .layout-choice
	{
		height: 2.1rem;
		min-height: 2.1rem;
		min-width: 2.6rem;
	}

	.toolbar-controls .layout-choice .icon { --icon-size: 1.15rem; }

		.toolbar-controls
	{
		flex-wrap: wrap;
		justify-content: flex-end;
		row-gap: .35rem;
	}
}

@media ( max-width: 26rem )
{
	.app-toolbar { gap: .35rem; }
	.toolbar-controls { gap: .3rem; }

	.toolbar-select,
	.toolbar-controls .layout-control .layout-choice
	{
		width: 2.1rem;
		min-width: 2.1rem;
	}

	.toolbar-upload
	{
		padding-inline: .45rem;
		min-width: 0;
	}
}

.sidebar-toggle .toggle-glyph-close,
body[data-sidebar="open"] .sidebar-toggle .toggle-glyph-open
{
	display: none;
}

body[data-sidebar="open"] .sidebar-toggle .toggle-glyph-close
{
	display: inline;
}

[data-library-layout="grid"] .sidebar-toggle,
body[data-library-layout="grid"] .sidebar-scrim,
[data-library-layout="grid"] .app-main .view-breadcrumb
{
	display: none;
}

@media ( prefers-reduced-motion: reduce )
{
	.app-sidebar,
	.sidebar-scrim
	{
		transition: none;
	}
}

body.app-shell-body
{
		--glass-feather: 0rem;
	--top-clearance: env( safe-area-inset-top, 0px );
}

@media ( display-mode: standalone )
{
	body.app-shell-body
	{
		--top-clearance: calc( env( safe-area-inset-top, 0px ) + min( var( --glass-feather ), env( safe-area-inset-top, 0px ) * 100 ) );
	}
}

.app-shell
{
		position: sticky;
	top: 0;

		padding-left: env( safe-area-inset-left, 0px );
	padding-right: env( safe-area-inset-right, 0px );
}

body.app-shell-body .app-toolbar
{
	padding-top: var( --top-clearance );
}

body.app-shell-body:not( [data-library-layout="grid"] ) .app-toolbar
{
	min-height: calc( var( --toolbar-height ) + var( --top-clearance ) );
}

[data-library-layout="grid"] .grid-controls
{
	top: calc( .75rem + var( --top-clearance ) );
}

@media not all and ( max-width: 46rem )
{
	.app-sidebar
	{
		padding-top: var( --top-clearance );
	}
}

.app-footer
{
	min-height: calc( var( --footer-height ) + env( safe-area-inset-bottom, 0px ) );
	padding-bottom: env( safe-area-inset-bottom, 0px );
}

.sidebar-hide,
.sidebar-restore
{
	display: none;
}

.sidebar-restore-mark
{
	width: 1.45rem;
	height: 1.45rem;
	flex: none;
}

.sidebar-restore-mark-light { display: var( --logo-light-display ); }
.sidebar-restore-mark-dark { display: var( --logo-dark-display ); }

@media not all and ( max-width: 46rem )
{
		.app-footer .sidebar-hide,
	.app-footer .sidebar-restore
	{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .35rem;
		flex: none;
		min-height: calc( var( --footer-height ) - .65rem );
		padding: 0 .65rem;
		border: 1px solid var( --rule );
		border-radius: 999px;
		background: var( --card-background );
		color: var( --ink-quiet );
		font: inherit;
		cursor: pointer;
		box-shadow: 0 1px 1px rgba( 0, 0, 0, .05 );
	}

		.app-footer .sidebar-restore
	{
		padding-left: .45rem;
	}

	.app-footer .sidebar-hide .icon
	{
		--icon-size: 1.1rem;
	}

	.app-footer .sidebar-hide:hover,
	.app-footer .sidebar-restore:hover
	{
		border-color: var( --ink-quiet );
		background: color-mix( in srgb, var( --ink ) 4%, var( --card-background ) );
		color: var( --ink );
	}

	.app-footer .sidebar-hide:focus-visible,
	.app-footer .sidebar-restore:focus-visible
	{
		outline: 2px solid var( --accent );
		outline-offset: 2px;
	}

	body[data-sidebar-hidden="true"] .app-footer .sidebar-hide,
	body:not( [data-sidebar-hidden="true"] ) .app-footer .sidebar-restore
	{
		display: none;
	}

	body[data-sidebar-hidden="true"] .app-shell
	{
		grid-template-columns: minmax( 0, 1fr );
		grid-template-areas:
			"content"
			"footer";
	}

	body[data-sidebar-hidden="true"] .app-sidebar
	{
		display: none;
	}
}

.sidebar-restore[data-mark-landing] .sidebar-restore-mark
{
	visibility: hidden;
}

.sidebar-mark-flight
{
	position: fixed;
	z-index: 50;
	margin: 0;
	transform-origin: 0 0;
	pointer-events: none;
	will-change: transform;
}

.pin-form
{
	display: contents;
}

.pin-button
{
	border: 0;
	background: none;
	color: var( --ink-quiet );
	font-size: var( --text-md );
	line-height: 1;
	padding: 0 .15rem;
	cursor: pointer;
	opacity: 0;
	transition: opacity .12s ease, color .12s ease;
}

.sidebar-row:hover ~ .pin-form .pin-button,
.row-with-control:hover .pin-button,
.favorite-item:hover .pin-button,
.scope-tile-item:hover .pin-button,
.favorite-tile-item:hover .pin-button,
.pin-button:focus-visible
{
	opacity: 1;
}

.pin-button[data-pinned="true"]
{
	opacity: 1;
	color: var( --favorite );
}

.pin-button:hover
{
	color: var( --favorite );
}

.scope-tile-item,
.favorite-tile-item
{
	position: relative;
}

.scope-tile-item .pin-button,
.favorite-tile-item .pin-button
{
	position: absolute;
	top: .45rem;
	right: .5rem;
	z-index: 2;
}

.pin-pill
{
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	cursor: pointer;
}

.pin-pill[data-pinned="true"]
{
	color: var( --favorite );
	border-color: var( --favorite );
	background: color-mix( in srgb, var( --favorite ) 8%, var( --card-background ) );
	font-weight: 600;
}

.pin-pill[data-pinned="true"]:hover
{
	border-color: var( --favorite );
	background: var( --favorite-quiet );
}

.pin-pill .pin-star
{
	font-size: var( --text-md );
	line-height: 1;
}

.row-with-control
{
	display: flex;
	align-items: center;
}

.row-with-control > .sidebar-row
{
	flex: 1;
	min-width: 0;
}

.row-with-control
{
	flex-wrap: wrap;
}

.row-with-control > .sidebar-list
{
	flex-basis: 100%;

		min-width: 0;
}

.item-pin-actions
{
	margin: 0 0 .75rem;
}

.item-toolbar
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
}

.item-toolbar .item-replace-source { display: contents }
.item-toolbar .replace-cards { flex-basis: 100%; width: 100% }
.item-toolbar .replace-cards[hidden] { display: none }

.item-versions form { margin: 0 }

.item-downloads
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin: .5rem 0 0;
	padding: 0;
	list-style: none;
}

.item-toolbar .item-downloads { display: contents }

.item-download .pill-glyph
{
	font-size: var( --text-md );
	line-height: 1;
}

.item-download .quiet
{
	font-size: var( --text-xs );
}

.sidebar-section[data-section="favorites"][data-drop-state="into"]
{
	outline-offset: 2px;
	border-radius: .4rem;
}

.item-card .pin-button
{
	position: absolute;
	grid-row: 2;
		top: .5rem;
	right: calc( .3rem + var( --icon-button-size ) );
	z-index: 2;
	width: var( --icon-button-size );
	height: var( --icon-button-size );
	display: grid;
	place-items: center;
	font-size: var( --icon-button-glyph );
	padding: 0;
	opacity: 1;
}

.favorite-item
{
	display: flex;
	align-items: center;
}

section[data-section="favorites"] .favorite-item
{
	padding-left: 1.2rem;
}

.favorite-item .sidebar-row
{
	flex: 1;
	min-width: 0;
}

.favorite-row[data-stale="true"]
{
	opacity: .55;
}

.favorite-row[data-stale="true"] .row-label
{
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	text-decoration-color: var( --ink-quiet );
}

.favorite-stale
{
	margin-left: auto;
	padding-left: .35rem;
	color: var( --ink-quiet );
	font-size: var( --text-sm );
	line-height: 1;
}

.row-unpin
{
	border: 0;
	background: none;
	color: var( --ink-quiet );
	font-size: var( --text-base );
	line-height: 1;
	padding: 0 .1rem;
	cursor: pointer;
	opacity: 0;
}

.favorite-item:hover .row-unpin,
.row-unpin:focus-visible
{
	opacity: 1;
}

.shell-dock
{
	position: fixed;
	right: 1rem;
	bottom: calc( var( --footer-height ) + 1rem + env( safe-area-inset-bottom, 0px ) );
	z-index: 30;
		width: min( 48.6rem, calc( 100vw - 2rem ) );
	display: flex;
	flex-direction: row;
		align-items: flex-end;
	justify-content: flex-end;
	gap: .6rem;
	max-height: calc( 100vh - var( --footer-height ) - 3rem );
	pointer-events: none;
}

.dock-tray
{
	pointer-events: auto;
	display: flex;
	flex-direction: column;
		flex: 0 1 24rem;
	min-width: 0;
	min-height: 0;
	background: var( --card-background );
	border: 1px solid var( --rule );
	border-radius: .6rem;
	box-shadow: 0 .6rem 2rem rgba( 0, 0, 0, .22 );
	overflow: hidden;
}

.dock-tray-head
{
		flex: none;
	display: flex;
	align-items: stretch;
	background: color-mix( in srgb, var( --card-background ) 88%, var( --page-background ) );
	border-bottom: 1px solid var( --rule );
}

.dock-tray-toggle
{
	flex: 1;
	display: flex;
	align-items: center;
	gap: .45rem;
	border: 0;
	background: none;
	font: inherit;
	color: var( --ink-quiet );
	cursor: pointer;
	padding: .35rem .4rem .35rem .8rem;
	text-align: left;
}

.dock-tray-toggle:hover { color: var( --ink ); }
.dock-tray-toggle:focus-visible { outline: 2px solid var( --accent ); outline-offset: -2px; }

.dock-tray-title { font-size: var( --text-sm ); font-weight: 600; }

.shelf-list
{
	list-style: none;
	margin: 0;
	padding: .3rem;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

.shelf-entry
{
	display: flex;
	align-items: center;
	gap: .3rem;
	border-radius: .45rem;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.shelf-entry[draggable="true"] { cursor: grab; }

.shelf-entry[draggable="true"]:hover
{
	background: var( --accent-quiet );
	box-shadow: inset 0 0 0 1px color-mix( in srgb, var( --accent ) 40%, transparent );
}

.shelf-entry[data-stale="true"] { opacity: .6; }

.shelf-entry-link
{
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .35rem .4rem;
	color: var( --ink );
	text-decoration: none;
}

.shelf-entry-glyph
{
	flex: none;
	position: relative;
	width: 2.4rem;
	height: 2.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: .4rem;
	background: color-mix( in srgb, var( --ink ) 6%, var( --card-background ) );
	color: var( --ink-quiet );
	overflow: visible;
}

.shelf-entry-thumb
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: .4rem;
}

.pointer-badge
{
	position: absolute;
	left: -.3rem;
	bottom: -.3rem;
	width: 1.05rem;
	height: 1.05rem;
	--icon-size: .62rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var( --accent );
	color: var( --card-background );
	box-shadow: 0 0 0 2px var( --card-background );
}

.item-card.pointer
{
	outline: 1.5px dashed color-mix( in srgb, var( --accent ) 60%, transparent );
	outline-offset: -1.5px;
}

.item-card.pointer .card-preview { position: relative; }

.card-alias-badge
{
	left: .45rem;
	bottom: .45rem;
	width: 1.45rem;
	height: 1.45rem;
	--icon-size: .8rem;
	z-index: 2;
}

.card-alias-line
{
	margin: 0;
	display: flex;
	align-items: center;
	gap: .3rem;
	font-size: var( --text-xs );
	color: var( --ink-quiet );
	--icon-size: .75rem;
}

.card-alias-line a { color: inherit; text-decoration: none; }
.card-alias-line a:hover { color: var( --ink ); text-decoration: underline; }

.shelf-entry-text
{
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .05rem;
}

.shelf-entry-name
{
	font-size: var( --text-sm );
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shelf-entry-meta
{
	font-size: var( --text-xs );
	color: var( --ink-quiet );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shelf-entry .shelf-form { flex: none; }

.shelf-take
{
	--icon-size: var( --icon-button-glyph );
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --icon-button-size );
	height: var( --icon-button-size );
	margin-right: .3rem;
	border: 0;
	border-radius: .35rem;
	background: none;
	color: var( --ink-quiet );
	cursor: pointer;
	opacity: 0;
}

.shelf-entry:hover .shelf-take,
.shelf-take:focus-visible { opacity: 1; }
.shelf-take:hover { background: color-mix( in srgb, var( --ink ) 8%, transparent ); color: var( --ink ); }

@media ( hover: none )
{
	.shelf-take { opacity: 1; }
}

.shelf-clear-form
{
	display: flex;
	justify-content: flex-end;
	padding: .3rem .5rem .5rem;
}

.shelf-hidden-note { padding: 0 .6rem; }

.shelf-pill { gap: .35rem; }
.shelf-pill .shelf-pill-glyph { --icon-size: .8em; display: inline-flex; }
.shelf-pill[data-shelved="true"]
{
	background: var( --accent-quiet );
	border-color: color-mix( in srgb, var( --accent ) 45%, var( --rule ) );
}

.dock-tray[data-drop-state="into"] { outline-offset: -3px; }

.dock-tray-close
{
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --icon-button-size );
	height: var( --icon-button-size );
	border-radius: .35rem;
	color: var( --ink-quiet );
	--icon-size: var( --icon-button-glyph );
}

.dock-tray-toggle:hover .dock-tray-close
{
	background: color-mix( in srgb, var( --ink ) 10%, transparent );
	color: var( --ink );
}

.dock-tray-head { position: relative; }

.dock-tray-expand
{
	position: absolute;
	right: calc( .6rem + var( --icon-button-size ) );
	top: 50%;
	transform: translateY( -50% );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --icon-button-size );
	height: var( --icon-button-size );
	border-radius: .35rem;
	color: var( --ink-quiet );
	--icon-size: var( --icon-button-glyph );
}

.dock-tray-expand:hover
{
	background: color-mix( in srgb, var( --ink ) 10%, transparent );
	color: var( --ink );
}

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

.dock-tray-body
{
	overflow-y: auto;
	min-height: 0;
	max-height: min( 40vh, 22rem );
}

.dock-tray[data-collapsed="true"] { display: none; }

.app-shell
{
	--shelf-drawer-width: min( 20rem, 85vw );
	--shelf-drawer-top-floor: calc( var( --toolbar-height ) + var( --top-clearance, 0px ) );
}

.dock-tray.shelf-drawer
{
	position: fixed;
	top: var( --shelf-drawer-top, var( --shelf-drawer-top-floor ) );
	right: 0;
	bottom: calc( var( --footer-height ) + env( safe-area-inset-bottom, 0px ) );
	width: var( --shelf-drawer-width );
	z-index: 40;
	min-height: 0;
	border: 0;
	border-left: 1px solid var( --rule );
	border-top: 1px solid var( --rule );
	border-radius: .6rem 0 0 0;
	box-shadow: -.6rem 0 2rem rgba( 0, 0, 0, .18 );
	background: var( --card-background );
}

.shelf-drawer .dock-tray-body
{
	flex: 1 1 auto;
	max-height: none;
}

.shelf-handle
{
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY( -50% );
	z-index: 41;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
	padding: .7rem .3rem;
	min-height: 6.5rem;
	border: 1px dashed var( --rule );
	border-right: 0;
	border-radius: .55rem 0 0 .55rem;
	background: var( --card-background );
	color: var( --ink-quiet );
	font: inherit;
	font-size: var( --text-xs );
	cursor: pointer;
	box-shadow: -.2rem 0 .8rem rgba( 0, 0, 0, .08 );
}

.shelf-handle [data-status-text="shelf"]
{
	writing-mode: vertical-rl;
	white-space: nowrap;
}

.shelf-handle .shelf-button-glyph { --icon-size: .8rem; display: inline-flex; }

.shelf-handle:hover { color: var( --ink ); }
.shelf-handle:focus-visible { outline: 2px solid var( --accent ); outline-offset: -2px; }

.shelf-handle[aria-expanded="true"],
.shelf-handle[data-drop-state]
{
	border-style: solid;
	color: var( --ink );
}

.shelf-drawer[data-collapsed="false"] ~ .shelf-handle { right: var( --shelf-drawer-width ); }

@media print { .shelf-handle { display: none; } }

.dock-tray-foot
{
	flex: none;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
	padding: .4rem .7rem;
	border-top: 1px solid var( --rule );
	background: color-mix( in srgb, var( --card-background ) 88%, var( --page-background ) );
	font-size: var( --text-xs );
	color: var( --ink-quiet );
}

.dock-tray-foot .status-group[data-tone="warning"] { color: var( --warning ); }

.dock-tray-foot-separator { opacity: .5; }

.dock-tray-foot-urn
{
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dock-tray-empty,
.dock-tray-caption
{
	margin: 0;
	padding: .5rem .7rem;
	font-size: var( --text-xs );
	color: var( --ink-quiet );
}

.dock-tray-caption
{
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding-bottom: .2rem;
}

.dock-tray-empty { font-style: italic; font-size: var( --text-sm ); }

.dock-rows
{
	list-style: none;
	margin: 0;
	padding: 0 .35rem .35rem;
}

.dock-row
{
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .3rem .35rem;
	border-radius: .35rem;
	text-decoration: none;
	color: inherit;
}

.dock-row:hover { background: var( --accent-quiet ); }

.dock-row-glyph
{
	flex: none;
	width: 1rem;
	text-align: center;
	color: var( --ink-quiet );
	font-size: var( --text-sm );
}

.dock-row[data-job-status="running"] .dock-row-glyph { color: var( --accent ); }
.dock-row[data-job-status="failed"] .dock-row-glyph,
.dock-row[data-job-status="dead"] .dock-row-glyph { color: var( --warning ); }

.dock-row-text { min-width: 0; display: flex; flex-direction: column; }

.dock-row-name,
.dock-row-meta
{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dock-row-name { font-size: var( --text-sm ); }
.dock-row-meta { font-size: var( --text-xs ); color: var( --ink-quiet ); }

.dock-rows > li { display: flex; align-items: center; gap: .35rem; }
.dock-rows > li > .dock-row { flex: 1 1 auto; min-width: 0; }
.dock-row-ok { flex: none; font-size: var( --text-xs ); padding: .2rem .5rem; }

.dock-tray-body #uploads
{
	margin-top: 0;
	padding: .6rem;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.dock-tray-body #uploads:empty { display: none; }

.dock-tray-history[hidden] { display: none; }

@media ( max-width: 51rem )
{
	.shell-dock
	{
		width: min( 24rem, calc( 100vw - 2rem ) );
		flex-direction: column;
		align-items: stretch;
		gap: .4rem;
	}

		.dock-tray { flex: 0 1 auto; }
}

.app-footer .status-tray-toggle
{
	gap: .45rem;
	min-width: 0;
	min-height: calc( var( --footer-height ) - .65rem );
	padding: 0 .8rem;
	border: 1px solid var( --rule );
	border-radius: 999px;
	background: var( --card-background );
	color: var( --ink-quiet );
	font: inherit;
	font-size: var( --text-xs );	
	cursor: pointer;
	box-shadow: 0 1px 1px rgba( 0, 0, 0, .05 );
}

.app-footer .status-tray-toggle:hover
{
	border-color: var( --ink-quiet );
	background: color-mix( in srgb, var( --ink ) 4%, var( --card-background ) );
}

.app-footer .status-tray-toggle:focus-visible { outline: 2px solid var( --accent ); outline-offset: 2px; }

.app-footer .status-tray-toggle[data-tone="accent"] { border-color: color-mix( in srgb, var( --accent ) 45%, var( --rule ) ); }
.app-footer .status-tray-toggle[data-tone="warning"] { border-color: color-mix( in srgb, var( --warning ) 45%, var( --rule ) ); }

.app-footer .status-tray-toggle[data-weather="1"] { background: color-mix( in srgb, var( --weather-1 ) 14%, var( --card-background ) ); border-color: color-mix( in srgb, var( --weather-1 ) 55%, var( --rule ) ); }
.app-footer .status-tray-toggle[data-weather="2"] { background: color-mix( in srgb, var( --weather-2 ) 22%, var( --card-background ) ); border-color: color-mix( in srgb, var( --weather-2 ) 60%, var( --rule ) ); color: var( --ink ); }
.app-footer .status-tray-toggle[data-weather="3"] { background: color-mix( in srgb, var( --weather-3 ) 32%, var( --card-background ) ); border-color: var( --weather-3 ); color: var( --ink ); }
.app-footer .status-tray-toggle[data-weather="4"] { background: var( --weather-4 ); border-color: var( --weather-4 ); color: #fff; }
.app-footer .status-tray-toggle[data-weather="4"] .status-dot { background: #fff; }
.app-footer .status-tray-toggle[data-status="queue"] { transition: background-color 2s ease, border-color 2s ease, color 2s ease; }
@media ( prefers-reduced-motion: reduce ) { .app-footer .status-tray-toggle[data-status="queue"] { transition: none; } }

.app-footer .status-tray-toggle[aria-expanded="true"]
{
	background: color-mix( in srgb, var( --ink ) 9%, var( --card-background ) );
	border-color: var( --ink-quiet );
	box-shadow: inset 0 1px 2px rgba( 0, 0, 0, .14 );
}

.app-footer .status-tray-toggle [data-status-text]
{
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.app-footer .status-tray-toggle .status-dot,
.app-footer .status-tray-toggle .status-attention
{
	flex: none;
}

.status-diagnostics
{
	border: 0;
	font: inherit;
	cursor: pointer;
	background: none;
	color: inherit;
	padding: 0;
	text-decoration: underline dotted;
	text-underline-offset: .2rem;
}

.diagnostics-panel
{
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: calc( var( --footer-height ) + 1rem + env( safe-area-inset-bottom, 0px ) );
	z-index: 40;
	max-height: min( 50vh, 26rem );
	display: flex;
	flex-direction: column;
	background: var( --card-background );
		border: 1px solid color-mix( in srgb, var( --danger ) 40%, var( --card-background ) );
	border-left: 3px solid var( --danger );
	border-radius: .6rem;
	box-shadow: 0 .6rem 2rem rgba( 0, 0, 0, .24 );
	overflow: hidden;
}

.diagnostics-panel[hidden] { display: none; }

.diagnostics-head
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .45rem .7rem;
	border-bottom: 1px solid var( --rule );
}

.diagnostics-title { font-size: var( --text-sm ); font-weight: 600; color: var( --danger ); }
.diagnostics-actions { display: flex; gap: .4rem; }

.diagnostics-actions button
{
	border: 1px solid var( --rule );
	border-radius: 999px;
	background: var( --page-background );
	color: var( --ink-quiet );
	font: inherit;
	font-size: var( --text-xs );
	padding: .1rem .5rem;
	cursor: pointer;
}

.diagnostics-actions button:hover { border-color: var( --ink-quiet ); color: var( --ink ); }

.diagnostics-list
{
	margin: 0;
	padding: .5rem .7rem .7rem 1.8rem;
	overflow-y: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var( --text-xs );
	line-height: 1.5;
	color: var( --ink );
}

.diagnostics-list li { margin: 0 0 .35rem; overflow-wrap: anywhere; }

.share-panel
{
	margin: 0;
}

.share-panel .share-public-row
{
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
	align-items: flex-start;
}

.share-panel :is( .share-create, .share-list, .empty-state ) + .share-public-row
{
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var( --rule );
}

.share-panel .share-create + .share-list-heading { margin-top: 1.25rem; }

.share-panel > .scope-panel-dock { margin-top: 1.25rem; }

.share-panel .share-public-row .share-public-address { margin-top: 0.5rem; }

.share-panel .share-public-controls
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.share-panel .share-public-controls .control-pill
{
	min-width: 9.5rem;
	justify-content: center;
	text-align: center;
}

.share-panel .share-public-controls .share-public-downloads,
.share-panel .share-public-controls .share-public-ai-training-choice
{
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var( --text-base );
	white-space: nowrap;
}

.share-panel .share-public-ai-training { font-size: var( --text-base ); margin: 0.35rem 0 0; }

.share-panel .share-list-heading
{
	margin: 0 0 0.6rem;
	font-size: var( --text-base );
	font-weight: 600;
}

.share-panel .share-list-heading + .empty-state { margin: 0 0 1.25rem; }

.share-panel .share-row-actions
{
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.share-panel .share-row-actions .share-revoke { display: contents; }

.share-panel .share-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.85rem; }

.share-panel .share-row
{
	display: grid;
	gap: 0.4rem;
	padding: 0.75rem;
	border: 1px solid var( --rule, #8884 );
	border-radius: 0.3rem;
}

.share-panel .share-row-head { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; font-size: var( --text-base ); }
.share-panel .share-scope { font-weight: 600; }
.share-panel .share-download { opacity: 0.7; }

.share-panel .share-url-row
{
	display: grid;
	gap: 0.2rem;
}

.share-panel .share-url
{
	width: 100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var( --text-base );
	padding: 0.4rem 0.5rem;
	text-overflow: ellipsis;
	cursor: pointer;
}

.share-panel .share-url-hint
{
	font-size: var( --text-sm );
	opacity: 0.7;
}

.share-panel .share-url-hint[ data-copied="true" ]
{
	opacity: 1;
	font-weight: 600;
	color: var( --accent, #2f6f4f );
}

.embed-snippet
{
	display: grid;
	gap: 0.3rem;
	margin-top: 0.8rem;
}

.embed-snippet-title
{
	margin: 0;
	display: grid;
	gap: 0.1rem;
}

.embed-snippet-source
{
	width: 100%;
	box-sizing: border-box;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var( --text-sm );
	line-height: 1.35;
	padding: 0.4rem 0.5rem;
	overflow: auto;
	white-space: pre;
	resize: vertical;
	cursor: pointer;
}

.embed-snippet .share-url-hint
{
	font-size: var( --text-sm );
	opacity: 0.7;
}

.embed-snippet .share-url-hint[ data-copied="true" ]
{
	opacity: 1;
	font-weight: 600;
	color: var( --accent, #2f6f4f );
}

.embed-ground-tabs
{
	display: flex;
	flex-wrap: wrap;
	margin-top: 0.3rem;
}

.embed-ground-tab
{
	font: inherit;
	font-size: var( --text-sm );
	color: var( --ink-quiet );
	background: transparent;
	border: 1px solid var( --rule );
	padding: 0.3rem 0.75rem;
	cursor: pointer;
}

.embed-ground-tab + .embed-ground-tab
{
	margin-left: -1px;
}

.embed-ground-tab:first-child
{
	border-radius: 0.42rem 0 0 0.42rem;
}

.embed-ground-tab:last-child
{
	border-radius: 0 0.42rem 0.42rem 0;
}

.embed-ground-tab[ aria-selected="true" ]
{
	background: var( --accent-quiet );
	color: var( --ink );
	font-weight: 600;
}

.embed-snippet-absent
{
	margin: 0;
	font-size: var( --text-base );
}

.share-panel .share-create
{
		--share-control-height: var( --control-height );

	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: end;
}

.share-panel .share-create > label
{
	display: grid;
	grid-template-rows: auto minmax( var( --share-control-height ), auto );
	gap: 0.25rem;
	font-size: var( --text-base );
}

.share-panel .share-create .share-checkbox-row
{
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.share-panel .share-create > label:first-of-type
{
	flex: 1 1 8rem;
	min-width: 5rem;

		max-width: 20rem;
}

.share-panel .share-create > label:first-of-type input[ type="text" ] { width: 100%; min-width: 0; }

.share-panel .share-create input[ type="text" ],
.share-panel .share-create select
{
	padding: 0.25rem 0.5rem;
	line-height: 1.2;
	box-sizing: border-box;
}

.share-panel .share-create select { padding-right: 1.9rem; }

.share-panel .share-create > button
{
	height: var( --share-control-height );
	padding-inline: 0.9rem;
	justify-content: center;
		min-width: 9.5rem;
	margin-left: auto;
}

.details-area { margin: 1.5rem 0; }

.scope-actions
{
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: 0.75rem 0;

		position: relative;
}

dialog.scope-panel { width: min( 44rem, calc( 100vw - 2rem ) ); max-height: calc( 100dvh - 3rem ); padding: 0; border: 0; border-radius: 10px; background: transparent; color: var( --ink ); overflow: visible; }
dialog.scope-panel::backdrop { background: rgba( 16, 18, 20, .45 ); }
dialog.scope-panel > .tool-area { max-height: calc( 100dvh - 3rem ); overflow-y: auto; box-sizing: border-box; overscroll-behavior: contain; }

dialog[data-dialog-covered] { visibility: hidden; }
dialog[data-dialog-covered]::backdrop { background: transparent; }

.dialog-chain-host > .scope-panel-toggle,
.dialog-chain-host > .control-pill { display: none; }

.scope-panel-toggle:checked + .control-pill
{
	border-color: var( --accent );
	color: var( --accent );
}

.scope-panel-toggle
{
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.scope-panel-toggle:focus-visible + .control-pill
{
	outline: 2px solid var( --accent );
	outline-offset: 2px;
}

.scope-panel > .tool-area { margin: 0; }
.scope-panel > .tool-area > .details-form { max-width: none; }

.scope-actions > .notice { flex-basis: 100%; margin: 0; order: 2; }

.scope-actions .control-pill .icon { --icon-size: 0.85rem; }

@media ( max-width: 46rem )
{
	.scope-actions-bar:not( :has( > .notice ) ),
	.item-toolbar:not( :has( .replace-cards:not( [hidden] ) ) )
	{
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		margin-inline: -1rem;
		padding-inline: 1rem;
				padding-block: 3px;
	}

	.scope-actions-bar:not( :has( > .notice ) )::-webkit-scrollbar,
	.item-toolbar:not( :has( .replace-cards:not( [hidden] ) ) )::-webkit-scrollbar
	{
		display: none;
	}

		.scope-actions-bar > *,
	.item-toolbar > *,
	.item-toolbar .item-replace-source > .control-pill
	{
		flex: 0 0 auto;
	}
}

.details-area > summary { cursor: pointer; display: inline-block; list-style: none; }
.details-area > summary::-webkit-details-marker { display: none; }

.details-area > summary.control-pill { display: inline-flex; }

.details-area[open] > summary { margin-bottom: 0.75rem; }

.control-pill:disabled { opacity: 0.55; cursor: not-allowed; }

.control-pill-compact
{
	min-height: 0;
	padding: .12rem .45rem;
	font-size: var( --text-xs );
}

.details-form
{
	display: grid;
	gap: 0.75rem;
	max-width: 46rem;
}

.button-dock
{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: .5rem;
}

.button-dock .control-pill:not( .control-pill-compact ),
.interstitial-form .control-pill,
.membership-save .control-pill,
.control-pill.details-save,
.control-pill[data-default="true"]
{
	min-width: 6rem;
}

.details-form-wide { max-width: none; }

.details-area-wide { max-width: none; }

.membership-save
{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem 1rem;
	margin-top: 1.25rem;
	padding: 1rem 0 0.75rem;
	border-top: 1px solid var( --rule );

			position: sticky;
	bottom: calc( -1 * var( --main-padding-bottom, 0rem ) );
	background: var( --page-background );
	z-index: 1;
}

.membership-save .details-description { margin: 0; }

.membership-save [data-membership-save][data-attention="true"]
{
	animation: attention-pulse var( --attention-rhythm ) ease-in-out infinite;
}

@media ( prefers-reduced-motion: reduce )
{
	.membership-save [data-membership-save][data-attention="true"] { animation: none; }
}

.membership-form .data-table td { vertical-align: middle; }

.member-remove { width: 1%; white-space: nowrap; }

.member-caution > td
{
	border-top: 0;
	padding-top: 0;
	font-size: var( --text-sm );
	color: var( --warning );
}

.data-table tbody tr.member-caution:hover > td { background: transparent; }

.member-revoke-form { display: contents; }

.member-role-select { max-width: 20rem; }

.picker-tools
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.details-form .picker-search
{
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var( --text-base );
}

.picker-search input
{
	padding: 0.35rem 0.5rem;
	font: inherit;
	font-size: var( --text-md );
	min-width: 14rem;
}

.picker-pages
{
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
}

.picker-tools .details-description { margin: 0; }

.person-label { cursor: pointer; }

.details-form .person-label,
.person-identity
{
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.details-form label { display: grid; gap: 0.25rem; font-size: var( --text-base ); }

.details-form input[ type="text" ],
.details-form input[ type="url" ],
.details-form input[ type="email" ],
.details-form input[ type="number" ],
.details-form textarea
{
	padding: 0.45rem 0.55rem;
	font: inherit;
		font-size: var( --text-md );
}

.details-form input[ type="text" ],
.details-form input[ type="url" ],
.details-form input[ type="email" ],
.details-form input[ type="number" ] { padding-block: 0.3rem; }

.details-form textarea { resize: vertical; min-height: 4.5rem; }

.markdown-help { margin-top: -0.4rem; font-size: var( --text-base ); }

.markdown-help > summary
{
	display: inline;
	cursor: pointer;
	color: var( --ink-quiet );
	text-decoration: underline;
	text-underline-offset: 0.15em;
	list-style: none;
}

.markdown-help > summary::-webkit-details-marker { display: none; }
.markdown-help > summary:hover, .markdown-help[open] > summary { color: var( --accent ); }

.markdown-help-sheet { width: fit-content; max-width: 100%; margin-top: 0.5rem; padding: 0.6rem 0.75rem; border: 1px solid var( --rule ); border-radius: 6px; }
.markdown-help-sheet table { border-collapse: collapse; }
.markdown-help-sheet th { text-align: left; font-weight: 600; color: var( --ink-quiet ); padding: 0 1.25rem 0.25rem 0; }
.markdown-help-sheet td { padding: 0.1rem 1.25rem 0.1rem 0; vertical-align: baseline; }
.markdown-help-sheet code { font-size: 0.92em; white-space: nowrap; }

.markdown-tools { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.1rem; margin-top: -0.4rem; }
.markdown-tools > .markdown-help { margin-top: 0; }
.details-field + .markdown-tools { margin-top: 0.15rem; }

.markdown-preview-toggle
{
	display: none;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var( --text-base );
	cursor: pointer;
	color: var( --ink-quiet );
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.markdown-preview-ready .markdown-preview-toggle { display: inline; }
.markdown-preview-toggle:hover, .markdown-preview-toggle[aria-pressed="true"] { color: var( --accent ); }

.scope-description.markdown-preview
{
	max-width: 100%;
	max-height: 20rem;
	margin: 0.5rem 0 0.9rem;
		padding: 0.75rem 1rem;
	border: 1px solid color-mix( in srgb, var( --ink-quiet ) 40%, transparent );
	border-radius: 0.5rem;
}
.markdown-help-sheet p { margin: 0.5rem 0 0; }

.details-save { }

.details-form > .control-pill { justify-self: end; }

.details-description
{
	white-space: pre-line;
	max-width: 46rem;
	margin: 0;
}

.key-image-provenance
{
	margin: 0.5rem 0 0;
	font-size: var( --text-base );
	opacity: 0.85;
}

.key-image-provenance[ data-state="pending" ] { opacity: 1; font-style: italic; }
.key-image-provenance[ data-state="none" ] { opacity: 0.6; }

.key-image-frame-form[ hidden ] { display: none; }

.key-image-reset { display: contents; }

.key-image-cropper
{
	margin: .7rem 0 0;
	max-width: 30rem;
}

.cropper-stage
{
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	border-radius: .25rem;
	overflow: hidden;
	background: var( --rule );
	touch-action: none;
}

.cropper-stage img
{
	display: block;
	max-width: 100%;
	height: auto;
		opacity: .45;
	user-select: none;
	-webkit-user-drag: none;
}

.cropper-frame
{
	position: absolute;
	box-sizing: border-box;
	border: 1px solid var( --page-background );
	outline: 1px solid var( --accent );
	box-shadow: 0 0 0 100vmax color-mix( in srgb, var( --page-background ) 55%, transparent );
	cursor: move;
}

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

.cropper-handle
{
	position: absolute;
	width: .85rem;
	height: .85rem;
	background: var( --page-background );
	border: 1px solid var( --accent );
	border-radius: .15rem;
}

.cropper-handle[data-handle="nw"] { left: -.45rem; top: -.45rem; cursor: nwse-resize; }
.cropper-handle[data-handle="ne"] { right: -.45rem; top: -.45rem; cursor: nesw-resize; }
.cropper-handle[data-handle="sw"] { left: -.45rem; bottom: -.45rem; cursor: nesw-resize; }
.cropper-handle[data-handle="se"] { right: -.45rem; bottom: -.45rem; cursor: nwse-resize; }

.cropper-hint
{
	margin: .4rem 0 0;
	font-size: var( --text-sm );
	line-height: 1.45;
	color: var( --ink-quiet );
}

.derived-from
{
	margin: 1.5rem 0;
	padding: 0.6rem 0 0.6rem 0.9rem;
	border-left: 3px solid currentColor;
	font-size: var( --text-base );
	opacity: 0.85;
	max-width: 46rem;
}

.key-image-borrowers { margin: 1.5rem 0; }

.key-image-borrower-list
{
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}

.key-image-borrower-list li { display: flex; align-items: baseline; gap: 0.5rem; }

.item-card .card-progress
{
	position: absolute;
	inset-inline: .4rem;
	bottom: .4rem;
	padding: .2rem .45rem;
	border-radius: .8rem;
	background: var( --accent );
		color: var( --card-background );
	font-size: var( --text-2xs );
	font-weight: 600;
	letter-spacing: .01em;
	text-align: center;
		box-shadow: 0 1px 4px color-mix( in srgb, var( --ink ) 25%, transparent );
}

.item-card .card-progress[data-state="uploading"]
{
	animation: attention-pulse var( --attention-rhythm ) ease-in-out infinite;
}

.item-card[data-processing="working"] .card-progress
{
	opacity: .92;
}

@media ( prefers-reduced-motion: reduce )
{
	.item-card .card-progress[data-state="uploading"] { animation: none; }
}

.no-preview-note
{
	display: block;
	margin-top: .35rem;
	max-width: 28ch;
	color: var( --ink-quiet );
	font-size: var( --text-2xs );
	line-height: 1.35;
	text-wrap: balance;
}

.mention-panel > .tool-area { margin: 0; }

.picker > .details-form { max-width: none; }

.picker-subject
{
	margin: 0 0 .15rem;
	font-size: var( --text-base );
	font-weight: 650;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.picker-note
{
	margin: 0 0 .5rem;
	font-size: var( --text-sm );
	color: var( --ink-quiet );
}

.picker-entry-label { font-size: var( --text-base ); }

.picker-options
{
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 16rem, 1fr ) );
	gap: .1rem .75rem;
	max-height: 14rem;
	overflow-y: auto;
}

.picker-options[data-empty="true"]::after
{
	content: attr( data-picker-empty );
	font-size: var( --text-base );
	color: var( --ink-quiet );
	padding: .3rem .4rem;
}

.picker-form .picker-option
{
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: .5rem;
	row-gap: .05rem;
	padding: .3rem .4rem;
	border-radius: .35rem;
	font-size: var( --text-base );
	cursor: pointer;
}

.picker-form .picker-option[hidden] { display: none; }

.picker-form .picker-option input[ type="checkbox" ]
{
	margin: 0;
	accent-color: var( --accent );
}

.picker-form .picker-option-note { grid-column: 2; }

.picker-option:hover { background: var( --selection-background ); }

.picker-option[data-changed="true"] .picker-option-name
{
	font-weight: 650;
}

.picker[data-picker="keywords"] .picker-option-name::before { content: "#"; opacity: .55; }

.picker-option[data-eligible="false"] { color: var( --ink-quiet ); }
.picker-option[data-eligible="false"]:hover { background: none; }
.picker-form .picker-option[data-eligible="false"] { cursor: default; }

.picker-option-note
{
	font-size: var( --text-sm );
	color: var( --ink-quiet );
	font-style: italic;
}

.picker-message-label textarea
{
	resize: vertical;
	min-height: 3.5rem;
}

.picker-empty
{
	margin: 0;
	font-size: var( --text-base );
	color: var( --ink-quiet );
}

.item-card .item-menu-button
{
	position: absolute;
	grid-row: 2;
	top: .5rem;
	right: .3rem;
	z-index: 2;
	width: var( --icon-button-size );
	height: var( --icon-button-size );
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var( --ink-quiet );
	transition: color .12s ease, background .12s ease;
}

.item-card .item-menu-button .icon { width: var( --icon-button-glyph ); height: var( --icon-button-glyph ); }

.item-menu-button:hover,
.item-menu-button:focus-visible,
.item-menu-button[aria-expanded="true"]
{
	color: var( --ink );
	background: var( --selection-background );
	outline: none;
}

[data-library-layout="list"] .item-card .item-menu-button
{
	grid-column: 2 / 3;
	grid-row: 1;
	top: 50%;
	right: 0;
	transform: translateY( -50% );
	background: var( --card-background );
	backdrop-filter: none;
}

[data-library-layout="list"] .item-card .card-title { padding-right: 1.7rem; }

[data-library-layout="grid"] .item-card .item-menu-button
{
	grid-row: 1;
	right: .4rem;
	background: color-mix( in srgb, var( --card-background ) 78%, transparent );
	backdrop-filter: blur( 4px );
	opacity: 0;
}

[data-library-layout="grid"] .item-card:hover .item-menu-button,
[data-library-layout="grid"] .item-card[data-selected="true"] .item-menu-button,
[data-library-layout="grid"] .item-menu-button:focus-visible,
[data-library-layout="grid"] .item-menu-button[aria-expanded="true"] { opacity: 1; }

@media ( hover: none )
{
	[data-library-layout="grid"] .item-card .item-menu-button { opacity: 1; }
}

.item-menu[hidden] { display: none; }

.item-menu
{
	position: fixed;
	z-index: 45;
	display: flex;
	flex-direction: column;
	width: 15rem;
	max-width: calc( 100vw - 1rem );
	max-height: min( 34rem, calc( 100vh - 1rem ) );
	border: 1px solid var( --rule );
	border-radius: .5rem;
	background: var( --card-background );
	box-shadow: 0 6px 24px rgba( 20, 22, 26, .18 ), var( --shadow-card );
	font-size: var( --text-base );
}

.item-menu[data-panel="keywords"],
.item-menu[data-panel="mention"] { width: 23rem; }

.item-menu-chrome
{
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .2rem .25rem 0;
}

.item-menu[data-panel="menu"] .item-menu-chrome,
.item-menu[data-panel="message"] .item-menu-chrome { display: none; }

.item-menu-chrome-button
{
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	border: 0;
	border-radius: .35rem;
	background: none;
	color: var( --ink-quiet );
	font: inherit;
	font-size: var( --text-sm );
	padding: .3rem .4rem;
	cursor: pointer;
}

.item-menu-chrome-button[hidden] { display: none; }
.item-menu-chrome-button:hover { color: var( --ink ); background: var( --selection-background ); }
.item-menu-chrome-button .icon { width: .85rem; height: .85rem; }

.item-menu-content
{
	min-height: 0;
	overflow-y: auto;
	padding: .35rem;
}

.item-menu-content:focus { outline: none; }

.item-menu-body { display: flex; flex-direction: column; gap: .05rem; }

.item-menu-subject
{
	margin: 0;
	padding: .3rem .5rem .4rem;
	border-bottom: 1px solid var( --rule );
	margin-bottom: .25rem;
	font-size: var( --text-sm );
	font-weight: 650;
	color: var( --ink-quiet );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.item-menu-form { margin: 0; display: contents; }

.item-menu-form[hidden] { display: none; }

.item-menu-entry
{
	display: flex;
	align-items: center;
	gap: .55rem;
	width: 100%;
	border: 0;
	border-radius: .35rem;
	background: none;
	color: var( --ink );
	font: inherit;
	text-align: left;
	padding: .45rem .5rem;
	cursor: pointer;
}

.item-menu-entry:hover,
.item-menu-entry:focus-visible
{
	background: var( --selection-background );
	outline: none;
}

.item-menu-entry .icon { width: 1rem; height: 1rem; flex: none; color: var( --ink-quiet ); }
.item-menu-entry-label { flex: 1; min-width: 0; }

.item-menu .scope-actions-menu
{
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: .05rem;
	margin: 0;
}

.item-menu .scope-actions-menu form:not( dialog * ) { display: contents; margin: 0; }

.item-menu .scope-actions-menu .control-pill:not( dialog * )
{
	--icon-size: 1rem;

	display: flex;
	justify-content: flex-start;
	gap: .55rem;
	width: 100%;
	min-height: 0;
	border: 0;
	border-radius: .35rem;
	background: none;
	color: var( --ink );
	font-size: inherit;
	text-align: left;
	padding: .45rem .5rem;
}

.item-menu .scope-actions-menu .control-pill:not( dialog * ):hover,
.item-menu .scope-actions-menu .control-pill:not( dialog * ):focus-visible,
.item-menu .scope-actions-menu .scope-panel-toggle:focus-visible + .control-pill
{
	background: var( --selection-background );
	outline: none;
}

.item-menu .scope-actions-menu .control-pill:not( dialog * ) > .icon { color: var( --ink-quiet ); flex: none; }

.item-menu .scope-actions-menu .control-pill:not( dialog * ):disabled,
.item-menu .scope-actions-menu .control-pill:not( dialog * )[aria-disabled="true"]
{
	opacity: .5;
	cursor: default;
	background: none;
}

.item-menu .scope-actions-menu > .notice,
.item-menu .scope-menu-body > .notice { margin: .25rem 0 0; white-space: normal; font-size: var( --text-xs ); }

.item-menu:has( dialog[open] ) { visibility: hidden; }
.item-menu dialog[open] { visibility: visible; }

.scope-tile-item .scope-menu-button
{
	position: absolute;
	top: 50%;
	right: .35rem;
	transform: translateY( -50% );
	z-index: 2;
	width: var( --icon-button-size );
	height: var( --icon-button-size );
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var( --ink-quiet );
	opacity: 0;
	transition: opacity .12s ease, color .12s ease, background .12s ease;
}

.scope-tile-item .scope-menu-button .icon { width: var( --icon-button-glyph ); height: var( --icon-button-glyph ); }

.scope-tile-item:hover .scope-menu-button,
.scope-tile-item .scope-menu-button:focus-visible,
.scope-tile-item .scope-menu-button[aria-expanded="true"] { opacity: 1; }

.scope-tile-item:has( .scope-menu-button ) .pin-button
{
	top: 50%;
	right: calc( .35rem + var( --icon-button-size ) );
	transform: translateY( -50% );
	width: var( --icon-button-size );
	height: var( --icon-button-size );
	display: grid;
	place-items: center;
	padding: 0;
	border-radius: 50%;
}

.scope-tile-item:has( .scope-menu-button ) > .scope-tile { padding-right: calc( .35rem + var( --icon-button-size ) + .3rem ); }
.scope-tile-item:has( .scope-menu-button ):has( .pin-button ) > .scope-tile { padding-right: calc( .35rem + var( --icon-button-size ) * 2 + .3rem ); }

[data-library-layout="icons"] .app-main .scope-grid:not( [data-tile-size] ) .scope-menu-button { display: none; }

@media ( hover: none )
{
	.scope-tile-item .scope-menu-button { opacity: 1; }
}

.item-menu-entry-note
{
	flex: none;
	font-size: var( --text-xs );
	color: var( --ink-quiet );
}

.item-menu-message,
.item-menu-empty
{
	margin: 0;
	padding: .5rem 2rem .5rem .5rem;
	font-size: var( --text-base );
	color: var( --ink-quiet );
}

.item-menu-copy-field
{
	display: block;
	box-sizing: border-box;
	width: calc( 100% - 1rem );
	margin: 0 .5rem .5rem;
	font-size: var( --text-sm );
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	overflow-y: auto;
	resize: none;
}

.item-menu .tool-area:not( dialog * )
{
	margin: 0;
	padding: .1rem .4rem .4rem;
	border: 0;
	background: none;
	box-shadow: none;
}

.item-menu .tool-area-header:not( dialog * ) { margin-bottom: .4rem; }
.item-menu .tool-area-summary:not( dialog * ) { font-size: var( --text-sm ); }
.item-menu .picker-options:not( dialog * ) { grid-template-columns: 1fr; max-height: 13rem; }

@media ( max-width: 40rem )
{
	.item-menu,
	.item-menu[data-panel="keywords"],
	.item-menu[data-panel="mention"]
	{
		left: 0 !important;
		right: 0;
		top: auto !important;
		bottom: 0;
		width: auto;
		max-width: none;
		max-height: 80vh;
		border-radius: .75rem .75rem 0 0;
		border-bottom: 0;
		padding-bottom: env( safe-area-inset-bottom );
	}

	.item-menu-entry { padding: .7rem .6rem; }
}

.fyi-cards
{
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( var( --card-track, 15.5rem ), 1fr ) );
	gap: var( --card-gap, .7rem );
	margin: 0;
	padding: 0;
	list-style: none;
}

.fyi-card
{
	display: flex;
	flex-direction: column;
	gap: .45rem;
	padding: .7rem .8rem;
	border: 1px solid var( --rule );
	border-radius: .55rem;
	background: var( --card-background );
		border-inline-start: 3px solid var( --accent );
}

.fyi-from
{
	margin: 0;
	font-size: var( --text-sm );
	color: var( --ink-quiet );
}

.fyi-message
{
	margin: 0;
	font-size: var( --text-base );
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.fyi-target
{
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-top: auto;
	font-size: var( --text-base );
	font-weight: 600;
	color: var( --ink );
}

.fyi-target:hover { text-decoration: underline; }

.fyi-target .icon { --icon-size: .95rem; flex: none; }

.fyi-target-name { overflow-wrap: anywhere; }

.fyi-dismiss { margin: 0; }
.fyi-dismiss .control-pill { font-size: var( --text-xs ); padding: .2rem .5rem; }

.fyi-overflow
{
	margin: .6rem 0 0;
	font-size: var( --text-sm );
	color: var( --ink-quiet );
}

.fyi-dismiss-all { margin: .6rem 0 0; }

[data-dragging="true"]
{
	opacity: .4;
}

.item-card[draggable="true"]
{
	-webkit-user-drag: element;
	-webkit-user-select: none;
	user-select: none;
}

.item-card[draggable="true"],
.item-card[draggable="true"] a,
.item-card[draggable="true"] img,
.scope-tile[draggable="true"],
.title-handle[draggable="true"],
.sidebar-row[draggable="true"],
.favorite-row
{
	-webkit-touch-callout: none;
}

.scope-tile[draggable="true"],
.sidebar-row[draggable="true"],
.favorite-row
{
	-webkit-user-select: none;
	user-select: none;
}

.item-card[draggable="true"] a,
.item-card[draggable="true"] img
{
	-webkit-user-drag: none;
}

.title-handle
{
	display: inline-flex;
	align-items: center;
	gap: .38em;
	margin: -.12em 0 -.12em -.38em;
	padding: .12em .38em;
	border-radius: .5rem;
	transition: background-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.title-handle-glyph
{
		--icon-size: .92em;
	color: var( --ink-quiet );
	transition: color .12s ease;
}

.title-handle-text
{
	min-width: 0;
	overflow-wrap: anywhere;
}

.title-handle[draggable="true"]
{
	cursor: grab;
	-webkit-user-drag: element;
	-webkit-user-select: none;
	user-select: none;
}

.title-handle[draggable="true"]:hover
{
	background: var( --accent-quiet );
	box-shadow: inset 0 0 0 1px color-mix( in srgb, var( --accent ) 40%, transparent ), var( --shadow-card );
}

.title-handle[draggable="true"]:hover > .title-handle-glyph
{
	color: var( --accent );
}

.title-handle[draggable="true"]:active
{
	cursor: grabbing;
}

@media ( prefers-reduced-motion: no-preference )
{
	.title-handle[draggable="true"]:hover
	{
		transform: translateY( -1px );
	}
}

[data-drop-state="into"]
{
	outline: 2px solid var( --accent );
	outline-offset: -2px;
	background: var( --accent-quiet );
}

[data-drop-state="refused"]
{
	outline: 2px dashed var( --warning );
	outline-offset: -2px;
	background: var( --warning-quiet );
	cursor: not-allowed;
}

li[data-spring="armed"] > .sidebar-row,
.sidebar-section[data-spring="armed"] > .sidebar-section-heading,
.app-footer .status-tray-toggle[data-spring="armed"],
.shelf-handle[data-spring="armed"]
{
	outline: 2px solid var( --accent );
	outline-offset: -2px;
	border-radius: .35rem;
}

@media ( prefers-reduced-motion: no-preference )
{
	li[data-spring="armed"] > .sidebar-row,
	.sidebar-section[data-spring="armed"] > .sidebar-section-heading,
	.app-footer .status-tray-toggle[data-spring="armed"],
	.shelf-handle[data-spring="armed"]
	{
		animation: spring-armed .3s steps( 1, end ) 2;
	}
}

@keyframes spring-armed
{
	0%   { outline-color: var( --accent ); }
	50%  { outline-color: transparent; }
	100% { outline-color: var( --accent ); }
}

.app-main[data-drop-state]
{
	outline-offset: -.5rem;
}

.mover-slot
{
	position: absolute;
	z-index: 2;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
	border-radius: 2px;
	background: var( --selection-accent );
}

[data-drop-received="true"]
{
	box-shadow: inset 0 0 0 2px var( --accent ), inset 0 0 0 100vmax var( --accent-quiet );
}

@media ( prefers-reduced-motion: no-preference )
{
	[data-drop-received="true"]
	{
		animation: drop-received .9s ease-out 1 forwards;
	}
}

@keyframes drop-received
{
	0%   { box-shadow: inset 0 0 0 2px var( --accent ), inset 0 0 0 100vmax var( --accent-quiet ); }
	40%  { box-shadow: inset 0 0 0 2px var( --accent ), inset 0 0 0 100vmax var( --accent-quiet ); }
	100% { box-shadow: inset 0 0 0 2px transparent, inset 0 0 0 100vmax transparent; }
}

.mover-dialog
{
	max-width: min( 36rem, calc( 100vw - 2rem ) );
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
}

.mover-dialog::backdrop
{
	background: color-mix( in srgb, var( --ink ) 38%, transparent );
}

.mover-dialog .interstitial
{
	margin: 0;
	box-shadow: var( --shadow-card );
}

.toast-body .notice-glyph
{
	margin-right: .35rem;
}

.toast-body .move-undo-form
{
	display: inline-block;
	margin: .35rem 0 0;
}

.mover-ghost
{
	position: fixed;
	top: -100vh;
	left: 0;
	pointer-events: none;
}

.mover-ghost .item-card
{
	list-style: none;
	opacity: 1;
}

.mover-ghost-count
{
	position: absolute;
	top: -.5rem;
	right: -.5rem;
	min-width: 1.6rem;
	padding: 0 .4rem;
	border-radius: 1rem;
	background: var( --accent );
	color: var( --page-background );
	font-size: var( --text-sm );
	font-weight: 600;
	line-height: 1.6rem;
	text-align: center;
}

.item-card[data-selected="true"],
.scope-tile[data-selected="true"]
{
	outline: 2px solid var( --selection-accent );
	outline-offset: -2px;
}

.selection-hint
{
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	color: var( --ink-quiet );
	font-size: var( --text-sm );
	text-overflow: ellipsis;
	white-space: nowrap;
}

.selection-hint[hidden]
{
	display: none;
}

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

.selection-bar
{
	position: sticky;
	top: calc( 100% - 1.2rem );
	z-index: 30;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	height: 0;
	margin: 0;
	overflow: visible;
	pointer-events: none;
}

.selection-bar-pill
{
	pointer-events: auto;
	flex: 0 1 auto;
	display: flex;
	gap: .6rem;
	align-items: center;
	max-width: 100%;
	padding: .45rem .7rem;
	border: 1px solid var( --rule );
	border-radius: 2rem;
		background: linear-gradient( var( --accent-quiet ), var( --accent-quiet ) ), var( --card-background );
	box-shadow: 0 .35rem 1.1rem rgb( 0 0 0 / .22 );
	font-size: var( --text-base );
}

.move-undo
{
	display: flex;
	gap: .75rem;
	align-items: center;
	transition: opacity .6s ease;
}

.move-undo[data-fading="true"]
{
	opacity: 0;
}

.move-undo-form
{
	margin: 0 0 0 auto;
}

.interstitial-body
{
	margin: 0;
	background: var( --page-background );
	color: var( --ink );
	font-family: var( --font-ui, system-ui, sans-serif );
}

.interstitial
{
	max-width: 34rem;
	margin: 3rem auto;
	padding: 1.5rem;
	border: 1px solid var( --rule );
	border-radius: 6px;
	background: var( --card-background );
}

.interstitial h1
{
	margin-top: 0;
	font-size: var( --text-lg );
}

.interstitial-detail
{
	line-height: 1.5;
}

.interstitial-reassurance
{
	color: var( --ink-quiet );
	font-size: var( --text-base );
}

.interstitial-form
{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: .75rem;
	align-items: center;
	margin-top: 1.25rem;
}

[data-person-page] h1
{
		display: inline-flex;
	align-items: center;
	gap: .5rem;
}

[data-person-page] h1 .person-chip
{
	width: 2rem;
	height: 2rem;
	flex: none;
	font-size: var( --text-sm );
	cursor: default;
}

.person-link
{
	color: inherit;
	text-decoration: none;
}

.person-link:hover .person-chip,
.person-link:focus-visible .person-chip
{
	outline: 2px solid var( --accent );
	outline-offset: 1px;
}

.person-link:hover
{
	text-decoration: underline;
}

.actions-section-heading { margin: 1.8rem 0 .6rem; font-size: var( --text-lg ); letter-spacing: -.01em; }

.action-gallery
{
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 18rem, 1fr ) );
	gap: .8rem;
	max-width: 60rem;
}

.action-card
{
	display: grid;
	gap: .5rem;
	padding: .9rem 1rem;
	border: 1px solid var( --rule );
	border-radius: 8px;
	background: var( --card-background );
}

.action-card header { display: grid; grid-template-columns: minmax( 0, 1fr ) auto; align-items: center; gap: .4rem .6rem; }
.action-card h3 { margin: 0; font-size: var( --text-md ); }
.action-card-badges { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; }
.action-card-badges:empty { display: none; }
.action-card p { margin: 0; font-size: var( --text-base ); line-height: 1.45; color: var( --ink-quiet ); }
.action-card .badge[data-status="planned"] { background: color-mix( in srgb, var( --ink-quiet ) 12%, transparent ); }
.action-card .badge[data-state="on"] { background: color-mix( in srgb, var( --create ) 18%, transparent ); color: var( --create ); }
.action-card .badge[data-status="built"] { background: color-mix( in srgb, var( --accent ) 14%, transparent ); color: var( --accent ); }
.action-card-controls { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.action-card-controls form { display: inline; margin: 0; }
.action-card-controls .action-card-note { margin-left: auto; display: inline-flex; align-items: center; }
.action-card-controls a.badge { text-decoration: none; color: inherit; }

.action-toggle-form { display: inline-flex; margin: 0 0 0 auto; }
.action-card header > .action-toggle-form,
.action-card header > .action-toggle { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; }
.folder-action-panel .tool-area-header > .action-toggle { margin-left: auto; }
.action-toggle { display: inline-flex; align-items: center; gap: .45rem; padding: .15rem .2rem; border: 0; background: none; color: var( --ink ); font: inherit; font-size: var( --text-sm ); cursor: pointer; white-space: nowrap; }
.action-toggle-track { position: relative; flex: none; width: 2.1rem; height: 1.2rem; border-radius: 999px; background: var( --danger ); transition: background-color .15s ease; }
.action-toggle-knob { position: absolute; top: .15rem; left: .15rem; width: .9rem; height: .9rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba( 0, 0, 0, .25 ); transition: transform .15s ease; }
.action-toggle[data-active="yes"] .action-toggle-track { background: var( --create ); }
.action-toggle[data-active="yes"] .action-toggle-knob { transform: translateX( .9rem ); }
.action-toggle[data-active="yes"] .action-toggle-word { color: var( --create ); }
.action-toggle[data-active="no"] .action-toggle-word { color: var( --danger ); }
.action-toggle[aria-disabled="true"] { cursor: default; opacity: .5; }
button.action-toggle:hover .action-toggle-track { filter: brightness( 1.08 ); }
button.action-toggle:focus-visible { outline: 2px solid var( --accent ); outline-offset: 2px; border-radius: 999px; }
@media ( prefers-reduced-motion: reduce ) { .action-toggle-track, .action-toggle-knob { transition: none; } }

.action-panel-dock { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; margin-top: .9rem; }

.action-panel-dialog { width: min( 44rem, calc( 100vw - 2rem ) ); max-height: calc( 100dvh - 3rem ); padding: 0; border: 0; border-radius: 10px; background: transparent; color: var( --ink ); overflow: visible; }
.action-panel-dialog::backdrop { background: rgba( 16, 18, 20, .45 ); }
.action-panel-dialog .folder-action-panel { margin: 0; max-height: calc( 100dvh - 3rem ); overflow-y: auto; box-sizing: border-box; overscroll-behavior: contain; }
.action-panel-dock .control-pill[data-action-dialog-close]:not( :only-child ) { margin-right: auto; }
.gallery-link .share-url-hint { flex-basis: 100%; margin: -.15rem 0 0; font-size: var( --text-xs ); color: var( --ink-quiet ); }
.gallery-link .share-url-hint[ data-copied="true" ] { color: var( --create ); }
.action-panels { position: relative; }
.action-gallery-planned { margin-bottom: .8rem; }
.folder-action-panel .tool-area-header { display: flex; align-items: center; gap: .5rem; }
.folder-action-panel h3 { margin: 1.2rem 0 .4rem; font-size: var( --text-md ); }
.details-form label.folder-action-switch,
.details-form label.folder-action-ceiling { display: flex; align-items: center; gap: .45rem; font-size: var( --text-base ); }
.details-form label.folder-action-switch { margin: .2rem 0 .6rem; }
.folder-action-counts { margin: .2rem 0 .8rem; padding-left: 1.3rem; font-size: var( --text-md ); }
.folder-action-counts li { margin: 0 0 .2rem; }
.folder-action-conflicts { display: grid; gap: .7rem; padding: .7rem .9rem; border: 1px solid var( --rule ); border-radius: 6px; }
.folder-action-conflicts legend { font-size: var( --text-base ); color: var( --ink-quiet ); padding: 0 .3rem; }
.folder-action-conflict { display: grid; gap: .25rem; font-size: var( --text-base ); }
.folder-action-conflict ul { margin: 0; padding-left: 1.2rem; color: var( --ink-quiet ); }
.folder-action-conflict label { display: flex; align-items: center; gap: .4rem; }
.details-form label.folder-action-ceiling { color: var( --danger ); }

.details-form fieldset.gallery-choice { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; margin: .3rem 0 .7rem; padding: 0; border: 0; min-width: 0; }
.details-form fieldset.gallery-choice legend { float: left; width: 100%; margin: 0 0 .3rem; padding: 0; font-size: var( --text-sm ); color: var( --ink-quiet ); }
.details-form fieldset.gallery-choice > label { display: flex; align-items: center; gap: .4rem; font-size: var( --text-base ); white-space: nowrap; }
.details-form fieldset.gallery-choice > p { flex-basis: 100%; margin: .1rem 0 0; font-size: var( --text-sm ); }

.details-form fieldset.folder-action-categories { display: grid; gap: .45rem; margin: .3rem 0 .7rem; padding: 0; border: 0; min-width: 0; }
.details-form fieldset.folder-action-categories legend { margin: 0 0 .3rem; padding: 0; font-size: var( --text-sm ); color: var( --ink-quiet ); }
.details-form fieldset.folder-action-categories > label { display: grid; grid-template-columns: auto 1fr; column-gap: .5rem; row-gap: .05rem; align-items: center; font-size: var( --text-base ); }
.details-form fieldset.folder-action-categories > label > .quiet { grid-column: 2; font-size: var( --text-sm ); }
.gallery-pane-group { margin: 0 0 .6rem; }
.gallery-pane-group > .action-row { padding-top: .2rem; }

.callout
{
	margin: 0 0 1rem;
	padding: .75rem 1rem .6rem;
	border: 1px solid color-mix( in srgb, var( --ink-quiet ) 35%, transparent );
	border-radius: .6rem;
	background: var( --accent-quiet );
}

.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }

.item-release-form { display: inline; margin: 0; }
.podcast-checklist .podcast-private-episodes li { margin: .15rem 0; }
.podcast-checklist .podcast-private-episodes .control-pill { margin-left: .4rem; padding-block: .05rem; font-size: var( --text-sm ); }
.folder-action-panel h4.gallery-links-heading { margin: .7rem 0 .35rem; font-size: var( --text-sm ); font-weight: 600; color: var( --ink-quiet ); }
.folder-action-panel .action-question-warning { margin: .2rem 0 .4rem; color: var( --danger ); }
.podcast-checklist-summary { margin: 0 0 .4rem; font-size: var( --text-sm ); font-weight: 600; color: var( --warning ); }
.podcast-checklist-summary[data-ok="yes"] { color: var( --create ); }
.podcast-checklist > .action-row.podcast-ready,
.import-vimeo-connection > .action-row.import-vimeo-state { display: flex; align-items: flex-start; gap: .6rem; }
.podcast-checklist > .action-row.podcast-ready > .action-row-text,
.import-vimeo-connection > .action-row.import-vimeo-state > .action-row-text { flex: 1; min-width: 0; }
.podcast-checklist > .action-row.podcast-ready > .control-pill { flex: none; align-self: center; }
.podcast-check-mark,
.import-vimeo-mark { flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: .1rem; border-radius: 50%; }
.podcast-check-mark .icon,
.import-vimeo-mark .icon { width: 1rem; height: 1rem; }
.podcast-ready[data-ok="yes"] .podcast-check-mark,
.import-vimeo-state[data-ok="yes"] .import-vimeo-mark { color: var( --create ); background: var( --create-quiet ); }
.podcast-ready[data-ok="yes"] .podcast-check-mark .icon { stroke-width: 2.2; }
.podcast-ready[data-ok="no"] .podcast-check-mark,
.import-vimeo-state[data-ok="no"] .import-vimeo-mark { color: var( --warning ); background: var( --warning-quiet ); }
.podcast-ready[data-ok="no"] .action-row-title { color: var( --warning ); }
.podcast-private-episodes { margin: .3rem 0 0; padding-left: 1.1rem; font-size: var( --text-sm ); }
.import-vimeo-settings:not(:has(input[name="source_kind"][value="folder"]:checked)):not(:has(input[name="source_kind"][value="showcase"]:checked)) [data-source-field="reference"],
.import-vimeo-settings:not(:has(input[name="source_kind"][value="videos"]:checked)) [data-source-field="videos"],
.import-vimeo-settings:has(input[name="source_kind"][value="showcase"]:checked) [data-source-field="tree"],
.import-vimeo-settings:has(input[name="source_kind"][value="videos"]:checked) [data-source-field="tree"] { display: none; }
.import-vimeo-carry [data-carry="automatic_captions"] { margin-left: 1.6rem; }
.import-vimeo-carry:has(input[name="carry_captions"]:not(:checked)) [data-carry="automatic_captions"] { opacity: .5; }
.import-vimeo-token { margin-top: .5rem; }
.import-vimeo-token-remove,
.import-vimeo-token-check { display: inline-block; margin: .2rem .4rem 0 0; }
.import-vimeo-check-facts { margin: .35rem 0 0; padding-left: 1.1rem; font-size: var( --text-sm ); }
.import-vimeo-check-facts [data-tone="warning"] { color: var( --warning ); }
.import-vimeo-preview-state { margin: .3rem 0; font-size: var( --text-sm ); }
.import-vimeo-preview-facts { margin: .2rem 0 .5rem; padding-left: 1.1rem; font-size: var( --text-sm ); }
.import-vimeo-preview-facts [data-tone="warning"] { color: var( --warning ); }
.import-vimeo-tile-note { font-size: var( --text-sm ); color: var( --ink-quiet ); }
.import-vimeo-tile-note[data-tone="warning"] { color: var( --warning ); }
.import-vimeo-watch:has(input[name="watch"]:not(:checked)) [data-watch-field="cycle"] { opacity: .5; }
.import-vimeo-panel .action-row-controls { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0; }
.curated-order-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0 0 .7rem; }
.curated-order-strip > .icon { align-self: center; }
.curated-order-strip > span { flex: 0 1 auto; min-width: 0; }
.curated-order-strip > a { white-space: nowrap; }
.gallery-links { list-style: none; margin: .2rem 0 .8rem; padding: 0; display: grid; gap: .4rem; }
.gallery-link { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.gallery-link-label { font-size: var( --text-base ); }
.gallery-link .share-url { flex: 1 1 18rem; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var( --text-sm ); padding: .35rem .5rem; text-overflow: ellipsis; cursor: pointer; }

details.folder-action-log-area { margin: 1.75rem 0 1.5rem; max-width: 62rem; }
.folder-action-log-area .folder-action-log-body { max-height: 26rem; overflow: auto; padding: 0 1rem .5rem; }
.folder-action-log-area .folder-action-log thead th { position: sticky; top: 0; background: var( --card-background ); z-index: 1; }

.folder-action-log { border-collapse: collapse; font-size: var( --text-base ); max-width: 60rem; width: 100%; }
.folder-action-log th, .folder-action-log td { text-align: left; padding: .35rem .6rem; border-bottom: 1px solid var( --rule ); vertical-align: top; }
.folder-action-log th { font-weight: 600; color: var( --ink-quiet ); font-size: var( --text-sm ); letter-spacing: .04em; text-transform: uppercase; }
.folder-action-log .badge[data-tone="create"] { color: var( --create ); background: color-mix( in srgb, var( --create ) 16%, transparent ); }
.folder-action-log .badge[data-tone="accent"] { color: var( --accent ); background: color-mix( in srgb, var( --accent ) 14%, transparent ); }
.folder-action-log .badge[data-tone="danger"] { color: var( --danger ); background: color-mix( in srgb, var( --danger ) 14%, transparent ); }

.control-pill .pill-count { margin-left: .35rem; }

.control-pill.in-use { background-color: var( --accent-quiet ); }

.control-pill .pill-changed
{
	display: inline-block; width: .55rem; height: .55rem; margin-left: .35rem; border-radius: 50%;
	background: var( --warning ); box-shadow: 0 0 0 2px var( --warning-quiet );
}

.action-card[data-changed] { border-color: var( --warning ); }
.action-card .badge[data-changed-badge] { background: var( --warning-quiet ); color: var( --warning ); }
.action-card .badge[data-origin-badge] { background: color-mix( in srgb, var( --ink-quiet ) 10%, transparent ); }

.folder-action-origin { margin: .3rem 0 .6rem; font-size: var( --text-base ); }
.folder-action-beneath { margin: .2rem 0 .8rem; font-size: var( --text-base ); }
.folder-action-beneath p { margin: 0 0 .3rem; }
.folder-action-beneath-list { margin: 0 0 .4rem; padding-left: 1.3rem; }
.folder-action-beneath-list li { margin: 0 0 .15rem; }
.folder-action-guard { display: grid; gap: .45rem; padding: .7rem .9rem; margin: .4rem 0 .8rem; border: 1px solid var( --warning ); border-radius: 6px; }
.folder-action-guard legend { font-size: var( --text-base ); padding: 0 .3rem; }
.details-form .folder-action-guard label { display: flex; align-items: center; gap: .45rem; font-size: var( --text-base ); }
.folder-action-guard p { margin: 0; }

.keyword-list
{
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: .5rem 0 0;
	padding: 0;
	list-style: none;
}

.scope-keywords { margin: 0 0 1rem; }

.keyword-chip
{
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .14rem .55rem;
	border: 1px solid var( --rule );
	border-radius: 999px;
	font-size: var( --text-base );
	line-height: 1.3;
	color: inherit;
	text-decoration: none;
		background: transparent;
}

a.keyword-chip:hover { border-color: var( --ink-quiet ); }
a.keyword-chip:focus-visible { outline: 2px solid var( --accent ); outline-offset: 2px; }

.keyword-chip::before { content: "#"; opacity: .55; }

.keyword-editor
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
		padding: .3rem .4rem;
	border: 1px solid var( --rule );
		border-radius: .35rem;
	background: var( --card-background );
	min-height: var( --control-height );
	cursor: text;
}

.keyword-editor:focus-within { outline: 2px solid var( --accent ); outline-offset: 1px; }

.keyword-editor .keyword-chip { padding-right: .2rem; }

.keyword-editor .keyword-remove
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
		width: calc( var( --icon-button-size ) * .8 );
	height: calc( var( --icon-button-size ) * .8 );
	margin-left: .1rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: var( --icon-button-glyph );
	line-height: 1;
	color: var( --ink-quiet );
	background: transparent;
	cursor: pointer;
}

.keyword-editor .keyword-remove:hover,
.keyword-editor .keyword-remove:focus-visible { color: inherit; background: var( --accent-quiet ); outline: none; }

.keyword-editor input.keyword-entry
{
	flex: 1 1 8rem;
	min-width: 6rem;
	min-height: 0;
	margin: 0;
		padding: 0 .15rem;
	border: 0;
	font: inherit;
	font-size: var( --text-md );
	background: transparent;
}

.keyword-editor .keyword-entry:focus { outline: none; }

.details-form .keyword-editor + input[ data-keywords-field ] { display: none; }

@media ( pointer: coarse )
{
	input[ type="text" ],
	input[ type="search" ],
	input[ type="email" ],
	input[ type="url" ],
	input[ type="tel" ],
	input[ type="number" ],
	input[ type="password" ],
	input[ type="date" ],
	input[ type="datetime-local" ],
	select,
	textarea
	{
		font-size: max( 16px, 1em );
	}

		.sidebar-search input,
	.sidebar-standin select,
	.toolbar-controls select,
	.picker-search input,
	.grid-controls .grid-slideshow input[ type="number" ],
	.details-form input[ type="text" ],
	.details-form input[ type="url" ],
	.details-form input[ type="email" ],
	.details-form input[ type="number" ],
	.keyword-editor input.keyword-entry
	{
		font-size: max( 16px, 1em );
	}
}

:root
{
	--legend-red: #c9372c;
	--legend-orange: #c8640c;
	--legend-yellow: #b08a00;
	--legend-green: #2e8540;
	--legend-teal: #0f8289;
	--legend-blue: #2a6fdb;
	--legend-purple: #7b4fc4;
	--legend-grey: #737a86;
}

@media ( prefers-color-scheme: dark )
{
	:root
	{
		--legend-red: #f07167;
		--legend-orange: #f09a4a;
		--legend-yellow: #e2c044;
		--legend-green: #5cc27a;
		--legend-teal: #4cc3c9;
		--legend-blue: #6ea8ff;
		--legend-purple: #b592f0;
		--legend-grey: #9aa1ac;
	}
}

[data-legend-color="red"], [data-legend-state-color="red"] { --legend-color: var( --legend-red ); }
[data-legend-color="orange"], [data-legend-state-color="orange"] { --legend-color: var( --legend-orange ); }
[data-legend-color="yellow"], [data-legend-state-color="yellow"] { --legend-color: var( --legend-yellow ); }
[data-legend-color="green"], [data-legend-state-color="green"] { --legend-color: var( --legend-green ); }
[data-legend-color="teal"], [data-legend-state-color="teal"] { --legend-color: var( --legend-teal ); }
[data-legend-color="blue"], [data-legend-state-color="blue"] { --legend-color: var( --legend-blue ); }
[data-legend-color="purple"], [data-legend-state-color="purple"] { --legend-color: var( --legend-purple ); }
[data-legend-color="grey"], [data-legend-state-color="grey"] { --legend-color: var( --legend-grey ); }

.legend-chip
{
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	max-width: 100%;
	font-size: var( --text-xs );
	line-height: 1.3;
	color: var( --ink-quiet );
	white-space: nowrap;
}

.legend-dot
{
	flex: none;
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	background: var( --legend-color, transparent );
}

.legend-chip:not( [data-legend-color] ) .legend-dot { display: none; }

.legend-word { overflow: hidden; text-overflow: ellipsis; }

.legend-chip.legend-state
{
	padding: .18rem .5rem .18rem .4rem;
	border-radius: 3px;
	color: var( --ink );
	background: color-mix( in srgb, var( --legend-color, var( --ink-quiet ) ) 16%, transparent );
	box-shadow: inset 0 0 0 1px color-mix( in srgb, var( --legend-color, var( --ink-quiet ) ) 45%, transparent );
}

.card-legend
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem .55rem;
	margin: .3rem 0 0;
	min-width: 0;
}

.legend-more { font-size: var( --text-2xs ); color: var( --ink-quiet ); }

body:not( [data-library-layout="list"] ) .card-footer .legend-chip:not( .legend-state ),
body:not( [data-library-layout="list"] ) .card-footer .legend-more
{
	padding: .18rem .5rem .18rem .4rem;
	border-radius: 3px;
	background: color-mix( in srgb, var( --ink-quiet ) 9%, transparent );
	color: var( --ink );
	font-size: var( --text-xs );
	line-height: 1.3;
	white-space: nowrap;
}

body:not( [data-library-layout="list"] ) .card-footer .legend-more { padding-left: .5rem; color: var( --ink-quiet ); }

.item-card[data-legend-state-color]::before,
.scope-tile[data-legend-state-color]::before
{
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 0;
	width: .28rem;
	border-radius: .6rem 0 0 .6rem;
	background: var( --legend-color );
	pointer-events: none;
}

.scope-tile[data-legend-state-color] { position: relative; }

[data-library-layout="list"] .item-card .card-legend,
[data-library-layout="grid"] .item-card .card-legend
{
	display: none;
}

[data-library-layout="list"] .item-card[data-legend-state-color]::before
{
	width: .22rem;
	border-radius: 0;
}

[data-library-layout="list"] .meta-legend-state { min-width: 0; overflow: hidden; }

@media ( max-width: 62rem )
{
	[data-library-layout="list"] .meta-legend-state,
	[data-library-layout="list"] .head-state
	{
		display: none;
	}
}

.ladder-rungs
{
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.ladder-rung-form { margin: 0; }

.ladder-rung
{
	padding: .12rem .18rem;
	border: 1px solid transparent;
	border-radius: 5px;
	background: none;
	font: inherit;
	cursor: pointer;
}

.ladder-rung:hover { border-color: var( --rule ); }
.ladder-rung[aria-pressed="true"] { border-color: var( --ink ); }
.ladder-rung:focus-visible { outline: 2px solid var( --accent ); outline-offset: 2px; }

.item-menu-state
{
	padding: .45rem .7rem .55rem;
	border-top: 1px solid var( --rule );
}

.item-menu-state-label
{
	margin: 0 0 .35rem;
	font-size: var( --text-2xs );
	color: var( --ink-quiet );
}

.mark-label
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}

.mark-palette-edit
{
	display: inline-flex;
	padding: .15rem;
	border-radius: .25rem;
	color: var( --ink-quiet );
}

.mark-palette-edit:hover { color: var( --ink ); background: var( --selection-background ); }
.mark-palette-edit:focus-visible { outline: 2px solid var( --accent ); outline-offset: 1px; }
.mark-palette-edit .icon { width: .9rem; height: .9rem; }

.legend-section { margin: 1.6rem 0 0; max-width: 52rem; }

.legend-section-heading
{
	margin: 0 0 .5rem;
	font-size: var( --text-md );
}

.legend-rows,
.legend-key
{
	margin: .6rem 0 .9rem;
	padding: 0;
	list-style: none;
}

.legend-key
{
	display: flex;
	flex-wrap: wrap;
	gap: .45rem .9rem;
}

.legend-key-link { text-decoration: none; }
.legend-key-link:hover .legend-word { text-decoration: underline; }

.legend-row
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem .7rem;
	padding: .4rem 0;
	border-bottom: 1px solid var( --rule );
}

.legend-row > .legend-sample { flex: 0 0 11rem; min-width: 0; }

.legend-row .legend-carriers { flex: 0 0 6.5rem; font-size: var( --text-xs ); }
.legend-row .legend-word-field { flex: 1 1 10rem; min-width: 0; }
.legend-row .legend-position-field { flex: none; width: 3.6rem; }
.legend-row .legend-emoji-field { flex: none; width: 4.2rem; text-align: center; }
.legend-row select { flex: none; }

.legend-template-preview
{
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .45rem;
}

.legend-remove-ladder { margin-top: 1.2rem; }

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

.card-marks
{
	position: absolute;
	z-index: 2;
	top: .45rem;
	left: .45rem;
	display: inline-flex;
	gap: .15rem;
	padding: .1rem .3rem;
	border-radius: 999px;
	background: color-mix( in srgb, var( --card-background ) 86%, transparent );
	font-size: var( --text-md );
	line-height: 1.2;
	pointer-events: auto;
}

.card-mark-more { font-size: var( --text-2xs ); color: var( --ink-quiet ); align-self: center; }

[data-library-layout="list"] .card-marks
{
	top: .05rem;
	right: auto;
	left: .25rem;
	gap: 0;
	padding: 0 .15rem;
	font-size: var( --text-2xs );
}

[data-library-layout="grid"] .card-marks { font-size: var( --text-sm ); top: .25rem; left: .25rem; }

.mark-palette
{
	display: flex;
	flex-wrap: wrap;
	gap: .2rem;
}

.mark-form { margin: 0; }

.mark-button
{
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: none;
	font-size: var( --text-lg );
	line-height: 1;
	cursor: pointer;
}

.mark-button:hover { border-color: var( --rule ); }
.mark-button[aria-pressed="true"] { border-color: var( --ink ); background: var( --selection-background ); }
.mark-button:focus-visible { outline: 2px solid var( --accent ); outline-offset: 2px; }

[data-library-layout="icons"] .app-main
{
	--icon-cell-picture: var( --icon-layout-size );
}

[data-library-layout="icons"] .item-grid,
[data-library-layout="icons"] .app-main .scope-grid:not( [data-tile-size] )
{
	grid-template-columns: repeat( auto-fill, minmax( calc( var( --icon-cell-picture ) + 3.5rem ), 1fr ) );
	gap: .35rem .25rem;
	align-items: start;
}

[data-library-layout="icons"] .item-card
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	padding: .45rem .3rem .4rem;
	border: 0;
	border-radius: .5rem;
	background: none;
	box-shadow: none;
		overflow: visible;
}

[data-library-layout="icons"] .item-card:hover,
[data-library-layout="icons"] .item-card[data-selected="true"]
{
	background: var( --selection-background );
}

[data-library-layout="icons"] .item-card .card-preview
{
	flex: 0 0 auto;
	width: var( --icon-cell-picture );
	height: var( --icon-cell-picture );
	aspect-ratio: 1;
	border: 1px solid var( --rule );
	border-radius: .35rem;
	background: var( --card-background );
}

[data-library-layout="icons"] .item-card .card-preview[data-key-crop] img
{
	object-position: center;
	transform: none;
}

[data-library-layout="icons"] .item-card .card-type
{
	--icon-size: max( .7rem, calc( var( --icon-cell-picture ) * .16 ) );
	top: auto;
	right: auto;
	left: -1px;
	bottom: -1px;
	gap: 0;
	padding: .1rem;
	border-radius: 0 .3rem 0 .3rem;
	background: var( --card-background );
	font-size: 0;
	letter-spacing: 0;
	backdrop-filter: none;
}

[data-library-layout="icons"] .item-card .card-type-suffix,
[data-library-layout="icons"] .item-card .card-type-fact,
[data-library-layout="icons"] .item-card[data-kind="image"] .card-preview:has( img ) .card-type
{
	display: none;
}

[data-library-layout="icons"] .item-card .card-preview:not( :has( img ) ) .card-type
{
	--icon-size: calc( var( --icon-cell-picture ) * .48 );
	inset: 0 0 auto 0;
	height: 68%;
	justify-content: center;
	padding: 0;
	border-radius: 0;
	background: none;
}

[data-library-layout="icons"] .item-card .card-preview .no-preview
{
	position: absolute;
	inset: auto 0 .15rem 0;
	width: auto;
	height: auto;
	padding: 0 .1rem;
	font-size: 0;
}

[data-library-layout="icons"] .item-card .no-preview-noun { display: none; }

[data-library-layout="icons"] .item-card .no-preview-extension
{
	font-size: var( --text-2xs );
	letter-spacing: .02em;
	color: var( --ink-quiet );
}

[data-library-layout="icons"] .item-card .card-progress
{
	inset: auto -.2rem -.2rem auto;
	width: .7rem;
	height: .7rem;
	padding: 0;
	border-radius: 50%;
	border: 2px solid var( --page-background );
	font-size: 0;
	box-shadow: none;
}

[data-library-layout="icons"] .item-card .card-body
{
	display: block;
	width: 100%;
	min-width: 0;
	padding: 0;
	text-align: center;
}

[data-library-layout="icons"] .item-card .card-title
{
		padding: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: var( --text-xs );
	font-weight: 500;
	line-height: 1.25;
	overflow-wrap: anywhere;
	white-space: normal;
}

[data-library-layout="icons"] .item-card .card-context,
[data-library-layout="icons"] .item-card .card-person,
[data-library-layout="icons"] .item-card .card-legend,
[data-library-layout="icons"] .item-card .card-meta,
[data-library-layout="icons"] .item-card .card-footer,
[data-library-layout="icons"] .item-card .indicators,
[data-library-layout="icons"] .item-card .pin-button,
[data-library-layout="icons"] .item-card .card-marks,
[data-library-layout="icons"] .item-list-head
{
	display: none;
}

[data-library-layout="icons"] .item-card[data-legend-state-color]::before
{
	top: .45rem;
	bottom: auto;
	left: calc( 50% - var( --icon-cell-picture ) / 2 - .45rem );
	width: .22rem;
	height: var( --icon-cell-picture );
	border-radius: .2rem;
}

[data-library-layout="icons"] .item-card[data-state="removed"]
{
	border: 0;
}

[data-library-layout="icons"] .item-card .item-menu-button
{
	grid-row: auto;
	top: .15rem;
	right: .15rem;
	opacity: 0;
}

[data-library-layout="icons"] .item-card:hover .item-menu-button,
[data-library-layout="icons"] .item-card[data-selected="true"] .item-menu-button,
[data-library-layout="icons"] .item-menu-button:focus-visible,
[data-library-layout="icons"] .item-menu-button[aria-expanded="true"] { opacity: 1; }

@media ( hover: none )
{
	[data-library-layout="icons"] .item-card .item-menu-button { opacity: 1; }
}

[data-library-layout="icons"] .app-main .scope-grid:not( [data-tile-size] ) .scope-tile
{
	flex-direction: column;
	gap: .3rem;
	padding: .45rem .3rem .4rem;
	border-color: transparent;
	background: none;
	text-align: center;
}

[data-library-layout="icons"] .app-main .scope-grid:not( [data-tile-size] ) .scope-tile:hover
{
	background: var( --selection-background );
}

[data-library-layout="icons"] .app-main .scope-grid:not( [data-tile-size] ) .tile-glyph
{
	--icon-size: calc( var( --icon-cell-picture ) * .76 );
	justify-content: center;
	width: var( --icon-cell-picture );
	height: var( --icon-cell-picture );
}

[data-library-layout="icons"] .app-main .scope-grid:not( [data-tile-size] ) .tile-text
{
	width: 100%;
}

[data-library-layout="icons"] .app-main .scope-grid:not( [data-tile-size] ) .tile-name
{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
		overflow: hidden;
	font-size: var( --text-xs );
	font-weight: 500;
	line-height: 1.25;
	overflow-wrap: anywhere;
	white-space: normal;
}

[data-library-layout="icons"] .app-main .scope-grid:not( [data-tile-size] ) .tile-meta
{
	display: block;
	margin-top: .1rem;
	font-size: var( --text-2xs );
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

[data-library-layout="icons"] .app-main .scope-grid:not( [data-tile-size] ) .tile-meta:not( :has( .tile-place ) ),
[data-library-layout="icons"] .app-main .scope-grid:not( [data-tile-size] ) .tile-meta-rest,
[data-library-layout="icons"] .app-main .scope-grid:not( [data-tile-size] ) .pin-button
{
	display: none;
}

[data-library-layout="icons"] .app-main .scope-grid:not( [data-tile-size] ) .scope-tile[data-legend-state-color]::before
{
	top: .45rem;
	bottom: auto;
	left: calc( 50% - var( --icon-cell-picture ) / 2 - .45rem );
	width: .22rem;
	height: var( --icon-cell-picture );
	border-radius: .2rem;
}

.people-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 .75rem; }
.people-toolbar > .picker-tools { flex: 1 1 32rem; }
.people-tools .picker-search { display: flex; align-items: center; gap: .5rem; font-size: var( --text-base ); }
.people-accounts > h2 { margin-bottom: .75rem; }

.details-form label.details-checkbox { display: flex; align-items: center; gap: .5rem; justify-self: start; }
.details-form label.details-checkbox > input { width: auto; margin: 0; flex: none; }

.user-panel { display: grid; }
.user-panel-section { padding-block: 1rem; border-top: 1px solid var( --rule ); }
.user-panel-section:first-child { padding-top: 0; border-top: 0; }
.user-panel-section > h3 { margin: 0 0 .6rem; font-size: var( --text-md ); }
.user-panel-section > .details-description { margin: 0 0 .6rem; }
.user-panel-section > :last-child { margin-bottom: 0; }
.user-panel + .scope-panel-dock
{
	position: sticky;
	bottom: -1.15rem;
	margin: 0 0 -1.15rem;
	padding: .75rem 0 1.15rem;
	border-top: 1px solid var( --rule );
	background: var( --card-background );
}

.user-panel-fields { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: .75rem 1rem; }
.user-panel-fields > :not( label ),
.user-panel-fields > label.details-checkbox { grid-column: 1 / -1; }
.user-panel-fields select { width: 100%; }

.user-panel-fields input[ type="email" ] { padding: .3rem .55rem; font: inherit; font-size: var( --text-md ); }

@media ( max-width: 40rem )
{
	.user-panel-fields { grid-template-columns: minmax( 0, 1fr ); }
}

.user-panel-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.user-panel-actions > form { margin: 0; }

.user-grant-list { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; }
.user-grant-list > li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: var( --control-height ); padding-block: .2rem; border-bottom: 1px solid var( --rule ); }
.user-grant-list > li:first-child { border-top: 1px solid var( --rule ); }
.user-grant-revoke { margin: 0; flex: none; }
.user-grant-add-heading { margin: 0 0 .5rem; font-size: var( --text-base ); font-weight: 600; }
.user-grant-form { display: grid; grid-template-columns: minmax( 0, 2fr ) minmax( 0, 3fr ) auto; align-items: end; gap: .5rem .75rem; margin: 0 0 .6rem; }
.user-grant-form > label { display: grid; gap: .25rem; min-width: 0; font-size: var( --text-base ); }
.user-grant-form select { width: 100%; }

@media ( max-width: 40rem )
{
	.user-grant-form { grid-template-columns: minmax( 0, 1fr ); justify-items: stretch; }
	.user-grant-form > .control-pill { justify-self: end; }
}
.user-removal-form { display: grid; gap: .6rem; justify-items: start; }

.service-region:empty { display: none; }

body.app-shell-body:has( > .service-region:not( :empty ) ) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
body.app-shell-body:has( > .service-region:not( :empty ) ) > .app-shell { flex: 1 1 auto; min-height: 0; height: auto; }

.service-region { position: relative; z-index: 30; }

.service-strip,
.service-announcement
{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem .9rem;
	padding: .55rem 1rem;
	padding-top: max( .55rem, env( safe-area-inset-top, 0px ) );
	border-bottom: 1px solid var( --rule );
	font-size: var( --text-base );
}

.service-strip p,
.service-announcement p { margin: 0; }

.service-strip[data-tone="warning"],
.service-announcement[data-level="warning"] { background: var( --warning-quiet ); color: var( --ink ); }

.service-strip[data-tone="critical"] { background: var( --danger-quiet ); color: var( --ink ); }

.service-announcement[data-level="info"] { background: var( --accent-quiet ); color: var( --ink ); }

.service-strip-headline strong { color: var( --warning ); }
.service-strip[data-tone="critical"] .service-strip-headline strong { color: var( --danger ); }
.service-strip-back { margin-left: .5rem; color: var( --ink-quiet ); }
.service-strip-link { margin-left: .5rem; }
.service-strip-message,
.service-announcement-message { flex: 1 1 20rem; min-width: 0; }
.service-announcement-message > :first-child { margin-top: 0; }
.service-announcement-message > :last-child { margin-bottom: 0; }

.service-dismiss { margin: 0 0 0 auto; }

.service-dismiss-button
{
	min-width: 2rem;
	min-height: 2rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var( --text-lg );
	line-height: 1;
	cursor: pointer;
}

.service-dismiss-button:hover,
.service-dismiss-button:focus-visible { background: color-mix( in srgb, var( --ink ) 10%, transparent ); }

.service-critical-pill { display: none; }

.service-critical[data-dismissed="true"]
{
	display: flex;
	justify-content: flex-end;
	padding: .25rem 1rem;
	padding-top: max( .25rem, env( safe-area-inset-top, 0px ) );
	border-bottom: 1px solid var( --rule );
	background: var( --danger-quiet );
}

.service-critical[data-dismissed="true"] .service-critical-pill
{
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .15rem .8rem;
	border: 1px solid var( --danger );
	border-radius: 999px;
	background: var( --card-background );
	color: var( --danger );
	font: inherit;
	font-size: var( --text-sm );
	cursor: pointer;
}

dialog.service-critical-dialog,
dialog.service-reload-dialog
{
	width: min( 36rem, calc( 100vw - 2rem ) );
	padding: 1.25rem 1.4rem;
	border: 1px solid var( --rule );
	border-top: 4px solid var( --danger );
	border-radius: 10px;
	background: var( --card-background );
	color: var( --ink );
}

dialog.service-reload-dialog { border-top-color: var( --accent ); }

dialog.service-critical-dialog h2,
dialog.service-reload-dialog h2 { margin: 0 0 .6rem; font-size: var( --text-lg ); }

dialog.service-critical-dialog .service-dismiss,
dialog.service-critical-dialog .service-critical-close { display: flex; justify-content: flex-end; margin: 1rem 0 0; }

dialog.service-critical-dialog::backdrop,
dialog.service-reload-dialog::backdrop { background: rgba( 16, 18, 20, .55 ); }

.badge[data-tone="danger"] { background: var( --danger-quiet ); color: var( --danger ); }

.service-state-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin: 0; font-size: var( --text-md ); }
.service-current { display: grid; gap: .6rem; max-width: 46rem; margin-bottom: 1.2rem; }
.service-current p { margin: 0; }
.service-preview { border: 1px solid var( --rule ); border-radius: 8px; }
.details-form fieldset.service-choice { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.details-form fieldset.service-choice legend { float: left; width: 100%; margin: 0 0 .3rem; padding: 0; font-size: var( --text-sm ); color: var( --ink-quiet ); }
.details-form fieldset.service-choice > label { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.details-form fieldset.service-choice > p { flex-basis: 100%; margin: .1rem 0 0; font-size: var( --text-sm ); }
.details-form input[ type="datetime-local" ] { justify-self: start; padding: .3rem .5rem; font: inherit; }
.details-form label > .quiet { font-size: var( --text-sm ); }
.service-reopen { margin: 0 0 0 auto; }

.item-card .card-waiting
{
	display: grid;
	place-items: center;
	height: 100%;
	color: var( --ink-quiet );
	font-size: var( --text-sm );
	letter-spacing: .02em;
}

.no-preview.card-link
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .3em;
	width: 100%;
	height: 100%;
	padding: 0 .8em;
}

.card-link-glyph
{
	font-size: 2.1em;
	line-height: 1;
	color: var( --ink-quiet );
}

.card-link-site
{
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var( --ink );
	font-size: var( --text-base );
	font-weight: 650;
}

.card-type-suffix[data-kind="site"]
{
	text-transform: none;
	letter-spacing: 0;
}

@supports selector( :has( * ) )
{
	.details-form[data-scope-new-item] .new-item-address
	{
		display: none;
	}

	.details-form[data-scope-new-item]:has( select[name="family"] option[value="link"]:checked ) .new-item-address
	{
		display: grid;
	}
}

.details-form .new-item-address .field-hint
{
	color: var( --ink-quiet );
	font-size: var( --text-sm );
}

.item-card[data-drop-state="into"]
{
	outline: 2px solid var( --accent );
	outline-offset: 2px;
	border-radius: 8px;
}

.upload-replace-dialog
{
	max-width: min( 32rem, calc( 100vw - 2rem ) );
	padding: 1.25rem 1.5rem;
	border: 1px solid var( --rule );
	border-radius: 10px;
	background: var( --card-background );
	color: var( --ink );
}

.upload-replace-dialog::backdrop { background: rgba( 16, 18, 20, .45 ); }
.upload-replace-question { margin: 0 0 .5rem; font-size: var( --text-md ); font-weight: 600; }
.upload-replace-dialog .quiet { margin: 0 0 1rem; }
.upload-replace-actions { display: flex; justify-content: flex-end; gap: .5rem; margin: 0; }

.row-renew
{
	margin-left: .35rem;
	font-size: var( --text-xs );
	color: var( --accent );
	white-space: nowrap;
}

.notice:has( > .notice-action ) { flex-wrap: wrap; align-items: center; }
.notice > .notice-text { flex: 1 1 16rem; min-width: 0; color: var( --ink ); }
.notice > .notice-action { flex: 0 0 auto; margin-left: auto; }
.notice > .notice-action form { margin: 0; }

.details-form,
.details-form label { grid-template-columns: minmax( 0, 1fr ); }

.details-form select,
.details-form input,
.details-form textarea,
dialog.scope-panel select,
.action-panel-dialog select { max-width: 100%; min-width: 0; box-sizing: border-box; }

dialog.scope-panel > .tool-area,
.action-panel-dialog .folder-action-panel { overflow-x: hidden; }

.tool-area-subheading
{
	margin: .9rem 0 .35rem;
	font-size: var( --text-sm );
	font-weight: 600;
	color: var( --ink );
}

.tool-area-subheading + .renditions { margin-top: 0; }

.row-attention
{
	margin-left: .35rem;
	min-width: 1.25em;
	padding: 0 .4em;
	border-radius: 1em;
	background: var( --warning );
	color: var( --page-background );
	font-size: var( --text-xs );
	text-align: center;
	white-space: nowrap;
}

.membership-form > [data-member-picker] { margin-bottom: 1rem; }

.people-access-table .person-identity { white-space: nowrap; }

.people-access-also { display: block; color: var( --ink-quiet, inherit ); font-size: var( --text-sm ); }

.picker-invite
{
	display: grid;
	gap: .6rem;
	max-width: 34rem;
	margin-top: .75rem;
	padding: .9rem 1rem 1rem;
	border: 1px solid var( --rule );
	border-radius: 0.5rem;
}
.picker-invite[hidden] { display: none; }
.picker-invite > .control-pill { justify-self: start; }
.picker-invite .details-description { margin: 0; }
.picker-invite-lead { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.invitation-form { display: contents; }

.search-query-line { display: flex; gap: .5rem; align-items: center; margin: 0 0 .75rem; }
.search-query-field { flex: 1 1 auto; min-width: 0; font: inherit; font-size: var( --text-md ); padding: .35rem .75rem; border: 1px solid var( --rule ); border-radius: 999px; background: var( --card-background ); color: var( --ink ); min-height: var( --control-height ); }
.search-query-field:focus-visible { outline: 2px solid var( --accent ); outline-offset: 2px; }
.search-chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.search-chip { gap: .45rem; padding-right: .35rem; cursor: default; }
.search-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border-radius: 999px; color: var( --ink-quiet ); text-decoration: none; }
.search-chip-remove:hover, .search-chip-remove:focus-visible { background: var( --rule ); color: var( --ink ); }

.search-refine-row { display: grid; grid-template-columns: 5.2rem minmax( 0, 1fr ); align-items: baseline; column-gap: .6rem; margin: 0 0 .6rem; }
.search-refine-label { font-size: var( --text-sm ); color: var( --ink-quiet ); }
@media ( max-width: 40rem ) { .search-refine-row { grid-template-columns: 1fr; row-gap: .25rem; } }
.search-facets { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; position: relative; }
.search-facet { position: relative; }
.search-facet > summary { list-style: none; }
.search-facet > summary::-webkit-details-marker { display: none; }
.search-facet > summary::after { content: " ▾"; opacity: .6; }
.search-facet[open] > summary { border-color: var( --ink-quiet ); }
.search-facet-values { position: absolute; z-index: 5; top: calc( 100% + .3rem ); left: 0; min-width: 14rem; max-width: 24rem; max-height: 20rem; overflow: auto; margin: 0; padding: .35rem; list-style: none; border: 1px solid var( --rule ); border-radius: .6rem; background: var( --card-background ); box-shadow: 0 .5rem 1.5rem rgba( 0, 0, 0, .12 ); }
.search-facet-value { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem .5rem; border-radius: .4rem; color: var( --ink ); text-decoration: none; font-size: var( --text-sm ); }
.search-facet-value:hover, .search-facet-value:focus-visible { background: var( --rule ); }
.search-facet-value .count { color: var( --ink-quiet ); font-variant-numeric: tabular-nums; }
.search-facets-note { font-size: var( --text-xs ); color: var( --ink-quiet ); }

.search-group-switch { margin-bottom: 1rem; }
.search-group-switch .view-switch { justify-self: start; }
.view-heading-pin { align-self: center; margin-left: .35rem; }
.view-heading-pin .pin-button { font-size: var( --text-lg ); line-height: 1; opacity: 1; transform: translateY( .08em ); }
.search-group > h3 { font-size: var( --text-md ); margin: 1rem 0 .5rem; }
.search-group > h3 .count { color: var( --ink-quiet ); font-weight: normal; margin-left: .35rem; }
.card-match { margin: .15rem 0 .35rem; font-size: var( --text-xs ); color: var( --ink-quiet ); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-match-where { font-variant: small-caps; margin-right: .3rem; }
.card-match mark { background: color-mix( in srgb, currentColor 18%, transparent ); color: inherit; border-radius: .2rem; padding: 0 .1rem; }

.sidebar-search .search-open
{
	position: absolute;
	top: 50%;
	right: calc( .9rem + .3rem );
	transform: translateY( calc( -50% + 2px ) ); 
	margin-top: -.275rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc( var( --icon-button-size ) * .8 );
	height: calc( var( --icon-button-size ) * .8 );
	border-radius: .3rem;
	color: var( --ink-quiet );
	text-decoration: none;
}
.sidebar-search .search-open:hover, .sidebar-search .search-open:focus-visible { color: var( --ink ); background: var( --rule ); }
.sidebar-search input:not( :placeholder-shown ) ~ .search-open { display: none; }

.scope-tile-item .tile-pivot { position: absolute; right: .5rem; bottom: .5rem; z-index: 2; font-size: var( --text-xs ); min-height: 1.6rem; padding: .1rem .55rem; }
.scope-tile-item:has( .tile-pivot ) .scope-tile { padding-bottom: 2.4rem; }

.search-zero-guide { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .5rem 0 0; }
.search-zero-label { font-size: var( --text-sm ); color: var( --ink-quiet ); margin-right: .2rem; }
.search-zero-option .count { color: var( --ink-quiet ); margin-left: .15rem; }

.card-pivots { display: flex; flex-wrap: wrap; gap: .25rem .6rem; margin: 0 0 .35rem; font-size: var( --text-xs ); }
.card-pivot { color: var( --ink-quiet ); text-decoration: none; border-bottom: 1px dotted var( --rule ); }
.card-pivot:hover, .card-pivot:focus-visible { color: var( --ink ); border-bottom-color: var( --ink-quiet ); }

@media ( max-width: 40rem )
{
	.search-facets { flex-direction: column; align-items: stretch; }
	.search-facet-values { position: static; min-width: 0; max-width: none; max-height: 14rem; box-shadow: none; margin: .25rem 0 .35rem; }
}

.card-match-moment { color: inherit; text-decoration: none; }
.card-match-moment:hover .card-match-where, .card-match-moment:focus-visible .card-match-where { text-decoration: underline; }