/* ==========================================================================
   Ferri's Clinical Advisor — flowchart presentation layer
   --------------------------------------------------------------------------
   UI-only refresh. No markup and no script was changed; flowchart.js is
   byte-identical to the previous release. Everything here is presentation.

   Rendered as a real flowchart, using standard chart grammar:

       process / statement  .INFONODE          rectangle, 2px border
       decision             .JUMPNODE .preText angled lozenge (elongated
                                               diamond, so long clinical
                                               questions still fit)
       terminator           .INFONODE.endNode  stadium / pill
       flow                 ::before + ::after vertical stem + solid arrowhead
       branch split         .jumpTO::before    horizontal bus + drop per branch

   Everything sits on one centred vertical axis and every step is joined to the
   next by a directed arrow, which is what makes it read as a flowchart rather
   than a list of steps.

   Two things to know before editing:

   1. These pages declare <!DOCTYPE FLOWCHART>, which puts the browser in
      QUIRKS MODE. That is load-bearing: flowchart.js auto-scrolls with
      $('body').animate({scrollTop: ...}), which only works while <body> is
      the scrolling element. Do not add a doctype, and do not move the scroll
      to a nested container.

   2. flowchart.js writes inline styles on .jumpTO (width, height, font-size)
      and .options (height) as it appends each node. Those pixel values are
      neutralised below with `!important` so the layout can be fluid instead.
      Search for "js override" to find every such rule.
   ========================================================================== */

/* --------------------------------------------------------------------------
   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;
	--field: #f1f5f8;

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

	/* Chart furniture */
	--flow-line: #9db0be; /* connectors and arrowheads */
	--box-line: #c8d5df; /* process-box outline */
	--decision-fill: #e2edf1; /* decision lozenge */
	--decision-line: #8fb3bd;

	/* Connector lengths. --gap is the arrowed run between two steps;
	   --branch is the shorter drop from a decision to its options. */
	--gap: 34px;
	--branch: 26px;
	/* Of --branch, the lower --bus belongs to the split (bus line + drops to
	   each chip); the remainder is the single stub leaving the decision. */
	--bus: 14px;
	--arrow: 8px;

	/* Half the horizontal space between two branch chips. The chips use
	   margins rather than flex column-gap so that each chip's ::before can
	   span chip + margins symmetrically — that keeps the drop line centred on
	   the chip while letting the bus reach exactly to the neighbour's centre. */
	--chip-space: 6px;

	--radius: 4px;
	--measure: 42rem;
	--pad-x: 16px;
}

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

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

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

/* The source flowchart XML lives in #XML and must stay display:none.
   ------------------------------------------------------------------
   DO NOT make #XML visible. It looks harmless — the node elements inside it
   are hidden individually anyway — but it is not:

   jQuery measures a display:none element by briefly forcing
   `display:block; position:absolute; visibility:hidden` on it. That trick
   returns 0 only while an *ancestor* is also hidden. With #XML rendered, the
   measurement succeeds instead, so flowchart.js's

       nodewidth = $(thisNODE).width();

   comes back non-zero (308 on a phone) rather than 0, and every subsequent
   node takes the `if (nodewidth != 0)` branch — which references an
   undeclared `thisNode` and throws, aborting showNextNode() and freezing the
   flowchart after the first step.

   Surfacing <title> as a page heading was tried here and reverted for exactly
   this reason. In the shipping app the native shell supplies the topic title
   in its own navigation bar, so nothing is lost. */
#XML {
	display: none;
}

/* Never-displayed source elements. */
infonode,
jumpnode,
optiontext,
pointer,
section,
see {
	display: none;
}

#tmpNode {
	display: none;
}

/* --------------------------------------------------------------------------
   The chart canvas

   One centred axis. Boxes are sized to their content and centred on it, the
   way a drawn algorithm reads, rather than stretched to the full width.
   -------------------------------------------------------------------------- */

#container {
	position: relative;
	width: 100%;
	max-width: var(--measure);
	margin: 0 auto;
	padding: 20px var(--pad-x) 56px;
	text-align: center;
}

