/* ---------- Tokens ---------- */

:root {
	/* Color */
	--bg: #F5F5F7;
	--bg-grouped: #F2F2F7;
	--surface: #FFFFFF;
	--text: #1D1D1F;
	--text-muted: #6E6E73;
	--separator: #ECECF0;
	--border: #E3E3E8;
	--accent: #0071E3;
	--accent-text: #FFFFFF;
	--link: #0066CC;
	--destructive: #D70015;
	--success: #34C759;
	--orange: #FF9F0A;
	--indigo: #5E5CE6;
	--fill: #F2F2F7;           /* secondary buttons, text fields */
	--track: #E8E8ED;          /* segmented control, progress tracks */
	--sidebar-line: #DCDCE1;
	--tile-tint-1: #E9EEF5;
	--tile-tint-2: #F3EEE6;
	--tile-tint-3: #F2F2F7;
	--qr-bg: #FFFFFF;
	--backdrop: rgba(0, 0, 0, 0.2);

	/* Rings (nearby radar) */
	--ring-outer-fill: #FAFAFC; --ring-outer-line: #EDEDF0;
	--ring-mid-fill: #F5F5F7;   --ring-mid-line: #EBEBEF;
	--ring-inner-fill: color-mix(in srgb, var(--accent) 8%, #FFFFFF);
	--ring-inner-line: color-mix(in srgb, var(--accent) 16%, #FFFFFF);

	/* Glass */
	--glass-bg: rgba(245, 245, 247, 0.78);
	--glass-filter: saturate(180%) blur(20px);

	/* Type */
	--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Radius */
	--r-tile: 9px; --r-button: 12px; --r-list: 12px;
	--r-card: 18px; --r-sheet: 24px; --r-panel: 28px; --r-pill: 999px;

	/* Shadow */
	--shadow-avatar: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 16px rgba(0, 0, 0, .08);
	--shadow-avatar-hover: 0 2px 4px rgba(0, 0, 0, .08), 0 10px 24px rgba(0, 0, 0, .12);
	--shadow-panel: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 28px rgba(0, 0, 0, .05);
	--shadow-sheet: 0 1px 2px rgba(0, 0, 0, .05), 0 18px 40px rgba(0, 0, 0, .08);
	--shadow-you: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent);
	--shadow-card: 0 1px 2px rgba(0, 0, 0, .04);

	/* Sizes (phone first) */
	--avatar: 56px;
	--you: 60px;

	color-scheme: light;
}

/* Dark: not part of the original design; same structure, swapped tokens. */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #000000;
		--bg-grouped: #000000;
		--surface: #1C1C1E;
		--text: #F5F5F7;
		--text-muted: #98989D;
		--separator: #2C2C2E;
		--border: #38383A;
		--link: #409CFF;
		--destructive: #FF453A;
		--success: #30D158;
		--fill: #2C2C2E;
		--track: #3A3A3C;
		--sidebar-line: #2C2C2E;
		--tile-tint-1: #2C3440;
		--tile-tint-2: #3A342C;
		--tile-tint-3: #2C2C2E;
		--backdrop: rgba(0, 0, 0, 0.5);
		--ring-outer-fill: #141416; --ring-outer-line: #232326;
		--ring-mid-fill: #18181B;   --ring-mid-line: #2A2A2E;
		--ring-inner-fill: color-mix(in srgb, var(--accent) 18%, #1C1C1E);
		--ring-inner-line: color-mix(in srgb, var(--accent) 30%, #1C1C1E);
		--glass-bg: rgba(22, 22, 24, 0.78);
		--shadow-avatar: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .4);
		--shadow-avatar-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 10px 24px rgba(0, 0, 0, .5);
		--shadow-panel: 0 1px 2px rgba(0, 0, 0, .4);
		--shadow-sheet: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px rgba(0, 0, 0, .5);
		color-scheme: dark;
	}
}

@media (min-width: 700px) {
	:root { --avatar: 68px; --you: 72px; }
}

