@font-face{font-family:acumin-pro-semi-condensed;src:url(https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/l?subset_id=1&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/d?subset_id=1&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/a?subset_id=1&fvd=n4&v=3) format("opentype");font-style:normal;font-weight:400}

/* Ensure consistent height for all filter components (textbox and dropdowns) — matches UAT DevExpress height */
.form-control,
.form-select,
.input-group {
    height: 56px;
}

.input-group .form-control {
    height: 100%;
}

/* Align filter row items to the top */
.row.g-3 {
    align-items: flex-start;
}

/* Remove border from clear button in text inputs */
.input-group .btn-clear,
.input-group button {
    border: none;
    background: transparent;
}

/* TextBox clear button: wrapper acts as the visible input border; button overlays inside (matches UAT DevExpress style) */
.input-group.ui-textbox {
    position: relative;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    flex-wrap: nowrap;
}
.input-group.ui-textbox:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}
.input-group.ui-textbox .form-control {
    border: none !important;
    box-shadow: none !important;
    background: transparent;
    padding-right: 40px;
    width: 100%;
    border-radius: 0;
}
.input-group.ui-textbox .editor-button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    border: none !important;
    background: transparent !important;
    padding: 0;
}

/* ComboBox null text colour — matches UAT DevExpress placeholder (#bbbbbb) */
select.ui-combobox:has(option[value=""]:checked) {
    color: #bbbbbb !important;
}
/* Options in the open dropdown list always use normal dark text */
select.ui-combobox option {
    color: initial;
}

body {
	font-family: "acumin-pro-semi-condensed", serif;
	font-size: 15px;
	line-height: 1.75;
	margin: 0;
	color: black;

	--color-goa-teal: #387F9F;
	--color-light-red: #ff8080;
}

/* Prevent background page scroll when modal is open */
body:has(.modal.show) {
	overflow: hidden;
}

/* Modal sizing — match UAT (max 800px, responsive at small viewports) */
.modal-lg {
	max-width: min(800px, 95vw) !important;
}

.color-goa-teal {
	color: var(--color-goa-teal);
}

.color-light-red {
	color: var(--color-light-red);
}

/********************
 sections
********************/

section + section {
	margin-top: 30px;
}

/********************
 headings
********************/

h1 {
	font-size: 40px !important;
	font-weight: 700;
	margin-bottom: 20px;
}

h1:focus-visible {
	outline: none;
}

h2 {
	font-weight: normal;
	font-size: 24px !important;
	margin-bottom: 20px;
}

h3 {
	font-weight: normal;
	font-size: 30px !important;
	margin-bottom: 20px;
}

h4 {
	margin: 10px 0 8px 0;
}

/********************
 layout
********************/

/* Page gutters mirror goa-app-header's own padding tokens (3rem desktop / 1rem below the
   component's 624px mobile breakpoint) so body content lines up with the header and nav. */
.page-container {
	width: 100%;
	margin: 0 auto;
	padding-left: var(--goa-app-header-padding-h-desktop, 3rem);
	padding-right: var(--goa-app-header-padding-h-desktop, 3rem);
}

main > .page-container {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

@media (max-width: 623.98px) {
	.page-container {
		padding-left: var(--goa-app-header-padding-h-mobile, 1rem);
		padding-right: var(--goa-app-header-padding-h-mobile, 1rem);
	}
}

/********************
 header
********************/
/* The header is the design system's goa-app-header. Only slotted content, which is styled from
   this document rather than from inside the component's shadow DOM, needs rules here. */

.app-header-banner {
	display: block;
	width: 100%;
	text-align: right;
	font-size: 12px;
	font-weight: normal;
}

.app-header-logout {
	margin: 0;
}

/* Leading icon slotted into a goa-button. The design system's own leadingicon attribute relies on
   the Ionicons CDN for anything outside its small inline set, so we slot the SVG in directly. */
.btn-leading-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	vertical-align: text-bottom;
	margin-right: 8px;
}

/********************
 section
********************/

/*.page-intro {*/
/*	margin-bottom: 40px;*/
/*}*/

.page-intro h1 {
	font-size: 28px;
	color: black;
}

/********************
 form
********************/

.form-fields {
	margin-bottom: -10px !important;
}

/* The dropdown's inner input is 20 characters wide by default, so without this the field would be
   sized by its value and grow out of its grid column once something is selected. */
.form-field {
	margin-bottom: 10px;
	min-width: 0;
}

