/* ==========================================================================
   Ferri's Clinical Advisor — calculator presentation layer
   --------------------------------------------------------------------------
   UI-only refresh. No markup and no script was changed; calculator.js is
   byte-identical to the previous release, and every calculate() function stays
   inline in its own page untouched. Everything here is presentation.

   What calculator.js does to the DOM, and what this file has to respect:

   * #results        may be switched to position:fixed and animated in from the
                     bottom as a sheet, with `left`, `bottom` and `right` set
                     inline. Never set position/left/bottom/right here.
   * #results        keeps `max-height: 40%` verbatim. The script decides
                     between sheet and in-flow mode from
                     $('#results').offset().top + $('#results').height(), so
                     changing how tall #results measures would change which
                     mode a page lands in.
   * .READONLY       .label and .value have their font-size animated between
                     1em and 1.6em (emphasis swaps from the metric's name to
                     its value once every input is filled). Both must stay in
                     em, and must not be !important.
   * td              gets inline `border: 0`, `padding-bottom: 0` and
                     `padding-top: 0` to weld a field row to its unit row.
                     Row separators and padding therefore live on td, never on
                     tr, so the script can still remove them.
   * .READONLY rows  whose label is `---` or starts with `~`, and any row
                     holding an input.FPS, are hidden with .hide() — an inline
                     display:none. No display rule here may be !important.
   * input           includes type=hidden fields that carry choice values.
                     Never style `input` bare; always exclude hidden.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
	--font: 'Avenir Next', 'AvenirNext-Regular', -apple-system,
		BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
		'Droid Sans', Arial, sans-serif;

	--paper: #ffffff;
	--ink: #1b2430;
	--ink-2: #4a5867;
	--ink-3: #6f7f8f;
	--rule: #dfe6ec;
	--rule-soft: #eef2f6;
	--field: #f1f5f8;

	--crimson: #a8062b;
	--teal: #0e7c86;
	--teal-deep: #0a5f68;
	--teal-tint: #e7f3f4;
	--teal-line: #b9dde0;

	/* The readout. Dark on purpose: it is the one place the eye should land. */
	--slate: #1e2a35;
	--slate-2: #2a3a48;
	--readout: #5fd3db;
	--readout-label: #b9c7d2;

	--radius: 10px;
	--radius-sm: 7px;
	--measure: 44rem;
	--pad-x: 18px;
}

/* --------------------------------------------------------------------------
   Page frame
   -------------------------------------------------------------------------- */

* {
	font-family: var(--font);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	width: 100%;
	background-color: var(--paper);
	color: var(--ink);
	font-size: 16px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Title bar

   Sticky, so the calculator you are on stays named while you scroll a long
   score sheet. #info is fixed in the same band.
   -------------------------------------------------------------------------- */

#title {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	margin: 0;
	padding: 16px 60px 14px var(--pad-x);
	border-bottom: 1px solid var(--rule);
	background-color: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: saturate(180%) blur(8px);
	backdrop-filter: saturate(180%) blur(8px);
	color: var(--crimson);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

#info {
	position: fixed;
	top: 11px;
	right: 12px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var(--field);
	text-align: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	-webkit-transition: background-color 0.15s ease;
	transition: background-color 0.15s ease;
}

#info:hover {
	background-color: var(--teal-tint);
}

#info img {
	width: 19px;
	height: 19px;
	margin-top: 7px;
	border: 0;
	vertical-align: top;
	opacity: 0.72;
}

/* --------------------------------------------------------------------------
   Input sheet

   The markup is a <table>. Rows are re-laid-out as grid so a label can sit
   above its field on a phone and beside it on anything wider — the old fixed
   35%/65% split wrapped the long I-PSS questions into a four-word column.
   -------------------------------------------------------------------------- */

#input {
	display: block;
	width: 100%;
	max-width: var(--measure);
	margin: 0 auto;
	padding: 0 var(--pad-x);
	border: 0;
	border-collapse: collapse;
}

#input tbody {
	display: block;
}

#input tr {
	display: block;
	padding: 0;
}

#input td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	vertical-align: top;
}

/* Separators live on the last cell of a row so that a stacked label does not
   get a rule between it and its own field. calculator.js can still delete them
   with an inline `border: 0` when welding a field to its unit row. */
#input tr > td:last-child {
	padding: 0 0 16px;
	border-bottom: 1px solid var(--rule-soft);
}

/* Every sheet closes with a hairline, separating the form from the readout.

   Suppressing it on the final row was tried and abandoned: the score sheets end
   with cell-less spacer rows like `<tr class='READONLY'>\n</tr>`, so
   `tr:last-child` lands on a row that has no <td> to unset, and `tr:empty`
   never matches because of the newline text node inside. Detecting a row with
   no cells needs :has(), which is too new to rely on in the packaged WebView.
   A rule on every sheet is consistent; a rule on some and not others is not. */

