/* hdln.gg: the one stylesheet (plan 3.13 and 10; docs/plan-1f.md). The look is headlineGG's: the tokens are the
   program's HeadlineStyle.h by name (docs/reference/look.md says each one's job), the kit is its Kit and Bevel
   (src/vectube/Bevel.cpp: the edge, the band, the window, the box, the well). Solid slabs, square corners, no
   outlines, no glow; a color only where it has a job. Dark only in phase 1, as the program is: a light set is a
   second :root block with the same names. The Vue islands carry no CSS of their own: everything is styled here.
   Order: the tokens; the ground and the type; the kit; the top bar; then each page, only what is its own.
   internal/web/look_test.go holds this file to those rules. */

:root {
	/* the ground */
	--ink: #0a090c;        /* kInk: the darkest; the top bar; a dark slab's lower edge */
	--screen: #1e1b22;     /* kScreen: the ground where it is one color */
	--ground-a: #1b181f;   /* kGroundA / kGroundB: the ground's 4 px checker */
	--ground-b: #221f26;
	/* slabs: a raised thing is a lighter slab, never an outline */
	--slab: #2c2732;       /* kSlab: a window's face */
	--slab-hi: #38323f;    /* kSlabHi: a raised thing at rest; a floating thing's face */
	--slab-top: #423c47;   /* kSlabTop: under the pointer */
	--slab-lo: #17151a;    /* kSlabLo: pressed in; a well; a picture's ground; a field */
	--on-face: #17151a;    /* kOnFace: the one that is ON is pressed in dark ... */
	--on-text: #efe6d2;    /* kOnText: ... with paper letters */
	/* text */
	--paper: #efe6d2;      /* kPaper: text */
	--label: #c2b8a6;      /* kLabel: a row's word on a window */
	--muted: #8c8475;      /* kMuted: hints; a dark slab's lit edge */
	--faint: #585249;      /* kFaint: the least */
	--danger: #ff8a73;     /* kDanger: the text of an action that cannot be taken back */
	/* tally red: BACK, leave, what cannot be taken back; the caret */
	--tally: #f03228;
	--tally-dim: #9e211a;
	--band: #96221c;       /* kBand: a window's title band */
	--tally-off: #381c1a;
	--amber: #e8a33d;      /* something needs you */
	/* go: the ONE forward action on a screen (DOWNLOAD, SEND, APPROVE) */
	--go: #48c470;
	--go-dim: #267c46;
	--go-off: #1e3426;
	/* blend: putting things together (none of the site's yet) */
	--blend: #9e7cff;
	--blend-dim: #604aa8;
	--blend-off: #2c2448;

	/* made from the tokens by the program's own rule (Bevel.cpp edgesOf: a color's edges are it 38 % toward white
	   and 50 % toward black), and the site's one of its own: go under the pointer, a step lighter */
	--go-lit: #8edaa6;
	--go-lo: #246238;
	--tally-lit: #f6807a;
	--tally-lo: #781914;
	--go-top: #5fd385;
	--shadow: rgb(10 9 12 / 0.6); /* a floating thing's hard shadow: kInk at 0.6 (Bevel.cpp floating) */
	/* the band: kBand at the left, in 14 steps into the window's face by the right (Bevel.cpp bandTo) */
	--band-steps: linear-gradient(90deg,
		color-mix(in srgb, var(--band), var(--slab) 0.0%) 0.00% 7.14%,
		color-mix(in srgb, var(--band), var(--slab) 7.7%) 7.14% 14.29%,
		color-mix(in srgb, var(--band), var(--slab) 15.4%) 14.29% 21.43%,
		color-mix(in srgb, var(--band), var(--slab) 23.1%) 21.43% 28.57%,
		color-mix(in srgb, var(--band), var(--slab) 30.8%) 28.57% 35.71%,
		color-mix(in srgb, var(--band), var(--slab) 38.5%) 35.71% 42.86%,
		color-mix(in srgb, var(--band), var(--slab) 46.2%) 42.86% 50.00%,
		color-mix(in srgb, var(--band), var(--slab) 53.8%) 50.00% 57.14%,
		color-mix(in srgb, var(--band), var(--slab) 61.5%) 57.14% 64.29%,
		color-mix(in srgb, var(--band), var(--slab) 69.2%) 64.29% 71.43%,
		color-mix(in srgb, var(--band), var(--slab) 76.9%) 71.43% 78.57%,
		color-mix(in srgb, var(--band), var(--slab) 84.6%) 78.57% 85.71%,
		color-mix(in srgb, var(--band), var(--slab) 92.3%) 85.71% 92.86%,
		color-mix(in srgb, var(--band), var(--slab) 100.0%) 92.86% 100.00%);

	/* sizes: one row height (kRowH), the bar (HeadlineBar 56), one type scale of three and the card's name */
	--row-h: 34px;
	--bar-h: 56px;
	--band-h: 26px;
	--edge: 2px;
	--gutter: 16px;
	--find-w: 300px;       /* the FIND box (kit::Find::width) */
	--t-body: 15px;
	--t-small: 13px;
	--t-head: 20px;
	--t-name: 24px;
	--w-body: 500;
	--w-heavy: 700;        /* headings: the same letters, heavier (Bevel.h kLineHead) */
	--face: Jura, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color-scheme: dark;
}

/* the face: Jura (OFL 1.1, static/fonts/OFL.txt), one variable file for Latin and one for Latin Extended, 300 to 700;
   a name typed in another script falls to the system face. Served from the box, nothing from a CDN (plan 10). */
