/* ==========================================================================
 * Engineering Tools (/tools/ and its three children).
 *
 * Enqueued as a real file - AirLift strips <style> blocks from cached HTML.
 * Everything is scoped under .sbn-tools so Elementor's global styles and this
 * sheet cannot bleed into each other. Palette and type follow the site:
 * navy #2c2e74, orange #f26622, Roboto.
 * ======================================================================= */

.sbn-tools {
	--t-navy: #2c2e74;
	--t-navy-2: #4a4ea8;
	--t-orange: #f26622;
	--t-orange-dark: #c9480b;
	--t-text: #2f3542;
	--t-muted: #5a6672;
	--t-line: #e3e6ef;
	--t-tint: #f6f7fb;
	--t-good: #17693f;
	--t-good-bg: #e7f5ed;
	--t-mid: #8a5a00;
	--t-mid-bg: #fff4dc;
	--t-bad: #b42318;
	--t-bad-bg: #fdecea;
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	color: var(--t-text);
	font-size: 17px;
	line-height: 1.65;
	background: #fff;
	overflow-x: hidden;
}

.sbn-tools *,
.sbn-tools *::before,
.sbn-tools *::after { box-sizing: border-box; }

.sbn-tools h1,
.sbn-tools h2,
.sbn-tools h3,
.sbn-tools h4 {
	color: var(--t-navy);
	font-family: inherit;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0 0 .6em;
	padding: 0;
	background: none;
	border: 0;
	text-transform: none;
}