/* Cell-less spacer rows collapse to zero height on their own — they generate
   no cells, so there is nothing to hide. */

/* Field labels. Left-aligned: right-aligned labels are slower to scan and
   collapse badly once they wrap.

   text-align is deliberately NOT set on the bare `.label` selector — the
   results readout reuses that class and has to stay centred. */
#input td.label,
.label {
	color: var(--ink-2);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.005em;
	line-height: 1.4;
}

/* The row's top spacing lives on the label cell so a stacked field sits tight
   under its own label. calculator.js zeroes these paddings to weld a field to
   its unit row, so they must stay on td. */
#input td.label {
	padding: 14px 0 5px;
	text-align: left;
}

/* The unit picker sits directly under its own field. */
#input td.label.unit,
.label.unit {
	color: var(--ink-3);
	font-size: 0.75rem;
	font-weight: 400;
	text-align: left;
}

/* Section headings inside a score sheet. */
#input tr > td.note,
.note {
	margin: 0;
	padding: 20px 0 8px;
	border: 0;
	background: none;
	color: var(--ink);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	text-align: left;
}

/* --------------------------------------------------------------------------
   Number fields
   -------------------------------------------------------------------------- */

#input input[type="number"],
#input input[type="text"],
#input input[type="tel"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 11px 13px;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	background-color: var(--field);
	color: var(--ink);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.3;
	/* A clinical value should not reflow as its digits change. */
	font-variant-numeric: tabular-nums;
	-webkit-font-feature-settings: "tnum";
	font-feature-settings: "tnum";
	-webkit-transition: border-color 0.15s ease, background-color 0.15s ease,
		box-shadow 0.15s ease;
	transition: border-color 0.15s ease, background-color 0.15s ease,
		box-shadow 0.15s ease;
}

#input input[type="number"]::-webkit-input-placeholder,
#input input[type="text"]::-webkit-input-placeholder {
	color: var(--ink-3);
	font-size: 0.9375rem;
	font-weight: 400;
	opacity: 1;
}

#input input[type="number"]::placeholder,
#input input[type="text"]::placeholder {
	color: var(--ink-3);
	font-size: 0.9375rem;
	font-weight: 400;
	opacity: 1;
}

/* calculator.js marks every input .selected once it holds a value, and
   .notSelected while it is still empty. */
#input input[type="number"].selected,
#input input[type="text"].selected {
	border-color: var(--teal-line);
	background-color: var(--paper);
	color: var(--ink);
	font-size: 1.0625rem;
	font-weight: 600;
}

#input input[type="number"].notSelected,
#input input[type="text"].notSelected {
	border: 1px solid var(--rule);
	background-color: var(--field);
}

#input input[type="number"]:focus,
#input input[type="text"]:focus {
	outline: 0;
	border-color: var(--teal);
	background-color: var(--paper);
	color: var(--ink);
	font-size: 1.0625rem;
	-webkit-box-shadow: 0 0 0 3px rgba(14, 124, 134, 0.16);
	box-shadow: 0 0 0 3px rgba(14, 124, 134, 0.16);
}

/* --------------------------------------------------------------------------
   Single-choice groups (.CHOICE)

   Wrapping chips. The old rule floated them and let them collapse to a 30px
   minimum, which truncated options like "Less than half the time".
   -------------------------------------------------------------------------- */

.CHOICE .choices,
.MCHOICE .choices {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 7px;
}

