:root {
	/* CrewMate professional clinical palette */
	--bg: #f4f8fb;
	--bg-accent: #e7f1f7;
	--surface: #ffffff;
	--surface-2: #f8fbfd;
	--surface-3: #edf6fb;
	--line: #dbe6ed;
	--line-strong: #b8cbd7;
	--text: #12212c;
	--muted: #5d7180;
	--muted-2: #8b9ba7;
	--text-secondary: var(--muted);
	--text-2: var(--muted);
	--card: var(--surface);
	--accent: var(--primary-2);

	/* Brand */
	--primary: #075985;
	--primary-2: #0e7490;
	--primary-3: #38bdf8;
	--primary-soft: #e5f4fb;
	--primary-soft-2: #d8eef8;

	/* Clinical states */
	--success: #15803d;
	--success-soft: #e9f7ee;
	--warning: #a16207;
	--warning-soft: #fff7e6;
	--danger: #be3144;
	--danger-soft: #fff1f3;

	/* Layout */
	--radius: 10px;
	--radius-sm: 7px;
	--radius-xs: 4px;
	--glass: rgba(255, 255, 255, 0.78);
	--glass-strong: rgba(255, 255, 255, 0.9);

	/* Clinical chip — selected state (NHS blue accent) */
	--chip-selected-bg: #dbeeff;
	--chip-selected-border: #005eb8;
	--chip-selected-text: #003087;
	--shadow: 0 18px 44px rgba(11, 45, 77, 0.08);
	--shadow-soft: 0 8px 24px rgba(11, 45, 77, 0.055);
	--focus: 0 0 0 4px rgba(14, 116, 144, 0.16);

	/* Typography */
	--font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

html,
body {
	width: 100%;
	overflow-x: hidden;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/* BASE STYLES — Reset, typography, global element defaults */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background: linear-gradient(180deg, #f9fcfe 0%, var(--bg) 42%, #eef5f9 100%);
	color: var(--text);
	font-family: var(--font);
	padding-bottom: max(96px, env(safe-area-inset-bottom));
}

button,
input,
textarea,
select {
	font: inherit;
}

button {
	-webkit-appearance: none;
	appearance: none;
}

button,
.section-card,
.square-btn,
.tab,
input,
select,
textarea {
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		transform 0.15s ease,
		box-shadow 0.2s ease;
}

button:active,
.square-btn:active,
.tab:active {
	transform: scale(0.985);
}

button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
	outline: none;
	box-shadow: var(--focus);
}

/* LAYOUT — App shell, header bar, tab navigation */

/* Header */
.app-header {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: calc(11px + env(safe-area-inset-top)) 18px 11px;
	background: rgba(255, 255, 255, 0.78);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
	backdrop-filter: blur(26px) saturate(180%);
	-webkit-backdrop-filter: blur(26px) saturate(180%);
	border-bottom: 1px solid rgba(215, 228, 236, 0.72);
}

.logo {
	width: 50px;
	height: 50px;
	border-radius: 14px;
	object-fit: cover;
	box-shadow:
		0 12px 28px rgba(7, 89, 133, 0.18),
		0 1px 0 rgba(255, 255, 255, 0.82) inset;
	border: 1px solid rgba(255, 255, 255, 0.92);
	flex: 0 0 auto;
}

.brand-mark {
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: var(--primary-soft);
	display: grid;
	place-items: center;
	color: var(--primary);
	border: 1px solid var(--line);
	flex: 0 0 auto;
}

.brand-mark svg {
	width: 28px;
	height: 28px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.app-header h1 {
	margin: 0;
	font-size: clamp(19px, 2vw, 23px);
	font-weight: 800;
	letter-spacing: 0;
	color: #0b2d4d;
	line-height: 1.05;
}

.app-header p {
	margin: 3px 0 0;
	font-size: 12.5px;
	color: #687b89;
	font-weight: 600;
	line-height: 1.25;
}

.ghost-button {
	margin-left: auto;
	border: 1px solid rgba(184, 203, 215, 0.72);
	background: rgba(255, 255, 255, 0.74);
	color: var(--primary);
	border-radius: 999px;
	padding: 9px 15px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(11, 45, 77, 0.055);
	white-space: nowrap;
}

.ghost-button:hover {
	background: var(--primary-soft);
	border-color: var(--primary-2);
}

/* Tabs */
.tabs {
	position: sticky;
	top: 77px;
	z-index: 25;
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	background: rgba(238, 246, 250, 0.78);
	backdrop-filter: blur(24px) saturate(170%);
	-webkit-backdrop-filter: blur(24px) saturate(170%);
	border-bottom: 1px solid rgba(215, 228, 236, 0.72);
	overflow-x: auto;
	scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
	display: none;
}

.tab {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 108px;
	min-height: 54px;
	border: 1px solid rgba(216, 230, 239, 0.86);
	background: rgba(255, 255, 255, 0.72);
	color: var(--text);
	border-radius: 8px !important;
	padding: 6px 8px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.82) inset;
	gap: 5px;
	white-space: normal;
	line-height: 1.2;
	text-align: center;
}

.tab:hover {
	border-color: var(--line-strong);
	background: #fff;
	color: var(--primary);
}

.tab.active {
	color: #fff;
	background: linear-gradient(145deg, #075985 0%, #0e7490 100%);
	border-color: rgba(255, 255, 255, 0.24);
	box-shadow:
		0 10px 24px rgba(7, 89, 133, 0.2),
		0 1px 0 rgba(255, 255, 255, 0.2) inset;
	z-index: 2;
	transform: none;
}

main {
	max-width: 1080px;
	margin: 0 auto;
	padding: 20px 16px 10px;
}

.panel {
	display: none;
}

.panel.active {
	display: block;
	animation: panelIn 0.18s ease;
}

@keyframes panelIn {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.notice {
	background: rgba(238, 248, 252, 0.78);
	border: 1px solid rgba(201, 228, 240, 0.9);
	color: #164e63;
	border-radius: 8px;
	padding: 13px 16px;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.55;
	margin-bottom: 6px;
	box-shadow: var(--shadow-soft);
}

/* COMPONENTS — Cards, accordions, form controls */

/* Cards and accordions */
.section-card {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(217, 225, 231, 0.92) !important;
	border-radius: 8px !important;
	box-shadow:
		0 12px 30px rgba(11, 45, 77, 0.045),
		0 1px 0 rgba(255, 255, 255, 0.88) inset !important;
	margin: 0 0 10px !important;
	overflow: hidden;
	position: relative;
}

.section-card:first-child {
	border-radius: 8px !important;
}

.section-card:last-child {
	border-radius: 8px !important;
}

.section-card:not(:last-child) {
	border-bottom: 1px solid rgba(217, 225, 231, 0.92) !important;
}

.section-card:hover {
	background: var(--glass-strong);
	box-shadow:
		0 14px 34px rgba(11, 45, 77, 0.06),
		0 1px 0 rgba(255, 255, 255, 0.92) inset !important;
}

.section-card > summary {
	list-style: none;
	display: grid;
	grid-template-columns: 40px 1fr auto auto;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding: 10px 14px;
	cursor: pointer;
	user-select: none;
	background: transparent;
}

.section-card > summary::-webkit-details-marker {
	display: none;
}

.section-card > summary::after {
	content: "";
	width: 10px;
	height: 10px;
	border-right: 2.5px solid var(--muted-2);
	border-bottom: 2.5px solid var(--muted-2);
	transform: rotate(45deg);
	transition: transform 0.18s ease;
	margin-left: 4px;
	flex: 0 0 auto;
}

.section-card[open] > summary::after {
	transform: rotate(225deg);
}

.section-card summary span {
	font-size: 16px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: 0;
	color: #123044;
}

.section-card summary small {
	margin-left: auto;
	color: var(--primary);
	background: #eaf6fb;
	border: 1px solid #cce5f0;
	border-radius: 8px;
	padding: 3px 7px;
	font-weight: 700;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.section-body {
	border-top: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.72);
	padding: 12px 14px !important;
}

.nested-sections {
	padding: 0 14px 14px;
}

.nested-sections .section-card {
	box-shadow: none !important;
	margin: 12px 0 0 !important;
	background: rgba(255, 255, 255, 0.74);
}

/* Forms */
.field-label {
	display: block;
	margin: 11px 0 5px;
	color: #526879;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.01em;
}

.field-label:first-child {
	margin-top: 0;
}

.field-hint,
.output-hint {
	margin: 0 0 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--muted);
	line-height: 1.55;
}

#conveyedFields > .field-label {
	margin-top: 16px;
}

#conveyTransferGrid {
	margin-bottom: 8px;
}

input,
select,
textarea {
	width: 100%;
	border: 1px solid rgba(204, 214, 221, 0.92) !important;
	background: rgba(248, 251, 253, 0.92);
	border-radius: 8px !important;
	color: var(--text);
	padding: 12px 13px;
	outline: none;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.78),
		0 1px 0 rgba(255, 255, 255, 0.65);
}

textarea {
	resize: vertical;
	line-height: 1.6;
	min-height: 56px;
}

input::placeholder,
textarea::placeholder {
	color: #9baab5;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--primary-2);
	background: #fff;
	box-shadow:
		var(--focus),
		inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

select {
	appearance: none;
	-webkit-appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--primary) 50%),
		linear-gradient(135deg, var(--primary) 50%, transparent 50%);
	background-position:
		calc(100% - 18px) 50%,
		calc(100% - 13px) 50%;
	background-size:
		5px 5px,
		5px 5px;
	background-repeat: no-repeat;
	padding-right: 34px;
}

.grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.compact {
	gap: 9px 14px;
	margin-top: 12px;
}

.split {
	display: grid;
	grid-template-columns: 1fr 132px;
	gap: 4px;
}

.hidden {
	display: none !important;
}

.check-row {
	display: flex;
	align-items: center;
	gap: 4px;
	font-weight: 700;
	color: var(--text);
	line-height: 1.35;
}

.check-row input {
	width: 19px;
	height: 19px;
	accent-color: var(--primary-2);
	flex: 0 0 auto;
}

/* CLINICAL CHIP GRIDS — Square multi-select and radio chip buttons */

/* Square clinical buttons */
.square-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px;
}

.square-grid > :last-child:nth-child(odd) {
	grid-column: auto;
}

/* Primary survey (ABCDENT) chips stay in a strict 2-col grid — no orphan spanning */
.pabc-grid > :last-child:nth-child(odd) {
	grid-column: unset;
}

.abdo-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 8px;
}
.abdo-grid > * {
	grid-column: auto !important;
	grid-row: auto !important;
}

