/*
 * LSM Video Training -- base styles
 *
 * In-brand identity per project.md section 5 (childcare precedent):
 * KEEP  - type system (Noto Sans / Noto Serif / Cinzel)
 *       - brand greens (#219119 action / #1c6017 dark)
 *       - LSM logo marks
 * SHIFT - shell chrome: the www footer brown (#785938) promoted to
 *         the site's primary chrome, applied with inverted emphasis
 *         (solid brown nav/footer where www uses light chrome).
 *         Warm neutrals from the www family for backgrounds/borders.
 */

:root {
	--vid-shell: #785938;        /* www footer brown -- the site's chrome accent */
	--vid-shell-dark: #5d3104;   /* deep brown - hover/active */
	--vid-shell-text: #efebe5;   /* warm parchment text on brown */
	--vid-action: #219119;       /* LSM brand green - actions */
	--vid-action-dark: #1c6017;  /* LSM brand green - dark */
	--vid-action-tint: #e7f8e6;  /* LSM brand green - tint */
	--vid-accent: #7c4b1a;       /* brown accent for headings/icons */
	--vid-text: #333;
	--vid-text-soft: #666;
	--vid-bg: #f4f2ee;           /* warm neutral background (www family) */
	--vid-border: #dcd1c4;       /* warm border tone */
}

html, body {
	height: 100%;
}
body {
	font-family: "Noto Sans", sans-serif;
	color: var(--vid-text);
	background: var(--vid-bg);
	/* sticky footer: column layout, content flexes, footer stays at bottom */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

h1, h2, h3, h4, h5 {
	font-family: "Noto Serif", serif;
}

/* ==========================================
   Portal Navigation Bar -- horizontal,
   solid dark shell (inverted emphasis vs
   www's light chrome), childcare pattern
   ========================================== */
.portal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--vid-shell);
	padding: 0.75rem 1.5rem;
	color: #fff;
}

/* Left: Logo + Titles */
.nav-left {
	display: flex;
	align-items: center;
}
.nav-brand {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
	color: #fff;
}
.nav-brand:hover,
.nav-brand:focus {
	color: #fff;
	opacity: 0.9;
}
.nav-brand img {
	height: 55px;
	width: auto;
}
.nav-titles {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
.nav-title-main {
	font-family: "Cinzel", serif;
	font-size: 1.25rem;
	font-weight: 500;
}
.nav-title-sub {
	font-family: "Noto Serif", serif;
	font-size: 1rem;
	opacity: 0.9;
}

/* Middle: Navigation Items */
.nav-middle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.nav-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	color: #fff;
	text-decoration: none;
	font-size: 1rem;
	font-family: "Noto Sans", sans-serif;
	border-radius: 4px;
	transition: background 0.2s;
}
.nav-item:hover,
.nav-item:focus {
	background: rgba(255,255,255,0.15);
	color: #fff;
}
.nav-item i {
	font-size: 1rem;
}

/* Right: Point name + Logout */
.nav-right {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}
.nav-identity {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	text-align: right;
	text-decoration: none;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	transition: background 0.15s;
}
.nav-identity:hover,
.nav-identity:focus {
	background: rgba(255,255,255,0.12);
}
.nav-identity-point {
	color: #fff;
	font-size: 1rem;
	font-family: "Noto Sans", sans-serif;
}
.nav-identity-role {
	color: var(--vid-shell-text);
	font-size: 0.8rem;
	font-family: "Noto Serif", serif;
	opacity: 0.85;
}
.nav-logout {
	color: #fff;
	text-decoration: none;
	font-size: 1.375rem;
	opacity: 0.8;
	transition: opacity 0.2s;
}
/* home page: heading at left, tour invitation at right on the same row */
.page-heading-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}
.page-heading-row .page-heading { margin-bottom: 0; }
.tour-invite {
	margin: 0;
	font-size: 0.9rem;
	color: #666;
}
.tour-invite i { color: var(--vid-accent); margin-right: 0.3rem; }
.tour-invite a { color: var(--vid-accent); font-weight: 600; }
.nav-logout:hover,
.nav-logout:focus {
	opacity: 1;
	color: #fff;
}

/* Hamburger button (hidden on desktop) */
.nav-hamburger {
	display: none;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 1.5rem;
	cursor: pointer;
	padding: 0.5rem;
}

/* Mobile user section (hidden on desktop) */
.nav-mobile-user {
	display: none;
}