.CHOICE .choices span {
	-webkit-appearance: none;
	appearance: none;
	-webkit-flex: 0 1 auto;
	flex: 0 1 auto;
	min-width: 56px;
	min-height: 40px;
	margin: 0;
	padding: 9px 14px;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	background-color: var(--paper);
	color: var(--ink-2);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	float: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	-webkit-transition: background-color 0.15s ease, border-color 0.15s ease,
		color 0.15s ease;
	transition: background-color 0.15s ease, border-color 0.15s ease,
		color 0.15s ease;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.CHOICE .choices span:hover {
	border-color: var(--teal-line);
	background-color: var(--teal-tint);
	color: var(--teal-deep);
}

/* Written as `.choices span.selected` rather than `.CHOICE .selected` so it
   outranks the :hover rule above — otherwise moving the cursor back over the
   option you just picked makes it look unpicked. */
.CHOICE .choices span.selected,
.CHOICE .choices span.selected:hover {
	border-color: var(--teal);
	background-color: var(--teal);
	color: #ffffff;
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Unit toggles are a smaller, quieter version of the same control. */
.choices span.unit,
.CHOICE .choices span.unit {
	min-width: 48px;
	min-height: 34px;
	padding: 6px 12px;
	font-size: 0.8125rem;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Multi-choice groups (.MCHOICE)

   No page in the current content set uses these, but calculator.js still
   supports them, so the styling is kept current rather than dropped.
   -------------------------------------------------------------------------- */

.mchoice {
	display: block;
	padding: 0;
	font-size: 0.9375rem;
}

.MCHOICE .mchoice div {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	margin: 0 0 6px;
	padding: 10px 13px;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	background-color: var(--paper);
	color: var(--ink-2);
	font-size: 0.9375rem;
	line-height: 1.35;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.MCHOICE .checkbox {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	margin-right: 10px;
	font-size: 1.125rem;
	line-height: 1;
	vertical-align: middle;
}

.MCHOICE .selected {
	border-color: var(--teal);
	background-color: var(--teal-tint);
	color: var(--teal-deep);
	font-size: 0.9375rem;
	font-weight: 600;
}

.MCselected {
	color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Results readout

   The one bold element on the page: teal figures on dark slate, read like an
   instrument display. calculator.js may promote this to a fixed bottom sheet,
   so it is styled to hold up in both modes.

   `max-height: 40%` is carried over verbatim — see the note at the top of the
   file about why its measured height matters.
   -------------------------------------------------------------------------- */

#results {
	width: 100%;
	max-height: 40%;
	margin-top: 22px;
	padding: 0;
	background: var(--slate);
	color: #ffffff;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	cursor: pointer;
	-webkit-box-shadow: 0 -8px 28px rgba(27, 36, 48, 0.16);
	box-shadow: 0 -8px 28px rgba(27, 36, 48, 0.16);
}

/* Hidden until calculator.js fades it in, which it only does when #results has
   been promoted to a bottom sheet. That makes this the right place to advertise
   that tapping the sheet collapses it — hence the grab handle below. Keep the
   `display: none`: without it the handle appears in in-flow mode too, where it
   would be lying about what tapping does. */
#resultsTitle {
	display: none;
	position: relative;
	margin: 0;
	padding: 16px 16px 2px;
	color: var(--readout-label);
	font-size: 0.6875rem;
	font-weight: 500;
	word-spacing: -0.18em;
	text-align: center;
}

#resultsTitle::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 50%;
	width: 34px;
	height: 4px;
	margin-left: -17px;
	border-radius: 2px;
	background-color: rgba(255, 255, 255, 0.22);
}

.READONLY,
.RESULT {
	max-width: var(--measure);
	margin: 0 auto;
	padding: 14px var(--pad-x) 16px;
	background: none;
	/* Kept in em: calculator.js animates the label and value between 1em and
	   1.6em to swap emphasis once the inputs are complete. */
	font-size: 1.05em;
	line-height: 1.35;
	text-align: center;
}

.READONLY + .READONLY,
.RESULT + .RESULT {
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.RESULT .label,
.READONLY .label {
	display: block;
	margin-bottom: 2px;
	color: var(--readout-label);
	font-size: 1.6em;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.25;
}

.RESULT .value,
.READONLY .value {
	display: block;
	color: var(--readout);
	font-size: 1em;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
	-webkit-font-feature-settings: "tnum";
	font-feature-settings: "tnum";
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Tapping the value rounds it — worth advertising. */
#result {
	cursor: pointer;
}

/* Empty states. `.noResult` was white on a pale background, i.e. invisible. */
.noResult {
	color: var(--readout-label);
	font-size: 0.62em;
	font-weight: 400;
	letter-spacing: 0;
}

.noInput {
	color: var(--readout-label);
	font-size: 0.68em;
	font-weight: 400;
	opacity: 0.85;
}

/* Hidden by the stylesheet in the previous release too: results are live, so
   there is nothing to submit. Kept hidden deliberately. */
#calculate {
	display: none;
}

/* --------------------------------------------------------------------------
   Method / reference sheet (#comment)

   Opened from the ⓘ button. calculator.js appends #cover and #comment2 and
   animates `top`, so `top` is left alone here.
   -------------------------------------------------------------------------- */

#cover {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(20, 28, 36, 0.55);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	z-index: +10;
	display: none;
}

#comment {
	position: fixed;
	top: 100%;
	left: 50%;
	width: 92%;
	max-width: 34rem;
	height: 80%;
	margin-left: -46%;
	border-radius: 14px;
	background-color: var(--paper);
	color: var(--ink-2);
	font-size: 0.9375rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: none;
	z-index: +100;
	-webkit-box-shadow: 0 18px 48px rgba(20, 28, 36, 0.32);
	box-shadow: 0 18px 48px rgba(20, 28, 36, 0.32);
}

#comment2 {
	position: fixed;
	top: 100%;
	left: 50%;
	width: 92%;
	max-width: 34rem;
	height: 20px;
	margin-left: -46%;
	display: none;
	z-index: +50;
}

