/* Numbers (js/views/pools.js, #/pools) and its Add numbers popup (js/views/numbers-add.js).
   Shared tokens and components are in /styles.css (docs/ui-notes-v2.md); the switch colours
   (sw-0, sw-1, sw-pe) are in /css/contrast.css. Every class in this file starts with "numbers-".
   Plain ASCII only. */

/* Each number list in use has a colour of its own, the same in the table and on its card, so the
   vendors that share a list look the same. Six clearly different hues; a list nobody uses is
   grey (numbers-c0). */
:root {
  --numbers-c1: #2F6BD6;
  --numbers-c2: #D9600F;
  --numbers-c3: #8445D1;
  --numbers-c4: #0E8A7A;
  --numbers-c5: #C42D84;
  --numbers-c6: #957000;
}
:root[data-theme="dark"] {
  --numbers-c1: #74A0F2;
  --numbers-c2: #F2914F;
  --numbers-c3: #B791F5;
  --numbers-c4: #45C4AF;
  --numbers-c5: #F071B9;
  --numbers-c6: #D9B44A;
}
.numbers-c0 { --numbers-c: var(--rule-strong); }
.numbers-c1 { --numbers-c: var(--numbers-c1); }
.numbers-c2 { --numbers-c: var(--numbers-c2); }
.numbers-c3 { --numbers-c: var(--numbers-c3); }
.numbers-c4 { --numbers-c: var(--numbers-c4); }
.numbers-c5 { --numbers-c: var(--numbers-c5); }
.numbers-c6 { --numbers-c: var(--numbers-c6); }
.numbers-mark { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--numbers-c, var(--rule-strong)); }

/* The top: Add numbers, and what it does. */
.numbers-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 24px; }
.numbers-top-hint { color: var(--slate); font-size: 14px; }

