/* KMI Storefront — restrained federal-portal chrome over USWDS defaults. */

:root {
	--kmi-navy: #0b1f3a;
	--kmi-blue: #005ea2;
	--kmi-gold: #b3922c;
	/* One shell width for banner, sealbar, nav, main and footer. 75rem is the
	   comfortable desktop measure here: wide enough for the data tables, not so
	   wide that cards and tables read as stretched slabs on a 1920 screen. */
	--kmi-shell-max: 75rem;
	--kmi-shell-pad: 1rem;
}

@media all and (min-width: 64em) {
	:root {
		--kmi-shell-pad: 2rem;
	}
}

/* The single content column every region aligns to (USWDS containers use the
   same 1rem/2rem gutter and center the box above 64rem). */
.kmi-container,
.usa-banner__inner,
.usa-nav-container,
.usa-footer__primary-container {
	width: 100%;
	max-width: var(--kmi-shell-max);
	margin-inline: auto;
	padding-inline: var(--kmi-shell-pad);
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* NSA-flavored dark strip above the USWDS header. The strip is full-bleed;
   its contents ride the shared container so they line up with the nav and
   page content. */
.kmi-sealbar {
	background: var(--kmi-navy);
	color: #fff;
	font-family: 'Public Sans', sans-serif;
	font-size: 0.95rem;
}

.kmi-sealbar-inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.5rem;
}

.kmi-sealbar .kmi-seal-img {
	height: 2.4rem;
	width: auto;
	border-radius: 999px;
	box-shadow: 0 0 0 2px var(--kmi-gold);
}

.kmi-sealbar .kmi-agency {
	font-weight: 700;
	letter-spacing: 0.02em;
}

.kmi-sealbar .kmi-sublabel {
	color: #c8d3e0;
	font-size: 0.8rem;
}

.kmi-sealbar .kmi-sealbar-user {
	margin-left: auto;
	font-size: 0.75rem;
	color: #c8d3e0;
}

/* Navbar: all links must fit on any screen size — the nav rides the shared
   container (see .kmi-container), horizontal scroll only as a last resort. */

.usa-navbar {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-width: 0;
	width: 100%;
}

.usa-logo {
	/* USWDS gives the logo `flex: 1 0 0%` (basis 0, no shrink), so on narrow
	   screens the nav's content width wins and the brand box collapses to zero
	   width — the text then paints over the nav. Size it to its content. */
	flex: 0 0 auto;
	min-width: 0;
}

/* The storefront has no hamburger toggle, so the primary nav must always
   render as a single horizontal bar — fight USWDS's mobile overlay at every
   width, and let the list overflow-scroll instead of clipping. */
.usa-nav {
	flex: 1 1 auto;
	min-width: 0;
	display: flex !important;
	position: static !important;
	flex-direction: row !important;
	align-items: center;
	/* Centering is delegated to .usa-nav__primary's auto margins so that on
	   overflow the list stays left-anchored and scrolls right instead of
	   clipping off the left edge. */
	justify-content: normal;
	overflow-x: auto;
	overflow-y: visible;
	width: auto;
	background: transparent;
	scrollbar-width: thin;
	scrollbar-color: #b3922c #e6e9ec;
}

.usa-nav__primary {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	white-space: nowrap;
	justify-content: center;
	/* Overflow-safe centering: when the list is wider than the nav, auto
	   margins collapse to 0 so content overflows to the right (scrollable)
	   instead of clipping off the left edge. */
	margin: 0 auto;
}

.usa-nav__primary-item {
	margin: 0;
	list-style: none;
}

.usa-nav__link {
	padding: 1rem 0.55rem;
}

@media (max-width: 1300px) {
	.usa-nav__link {
		padding: 1rem 0.4rem;
		font-size: 0.92rem;
	}
	.kmi-brand-sub {
		display: none;
	}
}

@media (max-width: 1100px) {
	.usa-nav__link {
		padding: 1rem 0.3rem;
		font-size: 0.85rem;
	}
	.usa-logo__text {
		margin-right: 0.5rem;
	}
	.usa-logo__text .kmi-brand-name {
		font-size: 1.1rem;
	}
}

@media (max-width: 900px) {
	.usa-nav__link {
		padding: 0.9rem 0.25rem;
		font-size: 0.8rem;
	}
	.usa-logo__text .kmi-brand-name {
		font-size: 1rem;
	}
	.kmi-sealbar-inner {
		padding-block: 0.4rem;
		gap: 0.5rem;
	}
	.kmi-sealbar .kmi-sublabel {
		display: none;
	}
	.kmi-sealbar .kmi-agency {
		font-size: 0.85rem;
	}
}

@media (max-width: 640px) {
	.usa-logo__text .kmi-brand-name {
		font-size: 0.9rem;
	}
	.usa-navbar {
		gap: 0.5rem;
	}
	.kmi-sealbar-user {
		display: none;
	}
}

/* Active configuration bar */
.kmi-active-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	background: #0b1f3a;
	color: #fff;
	font-size: 0.82rem;
	border-bottom: 3px solid var(--kmi-gold);
	/* Keep the pad for the strip's own text, but do not break out of the
	   container: every box on the page shares one left/right edge. */
	padding: 0.45rem 1rem;
	/* Keep the page heading off the strip. */
	margin-bottom: 1.5rem;
}

.kmi-active-bar .kmi-active-controls .usa-select {
	/* USWDS gives selects a .5rem top margin, which nudges the control 4px
	   below the buttons it sits between (flex centers the margin box). */
	margin: 0;
}

.kmi-active-bar .kmi-active-label {
	font-weight: 700;
	letter-spacing: 0.08em;
	font-size: 0.7rem;
	color: var(--kmi-gold);
}

.kmi-active-bar a.kmi-active-op {
	color: #fff;
}

.kmi-active-bar .kmi-active-meta {
	color: #c8d3e0;
}

.kmi-active-bar .kmi-active-none {
	color: #c8d3e0;
	font-style: italic;
}

