/* tools/unit-converter/tool.css — the few styles the unit converter needs beyond
 * /assets/tool.css. Every class here starts with uc-. */

/* The category choice. Eight options in one wrapping strip break unevenly, so they sit in
 * a 4 × 2 grid, and 2 × 4 on a phone. The borders follow the grid, not the source order. */
.tk-seg.uc-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
.uc-cats label { text-align: center; border-top: 1px solid var(--page-hair-cool); }
.uc-cats label:nth-of-type(-n+4) { border-top: 0; }
.uc-cats label:nth-of-type(4n+1) { border-left: 0; }
@media (max-width: 600px) {
  .tk-seg.uc-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc-cats label:nth-of-type(n) { border-top: 1px solid var(--page-hair-cool);
                                  border-left: 1px solid var(--page-hair-cool); }
  .uc-cats label:nth-of-type(-n+2) { border-top: 0; }
  .uc-cats label:nth-of-type(odd) { border-left: 0; }
}

/* "25.4 mm =" above the big number. Units are case-sensitive (mm is not Mm), so this line
 * cannot live in the uppercase readout key. */
.uc-from { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
           font-size: var(--t-md); color: var(--slab-muted); overflow-wrap: anywhere; }

/* Table headers are set in uppercase site-wide; unit symbols must keep their case. */
thead.uc-units th { text-transform: none; letter-spacing: 0; }

.uc-copy:disabled { opacity: 0.55; cursor: not-allowed; }