.abdo-region-name,
.ausc-region-name {
	display: block;
	font-size: 13px;
	font-weight: 700;
}
.abdo-region-tags,
.ausc-region-tags {
	display: block;
	font-size: 10px;
	color: var(--primary);
	margin-top: 2px;
	font-weight: 600;
	min-height: 14px;
}
.abdo-region-btn.abdo-active,
.ausc-region-btn.ausc-active {
	border-color: var(--primary-2) !important;
	border-width: 2px !important;
}
.abdo-finding-panel {
	background: var(--chip-selected-bg);
	border: 2px solid var(--chip-selected-border);
	border-radius: 8px;
	padding: 10px 12px;
	margin-top: 8px;
}
.abdo-finding-label,
.ausc-finding-label {
	margin: 0 0 2px;
	font-size: 12px;
	color: #0f5878;
	font-weight: 700;
}
.abdo-clear-btn,
.ausc-clear-btn {
	margin-top: 8px;
	font-size: 11.5px;
	color: var(--danger);
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px 0;
	font-weight: 600;
	display: block;
}

/* Auscultation region grid — 2-col, Trachea spans full width */
.ausc-region-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}
.ausc-region-btn.ausc-full {
	grid-column: 1 / -1;
}
.ausc-finding-panel {
	background: var(--primary-soft);
	border: 1px solid #9ed2e8;
	border-radius: 8px;
	padding: 10px 12px;
	margin-top: 8px;
}
/* ECG lead grid — column-first mirrors standard 12-lead layout (I/II/III, aVR/aVL/aVF, V1-3, V4-6) */
#ecgLeadsGrid {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(3, auto);
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}

@media (max-width: 480px) {
	#ecgLeadsGrid {
		grid-auto-flow: row;
		grid-template-rows: unset;
	}
}

/* ECG finding chips — slightly smaller for dense grid */
.ecg-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Pain score 0–10 tap grid */
.pain-score-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 5px;
	margin-top: 4px;
}
@media (min-width: 500px) {
	.pain-score-grid {
		grid-template-columns: repeat(11, 1fr);
	}
}
.pain-score-btn {
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.86);
	color: #223847;
	border-radius: 8px;
	min-height: 44px;
	padding: 6px 2px;
	font-weight: 800;
	font-size: 16px;
	text-align: center;
	cursor: pointer;
	transition:
		background 0.12s,
		border-color 0.12s,
		color 0.12s;
}
.pain-score-btn:hover {
	border-color: var(--line-strong);
}
.pain-score-btn[data-score="0"].selected,
.pain-score-btn[data-score="1"].selected,
.pain-score-btn[data-score="2"].selected,
.pain-score-btn[data-score="3"].selected {
	background: linear-gradient(180deg, #f0fdf4, #dcfce7);
	border-color: #86efac;
	color: #15803d;
}
.pain-score-btn[data-score="4"].selected,
.pain-score-btn[data-score="5"].selected,
.pain-score-btn[data-score="6"].selected {
	background: linear-gradient(180deg, #fffbeb, #fef3c7);
	border-color: #fcd34d;
	color: #92400e;
}
.pain-score-btn[data-score="7"].selected,
.pain-score-btn[data-score="8"].selected,
.pain-score-btn[data-score="9"].selected,
.pain-score-btn[data-score="10"].selected {
	background: linear-gradient(180deg, #fff1f2, #ffe4e6);
	border-color: #fca5a5;
	color: #b91c1c;
}

.square-btn {
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.86);
	color: #223847;
	border-radius: 8px !important;
	min-height: 46px;
	padding: 8px 12px;
	text-align: left;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	cursor: pointer;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset !important;
}

.square-btn:hover {
	border-color: var(--line-strong);
	background: var(--glass-strong);
	box-shadow: 0 8px 18px rgba(15, 45, 68, 0.07) !important;
}

.square-btn.selected,
.abc-chip.selected,
.convey-chip.selected {
	background: var(--chip-selected-bg);
	border-color: var(--chip-selected-border);
	border-width: 2px;
	color: var(--chip-selected-text);
	font-weight: 700;
}

.square-btn.abnormal,
.abc-chip.abnormal,
.convey-chip.abnormal {
	background: var(--danger-soft);
	border-color: #e57282;
	border-width: 2px;
	color: var(--danger);
	font-weight: 700;
}

/* Radio chip groups (single-select tap chips) */
.radio-chip-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 2px;
}
.radio-chip {
	flex: 1 1 80px;
	min-width: 0;
	min-height: 40px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.86);
	color: #223847;
	border-radius: 8px;
	padding: 7px 10px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	cursor: pointer;
	text-align: center;
	white-space: normal;
	transition:
		background 0.1s,
		border-color 0.1s,
		color 0.1s;
}
.radio-chip:hover {
	border-color: var(--line-strong);
	background: var(--glass-strong);
}
.radio-chip small {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: var(--muted);
	margin-top: 2px;
}
.radio-chip.selected small {
	color: #2e88b0;
}
.radio-chip.selected {
	background: var(--chip-selected-bg);
	border-color: var(--chip-selected-border);
	border-width: 2px;
	color: var(--chip-selected-text);
	font-weight: 700;
}
[data-detail-wrap] .radio-chip.selected {
	background: #fff3cd;
	border-color: #e6a817;
	border-width: 2px;
	color: #7d4e00;
	font-weight: 700;
}
/* Response category chips — coloured when selected */
[data-radio-group="hpcCategory"] [data-value="C1"].selected,
[data-radio-group="hpcCategory"] [data-value="C4"].selected {
	background: #6a1b9a;
	border-color: #4a148c;
	color: #fff;
}
[data-radio-group="hpcCategory"] [data-value="C2"].selected {
	background: #c62828;
	border-color: #b71c1c;
	color: #fff;
}
[data-radio-group="hpcCategory"] [data-value="C3"].selected {
	background: #e65100;
	border-color: #bf360c;
	color: #fff;
}

/* Wrapping chip grid — equal-width columns that wrap */
.radio-chip-group.wrap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 7px;
}
.radio-chip-group.wrap-grid .radio-chip {
	white-space: normal;
	text-align: left;
	padding: 8px 10px;
	flex: unset;
}
/* PC chip grid — more compact, many items */
.radio-chip-group.pc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 6px;
}
.radio-chip-group.pc-grid .radio-chip {
	white-space: normal;
	text-align: left;
	font-size: 13px;
	padding: 8px 10px;
	flex: unset;
}
/* FLACC chip rows */
.flacc-chip-row {
	display: flex;
	align-items: stretch;
	gap: 6px;
	margin-bottom: 6px;
}
.flacc-chip-row:last-child {
	margin-bottom: 0;
}
.flacc-chip-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
	min-width: 82px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding: 6px 0;
}
.flacc-chip-options {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px;
	flex: 1;
}
.flacc-chip {
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.86);
	color: #223847;
	border-radius: 8px;
	min-height: 46px;
	padding: 7px 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	text-align: left;
	transition:
		background 0.1s,
		border-color 0.1s,
		color 0.1s;
}
.flacc-chip .flacc-score {
	font-size: 16px;
	font-weight: 800;
	display: block;
	color: #1a3a50;
	line-height: 1.1;
	margin-bottom: 2px;
}
.flacc-chip .flacc-desc {
	font-size: 11px;
	font-weight: 500;
	color: var(--muted);
	display: block;
}
.flacc-chip.selected {
	background: var(--chip-selected-bg);
	border-color: var(--chip-selected-border);
	border-width: 2px;
	color: var(--chip-selected-text);
}
.flacc-chip.selected .flacc-score {
	color: #0a4a6e;
}
.flacc-chip.selected .flacc-desc {
	color: #1e6fa0;
}
/* Faces scale chip grid */
.faces-chip-group {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 7px;
}
.faces-chip {
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.86);
	border-radius: 8px;
	min-height: 54px;
	padding: 7px 6px;
	text-align: center;
	cursor: pointer;
	transition:
		background 0.1s,
		border-color 0.1s;
}
.faces-chip .faces-score {
	font-size: 18px;
	font-weight: 800;
	display: block;
	color: #1a3a50;
}
.faces-chip .faces-label {
	font-size: 11px;
	font-weight: 500;
	color: var(--muted);
	display: block;
	margin-top: 3px;
}
.faces-chip.selected {
	background: var(--chip-selected-bg);
	border-color: var(--chip-selected-border);
	border-width: 2px;
	color: var(--chip-selected-text);
}
.faces-chip.selected .faces-score {
	color: var(--chip-selected-text);
}

/* Body map */
.body-map-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	align-items: stretch;
}

.body-map-panel,
.selected-panel {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 14px;
	box-shadow: var(--shadow-soft);
}

.selected-panel {
	grid-column: 1 / -1;
}

.body-map-label {
	display: block;
	text-align: center;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--muted);
	margin: 0 0 8px;
	padding: 3px 0;
	border-bottom: 1px solid var(--line);
}

.map-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

.mini-tab {
	flex: 1;
	border: 1px solid rgba(184, 203, 215, 0.82);
	background: rgba(255, 255, 255, 0.82);
	border-radius: 8px;
	padding: 8px;
	font-weight: 800;
	color: var(--muted);
	cursor: pointer;
}

.mini-tab.active {
	background: linear-gradient(145deg, #0e7490, #075985);
	border-color: rgba(255, 255, 255, 0.24);
	color: #fff;
	box-shadow: 0 6px 16px rgba(7, 89, 133, 0.18);
}

.body-map {
	width: 100%;
	max-width: 210px;
	display: block;
	margin: 0 auto;
}

@media (min-width: 600px) {
	.body-map {
		max-width: 260px;
	}
}

@media (max-width: 599px) {
	.body-map-layout {
		grid-template-columns: 1fr;
	}

	.selected-panel {
		grid-column: auto;
	}
}

.body-part {
	fill: #dfeaf1;
	stroke: #9ab2c0;
	stroke-width: 1.5;
	cursor: pointer;
	transition:
		fill 0.15s ease,
		stroke 0.15s ease,
		opacity 0.15s ease;
}

.body-part:hover {
	fill: #c8dfe8;
}

.body-part.site {
	fill: #38bdf8;
	stroke: #075985;
}

.body-part.radiation {
	fill: #f4c16c;
	stroke: var(--warning);
}

.selected-panel {
	min-height: 160px;
}

.selected-tags {
	min-height: 34px;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	color: var(--muted);
	font-weight: 700;
}

.tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border-radius: 8px;
	padding: 6px 10px;
	background: var(--primary);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	box-shadow: 0 4px 10px rgba(7, 89, 133, 0.18);
}

.tag.radiation {
	background: var(--warning);
	box-shadow: 0 4px 10px rgba(161, 98, 7, 0.16);
}

.tag button {
	border: 0;
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	cursor: pointer;
	font-weight: 900;
	line-height: 1;
}