#comment #title {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	border: 0;
	border-bottom: 1px solid var(--rule);
	border-top-right-radius: 14px;
	border-top-left-radius: 14px;
	padding: 16px 52px 14px 20px;
	background-color: rgba(255, 255, 255, 0.96);
	color: var(--crimson);
	font-size: 0.9375rem;
	font-weight: 600;
}

#comment #commentText {
	padding: 16px 20px 26px;
	background-color: var(--paper);
	color: var(--ink-2);
	font-size: 0.9375rem;
	line-height: 1.55;
}

#commentText p {
	margin: 0 0 0.75em;
}

#commentText p:last-child {
	margin-bottom: 0;
}

#commentText b {
	color: var(--ink);
	font-weight: 600;
}

#commentText ol,
#commentText ul {
	margin: 0.5em 0 0.9em;
	padding-left: 1.35em;
}

#commentText li {
	margin-bottom: 0.4em;
}

#cancel {
	position: absolute;
	top: 13px;
	right: 14px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: var(--field);
	text-align: center;
	cursor: pointer;
	z-index: +2;
	-webkit-tap-highlight-color: transparent;
}

/* cancel.png is a solid WHITE glyph on transparency, so it was invisible on the
   sheet's white header. brightness(0) recolours it to black while keeping the
   alpha channel, which is the only way to fix this without replacing the asset. */
#cancel img {
	width: 15px;
	height: 15px;
	margin-top: 7px;
	border: 0;
	vertical-align: top;
	-webkit-filter: brightness(0);
	filter: brightness(0);
	opacity: 0.55;
}

.popup {
	position: fixed;
	top: 10%;
	left: 5%;
	width: 90%;
	max-height: 80%;
	padding: 18px;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background-color: var(--paper);
	-webkit-box-shadow: 0 14px 36px rgba(27, 36, 48, 0.2);
	box-shadow: 0 14px 36px rgba(27, 36, 48, 0.2);
}

#url {
	position: fixed;
	bottom: 4px;
	right: 6px;
	margin: 0;
	color: var(--ink-3);
	font-size: 0.75rem;
	font-weight: 400;
}

a {
	color: var(--teal-deep);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
	border: 0;
}

/* --------------------------------------------------------------------------
   Wider viewports

   Label beside field instead of above it, and a capped measure — the old
   stylesheet stretched a four-field calculator across a 1280px window.
   -------------------------------------------------------------------------- */

@media (min-width: 34rem) {
	:root {
		--pad-x: 28px;
	}

	#title {
		padding: 20px 68px 18px var(--pad-x);
		font-size: 1.25rem;
	}

	#info {
		top: 15px;
		right: 20px;
		width: 38px;
		height: 38px;
	}

	#info img {
		width: 21px;
		height: 21px;
		margin-top: 8px;
	}

	/* Default `stretch` alignment, not `baseline`: the two cells must end at
	   the same y or their bottom rules won't line up into one continuous
	   separator. */
	#input tr {
		display: -webkit-flex;
		display: flex;
	}

	#input td.label {
		-webkit-flex: 0 0 14rem;
		flex: 0 0 14rem;
		padding: 18px 20px 18px 0;
	}

	#input td:last-child {
		-webkit-flex: 1 1 auto;
		flex: 1 1 auto;
		min-width: 0;
		padding: 16px 0 18px;
	}

	/* With two columns side by side, both cells carry the rule so it runs the
	   full width of the sheet. */
	#input tr > td {
		border-bottom: 1px solid var(--rule-soft);
	}

	/* Full-width rows: section headings and spacers. */
	#input tr.READONLY {
		display: block;
	}

	#input td.note {
		-webkit-flex: 1 1 100%;
		flex: 1 1 100%;
		padding: 22px 0 10px;
	}

	#input input[type="number"],
	#input input[type="text"] {
		max-width: 15rem;
	}

	#results {
		margin-top: 30px;
	}

	.READONLY,
	.RESULT {
		padding: 18px var(--pad-x) 20px;
	}
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

/* .CHOICE spans are content-authored <span>s with no tabindex, so they cannot
   be focused without changing the 876 content pages. Inputs are covered. */
input:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 2px;
}

@media (prefers-contrast: more) {
	#input td.label,
	.label {
		color: var(--ink);
	}

	.CHOICE .choices span {
		border-color: var(--ink-3);
	}

	.noResult,
	.noInput {
		color: #ffffff;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		-webkit-transition-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		-webkit-animation-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

@media print {
	#info,
	#calculate,
	#cover,
	#comment,
	#comment2 {
		display: none !important;
	}

	#title {
		position: static;
		background: none;
	}

	#results {
		max-height: none;
		background: none;
		color: #000000;
		-webkit-box-shadow: none;
		box-shadow: none;
	}

	.RESULT .label,
	.READONLY .label {
		color: #000000;
	}

	.RESULT .value,
	.READONLY .value {
		color: #000000;
	}
}