@font-face {
	font-family: Jura;
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("/static/fonts/jura.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: Jura;
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("/static/fonts/jura-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* a finger needs more than the program's 34 (decision 11): every row follows the token */
@media (pointer: coarse) {
	:root { --row-h: 44px; }
}

/* ---- the ground and the type ---- */

* { box-sizing: border-box; }

html, body { margin: 0; }

/* the ground is the program's checker, 4 px squares of two close tones (Bevel.cpp ground) */
body {
	background: repeating-conic-gradient(var(--ground-a) 0 25%, var(--ground-b) 0 50%) 0 0 / 8px 8px;
	background-color: var(--screen);
	color: var(--paper);
	font-family: var(--face);
	font-size: var(--t-body);
	font-weight: var(--w-body);
	line-height: 1.4;
	letter-spacing: 0.04em;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

a { color: inherit; }
h1, h2 { font-weight: var(--w-heavy); }
/* a link to a part of a page lands under the bar that stays, not behind it (A CARD's #report) */
[id] { scroll-margin-top: calc(var(--bar-h) + 8px); }

/* keyboard focus: paper, square (the program has no focus ring; the web must show the one thing in hand) */
:focus-visible { outline: 3px solid var(--paper); outline-offset: 0; }
:focus:not(:focus-visible) { outline: none; }

main {
	flex: 1;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--gutter);
}

.none { color: var(--muted); font-weight: var(--w-heavy); padding: 32px 0; margin: 0; }
.none a { color: var(--paper); margin-left: 8px; }

/* ---- the kit ---- */

/* a slab: a raised thing at rest (a button, a link that acts, a <details>' summary, a dropdown's face). RAISED is lit
   along the top and left and dark along the foot and right; PRESSED IN the other way about (Bevel.cpp). The edges
   come from the face: a dark slab's are muted and ink, a color's a lighter and a darker of it. */
.slab {
	--lit: var(--muted);
	--dark: var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: var(--row-h);
	padding: 0 14px;
	border: 0;
	border-radius: 0;
	background: var(--slab-hi);
	box-shadow: inset var(--edge) var(--edge) 0 var(--lit), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--dark);
	color: var(--label);
	font: inherit;
	font-size: var(--t-small);
	font-weight: var(--w-heavy);
	letter-spacing: 0.06em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
}
.slab::-webkit-details-marker { display: none; }
.slab:hover { background: var(--slab-top); color: var(--paper); }
.slab:disabled { background: var(--slab-hi); color: var(--faint); cursor: default; }
/* ON, open, or held under the button: pressed in dark with paper letters */
.slab-on, .slab-on:hover, details[open] > summary.slab, .slab:active:not(:disabled) {
	background: var(--on-face);
	color: var(--on-text);
	box-shadow: inset var(--edge) var(--edge) 0 var(--dark), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--lit);
}
.slab-go { --lit: var(--go-lit); --dark: var(--go-lo); background: var(--go); color: var(--ink); }
.slab-go:hover { background: var(--go-top); color: var(--ink); }
.slab-go:active:not(:disabled) { background: var(--go); color: var(--ink); }
.slab-go:disabled { --lit: var(--muted); --dark: var(--ink); }
.slab-tally { --lit: var(--tally-lit); --dark: var(--tally-lo); background: var(--tally); color: var(--ink); }
.slab-tally:hover { background: var(--tally); color: var(--paper); }
.slab-tally:active:not(:disabled) { background: var(--tally); color: var(--paper); }
/* the big one: DOWNLOAD, SEND, SIGN IN THROUGH STEAM */
.slab-big { height: calc(var(--row-h) + 14px); padding: 0 32px; font-size: 17px; letter-spacing: 0.08em; }
/* a key's letter on its slab (the review island's); no keys on a touch screen */
.key { color: var(--muted); font-weight: var(--w-body); }
.slab-go .key, .slab-tally .key { color: var(--slab); }
@media (pointer: coarse) {
	.key { display: none; }
}

/* a well: a picture (or a field) set into what it is on, sunken, 3 px round it (Bevel.cpp setIn) */
.well {
	display: block;
	padding: 3px;
	background: var(--slab-lo);
	box-shadow: inset var(--edge) var(--edge) 0 var(--ink), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--muted);
}
.well img { display: block; }

/* a window: a raised frame on the slab, the band along its top in the program's red with its name, heavy, in paper
   (Bevel.cpp window). A window with no band is the frame alone. */
.window {
	padding: 5px;
	background: var(--slab);
	box-shadow: inset var(--edge) var(--edge) 0 var(--muted), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--ink);
	min-width: 0;
}
.band {
	display: flex;
	align-items: center;
	height: var(--band-h);
	margin: 0;
	padding: 0 9px;
	background: var(--band-steps);
	color: var(--paper);
	font-size: var(--t-small);
	font-weight: var(--w-heavy);
	letter-spacing: 0.08em;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.window-in { padding: 12px 11px 14px; }
.window-col { width: 100%; max-width: 760px; }

/* a box: a group with a name, etched (a dark line with a lit one under and right of it), the name cut into its top
   line (Bevel.cpp box). Only on a window's face. */
.box {
	position: relative;
	margin: 26px 0 0;
	padding: 18px 12px 12px;
	box-shadow: inset 1px 1px 0 var(--ink), inset -1px -1px 0 var(--muted), inset 2px 2px 0 var(--muted), inset -2px -2px 0 var(--ink);
}
.box-name {
	position: absolute;
	top: 0;
	left: 18px;
	transform: translateY(-50%);
	margin: 0;
	padding: 0 8px;
	background: var(--slab);
	color: var(--paper);
	font-size: var(--t-small);
	font-weight: var(--w-heavy);
	letter-spacing: 0.08em;
	line-height: 1.2;
}

/* rows: the word in label at the left, the value in paper beside it, one row height each */
.rows { display: grid; grid-template-columns: max-content 1fr; column-gap: 18px; margin: 14px 0; }
.rows dt, .rows dd {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--row-h);
	margin: 0;
}
.rows dt { color: var(--label); font-size: var(--t-small); font-weight: var(--w-heavy); }
.rows dd { font-weight: var(--w-heavy); overflow-wrap: anywhere; }
.rows ul { list-style: none; margin: 0; padding: 4px 0; }

