/* =========================================================================
   M-Convert · converter.css
   -------------------------------------------------------------------------
   Purpose : The interactive converter widget — shell, field groups, unit
             labels, result readout, action buttons, precision selector,
             empty/error states, live region.
   Order   : Fifth — after components.css, before responsive.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. CONVERTER SHELL
   ------------------------------------------------------------------------- */
.converter {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}

@media (min-width: 640px) {
  .converter {
    padding: var(--sp-6);
    gap: var(--sp-6);
  }
}

/* Compact variant for the homepage quick widget */
.converter--compact {
  padding: var(--sp-4);
  gap: var(--sp-4);
  box-shadow: var(--sh-sm);
}

@media (min-width: 640px) {
  .converter--compact {
    padding: var(--sp-5);
  }
}

/* -------------------------------------------------------------------------
   2. CONVERTER HEADER (title + optional unit badges)
   ------------------------------------------------------------------------- */
.converter__header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.converter__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--c-text-strong);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.converter__subtitle {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  line-height: var(--lh-normal);
}

.converter__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

/* -------------------------------------------------------------------------
   3. FIELD GROUP
   ------------------------------------------------------------------------- */
.converter__fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.converter__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.converter__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.converter__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text-strong);
  letter-spacing: var(--ls-normal);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.converter__label-unit {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-accent);
  background: var(--c-accent-tint);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  letter-spacing: 0;
}

.converter__label-hint {
  font-size: var(--fs-xs);
  color: var(--c-text-subtle);
}

/* -------------------------------------------------------------------------
   4. SOURCE INPUT
   ------------------------------------------------------------------------- */
.converter__input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}

.converter__input {
  width: 100%;
  height: 60px;
  padding: 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-strong);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border-input);
  border-radius: var(--r-md);
  text-align: right;
  letter-spacing: -0.01em;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
  -moz-appearance: textfield;
  appearance: textfield;
}

.converter__input::-webkit-outer-spin-button,
.converter__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.converter__input::placeholder {
  color: var(--c-text-subtle);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}

.converter__input:hover {
  border-color: var(--c-border-strong);
}

.converter__input:focus-visible {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: var(--sh-focus);
}

.converter__input-wrap .converter__unit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  background: var(--c-bg-sunken);
  border: 1.5px solid var(--c-border-input);
  border-left: 0;
  border-top-right-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
  white-space: nowrap;
  user-select: none;
  min-width: 72px;
}

/* Remove input's own right radius when a unit chip follows */
.converter__input-wrap .converter__input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Error state */
.converter__input[aria-invalid="true"] {
  border-color: var(--c-error);
  background: var(--c-error-tint);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15);
}

/* -------------------------------------------------------------------------
   5. RESULT READOUT
   ------------------------------------------------------------------------- */
.converter__result {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.converter__result-box {
  display: flex;
  align-items: stretch;
  min-height: 60px;
  background: var(--c-bg-sunken);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.converter__result-value {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--c-brand);
  letter-spacing: -0.01em;
  text-align: right;
  word-break: break-all;
  line-height: 1.1;
  min-height: 60px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.converter__result-value::-webkit-scrollbar {
  display: none;
}

.converter__result-value[data-empty="true"] {
  color: var(--c-text-subtle);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  letter-spacing: 0;
  font-family: var(--font-sans);
  justify-content: flex-end;
}

.converter__result-unit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  background: var(--c-surface);
  border-left: 1.5px solid var(--c-border);
  white-space: nowrap;
  user-select: none;
  min-width: 72px;
  flex-shrink: 0;
}

.converter__result-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--c-text-subtle);
  line-height: 1.5;
}

.converter__result-exact {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}

.converter__result-exact[data-exact="true"] {
  background: var(--c-success-tint);
  color: var(--c-success);
}

.converter__result-exact[data-exact="false"] {
  background: var(--c-bg-sunken);
  color: var(--c-text-muted);
}

/* -------------------------------------------------------------------------
   6. ACTION ROW
   ------------------------------------------------------------------------- */
.converter__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

@media (min-width: 480px) {
  .converter__actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-3);
  }
}

.converter__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border-input);
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.converter__action:hover {
  background: var(--c-bg-alt);
  border-color: var(--c-border-strong);
  color: var(--c-accent);
}

.converter__action:active {
  transform: translateY(1px);
}

.converter__action:focus-visible {
  outline: var(--focus-ring-w) solid var(--c-focus);
  outline-offset: var(--focus-ring-o);
}

.converter__action--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-text-invert);
}

.converter__action--primary:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  color: var(--c-text-invert);
}

.converter__action--primary:active {
  background: var(--c-accent-active);
  border-color: var(--c-accent-active);
}

.converter__action[data-copied="true"] {
  background: var(--c-success-tint);
  border-color: var(--c-success);
  color: var(--c-success);
}

.converter__action-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   7. SWAP BUTTON (between source and destination)
   ------------------------------------------------------------------------- */
.converter__swap {
  display: flex;
  justify-content: center;
  margin: calc(var(--sp-2) * -1) 0;
  position: relative;
  z-index: 2;
}

