/* Dynamic-state calibration: every state keeps the original component geometry. */
:root { --state-blue: #1677f8; --state-blue-dark: #0d65d9; --state-focus: rgba(22,119,248,.28); --state-error: #e64b61; --state-error-bg: #fff5f6; }

button, input, select, summary, a { -webkit-tap-highlight-color: transparent; }
button, input, select { font-variant-numeric: tabular-nums; }

/* Keep the converter's two-part controls intact on narrow touch screens.
   The original three-column desktop row can otherwise leave each control
   narrower than its input/select pair after translations and browser zoom. */
@media (max-width: 760px) {
  .converter-card {
    height: auto;
    min-width: 0;
    overflow: visible;
  }

  .converter-card .converter-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "source" "swap" "result";
    gap: 10px;
    margin-top: 18px;
    min-width: 0;
  }

  .converter-card .converter-row > .input-unit {
    width: 100%;
    min-width: 0;
  }

  .converter-card .converter-row > .input-unit:first-child { grid-area: source; }
  .converter-card .converter-row > .input-unit:last-child { grid-area: result; }

  .converter-card .converter-row .swap {
    grid-area: swap;
    width: 44px;
    height: 28px;
    justify-self: center;
    transform: rotate(90deg);
  }

  .converter-card .converter-row input,
  .converter-card .converter-row output,
  .converter-card .converter-row select {
    min-width: 0;
  }

  .converter-card .conversion-summary,
  .converter-card .common-conversions {
    min-width: 0;
    height: auto;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 390px) {
  .converter-card { padding-left: 14px; padding-right: 14px; }
  .converter-card .tabs { gap: 4px; }
  .converter-card .tabs button { min-width: 0; padding-inline: 5px; }
  .converter-card .conversion-summary { padding: 13px 16px; }
}

.input-unit, .split-input, .distance-control, .converter-row .input-unit {
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.input-unit:hover, .split-input:hover, .distance-control:hover, .converter-row .input-unit:hover {
  border-color: #a9b9ce;
}
.input-unit:focus-within, .split-input:focus-within, .distance-control:focus-within, .converter-row .input-unit:focus-within {
  border-color: var(--state-blue) !important;
  box-shadow: 0 0 0 3px var(--state-focus);
  position: relative;
  z-index: 2;
}
:where(button, a, summary):focus-visible {
  outline: 2px solid var(--state-blue);
  outline-offset: 2px;
  position: relative;
  z-index: 3;
}

/* Form validation is intentionally opt-in after a submit attempt. */
#display-form.is-validating .input-unit.is-invalid,
#display-form.is-validating .split-input.is-invalid {
  border-color: var(--state-error) !important;
  background: var(--state-error-bg);
  box-shadow: 0 0 0 3px rgba(230,75,97,.16);
}
#display-form.is-validating .input-unit.is-invalid input,
#display-form.is-validating .split-input.is-invalid input { color: #b42338; }
#display-form .error { min-height: 0; margin: 0; }
#display-form.is-validating .error:not(:empty) { min-height: 18px; margin: -3px 0 5px; color: #b42338; font-size: 12px; line-height: 18px; }

.primary-button { position: relative; transition: background-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease; }
.primary-button:hover:not(:disabled) { background: var(--state-blue-dark); }
.primary-button:active:not(:disabled) { background: #0a58c4; transform: none; }
.primary-button:disabled { cursor: not-allowed; opacity: .62; filter: saturate(.55); }
.primary-button.is-loading { pointer-events: none; }
.primary-button.is-loading .button-icon { animation: state-qc-spin .7s linear infinite; }
@keyframes state-qc-spin { to { transform: rotate(360deg); } }

.text-button { transition: color 120ms ease, text-decoration-color 120ms ease, background-color 120ms ease; }
.text-button:hover { color: var(--state-blue-dark); text-decoration: underline; text-underline-offset: 2px; }
.copy-top { min-width: 70px; text-align: right; }

.tabs button { transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease; }
.tabs button:not(.active):hover { background: #e7f1ff; color: #075fce; }
.tabs button.active { background: #1677f8; color: #fff; }

.swap { transition: color 120ms ease, background-color 120ms ease; }
.swap:hover { color: var(--state-blue-dark); background: #e8f2ff; }
.custom-stepper {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 3px;
  transition: background-color 120ms ease, color 120ms ease;
}
.custom-stepper:hover { background: #e7f1ff; color: var(--state-blue-dark); }
.custom-stepper:active { background: #d7e9ff; }
.custom-stepper:focus-visible { outline-offset: 1px; }

/* The near-distance outcome switches semantics without moving the panel. */
.success-panel.is-warning,
.distance-message.is-warning {
  background: #fff0f2 !important;
}
.success-panel.is-warning .check,
.distance-message.is-warning .check { background: #ee5a70; }
.success-panel.is-warning .check svg,
.distance-message.is-warning .check svg { display: none; }
.success-panel.is-warning .check::after,
.distance-message.is-warning .check::after {
  content: '!'; display: grid; place-items: center; width: 100%; height: 100%; color: #fff; font-weight: 800; font-size: 15px; line-height: 1;
}
.distance-message.is-warning b { color: #9d1730; }
.distance-message.is-warning span { color: #a44050; }

@media (max-width: 760px) {
  .copy-top { min-width: 0; }
  #display-form.is-validating .error:not(:empty) { min-height: 18px; }
}

/* Locale selector: native names and real image flags remain readable at every width. */
.language-select { position: relative; z-index: 20; margin-left: auto; }
.language-select summary { list-style: none; display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: #fff; cursor: pointer; white-space: nowrap; }
.language-select summary::-webkit-details-marker { display: none; }
.language-select summary::after { content: '⌄'; font-size: 13px; margin-left: 2px; }
.language-select summary img, .locale-options img { display: block; width: 20px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px #d9e3ef; }
.locale-options { position: absolute; right: 0; top: calc(100% + 5px); width: min(250px, calc(100vw - 28px)); max-height: min(420px, calc(100vh - 80px)); overflow: auto; padding: 5px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 12px 30px rgba(7,23,53,.18); }
.locale-options a { display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 7px 8px; border-radius: 5px; color: var(--navy); text-decoration: none; }
.locale-options a:hover, .locale-options a:focus-visible, .locale-options a[aria-selected="true"] { background: #eaf4ff; color: #075fce; outline: none; }
[dir="rtl"] .header-inner { flex-direction: row-reverse; }
[dir="rtl"] .site-header nav, [dir="rtl"] footer nav { direction: rtl; }
[dir="rtl"] input[type="number"], [dir="rtl"] .metrics dd, [dir="rtl"] output { direction: ltr; }
[dir="rtl"] .locale-options { right: 0; left: auto; }
@media (max-width: 640px) { .language-select { flex: 0 1 auto; } .language-select summary { max-width: 138px; overflow: hidden; } .language-select summary span { overflow: hidden; text-overflow: ellipsis; } }

/* Supporting content is intentionally content-first; no advertising surface is
   placed in the calculation, result, visual, or sharing flow. */
.guide-content { margin-top: 14px; padding: 20px 22px; }
.guide-content h2, .guide-content h3 { color: var(--navy); }
.guide-content h3 { margin: 18px 0 6px; font-size: 15px; }
.guide-content p, .guide-content ol { margin: 6px 0; color: var(--muted); }
.guide-content ul { margin: 6px 0; padding-left: 20px; color: var(--muted); }
.guide-content ol { padding-left: 20px; }
.guide-content li + li { margin-top: 6px; }
.faq-content { margin-top: 14px; }
.faq-list details { margin-top: 9px; }
.ad-slot { max-width: 728px; margin: 20px auto; padding: 0 4px; text-align: center; overflow: hidden; }
.ad-label { margin: 0 0 7px; color: var(--muted); font-size: 11px; line-height: 1.2; letter-spacing: .02em; }
.ad-slot .adsbygoogle { display: block; max-width: 100%; min-height: 0; overflow: hidden; }
@media (max-width: 760px) { .guide-content { padding: 18px 14px; } }
@media (max-width: 760px) { .ad-slot { margin: 16px auto; padding: 0; } }