/*
 * Matches the otadashboard.au internal-tools design system (the ota-kb /
 * ota-card kit) — same token values as ota-sales-dashboard, re-prefixed.
 * Status colour is never the only encoding: every row also carries a mark
 * (✗ ● ○) and a text label ("9d late", "Today").
 */
.ota-hud-root {
	--ota-hud-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--ota-hud-text: #0f172a;
	--ota-hud-text-muted: #475569;
	--ota-hud-bg: #ffffff;
	--ota-hud-surface: #fcfcfb;
	--ota-hud-border: #e2e8f0;
	--ota-hud-accent: #1d4ed8;
	--ota-hud-radius: 10px;

	--ota-hud-ok: #00a32a;
	--ota-hud-warn: #dba617;
	--ota-hud-risk: #b32d2e;
	--ota-hud-risk-bg: #fcf0f1;
	--ota-hud-warn-bg: #fcf9e8;

	font-family: var( --ota-hud-font );
	font-size: 14px;
	color: var( --ota-hud-text );
	width: 100%;
	max-width: 1280px;
	margin-top: 12px;
	box-sizing: border-box;
	position: relative;
	/* Breakpoints follow the board's own width, not the window's: in wp-admin
	   the sidebar eats ~160px the viewport doesn't know about. */
	container-type: inline-size;
	container-name: ota-hud;
}

.ota-hud-root * {
	box-sizing: border-box;
}

.ota-hud-empty {
	color: var( --ota-hud-text-muted );
	padding: 32px 24px;
	text-align: center;
	background: var( --ota-hud-bg );
	border: 1px solid var( --ota-hud-border );
	border-radius: var( --ota-hud-radius );
}

.ota-hud-empty--ok {
	color: var( --ota-hud-ok );
	font-weight: 600;
}

.ota-hud-empty--risk {
	color: var( --ota-hud-risk );
}

/* ---- header ---- */
.ota-hud-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 24px;
	margin-bottom: 14px;
}

.ota-hud-title {
	margin: 0;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 700;
	color: var( --ota-hud-text );
}

.ota-hud-sub {
	color: var( --ota-hud-text-muted );
	font-size: 13px;
	margin-top: 2px;
}

.ota-hud-sync {
	color: var( --ota-hud-accent );
}

.ota-hud-tiles {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	flex: 1;
}

.ota-hud-tile {
	display: flex;
	flex-direction: column;
	min-width: 92px;
	padding: 8px 14px;
	background: var( --ota-hud-bg );
	border: 1px solid var( --ota-hud-border );
	border-left-width: 4px;
	border-radius: var( --ota-hud-radius );
}

