/* Subpart B Certification form — form-specific overrides. */

/*
 * Shipper Contact / Agent Contact two-column layout. Mirrors the
 * Interruptible form's party grid. Collapses to one column on narrow
 * viewports.
 */
.nng-form.subpart-b-certification-form .party-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--nng-gap-lg);
	align-items: start;
}

.nng-form.subpart-b-certification-form .party-col {
	display: flex;
	flex-direction: column;
	gap: var(--nng-gap-sm);
	min-width: 0;
}

@media (max-width: 720px) {

	.nng-form.subpart-b-certification-form .party-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Lift the leading certification statement so it reads as a callout
 * rather than blending into the field rows.
 */
.nng-form.subpart-b-certification-form .form-body > .form-row.note-row:first-of-type,
.nng-form.subpart-b-certification-form .form-body > .nng-note:first-of-type {
	background: var(--nng-color-surface);
	border-left: 4px solid var(--nng-color-primary);
	border-radius: var(--nng-radius-sm);
	padding: var(--nng-gap);
	margin-block-end: var(--nng-gap-lg);
	color: var(--nng-color-text);
}

/*
 * Lead line inside any note: render as a bold, slightly larger heading
 * so the call-to-action stands out from the surrounding text.
 */
.nng-form.subpart-b-certification-form .nng-note__lead {
	display: inline-block;
	margin-block-end: 0.25rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--nng-color-primary);
}

/*
 * The legal certification sentence includes an inline shipper-name
 * blank. Render it like an underlined fill-in rather than the shared
 * boxed input so the sentence reads continuously.
 */
.nng-form.subpart-b-certification-form .form-inline-sentence {
	display: block;
	font-size: var(--nng-font-size);
	line-height: var(--nng-line-height);
	margin-block: 0.25rem 0.75rem;
}

.nng-form.subpart-b-certification-form .form-inline-sentence__before,
.nng-form.subpart-b-certification-form .form-inline-sentence__after {
	display: inline;
	font: inherit;
	line-height: inherit;
}

.nng-form.subpart-b-certification-form .form-inline-sentence__input {
	display: inline;
	width: 16rem;
	max-width: 100%;
	min-height: 0;
	margin: 0 0.35rem 0 0;
	padding: 0 0 0.1rem;
	font: inherit;
	line-height: inherit;
	vertical-align: baseline;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--nng-color-border-strong);
	border-radius: 0;
	box-shadow: none;
}

.nng-form.subpart-b-certification-form .form-inline-sentence__input:focus-visible {
	outline-offset: 1px;
	border-bottom-color: var(--nng-color-focus);
	box-shadow: inset 0 -1px 0 var(--nng-color-focus);
}

.nng-form.subpart-b-certification-form .form-inline-sentence__input[aria-invalid="true"] {
	border-bottom-color: var(--nng-color-error);
	background: var(--nng-color-error-bg);
}

.nng-form.subpart-b-certification-form .form-inline-sentence .required-mark {
	margin-inline-start: -0.1rem;
}

/*
 * Group the dynamic POI table inside a card so it visually separates
 * from the surrounding fields and the Insert New / Remove controls
 * read as a distinct mini-toolbar.
 */
.nng-form.subpart-b-certification-form fieldset[data-dynamic-table] {
	background: transparent;
	border: 0;
	padding: 0;
	margin-block: var(--nng-gap);
}

.nng-form.subpart-b-certification-form fieldset[data-dynamic-table] > legend {
	padding-inline: 0;
	font-weight: 600;
	color: var(--nng-color-text);
}

.nng-form.subpart-b-certification-form .dynamic-table__scroll {
	background: var(--nng-color-bg);
	border-radius: var(--nng-radius-sm);
	border: 0;
}

.nng-form.subpart-b-certification-form .dynamic-table thead th {
	background: var(--nng-color-surface-2);
}

.nng-form.subpart-b-certification-form .dynamic-table tbody tr:nth-child(even) td {
	background: var(--nng-color-surface);
}

.nng-form.subpart-b-certification-form .dynamic-table__remove {
	color: var(--nng-color-error);
	border-color: var(--nng-color-error);
	background: transparent;
}

.nng-form.subpart-b-certification-form .dynamic-table__remove:hover,
.nng-form.subpart-b-certification-form .dynamic-table__remove:focus-visible {
	background: var(--nng-color-error-bg);
}

.nng-form.subpart-b-certification-form .dynamic-table__toolbar {
	margin-block-start: var(--nng-gap);
	display: flex;
	justify-content: flex-end;
}

.nng-form.subpart-b-certification-form .dynamic-table__add {
	width: auto;
	min-width: 9rem;
	flex: 0 0 auto;
	align-self: flex-end;
	padding-inline: var(--nng-gap);
	white-space: nowrap;
}

/*
 * Footer actions: right-align the Return button and give it enough
 * vertical breathing room. Also widen its hit target on small screens.
 */
.nng-form.subpart-b-certification-form .form-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--nng-gap);
	margin-block-start: var(--nng-gap-lg);
	padding-block-start: var(--nng-gap);
	border-top: 1px solid var(--nng-color-border);
}

.nng-form.subpart-b-certification-form .form-actions .nng-btn {
	min-width: 8rem;
}

@media (max-width: 480px) {

	.nng-form.subpart-b-certification-form .form-actions {
		justify-content: stretch;
	}

	.nng-form.subpart-b-certification-form .form-actions .nng-btn {
		flex: 1;
	}
}