.kmi-active-bar .kmi-active-controls {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.kmi-active-bar .usa-select {
	font-size: 0.8rem;
	height: 2rem;
	padding: 0 1.75rem 0 0.5rem;
	background-color: #fff;
	color: #0b1f3a;
}

.kmi-active-bar .usa-button--small {
	font-size: 0.75rem;
	height: 2rem;
	padding: 0.2rem 0.75rem;
	white-space: nowrap;
}

.usa-header {
	border-bottom: 3px solid var(--kmi-gold);
}

.usa-logo__text {
	font-family: 'Source Serif 4', 'Public Sans', Georgia, serif;
}

.kmi-brand {
	display: flex;
	flex-direction: column;
}

.kmi-brand .kmi-brand-name {
	font-family: 'Source Serif 4', Georgia, serif;
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--kmi-navy);
}

.kmi-brand .kmi-brand-sub {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5b616b;
}

.kmi-main {
	flex: 1;
	padding: 2rem 0 3rem;
}

.kmi-hero {
	background: var(--kmi-navy);
	color: #fff;
	padding: 3rem 0;
}

.kmi-hero h1 {
	color: #fff;
	font-family: 'Source Serif 4', Georgia, serif;
	margin-bottom: 0.75rem;
}

.kmi-hero .usa-prose p {
	color: #d7e2f0;
}

.kmi-stats-grid {
	display: grid;
	/* Four balanced columns instead of an auto-fit count: eight counters land
	   as two tidy rows, four KPIs fill one row, and nothing stretches. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
}

@media all and (max-width: 55em) {
	.kmi-stats-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media all and (max-width: 30em) {
	.kmi-stats-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.kmi-stat {
	border: 1px solid #dcdee0;
	border-left: 4px solid var(--kmi-blue);
	padding: 0.75rem 1rem;
	background: #fff;
}

.kmi-stat .kmi-stat-value {
	font-size: 1.6rem;
	font-weight: 700;
	font-family: 'Source Serif 4', Georgia, serif;
	color: var(--kmi-navy);
}

.kmi-stat .kmi-stat-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #5b616b;
}

.kmi-table-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* USWDS buttons carry a .5rem right margin that made these rows wrap while
	   there was still room for both buttons; drop it and use the flex gap. */
	gap: 0.5rem;
}

.kmi-table-actions > * {
	margin-right: 0;
}

.kmi-badge {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 2px;
	border: 1px solid;
}