.ota-hud-tile-n {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.ota-hud-tile-l {
	font-size: 12px;
	color: var( --ota-hud-text-muted );
}

.ota-hud-tile--overdue { border-left-color: var( --ota-hud-risk ); }
.ota-hud-tile--overdue .ota-hud-tile-n { color: var( --ota-hud-risk ); }
.ota-hud-tile--today { border-left-color: var( --ota-hud-warn ); }
.ota-hud-tile--week { border-left-color: var( --ota-hud-accent ); }
.ota-hud-tile--nodate { border-left-color: var( --ota-hud-border ); }
.ota-hud-tile.is-zero .ota-hud-tile-n { color: var( --ota-hud-text-muted ); }

.ota-hud-header-actions {
	display: flex;
	gap: 8px;
}

/* ---- controls ---- */
.ota-hud-root .ota-hud-btn {
	/* Reset what a theme's content-button styles (Kubio on the live site) set. */
	display: inline-block;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	box-shadow: none;
	min-height: 0;
	font-family: inherit;
	font-size: 13px;
	line-height: 1;
	padding: 8px 12px;
	border: 1px solid var( --ota-hud-border );
	border-radius: 8px;
	background: var( --ota-hud-bg );
	color: var( --ota-hud-text );
	cursor: pointer;
	white-space: nowrap;
}

.ota-hud-root .ota-hud-btn:hover:not( :disabled ) {
	border-color: var( --ota-hud-accent );
	color: var( --ota-hud-accent );
}

.ota-hud-root .ota-hud-btn:focus-visible,
.ota-hud-select:focus-visible,
.ota-hud-input:focus-visible,
.ota-hud-root .ota-hud-seg-btn:focus-visible {
	outline: 2px solid var( --ota-hud-accent );
	outline-offset: 1px;
}

.ota-hud-root .ota-hud-btn:disabled {
	opacity: 0.5;
	cursor: default;
}

.ota-hud-root .ota-hud-btn--primary {
	background: var( --ota-hud-accent );
	border-color: var( --ota-hud-accent );
	color: #fff;
}

.ota-hud-root .ota-hud-btn--primary:hover:not( :disabled ) {
	color: #fff;
	filter: brightness( 1.1 );
}

.ota-hud-root .ota-hud-btn--done:hover:not( :disabled ) {
	border-color: var( --ota-hud-ok );
	color: var( --ota-hud-ok );
}

.ota-hud-select,
.ota-hud-input {
	font: inherit;
	font-size: 13px;
	padding: 6px 10px;
	min-height: 33px;
	border: 1px solid var( --ota-hud-border );
	border-radius: 8px;
	background: var( --ota-hud-bg );
	color: var( --ota-hud-text );
	max-width: 100%;
}

.ota-hud-select--sm {
	min-height: 31px;
	padding: 4px 8px;
	max-width: 140px;
}

.ota-hud-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.ota-hud-toolbar .ota-hud-btn--primary {
	margin-left: auto;
}

.ota-hud-seg {
	display: inline-flex;
	border: 1px solid var( --ota-hud-border );
	border-radius: 8px;
	overflow: hidden;
	background: var( --ota-hud-bg );
}

.ota-hud-root .ota-hud-seg-btn {
	font: inherit;
	font-size: 13px;
	padding: 8px 14px;
	border: 0;
	border-right: 1px solid var( --ota-hud-border );
	background: transparent;
	color: var( --ota-hud-text-muted );
	cursor: pointer;
}

.ota-hud-root .ota-hud-seg-btn:last-child {
	border-right: 0;
}

.ota-hud-root .ota-hud-seg-btn.is-on {
	background: var( --ota-hud-text );
	color: #fff;
}

.ota-hud-warn {
	background: var( --ota-hud-warn-bg );
	border: 1px solid #f0e2a8;
	border-radius: var( --ota-hud-radius );
	padding: 10px 14px;
	margin-bottom: 12px;
	font-size: 13px;
	line-height: 1.5;
}

/* ---- add form ---- */
.ota-hud-add {
	display: grid;
	grid-template-columns: 170px 1fr 160px 150px auto auto;
	gap: 8px;
	padding: 12px;
	margin-bottom: 12px;
	background: var( --ota-hud-surface );
	border: 1px solid var( --ota-hud-accent );
	border-radius: var( --ota-hud-radius );
}

/* ---- the list ---- */
.ota-hud-list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var( --ota-hud-bg );
	border: 1px solid var( --ota-hud-border );
	border-radius: var( --ota-hud-radius );
	overflow: hidden;
}

.ota-hud-row {
	display: grid;
	grid-template-columns: 96px 120px minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 10px 14px;
	border-bottom: 1px solid var( --ota-hud-border );
	border-left: 4px solid transparent;
}

.ota-hud-row:last-child {
	border-bottom: 0;
}

.ota-hud-row--overdue {
	border-left-color: var( --ota-hud-risk );
	background: var( --ota-hud-risk-bg );
}

.ota-hud-row--today {
	border-left-color: var( --ota-hud-warn );
}

.ota-hud-row.is-busy {
	opacity: 0.55;
}

