/* The kit: headlineGG's look on the web, one file for every page that wears it (docs/plan-kit.md). 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, as the program is.
   THE ONE COPY IS hdln-gg's internal/web/static/kit.css. Byte-for-byte copies, with fonts/ beside them, are in
   glyph-drive's guide/headlinegg/ (the guide) and blueg-systems' internal/site/static/ (BlueG.Systems), each checked
   against this one; change it here, then copy it there. A site's own file comes after it and adds only its own: its
   page width, its mark, what sits in its bar, its pages; it may set tokens again (BlueG.Systems' blue), never a kit
   rule. Fonts by relative addresses, so the file finds them beside it on every host and from disk.
   Order: the tokens; the faces; the ground and the type; the kit; the bar's frame and its tabs. */

: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; the site's way in to the program (USE IN BROWSER, OPEN IN BROWSER: the user 11-06, 11-07) */
	/* 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;
	--amber-lit: #f1c687;
	--amber-lo: #74521e;
	--amber-top: #ebb15a;
	--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;
	--face-head: Kanit, "Arial Black", "Segoe UI", sans-serif; /* the heavy heads: the wordmark's face, 900 italic only */
	color-scheme: dark;
}

/* the faces: Jura (OFL 1.1, fonts/OFL.txt), one variable file for Latin and one for Latin Extended, 300 to 700, every
   word of the kit; a name typed in another script falls to the system face. Kanit Black Italic (OFL 1.1, the same
   OFL.txt), Latin and Latin Extended, for the heavy heads. Served beside this file, nothing from a CDN (plan 10). */
@font-face {
	font-family: Jura;
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("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("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;
}
@font-face {
	font-family: Kanit;
	font-style: italic;
	font-weight: 900;
	font-display: swap;
	src: url("fonts/kanit-900-italic.woff2") format("woff2");
	unicode-range: U+0000-024F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2190-21FF, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 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; }

.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-amber { --lit: var(--amber-lit); --dark: var(--amber-lo); background: var(--amber); color: var(--ink); }
.slab-amber:hover { background: var(--amber-top); color: var(--ink); }
.slab-amber:active:not(:disabled) { background: var(--amber); color: 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-amber .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 bar's frame (HeadlineBar): 56 px on ink, the pages as tabs; what sits in it is each site's ---- */

/* 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);
}
.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);
}