/* Mobile responsive navigation */
@media (max-width: 960px) {
	.portal-nav {
		flex-wrap: wrap;
	}
	.nav-hamburger {
		display: block;
		order: 2;
	}
	.nav-middle {
		display: none;
		width: 100%;
		order: 4;
		flex-direction: column;
		align-items: stretch;
		padding: 0.5rem 0;
		border-top: 1px solid rgba(255,255,255,0.2);
		margin-top: 0.5rem;
	}
	.nav-middle.nav-open {
		display: flex;
	}
	.nav-item {
		padding: 0.75rem 1rem;
		border-radius: 0;
	}
	.nav-right {
		display: none;
	}
	.nav-mobile-user {
		display: flex;
		flex-direction: column;
		border-top: 1px solid rgba(255,255,255,0.2);
		margin-top: 0.5rem;
		padding-top: 0.5rem;
	}
	.nav-point {
		opacity: 0.75;
	}
	.nav-left {
		order: 1;
	}
}

/* ==========================================
   Buttons -- brand green preserved
   ========================================== */
.button {
	background-color: var(--vid-action);
	font-family: "Noto Sans", sans-serif;
}
.button:hover,
.button:focus {
	background-color: var(--vid-action-dark);
}
.button.inverse {
	background-color: #fff;
	color: var(--vid-action);
	border: 1px solid var(--vid-action);
}
.button.inverse:hover,
.button.inverse:focus {
	background-color: var(--vid-action-tint);
}

/* ==========================================
   Content shell
   ========================================== */
.main-content {
	padding: 1.5rem 0 3rem 0;
	flex: 1 0 auto;
	width: 100%;
}
.callout {
	background: #fff;
	border: 1px solid var(--vid-border);
	border-radius: 4px;
}
.page-heading {
	font-family: "Noto Serif", serif;
	color: var(--vid-accent);
	margin-bottom: 0.75rem;
}
.page-heading i {
	margin-right: 0.5rem;
}
.page-subtitle {
	color: var(--vid-text-soft);
	margin-bottom: 1rem;
}
/* Info box head: title on the left, action button in the upper-right
   corner (frees the full width below for the long sync line) */
.info-box-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
}
.info-box-head h4 {
	flex: 1 1 auto;
}
.info-box-corner {
	flex-shrink: 0;
	margin: 0;
}
/* the sync action sits on its own row under the seat fact */
.sync-row {
	font-weight: normal;
}
.sync-row .sync-link {
	margin-left: 0;
}
/* a softer parenthetical inside a heading, e.g. "(Local Signup List)" */
.heading-qualifier {
	font-weight: normal;
	font-size: 0.8em;
	color: #777;
}

/* Fact grid: prompts normal text right-aligned, data bold.
   This prompt/data style is the sitewide standard. */