.ota-hud-when {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ota-hud-row--overdue .ota-hud-when { color: var( --ota-hud-risk ); }
.ota-hud-row--today .ota-hud-when { color: #8a6d0b; }
.ota-hud-row--week .ota-hud-when,
.ota-hud-row--later .ota-hud-when,
.ota-hud-row--nodate .ota-hud-when { color: var( --ota-hud-text-muted ); font-weight: 600; }

.ota-hud-mark {
	display: inline-block;
	width: 1.2em;
}

.ota-hud-dept {
	display: inline-block;
	margin-right: 4px;
	padding: 1px 6px;
	border-radius: 4px;
	background: #f1f5f9;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --ota-hud-text-muted );
}

.ota-hud-who {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ota-hud-who.is-none {
	color: var( --ota-hud-risk );
	font-style: italic;
	font-weight: 400;
}

.ota-hud-what {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ota-hud-what-title {
	font-weight: 500;
	overflow-wrap: break-word;
}

.ota-hud-what-meta {
	margin-top: 2px;
	font-size: 12px;
	color: var( --ota-hud-text-muted );
}

.ota-hud-controls {
	display: flex;
	gap: 6px;
	align-items: center;
}

/* ---- footer & toasts ---- */
.ota-hud-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	align-items: baseline;
	margin-top: 10px;
	font-size: 13px;
	color: var( --ota-hud-text-muted );
}

.ota-hud-footer a {
	margin-left: auto;
	color: var( --ota-hud-accent );
}

.ota-hud-done-list {
	font-size: 12px;
}

.ota-hud-toasts {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 420px;
}

.ota-hud-toast {
	background: var( --ota-hud-text );
	color: #fff;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13px;
	box-shadow: 0 6px 20px rgba( 15, 23, 42, 0.25 );
}

.ota-hud-toast.is-error {
	background: var( --ota-hud-risk );
}

/* ---- present mode: the meeting-room screen ---- */
.ota-hud-lock {
	overflow: hidden;
}

.ota-hud-root.ota-hud--present {
	position: fixed;
	inset: 0;
	z-index: 100000;
	max-width: none;
	margin: 0;
	padding: 28px 36px;
	overflow-y: auto;
	background: var( --ota-hud-surface );
	font-size: 18px;
}

.ota-hud--present .ota-hud-title { font-size: 32px; }
.ota-hud--present .ota-hud-sub { font-size: 16px; }
.ota-hud--present .ota-hud-tile-n { font-size: 34px; }
.ota-hud--present .ota-hud-tile-l { font-size: 14px; }
.ota-hud--present .ota-hud-row { padding: 14px 18px; grid-template-columns: 130px 160px minmax( 0, 1fr ) auto; }
.ota-hud--present .ota-hud-dept { font-size: 13px; }
.ota-hud--present .ota-hud-what-meta { font-size: 14px; }

/* ---- narrow boards: controls drop under the action ---- */
@container ota-hud ( max-width: 860px ) {
	.ota-hud-row,
	.ota-hud--present .ota-hud-row {
		grid-template-columns: 88px minmax( 0, 1fr );
		gap: 6px 12px;
	}
	.ota-hud-who { grid-column: 2; grid-row: 1; }
	.ota-hud-what { grid-column: 2; }
	.ota-hud-when { grid-row: 1 / span 2; align-self: start; }
	.ota-hud-controls { grid-column: 2; flex-wrap: wrap; }
	.ota-hud-add { grid-template-columns: 1fr 1fr; }
	.ota-hud-add .ota-hud-input:not( .ota-hud-input--date ) { grid-column: 1 / -1; }
	.ota-hud-tiles { flex: 1 1 100%; order: 3; }
}

@container ota-hud ( max-width: 520px ) {
	.ota-hud-add { grid-template-columns: 1fr; }
	.ota-hud-toolbar .ota-hud-root .ota-hud-btn--primary,
	.ota-hud-toolbar .ota-hud-btn--primary { margin-left: 0; }
	.ota-hud-tile { min-width: 0; flex: 1; padding: 6px 10px; }
}

/* ---- ✨ SMART ---- */
.ota-hud-root {
	--ota-hud-ai: #6d28d9;
	--ota-hud-ai-bg: #f5f3ff;
	--ota-hud-ai-border: #ddd6fe;
}

.ota-hud-root .ota-hud-btn--smart {
	color: var( --ota-hud-ai );
	border-color: var( --ota-hud-ai-border );
	background: var( --ota-hud-ai-bg );
}

.ota-hud-root .ota-hud-btn--smart:hover:not( :disabled ),
.ota-hud-root .ota-hud-btn--smart.is-on {
	color: #fff;
	background: var( --ota-hud-ai );
	border-color: var( --ota-hud-ai );
}

.ota-hud-smart {
	grid-column: 1 / -1;
	margin-top: 4px;
	padding: 14px 16px;
	background: var( --ota-hud-bg );
	border: 1px solid var( --ota-hud-ai-border );
	border-left: 4px solid var( --ota-hud-ai );
	border-radius: var( --ota-hud-radius );
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13px;
	line-height: 1.5;
}

.ota-hud-smart.is-loading {
	flex-direction: row;
	align-items: center;
	color: var( --ota-hud-ai );
}

.ota-hud-smart.is-error {
	border-left-color: var( --ota-hud-risk );
	color: var( --ota-hud-risk );
}

.ota-hud-smart.is-error p {
	margin: 0;
}

.ota-hud-smart-spin {
	width: 14px;
	height: 14px;
	flex: none;
	border: 2px solid var( --ota-hud-ai-border );
	border-top-color: var( --ota-hud-ai );
	border-radius: 50%;
	animation: ota-hud-spin 0.8s linear infinite;
}

@keyframes ota-hud-spin {
	to { transform: rotate( 360deg ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.ota-hud-smart-spin { animation-duration: 2.4s; }
}

.ota-hud-smart-head {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var( --ota-hud-ai );
}

.ota-hud-smart-badge {
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
	background: var( --ota-hud-warn-bg );
	color: #8a6d0b;
	border: 1px solid #f0e2a8;
}

.ota-hud-smart-was {
	color: var( --ota-hud-text-muted );
	font-size: 12px;
}

.ota-hud-root .ota-hud-smart-title {
	width: 100%;
	font-size: 15px;
	font-weight: 600;
	padding: 8px 10px;
}

.ota-hud-smart-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}

.ota-hud-smart-checks li {
	display: grid;
	grid-template-columns: 22px 92px minmax( 0, 1fr );
	gap: 8px;
	align-items: baseline;
	margin: 0;
}

.ota-hud-smart-letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 12px;
	background: var( --ota-hud-ai );
	color: #fff;
}

.ota-hud-smart-checks .is-ok .ota-hud-smart-letter {
	background: #e2e8f0;
	color: var( --ota-hud-text-muted );
}

.ota-hud-smart-state {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --ota-hud-ai );
}

.ota-hud-smart-checks .is-ok .ota-hud-smart-state {
	color: var( --ota-hud-text-muted );
}

.ota-hud-smart-polc {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.ota-hud-smart-polc > div {
	display: flex;
	flex-direction: column;
	padding: 8px 10px;
	background: var( --ota-hud-ai-bg );
	border-radius: 8px;
}

.ota-hud-smart-polc-l {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --ota-hud-ai );
}

.ota-hud-smart-next ol {
	margin: 4px 0 0 18px;
	padding: 0;
}

.ota-hud-smart-due {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}

.ota-hud-smart-why {
	color: var( --ota-hud-text-muted );
	flex: 1 1 260px;
}

.ota-hud-smart-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.ota-hud-smart-note {
	font-size: 12px;
	color: var( --ota-hud-text-muted );
}

.ota-hud-add .ota-hud-add-smart {
	grid-column: 1 / -1;
}

.ota-hud-add .ota-hud-add-smart:empty {
	display: none;
}

@container ota-hud ( max-width: 860px ) {
	.ota-hud-smart-polc { grid-template-columns: 1fr; }
	.ota-hud-smart-checks li { grid-template-columns: 22px minmax( 0, 1fr ); }
	.ota-hud-smart-state { display: none; }
}

/* ---- notes on the board (ToDo description) ---- */
.ota-hud-root .ota-hud-notes-toggle {
	display: inline;
	margin: 0 0 0 6px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	min-height: 0;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var( --ota-hud-ai );
	cursor: pointer;
}

.ota-hud-root .ota-hud-notes-toggle:hover,
.ota-hud-root .ota-hud-notes-toggle:focus-visible {
	text-decoration: underline;
}

.ota-hud-notes {
	margin-top: 8px;
	padding: 10px 12px;
	background: var( --ota-hud-ai-bg );
	border-left: 3px solid var( --ota-hud-ai );
	border-radius: 0 8px 8px 0;
	display: grid;
	gap: 4px;
	font-size: 13px;
	line-height: 1.5;
}

.ota-hud-notes-row {
	display: grid;
	grid-template-columns: 84px minmax( 0, 1fr );
	gap: 8px;
}

.ota-hud-notes-row.is-plain {
	grid-template-columns: minmax( 0, 1fr );
}

.ota-hud-notes-l {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --ota-hud-ai );
	padding-top: 2px;
}

.ota-hud-notes ol {
	margin: 0 0 0 18px;
	padding: 0;
}

.ota-hud-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var( --ota-hud-text-muted );
	cursor: pointer;
}