/* The filters sit on a grid rather than Bootstrap columns so the fields always keep the same
   gap and wrap onto a new line instead of overflowing the page when space runs out. The minimum
   track fits the longest option any dropdown offers, "Young Adult (18-24)". */

.filter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0 var(--goa-space-m);
	align-items: end;
}

/* Above the large breakpoint everything fits on one row. The dropdowns size themselves to their own
   longest option, so their tracks are sized to fit that rather than guessed at, and the name search
   takes whatever room is left. */

@media (min-width: 1450px) {
	.filter-grid {
		grid-template-columns:
			minmax(160px, 1fr)
			max-content
			max-content
			max-content
			max-content;
	}
}

label {
	color: #999999;
	font-size: 15px;
	margin-bottom: 6px;
}

/* The design system's form controls are inline-level custom elements, so the label needs to be a
   block to stay above the field rather than beside it. */
.form-field label {
	display: block;
}

.form-field goa-input,
.form-field goa-dropdown {
	display: block;
	width: 100%;
}

/* The dropdown sizes itself in `ch` from its longest option, which ignores the column it was given
   and leaves it overlapping the field beside it. Filling the field instead keeps it in its lane. */
.form-field goa-dropdown {
	--width: 100%;
}

/* Both controls draw their border as an inset box-shadow, so the override has to keep that form.
   greyscale-200 is the token closest to the original #ced4da. */
.form-field goa-input {
	--goa-text-input-border: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-greyscale-200);
	--goa-text-input-border-hover: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-greyscale-200);
}

.form-field goa-dropdown {
	--goa-dropdown-border: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-greyscale-200);
	--goa-dropdown-border-hover: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-greyscale-200);
}

.form-buttons {
	margin-top: 16px;
}

.form-buttons .btn:not(:first-child) {
	margin-left: 6px;
}

.form-fields + .form-buttons-bottom-between {
	margin-top: 15px;
}

.form-buttons-bottom-between {
	margin-top: 5px;
	display: flex;
	justify-content: space-between;
}

.icon-secondary {
	color: #C1C1C1;
}

.icon {
	color: #0081A2;
}

/********************
 grid
********************/

.grid-buttons-top {
    text-align: right;
    margin-bottom: 16px;
}

.grid-buttons-bottom {
    margin-top: 15px;
}

.grid-buttons-bottom-between {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
}

/********************
 dropzone
********************/

