/* synced from shared/skin @ 2026-09-16 — do not edit copies; run: node scripts/sync-shared-skin.mjs */
@import url('sf-icons.css');

/**
 * Apple HIG layout primitives — shared chrome for every riccardolucca.com app.
 * Spacing is the 8pt grid. Hit targets 44pt. Large Title + grouped content.
 * Source: shared/skin/layout.css  ·  npm run sync:skin
 */

@font-face {
	font-family: 'SF Pro';
	src: local('SF Pro'), local('SF Pro Text'), local('SF Pro Display'), local('SF Pro Rounded'),
		local('.SF NS'), local('.SFNS-Regular');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SF Pro';
	src: local('SF Pro Italic'), local('SF Pro Text Italic'), local('SFProText-RegularItalic'),
		local('.SF NS Italic');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'SF Mono';
	src: local('SF Mono'), local('SFMono-Regular'), local('SF NS Mono'), local('.SF NS Mono');
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--font: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	--mono: 'SF Mono', ui-monospace, Menlo, monospace;

	/* iOS Dynamic Type — default (xSmall unused; this is Large / default) */
	--fs-large-title: 2.125rem; /* 34 */
	--fs-title1: 1.75rem; /* 28 */
	--fs-title2: 1.375rem; /* 22 */
	--fs-title3: 1.25rem; /* 20 */
	--fs-headline: 1.0625rem; /* 17 semibold */
	--fs-body: 1.0625rem; /* 17 */
	--fs-callout: 1rem; /* 16 */
	--fs-subhead: 0.9375rem; /* 15 */
	--fs-footnote: 0.8125rem; /* 13 */
	--fs-caption1: 0.75rem; /* 12 */
	--fs-caption2: 0.6875rem; /* 11 */

	--lh-title: 1.2;
	--lh-body: 1.29;

	/* 8pt grid */
	--s1: 8px;
	--s2: 16px;
	--s3: 20px;
	--s4: 24px;
	--s5: 32px;
	--hit: 44px;
	--inset: 20px;

	--radius: 26px;
	--radius-lg: 28px;
	--radius-control: 980px;

	/* Apple system colors (HIG Color) */
	--bg: #ffffff;
	--surface: #ffffff;
	--surface-hover: #f2f2f7;
	--surface-muted: #e5e5ea;
	--border: rgba(60, 60, 67, 0.29);
	--text: #000000;
	--muted: rgba(60, 60, 67, 0.6);
	--accent-fallback: #007aff;
	--success: #34c759;
	--success-soft: rgba(52, 199, 89, 0.14);
	--danger: #ff3b30;
	--danger-soft: rgba(255, 59, 48, 0.12);
	--warn: #ff9500;
	--warn-soft: rgba(255, 149, 0, 0.14);
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #000000;
		--surface: #1c1c1e;
		--surface-hover: #2c2c2e;
		--surface-muted: #1c1c1e;
		--border: rgba(84, 84, 88, 0.65);
		--text: #ffffff;
		--muted: rgba(235, 235, 245, 0.6);
		--accent-fallback: #0a84ff;
		--success: #30d158;
		--success-soft: rgba(48, 209, 88, 0.16);
		--danger: #ff453a;
		--danger-soft: rgba(255, 69, 58, 0.16);
		--warn: #ff9f0a;
		--warn-soft: rgba(255, 159, 10, 0.16);
	}
}

html[data-theme='light'] {
	color-scheme: light;
	--bg: #ffffff;
	--surface: #ffffff;
	--surface-hover: #f2f2f7;
	--text: #000000;
	--muted: rgba(60, 60, 67, 0.6);
	--accent-fallback: #007aff;
	--success: #34c759;
	--danger: #ff3b30;
	--warn: #ff9500;
}

html[data-theme='dark'] {
	color-scheme: dark;
	--bg: #000000;
	--surface: #1c1c1e;
	--surface-hover: #2c2c2e;
	--text: #ffffff;
	--muted: rgba(235, 235, 245, 0.6);
	--accent-fallback: #0a84ff;
	--success: #30d158;
	--danger: #ff453a;
	--warn: #ff9f0a;
}