/* ---- add form: "notes attached" tag ---- */
.ota-hud-add .ota-hud-add-tag {
	grid-column: 1 / -1;
}

.ota-hud-add .ota-hud-add-tag:empty {
	display: none;
}

.ota-hud-notes-tag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	padding: 8px 12px;
	font-size: 13px;
	color: var( --ota-hud-ai );
	background: var( --ota-hud-ai-bg );
	border: 1px solid var( --ota-hud-ai-border );
	border-radius: 8px;
}

.ota-hud-notes-tag .ota-hud-notes-toggle {
	margin-left: 0;
}

/* ---- SMART panel: wrapping title + owner nudge ---- */
.ota-hud-root textarea.ota-hud-smart-title {
	resize: none;
	overflow: hidden;
	line-height: 1.4;
	font-family: inherit;
}

.ota-hud-smart-nudge {
	padding: 8px 12px;
	background: var( --ota-hud-warn-bg );
	border: 1px solid #f0e2a8;
	border-radius: 8px;
	color: #6b5408;
}

.ota-hud--present .ota-hud-notes { font-size: 16px; }
.ota-hud--present .ota-hud-notes-l { font-size: 13px; }

@container ota-hud ( max-width: 520px ) {
	.ota-hud-notes-row { grid-template-columns: minmax( 0, 1fr ); gap: 0; }
}

