/* ocean-code/app-ui/crates/app-ui-web/css/app-ui.css — App UI's kit sheet, linked after Ocean UI's base and parts
   sheets: only what no Ocean UI part draws (the screen's rows, `columns`, headings and text, the timeline, the list,
   the approval and confirm cards' forms, a form's layout and its marks, the bulk bar). Colours and radii only as
   Ocean UI's variables (a theme preset restyles them), spacing on 4 / 8 / 12 / 16 / 20 / 24; type on Apple's scale
   (17 / 14 / 12 px) with its tracking beside every size, weights 400 and 600; no duration or curve literal. Focus is
   Ocean UI's base rule (every a, button, input, select, summary); the kit draws no other interactive element.
   Every class starts `ak-`; build.rs hashes this file into its address /app-ui.<hash>.css. */

/* the screen: blocks in rows */
.ak-screen {
	display: flex;
	flex-direction: column;
	/* sections 24 apart, twice a card's inner 12–16 and the 4–8 inside a group */
	gap: 24px;
	min-width: 0;
}
.ak-screen .u-kpis {
	margin: 0;
}

/* columns: equal shares side by side, stacked under 900 px (R3) */
.ak-cols {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}
@media (max-width: 899px) {
	.ak-cols {
		grid-auto-flow: row;
	}
}

/* heading and text: levels a step of 1.25× apart under the page title's 28 (21, then 17), with more space above a
   heading (the screen's 24 plus 8) than below it (24) */
.ak-h2,
.ak-h3 {
	margin-top: 8px;
	font-weight: 600;
}
.ak-h2 {
	font-size: 21px;
	line-height: 1.1905;
	letter-spacing: 0.011em;
}
.ak-h3 {
	font-size: 17px;
	line-height: 1.2354;
	letter-spacing: -0.022em;
}
.ak-text {
	max-width: var(--reading);
	color: var(--text2);
}

/* timeline and list: a card surface (fill and shadow, no border) of rows ≥ 44 px split by hairlines */
.ak-tl,
.ak-list {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-radius: var(--radius-card);
	background: var(--card);
	box-shadow: var(--shadow-card);
}
.ak-tl-i,
.ak-list li {
	position: relative;
	display: flex;
	gap: 12px;
	min-height: 44px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--sep);
}
.ak-tl-i:last-child,
.ak-list li:last-child {
	border-bottom: 0;
}
.ak-tl-dot {
	flex: none;
	width: 8px;
	height: 8px;
	margin-top: 6px;
	border-radius: 50%;
	background: var(--tone);
}
.ak-tl-c,
.ak-list-c {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.ak-tl-t,
.ak-list-t {
	font-weight: 600;
}
.ak-tl-m {
	font-size: 12px;
	line-height: 1.3334;
	letter-spacing: -0.01em;
}
.ak-tl-m time {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.ak-tl-more {
	padding: 8px 16px;
	font-size: 12px;
	line-height: 1.3334;
	letter-spacing: -0.01em;
}
/* on touch a list line's link takes the whole row (≥ 44 px) as its target */
@media (pointer: coarse) {
	.ak-list-t a::after {
		content: "";
		position: absolute;
		inset: 0;
	}
}

/* a callout with its action under it */
.ak-callout {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
/* the message spans the screen as a callout without an action does; its button stays at the start */
.ak-callout > .u-alert {
	align-self: stretch;
}

/* approval cards, the confirm card, a form: fields and buttons */
.ak-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(calc(var(--reading) / 2.5), 1fr));
	gap: var(--grid-gap);
}
.ak-approval,
.ak-confirm-a,
.ak-form-a {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
/* a long form's submit stays in reach: sticky at the bottom of the form, clear of the phone's home indicator */
.ak-form-a {
	position: sticky;
	bottom: 0;
	padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
	background: var(--page);
}
/* the card a form may sit in has its own fill */
.u-card .ak-form-a {
	background: var(--card);
}
.ak-confirm {
	display: flex;
	flex-direction: column;
	gap: var(--grid-gap);
}
.ak-confirm-rows {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--text2);
}
.ak-form {
	display: flex;
	flex-direction: column;
	gap: var(--grid-gap);
	max-width: var(--reading);
}
/* a required field's mark in its label (the control carries `required`), and a refused field's sentence under it */
.ak-req {
	margin-left: 4px;
	color: var(--text2);
}
.ak-err {
	font-size: 12px;
	line-height: 1.3334;
	letter-spacing: -0.01em;
	color: var(--bad);
}
.u-field-row > .ak-err {
	grid-column: 2;
}

/* the bulk bar inside a grid's form: a count, then one button (and maybe a choice) per action */
.ak-bulk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 0 0 12px;
}
/* the choice beside the bar's small buttons is as tall as they are (32), 44 on touch */
.ak-bulk .u-input {
	width: auto;
	height: 32px;
}
@media (pointer: coarse) {
	.ak-bulk .u-input {
		height: 44px;
	}
}

/* a grid's end-aligned cells (numbers, times, the actions column) never wrap, digits in even widths; the actions
   column (`open`: the last; no other end cell is a link) is the row's word in the link colour, as the console's row
   words, a 44 px target on touch */
.ak-screen .u-table td.u-end {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.ak-screen .u-table td.u-end > .u-link {
	color: var(--product-text);
}
@media (pointer: coarse) {
	.ak-screen .u-table td.u-end > .u-link {
		display: inline-flex;
		align-items: center;
		justify-content: flex-end;
		min-width: 44px;
		min-height: 44px;
	}
}

/* on a phone every field types at 17 px, so iOS does not zoom into it; a status may be a sentence ("hand-offs up 3x
   since Monday"), so it wraps inside its cell rather than push the grid sideways (figures and badges never wrap) */
@media (max-width: 639px) {
	.ak-screen .u-input {
		font-size: 17px;
		letter-spacing: -0.022em;
	}
	.ak-screen .u-table td .u-status {
		white-space: normal;
	}
}