/* brand.css — the bounded "pencil sketch" vocabulary for one-off pages built without a bundler
 * (reports, proposals, benchmarks, event pages): one sheet, no lines, nothing behind the words,
 * ink for the one action, color only for status.
 *
 * This is the source. The published dist/brand.css is generated by scripts/brand-css.mjs, which
 * splices in at build time: the Google Fonts @import, tokens.css inlined, and the two manual
 * themes .ak-theme-light / .ak-theme-dark.
 *
 * The comment on the line above each class is its purpose; the vocabulary table in design.md is
 * scanned from those comments. The vocabulary is deliberately small: a class that is not here is
 * not allowed. A new layout need changes this file first, then DESIGN.md. */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&family=Noto+Sans+TC:wght@100..900&display=swap");
/* Tokens as plain CSS variables — for non-StyleX consumers
 * (desktop uses Tailwind v4 @theme; reference these vars there).
 * Generated from tokens.stylex.ts by scripts/tokens-css.mjs — do not edit by hand.
 * Regenerate: pnpm gen:tokens-css (src/tokens-css.test.ts fails when out of sync). */

/* Expanding content can add a scrollbar and shift centred layouts; always reserve its space. */
html {
	scrollbar-gutter: stable;
}

:root {
	--ak-bg: #ffffff;
	--ak-surface-raised: #ffffff;
	--ak-border-control: #808080;
	--ak-text: #171717;
	--ak-text-muted: #5c5c5c;
	--ak-signal: #0169da;
	--ak-danger: #ca322e;
	--ak-success: #246e3a;
	--ak-warning: #955e02;
	--ak-focus-ring: #0169da;
	--ak-scrim: rgba(0, 0, 0, 0.32);
	--ak-wash: rgba(23, 23, 23, 0.06);
	--ak-wash-hover: rgba(23, 23, 23, 0.11);
	--ak-wash-strong: rgba(23, 23, 23, 0.26);

	--ak-shadow-float: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 24px rgba(0, 0, 0, 0.1);
	--ak-shadow-modal: 0 2px 4px rgba(0, 0, 0, 0.06), 0 24px 56px rgba(0, 0, 0, 0.16);

	--ak-font-display:
		"Geist Variable", "Geist", "Noto Sans TC Variable", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
		system-ui, sans-serif;
	--ak-font-body:
		"Geist Variable", "Geist", "Noto Sans TC Variable", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
		system-ui, sans-serif;
	--ak-font-mono:
		"Geist Mono Variable", "Geist Mono", "Noto Sans TC Variable", "Noto Sans TC", ui-monospace, monospace;

	--ak-space-xxs: 0.25rem;
	--ak-space-xs: 0.5rem;
	--ak-space-sm: 0.75rem;
	--ak-space-md: 1rem;
	--ak-space-lg: 1.5rem;
	--ak-space-xl: 2rem;
	--ak-space-xxl: 3rem;

	--ak-motion-fast: 120ms;
	--ak-motion-quick: 160ms;
	--ak-motion-normal: 200ms;
	--ak-motion-slide: 240ms;
	--ak-motion-slow: 400ms;
	--ak-motion-loop-fast: 0.8s;
	--ak-motion-blink: 1s;
	--ak-motion-loop: 1.2s;
	--ak-motion-loop-slow: 1.6s;
	--ak-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--ak-motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ak-motion-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
	--ak-motion-linear: linear;

	--ak-z-index-dialog-backdrop: 70;
	--ak-z-index-dialog: 71;
	--ak-z-index-popup: 75;
	--ak-z-index-tooltip: 78;
	--ak-z-index-toast: 80;

	--ak-icon-size-xs: 12px;
	--ak-icon-size-sm: 14px;
	--ak-icon-size-md: 16px;
	--ak-icon-size-base: 18px;
	--ak-icon-size-lg: 20px;

	--ak-focus-ring-width: 2px;

	--ak-type-t1: 0.6875rem;
	--ak-type-t2: 0.8125rem;
	--ak-type-t3: 0.9375rem;
	--ak-type-t4: 1.0625rem;
	--ak-type-t5: 1.375rem;
	--ak-type-t6: 1.75rem;
	--ak-type-t7: 2.25rem;
	--ak-type-code: 0.8125rem;
	--ak-type-phone-input: 1rem;
	--ak-type-body: 1.6;
	--ak-type-tight: 1.35;
	--ak-type-snug: 1.45;
	--ak-type-dense: 1.2;

	--ak-corner-shape: 9999px;
	--ak-corner-box: 24px;
	--ak-corner-check: 4px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ak-bg: #121212;
		--ak-surface-raised: #1f1f1f;
		--ak-border-control: #747474;
		--ak-text: #f0f0f0;
		--ak-text-muted: #bababa;
		--ak-signal: #89bafe;
		--ak-danger: #fe8c80;
		--ak-success: #76cf8a;
		--ak-warning: #fab45f;
		--ak-focus-ring: #89bafe;
		--ak-scrim: rgba(0, 0, 0, 0.32);
		--ak-wash: rgba(240, 240, 240, 0.06);
		--ak-wash-hover: rgba(240, 240, 240, 0.11);
		--ak-wash-strong: rgba(240, 240, 240, 0.26);

		--ak-shadow-float: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px rgba(0, 0, 0, 0.4);
		--ak-shadow-modal: 0 2px 4px rgba(0, 0, 0, 0.6), 0 24px 56px rgba(0, 0, 0, 0.6);
	}
}