@media (min-width: 1100px) and (pointer: fine), (min-width: 1367px) {
	:root { --avatar: 72px; --you: 76px; }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	min-height: 100dvh;
	background: var(--surface);
	color: var(--text);
	font: 400 16px/1.4 var(--font);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	overflow-x: hidden;
}

button, input, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

h1, h2, p { margin: 0; }

.ic {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

.glass {
	background: var(--glass-bg);
	-webkit-backdrop-filter: var(--glass-filter);
	backdrop-filter: var(--glass-filter);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.glass { background: var(--bg); }
}

.only-desktop, .only-tablet { display: none; }

/* ---------- Buttons ---------- */

.btn {
	min-height: 50px;
	padding: 0 22px;
	border: 0;
	border-radius: 14px;
	font-size: 17px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: filter .15s, transform .15s;
	text-decoration: none;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: default; }
.btn .ic { width: 16px; height: 16px; stroke-width: 2.2; }
.btn.primary { background: var(--accent); color: var(--accent-text); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.secondary { background: var(--fill); color: var(--link); font-weight: 500; }
.btn.destructive { background: var(--fill); color: var(--destructive); font-weight: 500; }

.text-btn {
	min-height: 44px;
	padding: 0 10px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--link);
	font-size: 17px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
}
.text-btn .ic { width: 18px; height: 18px; stroke-width: 2; }
.text-btn.small { font-size: 15px; }
.text-btn.danger { color: var(--destructive); }

.icon-btn {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--text);
	display: inline-grid;
	place-items: center;
}
.icon-btn .ic { width: 20px; height: 20px; stroke-width: 1.7; }
.icon-btn.round { border-radius: 50%; background: var(--fill); }

.name-btn {
	border: 0;
	padding: 0;
	background: none;
	color: var(--text);
	font-weight: 500;
	text-decoration: underline dotted var(--text-muted);
	text-underline-offset: 3px;
}

/* ---------- Chrome per layout ---------- */

.appbar, .sidebar, .activity-col { display: none; }

.phonebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: max(12px, env(safe-area-inset-top)) 16px 0;
}
.phonebar .text-btn { padding: 0 4px; }

.tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	display: flex;
	justify-content: space-around;
	padding: 8px 24px max(8px, env(safe-area-inset-bottom));
	border-top: 1px solid var(--border);
}
.tabbar button {
	min-width: 64px;
	min-height: 44px;
	border: 0;
	background: none;
	color: var(--text-muted);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	font-size: 10px;
	font-weight: 500;
}
.tabbar button[aria-selected="true"] { color: var(--accent); }
.tabbar .ic { stroke-width: 1.8; }

/* ---------- Views ---------- */

.layout { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

.panel { padding: 0 20px; }

.view { display: none; flex-direction: column; }
body[data-view="nearby"] .view-nearby,
body[data-view="paired"] .view-paired,
body[data-view="activity"] .view-activity { display: flex; }

body[data-view="activity"],
body[data-view="paired"] { background: var(--bg-grouped); }

.hero { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.hero h1 { font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.hero-dot { display: none; }
.hero-sub { font-size: 15px; color: var(--text-muted); }

.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 4px 4px 12px;
}
.section-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.view-activity .section-head h2 { font-size: 34px; letter-spacing: -0.02em; }

.footnote { margin: 12px 16px 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }

/* ---------- Nearby: radar ---------- */

.view-nearby { align-items: stretch; }

.room-chip, .pick-hint {
	align-self: center;
	margin-top: 16px;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 6px 0 14px;
	min-height: 36px;
	border-radius: var(--r-pill);
	background: var(--fill);
	font-size: 13px;
	color: var(--text-muted);
}
.room-chip strong { color: var(--text); font-weight: 600; letter-spacing: .04em; }
.room-chip .text-btn, .pick-hint .text-btn { min-height: 36px; font-size: 13px; padding: 0 8px; }
.pick-hint { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); font-weight: 500; }

.radar {
	position: relative;
	width: min(340px, calc(100vw - 40px));
	aspect-ratio: 1 / 1;
	margin: 28px auto 0;
	touch-action: manipulation;
}

.ring { position: absolute; border-radius: 50%; }
.ring-outer { inset: 3%; background: var(--ring-outer-fill); border: 1px solid var(--ring-outer-line); }
.ring-mid { inset: 19%; background: var(--ring-mid-fill); border: 1px solid var(--ring-mid-line); }
.ring-inner { inset: 34%; background: var(--ring-inner-fill); border: 1px solid var(--ring-inner-line); }

.you {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, calc(-1 * var(--you) / 2));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.you-disc {
	width: var(--you);
	height: var(--you);
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-text);
	display: grid;
	place-items: center;
	box-shadow: var(--shadow-you);
}
.you-disc .ic { width: calc(var(--you) * 0.43); height: calc(var(--you) * 0.43); }
.you-label { font-size: 13px; color: var(--text-muted); white-space: nowrap; }