.dropzone {
	color: #aaa;
	background-color: #f6f6f6;
	border: 1px solid #ddd;
	min-height: 240px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.dropzone:hover {
	background-color: #eee;
}

/********************
 footer
********************/

footer .footer-tagline {
	white-space: nowrap;
}

/********************
 tag
********************/

.tag {
	padding: 4px 10px 5px 10px;
	background-color: #949494;
	color: white;
	border-radius: 8px;
	font-style: normal;
	font-size: 11px;
	line-height: 100%;
}

.tag:not(:first-child) {
	margin-left: 6px;
}

.tag.success {
	background-color: #006F4C;
	color: white;
}

.tag.warning {
	background-color: #EFCA40;
	color: black;
}

.tag.danger {
	background-color: #DA291C;
	color: white;
}

.tag.unavailable {
	background-color: #FCE4E1;
	color: #8D1714;
	border: 2px solid #E8AAA3;
}

.tag.light {
	background-color: rgba(255, 255, 255, 0.6);
	color: #888;
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.tag.updated-tag {
	font-weight: 600;
	letter-spacing: 0.4px;
	color: #5a5a5a;
}

.tag.outline {
	background-color: #F1F1F1;
	color: #004A8F;
	border: 1px solid #ccc;
}

/********************
 card
********************/

/* Site cards and the modal's panels are goa-container. The component's host is display:flex and
   its inner container is aligned to flex-start, so equal height cards in a grid need the host
   stretched and the container given a matching min-height. */

.site-card {
	height: 100%;
}

.site-card > goa-container,
.site-panel {
	height: 100%;
}

.site-card.interactive {
	cursor: pointer;
}

/* The container heading uses the design system's large heading font. These headings existed before
   the design system, so they keep the app body font: bold 15px, or 0.875 of that for site names. */

.site-card-title,
.site-panel [slot="title"] {
	font-family: "acumin-pro-semi-condensed", serif;
	font-weight: 700;
	line-height: 1.5;
}

/* A long site name must not widen the card. The container's header is a flex row inside shadow DOM,
   and the cell that holds this slot keeps the default `min-width: auto`, so it refuses to shrink
   below the title's min-content width and pushes the card past its grid column. We can't reach that
   cell from here, so the title collapses its own min-content width instead: `overflow-wrap: anywhere`
   makes it a single character, and the one-line clamp restores the ellipsis that `white-space: nowrap`
   used to provide. The full name stays available through the element's `title` attribute. */

.site-card-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	overflow: hidden;
	overflow-wrap: anywhere;
	font-size: 13.125px;
}

.site-panel [slot="title"] {
	font-size: 15px;
}

/* The container forces `margin-bottom: 0` on whatever it slots last, so the card's body and footer
   share a wrapper. That leaves the footer free to pull itself out to the card's edges. */
.site-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

/* The footer is a full-bleed band across the bottom of the card, so it has to escape the container's
   own 16px padding. The radius keeps it inside the card's rounded bottom corners. */
.site-card-footer {
	font-size: 12px;
	margin: 0 -16px -16px;
	padding: var(--goa-space-xs) 16px;
	border-top: var(--goa-border-width-s, 1px) solid var(--goa-color-greyscale-200);
	background: var(--goa-color-greyscale-100);
	border-radius: 0 0 var(--goa-border-radius-m, 4px) var(--goa-border-radius-m, 4px);
}

/* The gap above the footer matches the one the container leaves below its heading. */
.site-card-body > :first-child {
	margin-bottom: 16px;
}

.site-card-body > .site-card-footer {
	margin-top: auto;
}

/********************
 dashboard intro panels
********************/

/* The panels are goa-container with accent="filled", which hides the component's own heading, so
   the title lives in the content slot. Colours come from the design tokens. */

.intro-panels {
	margin-bottom: var(--goa-space-m);
}

.intro-panels goa-container {
	height: 100%;
}

.intro-panel-title {
	display: flex;
	align-items: center;
	gap: var(--goa-space-xs);
	margin: 0 0 var(--goa-space-xs);
	font-size: var(--goa-font-size-1);
	font-weight: var(--goa-font-weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--goa-color-text-default);
}

/* Indent the list so its text lines up with the title text rather than the icon. */
.intro-panel-list {
	margin: 0;
	padding-left: calc(var(--goa-icon-size-m) + var(--goa-space-xs) + var(--goa-space-m));
	list-style-position: outside;
}

.intro-panel-list li + li {
	margin-top: var(--goa-space-3xs);
}

.intro-panels goa-container[type="info"] .intro-panel-title {
	color: var(--goa-color-info-text-dark);
}

.intro-panels goa-container[type="info"] .intro-panel-list {
	color: var(--goa-color-info-text);
}

/* The help panel wants a white background rather than the non-interactive grey, but keeps that
   type's neutral border. */
.intro-panels goa-container[type="non-interactive"] {
	--goa-container-non-interactive-bg-color: var(--goa-color-greyscale-white);
}

@media (max-width: 991.98px) {
	.intro-panels > [class*="col-"]:first-child goa-container {
		margin-bottom: var(--goa-space-m);
	}
}

/* Legacy aliases retained for any remaining usages */
.intro-summary-no-bg {
	padding: 12px 16px; 
	border: 1px solid #b3deff;
	border-radius: 10px; 
	margin-bottom: 20px;
}

.intro-summary {
	background-color: #e6f4ff;
	padding: 12px 16px;
	border: 1px solid #b3deff;
	border-radius: 10px;
	margin-bottom: 20px;
}

/********************
 other
********************/

.no-wrap {
	white-space: nowrap;
	flex-shrink: 0;
}

.cursor-help {
	cursor: help;
}

.lh-0 {
	line-height: 0 !important;
}

.interactive {
	cursor: pointer !important;
}


/********************
 tab button group
********************/

/* The design system has no segmented control, so the tab headers are a button group whose
   secondary buttons are re-tinted: neutral when idle, interactive when selected. */
.ui-tab-buttons {
	display: block;
	margin-bottom: var(--goa-space-l);
}

.ui-tab-buttons goa-button {
	--goa-button-secondary-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
	--goa-button-secondary-hover-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-300);
	--goa-button-secondary-focus-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-300);
	--goa-button-secondary-color-text: var(--goa-color-text-default);
	--goa-button-secondary-hover-color-text: var(--goa-color-text-default);
	--goa-button-secondary-focus-color-text: var(--goa-color-text-default);
	--goa-button-secondary-color-bg: var(--goa-color-greyscale-white);
	--goa-button-secondary-hover-color-bg: var(--goa-color-greyscale-100);
	--goa-button-secondary-focus-color-bg: var(--goa-color-greyscale-100);
}

