/* Oil mix calculator — everything here is scoped to .omc so the 139 crawled
   pages keep the original look. Brand colours are the site's: blue #0099CC,
   dark #262626, oil #e8a33d. The greys and radii are softened. */

.omc {
	--omc-blue:#0099CC; --omc-blue-dk:#0483ae; --omc-dark:#1b1f24; --omc-grey:#5f6b76;
	--omc-line:#e4e8ed; --omc-line-soft:#eef1f5; --omc-bg:#f6f8fa; --omc-oil:#e8a33d;
	--omc-r:10px;
	--omc-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--omc-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 4.5l-7 7L3 8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--omc-wrench:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235f6b76'%3E%3Cpath d='M11.5 1a3.5 3.5 0 0 0-3.3 4.66L1.7 12.16a1 1 0 0 0 0 1.42l.72.72a1 1 0 0 0 1.42 0l6.5-6.5A3.5 3.5 0 1 0 11.5 1zm0 1.5a2 2 0 1 1 0 4 2 2 0 0 1 0-4z'/%3E%3C/svg%3E");
}

/* ---- the card itself ------------------------------------------------ */
/* .bdr only draws its border from 640px up, so match that breakpoint and
   leave the edge-to-edge mobile treatment the rest of the site uses. */
@media (min-width:640px) {
	section.omc.bdr {
		border:1px solid var(--omc-line);
		border-radius:14px;
		box-shadow:0 1px 2px rgba(16,24,40,.04), 0 4px 16px -8px rgba(16,24,40,.10);
		overflow:hidden;
	}
}
.omc .border-bottom { border-color:var(--omc-line-soft) !important; }
.omc h2 { letter-spacing:-.01em; }
.omc h3 { letter-spacing:-.005em; margin-bottom:.35rem; }
.omc article p, .omc article li { line-height:1.62; color:#33393f; }

/* ---- segmented mode switch ------------------------------------------ */
.omc-modes {
	display:flex; gap:4px; padding:4px;
	background:var(--omc-bg); border:1px solid var(--omc-line-soft); border-radius:12px;
}
.omc-modes button {
	flex:1 1 0; border:0; background:transparent; color:var(--omc-grey);
	font-size:13px; font-weight:600; padding:9px 6px; border-radius:8px; cursor:pointer;
	line-height:1.25; transition:background .16s, color .16s, box-shadow .16s;
}
.omc-modes button:hover { color:var(--omc-dark); }
.omc-modes button[aria-pressed="true"] {
	background:#fff; color:var(--omc-blue);
	box-shadow:0 1px 2px rgba(16,24,40,.10), 0 0 0 1px rgba(16,24,40,.04);
}

/* ---- fields ---------------------------------------------------------- */
.omc-label {
	display:block; margin-bottom:6px; font-size:11px; font-weight:700;
	color:var(--omc-grey); text-transform:uppercase; letter-spacing:.06em;
}
.omc .form-control, .omc .form-select {
	height:46px; font-size:15px; border:1px solid var(--omc-line);
	border-radius:var(--omc-r); color:var(--omc-dark); background-color:#fff;
	transition:border-color .16s, box-shadow .16s;
}
.omc .form-control { font-weight:600; }
.omc .form-control:focus, .omc .form-select:focus {
	border-color:var(--omc-blue); box-shadow:0 0 0 3px rgba(0,153,204,.14);
}
/* Rejoin the two halves of an input group after the radius override. */
.omc .input-group > .form-control { border-top-right-radius:0; border-bottom-right-radius:0; }
.omc .input-group > .form-select  { border-top-left-radius:0; border-bottom-left-radius:0; margin-left:-1px; }
.omc .input-group > .form-control:focus, .omc .input-group > .form-select:focus { z-index:3; }
/* Spinners crowd a 46px field and the chips already cover quick changes. */
.omc input[type="number"]::-webkit-outer-spin-button,
.omc input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.omc input[type="number"] { -moz-appearance:textfield; }

/* ---- equipment select ------------------------------------------------ */
/* Stays a native <select>: it gives the proper picker wheel on a phone and
   correct keyboard behaviour for free. Only the shell is restyled. */
.omc-select { position:relative; }
.omc-select::after {            /* chevron, drawn over the native one */
	content:""; position:absolute; right:15px; top:50%; width:11px; height:7px;
	margin-top:-3px; pointer-events:none; background-color:var(--omc-grey);
	transition:background-color .16s;
	-webkit-mask:var(--omc-chev) center/11px 7px no-repeat;
	        mask:var(--omc-chev) center/11px 7px no-repeat;
}
.omc-select:hover::after { background-color:var(--omc-dark); }
.omc-select:focus-within::after { background-color:var(--omc-blue); }

.omc-select .form-select {
	width:100%; padding:0 42px 0 42px;
	background-image:var(--omc-wrench);        /* leading glyph */
	background-repeat:no-repeat;
	background-position:left 15px center;
	background-size:16px 16px;
	font-weight:600; cursor:pointer;
	appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
.omc-select .form-select:hover { border-color:#cfd6de; }
/* Nothing chosen yet — read it as placeholder text, not a value. */
.omc-select .form-select:has(option[value=""]:checked) { color:var(--omc-grey); font-weight:500; }
.omc-select .form-select optgroup {
	font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
	color:var(--omc-grey); background:var(--omc-bg);
}
.omc-select .form-select option {
	font-size:14px; font-weight:500; letter-spacing:0; text-transform:none;
	color:var(--omc-dark); background:#fff; padding:8px 10px;
}

/* Confirmation of what a preset just changed. */
.omc-preset-note {
	display:inline-flex; align-items:center; gap:6px; margin:10px 0 0;
	padding:5px 11px 5px 9px; border-radius:999px; font-size:12px; font-weight:600;
	color:#0b6d8c; background:#eaf7fc; border:1px solid #c4e7f4;
}
.omc-preset-note::before {
	content:""; width:13px; height:13px; flex:0 0 13px; background-color:currentColor;
	-webkit-mask:var(--omc-check) center/13px 13px no-repeat;
	        mask:var(--omc-check) center/13px 13px no-repeat;
}

/* ---- ratio chips ----------------------------------------------------- */
.omc-chips { display:flex; flex-wrap:wrap; gap:7px; }
.omc-chips button {
	border:1px solid var(--omc-line); background:#fff; color:var(--omc-dark);
	font-size:13px; font-weight:600; padding:7px 14px; border-radius:999px; cursor:pointer;
	transition:all .16s;
}
.omc-chips button:hover { border-color:var(--omc-blue); color:var(--omc-blue); transform:translateY(-1px); }
.omc-chips button[aria-pressed="true"] {
	background:var(--omc-blue); border-color:var(--omc-blue); color:#fff;
	box-shadow:0 2px 8px -2px rgba(0,153,204,.55);
}

/* ---- result ---------------------------------------------------------- */
.omc-out {
	position:relative; padding:20px; border-radius:14px; background:#fff;
	border:1px solid var(--omc-line);
	box-shadow:0 1px 2px rgba(16,24,40,.04), 0 12px 24px -18px rgba(16,24,40,.35);
}
.omc-out::before {
	content:""; position:absolute; inset:0 0 auto; height:3px;
	border-radius:14px 14px 0 0;
	background:linear-gradient(90deg, var(--omc-blue), var(--omc-oil));
}
.omc-out-main {
	font-size:40px; font-weight:700; line-height:1.05; color:var(--omc-dark);
	letter-spacing:-.02em; word-break:break-word;
}
.omc-out-main span { font-size:17px; font-weight:600; color:var(--omc-grey); letter-spacing:0; }
.omc-out-sub { margin-top:4px; font-size:13px; color:var(--omc-grey); }

.omc-alt { display:flex; flex-wrap:wrap; gap:0; margin:16px 0 0; padding-top:14px;
	border-top:1px solid var(--omc-line-soft); }
.omc-alt div { flex:1 1 33%; min-width:92px; padding-right:10px; }
.omc-alt div + div { padding-left:14px; border-left:1px solid var(--omc-line-soft); }
.omc-alt dt { margin:0; font-size:10px; font-weight:700; color:var(--omc-grey);
	text-transform:uppercase; letter-spacing:.06em; }
.omc-alt dd { margin:3px 0 0; font-size:16px; font-weight:700; color:var(--omc-dark); }

/* ---- comparison chart ------------------------------------------------ */
/* Linear against the richest ratio shown, so 25:1 really does draw twice
   the length of 50:1. */
.omc-chart-row { display:flex; align-items:center; gap:10px; margin-bottom:6px; font-size:13px; }
.omc-chart-row:last-child { margin-bottom:0; }
.omc-chart-row b { flex:0 0 46px; text-align:right; font-weight:600; color:var(--omc-grey); }
.omc-chart-row div { flex:1 1 auto; }
.omc-chart-row i { display:block; height:18px; border-radius:5px; background:#dfe4ea;
	transition:width .28s cubic-bezier(.4,0,.2,1); }
.omc-chart-row span { flex:0 0 64px; color:var(--omc-grey); }
.omc-chart-row.is-active b, .omc-chart-row.is-active span { color:var(--omc-dark); font-weight:700; }
.omc-chart-row.is-active i {
	background:linear-gradient(90deg, #f0b75c, var(--omc-oil));
	box-shadow:0 1px 6px -1px rgba(232,163,61,.6);
}

/* ---- warning --------------------------------------------------------- */
.omc-warn { display:none; margin-top:14px; padding:11px 13px; border-radius:var(--omc-r);
	font-size:13px; font-weight:600; color:#8a5a00;
	background:#fff8ec; border:1px solid #f4dcae; }
.omc-warn.show { display:block; }

.omc .b-grey-btn { border-radius:var(--omc-r); padding:9px 18px; font-weight:600; }

/* ---- reference table -------------------------------------------------- */
.omc-table { width:100%; font-size:14px; }
.omc-table th, .omc-table td { padding:10px 12px; text-align:right; white-space:nowrap;
	border-bottom:1px solid var(--omc-line-soft); }
.omc-table th:first-child, .omc-table td:first-child { text-align:left; }
.omc-table thead th { font-size:11px; font-weight:700; letter-spacing:.06em;
	text-transform:uppercase; color:var(--omc-grey); border-bottom:1px solid var(--omc-line); }
.omc-table tbody tr:last-child td, .omc-table tbody tr:last-child th { border-bottom:0; }
.omc-table tbody tr.is-common td, .omc-table tbody tr.is-common th { background:#f2fafd; }
.omc-table tbody th { font-weight:700; color:var(--omc-dark); }

/* ---- faq -------------------------------------------------------------- */
.omc-faq { border-bottom:1px solid var(--omc-line-soft); }
.omc-faq:last-of-type { border-bottom:0; }
.omc-faq summary { position:relative; padding:15px 30px 15px 0; font-size:15px; font-weight:600;
	color:var(--omc-dark); cursor:pointer; list-style:none; transition:color .16s; }
.omc-faq summary::-webkit-details-marker { display:none; }
.omc-faq summary::after { content:"+"; position:absolute; right:2px; top:50%;
	transform:translateY(-50%); width:22px; height:22px; border-radius:50%;
	background:var(--omc-bg); color:var(--omc-blue); font-size:15px; font-weight:600;
	display:flex; align-items:center; justify-content:center; line-height:1; }
.omc-faq[open] summary::after { content:"\2212"; background:var(--omc-blue); color:#fff; }
.omc-faq summary:hover { color:var(--omc-blue); }
.omc-faq > div { padding:0 0 16px; font-size:14px; line-height:1.62; color:#33393f; }
.omc-faq > div p:last-child { margin-bottom:0; }

/* ---- numbered steps ---------------------------------------------------- */
.omc-steps { counter-reset:omc; list-style:none; padding-left:0; margin-bottom:0; }
.omc-steps li { counter-increment:omc; position:relative; padding-left:42px; margin-bottom:15px; }
.omc-steps li:last-child { margin-bottom:0; }
.omc-steps li::before { content:counter(omc); position:absolute; left:0; top:-1px;
	width:28px; height:28px; border-radius:50%; background:var(--omc-blue); color:#fff;
	font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;
	box-shadow:0 2px 6px -2px rgba(0,153,204,.7); }

@media (max-width:575.98px) {
	.omc-out-main { font-size:32px; }
	.omc-modes button { font-size:12px; padding:9px 2px; }
	.omc-alt div { flex:1 1 50%; min-width:0; }
	.omc-alt div + div { padding-left:12px; }
}