.radar-empty {
	position: absolute;
	left: 50%;
	top: 72%;
	transform: translateX(-50%);
	width: 76%;
	text-align: center;
	font-size: 13px;
	color: var(--text-muted);
	display: flex;
	flex-direction: column;
	align-items: center;
}
.radar-empty .text-btn { font-size: 13px; min-height: 36px; }

.peer {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 104px;
	padding: 6px 4px;
	border: 0;
	border-radius: 16px;
	background: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	transition: left .3s ease-out, top .3s ease-out, opacity .2s ease-out, scale .2s ease-out;
	-webkit-touch-callout: none;
	user-select: none;
	-webkit-user-select: none;
}
.peer:focus-visible { outline: none; }
.peer.entering, .peer.leaving { opacity: 0; scale: .6; }

.avatar { position: relative; width: var(--avatar); height: var(--avatar); flex: none; }
.disc {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--surface);
	color: var(--text);
	display: grid;
	place-items: center;
	box-shadow: var(--shadow-avatar);
	transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.disc .ic { width: calc(var(--avatar) * 0.39); height: calc(var(--avatar) * 0.39); }
.peer:hover .disc { transform: translateY(-2px); box-shadow: var(--shadow-avatar-hover); }
.peer:focus-visible .disc { box-shadow: 0 0 0 3px var(--accent), var(--shadow-avatar); }
.peer.drop .disc { transform: scale(1.06); box-shadow: 0 0 0 3px var(--accent), var(--shadow-avatar-hover); }

.progress-ring {
	position: absolute;
	inset: -6px;
	width: calc(100% + 12px);
	height: calc(100% + 12px);
	transform: rotate(-90deg);
	opacity: 0;
	transition: opacity .2s;
	pointer-events: none;
}
.progress-ring circle { fill: none; stroke-width: 3; }
.progress-ring .track { stroke: var(--border); }
.progress-ring .bar { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.peer.busy .progress-ring { opacity: 1; }

.peer-name {
	max-width: 100%;
	font-size: 13px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.peer-sub {
	max-width: 100%;
	font-size: 12px;
	color: var(--text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: none;
}
.peer.busy .peer-sub { display: block; color: var(--link); }

body.picking .peer .disc { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-avatar); }
	50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent), var(--shadow-avatar); }
}

.overflow-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 16px 8px;
	max-height: 300px;
	overflow-y: auto;
	margin-top: 20px;
	padding: 8px 0;
}
.overflow-grid:empty { display: none; }
.overflow-grid .peer { position: relative; transform: none; justify-self: center; }

.you-phone { margin-top: 20px; text-align: center; font-size: 13px; color: var(--text-muted); }

.cta-row { display: flex; flex-direction: column; gap: 10px; padding-top: 24px; }

/* ---------- Grouped lists ---------- */

.list-card {
	border-radius: var(--r-card);
	background: var(--surface);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--separator);
}
.row:last-child { border-bottom: 0; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.row-title, .row-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-title { font-size: 15px; }
.row-meta { font-size: 13px; color: var(--text-muted); }
.row .text-btn { font-size: 15px; padding: 0 4px; flex: none; }
.row-check { width: 18px; height: 18px; color: var(--success); stroke-width: 2.2; }
.row.empty { color: var(--text-muted); font-size: 15px; justify-content: center; }

.row.active { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 16px; }
.row-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row-top .row-title { font-weight: 500; }
.row-top .row-meta { flex: none; }
.row-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row-bottom .text-btn { min-height: 28px; font-size: 13px; }

.bar { height: 4px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); transition: width .25s linear; }