/* One part per switch: a strong heading band (contrast.css colours it), the table, the cards. */
.numbers-groups { display: grid; gap: 32px; }
/* A grid item is as wide as its content by default: a wide table must stay in its own box. */
.numbers-groups > * { min-width: 0; }
.numbers-group-title {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 8px;
  background: var(--side-bg, #18212F); color: #FFFFFF;
  font-size: 18px; font-weight: 700; line-height: 1.3;
}
.numbers-group-note { max-width: 46em; margin: 0 0 12px; color: var(--slate); font-size: 14px; }
.numbers-group-empty {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  margin: 0; padding: 14px 16px; border: 1px dashed var(--rule-strong); border-radius: 6px; background: var(--paper);
}
.numbers-group-empty p { flex: 1 1 22em; max-width: 46em; color: var(--slate); }

/* ------------------------------------------------------------------ who uses what
   A real table, one row per vendor or trunk group. Its columns have set widths, the same in the
   table of every switch, so they line up down the page; text wraps inside its own cell and never
   runs into the next one. Under about 960 px of room the button says only Add; under 700 px
   (a phone) each row is a small block of label and value pairs. */
.numbers-who.panel { container: numbers-who / inline-size; padding: 0; overflow: hidden; }
.table.numbers-who-table { table-layout: fixed; font-size: 15px; }
.numbers-col-name { width: 18%; }
.numbers-col-state { width: 16%; }
.numbers-col-list { width: 21%; }
.numbers-col-count { width: 7.5%; }
.numbers-col-unused { width: 7.5%; }
.numbers-col-now { width: 16%; }
.numbers-col-act { width: 14%; }
.table.numbers-who-table thead th { padding: 12px 8px 10px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.table.numbers-who-table .numbers-w-row > * { padding: 12px 8px; vertical-align: middle; overflow-wrap: anywhere; }
.table.numbers-who-table tr > :first-child { padding-left: 16px; }
.table.numbers-who-table tr > :last-child { padding-right: 16px; }
.numbers-w-unit { border-bottom: 1px solid var(--rule); }
.numbers-w-unit:last-child { border-bottom: 0; }
.table.numbers-who-table .numbers-w-unit > tr > * { border-bottom: 0; }
/* The name is a link to its page, and looks like one. */
.numbers-w-name { font-weight: 700; }
.numbers-w-name a {
  color: var(--ink); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--rule-strong); text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.numbers-w-name a:hover { color: var(--accent); text-decoration-color: currentColor; }
.numbers-w-val { display: block; min-width: 0; }
.numbers-label, .numbers-w-comma, .numbers-w-unit-word, .numbers-act-short { display: none; }
/* State: the lamp and Rotation's word, and why in a few words when something is wrong. */
.numbers-state-pair { display: inline-flex; align-items: baseline; gap: 8px; color: var(--slate); font-weight: 700; }
.numbers-state-pair .lamp { width: 13px; height: 13px; align-self: flex-start; margin-top: 0.3em; }
.numbers-state-pair.ok { color: var(--ok); }
.numbers-state-pair.test { color: var(--test); }
.numbers-state-pair.warn { color: var(--warn-text); }
.numbers-state-pair.bad { color: var(--bad); }
.numbers-lamp-ring.lamp { background: var(--rule-strong); }
.numbers-state-why { display: block; margin-top: 2px; padding-left: 17px; color: var(--slate); font-size: 13px; font-weight: 400; line-height: 1.35; }
.numbers-state-why.bad { color: var(--bad); }
.numbers-state-why.warn { color: var(--warn-text); }
/* The list: its colour, its name, and who else uses it. */
.numbers-list-name { display: inline-flex; align-items: baseline; gap: 8px; max-width: 100%; font-weight: 700; }
.numbers-list-name .numbers-mark { align-self: flex-start; margin-top: 0.3em; }
.numbers-list-text { min-width: 0; overflow-wrap: anywhere; }
.numbers-shared { display: block; padding-left: 20px; color: var(--slate); font-size: 13px; font-weight: 400; white-space: nowrap; }
.numbers-w-count, .numbers-w-unused { white-space: nowrap; }
.numbers-w-fig { font-variant-numeric: tabular-nums; }
.numbers-w-unused.is-short { color: var(--bad); font-weight: 700; }
/* In use now: the batch, and Show 12 numbers under it. */
.numbers-w-batch { display: block; }
.numbers-w-sub { display: block; color: var(--slate); font-size: 13px; }
/* A caller ID copies on a tap: a 44 px target that does not make its line taller. */
.numbers-who-table .rotation-cli { min-height: 0; margin: -12px 0; padding: 12px 0; text-align: left; }
.numbers-w-show {
  display: inline-flex; align-items: center; gap: 6px;
  margin: -12px 0; padding: 12px 0; border: 0; background: none;
  color: var(--accent); font: inherit; font-size: 14px; font-weight: 700; text-align: left; white-space: nowrap; cursor: pointer;
}
.numbers-w-show::before {
  content: ""; flex: none; width: 6px; height: 6px; margin: 0 1px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
.numbers-w-show[aria-expanded="true"]::before { margin-top: -3px; transform: rotate(45deg); }
.numbers-w-show:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 0.18em; }
.numbers-w-act { text-align: right; white-space: nowrap; }
.numbers-w-act .btn { max-width: 100%; padding: 0 12px; }
/* The numbers a vendor sends now, under its row. */
.table.numbers-who-table .numbers-w-nums > td { padding: 0 16px 16px; }
.numbers-w-nums-title { margin: 0 0 8px; color: var(--slate); font-size: 14px; font-weight: 700; }
.numbers-w-nums .strip { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }

/* Less room: the button says Add, the figures and the text are a little smaller. */
@container numbers-who (max-width: 959px) {
  .table.numbers-who-table { font-size: 14px; }
  .numbers-col-name { width: 19%; }
  .numbers-col-state { width: 15%; }
  .numbers-col-list { width: 20%; }
  .numbers-col-count { width: 10%; }
  .numbers-col-unused { width: 9%; }
  .numbers-col-now { width: 17%; }
  .numbers-col-act { width: 10%; }
  .table.numbers-who-table .numbers-w-row > * { padding-right: 6px; padding-left: 6px; }
  .table.numbers-who-table thead th { padding-right: 6px; padding-left: 6px; }
  .table.numbers-who-table tr > :first-child { padding-left: 14px; }
  .table.numbers-who-table tr > :last-child { padding-right: 12px; }
  .numbers-w-act .btn { padding: 0 10px; }
  .numbers-act-long { display: none; }
  .numbers-act-short { display: inline; }
}

/* A phone: each row is a block. The name and Add numbers on the first line, then one line each
   for the state, the list, the counts ("Numbers 40, 15 unused") and what it sends now, every
   value after its label in one column. */
@container numbers-who (max-width: 699px) {
  .table.numbers-who-table { display: block; font-size: 15px; }
  .numbers-who-table colgroup, .numbers-who-table thead { display: none; }
  .numbers-w-unit { display: block; }
  .table.numbers-who-table .numbers-w-row {
    display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; align-items: baseline; gap: 6px 12px;
    padding: 10px 16px 14px;
  }
  .table.numbers-who-table .numbers-w-row > * { display: block; padding: 0; text-align: left; white-space: normal; }
  .table.numbers-who-table .numbers-w-name { grid-column: 1 / 3; grid-row: 1; align-self: center; font-size: 16px; }
  .numbers-w-name a { display: inline-flex; align-items: center; min-height: var(--tap); }
  .table.numbers-who-table .numbers-w-act { grid-column: 3; grid-row: 1; align-self: center; }
  .table.numbers-who-table .numbers-w-state, .table.numbers-who-table .numbers-w-list, .table.numbers-who-table .numbers-w-now {
    display: grid; grid-column: 1 / -1; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px;
  }
  .table.numbers-who-table .numbers-w-count { display: grid; grid-column: 1; grid-template-columns: 6.5rem auto; gap: 12px; }
  .table.numbers-who-table .numbers-w-unused { grid-column: 2 / -1; margin-left: -8px; }
  .numbers-label { display: block; color: var(--slate); font-size: 14px; font-weight: 400; }
  .numbers-w-unused .numbers-label { display: none; }
  .numbers-w-comma, .numbers-w-unit-word { display: inline; }
  .numbers-w-fig { font-weight: 700; }
  .numbers-w-val { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  .numbers-w-count .numbers-w-val, .numbers-w-unused .numbers-w-val { display: inline; }
  .numbers-state-why { display: inline; margin: 0; padding: 0; font-size: 14px; }
  .numbers-shared { display: inline; padding: 0; font-size: 14px; }
  .numbers-w-batch { display: inline; font-weight: 700; }
  .numbers-w-sub { flex: 1 1 100%; font-size: 14px; }
  .numbers-w-act .btn { padding: 0 14px; }
  .numbers-act-long { display: inline; }
  .numbers-act-short { display: none; }
  .table.numbers-who-table .numbers-w-nums:not([hidden]) { display: block; }
  .table.numbers-who-table .numbers-w-nums > td { display: block; padding: 0 16px 14px; }
}
/* A very narrow phone: the button says Add, so the name keeps its room. */
@container numbers-who (max-width: 320px) {
  .numbers-act-long { display: none; }
  .numbers-act-short { display: inline; }
}

/* ------------------------------------------------------------------ the cards of the lists
   Under the table: one closed line each. */
.numbers-cards { display: grid; gap: 8px; margin-top: 16px; }
.numbers-cards-title { margin: 0 0 2px; color: var(--slate); font-size: 14px; font-weight: 700; }
.numbers-card {
  min-width: 0; border: 1px solid var(--rule);
  border-radius: 6px; background: var(--paper);
}
.numbers-card-sum { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; list-style: none; }
.numbers-card > summary { cursor: pointer; }
.numbers-card > summary::-webkit-details-marker { display: none; }
.numbers-card > summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin: -4px 4px 0 4px;
  border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate); transform: rotate(45deg);
}
.numbers-card[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.numbers-card > summary:hover { background: var(--hover); }
.numbers-card > summary:hover .numbers-card-name { text-decoration: underline; text-underline-offset: 0.18em; }
.numbers-card[open] > summary { border-bottom: 1px solid var(--rule); }
.numbers-card-main { display: grid; flex: 1 1 auto; gap: 1px; min-width: 0; }
.numbers-card-name { font-weight: 700; overflow-wrap: anywhere; }
.numbers-card-who { color: var(--slate); font-size: 14px; overflow-wrap: anywhere; }
.numbers-card-counts { flex: none; color: var(--slate); font-size: 14px; text-align: right; white-space: nowrap; }
.numbers-card-counts b { color: var(--ink); }
.numbers-card-counts.is-short b { color: var(--bad); }
.numbers-card-body { container: numbers-card / inline-size; padding: 4px 16px 16px; }
.numbers-card-ref-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 0 16px 12px 40px; }
.numbers-card-ref-foot p { color: var(--slate); font-size: 14px; }
.numbers-empty { margin: 12px 0 0; }
.numbers-empty b { color: var(--bad); }

/* Add numbers on a card (only ever adds). */
.numbers-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.numbers-add { margin-top: 12px; padding-top: 0; border-top: 0; }
.numbers-form textarea { max-width: 30em; min-height: 220px; }
.numbers-add textarea { min-height: 96px; }
.numbers-add .hint { max-width: 46em; }
.numbers-changed { max-width: 46em; margin: 6px 0 0; color: var(--ink); font-size: 14px; }
.numbers-warn { color: var(--warn-text); font-weight: 700; }
.numbers-unsaved { display: block; color: var(--ink); }
.numbers-check { max-width: 46em; margin: 10px 0 0; padding: 8px 12px; border-radius: 6px; background: var(--hover); font-size: 14px; }
.numbers-check.warn { background: var(--warn-pale); color: var(--warn-text); }
.numbers-check p + p { margin-top: 4px; }
.numbers-report { max-width: 46em; margin-top: 16px; }
.numbers-overlap { margin: 12px 0 0; color: var(--warn-text); font-weight: 700; }
.numbers-own-note { margin: 12px 0 0; color: var(--slate); }

/* About this list, Every number on the list and Edit the whole list: closed until opened. */
.numbers-more { margin-top: 20px; padding-top: 8px; border-top: 1px solid var(--rule); }
.numbers-more > .disclosure { margin: 0; }
.numbers-more > .disclosure + .disclosure { margin-top: 2px; }
.numbers-edit > .numbers-form { margin-top: 4px; padding-top: 4px; border-top: 0; }

/* About this list: a bar split into in use now (blue tint: not a status) and used up (slate, red
   only when the list is running out), the unused rest left pale, and a key that says each count
   in words. */
.numbers-mix { margin: 4px 0 14px; }
.numbers-bar {
  display: flex;
  height: 10px;
  max-width: 46em;
  overflow: hidden;
  border-radius: 5px;
  background: var(--off-pale);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.numbers-seg { flex: none; width: var(--pct, 0%); height: 100%; }
.numbers-seg.use { background: var(--accent); opacity: 0.55; }
.numbers-seg.spent { background: var(--rule-strong); }
.numbers-mix.is-short .numbers-seg.spent { background: var(--bad); }
.numbers-key { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 10px 0 0; padding: 0; list-style: none; color: var(--slate); font-size: 14px; }
.numbers-key li { display: inline-flex; align-items: center; gap: 8px; }
.numbers-key .figure { color: var(--ink); font-size: 18px; }
.numbers-key .numbers-low, .numbers-key .numbers-low .figure { color: var(--warn-text); font-weight: 700; }
.numbers-swatch { flex: none; width: 10px; height: 10px; border-radius: 2px; }
.numbers-swatch.use { background: var(--accent); opacity: 0.55; }
.numbers-swatch.spent { background: var(--rule-strong); }
.numbers-mix.is-short .numbers-swatch.spent { background: var(--bad); }
.numbers-swatch.free { background: var(--off-pale); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.numbers-quiet { margin: 4px 0 12px; color: var(--slate); font-size: 14px; }
.numbers-meaning { max-width: 46em; margin: 0 0 8px; color: var(--slate); font-size: 14px; }
.numbers-meaning .whatis { vertical-align: -3px; }
.numbers-spent-title { margin: 12px 0 6px; font-size: 14px; font-weight: 700; }
.numbers-spent-strip { margin: 0 0 4px; }

/* Every number on the list: Show, Sort by (while the table is blocks; as a table its column
   heads sort) and Find. */
.numbers-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 4px 0 12px; }
.numbers-tool { margin: 0; }
.numbers-tool label { font-size: 14px; }
.numbers-tool select { width: auto; min-width: 12em; }
.numbers-tool-q { flex: 1 1 16em; max-width: 24em; }
@container numbers-card (min-width: 760px) { .numbers-tool-sort { display: none; } }

/* The table: lines between rows, figures right-aligned, the number in the strip's face. */
.numbers-table-wrap { margin: 0 -4px; padding: 0 4px; }
.numbers-table { font-size: 14px; }
.numbers-table th, .numbers-table td { padding-top: 8px; padding-bottom: 8px; }
.numbers-table thead th { vertical-align: bottom; }
.numbers-table th[scope="row"] { font-weight: 400; }
.numbers-n { font-family: var(--font-display); font-size: 17px; font-weight: 500; white-space: nowrap; }
.numbers-tr.is-spent .numbers-n { color: var(--slate); text-decoration: line-through; text-decoration-thickness: 1px; }
.numbers-state { font-weight: 700; color: var(--slate); }
.numbers-state.inuse { color: var(--accent); }
.numbers-state.warn, .numbers-state-also.warn { color: var(--warn-text); }
.numbers-state.bad, .numbers-state-also.bad { color: var(--bad); }
.numbers-state-also { font-weight: 700; }
.numbers-share { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 64px; }
.numbers-share-bar { position: relative; display: block; width: 64px; height: 4px; overflow: hidden; border-radius: 2px; background: var(--off-pale); }
.numbers-share-fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--pct, 0%); background: var(--rule-strong); }
.numbers-share.warn .numbers-share-text { color: var(--warn-text); font-weight: 700; }
.numbers-share.warn .numbers-share-fill { background: var(--warn); }
.numbers-share.bad .numbers-share-text { color: var(--bad); font-weight: 700; }
.numbers-share.bad .numbers-share-fill { background: var(--bad); }
.numbers-low-asr { color: var(--warn-text); font-weight: 700; }
.numbers-table-foot { margin: 10px 0 0; font-size: 14px; }

