/* aws-web-hono: the layout the skeleton's pages add on top of ../shared/theme.css. Every value
   is a token (docs/design/design-system.md): no hex, no style attributes, 44px click targets,
   fluid containers so 320, 390 and 1440 all render without a horizontal scroll. */

.page {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

/* Header: sticky, the user's initials, the signed-in line, the sign-out form. */
.topbar {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	padding-top: env(safe-area-inset-top);
}
.topbar-inner {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--page-gutter);
	max-width: 1200px;
	margin: 0 auto;
}
.topbar-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text);
}
.topbar-form {
	margin: 0;
	flex: none;
}
.topbar-button {
	min-height: var(--touch);
}

/* Sign-in: one card, centered, fluid up to 420px. */
.signin {
	display: grid;
	place-items: center;
	min-height: 60vh;
}
.signin-card {
	width: 100%;
	max-width: 420px;
	gap: var(--space-4);
	padding: var(--space-6);
}
.signin-title {
	margin: 0;
}
.notice {
	margin: 0;
	padding: var(--space-3);
	border-radius: var(--radius-md);
	background: var(--amber-soft);
	color: var(--amber);
}
.field {
	display: grid;
	gap: var(--space-2);
}
.field-label {
	font-size: var(--type-size-body);
	line-height: var(--type-lh-body);
	color: var(--text-dim);
}
.field input,
.field select {
	font: inherit;
	/* 16px keeps phone browsers from zooming the field (design-system.md, "Carried over"). */
	font-size: 16px;
	width: 100%;
	min-height: var(--touch);
	padding: 0 var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
	color: var(--text);
}
.signin-button {
	min-height: var(--touch);
}

/* Home */
.home {
	gap: var(--space-4);
}
.greeting {
	margin: 0;
	overflow-wrap: anywhere;
}
.scope-title {
	margin: 0;
	font-size: var(--type-size-caption);
	line-height: var(--type-lh-caption);
	letter-spacing: var(--type-track-caps);
	text-transform: uppercase;
	color: var(--text-dim);
}
.scope-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-1);
}
.scope-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--touch);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	color: var(--text);
}
.scope-name {
	min-width: 0;
	overflow-wrap: anywhere;
}
.scope-item.child {
	padding-left: var(--space-8);
	color: var(--text-dim);
}
.scope-item.selected {
	background: var(--accent-soft);
	color: var(--accent-text);
}
.pill.own {
	background: var(--surface-3);
	color: var(--text-dim);
}
.empty {
	margin: 0;
	color: var(--text-mute);
}
.plain p {
	margin: 0;
}

/* Tab bar: theme.css fixes it to the bottom of the phone. A section not built yet stays a real
   link, dimmed and titled, so nothing is faked and nothing is removed. */
.tab {
	min-height: var(--touch);
	padding: 0 var(--space-1);
	text-align: center;
	overflow-wrap: anywhere;
}
.tab.active {
	color: var(--accent-text);
}
.tab[aria-disabled='true'] {
	color: var(--text-mute);
	pointer-events: none;
}
.tab:focus-visible {
	box-shadow: inset var(--shadow-focus);
}

/* The rail layout: the tab bar sits under the header instead of at the bottom. */
@media (min-width: 1024px) {
	body {
		padding-bottom: var(--space-6);
	}
	.tabbar {
		position: static;
		height: auto;
		padding-bottom: 0;
		border-top: 0;
		border-bottom: 1px solid var(--border);
		max-width: 1200px;
		margin: 0 auto;
	}
	.tab {
		min-height: 56px;
	}
}