/* ABCDE and vitals */
.vital-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	margin: 13px 0;
}

.vital {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 9px;
	box-shadow: 0 4px 12px rgba(15, 45, 68, 0.035);
}

.vital label {
	display: block;
	font-size: 11px;
	font-weight: 800;
	color: var(--primary);
	margin-bottom: 4px;
	text-align: center;
}

.vital input {
	text-align: center;
	padding: 6px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line-strong);
	border-radius: 0;
	font-weight: 800;
	box-shadow: none;
}

.ros-header-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
}

.status-pill {
	border-radius: 8px;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 800;
	background: var(--success-soft);
	color: var(--success);
	border: 1px solid #bee4ca;
}

.status-pill.flagged {
	background: var(--danger-soft);
	color: var(--danger);
	border-color: #efb3bc;
}

/* Actions */
.toolbar {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.primary-action,
.secondary-action {
	border-radius: 8px;
	padding: 9px 16px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	border: 1px solid transparent;
}

.primary-action {
	background: linear-gradient(145deg, #0e7490 0%, #075985 58%, #0b2d4d 100%);
	color: #fff;
	box-shadow:
		0 12px 26px rgba(7, 89, 133, 0.18),
		0 1px 0 rgba(255, 255, 255, 0.18) inset;
}

.primary-action:hover {
	box-shadow: 0 12px 26px rgba(7, 89, 133, 0.28);
}

.secondary-action {
	background: rgba(229, 244, 251, 0.86);
	color: var(--primary);
	border-color: rgba(200, 226, 239, 0.92);
}

.secondary-action:hover {
	background: var(--primary-soft-2);
}

/* GCS Calculator */
.gcs-panel {
	display: grid;
	gap: 10px;
	margin-top: 8px;
}
.gcs-row-label {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--text-2);
	margin: 0 0 5px;
}
.gcs-btn-row {
	display: flex;
	gap: 5px;
}
.gcs-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 7px 4px;
	border: 1.5px solid var(--line);
	border-radius: 5px;
	background: var(--card);
	cursor: pointer;
	transition:
		border-color 0.12s,
		background 0.12s;
	min-width: 0;
}
.gcs-btn:hover {
	border-color: var(--primary-3);
	background: var(--primary-soft);
}
.gcs-btn.selected {
	background: var(--chip-selected-border);
	border-color: var(--chip-selected-border);
}
.gcs-score {
	font-size: 17px;
	font-weight: 800;
	line-height: 1;
	color: var(--text);
}
.gcs-btn.selected .gcs-score {
	color: #fff;
}
.gcs-label {
	font-size: 9.5px;
	font-weight: 600;
	color: var(--text-2);
	text-align: center;
	line-height: 1.2;
	word-break: break-word;
	hyphens: auto;
}
.gcs-btn.selected .gcs-label {
	color: rgba(255, 255, 255, 0.85);
}
.gcs-tally {
	font-size: 13px;
	font-weight: 700;
	color: var(--primary);
	margin: 2px 0 0;
	min-height: 18px;
}

.socrates-group {
	border-top: 1px solid var(--line);
	padding-top: 16px;
	margin-top: 20px;
}

.socrates-group > .field-label {
	margin-top: 0;
	font-size: 15px;
	color: var(--text);
	font-weight: 800;
}

.pain-toolbar {
	margin-top: 4px;
}

/* OUTPUT & CLIPBOARD — Section output cards, copy buttons, toast */

/* Output */
.output-panel-body {
	padding: 14px 16px;
}

.output-sections {
	display: grid;
	gap: 10px;
}

.output-card {
	border: 1px solid rgba(217, 225, 231, 0.92) !important;
	border-radius: 8px !important;
	background: rgba(255, 255, 255, 0.9);
	overflow: hidden;
	box-shadow:
		0 12px 30px rgba(11, 45, 77, 0.045),
		0 1px 0 rgba(255, 255, 255, 0.88) inset !important;
	margin: 0 !important;
	position: relative;
}

.output-card:first-child {
	border-radius: 8px !important;
}

.output-card:last-child {
	border-radius: 8px !important;
}

.output-card:not(:last-child) {
	border-bottom: 1px solid rgba(217, 225, 231, 0.92) !important;
}

.output-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.7);
}

.output-card-head h3 {
	margin: 0;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--primary);
}

.output-card-head .secondary-action {
	padding: 7px 12px;
	font-size: 12px;
}

.output-snippet,
.output {
	white-space: pre-wrap;
	word-break: break-word;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	line-height: 1.6;
}

.output-snippet {
	margin: 0;
	padding: 13px;
	font-size: 12px;
	max-height: 220px;
	overflow: auto;
}

.output {
	min-height: 360px;
	background: rgba(251, 253, 254, 0.9);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 16px;
	font-size: 12.5px;
}

/* Auscultation */
.auscultation-block {
	margin-bottom: 12px;
}

.ausc-preview {
	margin: 8px 0 0;
	padding: 11px 13px;
	background: var(--primary-soft);
	border: 1px solid #c8e2ef;
	border-radius: 8px;
	font-weight: 800;
	color: #0f5878;
	font-size: 13px;
}

.ausc-entries {
	display: grid;
	gap: 7px;
	margin-top: 8px;
}

.ausc-entry {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 10px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: 8px;
	font-weight: 700;
	font-size: 13px;
}

.ausc-entry button {
	border: 0;
	background: var(--danger-soft);
	color: var(--danger);
	border-radius: 50%;
	width: 24px;
	height: 24px;
	cursor: pointer;
	font-weight: 900;
}

.repeat-drug-btn {
	background: var(--primary-soft) !important;
	color: var(--primary) !important;
	font-size: 15px;
}

/* Footer */
.site-footer {
	margin-top: 3rem;
	padding: 2rem 1.25rem;
	background: rgba(255, 255, 255, 0.72);
	border-top: 1px solid var(--line);
	color: var(--text);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
}

.footer-brand {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	justify-content: center;
	text-align: left;
	margin-bottom: 1rem;
}

.footer-logo {
	width: 54px;
	height: 54px;
	border-radius: 14px;
	object-fit: cover;
	box-shadow: 0 8px 22px rgba(7, 89, 133, 0.16);
}

.footer-brand h3 {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: 0;
	color: #0b2d4d;
}

.footer-brand p {
	margin: 0.15rem 0 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--muted);
}

.footer-intro {
	max-width: 760px;
	margin: 0 auto 1.25rem;
	text-align: center;
	line-height: 1.6;
	font-size: 0.95rem;
	color: #435766;
}

.footer-notice,
.footer-guidance {
	max-width: 840px;
	margin: 1rem auto;
	padding: 1rem;
	border-radius: 8px;
	border: 1px solid #d3e3ec;
	background: rgba(248, 252, 254, 0.86);
}

.footer-notice {
	border-color: #f1d7a8;
	background: var(--warning-soft);
}

.footer-notice h4,
.footer-guidance h4 {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 800;
	color: #0b2d4d;
}

.footer-notice p,
.footer-guidance li {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #435766;
}

.footer-notice p {
	margin: 0.5rem 0 0;
}

.footer-guidance ul {
	margin: 0.5rem 0 0;
	padding-left: 1.2rem;
}

.footer-guidance li + li {
	margin-top: 0.45rem;
}

.footer-bottom {
	max-width: 850px;
	margin: 1.25rem auto 0;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	text-align: center;
	font-size: 0.82rem;
	line-height: 1.55;
	color: #697d8c;
}

.footer-link {
	display: inline-block;
	margin-top: 0.35rem;
	color: var(--primary);
	font-weight: 700;
	text-decoration: none;
}

.footer-link:hover {
	color: #0b2d4d;
	text-decoration: underline;
}

.fe-credit {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	display: flex;
	justify-content: center;
}

.fe-credit__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	text-decoration: none;
	color: var(--muted-2);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	transition: color 0.2s ease, opacity 0.2s ease;
	opacity: 0.75;
}

.fe-credit__link:hover {
	color: var(--primary);
	opacity: 1;
}

.fe-credit__logo {
	height: 20px;
	width: auto;
	display: block;
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.fe-credit__link:hover .fe-credit__logo {
	opacity: 1;
}

.toast {
	position: fixed;
	left: 50%;
	bottom: max(105px, calc(88px + env(safe-area-inset-bottom)));
	z-index: 80;
	transform: translateX(-50%) translateY(18px);
	background: #0b2d4d;
	color: #fff;
	border-radius: 999px;
	padding: 10px 20px;
	font-weight: 800;
	opacity: 0;
	transition: 0.25s ease;
	pointer-events: none;
	box-shadow: 0 12px 30px rgba(11, 45, 77, 0.25);
}

.toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Section card icon thumbnails */
.section-card > summary::before {
	content: "";
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background-color: #e9f6fb;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

.section-card > summary .section-desc {
	display: none;
}

/* Section icon images */
.section-card[data-section-icon="pc"] > summary::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230b2d4d' stroke-width='1.8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}

.section-card[data-section-icon="hpc"] > summary::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230b2d4d' stroke-width='1.8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 4h8l1 3h3v14H4V7h3l1-3Z'/%3E%3Cpath d='M8 11h8M8 15h8'/%3E%3C/svg%3E");
}

.section-card[data-section-icon="pain"] > summary::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230b2d4d' stroke-width='1.8' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4'/%3E%3C/svg%3E");
}

.section-card[data-section-icon="hx"] > summary::before,
.section-card[data-section-icon="default"] > summary::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230b2d4d' stroke-width='1.8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M4 7h16v14H4V7Z'/%3E%3Cpath d='M12 11v6M9 14h6'/%3E%3C/svg%3E");
}