.sbn-tools h2 { font-size: 1.75rem; }
.sbn-tools h3 { font-size: 1.2rem; }
.sbn-tools p { margin: 0 0 1em; }
.sbn-tools a { color: #0b5394; text-decoration: underline; text-underline-offset: 2px; }
.sbn-tools a:hover { color: var(--t-orange-dark); }
.sbn-tools [hidden] { display: none !important; }

.sbn-tools__wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.sbn-tools__narrow { max-width: 820px; }

/* ----- Hero ----- */
.sbn-tools__hero {
	background: linear-gradient(135deg, var(--t-navy) 0%, var(--t-navy-2) 100%);
	color: #fff;
	padding: 64px 0 56px;
}
.sbn-tools__eyebrow {
	display: block;
	color: #ff9a66;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.sbn-tools .sbn-tools__hero h1 {
	color: #fff;
	font-size: 2.6rem;
	max-width: 860px;
	margin-bottom: 16px;
}
.sbn-tools__lede { font-size: 1.12rem; color: #e4e6f5; max-width: 780px; margin: 0; }
.sbn-tools__hero-links { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.sbn-tools__hero-links a {
	color: #fff;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: .9rem;
	text-decoration: none;
}
.sbn-tools__hero-links a:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* ----- Sections ----- */
.sbn-tools__section { padding: 56px 0; }
.sbn-tools__section--tint { background: var(--t-tint); }
.sbn-tools__section-intro { max-width: 820px; color: var(--t-muted); margin-bottom: 28px; }

/* ----- Tool card + form ----- */
.sbn-tools__card {
	background: #fff;
	border: 1px solid var(--t-line);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(44, 46, 116, .07);
	padding: 32px;
}
.sbn-tools__grid-2 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}
.sbn-tools__fieldset { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.sbn-tools__legend,
.sbn-tools label.sbn-tools__label {
	display: block;
	font-weight: 700;
	color: var(--t-navy);
	font-size: .98rem;
	margin: 0 0 8px;
	padding: 0;
}
.sbn-tools__hint { display: block; font-size: .86rem; color: var(--t-muted); margin: 6px 0 0; line-height: 1.5; }
.sbn-tools__row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.sbn-tools__row > * { flex: 1 1 160px; min-width: 0; }
.sbn-tools__or { flex: 0 0 auto; color: var(--t-muted); font-size: .9rem; padding-bottom: 12px; }

.sbn-tools select,
.sbn-tools input[type="number"],
.sbn-tools input[type="search"] {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	color: var(--t-text);
	background: #fff;
	border: 1px solid #c9cedb;
	border-radius: 8px;
	padding: 11px 12px;
	min-height: 46px;
	line-height: 1.3;
}
.sbn-tools select:focus,
.sbn-tools input:focus {
	outline: 3px solid rgba(242, 102, 34, .35);
	outline-offset: 1px;
	border-color: var(--t-orange);
}

.sbn-tools__btn,
.sbn-tools button.sbn-tools__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--t-orange);
	color: #fff;
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	border: 0;
	border-radius: 8px;
	padding: 12px 22px;
	min-height: 46px;
	cursor: pointer;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.2;
}
.sbn-tools__btn:hover,
.sbn-tools button.sbn-tools__btn:hover { background: var(--t-orange-dark); color: #fff; }
.sbn-tools__btn--ghost,
.sbn-tools button.sbn-tools__btn--ghost {
	background: transparent;
	color: var(--t-navy);
	border: 1px solid #c9cedb;
}
.sbn-tools__btn--ghost:hover,
.sbn-tools button.sbn-tools__btn--ghost:hover { background: var(--t-tint); color: var(--t-navy); }
.sbn-tools__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* Radio / checkbox options as tappable tiles */
.sbn-tools__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.sbn-tools__option {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	border: 1px solid var(--t-line);
	border-radius: 10px;
	padding: 11px 13px;
	cursor: pointer;
	font-size: .95rem;
	line-height: 1.45;
	background: #fff;
	margin: 0;
	font-weight: 400;
	color: var(--t-text);
}
.sbn-tools__option:hover { border-color: #b9bfd3; }
.sbn-tools__option input { margin: 3px 0 0; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--t-orange); }
.sbn-tools__option:has(input:checked) { border-color: var(--t-orange); background: #fff7f2; }
.sbn-tools__option small { display: block; color: var(--t-muted); font-size: .84rem; }

/* ----- Result panels ----- */
.sbn-tools__result {
	border-radius: 12px;
	background: var(--t-tint);
	border: 1px solid var(--t-line);
	padding: 24px;
}
.sbn-tools__result-title {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--t-muted);
	margin: 0 0 12px;
}
.sbn-tools__error { color: var(--t-bad); font-weight: 700; margin: 0; }
.sbn-tools__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.sbn-tools__stat { background: #fff; border: 1px solid var(--t-line); border-radius: 10px; padding: 12px; text-align: center; }
.sbn-tools__stat-num { display: block; font-size: 1.7rem; font-weight: 700; color: var(--t-navy); line-height: 1.15; font-variant-numeric: tabular-nums; }
.sbn-tools__stat-lab { display: block; font-size: .8rem; color: var(--t-muted); line-height: 1.35; margin-top: 4px; }
.sbn-tools__stat--main .sbn-tools__stat-num { color: var(--t-orange-dark); }

.sbn-tools__verdict { border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; font-size: .97rem; }
.sbn-tools__verdict strong { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.sbn-tools__verdict--good { background: var(--t-good-bg); color: var(--t-good); }
.sbn-tools__verdict--marginal { background: var(--t-mid-bg); color: var(--t-mid); }
.sbn-tools__verdict--poor { background: var(--t-bad-bg); color: var(--t-bad); }
.sbn-tools__verdict p { margin: 0; color: var(--t-text); }

.sbn-tools__bar { height: 10px; border-radius: 999px; background: #d7dbf0; overflow: hidden; margin: 6px 0 4px; }
.sbn-tools__bar span { display: block; height: 100%; background: var(--t-orange); }
.sbn-tools__bar-legend { display: flex; justify-content: space-between; font-size: .8rem; color: var(--t-muted); }
.sbn-tools__note { font-size: .88rem; color: var(--t-muted); margin: 12px 0 0; }

/* ----- Tables ----- */
.sbn-tools__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--t-line); border-radius: 12px; background: #fff; }
.sbn-tools table.sbn-tools__table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
	margin: 0;
	border: 0;
}
.sbn-tools__table caption { text-align: left; padding: 14px 16px; color: var(--t-muted); font-size: .88rem; caption-side: bottom; }
.sbn-tools__table th,
.sbn-tools__table td {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--t-line);
	text-align: left;
	vertical-align: top;
	background: transparent;
}
.sbn-tools__table thead th {
	background: var(--t-navy);
	color: #fff;
	font-weight: 700;
	font-size: .86rem;
	letter-spacing: .02em;
	position: sticky;
	top: 0;
}
.sbn-tools__table thead th small { display: block; font-weight: 400; opacity: .8; }
.sbn-tools__table tbody tr:nth-child(even) td,
.sbn-tools__table tbody tr:nth-child(even) th { background: #fafbfd; }
.sbn-tools__table tbody th { color: var(--t-navy); font-weight: 700; }
.sbn-tools__table tbody th small { display: block; font-weight: 400; color: var(--t-muted); font-size: .82rem; }
.sbn-tools__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sbn-tools__table .is-active { box-shadow: inset 0 0 0 2px var(--t-orange); }
.sbn-tools__table thead th.is-active { background: var(--t-orange-dark); box-shadow: none; }

/* ----- Chips (ratings, levels) ----- */
.sbn-tools__chip {
	display: inline-block;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .03em;
	border-radius: 999px;
	padding: 3px 10px;
	white-space: nowrap;
	line-height: 1.4;
}
.sbn-tools__chip--r4, .sbn-tools__chip--likely { background: var(--t-good-bg); color: var(--t-good); }
.sbn-tools__chip--r3 { background: #e5f2f8; color: #0d5a7a; }
.sbn-tools__chip--r2, .sbn-tools__chip--possible { background: var(--t-mid-bg); color: var(--t-mid); }
.sbn-tools__chip--r1 { background: #fde9dc; color: #a33a06; }
.sbn-tools__chip--r0 { background: #eef0f4; color: #5a6672; }
.sbn-tools__chip--check { background: #eef0f4; color: #4a5563; }
.sbn-tools__chip--add { background: #fff; color: #a33a06; border: 1px dashed #f0a57c; padding: 2px 8px; margin-left: 4px; }
.sbn-tools__cell-note { display: block; font-size: .82rem; color: var(--t-muted); margin-top: 5px; line-height: 1.4; }

/* ----- Laser chart filter bar ----- */
.sbn-tools__filters {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	gap: 14px;
	align-items: end;
	margin-bottom: 18px;
}
.sbn-tools__count { font-size: .9rem; color: var(--t-muted); margin: 0 0 12px; }

/* ----- Adhesion results + cause cards ----- */
.sbn-tools__ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sbn-tools__rank { background: #fff; border: 1px solid var(--t-line); border-left: 4px solid #b9bfd3; border-radius: 10px; padding: 14px 16px; }
.sbn-tools__rank--likely { border-left-color: var(--t-good); }
.sbn-tools__rank--possible { border-left-color: #e0a100; }
.sbn-tools__rank a { font-weight: 700; font-size: 1.05rem; margin-left: 8px; }
.sbn-tools__rank p { margin: 6px 0 0; font-size: .93rem; color: var(--t-muted); }

.sbn-tools__causes { display: grid; gap: 18px; }
.sbn-tools__cause { background: #fff; border: 1px solid var(--t-line); border-radius: 12px; padding: 24px; scroll-margin-top: 90px; }
.sbn-tools__cause:target { border-color: var(--t-orange); box-shadow: 0 0 0 3px rgba(242, 102, 34, .18); }
.sbn-tools__cause-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 8px; }
.sbn-tools__cause-grid h4 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--t-orange-dark); margin-bottom: 6px; }
.sbn-tools__cause-grid ul { margin: 0; padding-left: 18px; font-size: .94rem; }
.sbn-tools__cause-grid li { margin-bottom: 4px; }
.sbn-tools__cause-more { margin: 14px 0 0; font-size: .92rem; }

/* ----- Hub cards ----- */
.sbn-tools__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sbn-tools__tile {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--t-line);
	border-radius: 14px;
	padding: 26px;
	text-decoration: none;
	color: var(--t-text);
	box-shadow: 0 10px 30px rgba(44, 46, 116, .06);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sbn-tools a.sbn-tools__tile { text-decoration: none; color: var(--t-text); }
.sbn-tools a.sbn-tools__tile:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(44, 46, 116, .12); border-color: #c9cedb; color: var(--t-text); }
.sbn-tools__tile-icon {
	width: 48px; height: 48px; border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	background: #fff1e9; color: var(--t-orange-dark); margin-bottom: 16px;
}
.sbn-tools__tile h2 { font-size: 1.25rem; }
.sbn-tools__tile p { font-size: .95rem; color: var(--t-muted); flex: 1 1 auto; }
.sbn-tools__tile-go { font-weight: 700; color: var(--t-orange-dark); }

/* ----- Prose, FAQ, related, CTA ----- */
.sbn-tools__prose { max-width: 820px; }
.sbn-tools__prose ul, .sbn-tools__prose ol { padding-left: 22px; margin: 0 0 1em; }
.sbn-tools__prose li { margin-bottom: 6px; }
.sbn-tools__formula {
	font-family: Consolas, "Courier New", monospace;
	font-size: .92rem;
	background: #fff;
	border: 1px solid var(--t-line);
	border-radius: 8px;
	padding: 12px 14px;
	overflow-x: auto;
	white-space: pre;
}

.sbn-tools__faq { max-width: 820px; }
.sbn-tools__faq details { border-bottom: 1px solid var(--t-line); padding: 16px 0; }
.sbn-tools__faq summary { cursor: pointer; font-weight: 700; color: var(--t-navy); font-size: 1.05rem; list-style: none; position: relative; padding-right: 30px; }
.sbn-tools__faq summary::-webkit-details-marker { display: none; }
.sbn-tools__faq summary::after { content: "+"; position: absolute; right: 4px; top: -2px; font-size: 1.4rem; color: var(--t-orange); }
.sbn-tools__faq details[open] summary::after { content: "\2212"; }
.sbn-tools__faq details p { margin: 10px 0 0; }

.sbn-tools__related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.sbn-tools__related li { margin: 0; }
.sbn-tools__related a {
	display: block; height: 100%;
	background: #fff; border: 1px solid var(--t-line); border-radius: 10px;
	padding: 14px 16px; text-decoration: none; color: var(--t-navy); font-weight: 700; font-size: .96rem;
}
.sbn-tools__related a small { display: block; color: var(--t-muted); font-weight: 400; font-size: .84rem; margin-top: 3px; }
.sbn-tools__related a:hover { border-color: var(--t-orange); color: var(--t-navy); }

.sbn-tools__cta {
	background: linear-gradient(135deg, var(--t-navy) 0%, var(--t-navy-2) 100%);
	color: #e4e6f5;
	border-radius: 16px;
	padding: 36px;
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.sbn-tools .sbn-tools__cta h2 { color: #fff; font-size: 1.5rem; margin-bottom: 6px; }
.sbn-tools__cta p { margin: 0; max-width: 640px; }
.sbn-tools__disclaimer { font-size: .85rem; color: var(--t-muted); max-width: 820px; margin-top: 18px; }

/* ----- Tablet ----- */
@media (max-width: 1024px) {
	.sbn-tools .sbn-tools__hero h1 { font-size: 2.2rem; }
	.sbn-tools__grid-2 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.sbn-tools__tiles { gap: 16px; }
	.sbn-tools__tile { padding: 20px; }
	.sbn-tools__related { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.sbn-tools__cause-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.sbn-tools__filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 760px) {
	.sbn-tools__tiles { grid-template-columns: minmax(0, 1fr); }
}

/* ----- Phone ----- */
@media (max-width: 640px) {
	.sbn-tools { font-size: 16px; }
	.sbn-tools__wrap { padding: 0 16px; }
	.sbn-tools__hero { padding: 40px 0 36px; }
	.sbn-tools .sbn-tools__hero h1 { font-size: 1.75rem; }
	.sbn-tools__lede { font-size: 1rem; }
	.sbn-tools h2 { font-size: 1.4rem; }
	.sbn-tools__section { padding: 40px 0; }
	.sbn-tools__card { padding: 20px 16px; border-radius: 12px; }
	.sbn-tools__result { padding: 18px 14px; }
	.sbn-tools__stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
	.sbn-tools__stat { padding: 10px 6px; }
	.sbn-tools__stat-num { font-size: 1.3rem; }
	.sbn-tools__tiles,
	.sbn-tools__related,
	.sbn-tools__cause-grid,
	.sbn-tools__filters { grid-template-columns: minmax(0, 1fr); }
	.sbn-tools__options { grid-template-columns: minmax(0, 1fr); }
	.sbn-tools__cause { padding: 18px 16px; }
	.sbn-tools__cta { padding: 26px 20px; }
	.sbn-tools__btn, .sbn-tools button.sbn-tools__btn { width: 100%; }
	.sbn-tools__row { gap: 6px; }
	.sbn-tools__row > * { flex-basis: 100%; }
	.sbn-tools__or { padding: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }

	/* Tables become one card per row; each cell labels itself. */
	.sbn-tools__table-wrap--cards { border: 0; background: transparent; overflow: visible; }
	.sbn-tools__table-wrap--cards table,
	.sbn-tools__table-wrap--cards tbody,
	.sbn-tools__table-wrap--cards tr,
	.sbn-tools__table-wrap--cards th,
	.sbn-tools__table-wrap--cards td { display: block; width: 100%; }
	.sbn-tools__table-wrap--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.sbn-tools__table-wrap--cards tr {
		background: #fff; border: 1px solid var(--t-line); border-radius: 12px;
		margin-bottom: 12px; overflow: hidden;
	}
	.sbn-tools__table-wrap--cards tr[hidden] { display: none; }
	.sbn-tools__table-wrap--cards tbody th { background: var(--t-tint) !important; font-size: 1.02rem; }
	.sbn-tools__table-wrap--cards td { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 10px; padding: 9px 14px; background: #fff !important; }
	.sbn-tools__table-wrap--cards td::before { content: attr(data-label); font-weight: 700; color: var(--t-navy); font-size: .84rem; }
	.sbn-tools__table-wrap--cards td:last-child { border-bottom: 0; }
	.sbn-tools__table-wrap--cards caption { display: block; padding: 4px 0 0; }
}