/*
 * Print preview: hide page chrome and the action toolbar so only the
 * filled-in certificate is sent to the printer / preview. Aggressively
 * compact the layout so the whole certificate fits on one page.
 */
@media print {

	@page {
		size: letter;
		margin: 0.4in;
	}

	html,
	body {
		background: #fff !important;
		color: #000 !important;
	}

	body * {
		visibility: hidden;
	}

	.nng-form.subpart-b-certification-form,
	.nng-form.subpart-b-certification-form * {
		visibility: visible;
	}

	.nng-form.subpart-b-certification-form {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		width: 100%;
		padding: 0;
		margin: 0;
		background: #fff;
		color: #000;
		box-shadow: none;
		border: 0;
		font-size: 9pt;
		line-height: 1.25;
	}

	/* Hide all interactive / non-essential chrome. */
	.nng-form.subpart-b-certification-form .form-actions,
	.nng-form.subpart-b-certification-form .dynamic-table__toolbar,
	.nng-form.subpart-b-certification-form .dynamic-table__remove,
	.nng-form.subpart-b-certification-form .dynamic-table__actions,
	.nng-form.subpart-b-certification-form .dynamic-table__actions-col,
	.nng-form.subpart-b-certification-form .required-mark,
	.nng-form.subpart-b-certification-form .required-note,
	.nng-form.subpart-b-certification-form .field-error,
	.nng-form.subpart-b-certification-form .helper-text {
		display: none !important;
	}

	/* Tight header. */
	.nng-form.subpart-b-certification-form .form-header,
	.nng-form.subpart-b-certification-form h1,
	.nng-form.subpart-b-certification-form h2 {
		margin: 0 0 0.25rem 0;
		padding: 0;
		font-size: 12pt;
		font-weight: 700;
	}

	.nng-form.subpart-b-certification-form .section-title,
	.nng-form.subpart-b-certification-form h3,
	.nng-form.subpart-b-certification-form h4 {
		margin: 0.4rem 0 0.15rem 0;
		padding: 0;
		font-size: 10pt;
		font-weight: 700;
		border-bottom: 1px solid #000;
	}

	/* Compact body + rows. */
	.nng-form.subpart-b-certification-form .form-body {
		padding: 0;
		gap: 0;
	}

	.nng-form.subpart-b-certification-form .form-row,
	.nng-form.subpart-b-certification-form fieldset.form-row {
		display: grid;
		grid-template-columns: 9rem 1fr;
		gap: 0.25rem 0.5rem;
		align-items: baseline;
		margin: 0 0 0.15rem 0;
		padding: 0;
		border: 0;
	}

	.nng-form.subpart-b-certification-form .form-row > label,
	.nng-form.subpart-b-certification-form .form-row > legend,
	.nng-form.subpart-b-certification-form .form-row > .form-label {
		margin: 0;
		padding: 0;
		font-size: 9pt;
		font-weight: 600;
	}

	/* Collapse split-phone groups onto a single line. */
	.nng-form.subpart-b-certification-form .split-phone {
		display: inline-flex;
		gap: 0.15rem;
	}

	/* Notes: keep but make compact. */
	.nng-form.subpart-b-certification-form .nng-note,
	.nng-form.subpart-b-certification-form .note-row {
		background: transparent !important;
		border: 0 !important;
		padding: 0 !important;
		margin: 0.2rem 0 !important;
		font-size: 8.5pt;
	}

	.nng-form.subpart-b-certification-form .nng-note__lead {
		font-size: 9.5pt;
	}

	/* Two-column shipper/agent on paper. */
	.nng-form.subpart-b-certification-form .party-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
		margin: 0;
	}

	.nng-form.subpart-b-certification-form .party-col {
		gap: 0.15rem;
	}

	/* Inputs: thin underline only, no chrome. */
	.nng-form.subpart-b-certification-form input,
	.nng-form.subpart-b-certification-form select,
	.nng-form.subpart-b-certification-form textarea {
		border: 0;
		border-bottom: 1px solid #000;
		background: transparent;
		color: #000;
		padding: 0 0.15rem;
		margin: 0;
		font-size: 9pt;
		line-height: 1.2;
		min-height: 0;
		height: auto;
		box-shadow: none;
		border-radius: 0;
	}

	.nng-form.subpart-b-certification-form textarea {
		height: 2.5rem;
		resize: none;
	}

	/* Dynamic table compact: keep headers + rows but lose padding. */
	.nng-form.subpart-b-certification-form fieldset[data-dynamic-table] {
		margin: 0.3rem 0;
		padding: 0;
		border: 0;
		background: transparent;
	}

	.nng-form.subpart-b-certification-form .dynamic-table {
		font-size: 8.5pt;
		border-collapse: collapse;
		width: 100%;
	}

	.nng-form.subpart-b-certification-form .dynamic-table th,
	.nng-form.subpart-b-certification-form .dynamic-table td {
		padding: 0.1rem 0.25rem;
		border: 1px solid #000;
		background: transparent !important;
	}

	.nng-form.subpart-b-certification-form .dynamic-table__cell input {
		border: 0;
	}

	/* Avoid awkward page breaks inside groups. */
	.nng-form.subpart-b-certification-form .form-row,
	.nng-form.subpart-b-certification-form fieldset[data-dynamic-table],
	.nng-form.subpart-b-certification-form .party-grid {
		break-inside: avoid;
		page-break-inside: avoid;
	}
}