/* a field: set in, paper letters */
.note {
	height: var(--row-h);
	min-width: 16em;
	max-width: 100%;
	padding: 0 10px;
	border: 0;
	border-radius: 0;
	background: var(--slab-lo);
	box-shadow: inset var(--edge) var(--edge) 0 var(--ink), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--muted);
	color: var(--paper);
	font: inherit;
	font-size: var(--t-small);
	font-weight: var(--w-heavy);
}
.note::placeholder { color: var(--muted); opacity: 1; }

/* picks: a radio or a checkbox as a slab, pressed in when picked */
.picks { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-one { position: relative; display: inline-flex; }
.pick-one input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick-one span {
	display: inline-flex;
	align-items: center;
	height: var(--row-h);
	padding: 0 14px;
	background: var(--slab-hi);
	box-shadow: inset var(--edge) var(--edge) 0 var(--muted), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--ink);
	color: var(--label);
	font-size: var(--t-small);
	font-weight: var(--w-heavy);
	letter-spacing: 0.06em;
	cursor: pointer;
}
.pick-one:hover span { background: var(--slab-top); color: var(--paper); }
.pick-one input:checked + span {
	background: var(--on-face);
	color: var(--on-text);
	box-shadow: inset var(--edge) var(--edge) 0 var(--ink), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--muted);
}
.pick-one input:focus-visible + span { outline: 3px solid var(--paper); }

/* what opens under a slab, and the rows of actions */
.open-box { display: inline-block; }
.open-box > :not(summary) { margin-top: 8px; }
.reasons { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.reasons > form, .reasons > div { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.reason-else { align-items: center; }
.acts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: 8px; }
.acts form { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* an answer, with RESTORE while it can; a refusal in amber (something needs you) */
.did { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; }
.did form { margin: 0; }
.line { margin: 0; font-weight: var(--w-heavy); letter-spacing: 0.04em; }
.line-refused { color: var(--amber); }

/* ---- the top bar (HeadlineBar): the mark, the pages as tabs, the account; 56 px on ink ---- */

/* the bar stays at the top while the page scrolls, as the program's does (docs/plan-1f6.md) */
.top {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 8px 20px;
	padding: 0 var(--gutter);
	min-height: var(--bar-h);
	background: var(--ink);
}
.mark { font-weight: var(--w-heavy); font-size: 19px; text-decoration: none; letter-spacing: 0.02em; white-space: nowrap; }
.mark b { color: var(--tally); }
.tabs { display: flex; gap: 6px; }
/* a tab: raised at rest, the one in hand pressed in dark */
.tab {
	display: flex;
	align-items: center;
	height: var(--row-h);
	padding: 0 12px;
	background: var(--slab-hi);
	box-shadow: inset var(--edge) var(--edge) 0 var(--muted), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--ink);
	color: var(--label);
	font-size: var(--t-small);
	font-weight: var(--w-heavy);
	letter-spacing: 0.06em;
	text-decoration: none;
	white-space: nowrap;
}
.tab:hover { background: var(--slab-top); color: var(--paper); }
.tab-on, .tab-on:hover {
	background: var(--on-face);
	color: var(--on-text);
	box-shadow: inset var(--edge) var(--edge) 0 var(--ink), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--muted);
}
.account { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* who is signed in: the account menu's control (docs/plan-1r.md), a slab with the picture and the name; pressed in
   while the menu is open and on UPLOAD A CARD and MY CARDS, the account's pages */
.account-menu { position: relative; }
.account-menu > .more-menu { left: auto; right: 0; min-width: 220px; }
.who { display: flex; align-items: center; gap: 8px; min-height: var(--row-h); padding: 0 12px 0 6px; color: var(--paper); font-size: var(--t-small); font-weight: var(--w-heavy); list-style: none; }
.who::-webkit-details-marker { display: none; }
.who[aria-current] { background: var(--on-face); color: var(--on-text); box-shadow: inset var(--edge) var(--edge) 0 var(--ink), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--muted); }
.who-face { display: block; width: 28px; height: 28px; background: var(--slab-lo); }
.who-name { max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-form { margin: 0; }
/* MORE, the program's word for what the bar cannot fit: on a phone the pages and the account as a floating list (the
   dropdowns' menu); a <details>, so it works with no script. Wide screens have the tabs and never show it. */
.more { display: none; position: relative; margin-left: auto; }
.more > .more-menu { left: auto; right: 0; min-width: 220px; } /* (over the dropdowns' `.menu { left: 0 }`, which comes later) */
.more-menu .menu-row { color: var(--label); text-decoration: none; white-space: nowrap; } /* (GET HEADLINE GG FREE ON STEAM, the longest, on one line) */
.more-menu .menu-row:hover {
	background: var(--slab-top);
	box-shadow: inset var(--edge) var(--edge) 0 var(--muted), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--ink);
	color: var(--paper);
}
.more-menu button.menu-row { width: 100%; border: 0; border-radius: 0; background: transparent; font: inherit; letter-spacing: inherit; }
.more-who {
	display: block;
	padding: 8px 14px;
	color: var(--paper);
	font-size: var(--t-small);
	font-weight: var(--w-heavy);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* YOUR CARDS at the menu's head (docs/plan-1r.md): the heading in paper with its count, the states' lines in label */
.menu-head { display: block; padding: 8px 14px 2px; color: var(--paper); font-size: var(--t-small); font-weight: var(--w-heavy); letter-spacing: 0.06em; white-space: nowrap; }
.menu-lines { display: flex; flex-direction: column; padding: 0 14px 8px; color: var(--label); font-size: var(--t-small); font-weight: var(--w-heavy); line-height: 20px; white-space: nowrap; }

/* the foot: plain words in muted */
.foot {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px var(--gutter);
	background: var(--ink);
	font-size: var(--t-small);
}
/* (WHAT IS HEADLINE GG's way back, for a viewer signed out who closed it: a form's button, since it clears the
   window's cookie, drawn as the footer's links are: docs/1f8.md) */
.foot a, .foot-open {
	display: flex;
	align-items: center;
	min-height: var(--row-h);
	padding: 0 10px;
	color: var(--muted);
	font-weight: var(--w-heavy);
	text-decoration: none;
}
.foot a:hover, .foot-open:hover { color: var(--paper); }
.foot-form { display: flex; margin: 0; }
.foot-open { border: 0; border-radius: 0; background: transparent; font: inherit; font-weight: var(--w-heavy); letter-spacing: inherit; cursor: pointer; }

/* ---- CARDS: the bar (the PACKS screen's: FIND typed, the count beside it; KIND, SORT and HAS as dropdowns) ---- */

.bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px var(--gutter);
	margin-bottom: var(--gutter);
	font-size: var(--t-small);
	font-weight: var(--w-heavy);
	letter-spacing: 0.06em;
}
.bar-find, .bar-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.bar-picks { gap: 8px; }

