/* natalka/app/static/pair.css — compat pair (prototype docs/board/2026-10-03-compat/proto/proto.css, v4).
   Prefixed `pair-` so nothing here can restyle another screen. */
.pair-dots { display: flex; align-items: flex-start; gap: 12px; }
/* №318 P16b (owner answer a, №328): the pair mark (icons.pair_mark), the two discs of the pair picture (P16a) without colour (№275):
   the reader's disc filled like her you-disc (menu.css .pair-circle.you), the other white with the 1.5px ink ring (.pair-circle below),
   no letters; a ring of the colour it sits on where they meet (--pm-ring: the page --bg in the head, --surface inside a .grouped list).
   Sized by --pm-h = the disc height; the mark is 5/3 of it wide. */
.pair-mark { display: block; flex: none; overflow: visible; height: var(--pm-h, var(--avatar-l)); width: calc(var(--pm-h, var(--avatar-l)) * 5 / 3); --pm-ring: var(--bg); }
.grouped .pair-mark { --pm-h: var(--avatar-s); --pm-ring: var(--surface); }
.pm-ring { fill: var(--pm-ring); }
.pm-you { fill: var(--accent); }
.pm-edge { fill: none; stroke: var(--chart-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }   /* №374: the ink edge of a white disc kept over its photo */
.pm-other { fill: var(--surface); stroke: var(--chart-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
/* polish B6 (direction C rejects pastel hues): a person disc is white with a 1.5px ink ring and the initial in ink;
   no element sign (canon №105: the chart wheel is the only place with astro graphics), never a colour. */
.pair-circle { position: relative; width: var(--avatar-l); height: var(--avatar-l); border-radius: 50%; display: flex;
  align-items: center; justify-content: center; background: var(--surface); border: 1.5px solid var(--chart-ink);
  color: var(--text); font: 700 calc(var(--avatar-l) * .42)/1 var(--font); }
.pair-circle { overflow: hidden; }
/* canon №374: a Telegram profile photo covers the disc inside the app; the letter stays underneath as the fallback (onerror removes the img) */
.pc-photo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--surface); }
.mn-av { font-size: calc(var(--avatar-s) * .42); }
.pair-head { margin-top: 0; }
.pair-head .head-title { margin-top: var(--gap-m); text-wrap: balance; }
.pair-title-line { display: block; }
/* circle switch (canon №191, style D1): a segmented control - a grey track, the selected segment a raised surface; three equal
   segments across the width, >=44px tall, fits 320px. Ink fill stays for primary actions and the selected tab. */
.pair-switch { display: flex; gap: var(--gap-xs); margin-top: var(--gap-l); padding: var(--gap-xs); background: var(--seg-track); border-radius: var(--r-chip); }
.pair-switch-btn { flex: 1 1 0; min-width: 0; height: var(--tap-min); padding: 0 var(--gap-s); display: flex; align-items: center; justify-content: center;
  appearance: none; -webkit-appearance: none; border: var(--bw-state) solid transparent; border-radius: calc(var(--r-chip) - var(--gap-xs)); background: none; color: var(--text);
  font: var(--t-chip); cursor: pointer; transition: background-color var(--state-ms) var(--ease-out), box-shadow var(--state-ms) var(--ease-out), border-color var(--state-ms) var(--ease-out); }
/* the selected segment: raised surface + an ink border, so its state holds >= 3:1 against the track in both themes (the surface alone is 1.4:1) */
.pair-switch-btn[aria-pressed="true"] { background: var(--seg-on); border-color: var(--accent); box-shadow: var(--shadow-raise); font-weight: 700; }
.pair-switch-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pair-rows { margin-top: var(--gap-m); }
.pair-rows .g-row { padding: var(--gap-l) 0; }
.pair-rows .g-row.wide { display: block; }
.pair-rows .g-note { margin: var(--gap-s) 0 0; font: var(--t-caption); color: var(--muted); text-wrap: pretty; }
.pair-gap { margin-top: var(--gap-l); }
.pair-grey { margin: 0; font: var(--t-caption); color: var(--muted); text-wrap: pretty; }
.pair-quiet { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--tap-min); margin: var(--gap-s) 0 0; padding: var(--gap-s) 0; text-align: center;
  color: var(--muted); background: none; border: 0; }