/* CSS Tests that can periodically be added to the real CSS, or discarded. Manually edited by Jon */

:root
{
	--favorite: #f6bf1c;
	--outcome-ground: transparent !important;
	--accent-quiet: color-mix( in srgb, var( --accent ) 12%, var( --card-background ) );
	--color-family-document: rgba(128,148,192,0.2);
	--grid-tile-empty: rgba(92,94,96,0.1);
}

strong
{
	font-weight: 600;
}

.signin-logo
{
	width: 16.5rem;
	margin-left: 1.3rem;
	user-select: none;
}

.front-slug,
.front-description
{
	display: none;
}

.breadcrumb
{
	margin: 0 0 0 0;
}

.toolbar-controls button.layout-choice[data-layout-choice="icons"]
{
	border-radius: .42rem 0 0 .42rem ;
	border-right-width: 0;
}

.item-card .card-preview
{
	background: var( --grid-tile-empty );
}

.app-sidebar,
.settings-panel
{
	border-color: transparent;
}

/* Make team titles bolder to help separate them when multiple have been expanded */

.app-sidebar [data-icon="team"] + .row-label
{
	font-weight: 600;
	opacity: 0.9;
}

/* Help distinguish what rows belong to currently active team */

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

/* Help distinguish what rows belong to currently active team */

.app-sidebar [data-reorderable="teams"] > li:has([aria-current="page"])
{
	border-left: 2px solid var(--accent);
	margin-left: -2px;
}

/* Add a little bit of depth to the UI */

#sidebar-search-field,
#search-query-field
{
	box-shadow: 0 4px 4px -2px rgba(0,0,0,0.1) inset;
}

.sidebar-search .search-open
{
	margin-top: -0.39rem;
}

.search-refine-row
{
	grid-template-columns: 4.1rem minmax( 0, 1fr );
}

/* Add a little bit of depth and clarity to the type */

.sidebar-row .row-label,
.control-pill,
button,
option
{
	text-shadow: 0 1px 1px rgba(0,0,0,0.07), 0 -1px 1px rgba(255,255,255,0.1);

}

/* Add a little bit of depth to the UI */
.control-pill,
button,
option,
select
{
	-webkit-appearance: none !important;
	border-radius: 0.8rem;
	box-shadow: 0 -1px 2px -1px rgba(0,0,0,0.1) inset, 0 1px 3px -2px rgba(0,0,0,0.38), 0 0 12px rgba(0,0,0,0.05);
	/* background-image: linear-gradient(0deg,rgba(224, 224, 224, 0.1) 0%, rgba(255, 255, 255, 0.1) 99%); */
	padding-bottom: 0.25rem;
	
}

.item-menu-content .control-pill
{
	box-shadow: none;
	border-radius: 0 !important;
	border-bottom: 0.5px solid var(--ink-very-quiet) !important;
}

.control-pill.in-use
{
	background: color-mix( in srgb, var(--in-use) 16%, var( --card-background ) );
}

.view-switch
{
	border-color: transparent;
}

/* Balance centering for elements with glyph */

.control-pill:has(svg),
button:has(svg)
{
	padding-right: 0.8rem;
}

h2.sidebar-section-heading
{
	margin-bottom: 0
}

/* No depth needed for headings */

.sidebar-section-heading button
{
	box-shadow: none;
}

/* Tame thy hovers */
.control-pill:hover,
button:hover,
option:hover,
.view-switch-option:hover,
.scope-tile:hover,
.sidebar-row .row-label:hover
{
	border-color: transparent;
	text-decoration: none;
	background-image: linear-gradient(
		rgb( 0 0 0 / 3% ),
		rgb( 0 0 0 / 1% )
	);
}

.item-card:hover
{
	outline: 2px solid color-mix( in srgb, var( --selection-accent ) 32%, transparent );
	outline-offset: 2px;
}

/* Otherwise confuses for actual input */

input::placeholder,
textarea::placeholder
{
	opacity: 0.5;
}

.scope-description
{
	padding: 0;
	border: 0 solid;
	background: none;
}

.scope-actions
{
	margin-bottom: 1.8rem;
}

.action-card .badge[data-status="built"]
{
	display: none;
}

.outcome
{
	background: transparent;
}

.renditions
{
	margin-bottom: 1rem;
}