/* Tab icon base */
.tab::before {
	content: "";
	width: 22px;
	height: 22px;
	background: currentColor;
	opacity: 0.8;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

/* Stroke-based icons matching section card style — data-paeds-tab mirrors data-tab exactly */
.tab[data-tab="history"]::before,
.tab[data-paeds-tab="history"]::before {
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3h9l5 5v13H6V3Z'/%3E%3Cpath d='M15 3v6h5'/%3E%3Cpath d='M9 12h6M9 16h6M9 20h4'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3h9l5 5v13H6V3Z'/%3E%3Cpath d='M15 3v6h5'/%3E%3Cpath d='M9 12h6M9 16h6M9 20h4'/%3E%3C/svg%3E");
}

.tab[data-tab="primary"]::before,
.tab[data-paeds-tab="primary"]::before {
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3L4 6.5V12c0 4.8 3.4 8.5 8 9.5 4.6-1 8-4.7 8-9.5V6.5L12 3Z'/%3E%3Cpath d='M11 9.5v5M8.5 12h7'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3L4 6.5V12c0 4.8 3.4 8.5 8 9.5 4.6-1 8-4.7 8-9.5V6.5L12 3Z'/%3E%3Cpath d='M11 9.5v5M8.5 12h7'/%3E%3C/svg%3E");
}

.tab[data-tab="assessment"]::before,
.tab[data-paeds-tab="assessment"]::before {
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='4' width='12' height='16' rx='1.5'/%3E%3Cpath d='M9 4V3h6v1'/%3E%3Cpath d='M9 10h6M9 14h4'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='4' width='12' height='16' rx='1.5'/%3E%3Cpath d='M9 4V3h6v1'/%3E%3Cpath d='M9 10h6M9 14h4'/%3E%3C/svg%3E");
}

.tab[data-tab="plan"]::before,
.tab[data-paeds-tab="plan"]::before {
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='4' width='12' height='16' rx='1.5'/%3E%3Cpath d='M9 4V3h6v1'/%3E%3Cpath d='M8.5 11l2 2 4-4M8.5 16l2 2 4-4'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='4' width='12' height='16' rx='1.5'/%3E%3Cpath d='M9 4V3h6v1'/%3E%3Cpath d='M8.5 11l2 2 4-4M8.5 16l2 2 4-4'/%3E%3C/svg%3E");
}

.tab[data-tab="output"]::before,
.tab[data-paeds-tab="output"]::before {
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3L4 7v10l8 4 8-4V7L12 3Z'/%3E%3Cpath d='M4 7l8 4 8-4'/%3E%3Cpath d='M12 11v10'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3L4 7v10l8 4 8-4V7L12 3Z'/%3E%3Cpath d='M4 7l8 4 8-4'/%3E%3Cpath d='M12 11v10'/%3E%3C/svg%3E");
}

/* Paediatric ABCDENT section icons */
/* A — Airway: open airway tube */
.section-card[data-section-icon="p-airway"] > summary::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230b2d4d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v5'/%3E%3Cellipse cx='12' cy='10' rx='4' ry='2.5'/%3E%3Cpath d='M8 10c0 5 2 9 4 9s4-4 4-9'/%3E%3Cpath d='M9 14h6'/%3E%3C/svg%3E");
}
/* B — Breathing: lungs */
.section-card[data-section-icon="p-breathing"] > summary::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230b2d4d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5v8'/%3E%3Cpath d='M8 9c-3 0-5 2-5 5a4 4 0 0 0 4 4c2 0 3.5-1 3.5-3V9'/%3E%3Cpath d='M16 9c3 0 5 2 5 5a4 4 0 0 1-4 4c-2 0-3.5-1-3.5-3V9'/%3E%3C/svg%3E");
}
/* C — Circulation: heart with pulse */
.section-card[data-section-icon="p-circulation"] > summary::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230b2d4d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21C12 21 4 15 4 9a5 5 0 0 1 8-4 5 5 0 0 1 8 4c0 6-8 12-8 12Z'/%3E%3Cpolyline points='7 12 9.5 9.5 11.5 13.5 13.5 10 16 12'/%3E%3C/svg%3E");
}
/* D — Disability: head with brain */
.section-card[data-section-icon="p-disability"] > summary::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230b2d4d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M10 8h4M12 6v4'/%3E%3Cpath d='M7 13.5C4.5 14.5 3 16.5 3 19h18c0-2.5-1.5-4.5-4-5.5'/%3E%3C/svg%3E");
}
/* E — Exposure: magnifying glass with body */
.section-card[data-section-icon="p-exposure"] > summary::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230b2d4d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5L21 21'/%3E%3Cpath d='M8 11h6M11 8v6'/%3E%3C/svg%3E");
}
/* ENT — Ears Nose Throat: ear */
.section-card[data-section-icon="p-ent"] > summary::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230b2d4d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 10a6 6 0 1 1 12 0c0 2.5-1 4-2.5 5.5S14 18 14 20h-4'/%3E%3Cpath d='M10 16c0-2 1.5-3 2.5-4.5'/%3E%3C/svg%3E");
}
/* T — Tummy: abdomen outline */
.section-card[data-section-icon="p-tummy"] > summary::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230b2d4d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='13' rx='7' ry='8'/%3E%3Cpath d='M9 5c0-1.5 1.3-3 3-3s3 1.5 3 3'/%3E%3Cpath d='M9 13h6M12 10v6'/%3E%3C/svg%3E");
}
/* DEFG — glucose drop */
.section-card[data-section-icon="p-defg"] > summary::before {
	background-color: #fef9c3;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23854d0e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3C12 3 6 10 6 14a6 6 0 0 0 12 0c0-4-6-11-6-11Z'/%3E%3Cpath d='M9 16h6M12 13v3'/%3E%3C/svg%3E");
}
/* Paeds static section icons */
.section-card[data-section-icon="p-pat"] > summary::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230b2d4d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Cpath d='M5 21v-1a7 7 0 0 1 14 0v1'/%3E%3Ccircle cx='12' cy='7' r='6' stroke-dasharray='2 2'/%3E%3C/svg%3E");
}
.section-card[data-section-icon="p-tmt"] > summary::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230b2d4d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");
}

@media (max-width: 720px) {
	.app-header {
		padding-left: 14px;
		padding-right: 14px;
	}

	.logo {
		width: 46px;
		height: 46px;
	}

	.app-header h1 {
		font-size: 18px;
	}

	.app-header p {
		font-size: 11px;
	}

	.ghost-button {
		padding: 8px 12px;
		font-size: 12px;
	}

	.tabs {
		top: 71px;
		padding: 9px 12px;
	}

	.tab {
		min-width: 88px;
		padding: 9px 10px;
	}

	main {
		padding: 14px 12px;
	}

	.grid-2,
	.body-map-layout {
		grid-template-columns: 1fr;
	}

	.split {
		grid-template-columns: 1fr;
	}

	.vital-grid {
		grid-template-columns: 1fr;
	}

	.section-card > summary {
		grid-template-columns: 40px 1fr auto auto;
		min-height: 62px;
		padding: 10px 13px;
		gap: 11px;
	}

	.section-card > summary::before {
		width: 36px;
		height: 36px;
		border-radius: 9px;
		background-size: 20px;
	}

	.section-card summary span {
		font-size: 15px;
	}

	.section-card > summary::after {
		width: 11px;
		height: 11px;
	}
}

@media (max-width: 430px) {
	.tabs {
		top: 71px;
		padding: 9px 10px;
		gap: 8px;
	}

	.tab,
	.tab:first-child,
	.tab:last-child {
		min-width: 102px;
		height: 56px;
		font-size: 11.5px;
		padding: 6px 6px;
	}

	.tab::before {
		width: 20px;
		height: 20px;
	}
}

@media (min-width: 760px) {
	.square-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	/* Reset 2-col orphan rule; apply 3-col orphan rules */
	.square-grid > :last-child:nth-child(odd) {
		grid-column: unset;
	}
	.square-grid > :last-child:nth-child(3n + 1) {
		grid-column: 1 / -1;
	}
	.square-grid > :last-child:nth-child(3n + 2) {
		grid-column: 1 / span 2;
	}
	/* pabc-grid stays 2-col always — lock columns, cancel orphan rules */
	.pabc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.pabc-grid > :last-child:nth-child(3n + 1) {
		grid-column: unset;
	}
	.pabc-grid > :last-child:nth-child(3n + 2) {
		grid-column: unset;
	}
}

@media (min-width: 960px) {
	.square-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	/* Reset 3-col rules; apply 4-col orphan rules */
	.square-grid > :last-child:nth-child(3n + 1) {
		grid-column: unset;
	}
	.square-grid > :last-child:nth-child(3n + 2) {
		grid-column: unset;
	}
	.square-grid > :last-child:nth-child(4n + 1) {
		grid-column: 1 / -1;
	}
	.square-grid > :last-child:nth-child(4n + 2) {
		grid-column: 1 / span 3;
	}
	.square-grid > :last-child:nth-child(4n + 3) {
		grid-column: 1 / span 2;
	}
	/* pabc-grid: lock to 2-col, cancel 4-col orphan rules */
	.pabc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.pabc-grid > :last-child:nth-child(4n + 1) {
		grid-column: unset;
	}
	.pabc-grid > :last-child:nth-child(4n + 2) {
		grid-column: unset;
	}
	.pabc-grid > :last-child:nth-child(4n + 3) {
		grid-column: unset;
	}

	.site-footer {
		padding: 2.6rem 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}
}

.patient-script {
	background: rgba(248, 251, 253, 0.9);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
	color: var(--text);
	margin: 4px 0 12px;
}

/*  Dashboard */

.back-button {
	display: flex;
	align-items: center;
	gap: 6px;
	border: none;
	background: rgba(255, 255, 255, 0.46);
	color: var(--primary);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	padding: 6px 10px 6px 4px;
	border-radius: 999px;
	margin-right: 4px;
	flex-shrink: 0;
}

.back-button svg {
	width: 18px;
	height: 18px;
}

.back-button:hover {
	background: var(--primary-soft);
}

#dashboard {
	padding: 22px 16px 36px;
	max-width: 680px;
	margin: 0 auto;
}

.dashboard-intro {
	margin-bottom: 18px;
	padding: 0 2px;
}

.dashboard-intro h2 {
	margin: 0 0 4px;
	font-size: 24px;
	font-weight: 800;
	color: var(--text);
	letter-spacing: 0;
	line-height: 1.12;
}

.dashboard-intro p {
	margin: 0;
	font-size: 14px;
	color: var(--muted);
	font-weight: 500;
}

.dashboard-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px !important;
}