.kmi-badge--issued { color: #1a6e2e; border-color: #1a6e2e; background: #f2fbf4; }
.kmi-badge--published, .kmi-badge--approved, .kmi-badge--fulfilled { color: #005ea2; border-color: #005ea2; background: #f0f7fc; }
.kmi-badge--draft, .kmi-badge--pending { color: #71767a; border-color: #71767a; background: #f6f6f6; }
.kmi-badge--compromised, .kmi-badge--zeroized { color: #b50909; border-color: #b50909; background: #fcf0f0; }
.kmi-badge--expired { color: #8a6d00; border-color: #8a6d00; background: #fdf9ec; }
.kmi-badge--archived, .kmi-badge--denied { color: #3d4551; border-color: #3d4551; background: #f0f1f3; }
.kmi-badge--active { color: #fff; border-color: #0b1f3a; background: #0b1f3a; }

/* A badge that trails running text (operation name + status) needs its own
   spacing — the collapsed space before an inline-block renders as nothing. */
.usa-prose .kmi-badge {
	margin-left: 0.35rem;
}

.kmi-fineprint {
	font-size: 0.8rem;
	color: #5b616b;
	margin: 1rem 0;
}

/* Planner sections: the operation page is a stepped workspace, one section at
   a time, so the page stops being a seven-accordion scroll. */
.kmi-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 1.25rem;
	border-bottom: 2px solid #dcdee0;
}

.kmi-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 0.9rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: #1a4480;
	text-decoration: none;
	border: 1px solid transparent;
	border-bottom: none;
	margin-bottom: -2px;
}

.kmi-tab:hover {
	background: #f0f4f8;
}

.kmi-tab--active {
	background: #fff;
	border-color: #dcdee0;
	border-bottom: 3px solid var(--kmi-gold);
	color: #0b1f3a;
}

.kmi-tab__count {
	font-size: 0.7rem;
	font-weight: 700;
	background: #e6ebf1;
	color: #3d4551;
	border-radius: 999px;
	padding: 0.05rem 0.4rem;
}

/* Key ring summary: type/status chips above the key table. */
.kmi-ring-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1rem;
}

.kmi-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.75rem;
	padding: 0.15rem 0.5rem;
	border: 1px solid #dcdee0;
	border-radius: 999px;
	background: #f7f8fa;
	color: #1b1b1b;
}

.kmi-chip--issued { border-color: #97d4b5; background: #eaf6f0; }
.kmi-chip--zeroized, .kmi-chip--destroyed, .kmi-chip--compromised { border-color: #e5a3a0; background: #fbeeed; }
.kmi-chip--expired { border-color: #f0c86a; background: #fdf6e3; }

/* Profile editor tables: register rows stay narrow so the pair reads as one line. */
.kmi-register-table {
	margin: 0.5rem 0 0.75rem;
}

.kmi-register-table td {
	border: none;
	padding: 0.15rem 0.3rem 0.15rem 0;
	vertical-align: middle;
}

.kmi-register-table td:first-child { width: 18rem; }
.kmi-register-table td:nth-child(2) { width: 12rem; }

.kmi-input--tiny {
	width: 5rem;
	display: inline-block;
	margin-right: 0.6rem;
}

.kmi-loadout-channel {
	border-left: 3px solid var(--kmi-gold);
	padding-left: 0.85rem;
	margin-bottom: 0.9rem;
}

.kmi-loadout-channel__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.kmi-loadout-channel__head .usa-label { margin: 0; }

.kmi-findings {
	margin: 1rem 0 1.5rem;
}

.kmi-findings .usa-heading {
	margin-bottom: 0.5rem;
}

.kmi-finding {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	margin: 0 0 0.3rem;
	font-size: 0.85rem;
	line-height: 1.4;
	padding-left: 0.6rem;
	border-left: 4px solid #dcdee0;
}

.kmi-finding__tag {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	min-width: 3.1rem;
	flex: none;
}

.kmi-finding--error {
	border-left-color: #b50909;
	color: #7f1d1d;
}

.kmi-finding--error .kmi-finding__tag {
	color: #b50909;
}

.kmi-finding--warning {
	border-left-color: #b3922c;
	color: #5b4708;
}

.kmi-finding--warning .kmi-finding__tag {
	color: #8a6d00;
}

.kmi-finding--info {
	border-left-color: #9dc0e8;
	color: #3d4551;
}

.kmi-finding--info .kmi-finding__tag {
	color: #1a4480;
}

/* The console runs the full desktop width; running text stops at a readable
   measure (tables, grids and forms keep the whole width). */
.usa-prose > p,
.usa-prose > ul,
.usa-prose > ol,
.kmi-fineprint {
	max-width: 72ch;
}

/* USWDS caps forms at 20rem/30rem. Operation designations and radio models
   are longer than that, so fields were clipping their own values; 36rem keeps
   the fields readable without stretching a single input across the console. */
.kmi-main .usa-form {
	max-width: 36rem;
}

.kmi-main .usa-form--large {
	max-width: 44rem;
}

.kmi-login-card {
	max-width: 30rem;
	margin: 0 auto;
	border: 1px solid #dcdee0;
	padding: 2.5rem;
	background: #fff;
	box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
}

.kmi-login-card form .usa-form-group {
	margin-bottom: 2rem;
}

.kmi-login-card .usa-input {
	margin-top: 0.5rem;
}

.kmi-login-card .usa-button {
	margin-top: 1.5rem;
	width: 100%;
}

.kmi-login-demo {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid #dcdee0;
	font-size: 0.85rem;
	color: #5b616b;
}

.kmi-login-demo p {
	margin: 0.25rem 0;
}

.kmi-login-demo ul {
	margin: 0.5rem 0;
	padding-left: 1.5rem;
}

.kmi-login-demo li {
	margin-bottom: 0.25rem;
}

.usa-footer { margin-top: auto; }

/* ============================================================
   Data tables: toolbar (search/filter), overflow-safe wrapper,
   pagination, compact handle panels
   ============================================================ */
.kmi-table-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 1rem 0;
}

/* Filter form that sits directly above a table (audit log). */
.kmi-filter-form {
	margin-bottom: 1rem;
}

.kmi-table-toolbar__search {
	flex: 1 1 16rem;
	max-width: 26rem;
}

.kmi-table-toolbar__search .usa-input {
	margin: 0;
}

/* USWDS styles every [type=search] as a .usa-search box (2rem, no vertical
   padding), so a search field renders shorter than the selects beside it. */
.usa-input[type='search'] {
	height: 2.5rem;
	padding: 0.5rem;
}

.kmi-table-toolbar .usa-select {
	margin: 0;
	width: auto;
	min-width: 10rem;
}

.kmi-table-count {
	font-size: 0.8rem;
	color: #5b616b;
	margin-left: auto;
	white-space: nowrap;
}

.usa-table-wrap {
	overflow-x: auto;
	border: 1px solid #dcdee0;
	background: #fff;
	/* Slim scrollbar so a table that scrolls on narrow screens says so. */
	scrollbar-width: thin;
}

.usa-table-wrap .usa-table {
	margin: 0;
	min-width: 100%;
}

.usa-table-wrap .usa-table th,
.usa-table-wrap .usa-table td {
	white-space: nowrap;
}

/* Opt a column out of the nowrap rule when its text is long (designations,
   free-form remarks) — keeps wide tables from forcing horizontal scroll. */
.usa-table-wrap .usa-table .kmi-col-wrap {
	white-space: normal;
}

/* Fixed layout for dense reference tables: the colgroup percentages decide
   the widths, so every column stays on screen at desktop widths. Below the
   min-width the wrapper scrolls as usual. */
.usa-table-wrap .usa-table.kmi-table--fixed {
	table-layout: fixed;
	width: 100%;
	min-width: 56rem;
}

.usa-table-wrap .usa-table.kmi-table--fixed th,
.usa-table-wrap .usa-table.kmi-table--fixed td {
	white-space: normal;
}

/* Headers wrap between words only; data cells may break a long token
   (radio ids, hex digests) rather than overflow the fixed column. */
.usa-table-wrap .usa-table.kmi-table--fixed td {
	overflow-wrap: break-word;
}

.kmi-col-action {
	min-width: 6.5rem;
}

/* Key id/type and the key period read as one unit each; breaking a date across
   two lines makes the ring table hard to scan. */
.kmi-table--keys .kmi-key-cell,
.kmi-table--keys .kmi-col-date {
	white-space: nowrap;
}

/* Compact planner tables carry two or three action links; give them room so the
   links sit on one line instead of stacking. */
.usa-table--compact .kmi-col-action {
	min-width: 9rem;
}

/* Key ring table: eleven columns were unreadable at 1440 px, so the cell text
   wraps inside eight and the long target list is capped with a count. */
.usa-table-wrap .usa-table.kmi-table--keys th,
.usa-table-wrap .usa-table.kmi-table--keys td {
	white-space: normal;
	vertical-align: top;
}

.usa-table-wrap .usa-table.kmi-table--keys .kmi-table-actions {
	flex-wrap: wrap;
}

/* These pages toggle with native <details>/<summary> (no USWDS accordion JS),
   so the plus/minus icon has to follow the element's own open state instead of
   an aria-expanded attribute the JS would otherwise write.
   `box-sizing` needs restating too: a slotted <summary> inherits it from
   Chromium's UA shadow wrapper rather than from our <details>, which otherwise
   makes USWDS's `width: 100%` + 3.5rem right padding overflow the container. */
summary.usa-accordion__button {
	box-sizing: border-box;
}

/* Same shadow-wrapper inheritance problem for every other slotted child: a
   panel inside <details> computes content-box, so `width:100%` fields inside
   it overflow their container by the padding + border (18px at 0.5rem). */
details > *:not(summary) {
	box-sizing: border-box;
}

summary.usa-accordion__button,
summary.usa-accordion__button:hover {
	background-image: url(/uswds/img/usa-icons/add.svg), linear-gradient(transparent, transparent);
}

details[open] > summary.usa-accordion__button,
details[open] > summary.usa-accordion__button:hover {
	background-image: url(/uswds/img/usa-icons/remove.svg), linear-gradient(transparent, transparent);
}

summary.usa-accordion__button::before {
	background-image: url(/uswds/img/usa-icons/add.svg);
}

details[open] > summary.usa-accordion__button::before {
	background-image: url(/uswds/img/usa-icons/remove.svg);
}

/* Compact accordion toggle used inside table action cells — a smaller icon and
   tighter padding so "Handle" / "Edit / delete" toggles don't force tables
   wide, while the toggle still reads as a control. */
.usa-accordion__button--small {
	font-size: 0.78rem;
	padding: 0.4rem 1.9rem 0.4rem 0.5rem;
	background-position: right 0.4rem center;
	background-size: 1rem;
	white-space: nowrap;
}

.usa-accordion__button--small::before {
	right: 0.4rem;
	width: 1rem;
	height: 1rem;
	background-size: 1rem 1rem;
}

.kmi-handle-panel {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.5rem;
	background: #fafbfc;
	border: 1px solid #e1e4e7;
}

.kmi-handle-panel form {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.kmi-handle-panel .usa-input {
	margin: 0;
	height: 2rem;
	font-size: 0.8rem;
}

.kmi-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1rem;
	flex-wrap: wrap;
}

.kmi-pagination__info {
	font-size: 0.85rem;
	color: #3d4551;
}

/* ============================================================
   COMSEC request (orders)
   ============================================================ */
.kmi-order-form-sheet {
	border: 1px solid #dcdee0;
	border-top: 4px solid var(--kmi-navy);
	background: #fff;
	padding: 1.5rem;
	/* Match the card to the form inside it (36rem form + 2 x 1.5rem padding),
	   otherwise the sheet carries a dead column of white space. */
	max-width: calc(36rem + 3rem);
	margin-top: 1rem;
}

.kmi-order-form-sheet .usa-form-group { margin-bottom: 1.25rem; }

/* ============================================================
   ORBAT — NATO-style block diagram (military unit boxes)
   ============================================================ */
.kmi-page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.kmi-page-head__actions {
	display: flex;
	gap: 0.5rem;
	padding-top: 0.75rem;
}

.orbat-canvas {
	position: relative;
	border: 1px solid #dcdee0;
	background-color: #fff;
	background-image: radial-gradient(circle, #d9dee3 1px, transparent 1px);
	background-size: 22px 22px;
	height: min(80vh, 54rem);
	min-height: 34rem;
	overflow: hidden;
	margin-top: 0.75rem;
	touch-action: none;
	cursor: grab;
	user-select: none;
}

.orbat-canvas:active {
	cursor: grabbing;
}

.orbat-canvas__content {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	will-change: transform;
}

.orbat-canvas__content--dragging .orbat-node {
	transition: none;
}

.orbat-canvas__edges {
	position: absolute;
	top: 0;
	left: 0;
	overflow: visible;
	pointer-events: none;
}

.orbat-edge {
	fill: none;
	stroke: #0b1f3a;
	stroke-width: 2;
}

.orbat-canvas__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #5b616b;
	margin: 1rem 0 0.25rem;
}

.orbat-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.orbat-legend-swatch {
	display: inline-block;
	width: 0.9rem;
	height: 0.55rem;
	border: 1px solid #000;
}

/* the unit node — military block, positioned by the JS layout */
.orbat-node {
	position: absolute;
	top: 0;
	left: 0;
	width: 13.5rem;
	height: 8.5rem;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: #fff;
	border: 2px solid #0b1f3a;
	padding: 0.55rem 0.8rem 0.5rem;
	box-shadow: 0 1px 3px rgb(0 0 0 / 14%);
	cursor: grab;
	touch-action: none;
	transition: transform 240ms ease;
}

.orbat-node:active {
	cursor: grabbing;
}

.orbat-node--no-drag,
.orbat-node--no-drag:active {
	cursor: default;
}

.orbat-node--selected {
	box-shadow: 0 0 0 2px var(--kmi-blue), 0 2px 6px rgb(0 0 0 / 18%);
}

.orbat-node--dragging {
	opacity: 0.45;
}

.orbat-node--drop-inside {
	outline: 3px dashed #005ea2;
	outline-offset: 3px;
	background: #f0f7fc;
}

.orbat-node--drop-before {
	box-shadow: -5px 0 0 0 #005ea2, 0 1px 3px rgb(0 0 0 / 14%);
}

.orbat-node--drop-after {
	box-shadow: 5px 0 0 0 #005ea2, 0 1px 3px rgb(0 0 0 / 14%);
}

.orbat-node__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	flex: 1;
	min-height: 0;
}

.orbat-node__type {
	font-size: 0.66rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #5b616b;
}

.orbat-node__name {
	font-weight: 700;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 1rem;
	line-height: 1.2;
	color: #0b1f3a;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.orbat-node__radios {
	display: inline-flex;
	gap: 0.35rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0.25rem;
}

/* echelon accent is applied inline from the echelons registry (border-top) */

/* Cards are a fixed 216x136px in layout space, so the contents have to fit.
   Buttons stay compact (the canvas zoom scales them anyway) and the card
   clips rather than letting a long name push the action row out of the box. */
.orbat-node {
	overflow: hidden;
}

.orbat-node__actions {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 0.15rem 0.4rem;
	margin-top: auto;
	padding-top: 0.3rem;
	border-top: 1px dashed #d5d9dc;
	width: 100%;
}

.orbat-node__actions .kmi-btn-sm {
	min-width: 1.5rem;
	min-height: 1.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* One line of radio chips only; the component caps the list at two + a count. */
.orbat-node__radios {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.25rem;
	justify-content: center;
	margin-top: 0.2rem;
	max-width: 100%;
	overflow: hidden;
}

/* custom-echelon accent color picker */
.orbat-echelon-color {
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid #fff;
	border-radius: 4px;
	box-shadow: 0 0 0 1px #c9ced2;
	cursor: pointer;
	padding: 0;
}

.orbat-echelon-color--selected {
	box-shadow: 0 0 0 2px var(--kmi-blue);
}

/* drag ghost — mini node following the cursor */
.orbat-ghost {
	position: absolute;
	top: 0;
	left: 0;
	width: 13.5rem;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 0.5rem 0.6rem;
	background: #f0f7fc;
	border: 2px dashed #005ea2;
	color: #0b1f3a;
	box-shadow: 0 4px 10px rgb(0 0 0 / 20%);
	pointer-events: none;
	z-index: 20;
	opacity: 0.92;
}

.orbat-toolbar {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	display: flex;
	align-items: center;
	gap: 0.15rem;
	background: #fff;
	border: 1px solid #dcdee0;
	border-radius: 3px;
	padding: 0.15rem 0.4rem;
	z-index: 5;
	box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
}

.orbat-toolbar__zoom {
	font-size: 0.72rem;
	color: #3d4551;
	min-width: 2.6rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* The zoom controls are unstyled buttons, which otherwise render as bare blue
   text next to the zoom readout. */
.orbat-toolbar .usa-button--unstyled {
	min-width: 1.5rem;
	padding: 0.1rem 0.35rem;
	border: 1px solid #c9ced2;
	border-radius: 2px;
	line-height: 1.3;
	text-decoration: none;
}

.orbat-toolbar .usa-button--unstyled:hover {
	background: #f0f7fc;
	border-color: var(--kmi-blue);
}

.orbat-drop-hint {
	position: absolute;
	bottom: 2.4rem;
	left: 50%;
	transform: translateX(-50%);
	background: #0b1f3a;
	color: #fff;
	font-size: 0.8rem;
	padding: 0.35rem 0.9rem;
	border-radius: 3px;
	box-shadow: 0 2px 6px rgb(0 0 0 / 30%);
	z-index: 6;
	white-space: nowrap;
	pointer-events: none;
}

.orbat-hint {
	position: absolute;
	bottom: 0.5rem;
	left: 0.75rem;
	font-size: 0.7rem;
	color: #5b616b;
	z-index: 5;
	pointer-events: none;
}

/* side drawer for element editing */
.orbat-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgb(11 31 58 / 35%);
	z-index: 40;
}

.orbat-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(26rem, 92vw);
	background: #fff;
	border-left: 1px solid #dcdee0;
	box-shadow: -4px 0 16px rgb(0 0 0 / 18%);
	z-index: 41;
	display: flex;
	flex-direction: column;
	animation: orbat-drawer-in 160ms ease-out;
}

@keyframes orbat-drawer-in {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

.orbat-drawer__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 1.1rem 0.85rem;
	border-bottom: 1px solid #dcdee0;
	background: #fafbfc;
}

.orbat-drawer__title {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 1.15rem;
	margin: 0.1rem 0 0;
	color: #0b1f3a;
}

.orbat-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: 1rem 1.1rem 1.5rem;
}

.orbat-drawer__section {
	margin-bottom: 1.1rem;
}

.orbat-drawer__section .usa-heading {
	font-size: 0.95rem;
	margin: 0 0 0.5rem;
}

.orbat-radios { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }
.orbat-radio-chip {
  font-size: 0.66rem;
  font-family: 'Courier New', monospace;
  background: #eef4fb;
  border: 1px solid #9dc0e8;
  color: #1a4480;
  border-radius: 4px;
  padding: 0.1rem 0.32rem;
  white-space: nowrap;
}

/* The "+N" overflow chip keeps the same box but reads as a counter. */
.orbat-radio-chip--more {
  font-weight: 700;
  background: #e6ebf1;
  border-color: #c3ccd6;
  color: #3d4551;
}

.kmi-btn-sm { font-size: 0.78rem !important; }
.kmi-btn-danger { color: #b50909 !important; }

.kmi-table-tight th { font-size: 0.7rem; padding: 0.25rem 0.4rem; }
.kmi-table-tight td { font-size: 0.75rem; padding: 0.25rem 0.4rem; }
.kmi-input-sm { height: 1.9rem; font-size: 0.8rem; padding: 0 0.4rem; max-width: 8rem; }
.kmi-nowrap { white-space: nowrap; }

.orbat-radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.15rem 1rem;
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.4rem;
  border: 1px solid #e1e4e7;
  background: #fff;
  scrollbar-width: thin;
}

.kmi-inline-panel {
  border: 1px solid #dcdee0;
  padding: 1rem;
  margin-top: 0.5rem;
  background: #fafbfc;
}

/* The "Add top-level element" form sits in the wide page column — don't let
   USWDS `.usa-form` (20rem) or `.usa-form--large` (30rem) squash it. */
.kmi-root-form {
  max-width: none;
}

/* Compact editor for the net row: label/control pairs flow into as many
   columns as fit instead of stacking one per line inside a table cell. */
.kmi-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0.45rem 0.75rem;
	align-items: end;
	width: min(30rem, 78vw);
	max-width: none;
	padding: 0.6rem;
	background: #fafbfc;
	border: 1px solid #e1e4e7;
}

.kmi-form-grid .usa-label,
.kmi-form-grid .usa-input,
.kmi-form-grid .usa-select {
	margin-top: 0;
}

.kmi-form-grid fieldset,
.kmi-form-grid .kmi-form-grid__wide {
	grid-column: 1 / -1;
	margin: 0;
}

/* The net editor pairs a padded .kmi-form-grid with a bare delete form; give
   the button the same inset as the fields above it. */
details > .kmi-form-grid + form {
	padding: 0 0.6rem 0.6rem;
}

/* Long checkbox lists (radios on a net) get a capped, scrollable grid so an
   inline editor cannot stretch a table row to a page height. */
.kmi-checkbox-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 0.1rem 0.75rem;
	max-height: 11rem;
	overflow-y: auto;
	padding: 0.35rem 0.4rem;
	border: 1px solid #e1e4e7;
	background: #fff;
	scrollbar-width: thin;
}

/* Print: the diagram laid out at natural size, no chrome */
@media print {
	.kmi-sealbar, .usa-header, .kmi-active-bar, .usa-footer, .usa-banner,
	.kmi-page-head__actions, .orbat-canvas__legend, .orbat-toolbar, .orbat-hint,
	.orbat-drop-hint, .orbat-drawer, .orbat-drawer-backdrop, .kmi-stats-grid,
	.usa-alert { display: none !important; }
	.orbat-canvas {
		position: static;
		height: auto;
		min-height: 0;
		overflow: visible;
		border: none;
		margin: 0;
		background: #fff;
	}
	.orbat-canvas__content {
		position: relative;
		transform: none !important;
		width: auto !important;
		height: auto !important;
	}
	.orbat-canvas__edges {
		position: absolute;
	}
	.orbat-node {
		transition: none;
		break-inside: avoid;
	}
	.orbat-node--drop-inside, .orbat-node--drop-before, .orbat-node--drop-after,
	.orbat-node--dragging, .orbat-node--selected { outline: none; box-shadow: 0 1px 3px rgb(0 0 0 / 14%); opacity: 1; }
	.kmi-page-head h1 { font-size: 1.2rem; }
}

/* ============================================================
   Comm planner
   ============================================================ */
.commplan-net {
  border: 1px solid #dcdee0;
  border-left: 4px solid #005ea2;
  background: #fff;
  padding: 0.9rem 1rem;
  /* Top margin too, so the first card is not flush against the warning
     alerts above it (adjacent siblings collapse to 1.25rem). */
  margin: 1.25rem 0;
}
.commplan-net__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.35rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.15rem;
}
.commplan-net__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: 0.8rem;
  color: #3d4551;
  margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Planner surfaces (nets, hop sets, radio profiles, key manager).
   The planner is a working console: dense tables, but every verdict the mod's
   data produces (a radio that cannot carry an algorithm, a hop set with no
   index, a key whose target has no fill port) has to be legible at a glance,
   so the marker colours are the same red/gold/green used for key status.
   --------------------------------------------------------------------------- */

