/* Unit Converter — the category segment over a converter card (From and To
   as stacked rows, each a value field beside its unit pill, and the swap in
   the actions tray) and the All units card whose rows are the units, each
   copied on tap (layout from styles/components/form.css). Only the value
   field, the pill width, the unit rows and the narrow category strip are
   the page's own. */

/* input.<class>: the shared form rule input[type="…"] in common.css is
   (0,1,1) and would beat a bare class. */
input.uc-input {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 500;
}

/* dropdown.js wraps each <select> in a .dropdown; select--full makes the
   pill fill that wrapper, so only the wrapper is sized here. */
.uc-pair > .dropdown {
  flex: 0 0 40%;
  max-width: 210px;
}

/* All units — the list is the card, each unit a row. */
.uc-all:empty { display: none; }
.uc-all__row {
  align-items: baseline;
  cursor: pointer;
  transition: background var(--duration-snap) var(--ease-standard);
}
.uc-all__row:hover { background: var(--bg-hover); }
.uc-all__row.is-active { background: var(--accent-soft); }
/* flash() marks the value it relabels; the row wears the confirmation so it
   is never mistaken for the persistent selection. */
.uc-all__row:has(.uc-all__val.is-done) { background: var(--success-soft); }
.uc-all__val.is-done { color: var(--success); }

.uc-all__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uc-all__sym {
  color: var(--text-muted);
  font-size: 12.5px;
  margin-inline-start: var(--space-2);
  font-family: var(--mono);
}
.uc-all__val {
  flex: none;
  color: var(--text-dim);
}

/* Quiet copy affordance — only on hover / focus, so the list reads as a
   calm reference table at rest. */
.uc-all__copy {
  flex: none;
  align-self: center;
  display: flex;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--duration-snap) var(--ease-standard);
}
.uc-all__row:is(:hover, :focus-visible) .uc-all__copy { opacity: 1; }
.uc-all__row:has(.is-done) .uc-all__copy { opacity: 0; }

@media (max-width: 560px) {
  /* Eight categories wrap into a lopsided two-row grid at narrow widths;
     one horizontally-scrollable row reads as one control, and a trailing
     fade hints that more categories scroll off-screen. */
  #uc-categories.segment--full {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
  #uc-categories.segment--full::-webkit-scrollbar { display: none; }
  #uc-categories.segment--full .segment__btn { flex: 0 0 auto; }

  .uc-pair { flex-direction: column; align-items: stretch; }
  .uc-pair > .dropdown { flex-basis: auto; max-width: none; }
}