html {
	font-family: var(--font);
	font-size: 17px;
	line-height: var(--lh-body);
	letter-spacing: -0.022em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Shell: same page margins everywhere */
.page,
#app {
	width: min(100%, 48rem);
	margin: 0 auto;
	padding: max(var(--s2), var(--safe-top, 0px)) var(--inset) calc(var(--s4) + var(--safe-bottom, 0px));
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

/* Serali timetable needs the extra columns */
#app.rl-wide,
.page.rl-wide {
	width: min(100%, 64rem);
}

/* Sticky glass toolbar — floats above content (HIG: Liquid Glass control layer) */
.header,
.site-header {
	position: sticky;
	top: 0;
	z-index: 400;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s2);
	min-height: var(--hit);
	margin: 0 calc(var(--inset) * -1) var(--s3);
	padding: var(--s1) var(--inset);
	overflow: visible;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.brand h1,
.brand strong,
.brand-text h1 {
	margin: 0;
	font-size: var(--fs-title3);
	font-weight: 590;
	letter-spacing: -0.03em;
	line-height: var(--lh-title);
}

.brand-sub,
.lede {
	margin: 0;
	font-size: var(--fs-footnote);
	font-weight: 400;
	color: var(--muted);
	letter-spacing: -0.01em;
}

.lede {
	margin: 0 0 var(--s3);
}

.brand-mark {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	corner-shape: superellipse(1.7);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}

.brand-mark svg,
.sf-icon {
	display: block;
	flex-shrink: 0;
}

/* Segmented control — iOS 26 capsule well */
.tabs,
.mode-toggle {
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	gap: 2px;
	padding: 3px;
	margin-bottom: var(--s3);
	border-radius: var(--radius-control);
	min-height: var(--hit);
}

.tab,
.mode-btn {
	min-height: 38px;
	border-radius: var(--radius-control) !important;
	font-size: var(--fs-subhead);
	font-weight: 590;
}

/* HIG: buttons are capsules; fields stay rounded-rect */
button,
.rl-chrome-btn,
.chrome-btn,
.btn-primary,
.btn-secondary,
.btn-success,
.class-chip,
.route-filter,
.idle-continue-btn {
	border-radius: var(--radius-control) !important;
}

.card,
.panel,
.filters,
.timetable-card {
	border-radius: var(--radius);
	padding: var(--s3);
}

.site-footer {
	margin-top: auto;
	padding-top: var(--s3);
	border-top: 0.5px solid var(--border);
	color: var(--muted);
}

.footer-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 16px;
}

.footer-link {
	font-size: var(--fs-footnote);
	font-weight: 400;
	color: var(--muted);
	text-decoration: none;
}

.footer-link:hover {
	color: var(--text);
}

/* Grouped list density */
.rl-large-title {
	font-size: var(--fs-large-title);
	font-weight: 700;
	letter-spacing: 0.37px;
	line-height: 1.2;
	margin: 0 0 6px;
}

button,
.rl-chrome-btn,
.class-chip,
.btn-primary,
select {
	font-family: inherit;
	border-radius: var(--radius-control);
}

select,
input[type='text'],
input[type='search'] {
	min-height: var(--hit);
	font-size: var(--fs-body);
	border-radius: 12px;
}

@media (max-width: 480px) {
	.page,
	#app {
		--inset: 16px;
	}
}

/* Crediti / Privacy / 404 — same chrome as the apps */
.credits-page {
	width: min(100%, 36rem);
}

.back-link,
.back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--muted);
	text-decoration: none;
	font-size: var(--fs-subhead);
	font-weight: 590;
	min-height: 44px;
}

.back-link:hover,
.back:hover {
	color: var(--text);
}

.credits-head,
.head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 8px 0 8px;
}

.credits-head h1,
.head h1 {
	margin: 0;
	font-size: var(--fs-title1);
	font-weight: 700;
	letter-spacing: 0.36px;
}

.credits-head .sub,
.head .sub {
	margin: 2px 0 0;
	font-size: var(--fs-subhead);
	color: var(--muted);
	font-weight: 400;
}

.credits-section,
.credits-page section {
	padding: 20px 0;
	border-top: 0.5px solid var(--border);
}

.credits-section h2,
.credits-page section h2 {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 590;
	letter-spacing: -0.08px;
	text-transform: uppercase;
	color: var(--muted);
}

.credits-section p,
.credits-page section p {
	margin: 0 0 8px;
	color: var(--muted);
	font-size: var(--fs-body);
	line-height: 1.35;
}

.credits-section a,
.credits-page section a {
	color: var(--accent, var(--accent-fallback, #007aff));
}

.credits-section strong,
.credits-page section strong {
	color: var(--text);
	font-weight: 590;
}