/* Inline pair of inputs in one labelled field (CTCSS TX/RX, seed + button). */
.kmi-inline-fields {
	display: flex;
	gap: 0.4rem;
	align-items: flex-start;
}

.kmi-inline-fields > .usa-input {
	min-width: 0;
}

/* Planner forms hold grids of cards (radio compatibility, register cards, hop
   list), so they take the whole column instead of the 36rem form measure. */
.kmi-main .usa-form.kmi-wide-form {
	max-width: none;
	width: 100%;
}

/* --- net form ------------------------------------------------------------ */

.kmi-radio-picker {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	/* Cards size to their own text: one long "why it does not fit" message used to
	   stretch every card in its row. */
	align-items: start;
	gap: 0.5rem;
	margin: 0.5rem 0 1rem;
}

.kmi-radio-card {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	padding: 0.5rem 0.6rem;
	border: 1px solid #dcdee0;
	border-left: 4px solid #dcdee0;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
}

.kmi-radio-card:hover {
	background: #f7f8fa;
}

.kmi-radio-card:focus-within {
	outline: 2px solid var(--kmi-blue);
	outline-offset: 1px;
}

/* Selected and something on this net does not fit: the card is outlined, the
   reason is spelled out under the chips. */
.kmi-radio-card--bad {
	border-left-color: #b50909;
	background: #fdf6f6;
}