.converter__swap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--c-accent);
  background: var(--c-surface);
  border: 1px solid var(--c-border-input);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.converter__swap-btn:hover {
  background: var(--c-accent-tint);
  border-color: var(--c-accent);
}

.converter__swap-btn:focus-visible {
  outline: var(--focus-ring-w) solid var(--c-focus);
  outline-offset: var(--focus-ring-o);
}

.converter__swap-btn svg {
  width: 14px;
  height: 14px;
}

/* -------------------------------------------------------------------------
   8. PRECISION / OPTIONS ROW
   ------------------------------------------------------------------------- */
.converter__options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: var(--bd-hairline);
}

.converter__option-group {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.converter__option-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  white-space: nowrap;
}

.converter__precision {
  height: 36px;
  min-width: 88px;
  padding: 0 calc(var(--sp-2) + 16px + var(--sp-2)) 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  background-color: var(--c-surface);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='%2352657a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 12px;
  border: 1px solid var(--c-border-input);
  border-radius: var(--r-sm);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.converter__precision:focus-visible {
  outline: var(--focus-ring-w) solid var(--c-focus);
  outline-offset: var(--focus-ring-o);
}

/* -------------------------------------------------------------------------
   9. EMPTY STATE (before any value is typed)
   ------------------------------------------------------------------------- */
.converter__empty {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-bg-alt);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  line-height: var(--lh-normal);
}

.converter__empty[hidden] {
  display: none;
}

.converter__empty-glyph {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--c-accent-tint);
  color: var(--c-accent);
}

.converter__empty-glyph svg {
  width: 20px;
  height: 20px;
}

.converter__empty strong {
  color: var(--c-text-strong);
  font-weight: var(--fw-semibold);
  display: block;
  margin-bottom: 2px;
}

/* -------------------------------------------------------------------------
   10. ERROR MESSAGE
   ------------------------------------------------------------------------- */
.converter__error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-error-tint);
  border: 1px solid var(--c-error-border);
  border-left: 4px solid var(--c-error);
  border-radius: var(--r-md);
  color: var(--c-error);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
}

.converter__error[hidden] {
  display: none;
}

.converter__error-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

/* -------------------------------------------------------------------------
   11. LIVE REGION (screen readers)
   ------------------------------------------------------------------------- */
.converter__live {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* -------------------------------------------------------------------------
   12. HOMEPAGE QUICK WIDGET — SELECTABLE MODE
   ------------------------------------------------------------------------- */
.converter__mode-select {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.converter__mode-select .select {
  height: 52px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
}

/* -------------------------------------------------------------------------
   13. NOTE UNDER THE CONVERTER
   ------------------------------------------------------------------------- */
.converter__note {
  font-size: var(--fs-xs);
  color: var(--c-text-subtle);
  line-height: 1.55;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg-alt);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-sm);
}

.converter__note strong {
  color: var(--c-text-muted);
  font-weight: var(--fw-semibold);
}

/* -------------------------------------------------------------------------
   14. FOCUS / TAB ORDER ASSIST
   ------------------------------------------------------------------------- */
.converter :is(input, select, button, [tabindex]):focus-visible {
  outline: var(--focus-ring-w) solid var(--c-focus);
  outline-offset: var(--focus-ring-o);
}

.converter__input:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
}

/* -------------------------------------------------------------------------
   15. RESPONSIVE ADJUSTMENTS
   ------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .converter__input,
  .converter__result-value {
    font-size: var(--fs-lg);
  }

  .converter__input,
  .converter__result-box {
    height: 56px;
    min-height: 56px;
  }

  .converter__unit,
  .converter__result-unit {
    min-width: 56px;
    padding: 0 var(--sp-2);
    font-size: var(--fs-xs);
  }

  .converter__actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .converter__input,
  .converter__result-value {
    font-size: var(--fs-2xl);
  }

  .converter__input,
  .converter__result-box {
    height: 68px;
    min-height: 68px;
  }
}

/* -------------------------------------------------------------------------
   16. REDUCED MOTION
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .converter__action,
  .converter__swap-btn,
  .converter__input,
  .converter__result-box {
    transition: none;
  }

  .converter__action:active {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   17. HIGH CONTRAST
   ------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  .converter {
    border-width: 2px;
    border-color: #4d5c6c;
  }

  .converter__input,
  .converter__result-box {
    border-width: 2px;
    border-color: #4d5c6c;
  }

  .converter__unit,
  .converter__result-unit {
    border-color: #4d5c6c;
  }

  .converter__result-value {
    color: #000000;
  }
}

/* -------------------------------------------------------------------------
   18. PRINT
   ------------------------------------------------------------------------- */
@media print {
  .converter {
    border: 1px solid #999;
    box-shadow: none;
    page-break-inside: avoid;
  }

  .converter__actions,
  .converter__swap,
  .converter__options {
    display: none !important;
  }

  .converter__result-box {
    background: #ffffff;
    border: 1px solid #666;
  }

  .converter__result-value {
    color: #000000;
  }
}