.tile {
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: var(--r-tile);
	color: #FFFFFF;
	display: grid;
	place-items: center;
}
.tile .ic { width: 18px; height: 18px; stroke-width: 1.8; }
.tile.doc { background: var(--orange); }
.tile.image { background: var(--indigo); }
.tile.text { background: var(--success); }

.circle-icon {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	background: var(--fill);
	color: var(--text);
	display: grid;
	place-items: center;
}
.circle-icon .ic { width: 18px; height: 18px; stroke-width: 1.7; }

.status-online { color: var(--success); }

/* ---------- Paired view ---------- */

.view-paired { padding-bottom: 8px; }
.paired-inner { display: flex; flex-direction: column; gap: 24px; }
.view-paired .hero { padding-top: 4px; }
.group-section { display: flex; flex-direction: column; gap: 6px; }
.group-title-row { display: flex; align-items: center; justify-content: space-between; padding-right: 4px; }
.group-title {
	padding: 0 16px;
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--text-muted);
}
.group-title-row .text-btn { min-height: 32px; font-size: 15px; }
.paired-actions { display: flex; flex-direction: column; gap: 10px; }
.paired-note { padding: 0 16px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }

/* ---------- Sheets ---------- */

.sheet {
	border: 0;
	padding: 0;
	margin: auto auto 0;
	width: 100%;
	max-width: 100%;
	max-height: 90dvh;
	border-radius: var(--r-sheet) var(--r-sheet) 0 0;
	background: color-mix(in srgb, var(--surface) 96%, transparent);
	-webkit-backdrop-filter: var(--glass-filter);
	backdrop-filter: var(--glass-filter);
	color: var(--text);
	box-shadow: var(--shadow-sheet);
	overflow-y: auto;
}
.sheet[open] { animation: sheet-up .28s cubic-bezier(.2, .8, .2, 1); }
.sheet::backdrop { background: var(--backdrop); }
@keyframes sheet-up { from { transform: translateY(100%); } }

