/* Limona job-value calculator. Scoped to body.lm and the .roi root. White page, midnight navy panel, white text on navy,
   the logo yellow only as small accents (slider thumb ring, top rule on the result, focus ring on navy). */
body.lm .roi {
  --roi-navy: var(--lm-ink, #122340);
  --roi-navy-2: var(--lm-ink-2, #223A5E);
  --roi-yellow: var(--lm-accent, #FCB408);
  --roi-muted: var(--lm-muted, #4C5B75);
  background: #FFFFFF;
  color: var(--roi-navy);
  padding: 72px 0 80px;
  font-family: Figtree, "Segoe UI", system-ui, sans-serif;
  overflow-x: clip;
}
body.lm .roi *, body.lm .roi *::before, body.lm .roi *::after { box-sizing: border-box; }
body.lm .roi .roi-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ---------- heading ---------- */
body.lm .roi .roi-head { max-width: 46rem; margin-bottom: 32px; }
body.lm .roi h2 { margin: 0; color: var(--roi-navy); font-size: clamp(2.2rem, 4.2vw, 3.5rem); }
body.lm .roi .roi-intro { margin: 18px 0 0; font-size: 1.1rem; line-height: 1.6; color: var(--roi-muted); max-width: 40em; }

/* ---------- panel ---------- */
body.lm .roi .roi-panel {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: stretch;
  background: var(--roi-navy); color: #FFFFFF; border-radius: 24px; padding: 40px;
  box-shadow: 0 1px 2px rgba(18, 35, 64, .06), 0 24px 60px rgba(18, 35, 64, .18);
}
body.lm .roi .roi-inputs, body.lm .roi .roi-results { min-width: 0; }

body.lm .roi .roi-field { margin: 0 0 22px; min-width: 0; }
body.lm .roi .roi-field > label, body.lm .roi legend { display: block; padding: 0; margin: 0 0 8px; font-size: 1rem; font-weight: 600; color: #FFFFFF; line-height: 1.35; }
body.lm .roi .roi-controls { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem; gap: 16px; align-items: center; }
body.lm .roi .roi-msg { margin: 6px 0 0; min-height: 1.4em; font-size: .92rem; line-height: 1.4; color: #FFFFFF; font-weight: 600; }

/* number box */
body.lm .roi input[type="text"] {
  width: 100%; min-height: 48px; padding: 8px 12px; font: inherit; font-size: 1.05rem; font-variant-numeric: tabular-nums;
  color: var(--roi-navy); background: #FFFFFF; border: 2px solid #FFFFFF; border-radius: 12px;
}

/* slider: 44px tall hit area, thin track, white thumb with a small yellow ring */
body.lm .roi input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
body.lm .roi input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .45); }
body.lm .roi input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .45); }
body.lm .roi input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #FFFFFF; border: 4px solid var(--roi-yellow); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
body.lm .roi input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; border: 4px solid var(--roi-yellow); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }

/* focus on navy: a yellow ring, because it is the focus indicator and has to be seen */
body.lm .roi input:focus-visible { outline: 3px solid var(--roi-yellow); outline-offset: 3px; }
body.lm .roi input[type="range"]:focus-visible { outline-offset: 0; border-radius: 8px; }

/* plan: three segmented pills in a fieldset */
body.lm .roi fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
body.lm .roi .roi-pill {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px; margin: 0 10px 10px 0; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, .55); border-radius: 999px; font-size: 1rem; font-weight: 500; color: #FFFFFF; line-height: 1.25;
}
body.lm .roi .roi-pill input { width: 20px; height: 20px; margin: 0; accent-color: var(--roi-yellow); flex: none; }
body.lm .roi .roi-pill:has(input:checked) { border-color: #FFFFFF; background: var(--roi-navy-2); font-weight: 700; }
body.lm .roi .roi-pill:has(input:focus-visible) { outline: 3px solid var(--roi-yellow); outline-offset: 3px; }
body.lm .roi .roi-pill input:focus-visible { outline: none; }

/* ---------- result: one sentence, a fixed-height card so typing never moves the page ---------- */
body.lm .roi .roi-results { display: flex; }
body.lm .roi .roi-result {
  margin: 0; width: 100%; min-height: 11rem; display: flex; align-items: center;
  background: var(--roi-yellow); color: var(--roi-navy); border-radius: 16px; border-top: 0; padding: 24px 28px;
  font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.2; letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
body.lm .roi .roi-result[data-valid="false"] { font-family: Figtree, "Segoe UI", system-ui, sans-serif; font-size: 1.15rem; color: var(--roi-navy); letter-spacing: 0; }

/* ---------- smaller screens ---------- */
@media (max-width: 980px) {
  body.lm .roi .roi-panel { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px; }
  body.lm .roi .roi-result { min-height: 9rem; }
}
@media (max-width: 600px) {
  body.lm .roi { padding: 48px 0 56px; }
  body.lm .roi .roi-wrap { padding: 0 16px; }
  body.lm .roi .roi-panel { padding: 22px 16px; border-radius: 18px; }
  body.lm .roi .roi-controls { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  body.lm .roi .roi-pill { width: 100%; }
  body.lm .roi .roi-result { min-height: 10rem; padding: 20px; }
}
@media (prefers-reduced-motion: no-preference) { body.lm .roi .roi-pill { transition: background-color .15s ease, border-color .15s ease; } }