/* No fill port: the mod's device skips it entirely, so it stays quiet. */
.kmi-radio-card--off {
	opacity: 0.7;
}

.kmi-radio-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.kmi-radio-card .usa-checkbox__input {
	margin-top: 0.15rem;
	flex: none;
}

.kmi-radio-card__name {
	font-weight: 600;
	font-size: 0.85rem;
	line-height: 1.3;
}

.kmi-radio-card__types {
	display: block;
	font-weight: 400;
	font-size: 0.7rem;
	color: #5b616b;
	font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
}

.kmi-radio-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.kmi-radio-card__why {
	font-size: 0.75rem;
	line-height: 1.35;
	color: #7f1d1d;
}

.kmi-chip--good {
	border-color: #97d4b5;
	background: #eaf6f0;
	color: #1a6e2e;
}

.kmi-chip--bad {
	border-color: #e5a3a0;
	background: #fbeeed;
	color: #b50909;
}

.kmi-chip--neutral {
	border-color: #dcdee0;
	background: #f7f8fa;
	color: #3d4551;
}

.kmi-net-verdict {
	margin: 0.75rem 0 1rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid #dcdee0;
	border-radius: 4px;
	background: #fbfbfc;
}

.kmi-net-verdict .kmi-finding:last-child {
	margin-bottom: 0;
}

