/* Bisedo, "Ura" (the bridge). Loaded only by templates/biseda.html, after static/d.css (type, tokens, footer shared
   with the home). The phone lies flat between two people: the far half turns to face the person opposite, the brand
   mark sits large in the middle as the bridge, and each person has one labelled button on their side of it. On a
   landscape phone, a tablet or a desk the halves stand side by side with the bridge between them; the mark stays
   upright in every layout. A turn crosses the bridge as gold light and lands, large, on the listener's half.
   The strict CSP allows no inline style: biseda.js sets only CSSOM properties (the meter bars, the mark's geometry,
   the light's dash, a long turn's font size). */

.bisedo body { background: #fff; }
.bisedo main { flex: none; }
.bisedo .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bisedo svg.i { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── The stage: the whole screen, no site header (audit 1.1) ── */
.tav { --light: #C99A2E; --bw: clamp(132px, 17vw, 300px); --mh: clamp(68px, 11.5svh, 112px);
  position: relative; height: 100vh; height: 100svh; min-height: 320px;
  background: radial-gradient(70% 40% at 50% 50%, #F7FAFD 0%, rgba(247,250,253,0) 100%), linear-gradient(180deg, #E4EBF4 0%, #EEF4FA 50%, #EFEAE2 100%); }
.tav-app { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  isolation: isolate; }
.bridge { grid-row: 2; grid-column: 1; }
.side-me { grid-row: 3; grid-column: 1; view-transition-name: side-me; }
.side-them { grid-row: 1; grid-column: 1; transform: rotate(180deg); view-transition-name: side-them; }   /* faces the person opposite */

/* ── A half: this person's button by the bridge, then their reading surface ── */
.side { position: relative; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; color: var(--navy); }
.side-me { --tone: var(--poppy); --tone-shadow: rgba(179,18,46,.30); --glow: rgba(201,154,46,.24); }
.side-them { --tone: var(--navy); --tone-shadow: rgba(11,21,48,.28); --glow: rgba(96,140,214,.24); }

.mic-row { position: relative; flex: none; }
.mic-at { position: relative; }   /* the guide's anchor: the button itself (biseda.html) */
.mic { position: relative; width: 100%; min-height: 68px; display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 12px; border: 0; border-radius: 22px;
  background: var(--tone); color: #fff; font: 600 19px/1.2 var(--ui); text-align: left; cursor: pointer; box-shadow: 0 12px 26px var(--tone-shadow);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .25s var(--ease), box-shadow .3s ease; }
.mic:hover { transform: translateY(-1px); }
.mic:active { transform: scale(.985); }
.mic:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 22px; }
.mic-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); }
.mic-ic .i { grid-area: 1 / 1; width: 24px; height: 24px; display: none; stroke-width: 2; }
.mic[data-icon="mic"] .i-mic, .mic[data-icon="stop"] .i-stop, .mic[data-icon="lock"] .i-lock, .mic[data-icon="spin"] .i-spin, .mic[data-icon="speaker"] .i-speaker { display: block; }
.mic[data-icon="stop"] .i-stop { fill: currentColor; }
.mic-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mic-main { overflow-wrap: anywhere; }
.mic-sub { font: 500 16px/1.25 var(--ui); color: rgba(255,255,255,.94); }
.mic-sub:empty { display: none; }
.mic-kbd { display: none; flex: none; padding: 2px 9px; border: 1px solid rgba(255,255,255,.55); border-bottom-width: 2px; border-radius: 7px; font: 600 16px var(--ui); color: #fff; }
@media (hover: hover) and (pointer: fine) and (min-width: 960px) { .mic-kbd { display: inline-block; } .side.is-recording .mic-kbd { display: none; } }
/* the voice reaches the phone: a small level meter in the speaker's own button, driven by the microphone */
.wave { display: none; flex: none; align-items: center; gap: 4px; height: 30px; }
.wave i { width: 4px; height: 28px; border-radius: 2px; background: #fff; transform: scaleY(.18); transform-origin: 50% 50%; transition: transform .08s linear; }
.side.is-recording .wave { display: flex; }
/* recording: a bright double ring around the button; translating: the icon turns */
.side.is-recording .mic { box-shadow: 0 0 0 4px rgba(255,255,255,.95), 0 0 0 7px var(--tone), 0 16px 34px var(--tone-shadow); }
/* the ring grows outward inside the stage's 8 px margin, never past the screen's edge */
.side.is-recording .mic::after { content: ""; position: absolute; inset: -7px; border-radius: 29px; border: 2px solid var(--tone); opacity: 0; pointer-events: none; animation: ring 1.6s ease-out infinite; }
@keyframes ring { from { opacity: .6; inset: -1px; } to { opacity: 0; inset: -7px; } }
.side.is-translating .i-spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* locked while the other person speaks: the same colour (never pale, audit 3.4), a lock and a few words */
.mic[aria-disabled="true"] { cursor: default; box-shadow: none; }
.mic[data-icon="lock"] { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 10px, rgba(255,255,255,0) 10px 20px); }
.mic[aria-disabled="true"]:hover, .mic[aria-disabled="true"]:active { transform: none; }
/* Offline, a button can't start a turn; a recording under way can still be stopped (it was locked mid-turn). */
.is-offline .mic:not([aria-pressed="true"]) { pointer-events: none; box-shadow: none; }
.is-offline .mic:not([aria-pressed="true"]) .mic-ic .i { display: none; }
.is-offline .mic:not([aria-pressed="true"]) .mic-ic .i-lock { display: block; }

/* the reading surface */
.card { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 10px 16px 14px; border-radius: 26px; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 50px rgba(11,21,48,.09), 0 2px 6px rgba(11,21,48,.05); transition: box-shadow .6s ease, opacity .4s ease; }
.side-me .card { background: linear-gradient(180deg, #FFFDF9 0%, #FBF4EA 100%); }
.side-them .card { background: linear-gradient(180deg, #FBFDFF 0%, #E9F1FA 100%); }
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .7s ease; pointer-events: none;
  background: radial-gradient(95% 75% at 50% 0%, var(--glow), rgba(255,255,255,0) 72%); }   /* lit from the bridge's side */
.side.is-recording .card::before, .side.is-speaking .card::before { opacity: 1; }
.side.is-next .card::before { opacity: .6; }
.side.is-recording .card, .side.is-speaking .card { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 24px 60px rgba(11,21,48,.13), 0 0 0 1.5px rgba(201,154,46,.45); }
.side.is-speaking { --glow: rgba(201,154,46,.3); }

.card-top { display: flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; }
.turn-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 14px; border-radius: 999px; font: 600 16px/1.2 var(--ui); white-space: nowrap; min-width: 0; }
.turn-pill[hidden] { display: none; }
.turn-pill.is-you { background: var(--tone); color: #fff; box-shadow: 0 8px 20px var(--tone-shadow); }
.turn-pill.is-you::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.side.is-recording .turn-pill.is-you::before { animation: rec 1.2s ease-in-out infinite; }
@keyframes rec { 50% { opacity: .3; } }
.turn-pill.is-other { background: #fff; color: var(--navy-2); border: 1px solid var(--line); }
.lang-wrap { position: relative; margin-left: auto; flex: none; }
.lang-pill { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 16px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.8); color: var(--navy); font: 500 16px var(--ui); cursor: pointer; transition: border-color .2s ease; }
.lang-pill:hover { border-color: var(--navy); }
.lang-pill .i { width: 18px; height: 18px; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; min-width: 190px; padding: 6px; background: #fff; border-radius: 18px; box-shadow: 0 18px 50px rgba(11,21,48,.18), 0 0 0 1px var(--line); }
.lang-menu[hidden] { display: none; }
.lang-menu button { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border: 0; border-radius: 12px;
  background: transparent; color: var(--navy); font: 500 17px var(--ui); text-align: left; cursor: pointer; }
.lang-menu button:hover { background: var(--mist); }
.lang-menu button[aria-checked="true"] { background: var(--mist); font-weight: 600; }
.lang-menu .i { width: 18px; height: 18px; visibility: hidden; }
.lang-menu button[aria-checked="true"] .i { visibility: visible; }

/* what was said: centred while it fits (the two flexible ends), from the top and scrolling once it doesn't */
.said { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 2px; }
.said::before, .said::after { content: ""; flex: 1 1 0; }
.said.is-scroll { overflow-y: auto; overscroll-behavior: contain; border-radius: 8px; }   /* biseda.js: only a turn too long for its half */
.invite { margin: 0; max-width: 14em; font: 400 clamp(26px, 7.4vw, 38px)/1.1 var(--display); letter-spacing: -0.01em; color: var(--navy); }
.invite[hidden] { display: none; }
/* the first turn under way: a calm line where the invitation was */
.calm { margin: 0; font: 500 clamp(18px, 4.8vw, 22px)/1.35 var(--ui); color: var(--navy-2); }
.calm[hidden] { display: none; }
.heard { margin: 0; max-width: 19em; font: 400 clamp(30px, 8.6vw, 46px)/1.08 var(--display); letter-spacing: -0.015em; color: var(--navy); overflow-wrap: anywhere; text-wrap: pretty; }
.heard.is-empty { display: none; }
.ai-mark { margin: 6px 0 0; font: 500 13px/1.3 var(--ui); color: var(--navy-2); letter-spacing: .01em; }
.ai-mark[hidden] { display: none; }
.heard .w { display: inline-block; opacity: 0; filter: blur(7px); transform: translateY(-.3em); transition: opacity .55s ease, filter .6s ease, transform .75s var(--ease); }
.heard .w.in { opacity: 1; filter: none; transform: none; }
.side.is-speaking .heard::after { content: ""; display: inline-block; width: .55em; height: .55em; margin-left: .25em; vertical-align: -.02em;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3122E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M19 6a9 9 0 0 1 0 12'/%3E%3C/svg%3E");
  animation: speak .9s ease-in-out infinite alternate; }
@keyframes speak { from { opacity: .35; } to { opacity: 1; } }
.own { margin: 12px 0 0; max-width: 30em; font: 400 clamp(19px, 5.2vw, 24px)/1.2 var(--display); color: var(--navy-2); overflow-wrap: anywhere; }
.own:empty { display: none; }
.own .you { display: block; margin-bottom: 2px; font: 600 16px/1.3 var(--ui); color: var(--navy-2); }
.heard:not(.is-empty) + .own { margin-top: 14px; }
.side-err { margin: 8px 0 0; padding: 10px 14px; border-radius: 14px; background: #FCEDEF; color: #8A0E23; font: 500 16px/1.4 var(--ui); }
.side-err[hidden] { display: none; }
.side-note { margin: 8px 0 0; padding: 10px 14px; border-radius: 14px; background: #EAF1FA; color: var(--navy); font: 500 16px/1.4 var(--ui); }
.side-note[hidden] { display: none; }
.voice-ask { margin: 8px 0 0; }
.voice-ask[hidden] { display: none; }
.voice-ask-q { margin: 0 0 6px; font: 500 15px/1.4 var(--ui); color: var(--navy); }
.voice-ask-row { display: flex; gap: 8px; }
.voice-ask-btn { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(11,21,48,.3); background: #fff;
  color: var(--navy); font: 600 16px var(--ui); cursor: pointer; }
/* Not what I said, and a typed turn (launch audit H11) */
.redo, .type-form, .turn-cancel { margin: 8px 0 0; }
.redo[hidden], .type-form[hidden], .turn-cancel[hidden] { display: none; }
.redo-btn, .type-btn, .type-send { min-height: 44px; padding: 0 16px; border-radius: 999px; font: 600 16px var(--ui); cursor: pointer; }
.redo-btn { border: 1px solid currentColor; background: transparent; color: var(--navy); }
.type-btn { border: 0; background: transparent; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.type-hint { margin: 0 0 6px; font: 500 15px/1.4 var(--ui); color: var(--navy); }
.type-row { display: flex; gap: 8px; }
.type-input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid rgba(11,21,48,.25); border-radius: 14px; font: 400 17px var(--ui); color: var(--navy); background: #fff; }
.type-send { border: 0; background: var(--navy); color: #fff; }
.heard.withdrawn { opacity: .45; text-decoration: line-through; text-decoration-thickness: 2px; }
.side-err-link { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ── The first-use guide: each button, pointed at in its person's language ── */
.guide { position: absolute; left: 50%; top: calc(100% + 14px); z-index: 6; width: min(360px, calc(100% - 8px)); transform: translateX(-50%);
  display: grid; gap: 8px; padding: 14px 16px 10px; border-radius: 18px; background: var(--navy); color: #fff; box-shadow: 0 18px 44px rgba(11,21,48,.32);
  animation: guide-in .5s var(--ease) both; }
.guide[hidden] { display: none; }
.guide::before { content: ""; position: absolute; left: 50%; top: -7px; width: 16px; height: 16px; border-radius: 3px; background: var(--navy); transform: translateX(-50%) rotate(45deg); }
.guide p { margin: 0; font: 500 18px/1.35 var(--ui); }
.guide-ok { justify-self: end; min-height: 44px; padding: 0 18px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: transparent; color: #fff; font: 600 16px var(--ui); cursor: pointer; }
@keyframes guide-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.ura-guiding .card { opacity: .6; }   /* still legible (about 4.6:1) while the guide has the stage; was .35 (2.3:1, design H7) */
.ura-guiding .mark-box { opacity: .35; }

/* ── The bridge: the way back, the mark, the one sheet ── */
.bridge { position: relative; z-index: 3; min-width: 0; min-height: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2px 8px; padding: 6px 2px; }
.knob { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  color: var(--navy); box-shadow: 0 6px 16px rgba(11,21,48,.08); text-decoration: none; cursor: pointer; padding: 0; font: 600 16px var(--ui); }
.knob:hover { border-color: var(--navy); }
.knob-back { justify-self: start; grid-column: 1; grid-row: 1; }
.knob-t { display: none; }
.bridge-end { justify-self: end; grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.knob[hidden], .badge[hidden] { display: none; }
.badge { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 14px; border-radius: 999px; border: 1px solid #E6D3A4; background: #FBF4E2;
  color: #5C4310; font: 600 16px var(--ui); cursor: pointer; white-space: nowrap; }
.badge .i { width: 18px; height: 18px; }
.left-count { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin: 0; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy-2); font: 500 16px/1.35 var(--ui); }
.left-count[hidden] { display: none; }
.mark-box { position: relative; grid-column: 2; grid-row: 1; display: grid; place-items: center; transition: opacity .4s ease; }
.river { position: absolute; top: 50%; left: 50%; width: calc(100vw - 32px); height: 1px; z-index: -1; overflow: hidden; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(201,211,224,0), #C9D3E0 14%, #B8C4D4 50%, #C9D3E0 86%, rgba(201,211,224,0)); }
.river::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; opacity: 0; background: linear-gradient(90deg, rgba(201,154,46,0), var(--light), rgba(201,154,46,0)); }
.bridge[data-phase="wait"] .river::after { opacity: 1; animation: sweep 1.8s ease-in-out infinite alternate; }
.bridge.carry .river { background: linear-gradient(90deg, rgba(201,154,46,0), var(--light) 20%, #E8C873 50%, var(--light) 80%, rgba(201,154,46,0)); }
@keyframes sweep { from { transform: translateX(-10%); } to { transform: translateX(204%); } }
.mark { display: block; height: var(--mh); width: auto; aspect-ratio: 106 / 88; overflow: visible; }
.mark .ridge { fill: var(--navy); transition: filter .5s ease, opacity .5s ease; }
.mark .bars line { stroke: var(--poppy); stroke-width: 3.4; stroke-linecap: round; transition: opacity .5s ease; }
.bridge[data-live="them"] .ridge { filter: drop-shadow(0 0 6px rgba(96,140,214,.6)); }
.bridge[data-live="me"] .bars { filter: drop-shadow(0 0 5px rgba(179,18,46,.45)); }
.bridge[data-live="them"] .bars, .bridge[data-live="me"] .ridge { opacity: .35; }
.bridge[data-phase="wait"][data-speaker="me"] .bars line { animation: shimmer 1.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 70ms); }
.bridge[data-phase="wait"][data-speaker="them"] .ridge { animation: breathe 1.6s ease-in-out infinite; }
@keyframes shimmer { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
.seam-offline { position: absolute; left: 50%; top: 50%; z-index: 8; width: min(560px, calc(100vw - 32px)); margin: 0 !important; transform: translate(-50%, -50%);
  font-size: 16px !important; text-align: center; box-shadow: 0 12px 30px rgba(11,21,48,.14); }
.seam-offline .bil-en { display: block; }

/* the light: a turn crossing the bridge */
.ribbon { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 7; pointer-events: none; overflow: visible; }
.ribbon path { fill: none; stroke-linecap: round; }
.ribbon .glow { stroke: rgba(201,154,46,.32); stroke-width: 16; filter: blur(5px); }
.ribbon .core { stroke: url(#rib); stroke-width: 3.5; }
.ribbon circle { fill: #FFF8E6; filter: drop-shadow(0 0 8px rgba(201,154,46,.95)) drop-shadow(0 0 18px rgba(201,154,46,.6)); }

/* ── Side by side: a landscape phone, a tablet, a desk; or the owner's choice in the sheet ── */
@media (min-width: 960px), (orientation: landscape) and (min-width: 600px) {   /* biseda.js mirrors this query */
  html:not(.tav-table) .tav-app { grid-template-columns: minmax(0, 1fr) var(--bw) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  html:not(.tav-table) .side-me { grid-row: 1; grid-column: 1; }
  html:not(.tav-table) .side-them { grid-row: 1; grid-column: 3; transform: none; }
  html:not(.tav-table) .bridge { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 4px 0; }
  html:not(.tav-table) .mark-box { margin: auto 0; }
  html:not(.tav-table) .mark { height: auto; width: min(calc(var(--bw) - 24px), 220px); }
  html:not(.tav-table) .river { width: calc(var(--bw) + 40px); }
  html:not(.tav-table) .left-count { order: 2; text-align: center; }
  html:not(.tav-table) .bridge-end { order: 3; justify-content: center; flex-wrap: wrap; }
  html:not(.tav-table) .mic-row { order: 2; }   /* each button at the foot of its own half, left and right of the mark */
  html:not(.tav-table) .side-me .card::before { background: radial-gradient(85% 95% at 100% 55%, var(--glow), rgba(255,255,255,0) 72%); }
  html:not(.tav-table) .side-them .card::before { background: radial-gradient(85% 95% at 0% 55%, var(--glow), rgba(255,255,255,0) 72%); }
  html:not(.tav-table) .heard .w { transform: translateX(var(--from, -.3em)); }
  html:not(.tav-table) .side-me .heard .w { --from: .3em; }
  html:not(.tav-table) .heard .w.in { transform: none; }
  html:not(.tav-table) .guide { top: auto; bottom: calc(100% + 14px); }
  html:not(.tav-table) .guide::before { top: auto; bottom: -7px; }
}
/* a short screen (a phone on its side) */
@media (max-height: 500px) {
  .card { padding: 6px 14px 10px; border-radius: 22px; }
  .mic { min-height: 64px; padding-block: 8px; }
  .heard { font-size: 30px; }
  .invite { font-size: 28px; }
  .own { font-size: 20px; margin-top: 8px; }
  .guide { padding: 10px 14px 8px; }
  .guide p { font-size: 17px; }
}
/* a desk: a composed stage, two cards facing each other with the bridge between them (audit 4.2) */
@media (min-width: 1100px) and (min-height: 600px) {
  .tav { display: grid; place-items: center; --mh: 128px; }
  .tav-app { width: min(1320px, 100% - 64px); height: min(780px, 100% - 80px); padding: 0; }
  html.tav-table .tav-app { width: min(760px, 100% - 64px); }
  .card { padding: 22px 36px 26px; border-radius: 34px; }
  .mic { min-height: 76px; border-radius: 26px; padding: 12px 22px 12px 14px; font-size: 21px; }
  .mic-ic { width: 52px; height: 52px; }
  .heard { font-size: clamp(40px, 3.4vw, 56px); }
  .invite { font-size: clamp(36px, 3vw, 46px); }
  .own { font-size: 28px; }
  .knob-back { width: auto; padding: 0 18px 0 12px; }
  .knob-back .knob-t { display: inline; }
}

.bis-privacy { font-size: 16px; line-height: 1.55; }
.bis-kbd kbd { font: 500 16px var(--ui); padding: 1px 7px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--mist); color: var(--navy); }
@media (hover: none) { .bis-kbd { display: none; } }
.tav-off { padding: 72px 16px; }
.tav-off-card { margin: 0; max-width: 640px; padding: 20px 22px; border-radius: 18px; background: #FFF7ED; border: 1px solid #FED7AA; color: #7C2D12; }
.tav-off-card .bil-en { display: block; margin-top: 6px; }

.bis-btn { min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font: 600 17px var(--ui); cursor: pointer; }
.bis-btn-red { background: var(--poppy); box-shadow: 0 10px 24px rgba(179,18,46,.22); }
.bis-btn-ghost { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
.bis-txt { min-height: 52px; padding: 0 16px; border: 0; background: transparent; color: var(--navy); font: 600 17px var(--ui); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: #B8C4D4; cursor: pointer; }

/* ── Sheets: onboarding, and the one sheet (the conversation and the settings) ── */
.sheet { width: min(560px, calc(100% - 32px)); max-width: none; max-height: min(86vh, 780px); max-height: min(86svh, 780px); padding: 22px 22px 18px; border: 0; border-radius: 24px;
  background: #fff; color: var(--navy); box-shadow: 0 30px 80px rgba(11,21,48,.3); overflow: auto; overscroll-behavior: contain; }
.sheet[open] { animation: sheet-up .45s var(--ease) both; }
.sheet::backdrop { background: rgba(11,21,48,.34); }
@keyframes sheet-up { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 599px) { .sheet { margin: auto auto max(12px, env(safe-area-inset-bottom)); } }
.sheet-head { position: sticky; top: -22px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -22px -22px 6px; padding: 22px 22px 8px; background: #fff; }
.sheet-h { margin: 0 0 10px; font: 400 34px/1.05 var(--display); letter-spacing: -0.02em; }
.sheet-h:focus { outline: none; }
.sheet-head .sheet-h { margin: 0; }
.sheet-x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--mist); color: var(--navy); cursor: pointer; }
.sheet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.onboard .sheet-actions .bis-btn { flex: 1 1 200px; }
/* The first-visit sheet's two answers stay on screen while its text scrolls: on a 360 x 640 phone "E kuptova" sat
   below the sheet's visible area and only the example button showed (launch audit UX M4). The row sticks to the
   sheet's bottom edge, on white, with a soft edge so the text visibly runs on under it. */
.onboard .sheet-actions { position: sticky; bottom: -18px; z-index: 2; margin: 14px -22px -18px; padding: 12px 22px 18px; background: #fff;
  box-shadow: 0 -14px 16px -10px rgba(255,255,255,.95); }
.chip { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  color: var(--navy); font: 500 16px var(--ui); cursor: pointer; white-space: nowrap; transition: border-color .2s ease; }
.chip:hover { border-color: var(--navy); }
.chip[hidden] { display: none; }
.chip .i { width: 18px; height: 18px; }
.log-actions { margin-top: 10px; }
.sheet-h2 { margin: 26px 0 4px; padding-top: 18px; border-top: 1px solid var(--line); font: 400 30px/1.05 var(--display); letter-spacing: -0.02em; }
.set-block { margin-top: 16px; }
.set-h { margin: 0 0 8px; font: 600 16px/1.3 var(--ui); color: var(--navy); }
.vrow { display: grid; gap: 6px; margin-top: 10px; }
.vrow-l { font: 500 16px var(--ui); color: var(--navy-2); }
.vrow-now { font: 400 16px/1.4 var(--ui); color: var(--navy-2); }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: var(--mist); }
.seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg[hidden], .set-hint[hidden] { display: none; }
.seg button, .seg a { min-height: 44px; padding: 0 8px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--navy); font: 500 16px var(--ui); cursor: pointer; }
.seg a { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.seg button::first-letter { text-transform: uppercase; }
.seg button[aria-pressed="true"], .seg a[aria-current="true"] { background: var(--navy); color: #fff; }
.set-hint { margin: 6px 0 0; font: 400 16px/1.45 var(--ui); color: var(--navy-2); }
.set-today { margin: 18px 0 0; font: 400 16px/1.45 var(--ui); color: var(--navy-2); }
.set-today b { color: var(--navy); font-weight: 600; font-variant-numeric: tabular-nums; }
.set-kbd { margin: 8px 0 0; font-size: 16px; color: var(--navy-2); }

.ob-welcome { margin: 0 0 16px; padding: 14px 16px; border-radius: 16px; background: #FFF6DC; color: #4A3405; }
.ob-welcome p { margin: 0; }
.ob-welcome .bil-en { display: block; }
.ob-welcome-h { font-weight: 600; margin-bottom: 4px !important; }
.ob-say { margin: 0 0 10px; color: var(--navy-2); }
.ob-script { margin: 0 0 12px; padding: 14px 16px; border-radius: 16px; background: var(--mist); }
.ob-script p { margin: 0; font: italic 400 24px/1.25 var(--display); color: var(--navy); }
.ob-script .ob-script-other { margin-top: 10px; font-size: 20px; color: var(--navy-2); }
.ob-note { margin: 0; font-size: 16px; color: var(--navy-2); }

.log-empty { margin: 4px 0 8px; color: var(--navy-2); }
.log-empty[hidden] { display: none; }
.log { list-style: none; margin: 0; padding: 0; }
.turn { padding: 12px 0; border-top: 1px solid var(--line); }
.turn-head { display: flex; align-items: center; gap: 10px; }
.turn-side { font-weight: 600; }
.turn-meta { flex: 1; min-width: 0; color: var(--navy-2); font-size: 16px; }
.turn-replay { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--navy); cursor: pointer; }
.turn-replay svg { width: 18px; height: 18px; }
.turn-src { margin: 2px 0 0; font: 400 16px/1.45 var(--ui); color: var(--navy-2); overflow-wrap: anywhere; }
.turn-tr { margin: 4px 0 0; font: 400 23px/1.2 var(--display); overflow-wrap: anywhere; }
.turn-fix { margin-top: 4px; }
.fix-toggle { min-height: 44px; padding: 0; border: 0; background: none; color: var(--navy-2); font: 500 16px var(--ui); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.fix-toggle:disabled { text-decoration: none; color: #1F6B3A; cursor: default; }
.fix-form { display: grid; gap: 10px; margin-top: 6px; padding: 12px; border-radius: 14px; background: var(--mist); }
.fix-form[hidden] { display: none; }
.fix-form label { display: grid; gap: 4px; font: 500 16px var(--ui); color: var(--navy); }
.fix-form textarea { width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--navy); font: 400 16px/1.4 var(--ui); resize: vertical; }
.fix-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fix-row .bis-btn { min-height: 44px; padding: 0 18px; font-size: 16px; }
.fix-status { color: var(--navy-2); }
.log-toast { margin: 8px 0 0; padding: 10px 14px; border-radius: 12px; background: #E9F6EE; color: #14532D; overflow-wrap: anywhere; }
.log-toast[hidden] { display: none; }

.tools .aud { margin: 0; }
.tools .aud-q { font-size: 24px; margin-bottom: 4px; }
.tools .aud-more { background: var(--mist); }
.tools .aud-form input, .tools .aud-form select, .tools .aud-form textarea { font-size: 16px; min-height: 44px; }

/* reduced motion: no light, no rings, no turning; the words and the sheets fade in place */
@media (prefers-reduced-motion: reduce) {
  .side.is-recording .mic::after, .side.is-translating .i-spin, .side.is-speaking .heard::after, .turn-pill.is-you::before,
  .bridge[data-phase="wait"] .river::after, .bridge[data-phase] .bars line, .bridge[data-phase] .ridge { animation: none !important; }
  .heard .w, html:not(.tav-table) .heard .w { transition: none; opacity: 1; filter: none; transform: none; }
  .heard.arrive { animation: fade .5s ease both; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  .sheet[open] { animation: fade .25s ease both; }
  .guide { animation: fade .3s ease both; }
  .mic, .mic:hover, .mic:active { transition: none; transform: none; }
}
.log-note { margin: 10px 0 0; }
.log-note a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; color: var(--navy); text-decoration: underline; text-underline-offset: .2em; }


/* One screen: the table is the page (nothing below it to scroll; the about text is in the sheet). */
html.bisedo:has(.tav), html.bisedo:has(.tav) body { height: 100%; overflow: hidden; }
.set-about { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 12px; justify-items: start; color: var(--navy-2); }
.set-about p { margin: 0; line-height: 1.6; }
.set-about strong { color: var(--navy); font-weight: 600; }
.set-about a { color: var(--navy); text-decoration: underline; text-underline-offset: .2em; }
.set-about .bis-lede { font: italic 400 22px/1.3 var(--display); color: var(--navy); }
.set-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.set-links a { display: inline-flex; align-items: center; min-height: 44px; }