.fact-grid {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 1.25rem;
	row-gap: 0.3rem;
	align-items: baseline;
}
.fact-label,
.fact-label-inline {
	font-family: "Noto Sans", sans-serif;
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--vid-text);
	text-align: right;
}
.fact-value {
	font-family: "Noto Sans", sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--vid-text);
}
.fact-value em {
	color: var(--vid-text-soft);
	font-weight: 400;
}
@media (max-width: 640px) {
	.info-box-head {
		flex-direction: column;
		align-items: stretch;
	}
	.info-box-corner {
		align-self: flex-start;
		margin-bottom: 0.75rem;
	}
	.fact-grid {
		grid-template-columns: 1fr;
		row-gap: 0.1rem;
	}
	.fact-label {
		text-align: left;
	}
	.fact-grid .fact-value {
		margin-bottom: 0.5rem;
	}
}
.callout.success {
	background: #d4edda;
	color: #155724;
	border: none;
	border-left: 4px solid var(--vid-action);
	padding: 0.75rem 1rem;
}
.callout.alert {
	background: #f8d7da;
	color: #721c24;
	border: none;
	border-left: 4px solid #e60606;
	padding: 0.75rem 1rem;
}
.callout.success i,
.callout.alert i {
	margin-right: 0.5rem;
}
.action-buttons .button {
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
}
.callout h4 {
	font-family: "Noto Sans", sans-serif;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--vid-text);
	margin-bottom: 1rem;
}
.callout h4 i {
	margin-right: 0.5rem;
	color: var(--vid-accent);
}
label {
	font-family: "Noto Sans", sans-serif;
	color: var(--vid-text);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
select,
textarea {
	border: 1px solid var(--vid-border);
	border-radius: 4px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
	border-color: var(--vid-shell);
	box-shadow: 0 0 4px rgba(120, 89, 56, 0.5);
}
table thead {
	background: var(--vid-shell);
	color: var(--vid-shell-text);
	font-family: "Noto Sans", sans-serif;
}
table tbody tr:nth-child(even) {
	background: rgba(120, 89, 56, 0.06);
}
.status-badge {
	display: inline-block;
	padding: 0.375rem 0.875rem;
	border-radius: 4px;
	font-family: "Noto Sans", sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
}
.status-badge.open { background: var(--vid-action); color: #fff; }
.status-badge.pending { background: #e6aa06; color: #fff; }
.status-badge.info { background: #068ce6; color: #fff; }
.status-badge.closed { background: #999; color: #fff; }

/* Summary boxes (home page): height pegged to the viewport
   so the list grows with the window; always scrollable inside.
   The subtraction approximates nav + heading + event box +
   callout chrome + footer. Floor keeps it usable on small
   screens. */
.summary-scroll {
	max-height: max(16rem, calc(100vh - 34rem));
	overflow-y: auto;
}
.summary-count {
	margin: 0.5rem 0 0 0;
	font-size: 0.85rem;
	color: var(--vid-text-soft);
}
.empty-state {
	color: var(--vid-text-soft);
	font-style: italic;
	margin: 0.5rem 0;
}
.empty-state i {
	margin-right: 0.4rem;
}
.preview-badge {
	display: inline-block;
	background: #e6aa06;
	color: #fff;
	font-family: "Noto Sans", sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.15rem 0.5rem;
	border-radius: 3px;
	vertical-align: middle;
	margin-left: 0.5rem;
}

/* Modal dialogs */
.reveal {
	border-radius: 6px;
	border: 1px solid var(--vid-border);
	padding: 1.5rem;
}
.reveal h4 {
	font-family: "Noto Serif", serif;
	color: var(--vid-accent);
	margin-bottom: 1rem;
}
.perm-check {
	display: block;
	font-family: "Noto Sans", sans-serif;
	margin-bottom: 0.6rem;
	font-weight: 600;
	line-height: 1.4;
}
/* Foundation gives checkboxes margin-bottom:1rem -- kill it here so the
   description hugs the checkbox line */
.perm-check input[type="checkbox"] {
	margin: 0 0.35rem 0 0;
	vertical-align: middle;
}
.perm-descrip {
	display: block;
	margin: 0.1rem 0 0 1.55rem;
	font-size: 0.8rem;
	font-weight: normal;
	color: #666;
	line-height: 1.35;
}
.modal-status-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
	min-height: 1rem;
}
.modal-status-row .button {
	margin-bottom: 0;
}
.status-echo {
	font-size: 0.9rem;
	color: var(--vid-text-soft);
}
.field-hint {
	font-size: 0.85rem;
	margin: -0.75rem 0 0.75rem 0;
	min-height: 1.2rem;
}
.field-hint.ok {
	color: var(--vid-action-dark);
}
.field-hint.taken {
	color: #e60606;
}
.field-hint i {
	margin-right: 0.3rem;
}
.hint-inline {
	font-size: 0.8rem;
	color: var(--vid-text-soft);
	font-weight: 400;
}
.field-error {
	font-size: 0.8rem;
	color: #e60606;
	font-weight: 600;
	margin-left: 0.35rem;
}
.intake-context {
	text-align: center;
	color: var(--vid-text-soft);
	line-height: 1.5;
	margin-bottom: 1rem;
}

/* Intake page: masthead event/point lines + wide form card */
.intake-masthead {
	margin-top: 0.25rem;
}
.intake-event {
	font-family: "Noto Serif", serif;
	font-size: 1.3rem;
	color: var(--vid-text);
}
.intake-point {
	font-family: "Noto Serif", serif;
	font-size: 1.1rem;
	color: var(--vid-accent);
	margin-top: 0.25rem;
}
.intake-box {
	width: 100%;
	max-width: 54rem;
	margin: 0 auto;
}
.intake-box .callout {
	padding: 1.5rem 2rem;
}

/* Change Active Locality: filter-as-you-type picker */
.sub-picker-list {
	max-height: 20rem;
	overflow-y: auto;
	border: 1px solid var(--vid-border);
	border-radius: 4px;
	margin-bottom: 1rem;
}
.sub-picker-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.5rem 0.75rem;
	color: var(--vid-text);
	border-bottom: 1px solid var(--vid-border);
}
.sub-picker-row:last-child {
	border-bottom: none;
}
.sub-picker-row:hover,
.sub-picker-row:focus {
	background: var(--vid-bg);
	color: var(--vid-accent);
}
.sub-picker-row.active-sub {
	background: #e7f8e6;
}
.sub-picker-name {
	font-weight: 700;
}
.sub-picker-facts {
	font-size: 0.85rem;
	color: var(--vid-text-soft);
	white-space: nowrap;
}

/* Print Center: paper size master switch + report cards */
.paper-switch {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.paper-switch-label {
	font-size: 0.85rem;
	color: var(--vid-text-soft);
	margin-right: 0.25rem;
}
.paper-choice {
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--vid-border);
	border-radius: 4px;
	background: #ffffff;
	color: var(--vid-text-soft);
	font-size: 0.85rem;
	cursor: pointer;
}
.paper-choice.current {
	background: var(--vid-shell);
	border-color: var(--vid-shell);
	color: var(--vid-shell-text);
	font-weight: 700;
	cursor: default;
}
.report-card {
	display: flex;
	flex-direction: column;
	height: calc(100% - 1.5rem);
	margin-bottom: 1.5rem;
}
.report-descrip {
	color: var(--vid-text-soft);
	font-size: 0.9rem;
	flex: 1 0 auto;
}
.report-action {
	text-align: right;
}
.report-action .button {
	margin-bottom: 0;
}
.setup-credentials {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	background: var(--vid-bg);
	border: 1px solid var(--vid-border);
	border-radius: 4px;
	padding: 0.6rem 1rem;
	margin-bottom: 1rem;
}
.setup-credentials .fact-value {
	font-size: 1.1rem;
}

/* Password show/hide toggle */
.password-wrapper {
	position: relative;
}
.password-wrapper input {
	padding-right: 2.5rem;
}
.password-toggle {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: var(--vid-text-soft);
	cursor: pointer;
	padding: 0.25rem;
}
.password-toggle:hover,
.password-toggle:focus {
	color: var(--vid-text);
	background: transparent;
	outline: none;
}

/* Paid checkmark on the control sheet */
.paid-yes {
	color: var(--vid-action);
}

/* Manage column: plain icon buttons, no button chrome */
.icon-btn {
	color: var(--vid-text);
	font-size: 1rem;
	padding: 0.2rem 0.35rem;
	text-decoration: none;
}
.icon-btn:hover,
.icon-btn:focus {
	color: var(--vid-accent);
}
/* SHARED SEATS: the pairing icon follows the Seat Status text,
   only on Shared rows */
.share-link-icon {
	font-size: 0.85rem;
	padding: 0 0.2rem;
	color: var(--vid-accent);
}
/* share badge beside the Seat Status; tooltip lists the partners */
.share-badge {
	color: var(--vid-accent);
	font-size: 0.85rem;
	margin-left: 0.25rem;
}
/* Seat Sharing modal */
.share-group-box {
	background: #f4f2ee;
	border: 1px solid #dcd1c4;
	border-radius: 4px;
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
}
.share-group-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.4rem;
}
.share-remove-link {
	color: #e60606;
	font-size: 0.85rem;
}
.share-members {
	list-style: none;
	margin: 0 0 0.5rem;
}
.share-members li {
	padding: 0.2rem 0;
}
.share-members li i { color: var(--vid-accent); margin-right: 0.3rem; }
.share-bs { color: #777; font-size: 0.85rem; }
.share-none {
	color: #777;
	font-style: italic;
	font-size: 0.9rem;
	margin: 0 0 0.5rem;
}
.share-seats-row label { margin-bottom: 0; }
.share-seats-row select { margin-bottom: 0; max-width: 14rem; }

/* Comment info icon with CSS-only tooltip.
   NOTE: named vid-tip because Foundation already owns a
   .has-tip class (dotted underline) -- avoid the collision. */
.vid-tip {
	position: relative;
	color: var(--vid-accent);
	cursor: help;
	margin-left: 0.15rem;
	border-bottom: none;
}
.vid-tip::after {
	content: attr(data-tip);
	position: absolute;
	bottom: 130%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--vid-shell);
	color: var(--vid-shell-text);
	font-family: "Noto Sans", sans-serif;
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	white-space: normal;
	width: max-content;
	max-width: 20rem;
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s;
	z-index: 20;
	pointer-events: none;
}
.vid-tip:hover::after,
.vid-tip:focus::after {
	opacity: 1;
	visibility: visible;
}

/* Sortable table headers */
table.sortable th.sort-header {
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}
table.sortable th.sort-header:hover {
	background: var(--vid-shell-dark);
}
table.sortable th.sorted-asc::after {
	content: " \25B2";
	font-size: 0.7em;
}
table.sortable th.sorted-desc::after {
	content: " \25BC";
	font-size: 0.7em;
}

/* ==========================================
   Login page
   ========================================== */
.login-page {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	width: 100%;
}
.login-page main {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
}
.login-box {
	max-width: 420px;
	width: 100%;
}
.login-box h3 {
	text-align: center;
}
.login-box .callout {
	position: relative;
}
.help-circle {
	font-size: 1rem;
	color: var(--vid-text-soft);
	vertical-align: super;
}
.help-circle:hover,
.help-circle:focus {
	color: var(--vid-action-dark);
}
.help-popover {
	position: absolute;
	top: 3.25rem;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	background: #fff;
	border: 1px solid var(--vid-border);
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	padding: 1rem 2rem 0.25rem 1rem;
	font-size: 0.875rem;
	color: var(--vid-text);
	z-index: 10;
}
.help-popover p {
	margin-bottom: 0.75rem;
}
.help-close {
	position: absolute;
	top: 0.25rem;
	right: 0.6rem;
	background: transparent;
	border: none;
	font-size: 1.25rem;
	color: var(--vid-text-soft);
	cursor: pointer;
	line-height: 1;
}
.help-close:hover {
	color: var(--vid-text);
}

.error-message {
	background: #f8d7da;
	color: #721c24;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	margin-bottom: 1rem;
	font-size: 0.875rem;
}

/* ==========================================
   Footer
   ========================================== */
#footer {
	background: var(--vid-shell);
	color: var(--vid-shell-text);
	padding: 1rem 0;
	font-size: 0.8rem;
	text-align: center;
	flex-shrink: 0;
	width: 100%;
}
#footer p { margin: 0; }

/* ==========================================================
   Questionnaire forms (pillar 3)
   ========================================================== */
.q-preamble {
	font-family: 'Noto Serif', serif;
	font-size: 0.9rem;
	color: #555;
	line-height: 1.5;
}
.q-footnote {
	font-size: 0.8rem;
	font-style: italic;
	color: #666;
	margin-top: 0.75rem;
}
.q-yn {
	border: none;
	margin: 0 0 0.9rem;
	padding: 0;
}
.q-yn legend {
	font-size: 0.875rem;
	font-weight: normal;
	margin-bottom: 0.2rem;
}
.q-yn label {
	display: inline-block;
	margin-right: 1.5rem;
	font-weight: normal;
}
.q-grid {
	width: 100%;
	margin: 0.5rem 0 0.75rem;
}
.q-grid th {
	background: var(--vid-shell);
	color: var(--vid-shell-text);
	font-size: 0.8rem;
	padding: 0.4rem 0.6rem;
	text-align: left;
}
.q-grid td {
	padding: 0.2rem 0.4rem;
	border-bottom: 1px solid var(--vid-border);
}
.q-grid td input {
	margin: 0;
}
.q-msgnum {
	text-align: center;
	font-weight: bold;
	width: 5rem;
}
.q-rowdel { text-align: center; }
.q-attest {
	display: block;
	font-weight: normal;
	margin: 0.75rem 0;
	line-height: 1.5;
}
.q-attest input[type="checkbox"] {
	margin-right: 0.5rem;
}
.q-actions {
	margin: 1rem 0 2rem;
}
.q-actions .button {
	margin-right: 0.75rem;
}


/* ---- Registration Synchronization (home page) ---- */
/* the always-present link beside the official seat count; the glyph
   appears only when the control sheet count disagrees */
.sync-link {
	font-size: 0.85rem;
	font-weight: normal;
	margin-left: 0.75rem;
	color: var(--vid-accent);
	white-space: nowrap;
}
.sync-link:hover {
	text-decoration: underline;
}
.sync-glyph {
	color: #e6aa06;
	margin-left: 0.25rem;
	vertical-align: middle;
}
.sync-compare {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	margin: 1rem 0 1.25rem;
}
.sync-figure {
	text-align: center;
	min-width: 9rem;
}
.sync-number {
	display: block;
	font-family: "Noto Serif", serif;
	font-size: 2.4rem;
	font-weight: bold;
	color: var(--vid-accent);
	line-height: 1.1;
}
.sync-caption {
	display: block;
	font-size: 0.8rem;
	color: #666;
}
.sync-arrow {
	font-size: 1.6rem;
	color: #999;
}