[data-theme="dark"] {
	--ak-bg: #121212;
	--ak-surface-raised: #1f1f1f;
	--ak-border-control: #747474;
	--ak-text: #f0f0f0;
	--ak-text-muted: #bababa;
	--ak-signal: #89bafe;
	--ak-danger: #fe8c80;
	--ak-success: #76cf8a;
	--ak-warning: #fab45f;
	--ak-focus-ring: #89bafe;
	--ak-scrim: rgba(0, 0, 0, 0.32);
	--ak-wash: rgba(240, 240, 240, 0.06);
	--ak-wash-hover: rgba(240, 240, 240, 0.11);
	--ak-wash-strong: rgba(240, 240, 240, 0.26);

	--ak-shadow-float: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px rgba(0, 0, 0, 0.4);
	--ak-shadow-modal: 0 2px 4px rgba(0, 0, 0, 0.6), 0 24px 56px rgba(0, 0, 0, 0.6);
}

/* data-theme="light" locks light on any element and its subtree, even on a dark OS or inside data-theme="dark". */
[data-theme="light"] {
	--ak-bg: #ffffff;
	--ak-surface-raised: #ffffff;
	--ak-border-control: #808080;
	--ak-text: #171717;
	--ak-text-muted: #5c5c5c;
	--ak-signal: #0169da;
	--ak-danger: #ca322e;
	--ak-success: #246e3a;
	--ak-warning: #955e02;
	--ak-focus-ring: #0169da;
	--ak-scrim: rgba(0, 0, 0, 0.32);
	--ak-wash: rgba(23, 23, 23, 0.06);
	--ak-wash-hover: rgba(23, 23, 23, 0.11);
	--ak-wash-strong: rgba(23, 23, 23, 0.26);

	--ak-shadow-float: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 24px rgba(0, 0, 0, 0.1);
	--ak-shadow-modal: 0 2px 4px rgba(0, 0, 0, 0.06), 0 24px 56px rgba(0, 0, 0, 0.16);
}
/* Manual themes: generated by scripts/brand-css.mjs */
/* Locks light by hand; on html it locks the whole page, on a subtree only that part. */
:root.ak-theme-light,
.ak-theme-light {
	--ak-bg: #ffffff;
	--ak-surface-raised: #ffffff;
	--ak-border-control: #808080;
	--ak-text: #171717;
	--ak-text-muted: #5c5c5c;
	--ak-signal: #0169da;
	--ak-danger: #ca322e;
	--ak-success: #246e3a;
	--ak-warning: #955e02;
	--ak-focus-ring: #0169da;
	--ak-scrim: rgba(0, 0, 0, 0.32);
	--ak-wash: rgba(23, 23, 23, 0.06);
	--ak-wash-hover: rgba(23, 23, 23, 0.11);
	--ak-wash-strong: rgba(23, 23, 23, 0.26);
	--ak-shadow-float: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 24px rgba(0, 0, 0, 0.1);
	--ak-shadow-modal: 0 2px 4px rgba(0, 0, 0, 0.06), 0 24px 56px rgba(0, 0, 0, 0.16);
}
/* Locks dark by hand. */
:root.ak-theme-dark,
.ak-theme-dark {
	--ak-bg: #121212;
	--ak-surface-raised: #1f1f1f;
	--ak-border-control: #747474;
	--ak-text: #f0f0f0;
	--ak-text-muted: #bababa;
	--ak-signal: #89bafe;
	--ak-danger: #fe8c80;
	--ak-success: #76cf8a;
	--ak-warning: #fab45f;
	--ak-focus-ring: #89bafe;
	--ak-scrim: rgba(0, 0, 0, 0.32);
	--ak-wash: rgba(240, 240, 240, 0.06);
	--ak-wash-hover: rgba(240, 240, 240, 0.11);
	--ak-wash-strong: rgba(240, 240, 240, 0.26);
	--ak-shadow-float: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px rgba(0, 0, 0, 0.4);
	--ak-shadow-modal: 0 2px 4px rgba(0, 0, 0, 0.6), 0 24px 56px rgba(0, 0, 0, 0.6);
}

