/*!
 * GlobalBenefits Workspace - shared design
 *
 * MOBILE FIRST. Base rules target a 320px viewport with no horizontal scroll; wider layouts
 * are added only through min-width queries.
 *
 * CONFLICT SAFETY: every selector in this file is scoped under `.gbw`. The existing site
 * uses the `.gb-` prefix (.gb-priority-card, .gb-catcard, .gb-grid, .gb-nav, .gb-crumb) and
 * the tools use `#gbc-`/`#gbt-`/`#gbf-`/`#gbs-` ids. `.gbw-` collides with none of them.
 * There is no bare element selector and no !important anywhere in this file, so nothing here
 * can reach outside a Workspace container or override the theme.
 *
 * Palette is taken from the live site so the Workspace reads as part of the same product:
 *   #12395e heading   #0d3366 deep   #1e3a8a accent   #3d4b5c body
 *   #f8fbff card bg   #d9e2ec border
 */

.gbw {
	--gbw-ink: #12395e;
	--gbw-deep: #0d3366;
	--gbw-accent: #1e3a8a;
	--gbw-body: #3d4b5c;
	--gbw-card: #f8fbff;
	--gbw-line: #d9e2ec;
	--gbw-warn-bg: #fff8e6;
	--gbw-warn-line: #e6c65c;
	--gbw-danger: #8a1c1c;
	--gbw-radius: 12px;

	box-sizing: border-box;
	margin: 24px 0;
	color: var(--gbw-body);
	line-height: 1.55;
	/* Long program names and URLs must never push the 320px layout sideways. */
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.gbw *,
.gbw *::before,
.gbw *::after {
	box-sizing: inherit;
}

.gbw-frame {
	border: 1px solid var(--gbw-line);
	border-radius: var(--gbw-radius);
	background: var(--gbw-card);
	padding: 16px;
}

/* ---------- Heading ---------- */

.gbw-title {
	margin: 0 0 6px;
	color: var(--gbw-ink);
	/* Fluid, but never large enough to wrap awkwardly at 320px. */
	font-size: clamp(1.15rem, 4.5vw, 1.5rem);
	line-height: 1.25;
}

.gbw-lead {
	margin: 0 0 14px;
	font-size: 0.95rem;
}

/* ---------- Privacy notice ---------- */

.gbw-privacy {
	border: 1px solid var(--gbw-line);
	border-left: 5px solid var(--gbw-accent);
	border-radius: 8px;
	background: #ffffff;
	padding: 12px 14px;
	margin: 0 0 16px;
	font-size: 0.9rem;
}

.gbw-privacy p {
	margin: 0 0 8px;
}

.gbw-privacy p:last-child {
	margin-bottom: 0;
}

.gbw-privacy-lead {
	font-weight: 700;
	color: var(--gbw-ink);
}

/* The "we will never ask for" line is the anti-phishing line. It gets weight. */
.gbw-privacy-never {
	color: var(--gbw-danger);
	font-weight: 600;
}

/* ---------- Storage warning ---------- */

.gbw-warn {
	border: 1px solid var(--gbw-warn-line);
	border-radius: 8px;
	background: var(--gbw-warn-bg);
	padding: 12px 14px;
	margin: 0 0 16px;
	font-size: 0.9rem;
}

.gbw-warn p {
	margin: 0;
}

/* ---------- Saved-state summary ---------- */

.gbw-summary {
	margin: 0 0 16px;
}

/* Every grid and flex child in the Workspace must be allowed to shrink below its
   content width, for the reason given on .gbw-dl dd below. */
.gbw-dl,
.gbw-card,
.gbw-card-fields,
.gbw-grid,
.gbw-ap,
.gbw-ap-sec {
	min-width: 0;
}

.gbw-dl {
	display: grid;
	/* Single column at 320px so labels and values never squeeze. */
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	border-top: 1px solid var(--gbw-line);
}

.gbw-dl dt {
	padding: 8px 0 0;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--gbw-accent);
}

.gbw-dl dd {
	margin: 0;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--gbw-line);
	font-weight: 600;
	color: var(--gbw-ink);
	/*
	 * A grid child defaults to min-width:auto, so an unbreakable string - the official
	 * URL printed in the one-page summary - would set the column's minimum and push the
	 * whole card wider than a 320px screen. These two lines are what keep it in.
	 */
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* ---------- Placeholder body ---------- */

.gbw-notyet {
	border: 1px dashed var(--gbw-line);
	border-radius: 8px;
	background: #ffffff;
	padding: 12px 14px;
	margin: 0 0 16px;
}

.gbw-notyet-lead {
	margin: 0 0 8px;
	font-weight: 600;
	color: var(--gbw-ink);
}

.gbw-linklist,
.gbw-fallback-links {
	margin: 0;
	padding-left: 20px;
}

.gbw-linklist li,
.gbw-fallback-links li {
	margin: 4px 0;
}

.gbw-muted {
	color: #5b6b7c;
	font-size: 0.9rem;
	margin: 0 0 8px;
}

/* ---------- Toolbar ---------- */

.gbw-toolbar {
	display: flex;
	/* Stacked at 320px, side by side as soon as there is room. */
	flex-direction: column;
	gap: 10px;
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid var(--gbw-line);
}

.gbw-btn {
	display: block;
	width: 100%;
	/* 44px minimum touch target. */
	min-height: 44px;
	padding: 11px 16px;
	border: 1px solid var(--gbw-accent);
	border-radius: 8px;
	background: var(--gbw-accent);
	color: #ffffff;
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
}

.gbw-btn:hover {
	background: var(--gbw-deep);
	border-color: var(--gbw-deep);
}

.gbw-btn:focus-visible {
	outline: 3px solid var(--gbw-deep);
	outline-offset: 2px;
}

.gbw-btn-secondary {
	background: #ffffff;
	color: var(--gbw-accent);
}

.gbw-btn-secondary:hover {
	background: #eef3fb;
	color: var(--gbw-deep);
}

.gbw-btn-danger {
	background: #ffffff;
	border-color: var(--gbw-danger);
	color: var(--gbw-danger);
}

.gbw-btn-danger:hover {
	background: var(--gbw-danger);
	border-color: var(--gbw-danger);
	color: #ffffff;
}