.ota-hud-root textarea.ota-hud-add-title {
	resize: none;
	overflow: hidden;
	line-height: 1.4;
	font-family: inherit;
	min-height: 33px;
}

/* ---- v0.3: the brief (tabs on each row) ---- */
.ota-hud-muted {
	color: var( --ota-hud-text-muted );
	font-size: 12px;
	margin: 0 0 6px;
}

.ota-hud-latest {
	font-size: 12px;
	color: var( --ota-hud-text-muted );
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ota-hud-progress {
	font-size: 12px;
	color: var( --ota-hud-text-muted );
}

.ota-hud-brief {
	margin-top: 8px;
	border: 1px solid var( --ota-hud-ai-border );
	border-radius: 8px;
	background: var( --ota-hud-bg );
	overflow: hidden;
}

.ota-hud-brief-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 0 6px;
	background: var( --ota-hud-ai-bg );
	border-bottom: 1px solid var( --ota-hud-ai-border );
}

.ota-hud-root .ota-hud-brief-tab {
	margin: 0;
	padding: 8px 10px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	box-shadow: none;
	min-height: 0;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var( --ota-hud-text-muted );
	cursor: pointer;
}

.ota-hud-root .ota-hud-brief-tab.is-on {
	color: var( --ota-hud-ai );
	border-bottom-color: var( --ota-hud-ai );
}

.ota-hud-root .ota-hud-brief-tab:focus-visible {
	outline: 2px solid var( --ota-hud-ai );
	outline-offset: -2px;
}

.ota-hud-brief-body {
	padding: 10px 12px;
	font-size: 13px;
	line-height: 1.5;
}

.ota-hud-brief-body p {
	margin: 0 0 8px;
}

.ota-hud-brief-context {
	color: var( --ota-hud-text );
}

.ota-hud-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ota-hud-steps li {
	display: flex;
	gap: 8px;
	align-items: baseline;
	padding: 4px 0;
	border-top: 1px solid var( --ota-hud-border );
	margin: 0;
}

.ota-hud-steps li:first-child {
	border-top: 0;
}

.ota-hud-steps li.is-done .ota-hud-step-title {
	text-decoration: line-through;
	color: var( --ota-hud-text-muted );
}

.ota-hud-steps .ota-hud-step-mark {
	width: 1em;
	color: var( --ota-hud-ai );
	flex: none;
}

.ota-hud-steps .ota-hud-step-title {
	flex: 1;
}

.ota-hud-root textarea.ota-hud-prompt {
	width: 100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.5;
	background: var( --ota-hud-surface );
	color: var( --ota-hud-text );
	resize: vertical;
	min-height: 160px;
}

.ota-hud-prompt-wrap .ota-hud-smart-actions {
	margin-top: 6px;
}