.kmi-field-problem {
	margin: 0.15rem 0 0.5rem;
	font-size: 0.8rem;
	line-height: 1.4;
	color: #b50909;
	max-width: 82ch;
}

.kmi-field-ok {
	margin: 0.15rem 0 0.5rem;
	font-size: 0.8rem;
	color: #1a6e2e;
}

/* Plan-check cell: the chip is the summary, the list opens in place. */
.kmi-check-details > summary {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
}

.kmi-check-details > summary::-webkit-details-marker {
	display: none;
}

.kmi-problem-list {
	margin: 0.4rem 0 0;
	padding-left: 1.1rem;
	max-width: 60ch;
}

.kmi-problem {
	font-size: 0.78rem;
	line-height: 1.4;
	margin-bottom: 0.2rem;
}

.kmi-problem--error {
	color: #7f1d1d;
}

.kmi-problem--warn {
	color: #5b4708;
}

/* Both tables carry long fineprint (radio lists, hop ranges, rate families):
   wrap the cells so no column is pushed off the wrapper's right edge. */
.usa-table-wrap .usa-table.kmi-table--nets th,
.usa-table-wrap .usa-table.kmi-table--nets td,
.usa-table-wrap .usa-table.kmi-table--hopsets th,
.usa-table-wrap .usa-table.kmi-table--hopsets td {
	white-space: normal;
	vertical-align: top;
}

.kmi-table--nets .kmi-col-action,
.kmi-table--hopsets .kmi-col-action {
	min-width: 9rem;
}

/* The operation the key manager is acting on. */
.usa-table .usa-current-row {
	background: #f0f7fc;
	box-shadow: inset 4px 0 0 var(--kmi-blue);
}

/* --- hop sets ------------------------------------------------------------ */

.kmi-hop-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	max-height: 11rem;
	overflow-y: auto;
	padding: 0.5rem;
	margin: 0.5rem 0;
	border: 1px solid #dcdee0;
	border-radius: 4px;
	background: #fbfbfc;
}

.kmi-hop {
	display: inline-flex;
	align-items: center;
	gap: 0.1rem;
}