.gbw-status {
	margin: 10px 0 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--gbw-ink);
}

/* The live region exists from first render so announcements are reliable, but it must not
   occupy space until it actually says something. */
.gbw-status:empty {
	display: none;
}

/* ---------- TODAY panel ---------- */

.gbw-today {
	border: 1px solid var(--gbw-line);
	border-left: 5px solid var(--gbw-deep);
	border-radius: 8px;
	background: #ffffff;
	padding: 12px 14px;
	margin: 0 0 18px;
}

.gbw-today-title {
	margin: 0 0 10px;
	color: var(--gbw-ink);
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.gbw-today-group {
	margin: 0 0 12px;
	padding-left: 10px;
	border-left: 3px solid var(--gbw-line);
}

.gbw-today-group:last-of-type {
	margin-bottom: 0;
}

/* Past due is the only thing allowed to shout. */
.gbw-today-overdue {
	border-left-color: var(--gbw-danger);
}

.gbw-today-now {
	border-left-color: #b06a00;
}

.gbw-today-soon {
	border-left-color: var(--gbw-accent);
}

.gbw-today-h {
	margin: 0 0 6px;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--gbw-body);
}

.gbw-today-overdue .gbw-today-h {
	color: var(--gbw-danger);
}

.gbw-today-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gbw-today-list li {
	/* Stacked at 320px so a long program name never truncates a date. */
	display: block;
	min-width: 0;
	padding: 6px 0;
	border-bottom: 1px solid var(--gbw-line);
}

.gbw-today-list li:last-child {
	border-bottom: 0;
}

.gbw-today-prog {
	display: block;
	font-weight: 700;
	color: var(--gbw-ink);
}

.gbw-today-what {
	display: block;
	font-size: 0.9rem;
}

.gbw-today-when {
	display: block;
	font-size: 0.85rem;
	color: #5b6b7c;
}

/* ---------- Program cards ---------- */

.gbw-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.gbw-card {
	border: 1px solid var(--gbw-line);
	border-top: 4px solid var(--gbw-accent);
	border-radius: 10px;
	background: #ffffff;
	padding: 14px;
}

/* The three entrances are colour-coded, but the text label always states the category
   too - colour is never the only carrier of meaning. */
.gbw-cat-everyday { border-top-color: #1e3a8a; }
.gbw-cat-disability { border-top-color: #0f7060; }
.gbw-cat-veterans { border-top-color: #7a4b12; }

.gbw-card-title {
	margin: 0 0 8px;
	font-size: 1.05rem;
	color: var(--gbw-ink);
	line-height: 1.3;
}

.gbw-tags {
	margin: 0 0 6px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.gbw-tag {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid var(--gbw-line);
	border-radius: 999px;
	background: var(--gbw-card);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--gbw-ink);
}

.gbw-card-note {
	margin: 0 0 10px;
	font-size: 0.85rem;
	color: #5b6b7c;
}

.gbw-card-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 0 0 10px;
}

.gbw-field {
	display: block;
}

.gbw-field-label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--gbw-accent);
}

.gbw-select,
.gbw-date {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 9px 10px;
	border: 1px solid #9fb3c8;
	border-radius: 8px;
	background: #ffffff;
	color: var(--gbw-ink);
	font: inherit;
	font-size: 1rem;
}

.gbw-select:focus-visible,
.gbw-date:focus-visible {
	outline: 3px solid var(--gbw-deep);
	outline-offset: 1px;
}

.gbw-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	/* 44px row so the whole line is a comfortable tap target. */
	min-height: 44px;
	padding: 6px 0;
	font-size: 0.95rem;
	cursor: pointer;
}

.gbw-check input {
	width: 22px;
	height: 22px;
	margin-top: 2px;
	flex: 0 0 auto;
}

.gbw-details {
	margin: 0 0 10px;
	border: 1px solid var(--gbw-line);
	border-radius: 8px;
	background: var(--gbw-card);
	padding: 8px 10px;
}

.gbw-details summary {
	min-height: 32px;
	padding: 6px 0;
	font-weight: 700;
	color: var(--gbw-accent);
	cursor: pointer;
}

.gbw-card-progress {
	margin: 0 0 10px;
	font-size: 0.85rem;
	font-weight: 700;
	color: #0f7060;
}

.gbw-card-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--gbw-line);
}

/* Official destinations are links, so they get link affordances while matching the
   button shape. */
.gbw-btn-official {
	background: var(--gbw-deep);
	border-color: var(--gbw-deep);
	color: #ffffff;
	text-decoration: none;
}

.gbw-btn-official:hover {
	background: var(--gbw-accent);
	border-color: var(--gbw-accent);
	color: #ffffff;
}

.gbw-btn-small {
	font-size: 0.9rem;
}

.gbw-add {
	border: 1px dashed var(--gbw-line);
	border-radius: 8px;
	background: #ffffff;
	padding: 12px 14px;
	margin: 18px 0 0;
}

.gbw-add h3,
.gbw-cards h3 {
	margin: 0 0 10px;
	font-size: 1rem;
	color: var(--gbw-ink);
}

.gbw-add .gbw-field {
	margin-bottom: 10px;
}

.gbw-fineprint {
	margin: 8px 0 0;
	font-size: 0.8rem;
	color: #5b6b7c;
}

/* The not-a-government-agency statement. Must be legible, not buried. */
.gbw-legal {
	margin: 18px 0 0;
	padding: 10px 12px;
	border: 1px solid var(--gbw-line);
	border-radius: 8px;
	background: var(--gbw-card);
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--gbw-body);
}

/* ---------- Application Action Pack ---------- */

.gbw-ap {
	display: block;
	margin: 0 0 16px;
}

.gbw-aps > .gbw-ap {
	border: 1px solid var(--gbw-line);
	border-top: 4px solid var(--gbw-accent);
	border-radius: 10px;
	background: #ffffff;
	padding: 14px;
}

.gbw-ap-head {
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--gbw-line);
}

.gbw-ap-title {
	margin: 0 0 8px;
	font-size: 1.05rem;
	color: var(--gbw-ink);
	line-height: 1.3;
}

.gbw-ap-sec {
	margin: 0 0 16px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--gbw-line);
}