.ota-hud-log-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.ota-hud-log-h {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --ota-hud-ai );
	margin: 0 0 6px;
}

.ota-hud-log {
	margin: 0 0 8px 16px;
	padding: 0;
}

.ota-hud-log li {
	margin: 0 0 4px;
	overflow-wrap: anywhere;
}

.ota-hud-log a {
	color: var( --ota-hud-accent );
}

.ota-hud-log-form {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.ota-hud-log-form .ota-hud-input {
	flex: 1 1 160px;
}

.ota-hud-field-err {
	flex-basis: 100%;
	font-size: 12px;
	color: var( --ota-hud-risk );
}

.ota-hud-field-err:empty {
	display: none;
}

/* ---- v0.3: the SMART panel as a three-part brief ---- */
.ota-hud-sec {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 10px;
	border-top: 1px solid var( --ota-hud-ai-border );
}

.ota-hud-sec-h {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.ota-hud-sec-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var( --ota-hud-ai );
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.ota-hud-field-l {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --ota-hud-text-muted );
	margin-bottom: -4px;
}

.ota-hud-root textarea.ota-hud-smart-context {
	width: 100%;
	resize: none;
	overflow: hidden;
	line-height: 1.5;
	font-family: inherit;
}

.ota-hud-substeps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.ota-hud-substeps li {
	display: grid;
	grid-template-columns: 20px minmax( 0, 1fr ) 150px;
	gap: 8px;
	align-items: center;
	margin: 0;
}

.ota-hud-substeps li.is-off .ota-hud-input {
	opacity: 0.5;
	text-decoration: line-through;
}

.ota-hud-smart-why-box summary {
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	color: var( --ota-hud-ai );
}

.ota-hud-smart-why-box[open] summary {
	margin-bottom: 6px;
}

.ota-hud-smart-actions--main {
	padding-top: 10px;
	border-top: 1px solid var( --ota-hud-ai-border );
}

@container ota-hud ( max-width: 860px ) {
	.ota-hud-log-grid { grid-template-columns: 1fr; }
	.ota-hud-substeps li { grid-template-columns: 20px minmax( 0, 1fr ); }
	.ota-hud-substeps li .ota-hud-input--date { grid-column: 2; }
}

/* ---- v0.3.2: theme-proof brief text (Kubio styles <p> on front-end pages) ---- */
.ota-hud-root .ota-hud-brief-body p,
.ota-hud-root .ota-hud-brief-body li,
.ota-hud-root .ota-hud-smart p,
.ota-hud-root .ota-hud-smart li {
	font-family: inherit;
	font-size: 13px;
	line-height: 1.5;
	color: var( --ota-hud-text );
	letter-spacing: 0;
	text-transform: none;
}

.ota-hud-root .ota-hud-brief-body p.ota-hud-muted,
.ota-hud-root .ota-hud-smart p.ota-hud-muted {
	font-size: 12px;
	color: var( --ota-hud-text-muted );
}

.ota-hud--present .ota-hud-brief-body p,
.ota-hud--present .ota-hud-brief-body li {
	font-size: 16px;
}

.ota-hud-brief-upgrade {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding: 8px 12px;
	margin-bottom: 10px;
	background: var( --ota-hud-ai-bg );
	border: 1px dashed var( --ota-hud-ai-border );
	border-radius: 8px;
	font-size: 13px;
	color: var( --ota-hud-ai );
}

/* ---- v0.3.3: out-rank theme paragraph rules (id beats class selectors) ---- */
#ota-huddle .ota-hud-brief-body p,
#ota-huddle .ota-hud-brief-body li,
#ota-huddle .ota-hud-smart p,
#ota-huddle .ota-hud-smart li {
	font-family: inherit;
	font-size: 13px;
	line-height: 1.5;
	color: var( --ota-hud-text );
	letter-spacing: 0;
	text-transform: none;
}

#ota-huddle .ota-hud-brief-body p.ota-hud-muted,
#ota-huddle .ota-hud-smart p.ota-hud-muted {
	font-size: 12px;
	color: var( --ota-hud-text-muted );
}

#ota-huddle.ota-hud--present .ota-hud-brief-body p,
#ota-huddle.ota-hud--present .ota-hud-brief-body li {
	font-size: 16px;
}