/* Shared look of the apps (interpreter station, user app, B-side app). Two themes in one stylesheet: light by default
   (white rounded cards, a teal accent, calm type), and dark in the
   PC MMXpro's navy; only the custom properties differ. <html data-theme>: light | dark | system (the browser's
   preference); the station's Settings keep the choice in this browser. Text colours keep 4.5:1 on --bg, --surface and
   --surface-2 in both, white on the filled buttons too. The station's structure stays the PC's (the caller, side A, on
   the left of the legs, the next party, B, beside it; the call's controls on the right). The user and B-side apps are
   laid out for a portrait frame (about 900 x 1200, the demo stage's three panes); the station (body.station) is a
   desktop page from 1280 x 800 down to about 900 px wide, and one column below that. */
:root {
  --bg: #f2f6f6; --surface: #ffffff; --surface-2: #edf4f4; --fg: #15252a; --muted: #51636a; --line: #d2e0e1; --header: #e0f1f1;
  --accent: #0a6c70;          /* text, outlines and focus on light */
  --accent-fill: #0a7276;     /* filled buttons (white text) */
  --call: #17783f; --call-hi: #126433;      /* call and accept */
  --hang: #c0291b; --hang-hi: #a32217;      /* hang up and reject */
  --ok: #17783f; --warn: #8a5300; --bad: #b3261e; --alert: #c26a00;
  --me: #0a6c70; --them: #15252a;
  --video: #0f1a1d; --shadow: 0 1px 2px rgba(16, 40, 44, .06), 0 4px 14px rgba(16, 40, 44, .06);
  --radius: 12px;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #23232f; --surface: #2b2b3b; --surface-2: #34354a; --fg: #ebecf5; --muted: #a9abc2; --line: #46485f; --header: #30324a;
  --accent: #6fd3d6;          /* text, outlines and focus on dark */
  --accent-fill: #117a7e;     /* filled buttons (white text) */
  --call: #1a7f45; --call-hi: #166b3a;
  --hang: #c42b1c; --hang-hi: #a8241a;
  --ok: #5fd68e; --warn: #f2c05c; --bad: #ff8f87; --alert: #f2c05c;
  --me: #8fdde0; --them: #ebecf5;
  --video: #11111a; --shadow: none;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg: #23232f; --surface: #2b2b3b; --surface-2: #34354a; --fg: #ebecf5; --muted: #a9abc2; --line: #46485f; --header: #30324a;
    --accent: #6fd3d6;          /* text, outlines and focus on dark */
    --accent-fill: #117a7e;     /* filled buttons (white text) */
    --call: #1a7f45; --call-hi: #166b3a;
    --hang: #c42b1c; --hang-hi: #a8241a;
    --ok: #5fd68e; --warn: #f2c05c; --bad: #ff8f87; --alert: #f2c05c;
    --me: #8fdde0; --them: #ebecf5;
    --video: #11111a; --shadow: none;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.4 var(--font); background: var(--bg); color: var(--fg); }
.app { display: grid; gap: 12px; padding: 14px; max-width: 980px; margin: 0 auto; }
.bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 20px; margin-right: auto; }
.title small { color: var(--muted); font-weight: 400; font-size: 14px; }

/* the icon set (index.html's sprite): currentColor, 2 px strokes; a filled icon marks its shapes .dots */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ic .dots, .dots { fill: currentColor; stroke: none; }