.gbw-ap-sec:last-child {
	border-bottom: 0;
	margin-bottom: 0;
}

.gbw-ap-h {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
	margin: 0 0 6px;
	font-size: 0.95rem;
	color: var(--gbw-ink);
	line-height: 1.35;
}

/* The step number is what makes a twelve-part pack navigable on a small screen. */
.gbw-ap-num {
	flex: 0 0 auto;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--gbw-accent);
	color: #ffffff;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
}

.gbw-ap-t {
	min-width: 0;
	overflow-wrap: anywhere;
}

.gbw-ap-lead {
	margin: 0 0 8px;
	font-size: 0.92rem;
}

.gbw-ap-list {
	margin: 0 0 8px;
	padding-left: 20px;
}

.gbw-ap-list li {
	margin: 5px 0;
	font-size: 0.92rem;
}

/*
 * An outbound button plus the name of where it goes.
 *
 * Stacking these is what makes the button legible at 320px: the button carries a short
 * verb, and the line under it names the destination, so neither has to do both jobs.
 */
.gbw-toollink {
	margin: 10px 0 0;
}

.gbw-btn-tool {
	display: block;
	width: 100%;
	background: #ffffff;
	border-color: var(--gbw-accent);
	color: var(--gbw-accent);
	text-decoration: none;
}

.gbw-btn-tool:hover {
	background: #eef3fb;
	color: var(--gbw-deep);
}

.gbw-toollink .gbw-btn-official {
	display: block;
	width: 100%;
}

.gbw-toollink-dest {
	display: block;
	margin-top: 4px;
	font-size: 0.78rem;
	line-height: 1.35;
	color: #5b6b7c;
}

.gbw-ap-summary {
	border: 1px solid var(--gbw-line);
	border-left: 5px solid var(--gbw-deep);
	border-radius: 8px;
	background: var(--gbw-card);
	padding: 12px;
}

.gbw-ap-toggle > summary {
	color: var(--gbw-deep);
}

.gbw-ap-slot .gbw-ap {
	margin-top: 10px;
}

/* ---------- Server-rendered fallback (visible until JS boots) ---------- */

.gbw-fallback {
	border: 1px solid var(--gbw-line);
	border-radius: var(--gbw-radius);
	background: var(--gbw-card);
	padding: 16px;
}

.gbw-fallback-lead {
	margin: 0 0 8px;
	font-weight: 600;
	color: var(--gbw-ink);
}

/* ---------- 390px and up (iPhone 14/15 class) ---------- */

