/* Too Much Smart
   The design system: tokens, then the page, header and menu, panels, type, lists,
   buttons, forms, notices and the footer. Every font size is in rem. */


/*======================================
  Tokens */

:root {
	--smart: #C40027;  --smart-text: #A30020;  --smart-press: #8A001B;  --smart-hover: rgba(20,24,30,0.08);
	--apps: #468C0D;   --apps-text: #2F6207;   --apps-press: #254F05;   --apps-hover: rgba(47,98,7,0.1);
	--stupid: #1C528C; --stupid-text: #1C528C; --stupid-press: #163F6C; --stupid-hover: rgba(28,82,140,0.1);

	--error: #A30020;
	--error-bg: #FDF3F5;

	--ink: #1D1F23;          /* body text */
	--ink-strong: #15171A;   /* headings, buttons */
	--text: #44474D;         /* secondary text, nav */
	--text-read: #3A3D42;    /* reading text */
	--muted: #5C6066;        /* 4.8:1 on the page */
	--comment: #6F737A;      /* 4.8:1 on white */

	--page: #DEE0E3;
	--surface: #FFFFFF;
	--bar: #E8EAED;
	--border: #CDD1D6;
	--rule: #E9EBEE;
	--well: #F3F4F6;
	--well-light: #F7F8F9;
	--line-input: #8E9298;   /* 3.1:1 on white */
	--line-button: #767A80;    /* 3.2:1 on the page */
	--line-foot: #C3C7CC;
	--line-raised: #9CA1A8;    /* a lifted panel (the prompt open) */

	/* The prompt's title bar is ink */
	--on-ink: #E8EAED;
	--on-ink-muted: #A9AEB5;
	--ink-line: #44474D;
	--ink-field: #2A2D32;
	--smart-on-ink: #FF8A9C; --apps-on-ink: #9FD36B; --stupid-on-ink: #8CB8EB;

	--mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
	--sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--fs-title: 2.125rem;
	--fs-heading: 1.75rem;
	--fs-sub: 1.375rem;
	--fs-lead: 1.1875rem;
	--fs-read-lg: 1.0625rem;
	--fs-read: 1rem;
	--fs-frame: 0.875rem;
	--fs-label: 0.8125rem;
	--fs-meta: 0.75rem;

	--radius: 12px;
	--radius-sm: 8px;
	--pill: 999px;
	--shadow: 0 1px 2px rgba(20,24,30,0.06), 0 6px 16px rgba(20,24,30,0.06);
	--shadow-raised: 0 20px 50px rgba(20,24,30,0.16);

	--gutter: 36px;
	--gap: 22px;
	--bar-h: 38px;
	--pad: 26px 30px;
	--pad-lg: 34px;

	/* The family a panel belongs to; .fam-* sets these. */
	--fam: var(--smart);
	--fam-text: var(--smart-text);
	--fam-press: var(--smart-press);
	--fam-hover: var(--smart-hover);
	--fam-on-ink: var(--smart-on-ink);
}
@media (max-width: 1099px) {
	:root { --gutter: 28px; }
}
@media (max-width: 899px) {
	:root { --gutter: 24px; --gap: 18px; }
}
@media (max-width: 639px) {
	:root { --gutter: 16px; --gap: 14px; --bar-h: 34px; --pad: 18px; --pad-lg: 22px 18px; }
}

.fam-smart {
	--fam: var(--smart); --fam-text: var(--smart-text); --fam-press: var(--smart-press); --fam-hover: var(--smart-hover);
	--fam-on-ink: var(--smart-on-ink);
}
.fam-apps {
	--fam: var(--apps); --fam-text: var(--apps-text); --fam-press: var(--apps-press); --fam-hover: var(--apps-hover);
	--fam-on-ink: var(--apps-on-ink);
	--tint-bg: #F6F9F1; --tint-bar: #E6EEDC; --tint-border: #C7D6B8; --tint-raised: #9AB287;
}
.fam-stupid {
	--fam: var(--stupid); --fam-text: var(--stupid-text); --fam-press: var(--stupid-press); --fam-hover: var(--stupid-hover);
	--fam-on-ink: var(--stupid-on-ink);
	--tint-bg: #F3F6FA; --tint-bar: #E2E9F2; --tint-border: #BFCDDE; --tint-raised: #8FA5C0;
}