:root {
	/* Google Fonts 的家族名沒有 Variable 後綴;兩個名字都列,fontsource 或 Google Fonts 都能接上 */
	--ak-font-display:
		"Geist Variable", "Geist", "Noto Sans TC Variable", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
		system-ui, sans-serif;
	--ak-font-body:
		"Geist Variable", "Geist", "Noto Sans TC Variable", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
		system-ui, sans-serif;
	--ak-font-mono:
		"Geist Mono Variable", "Geist Mono", "Noto Sans TC Variable", "Noto Sans TC", ui-monospace, monospace;
}

body {
	margin: 0;
	background: var(--ak-bg);
	color: var(--ak-text);
	font-family: var(--ak-font-body);
	font-size: 0.9375rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* ---- Structure ---- */

/* Main sheet: the one page, max width, no desk, no corners. One per page. */
.ak-page {
	box-sizing: border-box;
	width: min(67rem, 100% - 2rem);
	margin: 1rem auto;
	padding: 3rem 1.5rem;
}

/* Section: space above, no rule. Conclusion-first pages use it to split the evidence sections. */
.ak-section {
	margin-top: 3rem;
}

/* Two-column grid; folds to one column at 375 wide and below. */
.ak-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

/* Three-column grid; folds to one column at 375 wide and below. A row of stats holds at most this many plus one. */
.ak-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

@media (max-width: 40rem) {
	.ak-page {
		width: calc(100% - 1rem);
		margin-block: 0.5rem;
		padding: 2rem 1rem;
	}
	.ak-grid-2,
	.ak-grid-3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Text ---- */

/* Display-level title. One per page. */
.ak-display {
	font-family: var(--ak-font-display);
	font-optical-sizing: auto;
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 1rem;
	text-wrap: balance;
}

/* Section title. */
.ak-h1 {
	font-family: var(--ak-font-display);
	font-optical-sizing: auto;
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 0.75rem;
	text-wrap: balance;
}

/* Subsection title inside a section. */
.ak-h2 {
	font-family: var(--ak-font-display);
	font-optical-sizing: auto;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 2rem 0 0.5rem;
	text-wrap: balance;
}

/* Body text: hierarchy and line length for p / ul / ol / a / code / pre / blockquote / h3. */
.ak-prose {
	max-width: 68ch;
	font-size: 0.9375rem;
	line-height: 1.6;
}
.ak-prose p,
.ak-prose ul,
.ak-prose ol,
.ak-prose pre,
.ak-prose blockquote {
	margin: 0 0 1rem;
}
.ak-prose ul,
.ak-prose ol {
	/* one step of indent at most (DESIGN.md section 1) */
	padding-inline-start: 1rem;
}
.ak-prose li {
	margin-bottom: 0.25rem;
}
.ak-prose a {
	color: var(--ak-text);
	text-decoration: underline;
	text-decoration-color: var(--ak-text-muted);
	text-underline-offset: 0.15em;
}
.ak-prose a:hover {
	text-decoration-color: currentColor;
}
.ak-prose h3 {
	font-family: var(--ak-font-body);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 1.5rem 0 0.5rem;
}
.ak-prose code {
	font-family: var(--ak-font-mono);
	font-size: 0.8125rem;
}
.ak-prose pre {
	font-family: var(--ak-font-mono);
	font-size: 0.8125rem;
	line-height: 1.5;
	padding-inline-start: 1rem;
	overflow-x: auto;
}
.ak-prose pre code {
	background: none;
	padding: 0;
	font-size: inherit;
}
.ak-prose blockquote {
	padding-inline-start: 1rem;
	color: var(--ak-text-muted);
}

/* Secondary note: color one step down, same size. */
.ak-muted {
	color: var(--ak-text-muted);
}

/* Monospace: data, code, identifiers. Not for decoration. */
.ak-mono {
	font-family: var(--ak-font-mono);
	font-size: 0.875em;
	font-variant-numeric: tabular-nums;
}

/* ---- Evidence ---- */

/* Evidence table: full width, not in a card, tabular-nums; no lines, the header is small muted text, rows are split by space. Add data-num to right-align number columns. */
.ak-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	margin: 1rem 0;
}
.ak-table th,
.ak-table td {
	text-align: start;
	vertical-align: top;
	padding: 0.5rem 0.75rem;
}
.ak-table :is(th, td):first-child {
	/* the first column starts on the page's one left edge, like the heading and body text */
	padding-inline-start: 0;
}
.ak-table :is(th, td):last-child {
	padding-inline-end: 0;
}
.ak-table th {
	font-weight: 500;
	font-size: 0.8125rem;
	color: var(--ak-text-muted);
}
.ak-table [data-num] {
	text-align: end;
	font-variant-numeric: tabular-nums;
}
.ak-table caption {
	text-align: start;
	color: var(--ak-text-muted);
	font-size: 0.875rem;
	padding-bottom: 0.5rem;
}
@media (max-width: 40rem) {
	.ak-table {
		display: block;
		overflow-x: auto;
	}
	.ak-table th,
	.ak-table td {
		white-space: nowrap;
	}
}

/* Conclusion-level big number: a figure in the display face with a muted label. At most four per row. */
.ak-stat {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem 0;
}
/* The number in ak-stat. */
.ak-stat-value {
	font-family: var(--ak-font-display);
	font-optical-sizing: auto;
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}
/* The label in ak-stat. */
.ak-stat-label {
	font-size: 0.875rem;
	color: var(--ak-text-muted);
}

/* Callout: one line of text; ak-callout-warning / -danger set the meaning with text color and a 6px dot. No fill, no side line. */
.ak-callout {
	margin: 1rem 0;
	font-size: 0.875rem;
	line-height: 1.5;
}
.ak-callout > :first-child {
	margin-top: 0;
}
.ak-callout > :last-child {
	margin-bottom: 0;
}
.ak-callout-warning,
.ak-callout-danger {
	/* the dot hangs left of the text, so a callout that wraps a <p> keeps the dot on its first line */
	position: relative;
	padding-inline-start: calc(6px + 0.5rem);
}
.ak-callout-warning::before,
.ak-callout-danger::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	/* centre of the first line: line-height 1.5 puts it at 0.75em */
	top: calc(0.75em - 3px);
	width: 6px;
	height: 6px;
	border-radius: var(--ak-corner-shape);
	background: currentColor;
}
/* Needs attention but doesn't block. */
.ak-callout-warning {
	color: var(--ak-warning);
}
/* Something will go wrong. */
.ak-callout-danger {
	color: var(--ak-danger);
}