.grid-controls .grid-slideshow input[type="number"]
{
	border-radius: .83rem;
	min-height: 1rem;
}

.scope-tile,
.sidebar-row .row-label,
.control-pill,
button,
option
{
	border-width: 1px;
	border-color: transparent !important;
}

.item-card
{
	border-color: transparent;
	box-shadow: 0 -1px 2px -1px rgba(0,0,0,0.1) inset, 0 1px 3px -2px rgba(0,0,0,0.38), 0 0 12px rgba(0,0,0,0.05);
}

.toolbar-controls select,
.toolbar-controls button
{
	padding: 0 0.5rem;
	border-width: 1px;
	border-color: transparent !important;
}

body:not([data-library-layout="icons"]) .scope-tile
{
	box-shadow: 0 -1px 2px -1px rgba(0,0,0,0.1) inset, 0 1px 3px -2px rgba(0,0,0,0.38), 0 0 12px rgba(0,0,0,0.05);
}

.scope-tile .tile-name
{
	padding-right: 0.2rem;
}

.scope-tile .tile-meta,
.scope-tile .tile-text
{
	font-size: var( --text-sm );
}

.view-heading
{
	align-items: center;
	gap: 0;
}

[data-page-kind="home"] .view-heading
{
	margin-bottom: 1.3rem;
}

audio
{
	width: 100%
}

.timeline-seconds-field
{
	padding: 0 0.5rem;
}

.timeline-body-field
{
	min-width: 100%;
	padding: 0 0.5rem;
}

.empty-state
{
	padding: .5rem 1.5rem;
	background: var(--accent-quiet);
}

.legend-chip:not(.legend-state)
{
	padding: .18rem .5rem .18rem .4rem;
}

.settings-panel
{
	padding: 0.2rem 1.5rem 1.5rem 1.5rem;
}

.settings-layout-choice
{
	flex-wrap: wrap;
}

.settings-theme-choice
{
	overflow: auto;
	padding-bottom: 1rem;
}


[data-library-layout="cards"] .item-card .card-title,
[data-library-layout="cards"] .card-context .context-crumb
{
	font-size: var( --text-base );
}

[data-library-layout="cards"] .item-card .card-context
{
	margin: 0;
}

[data-library-layout="cards"] .item-card .card-person
{
	padding-top: .7rem;
}

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

[data-library-layout="cards"] .item-card[data-legend-state-color]::before,
.scope-tile[data-legend-state-color]::before
{
	width: 100%;
	bottom: 0;
	height: 6px;
}

.indicator,
.legend-chip,
.legend-state,
.badge
{
	border-radius: 5px !important;
	box-shadow: none !important;
	text-transform: uppercase;
	font-weight: 900 !important;
	font-size: 0.7rem !important;
	margin-top: 1px;
}

.view-heading .badge
{
	margin-top: 2px;
}

.item-menu-entry,
.item-menu-state
{
   position: relative;
   box-shadow: none;
   background-image: none;
   border-top: 0 solid;
   border-bottom: 0;
   border-radius: 0;
   --item-menu-rule-inset: .5rem;
}

.item-menu-entry::after,
.item-menu-state::after
{
   content: '';
   position: absolute;
   left: var(--item-menu-rule-inset);
   right: var(--item-menu-rule-inset);
   bottom: 0;
   border-bottom: 0.5px solid var(--ink-very-quiet) !important;
   pointer-events: none;
}

.item-menu-body > :last-child::after,
.item-menu-body > :last-child > .item-menu-entry::after,
.item-menu-body > .item-menu-form:has( + .item-menu-form[hidden]:last-child ) > .item-menu-entry::after
{
   display: none;
}

.toast
{
	border-left: 1px solid var( --rule );
	border-color: var(--accent)
}

@media ( max-width: 40rem )
{
   .item-menu-entry { --item-menu-rule-inset: .6rem; }
}

.item-menu-subject
{
	display: none;
}

.item-menu-entry-label
{
	font-size: 0.9rem;
	font-weight: 500;
}

.item-card[data-selected="true"],
.scope-tile[data-selected="true"]
{
	outline-offset: 2px;
}

.card-marks
{
	padding: .3rem .3rem;
	background: rgba(192,192,192,0.8);
	backdrop-filter: blur(4px);
	box-shadow: 0 6px 6px rgba(0,0,0,0.1) inset;
}

