/* Segmented controls — the ruled key.
   One ruled strip on the board ground, cells split by hairlines. The chosen cell is framed like a
   selected ledger cell: a 1px rule-bright frame laid over the strip's own rule, the raised fill
   and full-strength ink. No colour and no motion beyond a short fade: choosing a view, filter,
   mode or vote is an ordinary act, so the control stays neutral and lets the figures speak.

   Order sides are the one exception. `.aera-seg--sides` (Trading and MoC Buy/Sell) keeps the lit
   key: a 2px lamp bar on the chosen cell's top edge over a short wash, mint for Buy and pink for
   Sell, because there the colour carries market meaning. Loaded last: this file owns every
   segmented control.

   Markup: `.aera-seg` on the track (nav, div or fieldset). Cells are its direct children
   (links, buttons, or labels wrapping a radio). The chosen cell carries aria-current,
   aria-pressed="true", .active or a checked radio. A fieldset's legend is not a cell. */

.aera-seg {
  --seg-h: 40px;
  --seg-pad: 14px;
  --seg-r: 4px;
}
/* Doubled to outrank page resets such as `.moc-page fieldset { border: 0 }`.
   The strip's rule is an inset shadow inside 1px of padding, so the chosen frame can lie on it. */
.aera-seg.aera-seg {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);
  min-width: 0;
  max-width: 100%;
  margin-inline: 0;
  padding: 1px;
  border: 0;
  border-radius: var(--seg-r);
  background: var(--ground-fill);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.aera-seg::-webkit-scrollbar { display: none; }
fieldset.aera-seg.aera-seg { min-inline-size: 0; }
.aera-seg.aera-seg--inline { display: inline-grid; }

.aera-seg.aera-seg > :not(legend) {
  --seg-rs: 0px;
  --seg-re: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: var(--seg-h);
  margin: 0;
  padding: 0 var(--seg-pad);
  border: 0;
  border-radius: max(0px, var(--seg-rs) - 1px) max(0px, var(--seg-re) - 1px) max(0px, var(--seg-re) - 1px) max(0px, var(--seg-rs) - 1px);
  background: transparent;
  box-shadow: none;
  color: var(--text-soft);
  font: 500 .8125rem/1.2 var(--font-sans);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  opacity: 1;
  filter: none;
  transition: color 120ms ease-out, background-color 120ms ease-out;
}
.aera-seg.aera-seg > :not(legend):first-child,
.aera-seg.aera-seg > legend:first-child + * { --seg-rs: var(--seg-r); }
.aera-seg.aera-seg > :not(legend):last-child { --seg-re: var(--seg-r); }
.aera-seg.aera-seg > [hidden] { display: none; }
/* Hairlines between cells; the chosen cell's frame covers its own. */
.aera-seg.aera-seg > :not(legend) + :not(legend) { box-shadow: inset 1px 0 0 var(--terminal-rule); }

/* Radios fill their label, so the whole cell is the target. */
.aera-seg > label > input:is([type="radio"], [type="checkbox"]) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  cursor: inherit;
}

.aera-seg.aera-seg > :not(legend):hover:not(:disabled, [aria-disabled="true"], :has(input:disabled)) {
  color: var(--text);
  background: var(--terminal-control);
}

/* The chosen cell. */
.aera-seg.aera-seg > :is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], .active, :has(input:checked)):not(legend),
.aera-seg.aera-seg > :is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], .active, :has(input:checked)):not(legend):hover {
  z-index: 1;
  color: var(--text);
  background: var(--terminal-raised);
  box-shadow: none;
}
.aera-seg.aera-seg > :is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], .active, :has(input:checked)):not(legend)::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid var(--rule-bright);
  border-radius: var(--seg-rs) var(--seg-re) var(--seg-re) var(--seg-rs);
  pointer-events: none;
}

/* Keyboard focus sits inside the strip so the rule never doubles. */
.aera-seg.aera-seg > :not(legend):is(:focus-visible, :has(input:focus-visible)) {
  z-index: 2;
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.aera-seg.aera-seg > :not(legend):is(:disabled, [aria-disabled="true"], :has(input:disabled)) { cursor: not-allowed; opacity: .45; }
.aera-seg.aera-seg:is(:disabled, [aria-disabled="true"]) { box-shadow: inset 0 0 0 1px var(--terminal-rule); }
fieldset.aera-seg:disabled > :not(legend) { cursor: not-allowed; }

/* Counts and secondary lines inside a cell. */
.aera-seg .aera-seg-count { font: 500 .6875rem/1 var(--fontfam-term); font-variant-numeric: tabular-nums slashed-zero; color: var(--text-muted); transition: color 120ms ease-out; }
.aera-seg .aera-seg-count:empty { display: none; }
.aera-seg > :is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], .active, :has(input:checked)) .aera-seg-count { color: var(--text-soft); }