/* FIND: empty, a quiet slab with TYPE TO FIND in muted; with text, the lit slab raised, paper letters, the tally
   caret, an X at its end that empties it */
.find {
	position: relative;
	display: flex;
	width: var(--find-w);
	max-width: 100%;
	height: var(--row-h);
	background: var(--slab);
}
.find-on {
	background: var(--slab-hi);
	box-shadow: inset var(--edge) var(--edge) 0 var(--muted), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--ink);
}
.find-text {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--paper);
	caret-color: var(--tally);
	font: inherit;
	letter-spacing: inherit;
	text-transform: uppercase;
}
.find-text::placeholder { color: var(--muted); opacity: 1; }
.find-text:focus-visible { outline: none; }
.find:has(.find-text:focus-visible) { outline: 3px solid var(--paper); }
.find-x {
	position: relative;
	flex: 0 0 var(--row-h);
	height: var(--row-h);
	border: 0;
	border-radius: 0;
	padding: 0;
	background: transparent;
	color: var(--paper);
	cursor: pointer;
}
.find-x::before, .find-x::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 2.5px;
	margin: -1.25px 0 0 -7px;
	background: currentColor;
	transform: rotate(45deg);
}
.find-x::after { transform: rotate(-45deg); }
.find-x:hover { background: var(--tally); color: var(--ink); }

.count { color: var(--muted); font-size: var(--t-small); white-space: nowrap; }
.count-error { color: var(--amber); }

/* a dropdown: the slab says its value (SORT: NEWEST), a chevron at its end; open, it is pressed in */
.drop { position: relative; }
.drop-face, .pick { position: relative; gap: 6px; padding: 0 38px 0 15px; }
/* the chevron: two strokes of the letters' color */
.chev {
	position: absolute;
	right: 15px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	box-shadow: inset -2px -2px 0 currentColor;
	transform: rotate(45deg);
	pointer-events: none;
}
/* (with no script: the word, then a native select dressed as the rest of the slab) */
.pick select {
	appearance: none;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	padding: 0;
	cursor: pointer;
}
.pick select:focus-visible { outline: none; }
.pick:has(select:focus-visible) { outline: 3px solid var(--paper); }
.pick option { background: var(--slab-hi); color: var(--paper); }

/* the menu floats: a hard shadow down and right, the raised face a step lighter than a window's (Bevel.cpp
   floating); rows in muted, the pointed one raised in paper; ON in faint at the current row's right */
.menu {
	position: absolute;
	z-index: 10;
	top: calc(100% + 4px);
	left: 0;
	min-width: 100%;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--slab-hi);
	box-shadow: inset var(--edge) var(--edge) 0 var(--muted), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--ink), 6px 6px 0 var(--shadow);
	max-height: min(70vh, calc(var(--row-h) * 15 + 12px));
	overflow-y: auto;
}
.drop:last-child .menu { left: auto; right: 0; } /* (the last one at the page's edge opens inward) */
.menu-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	height: var(--row-h);
	padding: 0 12px 0 14px;
	color: var(--muted);
	white-space: nowrap;
	cursor: pointer;
}
.menu-hot {
	background: var(--slab-top);
	box-shadow: inset var(--edge) var(--edge) 0 var(--muted), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--ink);
	color: var(--paper);
}
.menu-on { color: var(--faint); font-size: 0.85em; }

/* ---- CARDS: the tiles (the PACKS screen's cards): the face set in, the name and the foot on one line each ---- */

.tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--gutter);
	align-items: start;
}
.tile a {
	display: flex;
	flex-direction: column;
	padding: 6px 6px 0;
	background: var(--slab-hi);
	color: var(--paper);
	text-decoration: none;
	transition: transform 80ms ease-out;
}
/* under the pointer: a step lighter, lifted 4 px, the picture's well raised (setIn Pointed); held: pressed in */
.tile a:hover { background: var(--slab-top); transform: translateY(-4px); }
.tile a:hover .tile-face {
	background: var(--slab-top);
	box-shadow: inset var(--edge) var(--edge) 0 var(--muted), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--ink);
}
.tile a:active .tile-face {
	background: var(--muted);
	box-shadow: inset var(--edge) var(--edge) 0 var(--ink), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--paper);
}
.tile img { width: 100%; height: auto; background: var(--slab-lo); }
.tile-name, .tile-foot { display: block; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-name { padding-top: 8px; line-height: 20px; font-weight: var(--w-heavy); }
/* (the foot in label, not muted: muted on a tile is 3.4 : 1, under what small text needs; 1F.5 decision 10) */
.tile-foot { padding-bottom: 10px; line-height: 18px; font-size: var(--t-small); font-weight: var(--w-heavy); color: var(--label); }
.tile-foot span + span { margin-left: 8px; }
.pages { display: flex; gap: 8px; margin-top: var(--gutter); }

/* ---- CARDS at rest: a line a kind, its count on the band, SEE ALL at its end (docs/plan-1f5.md) ---- */

.home-rows { display: flex; flex-direction: column; gap: 22px; }
.band-count { margin-left: 10px; color: var(--label); }
/* one line of tiles, each a seventh of the window (a fifth for lying cards), never narrower than a tile: narrower
   than that the line scrolls sideways inside its window and the page never does */
.row-line {
	list-style: none;
	margin: 0;
	padding: 12px 11px 14px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max(150px, calc((100% - 6 * var(--gutter)) / 7));
	gap: var(--gutter);
	overflow-x: auto;
}
.row-lying { grid-auto-columns: max(236px, calc((100% - 4 * var(--gutter)) / 5)); }
/* a home band opens its kind (docs/plan-1f7.md): the band's whole width is the link, SEE ALL the one control on it, at
   its right end in the window close's shape and place (KitClose.h: the band's height, flush at its end, its target
   bigger than itself). A raised slab, not tally red: SEE ALL is not a leave (HEADLINE_DESIGN section 1). The band's own
   face never changes (a band is a surface, section 16); the slab lights while the pointer is anywhere on the band. */
.band-link { padding: 0; }
.band-open {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	min-width: 0;
	padding-left: 9px;
	color: inherit;
	text-decoration: none;
}
.band-open:focus-visible { outline-offset: -3px; }
.band-word { min-width: 0; margin-right: 10px; overflow: hidden; text-overflow: ellipsis; }
.band-more {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	height: 100%;
	margin-left: auto;
	padding: 0 12px;
	background: var(--slab-hi);
	box-shadow: inset var(--edge) var(--edge) 0 var(--muted), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--ink);
	color: var(--label);
	letter-spacing: 0.06em;
}
.band-open:hover .band-more { background: var(--slab-top); color: var(--paper); }
.band-open:active .band-more {
	background: var(--on-face);
	color: var(--on-text);
	box-shadow: inset var(--edge) var(--edge) 0 var(--ink), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--muted);
}
.more-glyph { flex-shrink: 0; fill: currentColor; }

/* ---- every grid is one window (docs/plan-1f7.md 3): its band the kind picked or ALL, and what matched; the tiles,
   NOTHING FOUND and NEXT / BACK inside it ---- */
.grid-window .tiles { padding: 12px 11px 14px; }
.grid-window .none { padding: 32px 11px; }
.grid-window .pages { margin: 0; padding: 0 11px 14px; }

@media (prefers-reduced-motion: reduce) {
	.tile a { transition: none; }
	.tile a:hover { transform: none; }
}

/* ---- A CARD and REVIEW: the program's card window: one window, its band across it (on A CARD the kind and X CLOSE
   ESC at its end, the top right at every width: the user 11-05), the card set in a well at the left and its rows
   beside it; narrower, the rows under the card, still inside the window. The reviewer's strip is a window under it. ---- */

.card { min-width: 0; }
.card-in { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; padding: 12px 11px 14px; }
.card-face { flex: 0 1 auto; max-width: 100%; }
/* at its saved size, never scaled up, never taller than the browser's window under the band: the whole card is seen */
.card-face img {
	max-width: 100%;
	max-height: calc(100vh - var(--bar-h) - 2 * var(--gutter) - var(--band-h) - 32px);
	width: auto;
	height: auto;
}
.card-noface { display: block; width: 260px; max-width: 100%; aspect-ratio: 731 / 1024; }
.card-side { flex: 1 1 340px; min-width: 0; }
.strip { margin-top: var(--gutter); }
.card-name { margin: 0; font-size: var(--t-name); line-height: 1.15; overflow-wrap: anywhere; }
.card-line { margin: 8px 0 0; font-weight: var(--w-heavy); overflow-wrap: anywhere; }
.download { margin-top: 4px; }
.card-note { margin: 12px 0 0; color: var(--amber); font-weight: var(--w-heavy); font-size: var(--t-small); letter-spacing: 0.06em; }
/* a card that is not live, on its own page: the state where DOWNLOAD would be (words, not a pill) */
.state { margin: 0; font-weight: var(--w-heavy); font-size: 17px; letter-spacing: 0.08em; color: var(--label); }
.state-why { margin: 6px 0 0; color: var(--muted); font-weight: var(--w-heavy); }
.versions ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.report { margin-top: 18px; }
.report .line { margin-bottom: 8px; }
.report-form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; }
/* the reviewer's strip: a frame with no band, at the foot */
.strip-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.strip-row form { margin: 0; }
.strip .did { margin-bottom: 10px; }

/* ---- REVIEW ---- */