/* A column head is a button that sorts; pressed again it turns the order round. Its padding
   makes it 44 px tall without a taller head. */
.numbers-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -12px 0;
  padding: 12px 0;
  border: 0;
  background: none;
  color: var(--slate);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.numbers-sort:hover, .numbers-sort.on { color: var(--ink); }
.numbers-sort-mark { display: inline-block; width: 8px; height: 8px; }
.numbers-sort-mark.asc, .numbers-sort-mark.desc { border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.numbers-sort-mark.asc { margin-top: 4px; transform: rotate(-135deg); }
.numbers-sort-mark.desc { margin-top: -4px; transform: rotate(45deg); }

/* Not room for that table in the card: each number is a block. The number and its state on the
   first line, where it is in use, then its attempts, share and answer rate with their words. */
@container numbers-card (max-width: 759px) {
  .numbers-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .numbers-table, .numbers-table tbody { display: block; }
  .numbers-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .numbers-table tr:last-child { border-bottom: 0; }
  .numbers-table th, .numbers-table td { display: block; padding: 0; border: 0; text-align: left; }
  .numbers-table .numbers-c-n { flex: 1 1 auto; }
  .numbers-table .numbers-c-state { flex: none; text-align: right; }
  .numbers-table .numbers-c-where { flex: 1 1 100%; font-size: 14px; }
  .numbers-table .num { white-space: normal; }
  .numbers-share { flex-direction: row; align-items: center; gap: 8px; }
  .numbers-table .numbers-label { display: inline; color: var(--slate); }
  .numbers-tool, .numbers-tool select { width: 100%; }
  .numbers-tool-q { max-width: none; }
}

/* Phones: a card's closed line puts its counts on a line of their own. */
@media (max-width: 719px) {
  .numbers-card-sum { flex-wrap: wrap; align-items: flex-start; gap: 4px 12px; padding: 10px 12px; }
  .numbers-card-sum .numbers-mark { margin-top: 5px; }
  .numbers-card > summary::after { margin-top: 6px; }
  .numbers-card[open] > summary::after { margin-top: 10px; }
  .numbers-card-main { flex: 1 1 0; }
  .numbers-card-counts { order: 3; flex: 1 1 100%; padding-left: 24px; text-align: left; white-space: normal; }
  .numbers-card-body { padding: 4px 12px 14px; }
  .numbers-card-ref-foot { padding: 0 12px 12px 36px; }
}

/* ------------------------------------------------------------------ the Add numbers popup
   A native modal dialog of its own: about 640 px wide on a computer, held near the top so it
   grows downwards and nothing above a new part moves; on a phone a sheet the full width and
   height of the screen. Three parts in a column: the head, the form (the only part that
   scrolls) and the row of Cancel and Save. As the head and the buttons never cover the form, a
   field the keyboard reaches is always in sight. What Save does is the last thing in the form,
   right above the buttons. */
.numbers-dlg {
  --numbers-dlg-top: min(8vh, 72px);
  width: min(640px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100vh - var(--numbers-dlg-top) - 24px);
  max-height: calc(100dvh - var(--numbers-dlg-top) - 24px);
  margin: var(--numbers-dlg-top) auto auto;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
}
.numbers-dlg[open] { display: flex; flex-direction: column; }
.numbers-dlg-form { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; }
.numbers-dlg-head {
  display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 24px; border-bottom: 1px solid var(--rule); background: var(--paper);
}
.numbers-dlg-head h2 { margin: 0; font-size: 20px; }
.numbers-dlg-x {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 6px; background: none; color: var(--slate);
}
.numbers-dlg-x:hover { background: var(--hover); color: var(--ink); }
.numbers-dlg-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.numbers-dlg-body { padding: 20px 24px 8px; }
.numbers-dlg-part { margin: 0 0 24px; }
.numbers-dlg-part legend, .numbers-dlg-part > label, .numbers-dlg-part > .field > label, .numbers-dlg-label { font-size: 16px; }
.numbers-dlg-label { margin: 0 0 8px; color: var(--ink); font-weight: 700; }
.numbers-dlg-part .hint { margin-bottom: 10px; }

/* Two or three choices side by side: radio buttons drawn as one segmented control. */
.numbers-pick { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--rule-strong); border-radius: 6px; overflow: hidden; background: var(--paper); }
.numbers-pick-opt { position: relative; display: block; flex: 1 1 auto; min-width: 0; margin: 0; cursor: pointer; }
.numbers-pick-opt + .numbers-pick-opt { border-left: 1px solid var(--rule-strong); }
.numbers-pick-opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.numbers-pick-opt span {
  display: flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 20px;
  color: var(--ink); font-weight: 700; white-space: nowrap;
}
.numbers-pick-opt:hover span { background: var(--hover); }
.numbers-pick-opt input:checked + span { background: var(--accent-fill); color: var(--on-accent); }
:root[data-theme="dark"] .numbers-pick-opt input:checked + span { color: #0B0E12; }
.numbers-pick-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -4px; }