/*======================================
  Base */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body {
	margin: 0;
	background: var(--page); color: var(--ink);
	font-family: var(--mono); font-size: var(--fs-frame); line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--smart); }

:focus-visible { outline: 2px solid var(--fam); outline-offset: 2px; }
[id] { scroll-margin-top: 16px; }

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

.skip {
	position: absolute; left: 16px; top: -100px; z-index: 100;
	padding: 10px 16px; border-radius: var(--pill);
	background: var(--ink-strong); color: #fff;
}
.skip:focus { top: 12px; color: #fff; }

.vh {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}


/*======================================
  Page and grid */

.page {
	position: relative;
	max-width: 1280px; margin: 0 auto; padding: 24px var(--gutter) 36px;
	display: flex; flex-direction: column; gap: var(--gap);
}
.page > main {
	display: flex; flex-direction: column; gap: var(--gap);
}

.grid {
	display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap);
}
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

@media (max-width: 899px) {
	.grid { grid-template-columns: minmax(0, 1fr); }
	.grid > * { grid-column: auto; }
	.wide-only { display: none !important; }
}

/* One small form on its own (Log In): a column down the middle */
.narrow {
	display: flex; flex-direction: column; gap: var(--gap);
	width: 100%; max-width: 560px; margin: 0 auto;
}


/*======================================
  Header */

.site-head {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 0 4px;
	font-size: var(--fs-frame);
}
.site-head .logo {
	display: flex; align-items: center; min-height: 44px;
}
.site-head .logo img { width: auto; height: 20px; }

.site-nav {
	display: flex; gap: 4px; color: var(--text);
}
.site-nav a { padding: 11px 10px; }
.site-nav a[aria-current] {
	color: var(--ink-strong); font-weight: 600; box-shadow: inset 0 -2px 0 var(--smart);
}

.account {
	display: flex; align-items: center; gap: 12px;
}
.account .alert { color: var(--error); font-weight: 600; }
.account .short { display: none; }

.me {
	display: flex; align-items: center; gap: 10px;
	min-height: 44px; max-width: 220px;
	color: var(--ink-strong); font-weight: 600;
}
.me[aria-current] { box-shadow: inset 0 -2px 0 var(--smart); }
.me .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.avatar {
	display: grid; place-items: center; flex: none;
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--smart); color: #fff;
	font-size: 0.6875rem; font-weight: 600; letter-spacing: -0.02em;
}
.avatar.mid { width: 44px; height: 44px; font-size: var(--fs-frame); }
.avatar.md { width: 64px; height: 64px; font-size: var(--fs-sub); font-weight: 500; }
.avatar.lg { width: 96px; height: 96px; font-size: var(--fs-heading); font-weight: 500; }