.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0 0 16px; }
.review-head h1 { font-size: var(--t-head); margin: 0; }
.review-count { color: var(--muted); font-weight: var(--w-heavy); font-size: var(--t-small); letter-spacing: 0.06em; }
.who-counts { display: block; color: var(--muted); font-size: var(--t-small); white-space: pre-wrap; }
.inside { margin-top: 20px; }
.inside-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-items: start; gap: 10px; }
.inside-row { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.inside-row .well { align-self: flex-start; max-width: 100%; }
.inside-row img { max-width: 100%; height: auto; }
.inside-name { font-size: var(--t-small); font-weight: var(--w-heavy); overflow-wrap: anywhere; }
.inside-size { color: var(--muted); font-size: var(--t-small); font-weight: var(--w-heavy); }

/* ---- the pages that are one column: a window, its band the page's name ---- */

.signin-failed { margin: 0 0 14px; color: var(--amber); font-weight: var(--w-heavy); }
.signin-keeps { margin: 14px 0 0; color: var(--muted); font-size: var(--t-small); font-weight: var(--w-heavy); }
.signin form { margin: 0; }
/* Valve's button is its own picture: no slab round it */
.steam-button { display: inline-block; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.steam-button img { display: block; }

/* MY CARDS and REPORTS: rows on the window, each thumbnail set in */
.mine-rows, .reported { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mine-row, .reported-card { display: flex; gap: var(--gutter); align-items: flex-start; }
.mine-face { flex: 0 0 70px; min-height: 70px; }
.mine-face img { width: 64px; height: auto; }
.mine-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-width: 0; padding-top: 4px; }
.mine-name { font-weight: var(--w-heavy); overflow-wrap: anywhere; }
a.mine-name { text-decoration: none; }
a.mine-name:hover { text-decoration: underline; }
.mine-kind, .mine-sent, .mine-place { color: var(--muted); font-size: var(--t-small); font-weight: var(--w-heavy); }
.mine-state { color: var(--label); font-size: var(--t-small); font-weight: var(--w-heavy); letter-spacing: 0.06em; }
.mine-why { color: var(--muted); font-size: var(--t-small); font-weight: var(--w-heavy); }
.mine-back { margin: 0 0 0 auto; }
.mine-delete { margin-top: 26px; }
.mine-delete .line { color: var(--amber); margin-bottom: 8px; }
.reported-text { min-width: 0; flex: 1; padding-top: 4px; }
.reported-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0; }
.reported-rows { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.reported-rows li { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: var(--t-small); }
.reported-why { color: var(--label); font-weight: var(--w-heavy); }
.reported-note { font-weight: var(--w-heavy); overflow-wrap: anywhere; }
.reports-head { margin: 0 0 14px; }

/* UPLOAD A CARD: the zone a well the card is dropped in; under the pointer or a drag it is raised; SEND the one GO */
.upload-stop { margin: 0; color: var(--amber); font-weight: var(--w-heavy); }
.upload-form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; }
.zone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	align-self: stretch;
	min-height: 180px;
	padding: 24px;
	background: var(--slab-lo);
	box-shadow: inset var(--edge) var(--edge) 0 var(--ink), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--muted);
	color: var(--label);
	font-weight: var(--w-heavy);
	letter-spacing: 0.06em;
	text-align: center;
	cursor: pointer;
}
.zone:hover, .upload-over .zone {
	background: var(--slab-top);
	box-shadow: inset var(--edge) var(--edge) 0 var(--muted), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--ink);
	color: var(--paper);
}
.zone:has(:focus-visible) { outline: 3px solid var(--paper); }
.zone-file { font: inherit; font-size: var(--t-small); color: var(--muted); max-width: 100%; }
/* (the island's own zone takes the click and the drop; the input stays for the keyboard and a screen reader) */
.zone-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.zone-picked { color: var(--paper); overflow-wrap: anywhere; }
.zone-bar { position: absolute; left: 0; bottom: 0; height: 6px; background: var(--paper); }
.upload-line { margin: 14px 0 0; font-weight: var(--w-heavy); }
.upload-refused { color: var(--amber); }
.upload-most { margin: 20px 0 6px; color: var(--label); font-weight: var(--w-heavy); font-size: var(--t-small); }
.upload-rules { list-style: none; margin: 0; padding: 0; color: var(--muted); font-weight: var(--w-heavy); font-size: var(--t-small); }
.upload-rules li { margin: 0 0 4px; }
.upload-queue { margin: 14px 0 0; color: var(--muted); font-weight: var(--w-heavy); font-size: var(--t-small); }
.upload-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; align-self: stretch; margin: 0; }
.upload-tags .note { flex: 1 1 16em; }
.upload-tags-name { color: var(--label); font-size: var(--t-small); font-weight: var(--w-heavy); letter-spacing: 0.06em; }

/* ---- TAGS (docs/plan-1n.md): a tag is a slab in caps; pressed, CARDS narrowed by it. On A CARD, the TAGS row; the
   TAGS page and CARDS' window give each its count. Typed tags go in a field like REPORT's line. ---- */

.tag-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag-count { color: var(--muted); }
.slab:hover .tag-count { color: var(--label); }
.tag-line { padding: 12px 11px 14px; } /* (CARDS' window: the row-line's room) */
.tag-sorts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.tags-form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 8px; }
/* CARDS' TAGS window (docs/plan-1p.md): the tags on what matched, a picked one lit. At rest the home's last window;
   narrowed, between the bar and the grid (the bar is order -1 too and before it in the page), the bar's gap under it.
   At 1600 px and wider it is the left column's, below. */
.cards-tags { margin-top: 22px; }
.tags-narrowed { order: -1; margin: 0 0 var(--gutter); }
.mine-tags { flex-basis: 100%; color: var(--muted); font-size: var(--t-small); font-weight: var(--w-heavy); }
.mine-tags-box { flex-basis: 100%; }
/* SUGGESTIONS (1N.2): a row a tag, ACCEPT and DECLINE at its end */
.suggested { align-items: center; }
.suggested-acts { margin: 0; }

/* the plain pages */
.plain p { margin: 0 0 10px; }
/* PRIVACY's WHAT THE SITE KEEPS AND WHY: the kit's etched box, A CARD's rows in it, the lines under it */
.keeps { margin: 14px 0 16px; padding: 12px 12px 0; }
.keeps .rows { row-gap: 8px; margin: 0 0 12px; }

/* ---- WHAT IS HEADLINE GG (docs/plan-1f8.md, laid out again from the mockups: docs/1f8.md): on CARDS for a viewer
   signed out. The page is `.cards-page`: the window, then the island's root, whose box is dropped (display:
   contents) so the bar and the rows or the grid are the page's own items, placed here at each width from one markup.
   Under 1600 px: the bar, the window, the rows; while anything narrows, the window goes. 1600 and wider: the window a
   320 px column at the left with its top on the first row's, the bar over the rows alone (FIND's left edge on
   AVATARS', the user 11-05), the page wider by the column so the rows keep their width; the column stays while
   anything narrows. ---- */

.cards-page { display: flex; flex-direction: column; }
#cards-bar { display: contents; }
.cards-page .bar { order: -1; }
.intro { margin-bottom: 22px; } /* (the home rows' own gap) */
.intro-narrowed { display: none; }
/* a band that carries the close (WHAT IS HEADLINE GG; a kind's grid, docs/1m.md): the band a box, its name the heading */
.band-closing { padding: 0 0 0 9px; }
.band-name { margin: 0; font-size: inherit; }
/* the window's close (KitClose.h, HEADLINE_DESIGN section 16): X CLOSE ESC, a raised tally slab the band's height,
   flush at its right end; dim at rest, lit under the pointer, pressed in while held; its target 6 px bigger than it
   (on the left: the band clips the rest). The one control the band carries. CLOSE is a leave, so it is tally. */
