/* mk-vpd-calculator.css: /vpd-calculator/ in "the control room at night". Loaded on the calculator page only, after home.css.
   The calculator is a code module with its own script (#dscvpd); it is restyled ONLY here, through its own class names. Inputs
   on the left, the kPa readout on the right as a large amber mono numeral, the whole instrument one framed surface (its parts
   are unboxed inside it, separated by hairlines). The stage chart is framed beneath it. Visitor task: get a number. */

body.dsd #page-container .dsdm-vpd-hero {
	padding-top: 48px !important;
	padding-bottom: var(--dsdh-pad) !important;
}
body.dsd #page-container .dsdm-vpd-hero .dsdh-row--head { margin-bottom: 28px !important; gap: 16px; }
body.dsd #page-container .dsdm-vpd-h1 h1.et_pb_module_header {
	font-size: clamp(34px, 4.2vw, 54px) !important;
	line-height: 1.04 !important;
	letter-spacing: -0.03em !important;
}
body.dsd #page-container .dsdm-vpd-hero .dsdh-lead .et_pb_text_inner p { max-width: 70ch; }

/* ---------- the instrument ---------- */

body.dsd #page-container .dsdm-vpd-hero #dscvpd {
	--bg: var(--dsc-bg);
	--card: transparent;
	--line: var(--dsc-line);
	--text: var(--dsc-text);
	--muted: var(--dsc-muted-long);
	--dim: var(--dsc-muted);
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	grid-template-rows: auto auto 1fr;
	column-gap: 48px;
	row-gap: 24px;
	align-items: start;
	padding: 32px;
	background: var(--dsc-surface);
	border: 1px solid var(--dsc-line);
	border-radius: var(--dsc-r-card);
	font-family: var(--dsc-font);
	color: var(--dsc-text);
}
body.dsd #page-container #dscvpd .grid {
	grid-column: 1;
	grid-row: 1 / span 3;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin: 0;
}
body.dsd #page-container #dscvpd .field {
	padding: 0 0 20px;
	margin: 0 0 20px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--dsc-line);
	border-radius: 0;
}
body.dsd #page-container #dscvpd .field:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
body.dsd #page-container #dscvpd label {
	font-family: var(--dsc-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--dsc-muted);
}
body.dsd #page-container #dscvpd input[type="number"] {
	min-height: 48px;
	background: var(--dsc-bg);
	color: var(--dsc-text);
	border: 1px solid var(--dsc-line-strong);
	border-radius: 8px;
	font: 500 24px/1.2 var(--dsc-mono);
	box-shadow: none;
}
body.dsd #page-container #dscvpd input[type="number"]:focus { border-color: var(--dsc-accent); outline: 2px solid var(--dsc-accent); outline-offset: 1px; }
body.dsd #page-container #dscvpd input[type="range"] { accent-color: var(--dsc-accent); }
body.dsd #page-container #dscvpd .unit { border-color: var(--dsc-line-strong); }
body.dsd #page-container #dscvpd .unit button {
	min-height: 32px;
	padding: 4px 12px;
	font: 400 12px var(--dsc-mono);
	color: var(--dsc-muted-long);
}
body.dsd #page-container #dscvpd .unit button[aria-pressed="true"] {
	background: rgba(38, 198, 218, 0.16);
	color: var(--dsc-accent);
}
body.dsd #page-container #dscvpd .hint { font-size: 13px; line-height: 1.5; color: var(--dsc-muted); }

/* the readout: the leaf VPD numeral is the hero of the page */
body.dsd #page-container #dscvpd .out {
	grid-column: 2;
	grid-row: 1;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
}
body.dsd #page-container #dscvpd .tile {
	padding: 0 0 0 20px;
	background: transparent;
	border: 0;
	border-left: 1px solid var(--dsc-line);
	border-radius: 0;
}
body.dsd #page-container #dscvpd .tile:first-child { padding-left: 0; border-left: 0; }
body.dsd #page-container #dscvpd .tile small {
	font-size: 12px;
	line-height: 1.4;
	color: var(--dsc-muted);
}
body.dsd #page-container #dscvpd .tile small:first-child {
	font-family: var(--dsc-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
body.dsd #page-container #dscvpd .tile b {
	margin: 8px 0 6px;
	font-family: var(--dsc-mono);
	font-size: clamp(30px, 3.2vw, 40px);
	font-weight: 400;
	color: var(--dsc-warn);
}
body.dsd #page-container #dscvpd .tile:first-child b {
	font-size: clamp(56px, 7vw, 92px);
	letter-spacing: -0.03em;
	line-height: 0.95;
}
body.dsd #page-container #dscvpd .band {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	padding: 20px 0 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--dsc-line);
	border-radius: 0;
}
body.dsd #page-container #dscvpd .band strong { font-size: 18px; font-weight: 600; color: var(--dsc-text); }
body.dsd #page-container #dscvpd .band p { font-size: 15px; }
body.dsd #page-container #dscvpd .stages {
	grid-column: 2;
	grid-row: 3;
	margin: 0;
	align-self: end;
}
body.dsd #page-container #dscvpd .stage {
	padding: 10px 12px;
	background: transparent;
	border: 1px solid var(--dsc-line);
	border-radius: 10px;
	font-family: var(--dsc-mono);
	font-size: 12px;
	color: var(--dsc-muted) !important;
	opacity: 1;
}
body.dsd #page-container #dscvpd .stage span { font: 600 14px/1.3 var(--dsc-font); color: var(--dsc-muted-long); }
body.dsd #page-container #dscvpd .stage.on {
	border-color: var(--dsc-accent);
	color: var(--dsc-accent) !important;
}
body.dsd #page-container #dscvpd .stage.on span { color: var(--dsc-text); }

