/*
 * Mashin Irani — Octane Calculator page (/octane-calculator/).
 * Builds on the shared mi.css design system (.container/.section/.eyebrow/.btn/.breadcrumb) and adds the
 * moc-* layout. Frozen short tokens with hex fallbacks throughout. RTL-first. Never uses --space-7
 * (undefined site-wide).
 */

/* ---------------------------------------------------------------- hero ---- */
.moc-hero { padding-block: var(--space-8, 32px) var(--space-4, 16px); }
.moc-hero h1 { font-size: clamp(1.5rem, 4.5vw, 2.15rem); line-height: 1.3; margin: 0 0 var(--space-3, 12px); color: var(--navy-900, #102134); }
.moc-lede { max-width: 62ch; color: var(--text-secondary, #404751); line-height: 1.85; margin: 0; font-size: 1.02rem; }

/* -------------------------------------------------------------- layout ---- */
.moc-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-5, 20px); align-items: start; }
@media (max-width: 900px) { .moc-wrap { grid-template-columns: minmax(0, 1fr); } }

.moc-card {
	background: var(--bg-elevated, #fff);
	border: 1px solid var(--border, #d9cbc2);
	border-radius: var(--radius-lg, 12px);
	box-shadow: var(--shadow-e1, 0 1px 2px rgba(16, 33, 52, .06));
	padding: var(--space-5, 20px);
}
@media (min-width: 901px) { .moc-form { position: sticky; top: 96px; } }

/* --------------------------------------------------------------- steps ---- */
.moc-step + .moc-step { margin-top: var(--space-5, 20px); padding-top: var(--space-5, 20px); border-top: 1px dashed var(--border, #d9cbc2); }
.moc-step__head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3, 12px); }
.moc-step__head b { font-size: 1rem; color: var(--navy-900, #102134); }
.moc-step__n {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--navy-900, #102134); color: var(--gold-300, #e0c58f);
	font-size: .8rem; font-weight: 700;
}

.moc-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.moc-chip {
	display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
	flex: 1 1 110px; min-width: 0;
	padding: 12px 10px;
	background: var(--bg-sunken, #ece4da);
	border: 1.5px solid transparent;
	border-radius: var(--radius-md, 8px);
	color: var(--navy-900, #102134);
	font: inherit; font-size: .9rem; font-weight: 600;
	cursor: pointer; text-align: center;
	transition: border-color .18s, background .18s, transform .18s;
}
.moc-chip:hover { transform: translateY(-2px); }
.moc-chip svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; opacity: .75; }
.moc-chip__c { font-size: .72rem; font-weight: 500; font-style: normal; color: var(--text-tertiary, #6b7280); }
.moc-chip.is-on {
	background: var(--bg-elevated, #fff);
	border-color: var(--navy-900, #102134);
	box-shadow: var(--shadow-e2, 0 4px 12px rgba(16, 33, 52, .08));
}
.moc-chip.is-on svg { opacity: 1; color: var(--text-gold, #7f6220); }

/* -------------------------------------------------------------- select ---- */
.moc-selectwrap { position: relative; }
.moc-select {
	width: 100%; appearance: none; -webkit-appearance: none;
	padding: 14px 14px 14px 40px;
	font: inherit; font-size: 1rem; font-weight: 600;
	color: var(--navy-900, #102134);
	background: var(--bg-sunken, #ece4da);
	border: 1.5px solid var(--border, #d9cbc2);
	border-radius: var(--radius-md, 8px);
	cursor: pointer;
}
.moc-select:focus-visible { outline: 2px solid var(--navy-900, #102134); outline-offset: 2px; }
.moc-select:disabled { opacity: .55; cursor: not-allowed; }
.moc-selectwrap__chev {
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%) rotate(-90deg);
	width: 16px; height: 16px; fill: none; stroke: var(--text-tertiary, #6b7280); stroke-width: 2;
	pointer-events: none;
}
.moc-none { margin: 10px 0 0; font-size: .875rem; color: var(--clay-error, #b4402e); line-height: 1.7; }

/* -------------------------------------------------------------- result ---- */
.moc-result { min-height: 320px; }
.moc-placeholder {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
	min-height: 280px; text-align: center; color: var(--text-tertiary, #6b7280);
}
.moc-placeholder svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.3; opacity: .45; }
.moc-placeholder b { color: var(--navy-900, #102134); font-size: 1.05rem; }
.moc-placeholder span { font-size: .9rem; max-width: 34ch; line-height: 1.8; }

.moc-res__head { margin-bottom: var(--space-4, 16px); }
.moc-res__head h2 { margin: 2px 0 4px; font-size: 1.5rem; color: var(--navy-900, #102134); }
.moc-res__meta { font-size: .82rem; color: var(--text-tertiary, #6b7280); }

.moc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: var(--space-4, 16px); }
.moc-stat {
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	padding: 12px 8px; text-align: center;
	background: var(--bg-sunken, #ece4da); border-radius: var(--radius-md, 8px);
}
.moc-stat svg { width: 18px; height: 18px; fill: none; stroke: var(--text-tertiary, #6b7280); stroke-width: 1.7; }
.moc-stat b { font-size: 1.15rem; color: var(--navy-900, #102134); }
.moc-stat span { font-size: .72rem; color: var(--text-tertiary, #6b7280); line-height: 1.5; }
.moc-stat.is-hl { background: var(--navy-900, #102134); }
.moc-stat.is-hl b { color: var(--gold-300, #e0c58f); }
.moc-stat.is-hl span, .moc-stat.is-hl svg { color: rgba(255, 255, 255, .72); stroke: rgba(255, 255, 255, .72); }

.moc-alert {
	display: flex; align-items: flex-start; gap: 8px;
	margin: 0 0 var(--space-4, 16px); padding: 10px 12px;
	font-size: .85rem; line-height: 1.75;
	background: rgba(47, 133, 90, .09); color: var(--success, #2f855a);
	border-radius: var(--radius-md, 8px);
}
.moc-alert svg { width: 17px; height: 17px; flex: none; margin-top: 3px; fill: none; stroke: currentColor; stroke-width: 2; }

/* the headline number */
.moc-dose {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	padding: var(--space-5, 20px) var(--space-4, 16px); text-align: center;
	background: linear-gradient(180deg, rgba(224, 197, 143, .18), rgba(224, 197, 143, .05));
	border: 1px solid var(--gold-300, #e0c58f); border-radius: var(--radius-lg, 12px);
	margin-bottom: var(--space-4, 16px);
}
.moc-dose__lbl { font-size: .85rem; color: var(--text-secondary, #404751); font-weight: 600; }
.moc-dose__val { font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.15; color: var(--navy-900, #102134); font-weight: 800; }
.moc-dose__sub { font-size: .88rem; color: var(--text-secondary, #404751); }
.moc-dose__sub b { color: var(--navy-900, #102134); }
.moc-dose__for { font-size: .76rem; color: var(--text-tertiary, #6b7280); }

/* product + direct buy */
.moc-prod {
	display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-4, 16px);
	padding: var(--space-4, 16px); margin-bottom: var(--space-4, 16px);
	background: var(--bg-sunken, #ece4da); border-radius: var(--radius-lg, 12px);
}
.moc-prod__img {
	display: flex; align-items: center; justify-content: center;
	background: var(--bg-elevated, #fff); border-radius: var(--radius-md, 8px);
	aspect-ratio: 1; overflow: hidden;
}
.moc-prod__img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.moc-prod__img svg { width: 34px; height: 34px; fill: none; stroke: var(--text-tertiary, #6b7280); stroke-width: 1.4; }
.moc-prod__body { min-width: 0; }
.moc-prod__label {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: .72rem; font-weight: 700; color: var(--success, #2f855a);
	background: rgba(47, 133, 90, .1); padding: 3px 9px; border-radius: 999px;
}
.moc-prod__label svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.moc-prod__body h3 { margin: 8px 0 6px; font-size: 1rem; line-height: 1.6; }
.moc-prod__body h3 a { color: var(--navy-900, #102134); text-decoration: none; }
.moc-prod__body h3 a:hover { text-decoration: underline; }
.moc-prod__price b { font-size: 1.2rem; color: var(--navy-900, #102134); }
.moc-prod__price small { color: var(--text-tertiary, #6b7280); }
.moc-prod__oos { margin: 6px 0 0; font-size: .82rem; color: var(--clay-error, #b4402e); }
.moc-prod__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.moc-prod__acts .btn { flex: 1 1 190px; justify-content: center; }
.moc-prod__acts .btn svg { width: 18px; height: 18px; }

/* supporting facts */
.moc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: var(--space-4, 16px); }
.moc-fact {
	display: flex; flex-direction: column; gap: 3px;
	padding: 12px; border: 1px solid var(--border, #d9cbc2); border-radius: var(--radius-md, 8px);
}
.moc-fact svg { width: 18px; height: 18px; fill: none; stroke: var(--text-gold, #7f6220); stroke-width: 1.7; }
.moc-fact b { font-size: .95rem; color: var(--navy-900, #102134); }
.moc-fact span { font-size: .75rem; color: var(--text-tertiary, #6b7280); line-height: 1.6; }

/* usage steps */
.moc-usage { padding: var(--space-4, 16px); background: var(--bg-sunken, #ece4da); border-radius: var(--radius-lg, 12px); }
.moc-usage h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 1rem; color: var(--navy-900, #102134); }
.moc-usage h3 svg { width: 18px; height: 18px; fill: none; stroke: var(--text-gold, #7f6220); stroke-width: 1.7; }
.moc-usage ol { margin: 0; padding-inline-start: 1.3em; }
.moc-usage li { font-size: .9rem; line-height: 1.9; color: var(--text-secondary, #404751); }
.moc-usage li::marker { color: var(--text-gold, #7f6220); font-weight: 700; }

.moc-more {
	display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-4, 16px);
	font-size: .9rem; font-weight: 700; color: var(--link, #3c507d); text-decoration: none;
}
.moc-more:hover { text-decoration: underline; }
.moc-more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; transform: scaleX(-1); }

/* ------------------------------------------------------- empty + note ----- */
.moc-empty {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: var(--space-8, 32px); text-align: center;
	background: var(--bg-sunken, #ece4da); border-radius: var(--radius-lg, 12px);
}
.moc-empty svg { width: 40px; height: 40px; fill: none; stroke: var(--text-tertiary, #6b7280); stroke-width: 1.4; }
.moc-empty b { color: var(--navy-900, #102134); }
.moc-empty span { font-size: .88rem; color: var(--text-secondary, #404751); }

.moc-note {
	display: flex; align-items: flex-start; gap: 8px;
	max-width: var(--reading, 68ch); margin: 0 auto var(--space-8, 32px);
	font-size: .82rem; line-height: 1.9; color: var(--text-tertiary, #6b7280);
}
.moc-note svg { width: 16px; height: 16px; flex: none; margin-top: 4px; fill: none; stroke: currentColor; stroke-width: 1.7; }