.ui-tab-buttons goa-button.active {
	--goa-button-secondary-border: var(--goa-border-width-s) solid var(--goa-color-interactive-default);
	--goa-button-secondary-hover-border: var(--goa-border-width-s) solid var(--goa-color-interactive-default);
	--goa-button-secondary-focus-border: var(--goa-border-width-s) solid var(--goa-color-interactive-default);
	--goa-button-secondary-color-text: var(--goa-color-interactive-default);
	--goa-button-secondary-hover-color-text: var(--goa-color-interactive-default);
	--goa-button-secondary-focus-color-text: var(--goa-color-interactive-default);
	--goa-button-secondary-color-bg: color-mix(in srgb, var(--goa-color-interactive-default) 12%, var(--goa-color-greyscale-white));
	--goa-button-secondary-hover-color-bg: color-mix(in srgb, var(--goa-color-interactive-default) 12%, var(--goa-color-greyscale-white));
	--goa-button-secondary-focus-color-bg: color-mix(in srgb, var(--goa-color-interactive-default) 12%, var(--goa-color-greyscale-white));
}
/* Slotted Ionicons artwork sized to the design system's icon scale and inheriting the button text
   colour so it tracks the selected state. */
.ui-tab-buttons .tab-icon {
	width: var(--goa-icon-size-m);
	height: var(--goa-icon-size-m);
	fill: currentColor;
	margin-right: var(--goa-space-2xs);
	vertical-align: -0.2em;
}

/********************
 alert boxes
********************/

/* The container types carry the alert colours; the icon and text sit on one row and the whole box
   spans the content width. */
.alert-box {
	display: block;
	margin-bottom: var(--goa-space-m);
}

/* Two columns: the icon, then a text column carrying the optional heading and the body text, so
   both lines share one left edge instead of the text wrapping under the icon. */
.alert-box-body {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	column-gap: var(--goa-space-xs);
	row-gap: var(--goa-space-2xs);
}

.alert-box-icon {
	grid-column: 1;
	grid-row: 1;
	flex: none;
	margin-top: var(--goa-space-3xs);
}

/* Uppercase and letter-spaced to match the table's column labels, and tinted with the icon's
   status colour so the box reads as one unit. */
.alert-box-heading {
	grid-column: 2;
	font-family: var(--goa-font-family-sans, acumin-variable, helvetica-neue, arial, sans-serif);
	font-size: var(--goa-font-size-1);
	line-height: var(--goa-line-height-1);
	font-weight: var(--goa-font-weight-bold, 700);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--alert-box-accent, currentColor);
}

.alert-box-text {
	grid-column: 2;
}

.alert-box.interactive {
	cursor: pointer;
}

goa-container[type="important"].alert-box .alert-box-text {
	color: var(--goa-color-warning-dark);
}

goa-container[type="info"].alert-box .alert-box-text {
	color: var(--goa-color-info-text);
}
/********************
 site card badges
********************/

.site-updated-badge {
	font-weight: 400;
}

/********************
 site attribute icons
********************/

.site-icons {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Every context sets --site-icon-size and both kinds of icon read it: an inline SVG stretches to
   the box, while a Font Awesome glyph is text and needs an explicit font-size, so without this
   the two kinds drift apart wherever the icon is drawn at anything other than the default 16px. */
.site-icon {
	--site-icon-size: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--site-icon-size);
	height: var(--site-icon-size);
	cursor: help;
}

.site-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.site-icon .fas {
	font-size: calc(var(--site-icon-size) * 0.9375);
	line-height: 1;
}

.site-icon-on {
	color: var(--goa-color-brand-default);
}

.site-icon-off {
	color: var(--goa-color-greyscale-300);
}

/* The design system's dropdown swaps its chevron for a clear button rather than showing both, and
   only when it is filterable. This keeps the chevron and places our own clear button beside it.
   The wrapper hugs the field it holds so the clear button stays pinned to the field's own right
   edge, rather than to a column that may be wider than the field. */
.dropdown-with-clear {
	position: relative;
	width: fit-content;
	max-width: 100%;
}

/* The clear button sits on top of the field, between the value and the chevron, so the value needs
   enough right padding to stop before it instead of running underneath. */
.dropdown-with-clear:has(.dropdown-clear) goa-dropdown {
	--goa-dropdown-padding: 16px 1.75rem 16px 12px;
}

.dropdown-clear {
	position: absolute;
	top: 50%;
	right: 2.5rem;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	color: var(--goa-color-greyscale-700);
}

