/* 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, the bulk bar). Colours, spacing and radii only as Ocean
   UI's variables (a theme preset restyles them); type on Apple's scale (17 / 14 / 12 px), weights 400 and 600.
   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;
	gap: var(--grid-gap);
	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: var(--grid-gap);
	align-items: start;
}
@media (max-width: 899px) {
	.ak-cols {
		grid-auto-flow: row;
	}
}

/* heading and text */
.ak-h2 {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2941;
}
.ak-h3 {
	font-size: 14px;
	font-weight: 600;
}
.ak-text {
	max-width: var(--reading);
	color: var(--text2);
}

/* timeline and list: a surface of rows split by hairlines */
.ak-tl,
.ak-list {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--sep);
	border-radius: var(--radius-card);
	background: var(--card);
	box-shadow: var(--shadow-card);
}
.ak-tl-i,
.ak-list li {
	display: flex;
	gap: calc(var(--gap) * 1.5);
	padding: calc(var(--gap) * 1.5) var(--grid-gap);
	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: var(--gap);
	height: var(--gap);
	margin-top: calc(var(--gap) * 0.75);
	border-radius: var(--radius-pill);
	background: var(--tone);
}
.ak-tl-c,
.ak-list-c {
	display: flex;
	flex-direction: column;
	gap: calc(var(--gap) / 4);
	min-width: 0;
}
.ak-tl-t,
.ak-list-t {
	font-weight: 600;
}
.ak-tl-m {
	font-size: 12px;
}
.ak-tl-more {
	padding: var(--gap) var(--grid-gap);
	font-size: 12px;
}

/* a callout with its action under it */
.ak-callout {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap);
}
/* 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: var(--gap);
}
.ak-confirm {
	display: flex;
	flex-direction: column;
	gap: var(--grid-gap);
}
.ak-confirm-rows {
	display: flex;
	flex-direction: column;
	gap: calc(var(--gap) / 2);
	color: var(--text2);
}
.ak-form {
	display: flex;
	flex-direction: column;
	gap: var(--grid-gap);
	max-width: var(--reading);
}

/* 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: var(--gap);
	padding: 0 0 calc(var(--gap) * 1.5);
}
.ak-bulk .u-input {
	width: auto;
	height: calc(var(--gap) * 4);
}