.disclaimer-banner {
	margin: 20px 0 8px;
	padding: 14px 16px;
	background: rgba(255, 251, 235, 0.9);
	border: 1px solid rgba(245, 158, 11, 0.86);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.disclaimer-heading {
	font-size: 13px;
	font-weight: 800;
	color: #92400e;
	margin: 0;
}
.disclaimer-body {
	font-size: 12px;
	color: #78350f;
	margin: 0;
	line-height: 1.5;
}
.disclaimer-body strong {
	font-weight: 700;
	color: #92400e;
}

.feature-card {
	background: rgba(255, 255, 255, 0.86);
	border-radius: 8px !important;
	border: 1px solid rgba(217, 225, 231, 0.92) !important;
	box-shadow:
		0 12px 30px rgba(11, 45, 77, 0.06),
		0 1px 0 rgba(255, 255, 255, 0.88) inset !important;
	margin: 0 !important;
	padding: 18px 16px 17px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	cursor: pointer;
	transition:
		transform 0.15s ease,
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		background 0.15s ease;
	-webkit-user-select: none;
	user-select: none;
	position: relative;
	overflow: hidden;
}

.feature-card:first-child {
	border-radius: 8px !important;
}

.feature-card:last-child {
	border-radius: 8px !important;
}

.feature-card:not(:last-child) {
	border-bottom: 1px solid rgba(217, 225, 231, 0.92) !important;
}

.feature-card:active {
	transform: scale(0.97);
}

.feature-card:not(.coming-soon):hover {
	border-color: rgba(56, 189, 248, 0.64) !important;
	background: var(--glass-strong);
	box-shadow:
		0 16px 36px rgba(11, 45, 77, 0.085),
		0 1px 0 rgba(255, 255, 255, 0.92) inset !important;
}

.feature-card.featured {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: center;
	padding: 22px 20px;
	background: linear-gradient(145deg, #075985 0%, #0c6d8b 52%, #0e7490 100%);
	border-color: rgba(255, 255, 255, 0.18) !important;
	box-shadow:
		0 20px 48px rgba(7, 89, 133, 0.26),
		0 1px 0 rgba(255, 255, 255, 0.2) inset !important;
	color: #fff;
}

.feature-card.featured:hover {
	background: linear-gradient(145deg, #065273 0%, #0b6880 52%, #0d7188 100%);
	border-color: transparent;
}
.feature-card.featured--paeds {
	background: linear-gradient(145deg, #0f766e 0%, #0b8498 52%, #0891b2 100%);
	box-shadow:
		0 20px 48px rgba(15, 118, 110, 0.24),
		0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
}
.feature-card.featured--paeds:hover {
	background: linear-gradient(145deg, #0d6b63 0%, #087b90 52%, #0780a3 100%);
	border-color: transparent;
}

.feature-card.coming-soon {
	cursor: default;
	opacity: 0.72;
}

.feature-card.coming-soon:active {
	transform: none;
}

.card-icon {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	flex-shrink: 0;
	background: var(--primary-soft);
	color: var(--primary);
	border: 1px solid rgba(184, 203, 215, 0.55);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.card-icon svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.feature-card.featured .card-icon {
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #ffffff;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset;
}

.card-icon.green {
	background: #e6f7ee;
	color: #15803d;
}
.card-icon.red {
	background: #fff0f0;
	color: #be3144;
}
.card-icon.purple {
	background: #f3eeff;
	color: #6d28d9;
}
.card-icon.teal {
	background: #e0f7f5;
	color: #0f766e;
}
.card-icon.amber {
	background: #fff8e1;
	color: #a16207;
}
.card-icon.orange {
	background: #fff3e0;
	color: #c2410c;
}
.card-icon.indigo {
	background: #eef0ff;
	color: #4338ca;
}
.card-icon.blue {
	background: #e8f4ff;
	color: #075985;
}

.card-body {
	flex: 1;
}

.card-title {
	margin: 0 0 3px;
	font-size: 15px;
	font-weight: 700;
	color: var(--text);
	line-height: 1.2;
	letter-spacing: 0;
}

.feature-card.featured .card-title {
	font-size: 18px;
	color: #fff;
	margin-bottom: 4px;
}

.card-desc {
	margin: 0;
	font-size: 12px;
	color: var(--muted);
	font-weight: 500;
	line-height: 1.4;
}

.feature-card.featured .card-desc {
	color: rgba(255, 255, 255, 0.78);
	font-size: 13px;
}

.card-badge {
	display: inline-flex;
	align-items: center;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0;
	padding: 3px 9px;
	border-radius: 8px;
	align-self: flex-start;
	text-transform: uppercase;
}

.card-badge.live {
	background: var(--success-soft);
	color: var(--success);
}

.card-badge.soon {
	background: var(--warning-soft);
	color: var(--warning);
}

.feature-card.featured .card-badge {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.feature-card.featured .card-arrow {
	font-size: 22px;
	color: rgba(255, 255, 255, 0.7);
	margin-left: 8px;
	flex-shrink: 0;
}

.feature-card.featured .card-arrow svg {
	width: 18px;
	height: 18px;
}

#prf-tool.hidden,
#dashboard.hidden {
	display: none;
}

/* Smart conveyance suggestion */
.convey-suggest {
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 14px;
	font-size: 12.5px;
	line-height: 1.5;
}
.convey-suggest--clear {
	background: #f0fdf4;
	border: 1px solid #86efac;
}
.convey-suggest--partial {
	background: #fffbeb;
	border: 1px solid #fcd34d;
}
.cs-header {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 6px;
}
.cs-icon {
	font-size: 15px;
}
.convey-suggest--clear .cs-icon {
	color: #16a34a;
}
.convey-suggest--partial .cs-icon {
	color: #d97706;
}
.cs-criteria {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 0 0 8px;
}
.cs-tick,
.cs-cross {
	font-size: 12px;
	font-weight: 500;
}
.cs-tick {
	color: #15803d;
}
.cs-cross {
	color: #b45309;
}
.cs-label {
	font-weight: 600;
	font-size: 12px;
	margin: 6px 0 3px;
	color: #374151;
}
.cs-wording {
	background: rgba(255, 255, 255, 0.65);
	border-left: 3px solid #16a34a;
	border-radius: 8px;
	padding: 7px 10px;
	font-style: italic;
	font-size: 12px;
	color: #1f2937;
	margin: 0 0 6px;
	white-space: pre-wrap;
}
.cs-disclaimer {
	font-size: 10.5px;
	color: #9ca3af;
	font-style: italic;
	margin: 0;
}

/* Red flag bar */
.rf-bar {
	position: sticky;
	top: 134px;
	z-index: 24;
	background: rgba(255, 255, 255, 0.82);
	border-bottom: 1px solid rgba(226, 232, 240, 0.8);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	transition:
		background 0.2s,
		border-color 0.2s;
}
.rf-bar.rf-critical {
	background: #fff5f5;
	border-bottom-color: #fca5a5;
}
.rf-bar.rf-high {
	background: #fffbeb;
	border-bottom-color: #fcd34d;
}
.rf-bar.rf-moderate {
	background: #fefce8;
	border-bottom-color: #fde047;
}
.rf-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text);
	text-align: left;
}
.rf-icon {
	font-size: 13px;
	flex-shrink: 0;
}
.rf-bar.rf-critical .rf-icon {
	color: #dc2626;
}
.rf-bar.rf-high .rf-icon {
	color: #d97706;
}
.rf-bar.rf-moderate .rf-icon {
	color: #ca8a04;
}
#rfSummary {
	flex: 1;
	font-size: 12.5px;
	font-weight: 600;
}
.rf-chevron {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	transition: transform 0.18s ease;
}
.rf-bar[data-open="true"] .rf-chevron {
	transform: rotate(180deg);
}
.rf-panel {
	padding: 0 12px 10px;
}
.rf-cards {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.rf-card {
	padding: 9px 12px;
	border-radius: 8px;
	border-left: 3px solid transparent;
}
.rf-card.critical {
	background: #fef2f2;
	border-left-color: #ef4444;
}
.rf-card.high {
	background: #fffbeb;
	border-left-color: #f59e0b;
}
.rf-card.moderate {
	background: #fefce8;
	border-left-color: #eab308;
}
.rf-card-title {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 5px;
}
.rf-card-body {
	font-size: 11.5px;
	color: #4b5563;
	margin-top: 2px;
	line-height: 1.45;
}
.rf-disclaimer {
	margin: 8px 4px 0;
	font-size: 10.5px;
	color: #9ca3af;
	font-style: italic;
	line-height: 1.4;
}
@media (max-width: 600px) {
	.rf-bar {
		top: 124px;
	}
}

/* Paeds treatment — dose hint */
.dose-hint {
	background: #f0f9ff;
	border: 1px solid #bae6fd;
	border-radius: 8px;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.dose-hint-drug {
	font-size: 13px;
	font-weight: 700;
	color: #0369a1;
}
.dose-hint-source {
	font-size: 10.5px;
	color: var(--muted);
	margin-top: -2px;
}
.dose-hint-weight {
	font-size: 11px;
	color: #0284c7;
	font-weight: 600;
	margin-bottom: 2px;
}
.dose-hint-row {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto auto;
	column-gap: 8px;
	row-gap: 1px;
	padding: 6px 0;
	border-top: 1px solid #e0f2fe;
}
.dose-hint-row:first-of-type {
	border-top: none;
}
.dose-hint-indication {
	grid-column: 1;
	grid-row: 1;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--text);
}
.dose-hint-calc {
	grid-column: 2;
	grid-row: 1 / 3;
	font-size: 16px;
	font-weight: 800;
	color: var(--muted);
	text-align: right;
	align-self: center;
	white-space: nowrap;
}
.dose-hint-calc--active {
	color: #0369a1;
}
.dose-hint-prep {
	grid-column: 1;
	grid-row: 2;
	font-size: 10.5px;
	color: var(--muted);
}
.dose-hint-notes {
	grid-column: 1 / 3;
	grid-row: 3;
	font-size: 10.5px;
	color: #0369a1;
	font-style: italic;
	margin-top: 1px;
}

/* IV colour chips */
/* 20G Pink — shared between paeds (.p-gauge-20) and adult (.a-gauge-20) */
.p-gauge-20,
.a-gauge-20 {
	background: linear-gradient(180deg, #fdf2f8, #fce7f3);
	border-color: #f472b6;
	color: #9d174d;
}
.p-gauge-20.selected,
.a-gauge-20.selected {
	background: linear-gradient(180deg, #fce7f3, #fbcfe8);
	border-color: #db2777;
	border-width: 2.5px;
	color: #831843;
}
/* 22G Blue — shared */
.p-gauge-22,
.a-gauge-22 {
	background: linear-gradient(180deg, #eff6ff, #dbeafe);
	border-color: #60a5fa;
	color: #1e40af;
}
.p-gauge-22.selected,
.a-gauge-22.selected {
	background: linear-gradient(180deg, #dbeafe, #bfdbfe);
	border-color: #2563eb;
	border-width: 2.5px;
	color: #1e3a8a;
}
/* 24G Yellow — shared */
.p-gauge-24,
.a-gauge-24 {
	background: linear-gradient(180deg, #fefce8, #fef9c3);
	border-color: #facc15;
	color: #854d0e;
}
.p-gauge-24.selected,
.a-gauge-24.selected {
	background: linear-gradient(180deg, #fef9c3, #fef08a);
	border-color: #ca8a04;
	border-width: 2.5px;
	color: #713f12;
}
/* 26G Purple */
.p-gauge-26 {
	background: linear-gradient(180deg, #faf5ff, #f3e8ff);
	border-color: #c084fc;
	color: #6b21a8;
}
.p-gauge-26.selected {
	background: linear-gradient(180deg, #f3e8ff, #e9d5ff);
	border-color: #9333ea;
	border-width: 2.5px;
	color: #581c87;
}

/* IV colours */
/* 14G Orange */
.a-gauge-14 {
	background: linear-gradient(180deg, #fff7ed, #ffedd5);
	border-color: #fb923c;
	color: #9a3412;
}
.a-gauge-14.selected {
	background: linear-gradient(180deg, #ffedd5, #fed7aa);
	border-color: #ea580c;
	border-width: 2.5px;
	color: #7c2d12;
}
/* 16G Grey */
.a-gauge-16 {
	background: linear-gradient(180deg, #f9fafb, #f3f4f6);
	border-color: #9ca3af;
	color: #374151;
}
.a-gauge-16.selected {
	background: linear-gradient(180deg, #f3f4f6, #e5e7eb);
	border-color: #6b7280;
	border-width: 2.5px;
	color: #1f2937;
}
/* 18G Green */
.a-gauge-18 {
	background: linear-gradient(180deg, #f0fdf4, #dcfce7);
	border-color: #4ade80;
	color: #166534;
}
.a-gauge-18.selected {
	background: linear-gradient(180deg, #dcfce7, #bbf7d0);
	border-color: #16a34a;
	border-width: 2.5px;
	color: #14532d;
}
/* 20G Pink, 22G Blue, 24G Yellow — see paeds gauge section above, definitions shared */

/* Paediatric reference pills */
.paeds-ref-pill {
	background: #e0f2fe;
	color: #0369a1;
	border: 1px solid #bae6fd;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	min-height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.paeds-vitals-ref {
	background: #f0fdf4;
	border: 1px solid #86efac;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 12px;
	line-height: 1.6;
}
.paeds-vitals-ref strong {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: #15803d;
	margin-bottom: 4px;
}
.pvr-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 12px;
}
.pvr-item {
	font-size: 11.5px;
	color: #374151;
}
.pvr-label {
	color: #6b7280;
	font-size: 11px;
}

/* FLACC pain grid */
.flacc-grid {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 4px;
}
.flacc-row {
	display: grid;
	grid-template-columns: 100px 1fr;
	align-items: center;
	gap: 8px;
}
.flacc-label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text);
}
.flacc-select {
	font-size: 12.5px;
}
.flacc-total {
	margin-top: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	background: #f1f5f9;
	border: 1px solid var(--line);
	text-align: center;
	transition:
		background 0.2s,
		color 0.2s;
}
.flacc-total.pain-low {
	background: #f0fdf4;
	color: #15803d;
	border-color: #86efac;
}
.flacc-total.pain-mod {
	background: #fffbeb;
	color: #b45309;
	border-color: #fcd34d;
}
.flacc-total.pain-high {
	background: #fef2f2;
	color: #b91c1c;
	border-color: #fca5a5;
}

/* WETFLAG results */
.wetflag-results {
	margin-top: 12px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--line);
}
.wf-header {
	background: #1e3a5f;
	color: #fff;
	padding: 9px 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.wf-row {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--line);
	font-size: 12.5px;
}
.wf-row:last-child {
	border-bottom: none;
}
.wf-row:nth-child(even) {
	background: #f8fafc;
}
.wf-letter {
	font-size: 20px;
	font-weight: 900;
	color: #1e3a5f;
	line-height: 1;
}
.wf-label {
	font-size: 11.5px;
	color: #4b5563;
}
.wf-value {
	font-weight: 700;
	color: var(--text);
	text-align: right;
	font-size: 13px;
	white-space: nowrap;
}
.wf-disclaimer {
	padding: 7px 12px;
	font-size: 10.5px;
	color: #9ca3af;
	font-style: italic;
	background: #f8fafc;
	border-top: 1px solid var(--line);
}

/* Paeds tool */
/* 3 Minute Toolkit */
.tmt-phase {
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 10px;
}
.tmt-phase:last-child {
	margin-bottom: 0;
}

.tmt-phase--1 {
	background: #f0f9ff;
	border-color: #bae6fd;
}
.tmt-phase--2 {
	background: #f0fdf4;
	border-color: #86efac;
}
.tmt-phase--3 {
	background: #faf5ff;
	border-color: #d8b4fe;
}

.tmt-phase-header {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
}
.tmt-num {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 14px;
	flex-shrink: 0;
	color: #fff;
}
.tmt-phase--1 .tmt-num {
	background: #0284c7;
}
.tmt-phase--2 .tmt-num {
	background: #16a34a;
}
.tmt-phase--3 .tmt-num {
	background: #7c3aed;
}

.tmt-phase-label {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.tmt-phase-label strong {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--text);
}
.tmt-phase-label small {
	font-size: 11.5px;
	color: var(--muted);
}

.tmt-sublabel {
	font-size: 12px;
	font-weight: 600;
	color: var(--text);
	margin: 10px 0 5px;
	padding: 0;
}
.tmt-sublabel span {
	font-weight: 400;
	color: var(--muted);
	font-size: 11px;
	margin-left: 4px;
}

/* Toolkit completion chips */
.tmt-chip {
	font-size: 12px;
	background: #fef2f2 !important;
	border-color: #fca5a5 !important;
	color: #b91c1c !important;
}
.tmt-chip.selected {
	background: #dcfce7 !important;
	border-color: #86efac !important;
	color: #15803d !important;
}

/* DEFG section — glucose reminder highlight */
#paedsAbcdentContainer details:last-child > summary {
	background: linear-gradient(90deg, #fef9c3 0%, transparent 60%);
}
#paedsAbcdentContainer details:last-child > summary span::before {
	content: "⚡ ";
	font-size: 13px;
}

@media (max-width: 480px) {
	.flacc-row {
		grid-template-columns: 80px 1fr;
		gap: 6px;
	}
	.flacc-label {
		font-size: 11.5px;
	}
	.wf-row {
		grid-template-columns: 38px 1fr auto;
	}
	.wf-letter {
		font-size: 16px;
	}
	.pvr-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* 
   Universal grid override — natural chip/grid flow
   Ensures all named chip grids use auto-fit columns and
   prevents odd final buttons from stretching or jumping.
   Applies to: ROS, Primary Survey, ABCDE, generated grids.
   Keep !important — overrides responsive breakpoint rules above
 */

.square-grid,
.pabc-grid,
.abc-layout,
.ecg-grid,
#conveyTransferGrid,
#injuryTypeGrid,
#injuryInterventionGrid,
#airwayInterventionGrid,
#woundInterventionGrid,
#manualHandlingGrid,
#otherInterventionGrid,
#seizureTypeGrid,
#seizureFeaturesGrid,
#seizureFindingsGrid,
#seizurePrecipitantsGrid,
#aedComplianceGrid,
#mhIntentGrid,
#mhPlanningGrid,
#odPrescribedGrid,
#shMethodGrid,
#shDepthGrid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
	grid-auto-flow: row !important;
	gap: 4px !important;
}

.square-grid > *,
.pabc-grid > *,
.abc-layout > *,
.ecg-grid > *,
#conveyTransferGrid > *,
#injuryTypeGrid > *,
#injuryInterventionGrid > *,
#airwayInterventionGrid > *,
#woundInterventionGrid > *,
#manualHandlingGrid > *,
#otherInterventionGrid > *,
#seizureTypeGrid > *,
#seizureFeaturesGrid > *,
#seizureFindingsGrid > *,
#seizurePrecipitantsGrid > *,
#aedComplianceGrid > *,
#mhIntentGrid > *,
#mhPlanningGrid > *,
#odPrescribedGrid > *,
#shMethodGrid > *,
#shDepthGrid > * {
	grid-column: auto !important;
	grid-row: auto !important;
}

.square-btn,
.abc-chip,
.convey-chip {
	width: 100% !important;
	min-width: 0 !important;
}

@media (max-width: 520px) {
	.square-grid,
	.pabc-grid,
	.abc-layout,
	.ecg-grid,
	#conveyTransferGrid,
	#injuryTypeGrid,
	#injuryInterventionGrid,
	#airwayInterventionGrid,
	#woundInterventionGrid,
	#manualHandlingGrid,
	#otherInterventionGrid,
	#seizureTypeGrid,
	#seizureFeaturesGrid,
	#seizureFindingsGrid,
	#seizurePrecipitantsGrid,
	#aedComplianceGrid,
	#mhIntentGrid,
	#mhPlanningGrid,
	#odPrescribedGrid,
	#shMethodGrid,
	#shDepthGrid {
		grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
	}
}

/*
   Dark mode
   Uses <html data-theme="dark"> and a top-right header button
*/

.theme-toggle {
	position: relative;
	margin-left: auto;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(184, 203, 215, 0.72);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.74);
	color: var(--primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(11, 45, 77, 0.055);
	flex: 0 0 auto;
}

.theme-toggle .theme-icon {
	pointer-events: none;
	flex: 0 0 auto;
}

.theme-toggle:hover {
	background: var(--primary-soft);
	border-color: var(--primary-2);
}

.theme-toggle + .ghost-button {
	margin-left: 0;
}

.theme-icon {
	width: 20px;
	height: 20px;
}

.theme-icon-sun {
	display: none;
}

.theme-icon-moon {
	display: block;
}

html[data-theme="dark"] .theme-icon-sun {
	display: block;
}

html[data-theme="dark"] .theme-icon-moon {
	display: none;
}

html[data-theme="dark"] {
	color-scheme: dark;

	--bg: #081722;
	--bg-accent: #0d2433;
	--surface: #10202d;
	--surface-2: #142838;
	--surface-3: #183246;
	--line: #274356;
	--line-strong: #3a5a70;
	--text: #eaf4f8;
	--muted: #a9bdc9;
	--muted-2: #8198a7;
	--text-secondary: var(--muted);
	--text-2: var(--muted);
	--card: var(--surface);
	--accent: var(--primary);

	--primary: #38bdf8;
	--primary-2: #67e8f9;
	--primary-3: #7dd3fc;
	--primary-soft: #123449;
	--primary-soft-2: #16445d;

	--success: #86efac;
	--success-soft: #123323;
	--warning: #facc15;
	--warning-soft: #332a12;
	--danger: #fb7185;
	--danger-soft: #371923;

	--focus: 0 0 0 4px rgba(56, 189, 248, 0.22);
}

html[data-theme="dark"] body {
	background: linear-gradient(180deg, #0a1823 0%, #081722 48%, #07131c 100%);
	color: var(--text);
}

html[data-theme="dark"] .app-header,
html[data-theme="dark"] .site-footer {
	background: rgba(16, 32, 45, 0.82);
	border-color: var(--line);
}

html[data-theme="dark"] .tabs {
	background: rgba(12, 29, 42, 0.82);
	border-color: var(--line);
}

html[data-theme="dark"] .tab,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .section-card > summary,
html[data-theme="dark"] .section-body,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .output-card,
html[data-theme="dark"] .output-card-head,
html[data-theme="dark"] .body-map-panel,
html[data-theme="dark"] .selected-panel,
html[data-theme="dark"] .vital,
html[data-theme="dark"] .patient-script,
html[data-theme="dark"] .footer-guidance {
	background: rgba(16, 32, 45, 0.88);
	border-color: var(--line) !important;
	color: var(--text);
}

html[data-theme="dark"] .section-card:hover,
html[data-theme="dark"] .feature-card:not(.coming-soon):hover {
	background: rgba(20, 40, 56, 0.94);
}

html[data-theme="dark"] .tab.active,
html[data-theme="dark"] .primary-action {
	background: #0e7490;
	color: #ffffff;
}

html[data-theme="dark"] .app-header h1,
html[data-theme="dark"] .dashboard-intro h2,
html[data-theme="dark"] .section-card summary span,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .footer-brand h3,
html[data-theme="dark"] .footer-notice h4,
html[data-theme="dark"] .footer-guidance h4 {
	color: var(--text);
}

html[data-theme="dark"] .app-header p,
html[data-theme="dark"] .disclaimer-banner {
	background: #2d1f07;
	border-color: #b45309;
}
html[data-theme="dark"] .disclaimer-heading {
	color: #fcd34d;
}
html[data-theme="dark"] .disclaimer-body {
	color: #fde68a;
}
html[data-theme="dark"] .disclaimer-body strong {
	color: #fcd34d;
}
html[data-theme="dark"] .dashboard-intro p,
html[data-theme="dark"] .card-desc,
html[data-theme="dark"] .field-label,
html[data-theme="dark"] .field-hint,
html[data-theme="dark"] .output-hint,
html[data-theme="dark"] .footer-intro,
html[data-theme="dark"] .footer-bottom,
html[data-theme="dark"] .footer-brand p,
html[data-theme="dark"] .footer-notice p,
html[data-theme="dark"] .footer-guidance li {
	color: var(--muted);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .square-btn,
html[data-theme="dark"] .radio-chip,
html[data-theme="dark"] .flacc-chip,
html[data-theme="dark"] .faces-chip,
html[data-theme="dark"] .pain-score-btn,
html[data-theme="dark"] .output,
html[data-theme="dark"] .output-snippet,
html[data-theme="dark"] .ausc-entry {
	background: var(--surface-2) !important;
	border-color: var(--line) !important;
	color: var(--text);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
	color: #6f8797;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
	background: #182e40 !important;
	border-color: var(--primary) !important;
}

html[data-theme="dark"] .notice,
html[data-theme="dark"] .secondary-action,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .ghost-button,
html[data-theme="dark"] .section-card summary small,
html[data-theme="dark"] .status-pill,
html[data-theme="dark"] .ausc-preview {
	background: var(--primary-soft);
	border-color: var(--line-strong);
	color: var(--primary);
}

html[data-theme="dark"] .square-btn.selected,
html[data-theme="dark"] .abc-chip.selected,
html[data-theme="dark"] .convey-chip.selected,
html[data-theme="dark"] .radio-chip.selected,
html[data-theme="dark"] .flacc-chip.selected,
html[data-theme="dark"] .faces-chip.selected {
	background: #0d2d4a !important;
	border-color: #3b82f6 !important;
	border-width: 2px !important;
	color: #bfdbfe !important;
}

html[data-theme="dark"] .square-btn.abnormal,
html[data-theme="dark"] .abc-chip.abnormal,
html[data-theme="dark"] .convey-chip.abnormal,
html[data-theme="dark"] .status-pill.flagged {
	background: var(--danger-soft) !important;
	border-color: #7f3342 !important;
	color: #fecdd3;
}

html[data-theme="dark"] .footer-notice {
	background: var(--warning-soft);
	border-color: #6b5416 !important;
}

html[data-theme="dark"] .body-part {
	fill: #20394c;
	stroke: #5b7486;
}

html[data-theme="dark"] .body-part:hover {
	fill: #294a61;
}

html[data-theme="dark"] .body-part.site {
	fill: #0ea5e9;
	stroke: #7dd3fc;
}

html[data-theme="dark"] .body-part.radiation {
	fill: #ca8a04;
	stroke: #fde68a;
}

html[data-theme="dark"] .logo,
html[data-theme="dark"] .footer-logo {
	border-color: var(--line);
	box-shadow: none;
}

@media (max-width: 430px) {
	.theme-toggle {
		width: 38px;
		height: 38px;
	}

	.theme-icon {
		width: 18px;
		height: 18px;
	}
}

html[data-theme="light"] .theme-icon-sun,
html:not([data-theme]) .theme-icon-sun {
	display: none;
}

html[data-theme="light"] .theme-icon-moon,
html:not([data-theme]) .theme-icon-moon {
	display: block;
}

html[data-theme="dark"] .feature-card:not(.featured) {
	background: rgba(16, 32, 45, 0.86) !important;
	border-color: var(--line) !important;
	color: var(--text) !important;
	box-shadow:
		0 14px 32px rgba(0, 0, 0, 0.2),
		0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
}

html[data-theme="dark"] .feature-card.featured {
	background: linear-gradient(
		145deg,
		#075985 0%,
		#0c6d8b 52%,
		#0e7490 100%
	) !important;
	border-color: rgba(125, 211, 252, 0.22) !important;
	box-shadow:
		0 20px 48px rgba(3, 105, 161, 0.22),
		0 1px 0 rgba(255, 255, 255, 0.14) inset !important;
}

html[data-theme="dark"] .feature-card.featured--paeds {
	background: linear-gradient(
		145deg,
		#0f766e 0%,
		#0b8498 52%,
		#0891b2 100%
	) !important;
	border-color: rgba(153, 246, 228, 0.2) !important;
}

html[data-theme="dark"] .feature-card:not(.featured) .card-title {
	color: var(--text) !important;
}

html[data-theme="dark"] .feature-card:not(.featured) .card-desc {
	color: var(--muted) !important;
}

html[data-theme="dark"] .feature-card .card-icon {
	background: #132f42 !important;
	border: 1px solid #27485c !important;
	color: #e5f6ff !important;
}

html[data-theme="dark"] .feature-card .card-icon svg,
html[data-theme="dark"] .feature-card .card-arrow svg {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	stroke: currentColor !important;
	color: inherit !important;
}

html[data-theme="dark"] .feature-card.featured .card-icon {
	background: rgba(255, 255, 255, 0.16) !important;
	border-color: rgba(255, 255, 255, 0.24) !important;
	color: #ffffff !important;
}

html[data-theme="dark"] .feature-card.featured .card-arrow {
	color: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="dark"] .card-icon.green {
	background: #0f2f23 !important;
	color: #bbf7d0 !important;
}

html[data-theme="dark"] .card-icon.red {
	background: #3a1820 !important;
	color: #fecdd3 !important;
}

html[data-theme="dark"] .card-icon.purple {
	background: #281d3f !important;
	color: #ddd6fe !important;
}

html[data-theme="dark"] .card-icon.teal {
	background: #0f3434 !important;
	color: #99f6e4 !important;
}

html[data-theme="dark"] .card-icon.amber {
	background: #3a2a0f !important;
	color: #fde68a !important;
}

html[data-theme="dark"] .card-icon.orange {
	background: #3a2112 !important;
	color: #fed7aa !important;
}

html[data-theme="dark"] .card-icon.indigo {
	background: #202549 !important;
	color: #c7d2fe !important;
}

html[data-theme="dark"] .card-icon.blue {
	background: #132f42 !important;
	color: #bae6fd !important;
}

/* Resp Counter Tool */

.tool-page.hidden {
	display: none !important;
}

.resp-counter-page {
	max-width: 760px;
}

.tool-hero {
	margin-bottom: 0 !important;
	border-radius: 8px 8px 0 0 !important;
	border-bottom: none !important;
}

.tool-hero-content {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	background: linear-gradient(145deg, #075985 0%, #0c6d8b 52%, #0e7490 100%);
	color: #ffffff;
}

.tool-hero h2 {
	margin: 0 0 4px;
	font-size: 22px;
	letter-spacing: 0;
}

.tool-hero p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

.tool-icon {
	width: 52px;
	height: 52px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.24);
	flex: 0 0 auto;
}

.tool-icon svg {
	width: 28px;
	height: 28px;
}

.resp-counter-card {
	border-radius: 0 !important;
}

.resp-live-panel {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: 14px 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.9);
}

.resp-live-panel > div {
	padding: 14px 10px;
	text-align: center;
	border-right: 1px solid var(--line);
}

.resp-live-panel > div:last-child {
	border-right: 0;
}

.resp-metric-label,
.resp-unit {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: var(--muted);
}

.resp-live-panel strong {
	display: block;
	margin: 4px 0;
	font-size: clamp(28px, 7vw, 44px);
	line-height: 1;
	color: var(--primary);
	letter-spacing: 0;
}

.resp-tap-button {
	width: 100%;
	min-height: 220px;
	border: 1px solid rgba(158, 210, 232, 0.96);
	border-radius: 8px;
	background: radial-gradient(
		circle at top,
		#ffffff 0%,
		var(--primary-soft) 58%,
		#d8eef8 100%
	);
	color: #0b2d4d;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	box-shadow:
		0 18px 44px rgba(7, 89, 133, 0.08),
		0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.resp-tap-button span {
	font-size: clamp(24px, 7vw, 42px);
	font-weight: 900;
	letter-spacing: 0;
}

.resp-tap-button small {
	font-size: 13px;
	font-weight: 700;
	color: var(--muted);
}

.resp-tap-button.pulse {
	animation: respPulse 0.18s ease;
}

@keyframes respPulse {
	50% {
		transform: scale(0.985);
		background: #ccecf8;
	}
}

.resp-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.resp-actions button {
	flex: 1;
}

.resp-result-card {
	margin-top: 12px;
	padding: 14px;
	border-radius: 8px;
	border: 1px solid #bee4ca;
	background: var(--success-soft);
	color: var(--success);
}

.resp-result-card h3 {
	margin: 0 0 4px;
	font-size: 15px;
}

.resp-result-card p {
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--text);
}

.resp-result-card strong {
	font-size: 24px;
	letter-spacing: 0;
}

.resp-ranges-card {
	border-radius: 0 0 8px 8px !important;
}

.resp-ranges-card > summary {
	cursor: default;
}

.resp-ranges-card > summary::after {
	display: none;
}

.resp-range-list {
	display: grid;
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
}

.resp-range-list div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 12px;
	background: rgba(255, 255, 255, 0.86);
	border-bottom: 1px solid var(--line);
}

.resp-range-list div:last-child {
	border-bottom: 0;
}

.resp-range-list span {
	color: var(--text);
	font-weight: 650;
}

.resp-range-list strong {
	color: var(--primary);
	white-space: nowrap;
}

html[data-theme="dark"] .tool-hero-content {
	background: linear-gradient(135deg, #0f3b55 0%, #075985 100%);
}

html[data-theme="dark"] .resp-tap-button {
	background: radial-gradient(
		circle at top,
		#18364a 0%,
		#132f42 58%,
		#0f2533 100%
	);
	color: var(--text);
	border-color: #27485c;
}

html[data-theme="dark"] .resp-tap-button small,
html[data-theme="dark"] .resp-metric-label,
html[data-theme="dark"] .resp-unit {
	color: var(--muted);
}

html[data-theme="dark"] .resp-live-panel strong,
html[data-theme="dark"] .resp-range-list strong {
	color: #7dd3fc;
}

html[data-theme="dark"] .resp-result-card {
	background: #0f2f23;
	border-color: #285c3e;
	color: #bbf7d0;
}

.resp-result-card-abnormal {
	background: var(--danger-soft);
	border-color: #f9a8b4;
	color: var(--danger);
}

html[data-theme="dark"] .resp-result-card-abnormal {
	background: #371923;
	border-color: #7f1d38;
	color: #fb7185;
}

/* Observations */
.obs-set {
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 14px;
	margin-bottom: 12px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow:
		0 12px 30px rgba(11, 45, 77, 0.045),
		0 1px 0 rgba(255, 255, 255, 0.88) inset;
}

.obs-set-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.obs-set-label {
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--text);
	flex: 1;
}

.obs-set-head input[type="time"] {
	flex: 0 0 auto;
	width: auto;
	min-width: 110px;
}

.obs-remove {
	margin-left: auto;
	background: rgba(255, 255, 255, 0.76);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 4px 12px;
	font-size: 0.78rem;
	color: var(--text-secondary);
	cursor: pointer;
}

.obs-remove:hover {
	border-color: var(--danger);
	color: var(--danger);
}

.obs-vitals-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	margin-bottom: 12px;
}

.obs-row-group {
	margin-bottom: 12px;
}

.obs-row-group:last-of-type {
	margin-bottom: 0;
}

.obs-inline-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
}

.obs-label {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	display: block;
	margin-bottom: 4px;
}

/* NEWS2 footer strip */
.obs-news2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

.obs-news2 .news2-label {
	color: var(--text-secondary);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.news2-score {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--text);
	line-height: 1;
}

.news2-risk {
	padding: 3px 12px;
	border-radius: 8px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.news2-low {
	background: #d1fae5;
	color: #065f46;
}
.news2-medium {
	background: #fef3c7;
	color: #92400e;
}
.news2-high {
	background: #fee2e2;
	color: #991b1b;
}

.obs-news2--low .news2-score {
	color: #065f46;
}
.obs-news2--medium .news2-score {
	color: #92400e;
}
.obs-news2--high .news2-score {
	color: #991b1b;
}

html[data-theme="dark"] .news2-low {
	background: #064e3b;
	color: #6ee7b7;
}
html[data-theme="dark"] .news2-medium {
	background: #451a03;
	color: #fcd34d;
}
html[data-theme="dark"] .news2-high {
	background: #450a0a;
	color: #fca5a5;
}

@media (max-width: 600px) {
	.obs-vitals-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 560px) {
	.tool-hero-content {
		align-items: flex-start;
		padding: 16px;
	}

	.resp-live-panel {
		grid-template-columns: 1fr;
	}

	.resp-live-panel > div {
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}

	.resp-live-panel > div:last-child {
		border-bottom: 0;
	}

	.resp-tap-button {
		min-height: 190px;
	}

	.resp-actions {
		flex-direction: column;
	}
}

/* Drug Finder / BNF quick links */
.bnf-quick-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	text-decoration: none;
	color: var(--text);
	font-size: 0.875rem;
	transition:
		background 0.15s,
		border-color 0.15s;
}
.bnf-quick-link:hover,
.bnf-quick-link:focus {
	background: var(--surface-2, #f0f4f8);
	border-color: var(--accent, #2563eb);
	outline: none;
}
.bnf-quick-link svg {
	flex-shrink: 0;
	opacity: 0.5;
}

/* NEWS2 Tool */

/* Score banner */
.n2-banner {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.84);
	border-bottom: 1px solid var(--line);
	padding: 10px 16px;
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
}
.n2-banner-inner {
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.n2-banner-label-group {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-shrink: 0;
}
.n2-banner-label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
}
.n2-banner-total {
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
	color: var(--text);
}
.n2-banner-risk {
	flex: 1;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 8px;
	background: rgba(248, 251, 253, 0.9);
	color: var(--muted);
	min-width: 0;
}
.n2-reset-btn {
	flex-shrink: 0;
	font-size: 0.8rem;
	padding: 5px 12px;
}

.n2-unit {
	font-weight: 400;
	color: var(--muted);
	font-size: 0.85em;
}
.n2-pts {
	display: block;
	font-size: 11px;
	font-weight: 700;
	margin-top: 2px;
}
.n2-pts--0 {
	color: #16a34a;
}
.n2-pts--1 {
	color: #d97706;
}
.n2-pts--2 {
	color: #ea580c;
}
.n2-pts--3 {
	color: #dc2626;
}

.radio-chip.selected .n2-pts {
	color: inherit;
	opacity: 0.85;
}

/* Result card */
.n2-result-card {
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: var(--shadow-soft);
}
.n2-result-row {
	display: flex;
	align-items: center;
	gap: 16px;
}
.n2-result-circle {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 3px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
	font-weight: 800;
	flex-shrink: 0;
	background: var(--surface-2, #f4f4f5);
	color: var(--muted);
	transition:
		background 0.2s,
		border-color 0.2s,
		color 0.2s;
}
.n2-circle--low {
	background: #d1fae5;
	border-color: #6ee7b7;
	color: #065f46;
}
.n2-circle--medium {
	background: #fef3c7;
	border-color: #fcd34d;
	color: #92400e;
}
.n2-circle--high {
	background: #fee2e2;
	border-color: #fca5a5;
	color: #991b1b;
}

.n2-result-detail {
	flex: 1;
	min-width: 0;
}
.n2-result-risk-label {
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 3px;
}
.n2-risk--low {
	color: #065f46;
}
.n2-risk--medium {
	color: #92400e;
}
.n2-risk--high {
	color: #991b1b;
}

.n2-result-guidance {
	font-size: 0.82rem;
	color: var(--muted);
	line-height: 1.4;
}

/* Breakdown */
.n2-breakdown {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}
.n2-breakdown-title {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-weight: 700;
	color: var(--muted);
	margin-bottom: 8px;
}
.n2-breakdown-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.n2-bd-item {
	display: flex;
	align-items: center;
	gap: 5px;
	background: var(--surface-2, #f4f4f5);
	border-radius: 8px;
	padding: 4px 9px;
	font-size: 0.8rem;
}
.n2-bd-param {
	color: var(--muted);
	font-weight: 500;
}
.n2-bd-score {
	font-weight: 700;
}
.n2-bd-total {
	background: transparent;
	font-size: 0.85rem;
	margin-left: auto;
}

/* Dark mode adjustments */
html[data-theme="dark"] .n2-banner {
	background: rgba(16, 32, 45, 0.86);
}
html[data-theme="dark"] .n2-banner-risk {
	background: var(--surface-2, #1e293b);
}
html[data-theme="dark"] .n2-result-circle {
	background: var(--surface-2, #1e293b);
	border-color: var(--line);
}
html[data-theme="dark"] .n2-circle--low {
	background: #064e3b;
	border-color: #065f46;
	color: #6ee7b7;
}
html[data-theme="dark"] .n2-circle--medium {
	background: #451a03;
	border-color: #78350f;
	color: #fcd34d;
}
html[data-theme="dark"] .n2-circle--high {
	background: #450a0a;
	border-color: #7f1d1d;
	color: #fca5a5;
}
html[data-theme="dark"] .n2-risk--low {
	color: #6ee7b7;
}
html[data-theme="dark"] .n2-risk--medium {
	color: #fcd34d;
}
html[data-theme="dark"] .n2-risk--high {
	color: #fca5a5;
}
html[data-theme="dark"] .n2-bd-item {
	background: var(--surface-2, #1e293b);
}

/* Margin / spacing utilities */
.mt-4  { margin-top: 4px; }
.mt-6  { margin-top: 6px; }
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mb-12 { margin-bottom: 12px; }
.mb-20 { margin-bottom: 20px; }

/* Flex utilities */
.flex-row        { display: flex; }
.flex-row-center { display: flex; align-items: center; }
.gap-4  { gap: 4px; }
.gap-6  { gap: 6px; }
.gap-8  { gap: 8px; }
.flex-1 { flex: 1; }
.nowrap { white-space: nowrap; }
.w-full { width: 100%; }

/* Panel headers */
.panel-header { display: flex; align-items: center; gap: 14px; padding: 4px 0 12px; }
.panel-header-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--primary, #1565c0); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.panel-header-title { margin: 0; font-weight: 600; font-size: 15px; color: var(--text, inherit); }
.panel-header-desc { margin: 3px 0 0; font-size: 12px; color: var(--text-muted, #666); }

.tab[data-tab="treatment"]::before,
.tab[data-paeds-tab="treatment"]::before {
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4.5' y='9.5' width='12' height='5' rx='1.2'/%3E%3Cline x1='2' y1='12' x2='4.5' y2='12'/%3E%3Cline x1='2' y1='10.2' x2='2' y2='13.8'/%3E%3Cline x1='8.5' y1='9.5' x2='8.5' y2='14.5'/%3E%3Cline x1='11.5' y1='9.5' x2='11.5' y2='14.5'/%3E%3Cpath d='M16.5 10.5 L18.5 11.2 L18.5 12.8 L16.5 13.5 Z'/%3E%3Cline x1='18.5' y1='12' x2='22' y2='12'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4.5' y='9.5' width='12' height='5' rx='1.2'/%3E%3Cline x1='2' y1='12' x2='4.5' y2='12'/%3E%3Cline x1='2' y1='10.2' x2='2' y2='13.8'/%3E%3Cline x1='8.5' y1='9.5' x2='8.5' y2='14.5'/%3E%3Cline x1='11.5' y1='9.5' x2='11.5' y2='14.5'/%3E%3Cpath d='M16.5 10.5 L18.5 11.2 L18.5 12.8 L16.5 13.5 Z'/%3E%3Cline x1='18.5' y1='12' x2='22' y2='12'/%3E%3C/svg%3E");
}