.dropdown-clear:hover {
	color: var(--goa-color-greyscale-black);
}

/* Slotted badge content, used where a badge needs a glyph the design system's icon set cannot
   inline. The icon takes the badge's own text colour so it works on every badge type. */
.badge-content {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.site-icon.badge-icon {
	--site-icon-size: 14px;
	width: var(--site-icon-size);
	height: var(--site-icon-size);
	color: inherit;
}

/********************
 site modal
********************/

/* Aligns the design system's own icons with the Ionicons artwork used where goa-icon has no
   inline equivalent, so both sit at the same size and colour beside their label. */
/* The row can be several lines tall, as the address is. The label stays on the first line rather
   than centring itself against the whole row. */
.site-detail-label {
	display: flex;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
}

.site-detail-label .site-icon,
.site-detail-icon {
	--site-icon-size: 20px;
	flex: 0 0 var(--site-icon-size);
	width: var(--site-icon-size);
	height: var(--site-icon-size);
	color: var(--goa-color-brand-default);
}

.site-detail-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.site-detail-link-icon {
	width: 16px;
	height: 16px;
	color: var(--goa-color-interactive-default);
	vertical-align: text-bottom;
	margin-left: 4px;
}

/* A contact row is a two column flex line: a fixed label on the left and whatever the site has
   recorded on the right. The value is the half that has to absorb an address of any length, so it
   is the half that has to be allowed to give way.

   A flex item takes min-width: auto, which refuses to shrink below its own longest unbroken line,
   so the column is given min-width: 0 and permission to break inside a word. Both are needed:
   without them a long street address held its row open at full single-line width, and because the
   rows share a list that width became the panel's, pushing the whole dialog past the edge of a
   phone screen and leaving it scrolling sideways.

   This replaces Bootstrap's .text-truncate, which was the wrong tool twice over. Its
   white-space: nowrap is the opposite of what a narrow column needs, and even had it clipped, an
   ellipsis would have hidden part of an address or an email address rather than wrapping it onto
   a second line — and these are the details a caseworker is phoning or driving to. */
.site-detail-value {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* space-between has no free space left to distribute once the value column has taken the width it
   needs, which left the label and the address touching. The separation is set here instead. */
.site-detail-row {
	gap: var(--goa-space-m, 1rem);
}

.site-modal-chips goa-badge {
	margin: 0;
}

/* The age and gender chips keep the grey background and dark blue text the dashboard used
   before the design system, which is available from tokens rather than a badge type. */

.site-modal-chips goa-badge[type="information"] {
	--goa-badge-info-subtle-color-bg: var(--goa-color-greyscale-100);
	--goa-badge-info-subtle-color-content: var(--goa-color-info-dark);
	--goa-badge-info-subtle-border: inset 0 0 0 var(--goa-border-width-s, 1px) var(--goa-color-greyscale-200);
}

/* ── site details view (GoA design system) ──────────────────────────────────
   Layout for SiteDetailsModal.razor. The design system components handle their
   own internals; everything here is composition, the responsive bed table, and
   the trend colours, all built on design tokens rather than fixed values. */

.site-details-heading {
	/* goa-modal's header is a flex row whose heading slot is sized to its content, and the slot
	   cannot be stretched from outside the shadow DOM, so the badge would sit immediately beside
	   the title. Claiming a definite width pushes the badge to the right; the width is the pane
	   (40rem) less its 1.5rem padding either side and the 3.5rem close button, so the X keeps the
	   same margin from the right edge as the title has from the left. The viewport term keeps the
	   header from overflowing once the pane is narrower than its maximum. */
	width: min(33rem, calc(100vw - 9rem));

	/* goa-modal nudges the heading slot down by 2xs, which leaves the badge sitting above the
	   centre of the taller close button. Cancelling that nudge puts them on one centred row. */
	margin-top: calc(-1 * var(--goa-space-2xs, 0.25rem));
}

.site-details-heading-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--goa-space-m, 1rem);

	/* Match the close button's height so the title, the badge and the X share a centre line. */
	min-height: 2.5rem;
}

.site-details-title {
	font: var(--goa-typography-heading-s);
	letter-spacing: var(--goa-typography-heading-s-letter-spacing, normal);
	min-width: 0;
}

/* Matched to the reference: a 24px pill with 14px text. goa-badge is driven entirely by these
   custom properties, which inherit through its shadow root, so setting them is enough — no
   transform or shadow-piercing selector needed. */