@media (min-width: 380px) {
	.gbw-frame,
	.gbw-fallback {
		padding: 20px;
	}

	.gbw-toolbar {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.gbw-btn {
		display: inline-block;
		width: auto;
		flex: 1 1 auto;
	}
}

/* ---------- 412px and up (large Android) ---------- */

@media (min-width: 412px) {
	.gbw-dl {
		grid-template-columns: minmax(9rem, 40%) 1fr;
	}

	.gbw-card-actions {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.gbw-today-list li {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: baseline;
		column-gap: 10px;
	}

	.gbw-today-when {
		text-align: right;
	}

	.gbw-dl dt {
		padding: 8px 12px 8px 0;
		border-bottom: 1px solid var(--gbw-line);
	}

	.gbw-dl dd {
		padding: 8px 0;
	}
}

/* ---------- Tablet and desktop ---------- */

@media (min-width: 768px) {
	.gbw-frame,
	.gbw-fallback {
		padding: 24px 26px;
	}

	.gbw-btn {
		flex: 0 0 auto;
	}

	.gbw-grid {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}

	.gbw-btn-tool,
	.gbw-toollink .gbw-btn-official {
		display: inline-block;
		width: auto;
	}

	.gbw-toollink-dest {
		display: inline;
		margin-left: 10px;
	}

	.gbw-card-fields {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.gbw * {
		transition: none;
	}
}

/* ---------- Workspace entry screen (four doors) ---------- */

.gbw-entry-lead {
	margin: 0 0 14px;
	font-size: 0.95rem;
}

.gbw-doors {
	display: grid;
	/* One per row at 320px. The doors are the whole screen; they get the width. */
	grid-template-columns: 1fr;
	gap: 12px;
	min-width: 0;
}

.gbw-door {
	display: block;
	min-width: 0;
	padding: 16px;
	border: 1px solid var(--gbw-line);
	border-left: 6px solid var(--gbw-accent);
	border-radius: 10px;
	background: #ffffff;
	color: var(--gbw-body);
	text-decoration: none;
}

a.gbw-door:hover {
	background: #f4f8ff;
	border-color: var(--gbw-accent);
}

a.gbw-door:focus-visible {
	outline: 3px solid var(--gbw-deep);
	outline-offset: 2px;
}

/* Category colour matches the program cards, so a door and the cards it leads to read as
   the same thing. The text label always states the category as well. */
.gbw-door.gbw-cat-everyday { border-left-color: #1e3a8a; }
.gbw-door.gbw-cat-disability { border-left-color: #0f7060; }
.gbw-door.gbw-cat-veterans { border-left-color: #7a4b12; }
.gbw-door-resume { border-left-color: var(--gbw-deep); background: var(--gbw-card); }

/* Nothing saved yet: still explain the door, but do not pretend it is clickable. */
.gbw-door-empty {
	border-left-style: dashed;
	background: #fbfcfe;
}

.gbw-door-ic {
	display: block;
	font-size: 1.5rem;
	line-height: 1;
	margin-bottom: 6px;
}

.gbw-door-t {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--gbw-ink);
	line-height: 1.3;
}

.gbw-door-b {
	display: block;
	margin-top: 6px;
	font-size: 0.9rem;
	line-height: 1.5;
}

.gbw-door-list {
	display: block;
	margin-top: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--gbw-accent);
}

@media (min-width: 700px) {
	.gbw-doors {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- Disability module: tiers ---------- */

.gbw-tier {
	min-width: 0;
	margin: 0 0 12px;
	border: 1px solid var(--gbw-line);
	border-left: 5px solid #0f7060;
	border-radius: 10px;
	background: #ffffff;
}

.gbw-tier-sum {
	display: flex;
	align-items: center;
	gap: 10px;
	/* The whole heading row is the tap target, and it clears 44px on its own. */
	min-height: 52px;
	padding: 12px 14px;
	font-weight: 700;
	color: var(--gbw-ink);
	cursor: pointer;
}

.gbw-tier-num {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: #0f7060;
	color: #ffffff;
	font-size: .8rem;
	line-height: 26px;
	text-align: center;
}

.gbw-tier-t {
	min-width: 0;
	font-size: 1.02rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.gbw-tier-body {
	padding: 0 14px 14px;
}

/* ---------- Disability module: programme rows ---------- */

.gbw-prow {
	min-width: 0;
	margin: 0 0 10px;
	padding: 12px;
	border: 1px solid var(--gbw-line);
	border-radius: 8px;
	background: var(--gbw-card);
}

.gbw-prow-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
}

.gbw-prow-t {
	font-weight: 700;
	color: var(--gbw-ink);
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.gbw-prow-note {
	margin: 0 0 8px;
	font-size: .88rem;
	color: #5b6b7c;
}

.gbw-prow-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gbw-prow-saved {
	margin: 0;
	padding: 10px 0;
	font-size: .9rem;
	font-weight: 700;
	color: #0f7060;
}

/* ---------- Disability module: comparison tables ---------- */

.gbw-cmp {
	min-width: 0;
	margin: 14px 0;
	padding: 12px;
	border: 1px solid var(--gbw-line);
	border-radius: 8px;
	background: #ffffff;
}

.gbw-cmp-h {
	margin: 0 0 6px;
	font-size: 1rem;
	color: var(--gbw-ink);
}

/*
 * A three-column table cannot be made to fit 320px without becoming unreadable, so it
 * scrolls inside its own box. The page itself never scrolls sideways.
 */
.gbw-cmp-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 8px 0;
}

.gbw-cmp-table {
	border-collapse: collapse;
	min-width: 460px;
	font-size: .88rem;
}

.gbw-cmp-table th,
.gbw-cmp-table td {
	padding: 8px 10px;
	border: 1px solid var(--gbw-line);
	text-align: left;
	vertical-align: top;
	line-height: 1.45;
}

.gbw-cmp-table thead th {
	background: var(--gbw-card);
	color: var(--gbw-ink);
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.gbw-cmp-dim {
	width: 34%;
	background: #fbfcfe;
	color: var(--gbw-accent);
	font-weight: 700;
}

.gbw-cmp-note {
	margin: 6px 0 0;
	padding: 8px 10px;
	border-left: 3px solid var(--gbw-accent);
	background: var(--gbw-card);
	font-size: .88rem;
}

/* ---------- Disability module: sources and cross-links ---------- */

.gbw-sources {
	margin: 10px 0 0;
}

.gbw-sources-h {
	margin: 0 0 4px;
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--gbw-accent);
}

.gbw-also {
	margin: 10px 0;
	padding: 10px 12px;
	border: 1px dashed var(--gbw-line);
	border-radius: 8px;
	background: #fbfcfe;
	font-size: .9rem;
}

.gbw-crosslink {
	margin: 16px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--gbw-line);
	border-left: 5px solid #7a4b12;
	border-radius: 8px;
	background: var(--gbw-card);
	font-size: .92rem;
}

@media (min-width: 412px) {
	.gbw-prow-actions {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* ---------- Veterans module ---------- */

.gbw-tier-vet { border-left-color: #7a4b12; }
.gbw-tier-vet .gbw-tier-num { background: #7a4b12; }

/*
 * The free-help notice. It is first in the DOM and it is styled to be noticed, because a
 * veteran who scrolls past it may pay for something a VSO does for nothing.
 */
.gbw-vethelp {
	min-width: 0;
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 2px solid #7a4b12;
	border-radius: 10px;
	background: #fffaf3;
}

.gbw-vethelp-h {
	margin: 0 0 4px;
	font-size: 1.05rem;
	color: #5c3708;
}

.gbw-vethelp-lead {
	margin: 0 0 8px;
	font-weight: 700;
	color: #5c3708;
}

.gbw-vethelp .gbw-linklist li {
	margin: 6px 0;
	font-size: .92rem;
}

/* ---------- Veterans: decision review routes ---------- */

.gbw-routes {
	min-width: 0;
	margin: 14px 0;
	padding: 12px;
	border: 1px solid var(--gbw-line);
	border-radius: 8px;
	background: #ffffff;
}

.gbw-routes .gbw-dl {
	margin-top: 8px;
}

/* ---------- Veterans: combined paths ---------- */

.gbw-paths {
	min-width: 0;
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 2px solid var(--gbw-line);
}

.gbw-path {
	border-left-color: var(--gbw-deep);
}

.gbw-pathgroup {
	min-width: 0;
	margin: 0 0 14px;
	padding-left: 10px;
	border-left: 3px solid var(--gbw-line);
}

/* ---------- Benefits Screener ---------- */

.gbw-scr-form {
	min-width: 0;
	margin: 0 0 18px;
	padding: 14px;
	border: 1px solid var(--gbw-line);
	border-radius: 10px;
	background: #ffffff;
}

.gbw-scr-form .gbw-field { margin-bottom: 12px; }

.gbw-scr-warn {
	margin-top: 10px;
	padding: 8px 10px;
	border-left: 3px solid var(--gbw-warn-line);
	background: var(--gbw-warn-bg);
}

.gbw-scr-res {
	min-width: 0;
	margin: 0 0 14px;
	padding: 14px;
	border: 1px solid var(--gbw-line);
	border-left: 6px solid var(--gbw-line);
	border-radius: 10px;
	background: #ffffff;
}

/* The three verdicts are distinguished by colour AND by the words in the badge, so colour
   is never the only thing carrying the result. */
.gbw-scr-strong { border-left-color: #0f7060; }
.gbw-scr-possible { border-left-color: #b06a00; }
.gbw-scr-review { border-left-color: #5b6b7c; }

.gbw-scr-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 10px;
}

.gbw-scr-prog {
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--gbw-ink);
	overflow-wrap: anywhere;
}

.gbw-scr-badge {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.gbw-scr-strong .gbw-scr-badge { color: #0f7060; }
.gbw-scr-possible .gbw-scr-badge { color: #8a5200; }
.gbw-scr-review .gbw-scr-badge { color: #47566a; }

/* ---------- Comparison module ---------- */

/*
 * Two presentations, one shown at a time. A three-column table cannot be made readable on a
 * 320px phone by styling alone, so narrow screens get collapsible per-programme cards
 * instead. display:none keeps the inactive one out of the accessibility tree too, so nothing
 * is announced twice.
 */
.gbw-cmp-table-wrap { display: none; }
.gbw-cmp-cards { display: block; }

.gbw-cmp-card {
	min-width: 0;
	margin: 0 0 10px;
	border: 1px solid var(--gbw-line);
	border-left: 5px solid var(--gbw-accent);
	border-radius: 8px;
	background: #ffffff;
}

.gbw-cmp-card > .gbw-tier-body { padding: 0 14px 12px; }

/* A row that has not been verified is marked, never quietly blank. */
.gbw-cmp-unreviewed td {
	color: #5b6b7c;
	font-style: italic;
}

.gbw-cmp-actions {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--gbw-line);
}

.gbw-cmp-act {
	min-width: 0;
	margin: 0 0 10px;
}

.gbw-cmp-fit > summary { color: var(--gbw-deep); }

.gbw-cmps > .gbw-cmp {
	margin-bottom: 22px;
	padding: 14px;
	border: 1px solid var(--gbw-line);
	border-radius: 10px;
	background: var(--gbw-card);
}

@media (min-width: 720px) {
	.gbw-cmp-table-wrap { display: block; }
	.gbw-cmp-cards { display: none; }
}

.gbw-cmp-rownotes {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-left: 3px solid var(--gbw-accent);
	background: #ffffff;
	font-size: .88rem;
}

/* ---------- Calculators ---------- */

.gbw-calc {
	min-width: 0;
	margin: 0 0 18px;
	padding: 14px;
	border: 1px solid var(--gbw-line);
	border-left: 6px solid var(--gbw-deep);
	border-radius: 10px;
	background: #ffffff;
}

.gbw-calc-steps {
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--gbw-line);
	border-radius: 8px;
	background: var(--gbw-card);
}

/* The explanation line under a step is secondary to the figure beside it. */
.gbw-calc-detail {
	font-size: .82rem;
	font-weight: 400;
	color: #5b6b7c;
}

.gbw-num {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 9px 10px;
	border: 1px solid #9fb3c8;
	border-radius: 8px;
	background: #ffffff;
	color: var(--gbw-ink);
	font: inherit;
	font-size: 1rem;
}

.gbw-num:focus-visible {
	outline: 3px solid var(--gbw-deep);
	outline-offset: 1px;
}

/* ---------- Result-screen survey (fixed choices, no free text) ---------- */

.gbw-survey {
	min-width: 0;
	margin: 16px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--gbw-line);
	border-left: 5px solid var(--gbw-accent);
	border-radius: 8px;
	background: #ffffff;
}

.gbw-survey-q {
	margin: 0 0 12px;
}

.gbw-survey-q:last-of-type {
	margin-bottom: 0;
}

.gbw-survey-label {
	margin: 0 0 8px;
	font-weight: 700;
	color: var(--gbw-ink);
	font-size: .95rem;
}

.gbw-survey-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gbw-survey-ack {
	margin: 8px 0 0;
	font-size: .85rem;
	font-weight: 600;
	color: #0f7060;
}

/* ---------------- Deadlines & Reminders (Phase 3) ---------------- */

.gbw-rem-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin: 0 0 16px;
}

.gbw-rem-bar .gbw-field {
	margin: 0;
	min-width: 180px;
}

.gbw-rem-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gbw-rem-item .gbw-today-when {
	margin: 8px 0 12px;
	font-size: .92rem;
}

.gbw-rem-done {
	opacity: .62;
}

.gbw-rem-done .gbw-card-title {
	text-decoration: line-through;
}

@media (max-width: 480px) {
	.gbw-rem-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.gbw-rem-bar .gbw-field {
		min-width: 0;
	}
}

/* ------------------------------------------------------------------ */
/* My Benefits Journey (Phase 1)                                       */
/* Reuses the palette already used by this stylesheet. No new colours.  */
/* ------------------------------------------------------------------ */

.gbw-j-picker,
.gbw-j-card {
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px;
	margin: 0 0 14px;
	background: #ffffff;
}

.gbw-j-card {
	border-top: 4px solid #1e3a8a;
}

/* An overdue planning reminder is the one thing on this screen that must catch the eye. */
.gbw-j-card.is-overdue {
	border-top-color: #b42318;
}

.gbw-j-card-head {
	margin: 0 0 12px;
}

.gbw-j-card-title {
	font-size: 1.15rem;
	line-height: 1.3;
	margin: 0 0 4px;
	color: #1e293b;
}

.gbw-j-status {
	margin: 0;
	font-weight: 700;
	color: #1e3a8a;
}

.gbw-j-block {
	margin: 0 0 14px;
}

.gbw-j-block-title {
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #475569;
	margin: 0 0 6px;
}

.gbw-j-donow {
	margin: 0;
	padding-left: 20px;
}

.gbw-j-donow li {
	margin: 0 0 6px;
	line-height: 1.45;
}

.gbw-j-date-value {
	margin: 0 0 4px;
	font-size: 1.05rem;
	font-weight: 700;
	color: #1e293b;
}

/* Scoped under .gbw like every other selector in this file: `.is-overdue` is a generic class name
   that a theme or another plugin could easily also use, and an unscoped descendant selector here
   would reach outside a Workspace container. */
.gbw .is-overdue .gbw-j-date-value {
	color: #b42318;
}

/* The disclaimer is never allowed to look like fine print that can be skipped. */
.gbw-j-date-note,
.gbw-j-phone-label,
.gbw-j-unavailable {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.45;
	color: #475569;
}

.gbw-j-unavailable {
	background: #fffbeb;
	border-left: 4px solid #b45309;
	padding: 10px 12px;
	border-radius: 0 8px 8px 0;
	margin: 10px 0 0;
}

.gbw-j-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 10px;
}

/* Buttons and links share one shape so the row reads as one set of actions,
   even though internal controls are <button> and official links are <a>. */
.gbw-j-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 15px;
	border-radius: 10px;
	border: 1px solid #bfdbfe;
	background: #ffffff;
	color: #1e3a8a;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.gbw-j-btn:hover,
.gbw-j-btn:focus {
	background: #eff6ff;
}

.gbw-j-btn-primary {
	background: #1e3a8a;
	border-color: #1e3a8a;
	color: #ffffff;
}

.gbw-j-btn-primary:hover,
.gbw-j-btn-primary:focus {
	background: #173f73;
}

.gbw-j-btn-quiet {
	border-color: #e2e8f0;
	color: #475569;
	font-weight: 600;
}

.gbw-j-update {
	border-top: 1px solid #e2e8f0;
	padding-top: 12px;
	margin-bottom: 0;
}

.gbw-j-field {
	display: block;
	margin: 0 0 10px;
}

.gbw-j-field-label {
	display: block;
	font-size: 0.88rem;
	font-weight: 600;
	color: #475569;
	margin: 0 0 4px;
}

.gbw-j-select,
.gbw-j-date {
	width: 100%;
	max-width: 340px;
	min-height: 44px;
	padding: 9px 10px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	background: #ffffff;
	color: #1e293b;
	font: inherit;
}

.gbw-j-empty,
.gbw-j-privacy {
	margin: 0 0 10px;
	color: #475569;
	line-height: 1.5;
}

.gbw-j-privacy {
	font-size: 0.88rem;
}

@media (min-width: 640px) {
	.gbw-j-update {
		display: flex;
		flex-wrap: wrap;
		gap: 14px;
		align-items: flex-end;
	}

	.gbw-j-update .gbw-j-block-title {
		flex: 1 0 100%;
	}
}

/* ------------------------------------------------------------------ */
/* Benefit Passport + My Benefits Match                                */
/* ------------------------------------------------------------------ */

.gbw-j-match,
.gbw-j-passport {
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px;
	margin: 0 0 14px;
	background: #ffffff;
}

.gbw-j-passport {
	background: #f8fafc;
	margin: 0 0 16px;
}

.gbw-j-match-group {
	margin: 0 0 16px;
	padding-left: 12px;
	border-left: 4px solid #cbd5e1;
}

/* The three priority groups are distinguished by weight, not by colour alone. */
.gbw-j-match-check-first {
	border-left-color: #1e3a8a;
}

.gbw-j-match-may-fit {
	border-left-color: #0f766e;
}

.gbw-j-match-needs-info {
	border-left-color: #b45309;
}

.gbw-j-match-item {
	margin: 0 0 12px;
}

.gbw-j-match-name {
	font-size: 1rem;
	margin: 0 0 2px;
	color: #1e293b;
}

.gbw-j-match-verdict {
	margin: 0 0 6px;
	font-weight: 700;
	color: #1e3a8a;
}

.gbw-j-match-needs-info .gbw-j-match-verdict {
	color: #b45309;
}

.gbw-j-match-why {
	margin: 0 0 8px;
	padding-left: 20px;
}

.gbw-j-match-why li {
	margin: 0 0 4px;
	line-height: 1.45;
	color: #334155;
}

/* "No result" must never be mistaken for "no". */
.gbw-j-match-gap {
	margin: 0 0 8px;
	padding: 9px 11px;
	background: #fffbeb;
	border-left: 4px solid #b45309;
	border-radius: 0 8px 8px 0;
	font-size: 0.9rem;
	line-height: 1.45;
	color: #475569;
}

.gbw-j-order-list {
	margin: 0;
	padding-left: 22px;
}

.gbw-j-order-list li {
	margin: 0 0 6px;
	line-height: 1.45;
}

.gbw-j-order-reason {
	color: #475569;
}

/* 320px: nothing may overflow, and every control stays full width and tappable. */
@media (max-width: 380px) {
	.gbw-j-match,
	.gbw-j-passport,
	.gbw-j-card,
	.gbw-j-picker {
		padding: 12px;
	}

	.gbw-j-select,
	.gbw-j-date,
	.gbw-j-btn {
		width: 100%;
		max-width: none;
	}

	.gbw-j-actions {
		flex-direction: column;
		align-items: stretch;
	}
}

/* Keyboard users must always be able to see where they are. */
.gbw-j-btn:focus-visible,
.gbw-j-select:focus-visible,
.gbw-j-date:focus-visible {
	outline: 3px solid #1d4ed8;
	outline-offset: 2px;
}

/* ---------- Benefit Discovery ---------- */

/*
 * Mobile first, like everything above it. The whole flow has to work on a 320px phone with one
 * thumb, because that is the device a household under financial pressure is most likely holding.
 * Nothing here uses colour as the only carrier of meaning: every tier is spelled out in the
 * badge text, and every error is a sentence, not a red outline.
 */

.gbw-dsc { min-width: 0; }

/* --- progress --- */

.gbw-dsc-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	font-size: .82rem;
}

.gbw-dsc-stepdot {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #5b6b7c;
}

.gbw-dsc-stepnum {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	border: 1px solid var(--gbw-line);
	border-radius: 999px;
	background: #ffffff;
	font-weight: 700;
	font-size: .76rem;
}

.gbw-dsc-stepdot.is-done .gbw-dsc-stepnum {
	border-color: #0f7060;
	background: #0f7060;
	color: #ffffff;
}

.gbw-dsc-stepdot.is-current {
	color: var(--gbw-ink);
	font-weight: 700;
}

.gbw-dsc-stepdot.is-current .gbw-dsc-stepnum {
	border-color: var(--gbw-accent);
	background: var(--gbw-accent);
	color: #ffffff;
}

/* At 320px the five step labels cannot all fit, so only the current one keeps its words. */
@media (max-width: 520px) {
	.gbw-dsc-stepdot .gbw-dsc-steplabel { display: none; }
	.gbw-dsc-stepdot.is-current .gbw-dsc-steplabel { display: inline; }
}

/* --- one step of the form --- */

.gbw-dsc-step {
	min-width: 0;
	padding: 14px;
	border: 1px solid var(--gbw-line);
	border-radius: 10px;
	background: #ffffff;
}

.gbw-dsc-step-h {
	margin: 0 0 6px;
	color: var(--gbw-ink);
	font-size: clamp(1.02rem, 3.6vw, 1.2rem);
	line-height: 1.3;
}

/* The heading receives focus on every step change; it must show that it has it. */
.gbw-dsc-step-h:focus-visible,
.gbw-dsc-group-h:focus-visible {
	outline: 3px solid #1d4ed8;
	outline-offset: 3px;
}

.gbw-dsc-step-lead {
	margin: 0 0 14px;
	font-size: .92rem;
}

.gbw-dsc-step-body .gbw-field { margin-bottom: 14px; }

.gbw-field-help {
	margin: 2px 0 6px;
	color: #5b6b7c;
	font-size: .84rem;
	line-height: 1.45;
}

.gbw-field-error {
	margin: 6px 0 0;
	padding: 8px 10px;
	border-left: 3px solid var(--gbw-danger);
	background: #fdf3f3;
	color: #6b1616;
	font-size: .86rem;
	font-weight: 600;
}

.gbw-fieldset {
	min-width: 0;
	margin: 0 0 16px;
	padding: 12px;
	border: 1px solid var(--gbw-line);
	border-radius: 10px;
}

.gbw-legend {
	padding: 0 6px;
	color: var(--gbw-ink);
	font-weight: 700;
	font-size: .95rem;
}

.gbw-check-wrap { margin-bottom: 10px; }

/* A 44px tap target, and the whole row is the label. */
.gbw-dsc .gbw-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 44px;
	padding: 6px 0;
	cursor: pointer;
}

.gbw-dsc .gbw-check input {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	flex: 0 0 20px;
}

.gbw-check-text { font-size: .95rem; }

.gbw-check-help {
	margin: 0 0 0 30px;
	font-size: .82rem;
}

.gbw-note {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-left: 3px solid var(--gbw-warn-line);
	background: var(--gbw-warn-bg);
	font-size: .88rem;
}

.gbw-note p { margin: 0; }

.gbw-dsc-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--gbw-line);
}

/* One thumb, one column, on a small phone. */
@media (max-width: 420px) {
	.gbw-dsc-nav { flex-direction: column; align-items: stretch; }
	.gbw-dsc-nav .gbw-btn { width: 100%; }
}

/* --- results --- */

.gbw-dsc-summary {
	margin: 0 0 18px;
	padding: 14px;
	border: 1px solid var(--gbw-line);
	border-left: 6px solid var(--gbw-accent);
	border-radius: 10px;
	background: #ffffff;
}

.gbw-dsc-group { margin: 0 0 22px; }

.gbw-dsc-group-h {
	margin: 0 0 4px;
	color: var(--gbw-ink);
	font-size: clamp(1rem, 3.4vw, 1.15rem);
}

.gbw-dsc-group-lead {
	margin: 0 0 14px;
	font-size: .89rem;
	color: #5b6b7c;
}

.gbw-dsc-disclaimer {
	margin: 10px 0 0;
	font-size: .84rem;
	color: #5b6b7c;
}

.gbw-dsc-card {
	min-width: 0;
	margin: 0 0 14px;
	padding: 14px;
	border: 1px solid var(--gbw-line);
	border-left: 6px solid var(--gbw-line);
	border-radius: 10px;
	background: #ffffff;
}

/* Colour is the second signal. The badge text is the first. */
.gbw-dsc-strong { border-left-color: #0f7060; }
.gbw-dsc-possible { border-left-color: #b06a00; }
.gbw-dsc-review { border-left-color: #5b6b7c; }

.gbw-dsc-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}

.gbw-dsc-card-title {
	margin: 0;
	color: var(--gbw-ink);
	font-size: 1.02rem;
	overflow-wrap: anywhere;
}

.gbw-dsc-badge {
	display: inline-block;
	margin: 0;
	padding: 3px 10px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.gbw-dsc-strong .gbw-dsc-badge { color: #0f7060; }
.gbw-dsc-possible .gbw-dsc-badge { color: #8a5200; }
.gbw-dsc-review .gbw-dsc-badge { color: #47566a; }

.gbw-dsc-oneline {
	margin: 0 0 10px;
	font-size: .93rem;
}

.gbw-dsc-urgent {
	margin: 0 0 10px;
	padding: 8px 10px;
	border-left: 3px solid #b06a00;
	background: var(--gbw-warn-bg);
	font-size: .88rem;
	font-weight: 600;
	color: #6b4400;
}

.gbw-dsc-h5 {
	margin: 12px 0 6px;
	color: var(--gbw-ink);
	font-size: .92rem;
}

.gbw-dsc-estimate {
	margin: 12px 0;
	padding: 12px;
	border: 1px dashed var(--gbw-line);
	border-radius: 8px;
	background: var(--gbw-card);
}

.gbw-dsc-est-label {
	margin: 0 0 4px;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #5b6b7c;
}

.gbw-dsc-est-value {
	margin: 0 0 6px;
	color: var(--gbw-ink);
	font-weight: 700;
	font-size: 1rem;
}

.gbw-dsc-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--gbw-line);
}

.gbw-dsc-resultbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--gbw-line);
}

@media (max-width: 420px) {
	.gbw-dsc-actions,
	.gbw-dsc-resultbar {
		flex-direction: column;
		align-items: stretch;
	}

	.gbw-dsc-actions .gbw-btn,
	.gbw-dsc-resultbar .gbw-btn {
		width: 100%;
	}
}

/* Keyboard users must always be able to see where they are. */
.gbw-dsc .gbw-select:focus-visible,
.gbw-dsc .gbw-btn:focus-visible,
.gbw-dsc input[type="checkbox"]:focus-visible,
.gbw-dsc summary:focus-visible {
	outline: 3px solid #1d4ed8;
	outline-offset: 2px;
}


/* ==== workspace-print.css (was media="print") ==== */
@media print {
/*!
 * GlobalBenefits Workspace - print styles
 *
 * Loaded with media="print", so it costs nothing on screen.
 *
 * Goal: a visitor can walk into a county office with a printed copy of their workspace.
 * That means ink-cheap, no interactive chrome, and URLs written out in full because a
 * printed link is useless otherwise.
 *
 * Scoped entirely under `.gbw` except for one page-margin rule, so it cannot alter how any
 * other page of the site prints.
 */

@page {
	margin: 14mm;
}

.gbw {
	margin: 0;
	color: #000000;
}

.gbw-frame,
.gbw-fallback,
.gbw-privacy,
.gbw-notyet,
.gbw-warn {
	border: 1px solid #666666;
	border-left-color: #666666;
	background: transparent;
	padding: 8mm;
}

.gbw-title {
	font-size: 16pt;
	color: #000000;
}

.gbw-lead,
.gbw-muted {
	color: #000000;
}

/* Buttons are meaningless on paper. */
.gbw-toolbar,
.gbw-btn,
.gbw-status {
	display: none;
}

/* A printed link must carry its destination. */
.gbw a::after {
	content: ' (' attr(href) ')';
	font-size: 9pt;
	word-break: break-all;
}

/* Keep a field label and its value on the same sheet. */
.gbw-dl dt,
.gbw-dl dd {
	break-inside: avoid;
	page-break-inside: avoid;
}

.gbw-dl {
	border-top: 1px solid #999999;
}

.gbw-dl dd {
	border-bottom: 1px solid #999999;
	font-weight: 700;
}

/* The privacy statement is part of the record and must survive to paper. */
.gbw-privacy {
	break-inside: avoid;
	page-break-inside: avoid;
}

.gbw-privacy-never {
	color: #000000;
	font-weight: 700;
}

/* ---------- Printed plan ---------- */

/* The whole point of printing is to take the plan to an office, so every folded section
   must be open on paper regardless of whether the visitor expanded it on screen. */
.gbw-details > div,
.gbw-details > summary + * {
	display: block;
}

.gbw-details {
	border: 0;
	padding: 0;
}

.gbw-details summary {
	color: #000000;
	font-weight: 700;
	list-style: none;
}

/* A card is a unit of meaning; splitting one across sheets makes it unusable at a counter. */
.gbw-card,
.gbw-today-group {
	break-inside: avoid;
	page-break-inside: avoid;
	border: 1px solid #666666;
	border-top-width: 3px;
	margin-bottom: 6mm;
	padding: 5mm;
}

.gbw-grid {
	display: block;
}

.gbw-card-title,
.gbw-today-prog {
	color: #000000;
}

.gbw-tag {
	border: 1px solid #666666;
	background: transparent;
	color: #000000;
}

/* Selects and date fields print as their chosen value, framed, not as widgets. */
.gbw-select,
.gbw-date {
	border: 0;
	border-bottom: 1px solid #000000;
	padding: 0;
	min-height: 0;
	font-weight: 700;
	color: #000000;
	/* Chrome omits form control values otherwise. */
	-webkit-appearance: none;
	appearance: none;
}

.gbw-check input {
	/* An unticked box must still print as an empty box to tick by hand. */
	-webkit-appearance: checkbox;
	appearance: checkbox;
}

/* The not-a-government-agency statement must be on the printed page too - a printout
   circulating without it is exactly the confusion the rule exists to prevent. */
.gbw-legal {
	break-inside: avoid;
	page-break-inside: avoid;
	border: 1px solid #000000;
	background: transparent;
	color: #000000;
	font-weight: 600;
}

/* ---------- Printed Action Pack ---------- */

.gbw-ap-sec {
	break-inside: avoid;
	page-break-inside: avoid;
	border-bottom: 1px solid #999999;
}

.gbw-ap-num {
	background: transparent;
	border: 1px solid #000000;
	color: #000000;
}

.gbw-ap-title,
.gbw-ap-h {
	color: #000000;
}

/* On paper an outbound button is not pressable, so it prints as its destination.
   The generic `.gbw a::after` rule already appends the href. */
.gbw-btn-tool,
.gbw-toollink .gbw-btn-official {
	display: inline;
	width: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #000000;
	font-weight: 700;
	text-align: left;
}

.gbw-toollink-dest {
	display: block;
	color: #000000;
}

/* Section 12 is the sheet someone carries to a counter, so it starts its own page. */
.gbw-ap-summary {
	break-before: page;
	page-break-before: always;
	break-inside: avoid;
	page-break-inside: avoid;
	border: 2px solid #000000;
}

/* ---------- Benefit Discovery ---------- */

/*
 * The printed page is the deliverable here, not a consolation. A visitor who has just found out
 * that five programmes are worth applying for needs to carry that list - with the documents, the
 * steps and the official addresses - to a counter, a caseworker, or a kitchen table.
 *
 * So on paper: the progress bar and the buttons go, every collapsed <details> opens, and each
 * result card is kept whole rather than split across a page break.
 */

.gbw-dsc-progress,
.gbw-dsc-nav,
.gbw-dsc-resultbar,
.gbw-dsc-actions .gbw-btn-secondary {
	display: none;
}

/*
 * Documents and steps are the whole point of printing this, and CSS CANNOT reveal them on its own.
 *
 * A closed <details> withholds its non-summary content through the browser's own slot mechanism, so
 * `display: block` on the inner div achieves nothing - this file previously claimed to open every
 * collapsed section and a generated PDF contained "Documents to get ready" and not one document.
 *
 * The actual work is done in gbw-discover-view.js, which sets the `open` attribute before printing
 * and restores it afterwards. These rules only style the result once it is genuinely open, and are
 * kept as a second line of defence for the case where the script has not run.
 */
.gbw-dsc-card details[open] > div {
	display: block;
}

.gbw-dsc-card summary {
	font-weight: 700;
	color: #000000;
	list-style: none;
}

.gbw-dsc-summary,
.gbw-dsc-card {
	border: 1px solid #666666;
	border-left: 3px solid #000000;
	background: transparent;
	break-inside: avoid;
	page-break-inside: avoid;
}

.gbw-dsc-card-title,
.gbw-dsc-group-h,
.gbw-dsc-est-value {
	color: #000000;
}

/* The tier must survive a monochrome printer, so it prints as a bordered word. */
.gbw-dsc-badge {
	border: 1px solid #000000;
	color: #000000;
}

.gbw-dsc-urgent,
.gbw-dsc-estimate {
	border-left: 3px solid #000000;
	background: transparent;
	color: #000000;
}

/* The official destination prints as its URL - the generic `.gbw a::after` rule appends it. */
.gbw-dsc-actions .gbw-btn-official {
	display: inline;
	width: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #000000;
	font-weight: 700;
	text-align: left;
}

}