/*
 * Eligibility calculator, restyled to DESIGN.md § "Homepage": a white card that
 * overlaps the hero photo's lower edge (positioning is in hero.css — .hero__calculator). The
 * comparison logic and its messages are frozen; this file is layout, colour and states only.
 *
 * .calculator-mount is the card. .calculator-form is layout inside it. #eligibility-result sits
 * inside the card but outside the <form> (hero.njk) so form.reset() never touches it.
 */
.calculator-mount {
  width: 100%;
  max-width: 520px;
  /* Pinned to the left of .hero__calculator so the card's left edge lines up with the headline
     block above it; full-width on phone where .hero__calculator's own padding is the inset. */
  margin-right: auto;
  padding: 18px;
  border-radius: 12px;
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 14px 34px rgba(22, 32, 28, 0.22);
}

.calculator-mount__noscript {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-soft);
}

.calculator-mount__noscript a {
  color: var(--color-link);
}

.calculator-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Card title + subtitle (design reference 5a): bold heading, then a muted explanatory line. */
.calculator-form__title {
  margin: 0 0 3px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.calculator-form__note {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.calculator-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
}

/* Salary and age do NOT share flex-grow: age is a 2–3 digit number that needs only a small
   fixed box, salary needs room for a 9-digit KRW figure. Below 768px salary grows to fill the
   row; at ≥768px it's a fixed 196px and the button takes the remaining width. */
.calculator-form__field {
  display: flex;
  flex-direction: column;
  flex: 1 1 120px;
  min-width: 0;
}

.calculator-form__field--age {
  flex: 0 0 66px;
}

.calculator-form__field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-soft);
  margin-bottom: 7px;
}

.calculator-form__field input[type="text"],
.calculator-form__field input[type="number"] {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-size: 16px;
  font-weight: 500;
}

/* offset 2px (not the usual 1px) so that on a field that's both focused and marked invalid, the
   blue ring sits outside the orange border with a visible gap instead of touching/overlapping it. */
.calculator-form__field input[type="text"]:focus-visible,
.calculator-form__field input[type="number"]:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Invalid-field mark: border colour only, no icon/red/helper text (DESIGN.md keeps red out of
   the calculator's palette). box-sizing: border-box (base.css) keeps the field's outer size
   identical to the 1px default border, so the field doesn't shift when the mark appears.
   calculator.js toggles aria-invalid. */
.calculator-form__field input[aria-invalid="true"] {
  border: 1.5px solid var(--color-accent);
}

.calculator-form__submit {
  /* Not flex: 1 1 100% (the bug this replaced): .calculator-form is flex-direction: column on
     phone, so a 100% flex-basis there resolves against the *column's height*, not its width —
     with a definite form height, that made this item's hypothetical size the whole form, which
     flex-shrink then crushed back down to its own content minimum (~25px, not the 46px below).
     Full width already happens for free from the column's default align-items: stretch; this only
     needs to opt out of grow/shrink so the declared height actually holds. */
  flex: 0 0 auto;
  height: 46px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-on-dark);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.calculator-form__submit:hover {
  background: var(--color-primary-dark);
}

/* The field itself is the <label> (hero.njk) — the whole strip toggles the box. Its own row on
   phone directly above the submit button; on desktop `order` drops it beside Clear. Label type
   is 13px / 500 / ink (task audit) — deliberately heavier than the field labels above it. */
.calculator-form__field--checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
}

.calculator-form__field--checkbox input {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--color-primary);
}

.calculator-form__field--checkbox span {
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .calculator-form__field--checkbox {
    min-height: 44px;
  }
}

.calculator-form__reset {
  align-self: flex-end;
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* Grey, not green: this clears the form rather than going anywhere, so it doesn't get the
   in-site link's green (DESIGN.md palette: green = in-site navigation). Darkens the same way,
   just one step up the neutral scale (Muted → Ink soft) instead of the green/orange scales. */
.calculator-form__reset:hover,
.calculator-form__reset:focus-visible {
  color: var(--color-text-soft);
}

/* Phone: pad the hit area out to >=44px without moving the visible label (negative margin
   soaks up the extra), same trick as the festival address-copy button. */
@media (max-width: 767.98px) {
  .calculator-form__reset {
    margin: -12px -4px -12px auto;
    padding: 12px 4px;
  }

  /* Trim the card's vertical footprint so the longest result state still clears the viewport
     (hero.css pulls the whole card up onto the photo). */
  .calculator-mount {
    padding: 16px;
  }

  .calculator-form {
    gap: 8px;
  }

  .calculator-form__note {
    margin-bottom: 10px;
  }
}

/* Result plate — tint set by calculator.js per eligibility tier, never red (the calculator only
   gives answers). Green tints for "eligible", the site's amber for "not eligible yet". */
.eligibility-result {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--color-primary-tint);
  color: var(--color-text-soft);
  font-size: 14px;
  line-height: 1.5;
}

/* In-site link to the visa rules — green with a →, standalone treatment: no underline at rest,
   underline gained on hover (DESIGN.md palette/link rules). */
.eligibility-result a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
}

.eligibility-result a:hover {
  text-decoration: underline;
}

.eligibility-result--all {
  background: var(--color-vibe-tag-bg); /* #DCEFE5 — eligible everywhere */
}

.eligibility-result--near {
  background: var(--color-primary-tint); /* #EAF4EF — eligible outside the capital area */
}

.eligibility-result--none {
  background: var(--color-accent-tint); /* #F7EAD9 — not eligible yet / under 18 */
}

.eligibility-result--info {
  background: var(--color-surface); /* #F7F9F8 — neutral, a field is still missing */
}

@media (min-width: 768px) {
  .calculator-mount {
    padding: 20px;
    box-shadow: 0 18px 44px rgba(22, 32, 28, 0.24);
  }


  /* Desktop keeps the original two-line arrangement — [salary  age  Check eligibility] on line
     one, [checkbox … Clear] on line two — via `order` rather than DOM position, since the
     checkbox now sits above the button in source order for the phone layout (task audit). */
  .calculator-form {
    flex-flow: row wrap;
    align-items: flex-end;
  }

  .calculator-form__title {
    order: 1;
    flex: 1 1 100%;
  }

  .calculator-form__note {
    order: 2;
    flex: 1 1 100%;
  }

  .calculator-form__row {
    order: 3;
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  .calculator-form__field {
    flex: 0 0 196px;
  }

  .calculator-form__field--age {
    flex: 0 0 66px;
  }

  /* Button takes the width left after the two fixed-width fields, on the same row. Height
     matches the 44px inputs it's flex-end-aligned with in the same row (DESIGN.md's 44px
     control minimum — was 42px, visibly short of both the inputs beside it and the tap-target
     rule). */
  .calculator-form__submit {
    order: 4;
    flex: 1 1 auto;
    height: 44px;
    font-size: 14px;
  }

  .calculator-form__field--checkbox {
    order: 5;
    flex: 0 1 auto;
  }

  .calculator-form__reset {
    order: 6;
  }
}