.site-details-heading goa-badge {
	--goa-badge-height: 24px;
	--goa-badge-padding: 0 var(--goa-space-xs, 0.5rem);
	--goa-badge-font-size: var(--goa-font-size-2, 0.875rem);
	--goa-badge-line-height: var(--goa-line-height-2, 1.375rem);
}

/* goa-text ignores its `size` prop in the vendored 2.5.0 bundle — the class that carries the
   typography never reaches the rendered element — so the type ramp is applied here from the same
   design tokens goa-text would have used.

   The ramp below follows the annotated design:
     • title                        Heading/small     24px / 28lh  → heading-s
     • subtitle, table rows, list
       items, callout, footnote     Body/small        16px / 22lh  → body-s
     • section headings             Heading/2XSmall   16px / 22lh  → heading-2xs
     • "Bed data updated …"         custom            12px / 20lh  → font-size-1 / line-height-1
     • table head, callout label    custom + 10% kern 12px / 20lh  → same, letter-spacing .1em
   The last two have no composed typography token, so they are assembled from the size and
   line-height tokens directly rather than hard-coded. */

/* Spacing uses only GoA spacing tokens:
     • 2xs (4px)  title → subtitle
     • s   (12px) every section gap — either side of each divider, section head → table,
                  table → callout
     • m   (16px) table header → first row, so the column labels read as a group heading
     • xs  (8px)  between bed rows, and column heading → first list item
     • l   (24px) the gutter between the two bottom columns (goa-grid gap)
   Section gaps sit on the goa-divider / goa-table mt|mb props in the markup; only the gaps those
   props cannot reach are set here. */

