/* components/OtherTags.css */
/* Other tags (OtherTags.tsx): description, rows, add button and the frames shown only, one below the other. */
.other-tags { display: grid; gap: 0.75rem; justify-items: start; }
.other-count { color: var(--muted-foreground); font-weight: 400; }
.raw-fixed { margin: 0.25rem 0 0; padding-left: 1.25rem; font-size: 0.8rem; color: var(--muted-foreground); overflow-wrap: anywhere; }
.raw-fixed code { color: var(--foreground); }
/* on a phone the value gets its own line under ID and description */
@media (max-width: 30rem) {
  #raw-list .row-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  #raw-list .row-fields > :last-child { grid-column: 1 / -1; }
}

/* components/input/BytesInput.css */
/* BytesInput (BytesInput.tsx): the TEXT / BYTE chooser, then the field for the bytes. */
.bytes-input { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.5rem; }

/* components/input/Combobox.css */
/* Combobox (Combobox.tsx): the field with its arrow; ui.css has no select or combobox of its own. */
.select { position: relative; display: block; }
.select-chevron { position: absolute; right: 0.75rem; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--muted-foreground); }
/* the arrow turns up while the list is open and back when it closes (the field's aria-expanded) */
.select-chevron { transition: rotate 0.15s ease; }
.combo:has(> input[aria-expanded="true"]) .select-chevron { rotate: 180deg; }
@media (prefers-reduced-motion: reduce) { .select-chevron { transition: none; } }
/* Combobox (Combobox.tsx) list: a popover in the top layer, placed at its field by Combobox.tsx (left, top, sizes).
   overscroll-behavior: scrolling past its end does not go on to scroll the page underneath.
   scrollbar-*: with always-shown scroll bars (macOS "Always", Windows) a thin thumb on a clear track, in the theme's
   colours, instead of a 15 px grey bar.
   box-sizing: the field's width set as min-width (Combobox.tsx) includes padding, border and scroll bar, so a list as
   narrow as its field is exactly as wide, not 10 px wider. */
.combo-list { box-sizing: border-box; position: fixed; inset: auto; width: max-content; max-width: min(22rem, calc(100vw - 1rem)); max-height: 13rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--muted-foreground) 45%, transparent) transparent; margin: 0; padding: 0.25rem; list-style: none; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.combo-list [hidden] { display: none; }
.combo-list [role=option] { display: flex; gap: 0.75rem; padding: 0.375rem 0.5rem; border-radius: calc(var(--radius-md) - 2px); font-size: 0.875rem; cursor: pointer; }
.combo-list [role=option]:hover, .combo-list [aria-selected=true] { background: var(--accent); color: var(--accent-foreground); }
.combo-list code { min-width: 2rem; font-family: var(--font-mono); color: var(--muted-foreground); }
/* the arrow's click area: the field's right padding; the chevron inside keeps its place */
.combo-toggle { position: absolute; top: 0; right: 0; bottom: 0; width: 2.25rem; cursor: pointer; }
.combo input { padding-right: 2.25rem; } /* typed text stays clear of the arrow */
/* the check mark of the values in the field (data-checked), at the end of the row */
.combo-check { margin-left: auto; flex-shrink: 0; align-self: center; visibility: hidden; }
.combo-list [data-checked] .combo-check { visibility: visible; }

/* components/input/HexInput.css */
/* HexInput (HexInput.tsx): bytes read best in a monospace font, each pair lined up. */
.hex-input { font-family: var(--font-mono); letter-spacing: 0.02em; }

/* components/input/RowList.css */
/* RowList (RowList.tsx): a row's cells on one grid line (tracks from the columns); a textarea cell gets its own line. */
.row-fields { display: grid; gap: 0.5rem; min-width: 0; }
.row-cell { min-width: 0; }
.row-fields > .row-cell.wide { grid-column: 1 / -1; }