.kmi-hop .usa-input {
	width: 5.4rem;
	padding: 0.25rem 0.4rem;
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
}

.kmi-hop .kmi-btn-danger {
	padding: 0 0.25rem;
	font-size: 0.95rem;
	line-height: 1;
}

/* --- radio profile editor ------------------------------------------------ */

.kmi-register-group {
	margin: 0.5rem 0 1.25rem;
}

.kmi-register-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0.6rem;
	align-items: start;
}

.kmi-register-card {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.5rem 0.6rem 0.55rem;
	border: 1px solid #dcdee0;
	border-left: 4px solid #dcdee0;
	border-radius: 4px;
	background: #fff;
}

/* The value differs from the mod's declared default. */
.kmi-register-card--changed {
	border-left-color: var(--kmi-gold);
	background: #fffdf6;
}

.kmi-register-card__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.4rem;
}

.kmi-register-card__label {
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.3;
}

.kmi-register-card__reset {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--kmi-blue);
	flex: none;
}

.kmi-register-card__check {
	margin: 0;
}

.kmi-register-card .usa-checkbox__label,
.kmi-register-card__check .usa-checkbox__label {
	font-size: 0.8rem;
	margin-top: 0;
	padding-left: 1.7rem;
	text-indent: -1.7rem;
}

.kmi-register-card__desc {
	font-size: 0.7rem;
	line-height: 1.35;
	color: #5b616b;
}

.kmi-register-card .usa-select,
.kmi-register-card .usa-input {
	margin-top: 0;
}

/* --- radio loadouts: coverage, radios by net, one-radio editor ----------- */

.kmi-loadout-coverage {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	flex-wrap: wrap;
	padding: 0.85rem 1rem;
	margin: 0.75rem 0 1.5rem;
	border: 1px solid #dcdee0;
	border-left: 4px solid var(--kmi-blue);
	border-radius: 4px;
	background: #f8f9fa;
}

.kmi-loadout-coverage__count {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	max-width: 46rem;
}

.kmi-loadout-coverage__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.kmi-loadout-coverage__actions form { margin: 0; }

.kmi-loadout-net {
	margin: 0 0 1.75rem;
}

.kmi-loadout-net__title {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 0.35rem;
}

.kmi-loadout-net__meta {
	font-size: 0.8rem;
	font-weight: 400;
	color: #5b616b;
}

.kmi-loadout-net__bulk { margin: 0 0 0 auto; }

.kmi-loadout-table td { vertical-align: top; }