/* ---------- Order sides: the lit key ---------- */
/* Buy takes mint, Sell the pink side: the fill colours for the bar and the wash, the type colours for the label.
   The bar fades in; it does not grow. */
.aera-seg--sides { --seg-tone: var(--positive-fill-rgb); --seg-wash: var(--positive-wash); --seg-ink: var(--text); }
.aera-seg.aera-seg--sides > :is(.buy, .moc-side-btn--buy) { --seg-tone: var(--positive-fill-rgb); --seg-wash: var(--positive-wash); --seg-ink: var(--positive); }
.aera-seg.aera-seg--sides > :is(.sell, .moc-side-btn--sell) { --seg-tone: var(--danger-soft-fill-rgb); --seg-wash: var(--danger-soft-wash); --seg-ink: var(--danger-soft); }
.aera-seg.aera-seg--sides > :not(legend)::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  border: 0;
  border-radius: 0;
  background: rgb(var(--seg-tone));
  opacity: 0;
  transition: opacity 140ms ease-out;
  pointer-events: none;
}
.aera-seg.aera-seg--sides > :is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], .active, :has(input:checked)):not(legend),
.aera-seg.aera-seg--sides > :is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], .active, :has(input:checked)):not(legend):hover {
  color: var(--seg-ink);
  background: linear-gradient(rgb(var(--seg-tone) / calc(.15 * var(--seg-wash))), rgb(var(--seg-tone) / calc(.035 * var(--seg-wash))));
}
.aera-seg.aera-seg--sides > :is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], .active, :has(input:checked)):not(legend)::after {
  inset: 0 0 auto;
  border: 0;
  border-radius: 0;
  opacity: 1;
}
/* The lit cell and its right neighbour drop their hairlines. */
.aera-seg.aera-seg--sides > :is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], .active, :has(input:checked)) + :not(legend) { box-shadow: none; }

/* ---------- List filters: the quiet key ----------
   `.aera-seg--quiet` narrows a list beneath the page's tabs (Series Active / My positions / Matured,
   Liquidations pools, MoC order status), so it stays below them in weight. No strip and no hairlines: unchosen labels
   are muted, and the chosen one keeps the ruled key's frame, in `rule-strong` without the raised
   fill. Frame, hover fill and focus are drawn as a 28px chip centred in a 44px target, at least 44px wide. */
.aera-seg.aera-seg.aera-seg--quiet { --seg-h: 44px; --seg-pad: 10px; --seg-chip-y: 8px; grid-auto-columns: max-content; gap: 2px; padding: 0; background: transparent; box-shadow: none; }
.aera-seg.aera-seg.aera-seg--quiet > :not(legend) { --seg-rs: var(--seg-r); --seg-re: var(--seg-r); isolation: isolate; min-width: 44px; gap: 6px; background: transparent; box-shadow: none; color: var(--text-muted); font-size: .75rem; }
.aera-seg.aera-seg--quiet > :not(legend)::before { content: ''; position: absolute; inset: var(--seg-chip-y) 0; z-index: -1; border-radius: var(--seg-r); background: transparent; transition: background-color 120ms ease-out; pointer-events: none; }
.aera-seg.aera-seg.aera-seg--quiet > :not(legend):hover:not(:disabled, [aria-disabled="true"], :has(input:disabled)) { background: transparent; color: var(--text-soft); }
.aera-seg.aera-seg--quiet > :not(legend):hover:not(:disabled, [aria-disabled="true"], :has(input:disabled))::before { background: var(--terminal-control); }
.aera-seg.aera-seg.aera-seg--quiet > :is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], .active, :has(input:checked)):not(legend),
.aera-seg.aera-seg.aera-seg--quiet > :is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], .active, :has(input:checked)):not(legend):hover { background: transparent; color: var(--text); }
.aera-seg.aera-seg.aera-seg--quiet > :is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], .active, :has(input:checked)):not(legend)::after { inset: var(--seg-chip-y) 0; border-color: var(--rule-strong); border-radius: var(--seg-r); }
.aera-seg.aera-seg.aera-seg--quiet > :not(legend):is(:focus-visible, :has(input:focus-visible)) { outline: none; }
.aera-seg.aera-seg.aera-seg--quiet > :not(legend):is(:focus-visible, :has(input:focus-visible))::after { content: ''; position: absolute; inset: var(--seg-chip-y) 0; border: 2px solid var(--focus); border-radius: var(--seg-r); pointer-events: none; }
.aera-seg.aera-seg--quiet .aera-seg-count { font-size: .625rem; }