.sheet-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 28px 22px max(22px, env(safe-area-inset-bottom));
	text-align: center;
}
.sheet-body:focus { outline: none; }
.sheet-body.left { align-items: stretch; text-align: left; gap: 14px; padding-top: 22px; }
.sheet-title { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.sheet-sub { font-size: 14px; color: var(--text-muted); overflow-wrap: anywhere; }
.sheet-heading { display: flex; flex-direction: column; gap: 4px; }
.sheet .btn { width: 100%; min-height: 50px; border-radius: 14px; }
.sheet .btn.secondary { color: var(--text); }
.grid2 { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.sheet-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--fill);
	color: var(--text);
	display: grid;
	place-items: center;
}
.sheet-avatar .ic { width: 28px; height: 28px; }
.sheet-avatar.success { background: var(--success); color: #FFFFFF; }
.sheet-avatar.success .ic { width: 30px; height: 30px; stroke-width: 2.4; }

.thumbs { display: flex; gap: 8px; justify-content: center; }
.thumb {
	width: 64px;
	height: 64px;
	border-radius: 12px;
	overflow: hidden;
	display: grid;
	place-items: center;
	color: var(--text-muted);
}
.thumb:nth-child(1) { background: var(--tile-tint-1); }
.thumb:nth-child(2) { background: var(--tile-tint-2); }
.thumb:nth-child(3) { background: var(--tile-tint-3); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .ic { width: 22px; height: 22px; stroke-width: 1.7; }

.big-ring { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.big-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.big-ring circle { fill: none; stroke-width: 5; }
.big-ring .track { stroke: var(--track); }
.big-ring .bar { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.big-ring span { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.file-caption { font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }

.file-list { width: 100%; border-radius: 12px; background: var(--bg); text-align: left; max-height: 220px; overflow-y: auto; }
.file-list div { display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
.file-list div:last-child { border-bottom: 0; }
.file-list span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list span:last-child { flex: none; color: var(--text-muted); }

.message-box {
	width: 100%;
	max-height: 40dvh;
	overflow: auto;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--fill);
	text-align: left;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-size: 16px;
}

.nav-row { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.nav-row .text-btn { padding: 0; font-size: 15px; justify-self: start; }
.nav-row h2 { font-size: 15px; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.field-label { font-size: 13px; color: var(--text-muted); }
.field {
	width: 100%;
	padding: 12px 14px;
	border: 0;
	border-radius: 12px;
	background: var(--fill);
	font-size: 16px;
	line-height: 1.4;
}
textarea.field { height: 150px; resize: none; }
.field:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.code-field { text-align: center; font: 600 24px/1.2 var(--mono); letter-spacing: .25em; text-transform: uppercase; }

.segmented {
	display: flex;
	padding: 2px;
	border-radius: 9px;
	background: var(--track);
}
.segmented button {
	position: relative;
	flex: 1;
	height: 32px;
	padding: 0 18px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--text);
	font-size: 13px;
	white-space: nowrap;
}
.sheet .segmented { align-self: stretch; }
.sheet .segmented button { padding: 0 10px; }
.segmented button::after { content: ""; position: absolute; inset: -6px 0; }
.segmented button[aria-selected="true"] { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); font-weight: 500; }

.qr { width: min(200px, 60vw); padding: 8px; border-radius: 12px; background: var(--qr-bg); }
.qr svg { display: block; width: 100%; height: auto; }
.room-code { font: 700 28px/1.2 var(--mono); letter-spacing: .15em; }
.room-link { font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
.status-line { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); }
.status-line::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }

.swatches { display: flex; gap: 14px; }
.swatch {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: var(--swatch);
	box-shadow: inset 0 0 0 2px var(--surface);
}
.swatch[aria-checked="true"] { outline: 3px solid var(--swatch); outline-offset: 2px; }
.settings-about { font-size: 13px; line-height: 1.5; color: var(--text-muted); }

/* ---------- Toast & drop overlay ---------- */

.toast {
	position: fixed;
	left: 50%;
	bottom: calc(96px + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	z-index: 20;
	max-width: calc(100vw - 32px);
	padding: 10px 18px;
	border-radius: var(--r-pill);
	background: var(--text);
	color: var(--surface);
	font-size: 14px;
	box-shadow: var(--shadow-sheet);
	animation: toast-in .2s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

.drop-overlay {
	position: fixed;
	inset: 12px;
	z-index: 15;
	border: 3px dashed var(--accent);
	border-radius: var(--r-panel);
	background: color-mix(in srgb, var(--accent) 6%, transparent);
	pointer-events: none;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 40px;
}
.drop-overlay span { padding: 8px 16px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-text); font-weight: 600; font-size: 15px; }

/* ---------- Tablet (700–1099px): sidebar + main panel ---------- */

@media (min-width: 700px) {
	.only-phone, .phonebar, .tabbar, .you-phone { display: none; }
	.only-tablet { display: inline; }

	body, body[data-view] { background: var(--bg-grouped); }

	.layout {
		display: grid;
		grid-template-columns: 340px minmax(0, 1fr);
		height: 100dvh;
		padding-bottom: 0;
	}

	.sidebar {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: max(28px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
		border-right: 1px solid var(--sidebar-line);
		overflow-y: auto;
	}
	.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
	.sidebar-head h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
	.sidebar-actions { display: flex; align-items: center; gap: 4px; }
	.sidebar .icon-btn.round { background: var(--track); }
	.sidebar .group { border-radius: var(--r-list); background: var(--surface); overflow: hidden; }
	.sidebar .row { min-height: 56px; padding: 8px 16px; }
	.sidebar .row-title { font-size: 16px; }
	.sidebar .tile { width: 30px; height: 30px; border-radius: 8px; }
	.sidebar .tile .ic { width: 16px; height: 16px; stroke-width: 1.9; }
	.srow { width: 100%; border: 0; border-bottom: 1px solid var(--separator); background: var(--surface); text-align: left; }
	.srow:last-child { border-bottom: 0; }
	.srow.busy .row-meta { color: var(--link); }
	.you-note { margin: auto 16px 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }

	.panel {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 32px;
		background: var(--surface);
		overflow-y: auto;
	}
	.view-nearby { width: 100%; align-items: center; }
	.view-nearby.view { display: flex; }
	.view-paired.view, .view-activity.view { display: none; }

	.hero { align-items: center; text-align: center; gap: 6px; }
	.hero h1 { font-size: 40px; letter-spacing: -0.03em; }
	.hero-dot { display: inline; }
	.hero-sub { font-size: 17px; }

	.radar { width: min(480px, 100%); margin-top: 28px; }
	.peer { width: 116px; gap: 6px; }
	.peer-name { font-size: 14px; }

	.cta-row { flex-direction: row; justify-content: center; gap: 12px; padding-top: 28px; }
	.cta-row .btn { min-height: 48px; padding: 0 26px; border-radius: var(--r-pill); font-size: 16px; font-weight: 500; }
	.cta-row .btn.secondary { color: var(--text); }

	.sheet {
		margin: auto;
		width: min(360px, calc(100vw - 32px));
		border-radius: var(--r-sheet);
		max-height: calc(100dvh - 48px);
	}
	.sheet[open] { animation: sheet-in .2s ease-out; }
	.sheet-body { padding-bottom: 22px; }
	.sheet .btn { min-height: 44px; border-radius: var(--r-button); font-size: 15px; }
	@keyframes sheet-in { from { opacity: 0; transform: scale(.96); } }

	.toast { bottom: 24px; }
}

/* ---------- Desktop (≥1100px with a mouse/trackpad, or ≥1367px): header + panel + activity column ---------- */
/* Touch screens up to 1366px (every iPad, incl. landscape 1180px) keep the iPad layout. */

@media (min-width: 1100px) and (pointer: fine), (min-width: 1367px) {
	.only-tablet, .sidebar { display: none; }
	.only-desktop { display: inline; }

	body, body[data-view] { background: var(--bg); }

	.appbar {
		position: sticky;
		top: 0;
		z-index: 5;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: max(12px, env(safe-area-inset-top)) 32px 12px;
		border-bottom: 1px solid var(--border);
	}
	.brand { display: flex; align-items: center; gap: 10px; }
	.logo {
		width: 30px;
		height: 30px;
		border-radius: 9px;
		background: var(--accent);
		color: var(--accent-text);
		display: grid;
		place-items: center;
	}
	.logo .ic { width: 18px; height: 18px; stroke-width: 2.2; }
	.brand-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
	.appbar .segmented { flex: none; }
	.appbar .segmented button { flex: none; }
	.appbar-actions { display: flex; align-items: center; gap: 4px; }
	.appbar-actions .text-btn { font-size: 15px; padding: 0 14px; }

	.layout {
		display: flex;
		flex-wrap: wrap;
		gap: 32px;
		width: 100%;
		max-width: 1280px;
		height: auto;
		margin: 0 auto;
		padding: 40px 32px;
	}

	.panel {
		flex: 999 1 560px;
		min-width: 0;
		display: block;
		padding: 32px 24px;
		border-radius: var(--r-panel);
		box-shadow: var(--shadow-panel);
		overflow: visible;
	}
	.view-nearby.view, .view-paired.view { display: none; }
	body[data-view="nearby"] .view-nearby.view,
	body[data-view="activity"] .view-nearby.view,
	body[data-view="paired"] .view-paired.view { display: flex; }
	.view-paired { max-width: 640px; margin: 0 auto; }

	.hero { gap: 8px; }
	.hero h1 { font-size: 48px; line-height: 1.05; }
	.hero-sub { font-size: 19px; }

	.radar { width: min(540px, 100%); }
	.peer { width: 124px; gap: 8px; }
	.peer-sub { display: block; }

	.cta-row .btn { min-height: 44px; padding: 0 22px; font-size: 15px; }

	.activity-col {
		flex: 1 1 320px;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.activity-col .section-head { padding: 0 16px 12px; }

	.sheet { width: 340px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}