/* Shared step geometry. Each step carries its own incoming connector. */
.INFONODE,
.JUMPNODE,
.NODETEXT {
	position: relative;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin: var(--gap) auto 0;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Flow connectors

   ::before is the stem, ::after is the arrowhead. Both are drawn in the space
   above the step, in the margin created by --gap. This is why no step may be
   `overflow: hidden` — the previous release had that on .INFONODE and it would
   clip both.
   -------------------------------------------------------------------------- */

.INFONODE::before,
.JUMPNODE::before,
.NODETEXT::before {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(-1 * var(--gap));
	width: 2px;
	height: calc(var(--gap) - var(--arrow) + 1px);
	margin-left: -1px;
	background-color: var(--flow-line);
}

.INFONODE::after,
.JUMPNODE::after,
.NODETEXT::after {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(-1 * var(--arrow));
	width: 0;
	height: 0;
	margin-left: -5px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: var(--arrow) solid var(--flow-line);
}

/* The first step is the chart's entry point: nothing flows into it. */
#container > *:first-child {
	margin-top: 0;
}

#container > *:first-child::before,
#container > *:first-child::after {
	display: none;
}

/* --------------------------------------------------------------------------
   Process / statement box
   -------------------------------------------------------------------------- */

.INFONODE {
	overflow: visible; /* was hidden — would clip the connectors above */
	padding: 13px 22px;
	border: 2px solid var(--box-line);
	border-radius: var(--radius);
	background-color: var(--paper);
	color: var(--ink);
	font-size: 0.9375rem;
	line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Terminator

   flowchart.js adds .endNode to the last statement in a branch — the answer
   the clinician came for. Drawn as a stadium, the standard terminator shape,
   and filled so it closes the chart unambiguously.
   -------------------------------------------------------------------------- */

.INFONODE.endNode {
	padding: 14px 32px;
	border: 2px solid var(--teal);
	border-radius: 999px;
	background-color: var(--teal);
	color: #ffffff;
	font-size: 1rem;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Decision

   .preText holds the question. An elongated lozenge — a diamond with its top
   and bottom flattened — because a true 4-point diamond cannot hold text like
   "Inattention: can you name the months backwards from December to July?"
   without becoming enormous. The angled ends still read unmistakably as a
   decision.

   clip-path removes borders, so the outline is drawn as an inset shadow-free
   two-tone fill instead: the shape is filled with --decision-line and the
   inner area is inset via padding on a lighter background… which CSS cannot do
   in one box, so the shape carries the light fill and a slightly darker text
   colour supplies the weight. If clip-path is unsupported the box degrades to
   a tinted rectangle, which is still legible.
   -------------------------------------------------------------------------- */

.JUMPNODE {
	width: 100%;
	max-width: 100%;
	padding: 0;
}

.preText {
	display: block;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 15px 44px;
	-webkit-clip-path: polygon(
		0 50%,
		30px 0,
		calc(100% - 30px) 0,
		100% 50%,
		calc(100% - 30px) 100%,
		30px 100%
	);
	clip-path: polygon(
		0 50%,
		30px 0,
		calc(100% - 30px) 0,
		100% 50%,
		calc(100% - 30px) 100%,
		30px 100%
	);
	background-color: var(--decision-fill);
	color: var(--ink);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-shadow: none;
}

.preText p {
	/* Undo the old `width: 33%; padding: 10px 80px`, which squeezed every
	   question into a four-word ribbon. */
	width: auto;
	margin: 0 0 0.35em;
	padding: 0;
}

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

/* --------------------------------------------------------------------------
   Decision options — dropdown
   -------------------------------------------------------------------------- */

.options {
	position: relative;
	display: block;
	margin-top: var(--branch);
	height: auto !important;
}

/* Single stem from the decision down to the dropdown. */
.options::before {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(-1 * var(--branch));
	width: 2px;
	height: var(--branch);
	margin-left: -1px;
	background-color: var(--flow-line);
}

.jumpSelect {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	min-width: 12rem;
	max-width: 22rem;
	min-height: 44px;
	margin: 0 auto;
	padding: 10px 40px 10px 16px;
	border: 2px solid var(--box-line);
	border-radius: var(--radius);
	background-color: var(--paper);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236f7f8f' stroke-width='2'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	color: var(--ink);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	text-align-last: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.jumpSelect:hover {
	border-color: var(--teal-line);
	background-color: var(--teal-tint);
}

.jumpSelect:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 2px;
}

/* Option taken. */
.jumpSelect.chosen,
.jumpSelect.chosen:hover {
	border-color: var(--teal);
	background-color: var(--teal);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='2'/></svg>");
	color: #ffffff;
	font-weight: 600;
}

.jumpSelect option {
	background-color: var(--paper);
	color: var(--ink);
}

/* --------------------------------------------------------------------------
   Edge annotation (.NODETEXT)

   Appended when a branch's node text differs from its button label — extra
   detail attached to the edge that was taken. Drawn as a caption on the flow
   line, not as a box, so it doesn't read as another process step.
   -------------------------------------------------------------------------- */

.NODETEXT {
	padding: 3px 12px;
	background-color: var(--paper);
	color: var(--teal-deep);
	font-size: 0.8125rem;
	font-style: italic;
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   Body copy inside boxes
   -------------------------------------------------------------------------- */

.INFONODE p,
.NODETEXT p,
.nodeText p {
	margin: 0 0 0.45em;
	padding: 0;
}

.INFONODE p:last-child,
.NODETEXT p:last-child,
.nodeText p:last-child {
	margin-bottom: 0;
}

/* Lists never centre well; keep them ranged left inside a centred box. */
.INFONODE ol,
.INFONODE ul {
	display: inline-block;
	margin: 0.4em 0;
	padding-left: 1.2em;
	text-align: left;
}

.INFONODE b,
.preText b {
	font-weight: 600;
}

.INFONODE i,
.preText i {
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Inline reference popups

   No page in this content set currently uses popup:# links, but flowchart.js
   still builds them, so the styling is kept current rather than dropped.
   -------------------------------------------------------------------------- */

.popup {
	padding: 1px 7px;
	border: 1px solid var(--teal-line);
	border-radius: 999px;
	background-color: var(--teal-tint);
	color: var(--teal-deep);
	font-size: 0.9375em;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.popup.selected {
	border-color: var(--teal);
	background-color: var(--teal);
	color: #ffffff;
}

#popup {
	position: fixed;
	top: 20%;
	left: 5%;
	width: 90%;
	max-height: 60%;
	padding: 16px 18px;
	border: 1px solid var(--box-line);
	border-radius: 10px;
	background-color: var(--paper);
	color: var(--ink);
	font-size: 0.9375rem;
	text-align: left;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	touch-action: pan-y;
	display: none;
	z-index: 500;
	-webkit-box-shadow: 0 12px 32px rgba(27, 36, 48, 0.18);
	box-shadow: 0 12px 32px rgba(27, 36, 48, 0.18);
}

#popup h4 {
	margin: 0 0 0.4em;
	color: var(--teal-deep) !important;
	font-size: 0.8125rem;
	font-weight: 600;
}

#popup p {
	margin: 0 0 0.5em;
}

/* --------------------------------------------------------------------------
   Legacy hooks kept so old content and the native shell don't regress
   -------------------------------------------------------------------------- */

#image,
#showImage {
	display: none;
}

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

#title {
	color: var(--ink);
	font-size: 1.0625rem;
	font-weight: 600;
}

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

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

   The old stylesheet had no maximum measure, so on desktop a two-branch
   question produced two 600px-wide buttons.
   -------------------------------------------------------------------------- */

@media (min-width: 34rem) {
	:root {
		--gap: 40px;
		--branch: 32px;
		--bus: 16px;
		--chip-space: 9px;
		--pad-x: 28px;
	}

	#container {
		padding-top: 28px;
		padding-bottom: 72px;
	}

	.preText {
		padding: 17px 52px;
		font-size: 1.0625rem;
	}

	.INFONODE {
		padding: 15px 26px;
	}

}

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

/* .jumpTO chips are script-built <div>s with no tabindex, so they cannot be
   focused without changing flowchart.js. This covers anything focusable that
   content pages do contain. */
a:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 2px;
}

@media (prefers-contrast: more) {
	:root {
		--flow-line: #55697a;
		--box-line: #8b9dab;
	}

}

@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 {
	.jumpSelect {
		background-image: none;
	}

	#container {
		max-width: none;
	}

	.INFONODE,
	.jumpSelect {
		-webkit-box-shadow: none;
		box-shadow: none;
	}
}