/* ==========================================================================
   MEH Calculators — shared stylesheet
   Brand: MEH Light (knowledge/visual/systems/meh-light)
   Scope: everything lives under .meh-calc. Nothing here touches the theme.

   Canon rules honoured:
   - paper / ink / orange only. No gradients, no shadows, no glows.
   - orange is a fill or a stroke. Text on orange is always ink.
     Orange is never used as text on paper (2.6:1, fails contrast).
   - outlines do the work: 3px ink is the base weight.
   - Calibri with Carlito fallback, nothing else.
   Type sizes are scaled down from the carousel scale for web reading.
   ========================================================================== */

.meh-calc {
  /* MEH Light tokens */
  --meh-paper: #ffffff;
  --meh-ink: #000000;
  --meh-text: #141414;
  --meh-muted: #4a4a4a;
  --meh-orange: #fe7744;
  --meh-orange-deep: #e5653a; /* hover only, keeps the palette to one orange */
  --meh-navy: #00273c;
  --meh-divider: #cfcfcf;

  --meh-font: Calibri, Carlito, sans-serif;

  --meh-border-hair: 1.5px;
  --meh-border-base: 3px;
  --meh-border-heavy: 4px;

  --meh-radius-sm: 14px;
  --meh-radius-md: 16px;
  --meh-radius-lg: 28px;
  --meh-radius-pill: 999px;

  --meh-space-1: 8px;
  --meh-space-2: 16px;
  --meh-space-3: 24px;
  --meh-space-4: 32px;

  box-sizing: border-box;
  font-family: var(--meh-font);
  font-size: 16px;
  line-height: 1.35;
  color: var(--meh-text);
  background: var(--meh-paper);
  border: var(--meh-border-base) solid var(--meh-ink);
  border-radius: var(--meh-radius-lg);
  padding: var(--meh-space-4);
  max-width: 560px;
  margin: 0 auto var(--meh-space-4);
  /* Contain layout and stacking without creating a new formatting context
     that would clip the focus ring. */
  isolation: isolate;
}

.meh-calc *,
.meh-calc *::before,
.meh-calc *::after {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------- header -- */

.meh-calc__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--meh-ink);
  border: 2px solid var(--meh-orange);
  border-radius: var(--meh-radius-pill);
  padding: 4px 12px;
  margin: 0 0 var(--meh-space-2);
}

.meh-calc__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--meh-ink);
  margin: 0 0 var(--meh-space-1);
}

.meh-calc__lead {
  font-size: 15px;
  color: var(--meh-muted);
  margin: 0 0 var(--meh-space-3);
}

/* ---------------------------------------------------------------- fields -- */

.meh-calc__form {
  display: block;
}

.meh-calc__field {
  margin: 0 0 var(--meh-space-3);
}

.meh-calc__field:last-of-type {
  margin-bottom: var(--meh-space-3);
}

.meh-calc__label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--meh-ink);
  margin-bottom: 6px;
}

.meh-calc__hint {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--meh-muted);
  margin: 0 0 6px;
}

.meh-calc__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.meh-calc__unit {
  position: absolute;
  left: 16px;
  font-size: 17px;
  font-weight: 700;
  color: var(--meh-muted);
  pointer-events: none;
}

.meh-calc__input {
  width: 100%;
  font-family: var(--meh-font);
  font-size: 17px;
  font-weight: 400;
  color: var(--meh-text);
  background: var(--meh-paper);
  border: var(--meh-border-base) solid var(--meh-ink);
  border-radius: var(--meh-radius-sm);
  padding: 12px 16px;
  margin: 0;
  /* no box-shadow anywhere in this system */
  transition: border-color 0.15s ease;
}

.meh-calc__input-wrap--unit .meh-calc__input {
  padding-left: 40px;
}

.meh-calc__input::placeholder {
  color: var(--meh-muted);
  opacity: 1;
}

/* Focus is an outline, so it never shifts layout. Orange is used as a stroke. */
.meh-calc__input:focus,
.meh-calc__slider:focus-visible,
.meh-calc__button:focus-visible,
.meh-calc__reset:focus-visible {
  outline: var(--meh-border-base) solid var(--meh-orange);
  outline-offset: 2px;
}

.meh-calc__input[aria-invalid="true"] {
  border-style: dashed;
}

/* ---------------------------------------------------------------- slider -- */

.meh-calc__slider-row {
  display: flex;
  align-items: center;
  gap: var(--meh-space-2);
  margin-top: 10px;
  margin-bottom: 8px;
}

.meh-calc__slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  width: 100%;
  height: 6px;
  background: var(--meh-divider);
  border-radius: var(--meh-radius-pill);
  margin: 0;
  cursor: pointer;
}

.meh-calc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: var(--meh-orange);
  border: var(--meh-border-base) solid var(--meh-ink);
  border-radius: 50%;
  cursor: pointer;
}