/* Opened from a row: the vendor already chosen, in one box, with Change. */
.numbers-dlg-chosen-box {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 10px 12px 10px 14px; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--paper);
}
.numbers-dlg-chosen-text { flex: 1 1 16em; min-width: 0; margin: 0; }
.numbers-dlg-chosen-text .numbers-dlg-row-uses { display: block; margin-top: 1px; color: var(--slate); font-size: 14px; }

/* The vendors: "every vendor" first, then Find, then the rows. A long list scrolls in its own
   box, so the numbers stay near. */
.numbers-dlg-wait { display: flex; align-items: center; min-height: 64px; margin: 0; padding: 0 14px; border: 1px dashed var(--rule-strong); border-radius: 6px; color: var(--slate); }
.numbers-dlg-alert { margin: 0 0 12px; }
.numbers-dlg-every.check {
  margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--paper); font-weight: 700;
}
.numbers-dlg-every:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.numbers-dlg-find { margin: 0 0 10px; }
.numbers-dlg-find label { font-size: 14px; }
.numbers-dlg-rows { border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); }
.numbers-dlg-rows.is-long { max-height: min(480px, 55vh); overflow: auto; overscroll-behavior: contain; }
.numbers-dlg-row.check { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.numbers-dlg-row.check:last-child { border-bottom: 0; }
.numbers-dlg-row:hover { background: var(--hover); }
.numbers-dlg-row:has(input:checked) { background: var(--accent-tint); }
.numbers-dlg-row-text { display: block; min-width: 0; }
.numbers-dlg-row-name { font-weight: 700; overflow-wrap: anywhere; }
.numbers-dlg-row-where { color: var(--slate); font-size: 14px; white-space: nowrap; }
.numbers-dlg-row .numbers-dlg-row-uses { display: block; margin-top: 1px; color: var(--slate); font-size: 14px; }
.numbers-dlg-row-uses.is-new { color: var(--ink); }
.numbers-dlg-row-uses.is-blocked { color: var(--warn-text); }
.numbers-dlg-none { margin: 0; padding: 12px; color: var(--slate); }
.numbers-dlg-nohost { max-width: 34em; margin: 0; color: var(--slate); }
.numbers-dlg-more { margin: 8px 0 0; }
.numbers-dlg-ticked { margin: 8px 0 0; color: var(--slate); font-size: 14px; font-weight: 700; }
.numbers-dlg-part textarea { min-height: 120px; }
.numbers-dlg-listnote { margin: 4px 0 0; color: var(--slate); font-size: 14px; }

/* What Save does: the result of a Save that did not all go through, the summary, the warnings. */
.numbers-dlg-outcome { margin: 0 0 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.numbers-dlg-sum { margin: 0; color: var(--ink); font-size: 15px; }
.numbers-dlg-sum.is-wait { color: var(--slate); }
.numbers-dlg-warn {
  display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 8px 12px;
  border: 1px solid var(--warn-edge, var(--warn)); border-radius: 6px; background: var(--warn-pale); color: var(--warn-text); font-size: 15px;
}
.numbers-dlg-warn.bad { border-color: var(--bad-edge, var(--bad)); background: var(--bad-pale); color: var(--bad); font-weight: 700; }
.numbers-dlg-warn .glyph { flex: none; margin-top: 2px; }
.numbers-dlg-result { margin: 0 0 12px; }
.numbers-dlg-fails { margin: 6px 0; padding-left: 20px; }
.numbers-dlg-fails li + li { margin-top: 4px; }

/* Cancel and Save, always in sight under the form. */
.numbers-dlg-actions {
  display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
  padding: 12px 24px; border-top: 1px solid var(--rule); background: var(--paper);
}
.numbers-dlg-actions .btn { min-width: 112px; }

@media (max-width: 719px) {
  .numbers-dlg {
    width: 100%; max-width: 100%;
    height: calc(100vh - 8px); height: calc(100dvh - 8px);
    max-height: calc(100vh - 8px); max-height: calc(100dvh - 8px);
    margin: auto 0 0; border-width: 1px 0 0; border-radius: 12px 12px 0 0;
  }
  .numbers-dlg-head { padding: 6px 6px 6px 16px; }
  .numbers-dlg-body { padding: 16px 16px 4px; }
  .numbers-dlg-part { margin-bottom: 20px; }
  .numbers-pick { display: flex; }
  .numbers-pick-opt span { padding: 0 12px; }
  .numbers-dlg-rows.is-long { max-height: min(420px, 50vh); }
  .numbers-dlg-sum { font-size: 14px; }
  .numbers-dlg-warn { font-size: 14px; }
  .numbers-dlg-actions { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .numbers-dlg-actions .btn { flex: 1 1 0; min-width: 0; }
}