.intro-close { display: flex; height: 100%; margin: 0 0 0 auto; flex-shrink: 0; }
.band-close {
	--lit: var(--tally-lit);
	--dark: var(--tally-lo);
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 100%;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	background: var(--tally-dim);
	box-shadow: inset var(--edge) var(--edge) 0 var(--lit), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--dark);
	color: var(--paper);
	font: inherit;
	letter-spacing: 0.06em;
	cursor: pointer;
}
.band-close::before { content: ""; position: absolute; inset: -6px 0 -6px -6px; }
.band-close:hover { background: var(--tally); }
.band-close:active {
	background: var(--tally-lo);
	box-shadow: inset var(--edge) var(--edge) 0 var(--dark), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--lit);
}
.band-close .key { color: var(--tally-lit); }
/* as a link (a kind's grid: CLOSE goes back to ALL), in the band itself rather than in a form */
a.band-close { flex-shrink: 0; margin-left: auto; text-decoration: none; }
.close-glyph { flex-shrink: 0; fill: currentColor; }
/* inside, two halves: the side (the still, GET IT FREE ON STEAM) and the words (the lead, FEATURES, CARDS). As a row
   (641 to 1599 px) the halves stand side by side, the slab under the still at its width. As a column (a phone, and
   the wide page's column) the halves dissolve and their pieces take the user's order (11-05, "B"): the still, the
   lead, the slab, the boxes. The lead stands alone, heavy; the rest is in the kit's etched boxes, so the window reads
   as three blocks, not a wall of text. */
.intro-in { display: flex; align-items: flex-start; gap: 20px; padding: 14px 11px 16px; }
.intro-side { display: flex; flex-direction: column; gap: 10px; flex: 0 0 320px; min-width: 0; }
.intro-words { display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; min-width: 0; max-width: 620px; }
/* the still: a 16 by 9 well, WATCH THE TRAILER over its middle; pressed, the video takes its place */
.intro-still {
	position: relative;
	aspect-ratio: 16 / 9;
	text-decoration: none;
}
.intro-still img { width: 100%; height: 100%; object-fit: cover; }
.intro-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.intro-still:hover .intro-play { background: var(--slab-top); color: var(--paper); }
.intro-video { display: block; width: 100%; height: 100%; border: 0; background: var(--slab-lo); }
/* the lead: Jura's heaviest (700, the face's top) and a step up in size, so it reads above everything else in the
   window (the user 11-05: "heavier") */
.intro-lead { margin: 0; color: var(--paper); font-size: 18px; font-weight: var(--w-heavy); line-height: 1.3; }
/* FEATURES and CARDS: the kit's etched box, its name cut into the top line; closer than a box's usual 26 px, since the
   words' gap is there too */
.intro-box { margin: 10px 0 0; padding: 16px 12px 12px; }
.intro-lines {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
	color: var(--label);
	font-size: var(--t-small);
	font-weight: var(--w-heavy);
	letter-spacing: 0.06em;
	text-align: center; /* (the user 11-05; one column at every width: centered in two, the lines zig-zagged) */
}
.intro-card { margin: 0; color: var(--label); font-size: var(--t-small); font-weight: var(--w-heavy); }
.intro-card + .intro-card { margin-top: 10px; }

/* wide: the column at the left (main's 1280 and the column's 320 with its gap, so the rows keep their width), the
   page's whenever WHAT IS HEADLINE GG or TAGS is on it: the window at its top while open, TAGS under it at rest and
   narrowed, TAGS alone at the top once the window is closed (docs/1o.md, docs/plan-1p.md). The rows or the grid span
   rows 2 to 4 and row 4 is the flexible one, so the window and TAGS alone size rows 2 and 3 and TAGS sits on the
   window's foot, not the rows'. */