.meh-calc__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--meh-orange);
  border: var(--meh-border-base) solid var(--meh-ink);
  border-radius: 50%;
  cursor: pointer;
}

.meh-calc__slider::-moz-range-track {
  height: 6px;
  background: var(--meh-divider);
  border-radius: var(--meh-radius-pill);
}

.meh-calc__slider-value {
  flex: 0 0 auto;
  min-width: 84px;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: var(--meh-text);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- errors and help -- */

/* The canon has no error colour, and inventing one would break it.
   Errors are ink, marked with a bold "!", announced via role="alert",
   and never signalled by colour alone. */
.meh-calc__error {
  display: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--meh-ink);
  border: var(--meh-border-base) dashed var(--meh-ink);
  border-radius: var(--meh-radius-sm);
  padding: 10px 14px;
  margin: var(--meh-space-2) 0 0;
}

.meh-calc__error:not([hidden]) {
  display: block;
}

.meh-calc__error::before {
  content: "! ";
  font-weight: 700;
}

.meh-calc__field-error {
  display: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--meh-ink);
  margin: 6px 0 0;
}

.meh-calc__field-error:not([hidden]) {
  display: block;
}

/* --------------------------------------------------------------- actions -- */

.meh-calc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: var(--meh-space-3);
}

.meh-calc__button {
  flex: 1 1 200px;
  font-family: var(--meh-font);
  font-size: 17px;
  font-weight: 700;
  color: var(--meh-ink);
  background: var(--meh-orange);
  border: var(--meh-border-base) solid var(--meh-ink);
  border-radius: var(--meh-radius-pill);
  padding: 13px 24px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.meh-calc__button:hover {
  background: var(--meh-ink);
  color: var(--meh-paper);
}

.meh-calc__reset {
  flex: 0 0 auto;
  font-family: var(--meh-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--meh-ink);
  background: var(--meh-paper);
  border: var(--meh-border-base) solid var(--meh-ink);
  border-radius: var(--meh-radius-pill);
  padding: 13px 20px;
  cursor: pointer;
}

.meh-calc__reset:hover {
  background: var(--meh-divider);
}

/* ---------------------------------------------------------------- result -- */

.meh-calc__result {
  margin-top: var(--meh-space-3);
  border-top: var(--meh-border-hair) solid var(--meh-divider);
  padding-top: var(--meh-space-3);
}

.meh-calc__result[hidden] {
  display: none;
}

.meh-calc__result-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--meh-muted);
  margin-bottom: var(--meh-space-1);
}

/* The single orange moment: a filled block with ink text, exactly how
   PricePill is specified in the Light system. */
.meh-calc__value {
  display: block;
  background: var(--meh-orange);
  border: var(--meh-border-base) solid var(--meh-ink);
  border-radius: var(--meh-radius-sm);
  padding: 16px 20px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--meh-ink);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.meh-calc__secondary {
  list-style: none;
  margin: var(--meh-space-2) 0 0;
  padding: 0;
}

.meh-calc__secondary li {
  display: flex;
  justify-content: space-between;
  gap: var(--meh-space-2);
  font-size: 15px;
  padding: 8px 0;
  border-bottom: var(--meh-border-hair) solid var(--meh-divider);
}

.meh-calc__secondary li:last-child {
  border-bottom: 0;
}

.meh-calc__secondary-key {
  color: var(--meh-muted);
}

.meh-calc__secondary-val {
  font-weight: 700;
  color: var(--meh-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.meh-calc__note {
  font-size: 13px;
  color: var(--meh-muted);
  margin: var(--meh-space-2) 0 0;
}

/* Visually hidden but available to assistive tech. */
.meh-calc__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* If JavaScript never runs the form is still readable, and the note tells
   the reader why nothing happens. */
.meh-calc:not([data-meh-ready]) .meh-calc__nojs {
  display: block;
}

.meh-calc__nojs {
  display: none;
  font-size: 14px;
  color: var(--meh-muted);
  border: var(--meh-border-hair) dashed var(--meh-divider);
  border-radius: var(--meh-radius-sm);
  padding: 12px 14px;
  margin-top: var(--meh-space-2);
}

/* --------------------------------------------------------------- mobile -- */

@media (max-width: 600px) {
  .meh-calc {
    padding: var(--meh-space-3);
    border-radius: var(--meh-radius-md);
  }

  .meh-calc__value {
    font-size: 28px;
  }

  .meh-calc__button,
  .meh-calc__reset {
    flex: 1 1 100%;
  }
}

/* Respect the reader's motion preference. */
@media (prefers-reduced-motion: reduce) {
  .meh-calc__input,
  .meh-calc__button {
    transition: none;
  }
}

/* ---------------------------------------------------------------- print -- */

@media print {
  .meh-calc {
    border-color: var(--meh-ink);
    max-width: none;
  }

  .meh-calc__actions {
    display: none;
  }
}