/* ---- Actions ---- */

/* Form field: label above, control below; input / select float on a raised surface, textarea uses the box corner, all share one focus ring. No border. */
.ak-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	max-width: 24rem;
	margin: 0 0 1rem;
	font-size: 0.875rem;
}
.ak-field > label {
	font-weight: 500;
}
.ak-field input,
.ak-field textarea,
.ak-field select {
	font: inherit;
	font-family: var(--ak-font-body);
	color: var(--ak-text);
	background: var(--ak-surface-raised);
	box-shadow: var(--ak-shadow-float);
	border: 0;
	border-radius: var(--ak-corner-shape);
	padding: 0.5rem 1rem;
	min-height: 2.25rem;
	box-sizing: border-box;
	width: 100%;
}
.ak-field textarea {
	border-radius: var(--ak-corner-box);
	min-height: 5rem;
	resize: vertical;
}
.ak-field input:focus-visible,
.ak-field textarea:focus-visible,
.ak-field select:focus-visible {
	outline: 2px solid var(--ak-focus-ring);
	outline-offset: 2px;
}
.ak-field input::placeholder,
.ak-field textarea::placeholder {
	color: var(--ak-text-muted);
}

/* Primary action button: solid ink pill, one per page. */
.ak-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.25rem;
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: var(--ak-corner-shape);
	font-family: var(--ak-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ak-bg);
	background-color: var(--ak-text);
	cursor: pointer;
	text-decoration: none;
	transition: opacity var(--ak-motion-fast) var(--ak-motion-ease-out);
}
.ak-btn:hover {
	opacity: 0.92;
}
.ak-btn:active {
	opacity: 0.85;
}
.ak-btn:focus-visible,
.ak-btn-secondary:focus-visible {
	outline: 2px solid var(--ak-focus-ring);
	outline-offset: 3px;
}
.ak-btn:disabled,
.ak-btn-secondary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Secondary button: every other action uses it; a wash pill. */
.ak-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.25rem;
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: var(--ak-corner-shape);
	font-family: var(--ak-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ak-text);
	background-color: var(--ak-wash);
	cursor: pointer;
	text-decoration: none;
	transition: opacity var(--ak-motion-fast) var(--ak-motion-ease-out);
}
.ak-btn-secondary:hover {
	background-color: var(--ak-wash-hover);
}
.ak-btn-secondary:active {
	background-color: var(--ak-wash-hover);
}

@media (prefers-reduced-motion: reduce) {
	.ak-btn,
	.ak-btn-secondary {
		transition: none;
	}
}