/* Scoped to the free stair calculator. */
.calc-section {
	padding-top: 12px;
}
.stair-calc {
	display: grid;
	grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	margin: 8px 0 40px;
}
.stair-form {
	background: var(--white);
	border: 1px solid var(--line);
	border-top: 3px solid var(--gold);
	border-radius: 6px;
	padding: 18px 20px 20px;
}
.stair-form h2 {
	font-size: 20px;
	color: var(--navy);
	margin: 0 0 4px;
}
.stair-form .hint {
	font-size: 13px;
	color: var(--muted);
	margin: 0 0 14px;
}
.stair-form fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 6px;
	min-width: 0;
}
.stair-form legend {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold);
	font-weight: 600;
	margin: 14px 0 6px;
	padding: 0;
}
.field {
	display: block;
	margin: 0 0 12px;
}
.field span {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--navy);
	margin-bottom: 4px;
}
.field small {
	display: block;
	font-size: 13px;
	color: #4a4a43;
	margin-top: 3px;
}
.field input {
	width: 100%;
	font: inherit;
	font-size: 17px;
	padding: 9px 11px;
	border: 1px solid #b9ab8c;
	border-radius: 4px;
	background: var(--white);
	color: var(--ink);
}
.field input:focus {
	outline: 2px solid var(--gold);
	outline-offset: 1px;
	background: var(--white);
}
.field input[aria-invalid="true"] {
	border-color: #a33;
	background: #fbeeee;
}
.stair-out {
	min-width: 0;
}
.stair-empty {
	padding: 22px;
	border: 1px dashed var(--line);
	border-radius: 6px;
	color: var(--muted);
}
.verdict {
	font-weight: 600;
	padding: 12px 16px;
	border-radius: 5px;
	margin: 0 0 16px;
}
.verdict-pass {
	background: var(--green-bg);
	color: var(--green);
}
.verdict-fail {
	background: #f7e3e0;
	color: #8a2a1f;
}
.big-nums {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 18px;
}
.big {
	background: var(--navy);
	color: #fff;
	border-radius: 6px;
	padding: 14px 16px;
	box-shadow: 0 2px 0 var(--gold);
}
.big .lbl {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #cfd6e4;
}
.big .num {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.15;
	margin-top: 2px;
}
.big .sub2 {
	font-size: 13px;
	color: #cfd6e4;
}
.layout-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 6px;
	margin: 0 0 18px;
	padding: 4px 16px;
}
.layout-list dt,
.layout-list dd {
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
	margin: 0;
	font-size: 14.5px;
}
.layout-list dt {
	color: var(--ink);
}
.layout-list dt small {
	display: block;
	color: #4a4a43;
	font-size: 13px;
}
.layout-list dd {
	text-align: right;
	font-weight: 700;
	color: var(--navy);
	padding-left: 12px;
}
.layout-list dt:nth-last-of-type(1),
.layout-list dd:last-of-type {
	border-bottom: 0;
}
.stair-out h3 {
	font-size: 17px;
	color: var(--navy);
	margin: 22px 0 8px;
}
.opt-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--white);
	border: 1px solid var(--line);
	font-size: 14.5px;
}
.opt-table th,
.opt-table td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--line);
	text-align: left;
}
.opt-table th {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 600;
}
.opt-table button {
	font: inherit;
	font-weight: 600;
	color: var(--navy);
	background: transparent;
	border: 1px solid var(--navy);
	border-radius: 3px;
	padding: 4px 10px;
	cursor: pointer;
	min-height: 36px;
}
.opt-table tr.is-chosen td {
	background: var(--amber-bg);
}
.opt-table tr.is-chosen button {
	background: var(--navy);
	color: #fff;
}
.checks {
	list-style: none;
	padding: 0;
	margin: 0;
}
.chk {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: baseline;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14.5px;
}
.chk-tag {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	padding: 3px 0;
	border-radius: 3px;
}
.chk-pass .chk-tag {
	background: var(--green-bg);
	color: var(--green);
}
.chk-fail .chk-tag {
	background: #f7e3e0;
	color: #8a2a1f;
}
.chk-info .chk-tag {
	background: var(--amber-bg);
	color: var(--amber);
}
.chk-cite {
	font-size: 12.5px;
	color: var(--muted);
	white-space: nowrap;
}
.calc-note {
	font-size: 13px;
	color: var(--muted);
	margin-top: 14px;
}
@media (max-width: 820px) {
	.stair-calc {
		grid-template-columns: minmax(0, 1fr);
	}
	.chk {
		grid-template-columns: 52px minmax(0, 1fr);
	}
	.chk-cite {
		grid-column: 2;
	}
}
.mode-switch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0 0 12px;
	font-size: 14px;
}
.mode-switch .mode-lbl {
	width: 100%;
	font-weight: 600;
	color: var(--navy);
}
.mode-switch label,
.draw-toggles label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	min-height: 32px;
}
.mode-switch input,
.draw-toggles input {
	accent-color: var(--navy);
	width: 17px;
	height: 17px;
}
.opt-table td.bad {
	color: #8a2a1f;
	font-weight: 600;
}
.stair-fig {
	margin: 0 0 18px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 10px 12px 12px;
}
.draw-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 16px;
	font-size: 13.5px;
	margin-bottom: 6px;
}
.stair-drawing {
	overflow-x: auto;
}
.stair-drawing svg {
	display: block;
	width: 100%;
	height: auto;
}
.stair-fig figcaption,
.photo-fig figcaption {
	font-size: 13px;
	color: #4a4a43;
	margin-top: 6px;
}
.photo-fig {
	margin: 18px 0;
}
.photo-fig img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	border: 1px solid var(--line);
}
/* drawing parts: real-material tones, gold for the measured lines */
.stair-drawing .sub { fill: #d8cdb6; }
.stair-drawing .finish { fill: #8a6a48; }
.stair-drawing .finish.hl { fill: #b5562f; }
.stair-drawing .joist { fill: #e9d9b8; stroke: #b99c6c; stroke-width: 0.3; }
.stair-drawing .header { fill: #c9a874; stroke: #8c6c3e; stroke-width: 0.3; }
.stair-drawing .stringer { fill: #e3c89a; stroke: #9c7a4a; stroke-width: 0.35; }
.stair-drawing .riserb { fill: #f4ead6; stroke: #9c7a4a; stroke-width: 0.25; }
.stair-drawing .tread { fill: #b98a55; stroke: #7a5631; stroke-width: 0.3; }
.stair-drawing .floorline { stroke: #7a5631; stroke-width: 0.6; }
.stair-drawing .hzone { fill: rgba(20, 33, 61, 0.07); }
.stair-drawing .hline { stroke: #14213d; stroke-width: 0.45; stroke-dasharray: 2 1.5; }
.stair-drawing .noseline { stroke: #b98b2f; stroke-width: 0.7; stroke-dasharray: 3 1.6; }
.stair-drawing .dim { stroke: #14213d; stroke-width: 0.35; }
.stair-drawing .dim.acc { stroke: #b98b2f; stroke-width: 0.6; }
.stair-drawing .dim.acc2 { stroke: #2f6b2f; stroke-width: 0.5; }
.stair-drawing .ext { stroke: #5c5c54; stroke-width: 0.2; stroke-dasharray: 1 1; }
.stair-drawing .hlbox { fill: none; stroke: #b5562f; stroke-width: 0.6; stroke-dasharray: 1.6 1; }
.stair-drawing .rail { stroke: #14213d; stroke-width: 1.4; stroke-linecap: round; }
.stair-drawing .post { stroke: #6d6a60; stroke-width: 0.6; }
.stair-drawing text { font-family: Inter, -apple-system, sans-serif; fill: #1a1a1a; paint-order: stroke; stroke: rgba(255, 255, 255, 0.92); stroke-width: 1.3; stroke-linejoin: round; }
.stair-drawing .newel { stroke: #14213d; stroke-width: 2.2; }
.stair-drawing .lbl.acc { fill: #8a6410; font-weight: 600; }
.stair-drawing .lbl.acc2 { fill: #2f6b2f; font-weight: 600; }
.stair-drawing .lbl.warn { fill: #b5562f; font-weight: 600; }
.stair-drawing .lbl.head { fill: #14213d; font-weight: 700; }
.stair-drawing .lbl.small { fill: #5c5c54; }
.field-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 12px;
}
.field-pair[hidden] {
	display: none;
}
@media (max-width: 420px) {
	.field-pair {
		grid-template-columns: 1fr;
	}
}
details.explain {
	margin: 4px 0 6px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--white);
	font-size: 14px;
}
details.explain summary {
	cursor: pointer;
	padding: 9px 12px;
	font-weight: 600;
	color: var(--navy);
}
details.explain[open] summary {
	border-bottom: 1px solid var(--line);
}
details.explain p {
	margin: 10px 12px;
	line-height: 1.5;
}
.stair-drawing .ghost { opacity: 0.25; }
.stair-drawing .stringer.em { fill: #e3c89a; stroke: #b5562f; stroke-width: 0.8; }
.stair-drawing .ceiling { stroke: #14213d; stroke-width: 0.8; }
.stair-drawing .beam { fill: #8c6c3e; stroke: #5c4426; stroke-width: 0.4; }
.stair-drawing .beam.bad { fill: #b5562f; }
.stair-drawing .dim.bad { stroke: #b5562f; stroke-width: 0.7; }
.stair-drawing .lbl.bad { fill: #b5562f; font-weight: 700; }
.stair-drawing .dim.warn { stroke: #b5562f; stroke-width: 0.6; }
.stair-drawing polyline.hline { fill: none; }