.kmi-loadout-row--editing { background: #fffdf6 !important; box-shadow: inset 3px 0 0 var(--kmi-gold); }

/* Radios the plan does not field sit under their own rule, so the manifest reads
   as two groups without a second table. */
.kmi-loadout-split td {
	padding-top: 0.9rem;
	border-bottom: 2px solid #dcdee0;
}

.kmi-loadout-table .kmi-col-action,
.kmi-loadout-table .kmi-table-actions { white-space: nowrap; flex-wrap: nowrap; }

.kmi-facts {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.kmi-facts .kmi-chip { margin: 0; }

.kmi-loadout-other { margin-bottom: 1.5rem; }
.kmi-loadout-other > summary { cursor: pointer; font-weight: 600; }

.kmi-loadout-editor {
	margin: 0.5rem 0 0;
	padding: 1rem 1.15rem 1.25rem;
	border: 1px solid #dcdee0;
	border-left: 4px solid var(--kmi-gold);
	border-radius: 4px;
	background: #fffdf6;
}

.kmi-loadout-editor__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-bottom: 0.75rem;
	margin-bottom: 0.75rem;
	border-bottom: 1px solid #dcdee0;
}

.kmi-loadout-editor__title {
	margin: 0 0 0.35rem;
	font-size: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.kmi-loadout-editor__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.kmi-loadout-editor__viewbar {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 0.75rem;
}

.kmi-loadout-editor__foot {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 1rem;
	padding-top: 0.85rem;
	border-top: 1px solid #dcdee0;
}

.kmi-reg-row {
	display: grid;
	grid-template-columns: minmax(11rem, 15rem) minmax(9rem, 16rem) 1fr;
	gap: 0.35rem 0.75rem;
	align-items: center;
	padding: 0.4rem 0.55rem;
	border-left: 3px solid #dcdee0;
	border-radius: 3px;
}

.kmi-reg-row + .kmi-reg-row { margin-top: 0.15rem; }

.kmi-reg-row--changed {
	border-left-color: var(--kmi-gold);
	background: #fff8e6;
}

.kmi-reg-row__label {
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.kmi-reg-row__unit {
	font-weight: 400;
	font-size: 0.75rem;
	color: #5b616b;
	margin-left: 0.3rem;
}

.kmi-reg-row__control .usa-input,
.kmi-reg-row__control .usa-select { margin: 0; }

.kmi-reg-row__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.kmi-reg-row__meta .kmi-fineprint {
	display: inline;
	margin: 0;
}

.kmi-reg-row__desc {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.4;
	color: #5b616b;
}

.kmi-reg-check { margin: 0; }
.kmi-reg-check .usa-checkbox__label { margin-top: 0; }

.kmi-channel-table th,
.kmi-channel-table td { vertical-align: middle; }

.kmi-channel-table .usa-input,
.kmi-channel-table .usa-select { margin: 0; min-width: 6rem; }

.kmi-channel-table__num { width: 5.5rem; }

.kmi-btn-small {
	font-size: 0.8rem;
	padding: 0;
	margin: 0;
	text-decoration: underline;
}

.kmi-inline-form {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: wrap;
	margin: 0;
}

.kmi-inline-form .usa-select {
	margin: 0;
	width: auto;
	min-width: 10rem;
	max-width: 14rem;
}

.kmi-lib-save {
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #dcdee0;
}

.kmi-lib-save .usa-label { margin-top: 0; }
.kmi-lib-save__button {
	margin-top: 0;
	white-space: nowrap;
}

/* The button cell bottom-aligns with the field it sits beside, so the action
   lines up with the inputs rather than with their labels. */
.kmi-lib-save__row { align-items: flex-end; }

/* An empty state gets a frame, so it reads as "nothing here" rather than as a
   stray line of text (API credentials, downloads, key tables). */
.kmi-empty {
	padding: 1rem 1.15rem;
	border: 1px dashed #b9bec5;
	border-radius: 4px;
	background: #fbfbfb;
}

.kmi-empty p { margin: 0 0 0.25rem; }
.kmi-empty p:last-child { margin-bottom: 0; }

/* The audit filter: fields above, what to do with them below, so Filter and the
   export link stop reading as two more inputs. */
.kmi-filter-form__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
	padding-top: 0.85rem;
	border-top: 1px solid #dcdee0;
}

/* Unit strength: the two whole-unit figures sit apart from the per-echelon
   breakdown they summarise. */
.kmi-stat--total {
	border-left: 4px solid var(--kmi-blue);
	background: #f8f9fa;
}

/* A published operation is a different kind of page: say so once, above the tabs,
   so a missing editor reads as a state and not as a bug. */
.kmi-published-note { margin: 1rem 0 1.25rem; }

/* --- panel furniture ----------------------------------------------------- */

/* USWDS insets accordion bodies with `.usa-accordion__content`, which none of
   these panels use, so every expanded body sat flush against the summary's
   padding while the header was inset. One rule insets them all. */
.usa-accordion > :not(summary) {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.usa-accordion > :last-child { padding-bottom: 1.1rem; }

/* Destructive actions: red outline rather than a filled red block. They matter,
   but they are never the primary action of the panel they sit in. */
.usa-button--outline.usa-button--secondary {
	background: transparent;
	box-shadow: inset 0 0 0 2px #b50909;
	color: #b50909;
}

.usa-button--outline.usa-button--secondary:hover {
	background: #fcf0f0;
	color: #8b0000;
}

/* A net's editor is a panel of its own, not a cell in the table. */
.kmi-hopset-editor,
.kmi-net-editor {
	margin: 1.25rem 0 1.5rem;
	padding: 1rem 1.15rem 1.25rem;
	border: 1px solid #dcdee0;
	border-left: 4px solid var(--kmi-gold);
	border-radius: 4px;
	background: #fffdf6;
}

.kmi-net-editor__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

.kmi-net-editor__head h3 { margin: 0; }

/* --- presets ------------------------------------------------------------- */

/* Saving the open preset into the library: two fields and the action, on their
   own line so the editor's save path is separate from the library's. */
.kmi-preset-save {
	margin-top: 1.25rem;
	padding-top: 0.85rem;
	border-top: 1px solid #dcdee0;
}

.kmi-preset-save__row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.kmi-preset-save__row .usa-input {
	margin: 0;
	width: auto;
	flex: 1 1 16rem;
}

.kmi-preset-save__row .usa-button { flex: none; white-space: nowrap; }

/* "Use a saved preset…" under the preset a radio already has. */
.kmi-preset-pick { margin-top: 0.4rem; }
.kmi-preset-pick .usa-select { min-width: 15rem; max-width: 22rem; }

/* The Duplicate action opens in place rather than in a dialog. */
.kmi-preset-copy > summary {
	cursor: pointer;
	font-size: 0.8rem;
	text-decoration: underline;
	color: var(--kmi-blue);
}

.kmi-preset-copy[open] > summary { margin-bottom: 0.35rem; }
.kmi-preset-copy .usa-input { margin: 0; width: auto; min-width: 11rem; }

/* --- preset builder ------------------------------------------------------ */

.kmi-preset-list__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem 1.25rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

.kmi-preset-list__head h3 { margin: 0; }

.kmi-preset-list__tools {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.kmi-preset-list__tools .usa-input,
.kmi-preset-list__tools .usa-select {
	margin: 0;
	width: auto;
}

.kmi-preset-list__tools input[type='search'] { min-width: 14rem; }
.kmi-preset-list__tools .usa-select { min-width: 13rem; max-width: 18rem; }

.kmi-preset-bulk {
	margin: 0 0 0.75rem;
	justify-content: flex-start;
}

.kmi-preset-builder { margin-bottom: 1.75rem; }

/* --- accounts, roles and the user's own security page -------------------- */

.kmi-role-form { margin: 0; }
.kmi-role-form__roles { display: flex; flex-direction: column; gap: 0.1rem; }
.kmi-role-form__role { margin: 0; }
.kmi-role-form__role .usa-checkbox__label { font-size: 0.8rem; margin-top: 0; }

.kmi-permission-editor {
	padding: 0.75rem 0.9rem;
	border-left: 4px solid var(--kmi-gold);
	background: #fffdf6;
	border-radius: 4px;
}

.kmi-permission-editor .kmi-inline-form .usa-input { min-width: 12rem; }

.kmi-temp-password {
	font-size: 1rem;
	padding: 0.15rem 0.4rem;
	background: #f1f1f1;
	border: 1px solid #b9bec5;
	border-radius: 3px;
}

/* Role matrix: one column per capability group, with a header that toggles it. */
.kmi-cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 0.75rem 1.25rem; }
.kmi-cap-group { border: 1px solid #dcdee0; border-radius: 4px; padding: 0.6rem 0.75rem; }
.kmi-cap-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.kmi-cap-group__title { font-weight: 700; font-size: 0.9rem; }
.kmi-cap-group__item { display: block; margin: 0.15rem 0; }
.kmi-cap-group__item .usa-checkbox__label { font-size: 0.8rem; margin-top: 0; }
.kmi-cap-group__item--sensitive .usa-checkbox__label { font-weight: 600; }
.kmi-cap-group__desc { font-size: 0.72rem; color: #5b616b; margin: 0 0 0.35rem; }

/* --- key manager --------------------------------------------------------- */

.kmi-target-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 0.4rem;
	margin: 0.5rem 0 1rem;
}

.kmi-target {
	display: flex;
	gap: 0.45rem;
	align-items: flex-start;
	padding: 0.4rem 0.5rem;
	border: 1px solid #dcdee0;
	border-left: 4px solid #dcdee0;
	border-radius: 4px;
	font-size: 0.8rem;
	line-height: 1.35;
}

/* No fill port, or the radio cannot carry the selected algorithm. */
.kmi-target--bad {
	border-left-color: #b50909;
	background: #fdf6f6;
}

.kmi-target .kmi-chip {
	margin-left: 0.25rem;
}