/* --------------------------------------------------------------- segment
 * templates/ui/segment.html. A choice among two to five visible options
 * (WEB-KOM-03, the grammar of every page): porcelain, the options divided by cloud, the
 * chosen one on paper with the red underline - the grammar of the active
 * tab. Disabled: silver text, the width stays, so nothing moves on a click.
 * A segment is a radio group: one tab stop, the arrow keys choose
 * (static/js/controls.js).
 *
 * Two forms, one look: buttons in a component that renders itself
 * (.is-on / aria-checked), or radios in a form - works without script; the
 * input stays for the keyboard and screen readers, out of sight. */
@layer ui {
.seg { display: inline-flex; flex-wrap: nowrap; box-sizing: border-box; height: var(--ctl-h); max-width: 100%;
  margin: 0; padding: 0; border: 0; background: var(--surface-subtle); }
/* The options fill the segment's height (WEB-KOM-04, K-29): each carries
   the cloud frame, neighbours share their edge, so an option is exactly
   36 px, or 30 px in a bar - not 34 or 28 inside an outer frame. */
.seg__opt { position: relative; box-sizing: border-box; display: inline-flex; align-items: center;
  justify-content: center; height: 100%; margin: 0; padding: 0 var(--ctl-px); font: inherit; font-size: var(--t-small);
  line-height: 1; white-space: nowrap; color: var(--text-secondary); background: transparent;
  border: 1px solid var(--rule-faint); border-radius: 0; cursor: pointer; }
.seg__opt + .seg__opt { margin-left: -1px; }
.seg__opt:hover { color: var(--text-primary); }
.seg__opt.is-on, .seg__opt:has(> input:checked) {
  color: var(--text-primary); background: var(--surface-page); box-shadow: inset 0 -2px 0 var(--corum); }
/* Disabled: silver text, the width stays. */
.seg__opt[disabled], .seg__opt[disabled]:hover, .seg__opt:has(> input:disabled),
.seg__opt:has(> input:disabled):hover { color: var(--text-disabled); cursor: default; }
.seg__opt:focus-visible, .seg__opt:has(> input:focus-visible) { outline: 2px solid var(--rule-brand); outline-offset: 1px; z-index: 1; }
/* The radio of the form variant: in the page, not in sight. */
.seg__opt > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
/* Icon options (bars | lines). */
.seg--icon .seg__opt { padding: 0 var(--s-2); }
.seg--icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round; }

/* A switch between pages (mode "link"): the same segment, its options
   links; the current one marked. */
a.seg__opt { text-decoration: none; }
a.seg__opt:focus-visible { outline: 2px solid var(--rule-brand); outline-offset: 1px; z-index: 1; }

/* More than four options do not fit a phone: there the segment is a
   select with the same options (owner brief F; static/js/controls.js
   builds it next to the segment and keeps both in step). */
.seg-phone { display: none; }

@media (max-width: 720px) {
  .seg.seg--many { display: none; }
  /* The select that stands in for it (static/js/controls.js). */
  div.seg-phone { display: flex; width: 100%; max-width: 100%; }
}

@media (max-width: 720px) {
  .seg__opt { padding: 0 var(--s-2); }
}
}  /* @layer ui */