/* ---------- A choice with figures: the ruled list ----------
   `.aera-seg--rows` stacks the key's cells as rows, for a pick whose options each carry their own figures
   (the Bitcoin Bridge's bridges). The strip, the hairlines, the chosen frame, the raised fill and the focus
   outline are the ruled key's; rows are left-aligned, wrap, and lead with a neutral ring that fills when
   chosen. A row is a label wrapping its radio, then:
     `.aera-seg-title`  the option's name, with `.aera-seg-tag` tags beside it
     `.aera-seg-lead`   the one figure that leads the row, at its right end
     `.aera-seg-facts`  label and value pairs (`<span><span>label</span><b>value</b></span>`)
     `.aera-seg-note`   one muted line
   `data-unavailable="true"` mutes an option that cannot be used right now; it stays selectable. While the
   fieldset is disabled the chosen row keeps full strength, so its figures stay readable. No market colour. */
.aera-seg.aera-seg.aera-seg--rows { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; overflow: hidden; }
.aera-seg.aera-seg.aera-seg--rows > :not(legend) {
  --seg-rt: 0px;
  --seg-rb: 0px;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  gap: 6px 10px;
  min-height: 56px;
  padding: 12px 14px;
  border-radius: max(0px, var(--seg-rt) - 1px) max(0px, var(--seg-rt) - 1px) max(0px, var(--seg-rb) - 1px) max(0px, var(--seg-rb) - 1px);
  font-size: .875rem;
  text-align: left;
  white-space: normal;
}
.aera-seg.aera-seg.aera-seg--rows > :not(legend):first-child,
.aera-seg.aera-seg.aera-seg--rows > legend:first-child + * { --seg-rt: var(--seg-r); }
.aera-seg.aera-seg.aera-seg--rows > :not(legend):last-child { --seg-rb: var(--seg-r); }
.aera-seg.aera-seg.aera-seg--rows > :not(legend) + :not(legend) { box-shadow: inset 0 1px 0 var(--terminal-rule); }
.aera-seg.aera-seg.aera-seg--rows > :is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], .active, :has(input:checked)):not(legend) { box-shadow: none; }
.aera-seg.aera-seg.aera-seg--rows > :is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], .active, :has(input:checked)):not(legend)::after { border-radius: var(--seg-rt) var(--seg-rt) var(--seg-rb) var(--seg-rb); }
/* The ring: unlit in the strip's bright rule, filled in ink when chosen. */
.aera-seg.aera-seg--rows > :not(legend)::before { content: ''; grid-column: 1; width: 14px; height: 14px; border: 1px solid var(--rule-bright); border-radius: 50%; transition: border-color 120ms ease-out, background-color 120ms ease-out; pointer-events: none; }
.aera-seg.aera-seg--rows > :is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], .active, :has(input:checked)):not(legend)::before { border-color: var(--text); background: radial-gradient(circle, var(--text) 0 3px, transparent 3.5px); }
.aera-seg--rows .aera-seg-title { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-weight: 600; }
.aera-seg--rows .aera-seg-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--rule-strong); border-radius: 3px; color: var(--text-soft); font: 500 .6875rem/1 var(--fontfam-term); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.aera-seg--rows .aera-seg-lead { grid-column: 3; justify-self: end; color: var(--text-soft); font: .8125rem/1.4 var(--fontfam-term); font-variant-numeric: tabular-nums slashed-zero; text-align: right; white-space: nowrap; }
.aera-seg--rows :has(input:checked) > .aera-seg-lead { color: var(--text); }
.aera-seg--rows .aera-seg-facts { grid-column: 2 / -1; display: grid; gap: 2px; min-width: 0; }
.aera-seg--rows .aera-seg-facts:empty { display: none; }
.aera-seg--rows .aera-seg-fact-note { display: block; font: inherit; }
.aera-seg--rows .aera-seg-facts > span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--text-muted); font-size: .75rem; font-weight: 400; line-height: 1.5; }
.aera-seg--rows .aera-seg-facts b { min-width: 0; color: var(--text-soft); font: 400 .8125rem/1.5 var(--fontfam-term); font-variant-numeric: tabular-nums slashed-zero; text-align: right; overflow-wrap: anywhere; }
.aera-seg--rows :has(input:checked) > .aera-seg-facts b { color: var(--text); }
.aera-seg--rows .aera-seg-note { grid-column: 2 / -1; color: var(--text-muted); font: 400 .75rem/1.5 var(--font-sans); }
.aera-seg--rows .aera-seg-note:empty { display: none; }
.aera-seg--rows > [data-unavailable="true"] :is(.aera-seg-title, .aera-seg-lead) { color: var(--text-muted); }
.aera-seg--rows > [data-unavailable="true"]:has(input:checked) .aera-seg-title { color: var(--text-soft); }
.aera-seg.aera-seg.aera-seg--rows > :not(legend):has(input:disabled) { opacity: .55; }
.aera-seg.aera-seg.aera-seg--rows > :not(legend):has(input:disabled:checked) { opacity: 1; }