.site-details-subtitle {
	font: var(--goa-typography-body-s);
	color: var(--goa-color-text-secondary, #666);

	/* Sits directly under the title inside the heading slot, so the annotated 2xs gap applies
	   cleanly without fighting goa-modal's header padding. */
	margin: var(--goa-space-2xs, 0.25rem) 0 0;
}

.site-details-h3 {
	font: var(--goa-typography-heading-2xs);
	letter-spacing: var(--goa-typography-heading-2xs-letter-spacing, normal);
	margin: 0;

	/* app.css carries a legacy global `h3 { font-size: 30px !important }`, which outranks the
	   shorthand above; this restates the token's size so the design system's ramp wins here
	   without disturbing headings elsewhere. */
	font-size: var(--goa-font-size-3, 1rem) !important;
}

.site-details-h3--column {
	margin-bottom: var(--goa-space-xs, 0.5rem);
}

/* These set a size off the type scale rather than a whole typography token, so they would
   otherwise inherit whatever family their host page uses — the How To page sets a condensed face
   on its sections, which silently changed the figure's small print. Naming the family keeps this
   view identical wherever it is embedded. */
.site-details-meta {
	font-family: var(--goa-font-family-sans, acumin-variable, helvetica-neue, arial, sans-serif);
	font-size: var(--goa-font-size-1, 0.75rem);
	line-height: var(--goa-line-height-1, 1.25rem);
	font-weight: var(--goa-font-weight-regular, 400);
	color: var(--goa-color-text-secondary, #666);
}

.site-details-footnote {
	font: var(--goa-typography-body-s);
	color: var(--goa-color-text-secondary, #666);
	margin: 0;
}

/* Named query container for everything below the modal's heading, so the bed table can respond to
   the pane's width instead of the window's. See the @container rule further down. */
.site-details-body {
	container-type: inline-size;
	container-name: site-details;
}

/* Mirrors what goa-table's own document-side rules give the live view's cells, so the figure's
   inner lines and cell insets match it exactly. Only the declarations the plain table cannot
   inherit are repeated; the typography and vertical rhythm already come from .site-details-beds. */
.site-details-beds--static {
	width: 100%;
	border-collapse: collapse;
	margin: var(--goa-space-s, 0.75rem) 0;
}

.site-details-beds--static th,
.site-details-beds--static td {
	padding-left: var(--goa-space-m, 1rem);
	padding-right: var(--goa-space-m, 1rem);
	vertical-align: top;
	box-sizing: border-box;
}

.site-details-beds--static td {
	border-bottom: var(--goa-table-data-border, 1px solid var(--goa-color-greyscale-200));
	min-height: var(--goa-table-height-data, var(--goa-space-2xl));
}

/* The How To page shows this view as a static figure rather than a modal, because goa-modal can
   only render as an overlay. Everything inside is the real thing; only the pane is substituted,
   reproducing goa-modal's own 40rem width and 1.5rem inset, with a plain border in place of the
   dialog's drop shadow since nothing is floating above the page here. */
.site-details--static {
	max-width: 40rem;
	margin: 0 auto;
}

.site-details--static .site-details-pane {
	background: var(--goa-color-greyscale-white, #fff);
	border: var(--goa-border-width-s, 1px) solid var(--goa-color-greyscale-200, #dcdcdc);
	border-radius: var(--goa-border-radius-m, 4px);
	padding: var(--goa-space-s, 0.75rem) var(--goa-space-l, 1.5rem) var(--goa-space-m, 1rem);
}

/* The live heading claims a fixed width to push the badge clear of goa-modal's close button.
   There is no close button here, so the row simply fills the pane. */
.site-details--static .site-details-heading {
	width: auto;
	margin-top: 0;
}

/* The same substitution for the earlier site modal, which the How To page shows as a figure when
   that is the view the dashboard opens. Left to itself the Bootstrap grid inside it fills the
   whole page, so the pane is given the dialog's own width, taken from .modal-lg above, and
   centred. At that width the grid still splits into two columns exactly as the real dialog does. */
.site-modal--static {
	max-width: min(800px, 95vw);
	margin: 0 auto;
	background: var(--goa-color-greyscale-white, #fff);
	border: var(--goa-border-width-s, 1px) solid var(--goa-color-greyscale-200, #dcdcdc);
	border-radius: var(--goa-border-radius-m, 4px);
	padding: var(--goa-space-s, 0.75rem) var(--goa-space-l, 1.5rem) var(--goa-space-m, 1rem);
}

.site-details-heading goa-badge {
	flex: 0 0 auto;
	margin: 0;
}

.site-details-section-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--goa-space-xs, 0.5rem) var(--goa-space-s, 0.75rem);
}

.site-details .ta-right {
	text-align: right;
}

/* goa-table ships a filled header band; the site view wants the same columns rendered as plain
   labels over the rows, so the fill is dropped and the header reduced to small caps. */

.site-details-beds thead tr,
.site-details-beds th {
	background: none;
	background-color: transparent;
}

/* The column labels head the group, so they are separated from the first row by the same rule the
   rows use between themselves — without it the labels float above an unbounded block. */
.site-details-beds th {
	border-bottom: var(--goa-table-data-border, 1px solid var(--goa-color-greyscale-200));
	font-family: var(--goa-font-family-sans, acumin-variable, helvetica-neue, arial, sans-serif);
	font-size: var(--goa-font-size-1, 0.75rem);
	line-height: var(--goa-line-height-1, 1.25rem);
	font-weight: var(--goa-font-weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--goa-color-text-secondary, #666);
	white-space: nowrap;
	padding-top: 0;
	padding-bottom: var(--goa-space-m, 1rem);
}

/* Rows sit on an xs rhythm, but the header is separated from the first row by a full m on each
   side, so the column labels read as a heading for the group rather than as another row. */
.site-details-beds td {
	font: var(--goa-typography-body-s);
	padding-top: var(--goa-space-xs, 0.5rem);
	padding-bottom: var(--goa-space-xs, 0.5rem);
}

.site-details-beds tbody tr:first-child td {
	padding-top: var(--goa-space-m, 1rem);
}

.site-details-beds tbody tr:last-child td {
	padding-bottom: 0;
}

/* The bed type reads as the row's label, so it carries the same bold as the availability figure
   beside it; the 7-day average and its trend line stay regular so the eye lands on today's number
   and the row label first. */
.site-details-beds td:first-child {
	font-weight: var(--goa-font-weight-bold, 700);
}

.site-details-strong {
	font-weight: var(--goa-font-weight-bold, 700);
}

.site-details-muted {
	color: var(--goa-color-text-secondary, #666);
}

/* The 7-day average cell held a stacked figure and verdict; it is now the figure alone, so the
   stacking wrapper and the verdict chip below are unused. Both are kept, commented, because the
   classification behind the chip still exists in OccupancyStateRules.
.site-details-avg {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.125rem;
}
*/

/* The 7-day average is supporting context, not the headline number, so it stays at regular
   weight and lets the bold "available today" count carry the emphasis. */
.site-details-avg-value {
	font-weight: var(--goa-font-weight-regular, 400);
}

/*
.site-details-trend {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font: var(--goa-typography-body-s);
	white-space: nowrap;
}

.site-details-trend.trend-bad     { color: var(--goa-color-emergency-default, #ec040b); }
.site-details-trend.trend-good    { color: var(--goa-color-success-default, #00853f); }
.site-details-trend.trend-neutral { color: var(--goa-color-text-secondary, #666); }

.site-details-trend.trend-neutral goa-icon {
	transform: rotate(45deg);
}
*/

.site-details-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 2XS above and below each row, so consecutive rows sit 8px apart — the same gap the headings
   keep from their list. Applied to both columns so the offerings and contact lists stay on a
   shared rhythm when they sit side by side. */
.site-details-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--goa-space-xs, 0.5rem);
	padding: var(--goa-space-2xs, 0.25rem) 0;
	font: var(--goa-typography-body-s);
	overflow-wrap: anywhere;
}

.site-details-list goa-icon {
	flex: 0 0 auto;
	color: var(--goa-color-interactive-default, #0070c4);
	margin-top: 0.125rem;
}

/* SiteIcon rows sit beside goa-icon rows in the same list, so they take the same size, colour and
   optical offset. The size is the token goa-icon itself resolves: its `medium` maps to
   --goa-icon-size-l, not --goa-icon-size-m, so reading the token by name keeps the two columns
   matched rather than depending on a literal that has to be kept in step by hand. If the leading
   goa-icons in these lists ever change size again, change this with them. The default help
   cursor is dropped: in the modal the icon labels its row rather than standing in for it, so there
   is no tooltip to invite. */
.site-details-list .site-icon {
	--site-icon-size: var(--goa-icon-size-l, 1.5rem);
	flex: 0 0 auto;
	color: var(--goa-color-interactive-default, #0070c4);
	margin-top: 0.125rem;
	cursor: inherit;
}

/* Holds the icon column open for an offering that deliberately has no icon, so its label stays in
   line with the labels above and below it rather than sliding left into the icon's place. Matches
   the SiteIcon width above exactly, so the two stay in step if that token ever changes. */
.site-details-list .site-detail-icon-none {
	flex: 0 0 var(--goa-icon-size-l, 1.5rem);
	width: var(--goa-icon-size-l, 1.5rem);
}

.site-details-address {
	display: flex;
	flex-direction: column;
}

/* AlertBox is shared with the dashboard notice, so its body size is set here scoped to the modal
   rather than on .alert-box-text itself — the callout follows this view's Body/small ramp without
   changing the notice on the site list. The global .alert-box bottom margin is also dropped here
   so the gap below the callout comes from the divider's s like every other section — the
   component's own shadow-root margin is cleared by passing MarginBottom="none". 14/22 keeps the
   sentence to two lines at this pane width, and the secondary grey matches the reference — the
   selector carries the container and .alert-box to outrank the per-type colour rule above. */
.site-details goa-container.alert-box .alert-box-text {
	font-family: var(--goa-font-family-sans, acumin-variable, helvetica-neue, arial, sans-serif);
	font-size: var(--goa-font-size-2);
	line-height: var(--goa-line-height-2);
	color: var(--goa-color-text-secondary, #6f6f6f);
}

.site-details .alert-box {
	margin-bottom: 0;
}

/* Responsive bed table: once the pane is too narrow to hold three columns, each row becomes its
   own stacked block with the column header repeated as an inline label, so the columns never force
   horizontal scrolling.

   The trigger is the width of .site-details-body rather than of the viewport. The table lives
   inside a 40rem modal, so its available width is roughly 9rem less than the window's — measuring
   the window would keep the three-column layout long after the pane had stopped being able to
   hold it, which is exactly how the 7-day average column ended up cut off at the smallest window
   size. Querying the container measures the space the table actually has. */

@container site-details (max-width: 30rem) {
	.site-details-beds thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.site-details-beds tr {
		display: block;
		padding: var(--goa-space-xs, 0.5rem) 0;
		border-bottom: 1px solid var(--goa-color-greyscale-200, #dcdcdc);
	}

	.site-details-beds td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--goa-space-s, 0.75rem);
		border: none;
		padding: 0.25rem 0;
		text-align: left !important;
	}

	.site-details-beds td::before {
		content: attr(data-label);
		font-family: var(--goa-font-family-sans, acumin-variable, helvetica-neue, arial, sans-serif);
		font-size: var(--goa-font-size-1, 0.75rem);
		text-transform: uppercase;
		letter-spacing: 0.4px;
		color: var(--goa-color-text-secondary, #666);
		flex: 0 0 auto;
	}

	.site-details-beds td[data-label="Bed type"]::before {
		display: none;
	}

	/* Retired with the stacked 7-day average cell.
	.site-details-avg {
		align-items: flex-end;
	}
	*/
}