.menu-btn {
	display: none; place-items: center; flex: none;
	width: 44px; height: 44px; padding: 0;
	border: 1px solid var(--line-button); border-radius: 50%; background: transparent;
	cursor: pointer;
}
.menu-btn span, .menu-btn span::before, .menu-btn span::after {
	display: block; position: relative; width: 16px; height: 1.5px; background: var(--ink-strong);
}
.menu-btn span::before, .menu-btn span::after { content: ''; position: absolute; left: 0; }
.menu-btn span::before { top: -5px; }
.menu-btn span::after { top: 5px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* The phone menu: a panel that opens over the page under the header. */
.menu {
	position: absolute; left: var(--gutter); right: var(--gutter); top: 76px; z-index: 50;
}
.menu .panel { box-shadow: var(--shadow-raised); }
.menu-list a {
	display: flex; align-items: center; justify-content: space-between;
	min-height: 52px; padding: 0 18px;
	border-bottom: 1px solid var(--rule);
	font-size: var(--fs-read);
}
.menu-list a::after { content: '→'; color: var(--muted); }
.menu-list a.me-row::after { content: none; }
.menu-list .me-row { gap: 14px; justify-content: flex-start; min-height: 72px; background: var(--well-light); }
.menu-list .me-row b { display: block; font-weight: 600; color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-list .me-row small { display: block; font-size: var(--fs-label); color: var(--muted); }
.menu-list .me-row span:last-child { min-width: 0; }
.menu-foot {
	display: flex; gap: 10px; padding: 16px 18px;
}
.menu-foot .btn { flex: 1; }

@media (max-width: 899px) {
	.js .site-nav { display: none; }
	.js .menu-btn { display: grid; }
	.site-head { flex-wrap: wrap; }
	.js .site-head { flex-wrap: nowrap; }
	.js .account .logout { display: none; }
	.js .me .name { display: none; }
	.site-head .logo { margin-right: auto; }
}
@media (max-width: 639px) {
	.account .full { display: none; }
	.account .short { display: inline; }
}
@media (max-width: 359px) {
	.site-head .logo img { height: 16px; }
}


/*======================================
  Panels */

.panel {
	display: flex; flex-direction: column; min-width: 0;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
	box-shadow: var(--shadow);
	/* clip, not hidden: hidden makes the panel a scroll container, and then it lands flush against
	   the top of the window on an anchor, ignoring its scroll-margin */
	overflow: hidden; overflow: clip;
}
.panel.tint { background: var(--tint-bg); border-color: var(--tint-border); }

/* Title bar: the family dot, a divider, then the command. */
.bar {
	display: flex; align-items: center; gap: 10px; flex: none;
	height: var(--bar-h); padding: 0 14px 0 6px;
	background: var(--bar); border-bottom: 1px solid var(--border);
	font-size: var(--fs-label); color: #55595F;
}
.tint > .bar { background: var(--tint-bar); border-color: var(--tint-border); color: var(--fam-text); }

.dot {
	display: grid; place-items: center; flex: none;
	width: 28px; height: 28px; padding: 0;
	border: 0; border-radius: 50%; background: transparent;
}
.dot::before {
	content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--fam);
}
button.dot { cursor: pointer; }
button.dot:hover, button.dot:focus-visible { background: var(--fam-hover); }
button.dot:focus-visible { outline-offset: 0; }
.dot[aria-expanded="true"]::before { background: radial-gradient(circle, #fff 0 2px, var(--fam) 2.5px); }

.cmd {
	position: relative; min-width: 0; padding-left: 11px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmd::before {
	content: ''; position: absolute; left: 0; top: 50%;
	width: 1px; height: 16px; margin-top: -8px;
	background: var(--border);
}
.tint > .bar .cmd::before { background: var(--tint-border); }

.cursor {
	display: inline-block; width: 0.6em; height: 1.05em; margin-left: 4px;
	background: currentColor; vertical-align: -0.2em;
}

.body {
	display: flex; flex-direction: column; gap: 16px; flex: 1;
	padding: var(--pad);
}
.body.lg { padding: var(--pad-lg); }

/* A form's buttons along the bottom of its panel */
.panel-foot {
	display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px 12px;
	padding: 16px 34px; border-top: 1px solid var(--rule); background: var(--well-light);
}
.panel-foot.split { justify-content: space-between; }
.panel-foot .read { flex: 1 1 260px; margin-right: auto; }
@media (max-width: 639px) {
	.panel-foot { padding: 16px 18px; }
	.panel-foot > .btn, .panel-foot > .subtle { flex: 1 1 auto; justify-content: center; }
}

/* Tabs along a panel's bottom edge; they scroll inside the panel on a phone. */
.tabs {
	display: flex; align-items: stretch;
	border-top: 1px solid var(--border); background: var(--well);
	font-size: var(--fs-frame);
	overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tint > .tabs { border-color: var(--tint-border); background: color-mix(in srgb, var(--tint-bar) 60%, #fff); }
.tabs a {
	padding: 13px 24px; white-space: nowrap;
	color: var(--text); border-right: 1px solid var(--border);
}
.tint > .tabs a { border-color: var(--tint-border); }
.tabs a[aria-current] {
	background: #fff; color: var(--ink-strong); font-weight: 600; box-shadow: inset 0 -2px 0 var(--fam);
}
/* More tabs off to the right or the left: the JS adds .more and .less while there are. */
.tabs.more {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}
.tabs.less {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 48px);
	mask-image: linear-gradient(90deg, transparent, #000 48px);
}
.tabs.less.more {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
@media (max-width: 639px) {
	.tabs a { display: flex; align-items: center; min-height: 44px; padding: 0 18px; }
}


/*======================================
  The prompt: the family dot turns the title bar into a live prompt (smart_v200.js). The bar turns
  to ink, the panel lifts, and its body dims until a command's output takes its place. */

.panel.prompting { border-color: var(--line-raised); box-shadow: var(--shadow-raised); }
.panel.tint.prompting { border-color: var(--tint-raised); }
.prompting > .bar { background: var(--ink-strong); border-color: var(--ink-strong); color: var(--on-ink); }
.prompting > .bar button.dot:hover, .prompting > .bar button.dot:focus-visible { background: rgba(255,255,255,0.14); }
.prompting > .bar :focus-visible { outline-color: var(--fam-on-ink); }
.prompting > [inert] { opacity: 0.35; }
/* an egg playing on the body (shred) shows it at full strength */
.prompting.egg > [inert] { opacity: 1; }

.prompt {
	position: relative; display: flex; align-items: center; gap: 0.6em; flex: 1; min-width: 0;
	margin: 0; padding-left: 11px;
}
.prompt::before {
	content: ''; position: absolute; left: 0; top: 50%;
	width: 1px; height: 16px; margin-top: -8px;
	background: var(--ink-line);
}
/* The prompt is just >, in the family's color */
.ps1 { flex: none; color: var(--fam-on-ink); font-weight: 600; }

.prompt-field {
	position: relative; display: flex; align-items: center; flex: 1; min-width: 0; height: 28px;
}
.prompt-field input {
	width: 100%; min-width: 0; height: 100%; padding: 0;
	border: 0; background: transparent; color: #fff;
	caret-color: transparent; outline: none;
}
/* The steady block cursor: drawn over its character, which shows through dark */
.prompt-caret {
	position: absolute; top: 50%; width: 1ch; height: 1.3em; transform: translateY(-50%);
	background: var(--on-ink); mix-blend-mode: difference; pointer-events: none;
}

.prompt-esc {
	display: grid; place-items: center; flex: none;
	height: 28px; padding: 0 2px; border: 0; background: transparent; cursor: pointer;
}
.prompt-esc span {
	padding: 0 6px; border: 1px solid #55595F; border-radius: 4px;
	font-size: 0.6875rem; line-height: 1.5; color: var(--on-ink-muted);
}
.prompt-esc:hover span { border-color: var(--on-ink-muted); color: var(--on-ink); }

/* The output, in the body's place and at its height; a long one scrolls inside the panel */
.prompt-out {
	display: flex; flex-direction: column; gap: 4px; flex: 1 0 auto;
	padding: 22px 26px; overflow-y: auto; overscroll-behavior: contain;
	white-space: pre-wrap; overflow-wrap: anywhere;
}
.prompt-out > * { flex: none; }
.prompt-out:focus-visible { outline-offset: -2px; }
.prompt-out.more {
	-webkit-mask-image: linear-gradient(#000 calc(100% - 36px), transparent);
	mask-image: linear-gradient(#000 calc(100% - 36px), transparent);
}
.prompt-out .ls { max-width: 60ch; margin-top: 4px; }
/* names keep their width; a long note wraps beside them */
.prompt-out .ls > li > a { grid-template-columns: 20px max-content minmax(0, 1fr); }
.prompt-out .ls .status { text-align: right; }

.o-echo { color: var(--muted); }
.o-err { color: var(--error); }
.o-note { color: var(--text); }
.o-note b { font-weight: 600; color: var(--ink-strong); }
/* connecting: ink, since red is for errors; the bar is the family's */
.o-go { color: var(--ink-strong); }
.o-meta { font-size: var(--fs-meta); color: var(--muted); }
.o-progress {
	display: block; height: 3px; margin: 6px 0; border-radius: 2px; overflow: hidden;
	background: color-mix(in srgb, var(--fam) 20%, #fff);
}
.o-progress span { display: block; width: 0; height: 100%; background: var(--fam-text); transition: width 0.5s ease-out; }

/* help: each command beside what it does. A tap anywhere on a line runs it, or starts it in the
   field (the button's ::after covers the line). */
.o-help { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 3ch; margin: 0 -8px; }
.o-help > div {
	position: relative; display: grid; grid-template-columns: subgrid; grid-column: 1 / -1;
	padding: 2px 8px; border-radius: 6px;
}
@media (hover: hover) {
	.o-help > div:hover { background: var(--fam-hover); }
}
.o-help dt { font-weight: 600; color: var(--ink-strong); }
.o-help dd { color: var(--text); }
.o-help button { padding: 0; border: 0; background: none; font-weight: inherit; text-align: left; cursor: pointer; }
.o-help button::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.o-help button:focus-visible { outline: none; }
.o-help button:focus-visible::after { outline: 2px solid var(--fam); outline-offset: -2px; }

/* history: numbered, the numbers in comment gray */
.o-hist { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 2ch; }
.o-hist .comment { text-align: right; }

/* A field the iPhone won't zoom into */
@media (pointer: coarse) {
	.prompt-field { font-size: 1rem; }
}
@media (max-width: 639px) {
	/* the bar grows to hold a filled field; the esc chip goes */
	.prompting > .bar { height: 48px; gap: 8px; padding: 0 10px 0 6px; }
	.prompt { gap: 8px; padding-left: 0; }
	.prompt::before, .prompt-esc { display: none; }
	.prompt-field {
		height: 36px; padding: 0 10px; border-radius: 6px;
		background: var(--ink-field); font-size: 1rem;
	}
	.prompt-out { padding: 16px 18px; }
	.o-help, .o-help > div { display: block; }
	.o-help > div { padding: 7px 8px; }
	.o-help dt, .o-help dd { display: inline; }
	.o-help dt::after { content: ' '; }
}


/*======================================
  Type */

h1, h2, h3, h4 { font-weight: 500; color: var(--ink-strong); }

.title { font-size: var(--fs-title); line-height: 1.1; letter-spacing: -0.035em; }
.heading { font-size: var(--fs-heading); line-height: 1.15; letter-spacing: -0.03em; }
.subheading { font-size: var(--fs-sub); line-height: 1.2; letter-spacing: -0.03em; }

/* Reading text never runs wider than a comfortable line, even in a full-width panel. */
.lead {
	max-width: 70ch;
	font-family: var(--sans); font-size: var(--fs-lead); line-height: 1.5; color: var(--text);
	text-wrap: pretty;
}
.read {
	max-width: 75ch;
	font-family: var(--sans); font-size: var(--fs-read); line-height: 1.6; color: var(--text-read);
	text-wrap: pretty;
}
.read.lg { font-size: var(--fs-read-lg); }
.read > * + * { margin-top: 14px; }
.read a, a.inline {
	color: var(--fam-text); text-decoration: underline; text-underline-offset: 3px;
}
.read ul { padding-left: 1.25em; list-style: square; }
.read li + li { margin-top: 6px; }

/* One line, cut short with an ellipsis (a long name; the full text goes in a title); on a phone,
   where even a short name runs out of room, it wraps instead */
.one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 0.1em; }
@media (max-width: 639px) {
	.one-line { white-space: normal; overflow-wrap: break-word; }
}

.label { font-size: var(--fs-label); }
.meta { font-size: var(--fs-meta); }
.muted { color: var(--muted); }
.comment { color: var(--comment); }
.fam-color { color: var(--fam-text); }

@media (max-width: 639px) {
	.title { font-size: var(--fs-heading); }
	.heading { font-size: var(--fs-sub); }
}


/*======================================
  Lists */

/* A row with a family dot, a name and a status: ls -l ~/products */
.ls { display: flex; flex-direction: column; }
.ls > li > a, .ls > li > span {
	display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center;
	padding: 9px 0; border-bottom: 1px solid var(--rule);
}
.ls > li:last-child > * { border-bottom: 0; }
.ls .name { color: var(--ink-strong); }
.ls .status { color: var(--muted); }
.ls .status.on { color: var(--fam-text); }

.mark {
	display: inline-block; flex: none;
	width: 12px; height: 12px; border-radius: 50%; background: var(--fam);
}
.mark.sm { width: 10px; height: 10px; }

.legend {
	display: flex; gap: 16px; align-items: center; margin-top: 14px;
	font-size: var(--fs-meta); color: var(--muted);
}
.legend span { display: flex; gap: 6px; align-items: center; }

/* Keys and values: systemctl status */
.kv {
	display: grid; grid-template-columns: 130px minmax(0, 1fr); row-gap: 6px;
}
.kv dt { color: var(--muted); }
.kv dd { overflow-wrap: anywhere; }
@media (max-width: 639px) {
	.kv { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
	.kv dd + dt { margin-top: 8px; }
}

/*======================================
  Buttons: three kinds
  .launch  goes into a product (an app, a game): ink, with the family's ❯ segment;
           .launch.off is a product not open yet ("Coming soon")
  .btn     submits a form: a solid pill
  .subtle  a quieter call to action: outlined, the same shape as .launch */

.launch {
	display: inline-flex; align-items: stretch;
	min-height: 48px; border-radius: var(--radius); overflow: hidden;
	background: var(--ink-strong); color: #fff;
	box-shadow: 0 8px 20px rgba(20,24,30,0.2);
	font-size: var(--fs-frame); font-weight: 600; line-height: 1.2;
}
.launch:hover { background: #2A2D32; color: #fff; }
/* Not open yet: neutral, flat, and not a link. */
.launch.off, .launch.off:hover { background: #E1E3E6; color: var(--text); box-shadow: none; cursor: default; }
.launch.off .go { background: #A9AEB5; color: #fff; }
.launch .go {
	display: grid; place-items: center; padding: 0 15px;
	background: var(--fam-text); font-size: var(--fs-read); font-weight: 600;
}
.launch .txt { display: flex; align-items: center; padding: 12px 18px 12px 16px; }
/* Only where Enter really launches (a product page); never on a touch screen. */
.launch .key { display: grid; place-items: center; padding-right: 14px; }
.launch .key span {
	padding: 1px 9px; border: 1px solid var(--comment); border-bottom-width: 3px; border-radius: 6px;
	font-size: var(--fs-label); line-height: 1.5; color: #D2D5D9;
}
@media (hover: none), (max-width: 639px) {
	.launch .key { display: none; }
}
@media (max-width: 639px) {
	.actions > .launch { flex: 1 1 100%; }
}

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 22px;
	border: 0; border-radius: var(--pill);
	background: var(--ink-strong); color: #fff;
	font-family: var(--mono); font-size: var(--fs-frame); font-weight: 600; line-height: 1.2;
	text-align: center; cursor: pointer;
}
.btn:hover { background: #2A2D32; color: #fff; }
.btn.fam { background: var(--fam-text); }
.btn.fam:hover { background: var(--fam-press); }
.btn[disabled], .btn[aria-busy="true"] { cursor: default; }

.spinner {
	display: inline-block; width: 12px; height: 12px; border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
	animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.subtle {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 48px; padding: 0 18px; white-space: nowrap;
	border: 1px solid var(--line-button); border-radius: var(--radius);
}
button.subtle { background: transparent; font-family: var(--mono); font-size: var(--fs-frame); cursor: pointer; }
.subtle.fam { border-color: var(--fam-text); color: var(--fam-text); }
.subtle.fam:hover { background: var(--fam-hover); color: var(--fam-text); }

.actions {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
}
.actions-end { margin-top: auto; }


/*======================================
  Columns inside a panel: one product each, side by side, equal */

.cols {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1;
}
.cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col {
	display: flex; flex-direction: column; gap: 16px; min-width: 0;
	padding: 30px;
	border-left: 1px solid var(--tint-border, var(--rule));
}
.col:first-child { border-left: 0; }
.col-head { display: flex; align-items: center; gap: 16px; }
.col-head > div { display: flex; flex-direction: column; min-width: 0; }
.col-head a:hover { color: var(--fam-text); }

.status { font-size: var(--fs-label); color: var(--muted); }
.status.on { color: var(--fam-text); }

/* A screenshot in a column */
.shot {
	aspect-ratio: 16 / 9; overflow: hidden;
	border-radius: 10px; border: 1px solid var(--tint-border, var(--border)); background: #0B0D12;
}
.shot img { width: 100%; height: 100%; object-fit: cover; }

/* A screenshot that fills a panel's body, centered on the panel's white */
.body.screens { justify-content: center; }
.screens img { width: 100%; height: auto; }

@media (max-width: 899px) {
	.cols, .cols.two { grid-template-columns: minmax(0, 1fr); }
	.col { border-left: 0; border-top: 1px solid var(--tint-border, var(--rule)); padding: 24px; }
	.col:first-child { border-top: 0; }
}
@media (max-width: 639px) {
	.col { padding: 18px; }
}


/*======================================
  Store badges: Apple's minimum is 40px tall */

.badge { display: inline-flex; flex: none; }
.badge img { width: auto; height: 40px; }


/*======================================
  Forms */

.field { display: flex; flex-direction: column; gap: 8px; }
.field > label, .field > .label { font-size: var(--fs-label); color: var(--text); }

.input {
	width: 100%; height: 48px; padding: 0 16px;
	border: 1px solid var(--line-input); border-radius: var(--radius-sm); background: #fff;
	font-family: var(--sans); font-size: 1rem; color: var(--ink-strong);
}
.input::placeholder { color: var(--comment); opacity: 1; }
textarea.input { height: auto; min-height: 7.5rem; padding: 12px 16px; line-height: 1.5; resize: vertical; }
.input:focus { outline: 2px solid var(--fam); outline-offset: 2px; border-color: var(--fam-text); }
.field.invalid .input { border: 2px solid var(--error); }

/* A file to attach: the browser's own control, its button outlined like .subtle */
.input-file {
	max-width: 100%;
	font-family: var(--sans); font-size: var(--fs-read); color: var(--text-read);
}
.input-file::file-selector-button {
	min-height: 44px; margin-right: 14px; padding: 0 18px;
	border: 1px solid var(--line-button); border-radius: var(--radius); background: transparent;
	font-family: var(--mono); font-size: var(--fs-frame); color: var(--ink-strong);
	cursor: pointer;
}
.input-file::file-selector-button:hover { background: var(--smart-hover); }
.field.invalid .input-file::file-selector-button { border: 2px solid var(--error); }

.help {
	font-family: var(--sans); font-size: var(--fs-label); color: var(--muted);
}

/* Checkboxes: the box, then the words it agrees to */
.choices { display: flex; flex-direction: column; gap: 10px; }
.choice {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
	font-family: var(--sans); font-size: var(--fs-read); line-height: 1.5; color: var(--text-read);
	cursor: pointer;
}
.choice:hover { border-color: var(--line-input); }
.choice input {
	flex: none; width: 20px; height: 20px; margin: 2px 0 0;
	accent-color: var(--fam-text); cursor: pointer;
}
.choice.invalid { border: 2px solid var(--error); padding: 11px 13px; background: var(--error-bg); }

.err {
	display: flex; align-items: center; gap: 8px;
	font-family: var(--sans); font-size: var(--fs-frame); color: var(--error);
}
.err::before {
	content: '!'; display: grid; place-items: center; flex: none;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--error); color: #fff;
	font-family: var(--mono); font-size: var(--fs-meta); font-weight: 600;
}

/* Fields side by side, their inputs level even when only one has an error; .wide takes the whole row */
.fields {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; align-items: end;
}
.fields > .wide { grid-column: 1 / -1; }
@media (max-width: 639px) {
	.fields { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* The PIN from an email: one field (iOS offers it from Mail), mono and spaced out */
.input.pin {
	width: 15rem; max-width: 100%; height: 64px; padding: 0 20px; border-radius: 10px;
	font-family: var(--mono); font-size: 1.75rem; letter-spacing: 0.5em;
}

/* A form beside the words about it */
.body.form-split {
	display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px;
}
.form-split > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.form-split > .form-main { gap: 22px; }
@media (max-width: 899px) {
	.body.form-split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/*======================================
  Notices */

.notice {
	display: flex; align-items: flex-start; gap: 14px;
	padding: 16px 18px; border-radius: 10px;
	border: 1px solid var(--tint-border, var(--border)); background: var(--tint-bg, var(--well-light));
}
.notice .check {
	display: grid; place-items: center; flex: none;
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--fam-text); color: #fff; font-weight: 600;
}
.notice h2, .notice h3 { font-size: var(--fs-read); }
.notice b { display: block; font-weight: 600; font-size: var(--fs-read); color: var(--ink-strong); }
.notice p { font-family: var(--sans); font-size: var(--fs-read); line-height: 1.5; color: var(--text-read); overflow-wrap: anywhere; }
.notice.error { border: 2px solid var(--error); background: var(--error-bg); }
.notice.error b, .notice.error p { color: var(--error); }
.notice a { text-decoration: underline; text-underline-offset: 3px; }
.notice > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notice.error ul { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.notice.error li, .notice.error a { font-family: var(--sans); font-size: var(--fs-read); color: var(--error); }
.notice.error .check { background: var(--error); }
/* Done: green, whichever family the page is in */
.notice.ok { border-color: #9AB287; background: #F6F9F1; }
.notice.ok .check { background: var(--apps-text); }


/*======================================
  Product marks: a round icon in the family color */

.icon {
	display: grid; place-items: center; flex: none;
	width: 64px; height: 64px; border-radius: 50%; background: var(--fam);
	color: #fff; font-size: var(--fs-sub); font-weight: 500;
}
.icon img { width: 100%; height: 100%; }
.icon.sm { width: 44px; height: 44px; font-size: var(--fs-read); }
.icon.lg { width: 120px; height: 120px; font-size: var(--fs-title); }


/*======================================
  Product pages: the header panel (icon, name, launch, then tabs) and where to get it.
  The account's header is the same panel, with the avatar in place of the icon. */

.product-head {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; align-items: center;
	padding: 32px 34px;
}
.product-name { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.product-title { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.product-name .lead { color: var(--text-read); }
/* No icon and no launch (the legal documents): the name takes the whole width */
.product-head.plain { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 899px) {
	.product-head { grid-template-columns: auto minmax(0, 1fr); gap: 20px 28px; padding: 28px 30px; }
	.product-head .icon.lg { width: 96px; height: 96px; }
	.product-go { grid-column: 2; }
}
@media (max-width: 639px) {
	/* the icon beside the label and name; the tagline and launch take the full width */
	.product-head { grid-template-columns: 72px minmax(0, 1fr); gap: 14px 16px; padding: 20px 18px; }
	.product-head .icon.lg { width: 72px; height: 72px; }
	.product-name { display: contents; }
	.product-title { gap: 2px; }
	.product-name .lead, .product-go { grid-column: 1 / -1; }
	.product-name .lead { font-size: var(--fs-read-lg); }
	.product-head .avatar.lg { width: 72px; height: 72px; font-size: var(--fs-sub); }
}
@media (max-width: 359px) {
	.product-head { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; }
	.product-head .icon.lg, .product-head .avatar.lg { width: 56px; height: 56px; }
	.product-head .avatar.lg { font-size: var(--fs-read-lg); }
}

/* Where to get it: one row per platform, its name, where, then a way in */
.where { border-top: 1px solid var(--rule); }
.where li {
	display: grid; grid-template-columns: 20px 100px minmax(0, 1fr) auto; gap: 12px; align-items: center;
	min-height: 72px; padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.where li:last-child { border-bottom: 0; padding-bottom: 0; }
.where b { font-weight: 600; color: var(--ink-strong); }

@media (max-width: 639px) {
	.where li { grid-template-columns: 20px auto minmax(0, 1fr); gap: 10px; padding: 14px 0; }
	.where li > :last-child { grid-column: 1 / -1; justify-self: start; }
	.where li > .subtle { justify-self: stretch; justify-content: center; }
}


/*======================================
  Listings: one product per panel, its words beside its picture (/apps/, /games/). On a tablet or
  phone the picture goes under the words, above the way in. */

.body.listing {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 40px;
}
.listing-text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.game-title { display: flex; flex-direction: column; }
/* the frame's one cell is its own size, so a picture fits inside it whatever its shape */
.listing-pic { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); aspect-ratio: 16 / 10; min-width: 0; }
.listing-pic img { width: 100%; height: 100%; object-fit: contain; }
/* a game's picture in the homepage's dark frame; a photo fills it; art sits on its own color
   (--art-bg, set beside the picture) */
.listing-pic.dark, .listing-pic.photo, .listing-pic.art { overflow: hidden; border-radius: 14px; }
.listing-pic.dark { padding: 28px; background: #26272A; }
.listing-pic.photo { background: #0B0D12; }
.listing-pic.photo img { object-fit: cover; }
.listing-pic.art { background: var(--art-bg, var(--well)); }

@media (max-width: 899px) {
	.body.listing { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.listing .listing-text { display: contents; }
	.listing .listing-pic { order: 1; width: 100%; max-width: 560px; }
	.listing .listing-text > .actions { order: 2; margin-top: 8px; }
}
@media (max-width: 639px) {
	.listing-pic.dark { padding: 18px; }
}


/*======================================
  Footer */

.site-foot {
	display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 32px;
	padding: 22px 4px 0; border-top: 1px solid var(--line-foot);
	font-size: var(--fs-label); color: var(--text);
}
.site-foot > div { display: flex; flex-direction: column; }
.site-foot img { align-self: flex-start; width: auto; height: 16px; margin: 6px 0 10px; }
.site-foot .head { padding: 6px 0; color: var(--muted); }
.site-foot a { padding: 6px 0; }
.site-foot a[aria-current] { color: var(--ink-strong); font-weight: 600; }

@media (max-width: 899px) {
	.site-foot { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
	.site-foot > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
	.site-foot a { display: flex; align-items: center; min-height: 44px; padding: 0; }
}
@media (max-width: 359px) {
	.site-foot { grid-template-columns: minmax(0, 1fr); }
}