/* ---------- Placements ---------- */
/* Pool risk: five price steps in a narrow column, set in mono. Under the exposure chart the strip
   joins the chart, so its top corners are square. */
.aera-seg.sr-scenarios { --seg-h: 38px; --seg-pad: 4px; grid-auto-columns: minmax(0, 1fr); margin: 14px 0 0; }
.aera-seg.sr-scenarios > :not(legend) { overflow: hidden; text-overflow: ellipsis; }
.aera-seg.sr-scenarios > :not(legend) { font: 500 .75rem/1 var(--fontfam-term); font-variant-numeric: tabular-nums; }
.sr-exposure:not([hidden]) + .aera-seg.aera-seg.sr-scenarios > :not(legend) { border-start-start-radius: 0; border-start-end-radius: 0; }
.sr-exposure:not([hidden]) + .aera-seg.aera-seg.sr-scenarios > :not(legend)::after { border-start-start-radius: 0; border-start-end-radius: 0; }
/* DAO staking and MoC funds switch views: 44px link targets. */
.aera-seg:is(.ad-stake-modes, .moc-fund-modes) { --seg-h: 44px; margin-bottom: 24px; }
.aera-seg.ad-vote-choice { margin: 0; }
/* DAO Admin market making change: five choices at 44px; the strip scrolls on phones. */
.aera-seg.ad-mm-kinds { --seg-h: 44px; margin: 0; }
/* Order sides. */
.aera-seg:is(#side-toggle, .moc-side-toggle) { --seg-h: 42px; width: 100%; }
.main-layout:not(.main-layout--page) .aera-seg#side-toggle { margin: 0 0 20px; }
.aera-seg.moc-side-toggle { margin: 0 0 12px; }
.aera-seg:is(#side-toggle, .moc-side-toggle) > :not(legend) { letter-spacing: .01em; }
/* Bridge fee: speed over its rate. */
.aera-seg.br-fee-modes { --seg-h: 52px; --seg-pad: 6px; }
.aera-seg.br-fee-modes > :not(legend) { flex-direction: column; gap: 3px; white-space: nowrap; }
.aera-seg.br-fee-modes > :not(legend) > small { color: var(--text-muted); font: .6875rem/1.2 var(--fontfam-term); }
.aera-seg.br-fee-modes > :has(input:checked) > small { color: var(--text-soft); }
.br-fee:disabled .aera-seg.br-fee-modes > :not(legend) { opacity: .55; pointer-events: none; }
/* In the Send Bitcoin dialog each speed also states what it comes to, in satoshis. Two by two on a phone. */
.aera-seg.br-fee-modes--priced { --seg-h: 70px; }
.aera-seg.br-fee-modes > :not(legend) > .br-fee-cost { color: var(--text-soft); font: .75rem/1.2 var(--fontfam-term); font-variant-numeric: tabular-nums slashed-zero; }
.aera-seg.br-fee-modes > :has(input:checked) > .br-fee-cost { color: var(--text); }
@media (max-width: 480px) { .aera-seg.aera-seg.br-fee-modes--priced { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aera-seg.trading-spending-modes { margin: 0 0 16px; }
/* Series liquidation payout: compact, inside the ticket. */
.aera-seg.sl-payout { --seg-h: 36px; --seg-pad: 16px; display: inline-grid; }

@media (max-width: 760px), (pointer: coarse) {
  .aera-seg { --seg-h: 44px; }
  .aera-seg:is(.sr-scenarios, .sl-payout) { --seg-h: 44px; }
}
@media (max-width: 380px) {
  .aera-seg.aera-seg.aera-seg--quiet { --seg-pad: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .aera-seg.aera-seg > :not(legend), .aera-seg.aera-seg > :not(legend)::after, .aera-seg.aera-seg--quiet > :not(legend)::before, .aera-seg.aera-seg--rows > :not(legend)::before, .aera-seg .aera-seg-count { transition: none; }
}