.scope-panel
{
	max-width: 40rem;
}

[data-library-layout="grid"] .item-card
{
	border-radius: 8px;
	overflow: initial;
}

/* body[data-library-layout="list"] .no-preview-extension
{
	font-size: var( --text-sm );
} */

.tool-area
{
	/* border-color: transparent; */
	background: rgba(0,0,0,0.05);
	box-shadow: 0 -1px 2px -1px rgba(0,0,0,0.1) inset, 0 1px 3px -2px rgba(0,0,0,0.08);
}

dialog .tool-area
{
	background: var(--card-background)
}


.lifecycle-area
{
	border-left: 1px solid transparent !important;
	border-radius: 8px 8px 8px 8px !important;
}

.sidebar-wordmark
{
	cursor: pointer;
}

@media ( min-width: 47rem )
{
	.toolbar-controls .layout-control .layout-choice
	{
		display: block;
	}
}

@media ( max-width: 46rem )
{
	.sidebar-logo,
	.sidebar-logo-neon,
	.sidebar-wordmark::after
	{
		width: 33%;
	}

	.sidebar-logo-neon,
	.sidebar-wordmark::after
	{
		display: none;
	}

	.sidebar-links
	{
		position: absolute;
		top: 1rem;
		right: 0.75rem;
		max-width: 66%;
	}

	.app-sidebar
	{
		padding-bottom: 0;
	}

	.scope-actions-bar-folder .notice
	{
		display: none;
	}

	.sidebar-actor
	{
		box-shadow: 0 -12px 12px rgba(0,0,0,0.02);
	}

	.actor-standin
	{
		display: none;
	}

	.sidebar-row
	{
		font-size: var( --text-lg );
	}

}

.sidebar-toggle,
.camera-floater
{
	box-shadow: 0 0 0.3em rgba( 0, 0, 0, .0 ),
	0 0 4px rgba(0,0,0,0.22) inset,
	0.5px 0 0.5px rgba(0,0,0,0.2),
	-0.5px 0 0.5px rgba(0,0,0,0.2),
	0px -0.5px 0.5px rgba(255,255,255,0.9),
	0px 0.5px 0.5px rgba(255,255,255,0.9);
	border-top: 0.5px solid rgba(255, 255, 255, 0.1);
	border-bottom: 0.5px solid rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(5px) saturate(3);
	background-image: radial-gradient(circle,rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255,0.4) 100%);
	background-color: var(--page-background-translucent)
}

.sidebar-toggle
{
	right: 10px;
}

.camera-floater
{
	left: 10px;
}


.sidebar-toggle[aria-expanded="false"]
{
	padding-bottom: 6px;
	padding-left: 1px;
}

.sidebar-toggle[aria-expanded="true"]
{
	padding-bottom: 3px;
	padding-left: 2px;
}

.sidebar-links
{
	margin-bottom: 0.65rem;
}

.selection-bar
{
	display: none;
}

button.shelf-handle,
button.status-group
{
	border-style: solid;
	text-transform: capitalize;
	font-size: var(--text);
}

.shelf-drawer
{
	margin-top: 5rem;
	margin-bottom: 2rem;
	border-bottom-left-radius: 0.6rem !important;
}

/* Container colours (D592): sidebar row, tile, heading, panel swatch */

.container-color-choice
{
	width: 44px;
	height: 44px;
	border: 0 solid;

}

.container-color-choice-label
{
	display: none;
}

/* .app-sidebar li:has([aria-current="page"]) .row-glyph svg */

.sidebar-row.container-color-red .row-glyph svg,
.scope-tile.container-color-red .tile-glyph svg,
.title-handle.container-color-red .title-handle-glyph,
.control-pill.container-color-red .icon
{
	color: #f94144ff !important;
	fill: #f94144ff !important;
}