body.dsd #page-container .dsdm-vpd-noscript p {
	margin: 12px 0 0;
	font-family: var(--dsc-mono);
	font-size: 12px;
	color: var(--dsc-muted);
}

/* ---------- the stage chart, framed ---------- */

body.dsd #page-container .dsdm-vpd-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--dsc-muted-long);
}
body.dsd #page-container .dsdm-vpd-legend li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
body.dsd #page-container .dsdm-vpd-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
body.dsd #page-container .dsdm-vpd-b0 { background: var(--dsc-raised); }
body.dsd #page-container .dsdm-vpd-b1 { background: rgba(38, 198, 218, 0.22); }
body.dsd #page-container .dsdm-vpd-b2 { background: rgba(102, 187, 106, 0.26); }
body.dsd #page-container .dsdm-vpd-b3 { background: rgba(255, 183, 77, 0.26); }
body.dsd #page-container .dsdm-vpd-b4 { background: rgba(239, 83, 80, 0.3); }
body.dsd #page-container .dsdm-vpd-tablewrap {
	overflow-x: auto;
	background: var(--dsc-surface);
	border: 1px solid var(--dsc-line);
	border-radius: var(--dsc-r-card);
}
body.dsd #page-container .dsdm-vpd-tablewrap:focus-visible { outline: 2px solid var(--dsc-accent); outline-offset: 2px; }
body.dsd #page-container table.dsdm-vpd-table { width: 100%; min-width: 720px; margin: 0; border: 0; border-collapse: collapse; }
body.dsd #page-container table.dsdm-vpd-table :is(th, td) {
	padding: 8px 6px;
	border: 0;
	font-family: var(--dsc-mono);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--dsc-text);
}
body.dsd #page-container table.dsdm-vpd-table :is(thead th, tbody th) { background: transparent; font-size: 12px; font-weight: 400; color: var(--dsc-muted); }
body.dsd #page-container table.dsdm-vpd-table tbody th { text-align: right; padding-right: 12px; white-space: nowrap; }
body.dsd #page-container p.dsdm-vpd-cap { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--dsc-muted); }

/* ---------- explanatory sections ---------- */

body.dsd #page-container .dsdm-vpd-stages-row.dsdh-row,
body.dsd #page-container .dsdm-vpd-readings.dsdh-row { gap: 0; align-items: stretch; }
body.dsd #page-container .dsdm-vpd-stage { gap: 8px !important; }
body.dsd #page-container .dsdm-vpd-rangemod .et_pb_text_inner p.dsdm-vpd-range {
	margin: 0;
	font-family: var(--dsc-mono);
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1;
	color: var(--dsc-warn);
}
body.dsd #page-container .dsdm-vpd-range span { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dsc-muted); }
body.dsd #page-container .dsdm-vpd-tip .et_pb_text_inner p { max-width: 72ch; }
body.dsd #page-container .dsdm-vpd-notes > .dsdm-vpd-note { gap: 12px !important; padding-top: 20px !important; border-top: 1px solid var(--dsc-line); }
body.dsd #page-container .dsdm-vpd-note .et_pb_text_inner p { font-size: 15px; line-height: 1.6; }
body.dsd #page-container .dsdm-vpd-note sub { font-size: 0.75em; }
body.dsd #page-container .dsdm-vpd-dsc .dsdh-row--head { margin-bottom: 40px !important; }

@media (min-width: 768px) {
	body.dsd #page-container .dsdm-vpd-readings.dsdh-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
	body.dsd #page-container .dsdm-vpd-stages-row.dsdh-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* a phone: the inputs first (so the reader can change what the result is made from), then the readout, the band and the stages */
@media (max-width: 900px) {
	body.dsd #page-container .dsdm-vpd-hero #dscvpd { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 20px; row-gap: 20px; }
	body.dsd #page-container #dscvpd .grid { grid-column: 1; grid-row: 1; }
	body.dsd #page-container #dscvpd .out { grid-column: 1; grid-row: 2; }
	body.dsd #page-container #dscvpd .band { grid-column: 1; grid-row: 3; }
	body.dsd #page-container #dscvpd .stages { grid-column: 1; grid-row: 4; }
}
@media (max-width: 767px) {
	body.dsd #page-container .dsdm-vpd-hero { padding-top: 32px !important; }
	body.dsd #page-container #dscvpd .out { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
	body.dsd #page-container #dscvpd .tile:first-child { grid-column: 1 / -1; }
	body.dsd #page-container #dscvpd .tile:nth-child(2) { padding-left: 0; border-left: 0; }
	body.dsd #page-container .dsdm-vpd-stages-row.dsdh-row { grid-template-columns: minmax(0, 1fr); }
	body.dsd #page-container .dsdm-vpd-stages-row > .dsdh-col + .dsdh-col,
	body.dsd #page-container .dsdm-vpd-readings > .dsdh-col + .dsdh-col { border-left: 0; border-top: 1px solid var(--dsc-line); }
}

/* ---------- the chart as an image (SEO wave 6): one framed picture above the crawlable table ---------- */
body.dsd #page-container .dsdm-vpd-fig-row { margin-bottom: 24px; }
body.dsd #page-container figure.dsdm-vpd-fig { margin: 0; }
body.dsd #page-container figure.dsdm-vpd-fig img {
	display: block;
	width: 100%;
	max-width: 1000px;
	height: auto;
	border: 1px solid var(--dsc-line);
	border-radius: var(--dsc-r-card);
	background: var(--dsc-surface);
}
body.dsd #page-container figure.dsdm-vpd-fig figcaption { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--dsc-muted-long); }
body.dsd #page-container figure.dsdm-vpd-fig figcaption a { color: var(--dsc-link); border-bottom: 1px solid rgba(79, 157, 255, 0.35); }