@media (min-width: 1600px) {
	main:has(> .cards-page > .intro, > .cards-page > .card-more, > .cards-page > #cards-bar > .cards-tags) { max-width: 1640px; }
	.cards-page:has(> .intro, > .card-more, > #cards-bar > .cards-tags) {
		display: grid;
		grid-template-columns: 320px minmax(0, 1fr);
		grid-template-rows: auto auto auto auto 1fr;
		column-gap: 22px;
		align-items: start;
	}
	.cards-page:has(> .intro, > .card-more, > #cards-bar > .cards-tags) .bar { grid-column: 2; grid-row: 1; }
	.cards-page:has(> .intro, > .card-more, > #cards-bar > .cards-tags) #cards-bar > :not(.bar, .cards-tags) { grid-column: 2; grid-row: 2 / 6; }
	/* the window row 2, TAGS row 3, MOST DOWNLOADED row 4 (docs/plan-1r.md); each 22 px under what is above it, if
	   anything */
	.cards-page .cards-tags { grid-column: 1; grid-row: 3; }
	.cards-page:has(> .intro) .cards-tags { margin: 22px 0 0; }
	.cards-page:not(:has(> .intro)) .cards-tags { margin: 0; }
	.cards-page > .card-more { grid-column: 1; grid-row: 4; }
	.cards-page:not(:has(> .intro, > #cards-bar > .cards-tags)) > .card-more { margin: 0; }
	.cards-page > .side-tiles { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: visible; }
	.intro { grid-column: 1; grid-row: 2; margin: 0; }
	.intro-narrowed { display: block; }
	.intro-in { padding: 12px 11px 14px; }
}

/* the window as a column (a phone, and the wide page's column): the halves dissolve, B's order */
@media (max-width: 640px), (min-width: 1600px) {
	.intro-in { flex-direction: column; align-items: stretch; gap: 14px; }
	.intro-side, .intro-words { display: contents; }
	.intro-still { order: 1; }
	.intro-lead { order: 2; }
	.intro-get { order: 3; }
	.intro-box { order: 4; }
}

/* ---- the bar as MORE: at 968 px and under, where a signed-out bar (CARDS, HEADLINE GG, GET HEADLINE GG FREE ON STEAM,
   SIGN IN WITH STEAM, BACK) stops fitting: it needs 968 px (measured 11-06 with the HEADLINE GG tab; 821 before) ---- */

@media (max-width: 968px) {
	.tabs, .account { display: none; }
	.more { display: block; }
	/* MORE's list hangs from the bar's right edge, not MORE's (BACK can stand right of MORE, and the list, as wide as
	   GET HEADLINE GG FREE ON STEAM, ran off the screen's left): the sticky bar holds it, 4 px under MORE as before */
	.more { position: static; }
	.more > .more-menu { right: var(--gutter); top: calc(50% + var(--row-h) / 2 + 4px); }
}

/* ---- phone width (decision 12): the bar on two lines, one column, nothing wider than the screen ---- */

@media (max-width: 640px) {
	.top { gap: 8px; }
	.mark { font-size: 17px; }
	/* (CARDS' three dropdowns on one line at their usual values; the longest values, KIND: LOCATIONS with HAS:
	   WHISKERS, still wrap) */
	.drop-face, .pick { padding: 0 24px 0 8px; font-size: 12px; letter-spacing: 0.02em; }
	.chev { right: 8px; }
	.bar, .bar-find { flex-direction: column; align-items: stretch; }
	.find { width: 100%; }
	.bar-picks { justify-content: flex-start; }
	.tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
	.row-line { grid-auto-columns: 140px; gap: 12px; }
	/* narrowed, TAGS on one line that scrolls sideways inside its window, as a line of tiles does, so the grid is not
	   pushed a screen down (docs/plan-1p.md) */
	.tags-narrowed .tag-line { flex-wrap: nowrap; overflow-x: auto; }
	.tags-narrowed .tag-line > li { flex-shrink: 0; }
	.row-lying { grid-auto-columns: 236px; }
	.card-face, .card-side { flex-basis: 100%; }
	.rows { grid-template-columns: 1fr; }
	.rows dt { min-height: 0; padding-top: 6px; }
	.rows dd { min-height: 0; }
	.inside-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mine-row { flex-wrap: wrap; }
	.mine-text { flex: 1 1 200px; }
	.mine-back { margin: 0 0 0 86px; }
	.note { min-width: 0; width: 100%; }
}

/* ---- MORE BY at A CARD's foot (docs/plan-1m.md): the home band's window under the card ---- */
.card-more { min-width: 0; } /* (in the column, whose gap spaces it: docs/plan-1q.md) */

/* ---- THE COLUMN (docs/plan-1q.md): every public page but CARDS (which has its own, above) carries it when it has a
   window for it: WHAT IS HEADLINE GG while open, then the page's own windows (A CARD's MORE BY and MORE LIKE THIS, the
   maker's TAGS), then YOUR CARDS for a viewer signed in (last: the user 11-05). 1600 px and wider: a 320 px column at
   the left, the page wider by it so the content keeps its width. Under 1600: after the content, the page's own
   windows first, then YOUR CARDS, the window last, each the content's width; a window of tiles one line, as a home
   row. ---- */

.side-main { min-width: 0; }
.side { display: flex; flex-direction: column; gap: 22px; margin-top: 22px; }
.side > .intro { order: 2; margin: 0; }
.side > .cards-tags { margin: 0; }
/* MOST DOWNLOADED (docs/plan-1r.md 1.2): on CARDS under 1600 px, the home's last window after TAGS; gone while narrowed */
.cards-page > .card-more { order: 1; margin-top: 22px; }
.cards-page > .card-more[hidden] { display: none; }
/* a window of tiles in the column: one line under 1600 (row-line's), two across at 1600 (a lying kind one) */
.side-tiles { scrollbar-width: thin; }

@media (min-width: 1600px) {
	main.with-side { max-width: 1640px; display: grid; grid-template-columns: 320px minmax(0, 1fr); column-gap: 22px; align-items: start; }
	.with-side > .side { grid-column: 1; grid-row: 1; margin: 0; }
	.with-side > .side-main { grid-column: 2; grid-row: 1; }
	.side > .intro { order: 0; }
	.side .side-tiles { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: visible; }
	.side .side-tiles.row-lying { grid-template-columns: minmax(0, 1fr); }
}

/* ---- HEADLINE GG on the site (docs/plan-2b-step3.md decision 1): the program in one window, the band with FULL
   SCREEN, the canvas as its body at the drawing's own shape on a well, the files row under it. The page is as wide as
   the screen gives it. ---- */
main:has(> .app-window) { max-width: none; }
.app-band { gap: 12px; }
.app-sign { margin-left: auto; color: var(--paper); }
.app-full { margin-left: auto; height: calc(var(--band-h) - 6px); }
.app-sign + .app-full { margin-left: 0; }
.app-stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(100dvh - 160px);
	min-height: 360px;
	background: var(--slab-lo);
}
.app-stage[hidden] { display: none; }
.app-canvas { display: block; background: var(--ink); }
.app-canvas:focus-visible { outline: none; }
.app-line { position: absolute; left: 12px; bottom: 10px; color: var(--label); }
.app-words { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.app-words[hidden] { display: none; }
.app-window:fullscreen { display: flex; flex-direction: column; }
.app-window:fullscreen .app-stage { flex: 1 1 auto; height: auto; }
.app-files { display: flex; align-items: center; gap: 8px; padding: 8px 0 2px; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.app-files-band { margin-right: 4px; color: var(--label); font-size: var(--t-small); font-weight: var(--w-heavy); letter-spacing: 0.06em; }
.app-file { display: inline-flex; align-items: center; gap: 8px; padding-left: 10px; background: var(--slab-hi); color: var(--paper); font-size: var(--t-small); font-weight: var(--w-heavy); }