.control-pill.container-color-red
{
	background: color-mix( in srgb, #f94144ff 8%, var( --card-background ) );
}

.container-color-choice.container-color-red
{
	background: #f94144ff !important;
}

.sidebar-row.container-color-orange .row-glyph svg,
.scope-tile.container-color-orange .tile-glyph svg,
.title-handle.container-color-orange .title-handle-glyph,
.control-pill.container-color-orange .icon
{
	color: #f8961eff !important;
	fill: #f8961eff !important;
}

.control-pill.container-color-orange
{
	background: color-mix( in srgb, #f8961eff 8%, var( --card-background ) );
}

.container-color-choice.container-color-orange
{
	background: #f8961eff !important;
}

.sidebar-row.container-color-yellow .row-glyph svg,
.scope-tile.container-color-yellow .tile-glyph svg,
.title-handle.container-color-yellow .title-handle-glyph,
.control-pill.container-color-yellow .icon
{
	color: #f9c74fff !important;
	fill: #f9c74fff !important;
}

.control-pill.container-color-yellow
{
	background: color-mix( in srgb, #f9c74fff 8%, var( --card-background ) );
}

.container-color-choice.container-color-yellow
{
	background: #f9c74fff !important;
}

.sidebar-row.container-color-green .row-glyph svg,
.scope-tile.container-color-green .tile-glyph svg,
.title-handle.container-color-green .title-handle-glyph,
.control-pill.container-color-green .icon
{
	color: #90be6d !important;
	fill: #90be6d !important;
}

.control-pill.container-color-green
{
	background: color-mix( in srgb, #90be6d 8%, var( --card-background ) );
}

.container-color-choice.container-color-green
{
	background: #90be6d !important;
}

.sidebar-row.container-color-blue .row-glyph svg,
.scope-tile.container-color-blue .tile-glyph svg,
.title-handle.container-color-blue .title-handle-glyph,
.control-pill.container-color-blue .icon
{
	color: #277da1 !important;
	fill: #277da1 !important;
}

.control-pill.container-color-blue
{
	background: color-mix( in srgb, #277da1 8%, var( --card-background ) );
}

.container-color-choice.container-color-blue
{
	background: #277da1 !important;
}

.sidebar-row.container-color-purple .row-glyph svg,
.scope-tile.container-color-purple .tile-glyph svg,
.title-handle.container-color-purple .title-handle-glyph,
.control-pill.container-color-purple .icon
{
	color: #957ad3 !important;
	fill: #957ad3 !important;
}

.control-pill.container-color-purple
{
	background: color-mix( in srgb, #957ad3 16%, var( --card-background ) );
}

.container-color-choice.container-color-purple
{
	background: #957ad3 !important;
}

.sidebar-row.container-color-grey .row-glyph svg,
.scope-tile.container-color-grey .tile-glyph svg,
.title-handle.container-color-grey .title-handle-glyph,
.control-pill.container-color-grey .icon
{
	color: #456 !important;
	fill: #456 !important;
}

.control-pill.container-color-grey
{
	background: color-mix( in srgb, #456 8%, var( --card-background ) );
}

.container-color-choice.container-color-grey
{
	background: #456 !important;
}

.container-color-choice.container-color-none
{
	background: transparent !important;
	border: 1px solid var(--rule) !important
}
.sidebar-row .row-glyph[data-icon="inbox"] svg,
.scope-tile .tile-glyph svg[data-icon="inbox"],
.title-handle .title-handle-glyph[data-icon="inbox"],
.sidebar-row .row-glyph[data-icon="outbox"] svg,
.scope-tile .tile-glyph svg[data-icon="outbox"],
.title-handle .title-handle-glyph[data-icon="outbox"],
.sidebar-row .row-glyph[data-icon="project"] svg,
.scope-tile .tile-glyph svg[data-icon="project"],
.title-handle .title-handle-glyph[data-icon="project"]
{
	fill: transparent !important;
}

/* The swatch is an empty span inside each button; give it a size to see it */
.container-color-swatch
{
	width: 10px;
	height: 10px;
}

/* The selected swatch */
.container-color-choice[aria-pressed="true"] { }

@media (prefers-color-scheme: dark)
{
	.tool-area
	{
		background: rgba(255,255,255,0.02)
	}
	
	.control-pill:hover,
	button:hover,
	option:hover,
	.view-switch-option:hover,
	.scope-tile:hover,
	.sidebar-row .row-label:hover
	{
		border-color: transparent;
		text-decoration: none;
		background-image: linear-gradient(
			rgb( 255 255 255 / 10% ),
			rgb( 255 255 255 / 5% )
		);
	}

}

.daily-tip-slot
{
	margin-left: 4rem;
}

/* Experiments */

#material-overlay
{

}