/* controls: at least 40 px high, an icon and a word where it fits */
button { font: inherit; font-size: 15px; font-weight: 500; min-height: 40px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--fg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
button:hover:not(:disabled) { border-color: var(--accent); }
button.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
button.call { background: var(--call); border-color: var(--call); color: #fff; }
button.call:hover:not(:disabled) { background: var(--call-hi); border-color: #fff; }
button.danger-fill { background: var(--hang); border-color: var(--hang); color: #fff; }
button.danger-fill:hover:not(:disabled) { background: var(--hang-hi); border-color: #fff; }
button.danger { color: var(--bad); border-color: var(--bad); }
button.danger:hover:not(:disabled) { background: var(--hang); border-color: var(--hang); color: #fff; }
button.big { min-height: 52px; padding: 10px 26px; font-size: 18px; }
button.big .ic { width: 24px; height: 24px; }
button:disabled { opacity: .6; cursor: default; }   /* still readable: 4.0:1 light, 4.9:1 dark */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
input, select { font: inherit; font-size: 15px; min-height: 40px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--fg); min-width: 0; }
input::placeholder { color: var(--muted); opacity: 1; }
input:disabled { opacity: .55; }
input[type="checkbox"] { min-height: 0; width: 18px; height: 18px; accent-color: var(--accent-fill); }
input[type="range"] { min-height: 0; padding: 0; accent-color: var(--accent-fill); }

/* the states: a chip each (the station's state, a leg's), coloured as it goes */
.chip { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 99px; border: 1px solid var(--line); font-size: 14px;
  color: var(--muted); white-space: nowrap; }
.chip.available, .chip.connected, .chip.up { color: var(--ok); border-color: var(--ok); }
.chip.unavailable, .chip.queued, .chip.wrap-up, .chip.ringing, .chip.calling, .chip.new, .chip.connecting, .chip.answering { color: var(--warn); border-color: var(--warn); }
.chip.in-call, .chip.consulting { color: var(--accent); border-color: var(--accent); }
.status { font-size: 18px; font-weight: 500; min-height: 1.4em; }
.status .ic { margin-right: 6px; }
.stage-video { position: relative; background: var(--video); border-radius: var(--radius); }
.stage-video video.remote { width: 100%; aspect-ratio: 16 / 9; background: transparent; border-radius: var(--radius); display: block; position: relative; }
.stage-video video.local { position: absolute; right: 10px; bottom: 10px; width: 26%; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid rgba(255,255,255,.6);
  border-radius: 6px; background: #111821; }
.stage-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--muted); font-size: 15px; }
.stage-empty .ic { width: 40px; height: 40px; stroke-width: 1.5; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; display: grid; gap: 10px; min-width: 0; align-content: start;
  grid-template-columns: minmax(0, 1fr); }   /* one column that never grows past the card (an input's own width would) */
.panel h2, .panel > summary { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 0; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 600; }
.panel h2 .ic, .panel > summary .ic { width: 17px; height: 17px; }
details.panel:not([open]) { gap: 0; }
details > summary { cursor: pointer; min-height: 28px; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "\25B8"; margin-left: auto; font-size: 14px; }   /* a folded panel: its arrow on the right */
details[open] > summary::after { content: "\25BE"; }
#divPanel > summary .count:not(:empty) { font-size: 12px; padding: 0 6px; border-radius: 9px; background: var(--muted); color: var(--surface); letter-spacing: 0; }
.textwin { min-height: 88px; max-height: 160px; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font-size: 19px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.textwin .me { color: var(--me); }
.textwin .them { color: var(--them); }
.textwin:empty::before { content: attr(data-empty); color: var(--muted); font-size: 15px; }
.typehere { width: 100%; }
.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 12px; font-size: 14px; }
.meter { display: grid; grid-template-columns: 80px 1fr; gap: 8px; align-items: center; }
.meter i { display: block; height: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.meter b { display: block; height: 100%; width: 0; background: var(--ok); transition: width .2s linear; }

/* the offer: a card that stands out, the flash an outline pulse around it */
.offer { border: 2px solid var(--alert); background: var(--surface-2); }
.offer h2 { font-size: 22px; text-transform: none; letter-spacing: 0; color: var(--fg); }
/* the offer flashing every second (OFR-16 e, as the PC MMXpro's answer dialog) */
.offer.flash { box-shadow: 0 0 0 5px var(--alert); }   /* an outline pulse: the Accept button keeps its look */
@media (prefers-reduced-motion: reduce) { .offer, .offer.flash { box-shadow: 0 0 0 5px var(--alert); } }   /* steady */
/* calls waiting in a notifying queue (QUE-8 d): the leg columns framed in the alert colour, steady, or (mode 1) in it
   and without it every 425 ms; reduced motion: steady. An outline: the layout does not move */
.legcol.queue-alert { outline: 4px solid var(--alert); outline-offset: 4px; border-radius: var(--radius); }
.legcol.queue-alert.blink { animation: queue-alert-blink 850ms steps(1, end) infinite; }
@keyframes queue-alert-blink { 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .legcol.queue-alert.blink { animation: none; } }
.queue-alert-line { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--warn); }
.queue-alert-line .ic { color: var(--alert); }
.offer-main { display: flex; gap: 14px; align-items: center; }
.offer-icon { width: 44px; height: 44px; padding: 9px; border-radius: 50%; background: var(--call); color: #fff; stroke-width: 2.2; }
.countdown { color: var(--warn); font-weight: 600; font-variant-numeric: tabular-nums; }
.consult { border-color: var(--accent); }
.leg { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: grid; gap: 8px; min-width: 0; align-content: start; }
.leg .top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.leg .top b { margin-right: auto; overflow-wrap: anywhere; }
/* XFR-T g: a card's transfer control asks once, inline */
.leg .xferask { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.leg .xferask[hidden] { display: none; }
.leg .xferask .q { margin-right: auto; }
.leg .avatar { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: var(--bg); color: var(--muted); }
.leg .media { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 13px; }
.leg .media .ic { width: 15px; height: 15px; }
.muted { color: var(--muted); } .small { font-size: 14px; } .status.bad { color: var(--bad); }
.log { height: 90px; overflow: auto; font: 12px/1.3 var(--mono); color: var(--muted); white-space: pre-wrap; }
.hidden { display: none !important; }
/* the stage marks what the demo is about to click */
/* the demo stage points with the accent blue: told apart from the offer's amber flash */
.pointing { box-shadow: 0 0 0 4px var(--accent), 0 0 22px 6px rgba(126, 171, 255, .55) !important; transition: box-shadow .2s; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------------------------------------------------------------- the interpreter station (index.html)
   wide: the top bar; queues, hearing and ring left; the offer, video and legs in the middle; the call's controls right.
   Narrower than 1180 px the controls go under the middle; narrower than 920 px (a demo stage pane, 720 or 900 px) one column. */
body.station .app { max-width: 1800px; gap: 12px; padding: 12px;
  grid-template-columns: 250px 320px minmax(0, 1fr) 320px; grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "top top top top" "side colA main colB" "side colA controls colB" "log log log log"; align-items: start; }
/* the lists column folded away (the top bar's list button, kept in this browser) */
body.station .app.side-folded { grid-template-columns: 320px minmax(0, 1fr) 320px;
  grid-template-areas: "top top top" "colA main colB" "colA controls colB" "log log log"; }
.station .app.side-folded .side { display: none; }
.station .fold { padding: 6px 8px; }
.station .fold[aria-expanded="false"] { color: var(--accent); border-color: var(--accent); }
/* a leg's tall column: the header (name, state, media, hang-up), the remote text above the own, the input at the foot */
.station .legcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; align-self: stretch; min-height: calc(100vh - 110px); }
.station #colA { grid-area: colA; }
.station #colB { grid-area: colB; }
.station .legslot { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.station .legslot:empty { flex: 0 0 auto; }
.station #legB:empty { display: none; }   /* no B: the Call panel at the column's top */
.station #legA:empty { flex: 1 1 auto; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius);
  display: grid; place-items: center; color: var(--muted); }
.station #legA:empty::before { content: attr(data-empty); }
.station .legcol .leg { flex: 1 1 auto; display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--shadow); }
.station .legcol .leg .textwin { flex: 1 1 auto; min-height: 220px; max-height: none; }
/* a column's header, A's and B's alike: the name on a line of its own, then the media icons, the
   state and Hang up (its icon; its name in aria-label and title) on the next; the decorative avatar left out */
.station .legcol .leg .top { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.station .legcol .leg .top b { flex: 1 0 100%; margin-right: 0; font-size: 17px; }
.station .legcol .leg .top .avatar { display: none; }
.station .legcol .leg .top .legicons { margin-right: auto; }
.station .legcol .leg .top button { padding: 7px 10px; white-space: nowrap; }
.station .legcol .leg .top button.danger .lbl { display: none; }
/* the developer detail (?debug=1): the hearing meters, each leg's routing line, the test media's check line, the log */
body.station:not(.debug) .dev { display: none !important; }
.station .topbar { grid-area: top; background: var(--header); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; gap: 12px; }
.station .title { font-size: 18px; margin-right: 8px; }
.station .title .brand { width: 26px; height: 26px; color: var(--accent); }
.station .whobox { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 600; }
.station .whobox:has(#who:empty) { display: none; }
.station #state { font-size: 15px; padding: 5px 14px; }
.station #login { margin-left: auto; }
.station #login input { width: 170px; }
.seg { display: inline-flex; }
.seg button:first-child { border-radius: 8px 0 0 8px; }
.seg button:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.seg #avail:not(:disabled) { color: var(--ok); }
.seg #unavail:not(:disabled) { color: var(--warn); }
.station .side { grid-area: side; display: grid; gap: 12px; min-width: 0; }
.station .main { grid-area: main; display: grid; gap: 12px; min-width: 0; }
.station .controls { grid-area: controls; display: grid; gap: 12px; min-width: 0; }
.station .notices { display: grid; gap: 4px; }
.station .notices:not(:has(.status:not(:empty):not(.hidden))) { display: none; }
.station .notices .status { font-size: 16px; }
.station #netNotice { white-space: pre-line; }   /* the weak connection notice, a line per way the trouble goes (MTX-9 a) */
.station .notices .status:empty { display: none; }
.station .controls .status, .station #callPanel .status { font-size: 15px; }
.station .controls .status:empty, .station #callPanel .status:empty { display: none; }
/* a row of a field and its buttons: the field takes what is left; too narrow for one line, it wraps (the field on a line
   of its own, the rest under it) rather than pushing a button out of the card */
.station .field { display: flex; flex-wrap: wrap; gap: 8px; }
.station .field input { flex: 1 1 10em; min-width: 0; }
.station .field select { flex: 1 1 8em; min-width: 0; }
.station .field button { flex: 0 0 auto; }
#callPanel .field input { flex-basis: 100%; }   /* the number on a line of its own, the side and Call under it */
/* the caller ID choice above the dial field (DIA-10) */
.station .callerid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 8px; font-size: 15px; }
.station .callerid label { color: var(--muted); }
.station .callerid select { min-width: 0; width: 100%; }
.station .callerid .hint { grid-column: 1 / -1; font-size: 14px; }
.station .callerid .hint:empty { display: none; }
.station .callerid .hint.bad { color: var(--bad); }
.station #xferbar .bar button { flex: 1 1 auto; }
.station .prefs { display: grid; gap: 10px; font-size: 15px; }
.station .prefs label { display: grid; gap: 4px; }
.station .prefs label.check { display: flex; align-items: center; gap: 8px; }
.queues { display: grid; gap: 4px; }
.queues:empty::before { content: attr(data-empty); color: var(--muted); font-size: 14px; }
.queue { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ic name count" "ic free free"; column-gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 8px; background: var(--surface-2); }
.queue .ic { grid-area: ic; color: var(--muted); }
.queue .name { grid-area: name; font-weight: 600; overflow-wrap: anywhere; }
.queue .count { grid-area: count; font-size: 13px; color: var(--muted); }
.queue .free { grid-area: free; font-size: 13px; color: var(--muted); }
.queue.waiting .count { color: var(--warn); font-weight: 600; }
.queue.closed .name { color: var(--muted); }
/* the call history (HIS-1 d, e) */
.panel h2 .missed { margin-left: auto; color: var(--bad); text-transform: none; letter-spacing: 0; }
.history { display: grid; gap: 4px; max-height: 40vh; overflow: auto; }
.history:empty::before { content: attr(data-empty); color: var(--muted); font-size: 14px; }
.hist { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name back" "meta back"; column-gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 8px; background: var(--surface-2); }
.hist .name { grid-area: name; font-weight: 600; overflow-wrap: anywhere; }
.hist .meta { grid-area: meta; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.hist .dir { font-weight: 600; }
.hist.missed .dir, .hist.missed .name { color: var(--bad); }
.hist .back { grid-area: back; padding: 4px 8px; font-size: 13px; }
.station .stage-video video.remote { max-height: 52vh; }
/* the self view (MTX-7 d): a quarter of the video area's width, placed by its centre (src/core/selfview.ts) */
.station .stage-video video.local { width: 25%; min-width: 0; right: auto; bottom: auto; touch-action: none; cursor: grab; }
.station .stage-video video.local.dragging { cursor: grabbing; }
.station .stage-video video.local:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.legs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.station .logbox { grid-area: log; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; }
.station .logbox > summary { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.station .logbox .log { height: 160px; margin-top: 8px; }
@media (max-width: 1400px) {
  body.station .app, body.station .app.side-folded { grid-template-columns: 280px minmax(0, 1fr) 280px;
    grid-template-areas: "top top top" "colA main colB" "colA controls colB" "side side side" "log log log"; }
  .station .side { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
}
@media (max-width: 1180px) {
  body.station .app, body.station .app.side-folded { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "top top" "main main" "colA colB" "controls controls" "side side" "log log"; }
  .station .legcol { min-height: 420px; }
  .station .controls { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
  .station #login input { width: 140px; }
  .station .title small { display: none; }
}
@media (max-width: 920px) {
  body.station .app, body.station .app.side-folded { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main" "colA" "colB" "controls" "side" "log"; }
  .station #login, .station .whobox { margin-left: 0; }
}

/* inside the demo stage: no debug log, shorter text windows, so each app fits its pane without scrolling */
.in-stage .log, .in-stage .logbox { display: none; }
.in-stage .textwin { min-height: 58px; max-height: 118px; }
.in-stage .app, .in-stage body.station .app { gap: 10px; }
.in-stage body.station .stage-video video.remote { max-height: 390px; }
.chip.own-badge { color: var(--bad); border-color: var(--bad); font-weight: 600; }
/* a pressed button says what it means: a muted microphone or a camera off is a warning (bad);
   conference on is on (ok); the self view on is the accent (below) */
#ownBar #muteMic[aria-pressed="true"], #ownBar #cameraOff[aria-pressed="true"] { color: var(--bad); border-color: var(--bad); }
#conf[aria-pressed="true"] { color: var(--ok); border-color: var(--ok); }
/* read by screen readers and kept in the text (the lab driver reads it), not shown */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the station's contacts (DIA-9): the organisation's list, the search, the own contacts; each address with Call and
   Transfer, which fill the right column's fields */
.contacts .dirbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.contacts .dirbody > :empty { position: absolute; }   /* an empty list or status takes no room (no gap above New contact) and stays a live region */
.contacts .field button { min-width: 40px; padding: 7px 10px; }
.dirlist { display: grid; gap: 4px; }
.dirlist.sticky:not(:empty) { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.contact { display: grid; gap: 4px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); min-width: 0; }
.contact .cname { font-weight: 600; overflow-wrap: anywhere; display: flex; gap: 6px; align-items: center; }
.contact .cname .ic { color: var(--muted); width: 16px; height: 16px; }
.contact .cdetail { font-size: 13px; color: var(--muted); }
.contact .addr { display: flex; gap: 4px; align-items: center; font-size: 14px; min-width: 0; }
.contact .addr .a { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.contact .addr .k { color: var(--muted); font-size: 12px; margin-right: 2px; }
.contact button { min-height: 32px; padding: 4px 8px; font-size: 13px; }
.contact button .ic { width: 16px; height: 16px; }
.contact .own { display: flex; gap: 4px; }
.dirform { display: grid; gap: 6px; font-size: 14px; }
.dirform label { display: grid; gap: 2px; }
/* the terms of use before first use (SES-16): a card in the middle, the link and "I accept" before Continue */
.station .terms { border-color: var(--accent); max-width: 640px; }
.station .terms .termslink { display: grid; gap: 2px; font-size: 17px; }
.station .terms .termslink a { color: var(--accent); font-weight: 600; }
.station .terms .termslink .muted { overflow-wrap: anywhere; }
.station .terms label.check { display: flex; align-items: center; gap: 8px; font-size: 16px; cursor: pointer; }
/* the call's queue's information (QUE-7 e): beside the call, the info as plain text (new lines kept), the URL a link */
.station .queueinfo .qname { font-weight: 600; overflow-wrap: anywhere; }
.station .queueinfo .qtext { white-space: pre-line; overflow-wrap: anywhere; max-height: 40vh; overflow: auto; font-size: 15px; }
.station .queueinfo .qlink { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); overflow-wrap: anywhere; }
/* the station's Settings dialog (SET-2): one place for the ring, the devices, the text appearance, the quick texts and
   the keys; a modal over the station, as wide as fits */
dialog.settings { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg); color: var(--fg); }
dialog.settings::backdrop { background: rgba(0, 0, 0, .6); }
.settings-head { position: sticky; top: 0; display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--surface);
  border-bottom: 1px solid var(--line); z-index: 1; }
.settings-head h2 { display: flex; align-items: center; gap: 8px; margin: 0 auto 0 0; font-size: 18px; }
.settings-body { display: grid; gap: 12px; padding: 14px; }
.settings .prefs { display: grid; gap: 10px; font-size: 15px; }
.settings .prefs label { display: grid; gap: 4px; }
.settings .prefs label.check { display: flex; align-items: center; gap: 8px; }
.settings .small { font-size: 13px; }
.settings .textsides { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.settings fieldset { display: grid; gap: 8px; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.settings legend { color: var(--muted); font-size: 13px; padding: 0 4px; }
.settings .sample { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line); }
.keylist { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 15px; }
.keylist dt { font-family: var(--mono); color: var(--accent); white-space: nowrap; }
.keylist dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.keylist:empty::before { content: "None"; color: var(--muted); }

/* the leg windows in the interpreter's own text appearance once MMX's settings arrived (SET-2 d): the variables are
   set on the leg row; layout stack (their text above mine), side (side by side), one (one window) */
.leg.styled .textwin .them { color: var(--tin-fg); font-family: var(--tin-font); font-size: var(--tin-size); }
.leg.styled .textwin .me { color: var(--tout-fg); font-family: var(--tout-font); font-size: var(--tout-size); }
.leg.styled .textwin[data-layout="one"] { background: var(--tout-bg); }
.leg.styled .textwin[data-layout="one"] .them { background: var(--tin-bg); }
.leg.styled .textwin[data-layout="one"] .me { background: var(--tout-bg); }
.leg.styled .textwin[data-layout="stack"], .leg.styled .textwin[data-layout="side"] { display: flex; padding: 0; gap: 1px; background: var(--line); }
.leg.styled .textwin[data-layout="stack"] { flex-direction: column; }
.leg.styled .textwin[data-layout="stack"]:empty, .leg.styled .textwin[data-layout="side"]:empty { display: block; padding: 8px 10px; background: var(--tin-bg); }
.leg.styled .textwin .pane { flex: 1 1 0; min-height: 40px; overflow: auto; padding: 6px 10px; }
.leg.styled .textwin .them-pane { background: var(--tin-bg); }
.leg.styled .textwin .me-pane { background: var(--tout-bg); }
.leg.styled .typehere { color: var(--tout-fg); background: var(--tout-bg); font-family: var(--tout-font); font-size: var(--tout-size); }
/* an empty styled window's placeholder in the text colour of the side whose background it is on (never the same
   colour as that background, SET-1 b), a little lighter */
.leg.styled .textwin:empty::before { color: var(--tin-fg); opacity: .75; }
.leg.styled .textwin[data-layout="one"]:empty::before { color: var(--tout-fg); }

/* the caller's information (OFR-17 l): a link, or MMX-USERINFO's lines folded out */
.partyinfo:empty { display: none; }
.partyinfo a, #browserPage { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
.partyinfo pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 0; font: inherit; font-size: 14px; }
/* the self view on (MTX-7 a): pressed means on, so the accent, not the warning of a mute or camera off */
#ownBar #selfView[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

/* a leg's media icons (text, audio, video): lit when on the leg, greyed out when not */
.legicons { display: inline-flex; gap: 4px; align-items: center; }
.legicon { display: inline-flex; color: var(--muted); opacity: .4; }
.legicon.on { color: var(--accent); opacity: 1; }
.legicon .ic { width: 18px; height: 18px; }
/* the divergence report (DIV-1 g): the sign-in's ended calls, each with Report; the form under them */
.divcalls { display: grid; gap: 4px; }
.divcalls:empty::before { content: attr(data-empty); color: var(--muted); font-size: 14px; }
.divcall { display: flex; gap: 6px; align-items: center; justify-content: space-between; font-size: 14px; }
.divcall span { overflow-wrap: anywhere; }
/* the caller's position beside leg A (OFR-18 k): marked for 5 s after it moved */
.legloc { font-size: 14px; overflow-wrap: anywhere; }
.legloc.moved .where { font-weight: 600; color: var(--accent); }
.legloc a.map { color: var(--accent); font-weight: 600; }

/* a SIP leg's keypad (MTX-11 i): twelve keys in the phone's rows under the leg's text input */
.keypad { display: grid; grid-template-columns: repeat(3, 2.4rem); gap: .25rem; margin-top: .4rem; padding: .2rem; border-radius: 6px; width: max-content; }
.keypad:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.keypad button { min-width: 0; padding: .25rem 0; font-variant-numeric: tabular-nums; }
.keypad-toggle { margin-top: .4rem; padding: .2rem .45rem; }
.key-hint { margin-left: 6px; font: inherit; font-size: .85em; opacity: .75; }
.keypad-toggle[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* full screen (MTX-13): the whole page in the browser's full screen, the stage covering it and the video filling the
   stage; kept on top: the notices that must not be missed (the controller's, the weak connection, the media's, the
   dial's, the transfer's), the bar, and the leg columns over the video when the text windows are shown (T) */
.fs-enter { position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; font-size: 20px; background: rgba(0,0,0,.45); color: #fff; border-color: rgba(255,255,255,.5); z-index: 1; }
.fsbar { display: none; }
html.fs .stage-video { position: fixed; inset: 0; z-index: 50; border-radius: 0; background: #000; outline: none; }
html.fs .stage-video video.remote { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: contain; border-radius: 0; }
html.fs .fs-enter { display: none; }
html.fs .fsbar { display: flex; gap: 10px; justify-content: flex-end; align-items: center; position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 14px; background: rgba(0,0,0,.5); transition: opacity .3s; z-index: 2; }
html.fs .fsbar button { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.4); }
html.fs .fsbar button[aria-pressed="true"] { background: rgba(255,255,255,.4); }
html.fs .fsbar .newtext { color: #fbbf24; font-size: 14px; }
html.fs.fs-idle .fsbar { opacity: 0; pointer-events: none; }
html.fs.fs-nopointer .stage-video { cursor: none; }
/* in full screen the dial and transfer lines give way to the call's toasts and log */
html.fs #dialStatus, html.fs #xferStatus { display: none; }
/* the call's events: a toast sized to its text in the stage's top left corner, fading; the log behind its icon top right */
.toast { position: absolute; top: 10px; left: 10px; z-index: 56; max-width: 60%; padding: 4px 10px; border-radius: 8px; font-size: 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--fg); transition: opacity .6s; }
.toast.bad { color: var(--bad, #b42318); }
.toast.fading { opacity: 0; }
.calllog { position: absolute; top: 10px; right: 10px; z-index: 56; font-size: 13px; background: color-mix(in srgb, var(--surface) 88%, transparent); border-radius: 8px; padding: 2px 8px; max-width: 45%; }
.calllog > summary { display: flex; align-items: center; gap: 6px; }
.calllog > summary::after { content: none; }
.calllog ol { margin: 4px 0; padding-left: 0; list-style: none; max-height: 40vh; overflow: auto; }
.calllog li.bad { color: var(--bad, #b42318); }
html.fs #ctlNotice:not(:empty), html.fs #netNotice:not(:empty), html.fs #mediaNotice:not(:empty) { position: fixed; left: 12px; right: 12px; z-index: 60; background: color-mix(in srgb, var(--surface) 85%, transparent); padding: 4px 10px; }
html.fs #ctlNotice { top: 8px; } html.fs #netNotice { top: 40px; } html.fs #mediaNotice { top: 72px; }
html.fs #dialStatus { top: 104px; } html.fs #xferStatus { top: 136px; }
html.fs.fs-textshown #colA, html.fs.fs-textshown #colB { position: fixed; top: 12px; bottom: 70px; width: 28vw; overflow: auto; z-index: 55;
  background: color-mix(in srgb, var(--surface) 80%, transparent); }
html.fs.fs-textshown #colA { left: 12px; } html.fs.fs-textshown #colB { right: 12px; }
html.fs.fs-textshown #moreLegs:not(.hidden) { position: fixed; left: 30vw; right: 30vw; bottom: 70px; max-height: 40vh; overflow: auto; z-index: 55;
  background: color-mix(in srgb, var(--surface) 80%, transparent); }