/* Babel Mesh. Same page skeleton as the other brand (site.css), a different identity:
   an infrastructure look for developers. Off-black ground, one signal accent (mint), Geist and Geist Mono,
   one corner scale (10px controls, 16px panels), motion only where it shows the network at work.
   Light and dark both follow the system. */

:root {
  --bg: #f3f6f7;
  --surface: #ffffff;
  --surface-2: #eaf0f1;
  --ink: #0c171b;
  --muted: #4b5a61;
  --line: #d6e0e3;
  --honey: #19c9a3;        /* the accent (named honey in site.css) */
  --on-honey: #04130f;
  --accent-text: #0a7a64;
  --shadow: 0 1px 2px rgb(8 20 24 / .06), 0 10px 30px rgb(8 20 24 / .08);
  --glow: radial-gradient(60% 80% at 0% 0%, rgb(25 201 163 / .14), transparent 70%);
  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0c0f;
    --surface: #10141a;
    --surface-2: #161c23;
    --ink: #e9eff2;
    --muted: #93a2ad;
    --line: #232b33;
    --accent-text: #3ee0b8;
    --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 12px 36px rgb(0 0 0 / .5);
    --glow: radial-gradient(60% 80% at 0% 0%, rgb(25 201 163 / .16), transparent 70%);
  }
}
::selection { background: color-mix(in srgb, var(--honey) 38%, transparent); }

/* wordmark: Babel in weight, Mesh in light */
.wm { font-weight: 650; letter-spacing: -.012em; }
.wm i { font-style: normal; font-weight: 400; color: var(--muted); margin-left: .26em; }
.site-header .brand img, .site-footer .brand img { filter: drop-shadow(0 0 10px rgb(25 201 163 / .25)); }

/* buttons: the accent carries dark text in both themes (about 9:1) */
.btn-primary, .nav .btn { background: var(--honey); color: var(--on-honey); }
.btn-primary:hover, .nav .btn:hover { filter: brightness(1.08); }
.btn-ghost { border-color: color-mix(in srgb, var(--ink) 22%, transparent); }

/* ---- hero: the message on the left, the real call on the right, the mesh behind ---- */
.hero { border-bottom: 1px solid var(--line); background: var(--bg); }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--glow); pointer-events: none; }
.hero canvas.meshnet { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .35) 40%, #000 72%); mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .35) 40%, #000 72%); }
.hero h1 { letter-spacing: -.035em; line-height: 1.04; }
.hero .lead { max-width: 30em; }
.hero .wrap { grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr); }
.hero .code { margin: 0; box-shadow: var(--shadow); border-radius: var(--r-m); background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.hero .code pre { font-size: .86rem; line-height: 1.7; }
.hero .code .k { color: var(--accent-text); }
.hero .code .c { color: var(--muted); }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .hero canvas.meshnet { opacity: .5; } }
@media (prefers-reduced-transparency: reduce) { .hero .code { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---- the live strip ---- */
.live { background: var(--surface); }
.stat .num { color: var(--accent-text); }

/* ---- the four things it runs: cells that differ in ground, not only in text ---- */
.cell { background: var(--surface); transition: border-color .2s, transform .2s; }
.cell:hover { border-color: color-mix(in srgb, var(--honey) 55%, var(--line)); transform: translateY(-2px); }
.cell .code { margin: 0 24px 24px; }
.cell .code pre { font-size: .8rem; }
.cell.tint { background: var(--glow), var(--surface); }
.cell.grid-bg { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; background-color: var(--surface); }
.cell.grid-bg .copy { background: linear-gradient(var(--surface) 55%, transparent); }
.cell .vector { margin: 6px 24px 24px; font: .8rem/1.7 var(--mono); color: var(--muted); }
.cell .vector b { color: var(--accent-text); font-weight: 500; }

/* ---- how a request travels: four verbs on one line ---- */
.route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: var(--surface); }
.route li { position: relative; padding: 28px 26px 30px; }
.route li + li { border-left: 1px solid var(--line); }
.route li::after { content: ""; position: absolute; right: -5px; top: 38px; width: 9px; height: 9px; border-top: 1.5px solid var(--honey); border-right: 1.5px solid var(--honey); transform: rotate(45deg); background: var(--surface); z-index: 1; }
.route li:last-child::after { display: none; }
.route h3 { margin-bottom: 8px; }
.route p { color: var(--muted); font-size: .96rem; }
@media (max-width: 860px) {
  .route { grid-template-columns: 1fr; }
  .route li + li { border-left: 0; border-top: 1px solid var(--line); }
  .route li::after { display: none; }
}

/* ---- lend what you have ---- */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ladder li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.ladder .icon { width: 28px; height: 28px; color: var(--accent-text); margin-top: 2px; }
.ladder h3 { margin-bottom: 4px; }
.ladder p { color: var(--muted); max-width: 34em; }
.ladder .next { border-style: dashed; background: transparent; }
.ladder .next .icon { color: var(--muted); }

/* ---- closing ---- */
.closing { background: var(--glow), var(--bg); }

@media (prefers-reduced-motion: reduce) { .cell { transition: none; } .cell:hover { transform: none; } }

/* ---- the language list in the footer ---- */
.langs { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); }
.langs nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; }
.langs a { color: var(--muted); text-decoration: none; }
.langs a:hover { color: var(--text); }
.langs a[aria-current] { color: var(--accent-text); font-weight: 600; }

/* ---- long words in other languages (German compounds, Russian, Turkish) ---- */
body { overflow-wrap: break-word; hyphens: auto; }
h1, h2 { hyphens: manual; overflow-wrap: anywhere; }
pre, code { hyphens: none; overflow-wrap: normal; }

/* a code panel never makes its column wider than the screen */
.hero .wrap > *, .split > *, .cell, .cell > * { min-width: 0; }
.code { max-width: 100%; }
.code pre { overflow-x: auto; }

/* ---- right-to-left languages (Arabic): mirror what site.css wrote with physical sides ---- */
[dir="rtl"] .skip { left: auto; right: 12px; }
[dir="rtl"] .nav, [dir="rtl"] .menu { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav .btn { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .menu nav { right: auto; left: 20px; }
[dir="rtl"] .live .stat + .stat { border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .ways li { padding: 4px 64px 34px 0; }
[dir="rtl"] .ways li::before { left: auto; right: 0; }
[dir="rtl"] .ways li::after { left: auto; right: 21px; }
[dir="rtl"] .notice, [dir="rtl"] .invite-box { border-left: 1px solid var(--line); border-right: 3px solid var(--honey); }
[dir="rtl"] .guide ol, [dir="rtl"] .prose ul, [dir="rtl"] .prose ol { padding-left: 0; padding-right: 1.3rem; }
[dir="rtl"] .faq summary::after { right: auto; left: 6px; }
[dir="rtl"] .closing { text-align: right; }
[dir="rtl"] .toc { border-left: 0; border-right: 1px solid var(--line); padding-left: 0; padding-right: 18px; }
[dir="rtl"] .facts-table th, [dir="rtl"] .facts-table td { text-align: right; padding: 12px 0 12px 14px; }
[dir="rtl"] .route li + li { border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .route li::after { right: auto; left: -5px; transform: rotate(-135deg); }
@media (max-width: 860px) { [dir="rtl"] .route li + li { border-right: 0; } }
/* code, the status bars and key strings read left to right in any language */
[dir="rtl"] .code, [dir="rtl"] pre, [dir="rtl"] .st-bar { direction: ltr; text-align: left; }
[dir="rtl"] .ways li:last-child { padding-bottom: 0; }

/* ---- the language list in the header, at the right end like everywhere else ---- */
.lang { position: relative; flex: none; }
.lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-s); font-size: .92rem; color: var(--muted); white-space: nowrap; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { color: var(--ink); background: var(--surface-2); }
.lang summary .icon { width: 18px; height: 18px; }
.lang-list { position: absolute; inset-inline-end: 0; top: calc(100% + 10px); z-index: 60; min-width: 190px; max-height: min(70vh, 520px); overflow-y: auto; display: grid; gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow); }
.lang-list a { padding: 9px 12px; border-radius: var(--r-s); text-decoration: none; color: var(--ink); font-size: .95rem; white-space: nowrap; }
.lang-list a:hover { background: var(--surface-2); }
.lang-list a[aria-current] { color: var(--accent-text); font-weight: 600; }
@media (max-width: 860px) { .site-header .wrap { gap: 12px; } .lang summary span { display: none; } .lang summary { padding: 8px 10px; } }

/* Live speech-to-text demo (/asr/) */
.asr-wrap { display: grid; gap: 16px; max-width: 760px; }
.asr-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.asr-upload { cursor: pointer; }
.asr-status { margin: 0; color: var(--muted); min-height: 1.5em; }
.asr-out { min-height: 120px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.asr-text { margin: 0; font-size: 1.15rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.asr-meta { margin: 0; font-size: .9rem; color: var(--muted); }
.asr-note { margin: 8px 0 0; font-size: .95rem; color: var(--muted); }
.voice-key { padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.voice-key p { margin: 0; color: var(--muted); }
.voice-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.voice-turn { padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.voice-turn.assistant { border-color: var(--honey); }
.voice-turn .who { display: block; font-family: var(--mono); font-size: .8rem; color: var(--muted); margin-bottom: 4px; }
.voice-turn p { margin: 0; font-size: 1.05rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Live interpreter (/interpret/) */
.int-wrap { display: grid; gap: 18px; max-width: 1100px; }
.int-panel { display: grid; gap: 14px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.int-row { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; }
.int-field { display: grid; gap: 6px; }
.int-field-inline { margin-left: auto; }
.int-label { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.int-select { min-height: 40px; padding: 0 12px; font: inherit; color: inherit; background: var(--bg, #fff); border: 1px solid var(--line); border-radius: var(--r-s, 8px); }
.int-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-s, 8px); overflow: hidden; }
.int-seg-btn { min-height: 40px; padding: 0 14px; font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }
.int-seg-btn + .int-seg-btn { border-left: 1px solid var(--line); }
.int-seg-btn[aria-pressed="true"] { background: var(--honey); color: #1a1a1a; }
.int-check { display: inline-flex; gap: 8px; align-items: center; min-height: 40px; cursor: pointer; }
.int-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.int-h { margin: 0 0 10px; font-size: 1.05rem; }
.int-live { margin: 0 0 10px; min-height: 1.6em; color: var(--muted); font-style: italic; overflow-wrap: anywhere; }
.int-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 70vh; overflow: auto; }
.int-row-item { padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.int-row-item.pending { opacity: .6; }
.int-src { margin: 0; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.int-tr { margin: 4px 0 0; font-size: 1.1rem; line-height: 1.55; overflow-wrap: anywhere; }
.int-tr.err { color: var(--muted); font-size: .95rem; }
.int-notes { padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); line-height: 1.6; overflow-wrap: anywhere; }
.int-notes h3 { margin: 12px 0 4px; font-size: 1rem; }
.int-notes h3:first-child { margin-top: 0; }
.int-notes p, .int-notes ul { margin: 0 0 8px; }
.int-notes ul { padding-left: 20px; }
.int-empty { color: var(--muted); margin: 0; }
.int-history { margin-top: 12px; color: var(--muted); }
.int-hist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.int-hist li { display: flex; gap: 10px; justify-content: space-between; }
.int-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; text-decoration: underline; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.int-del { flex: none; }
@media (max-width: 800px) { .int-cols { grid-template-columns: 1fr; } .int-field-inline { margin-left: 0; } }

/* Feedback form (/feedback/) */
.fb-wrap { max-width: 760px; }
.fb-text { padding: 10px 12px; min-height: 140px; resize: vertical; line-height: 1.5; }
.fb-wrap input.int-select { width: 100%; box-sizing: border-box; }
.fb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The header's links are collapsed into the menu when they would not fit: the widest wording needs
   about 1460px (Spanish, Russian), the narrowest about 890px, so the width at which the menu takes
   over depends on the language (measured on the rendered pages, with a margin). */
@media (max-width: 1100px) { .nav { display: none; } .menu { display: block; } }
@media (max-width: 1180px) { html:is([lang^="de"], [lang^="id"], [lang^="it"], [lang^="ja"]) .nav { display: none; } html:is([lang^="de"], [lang^="id"], [lang^="it"], [lang^="ja"]) .menu { display: block; } }
@media (max-width: 1340px) { html[lang^="fr"] .nav { display: none; } html[lang^="fr"] .menu { display: block; } }
@media (max-width: 1380px) { html[lang^="pt"] .nav { display: none; } html[lang^="pt"] .menu { display: block; } }
@media (max-width: 1500px) { html:is([lang^="es"], [lang^="ru"]) .nav { display: none; } html:is([lang^="es"], [lang^="ru"]) .menu { display: block; } }

/* live interpreter: a caption mended by the corrector */
.int-row-item.fixing .int-src { opacity: .7; }
.int-src.fixed { color: var(--text, inherit); }
.int-src.fixed::after { content: " ✓"; color: var(--accent, currentColor); font-size: .8em; }

.int-acts { margin-inline-start: 8px; white-space: nowrap; }
.int-acts .int-link { padding: 0 4px; }

/* what is running now (js/activity.js): a pill in the header with a list under it */
.act { position: relative; flex: none; }
.act summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--accent-text); border-radius: 999px; font-size: .9rem; color: var(--accent-text); white-space: nowrap; }
.act summary::-webkit-details-marker { display: none; }
.act summary:hover, .act[open] summary { background: var(--surface-2); }
.act-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-text); animation: act-pulse 1.6s ease-in-out infinite; }
@keyframes act-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .act-dot { animation: none; } }
.act-list { position: absolute; inset-inline-start: 0; top: calc(100% + 10px); z-index: 60; width: min(340px, calc(100vw - 32px)); margin: 0; padding: 8px; list-style: none; display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow); }
.act-list li { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-s); }
.act-list li + li { border-top: 1px solid var(--line); }
.act-meta { color: var(--muted); font-size: .88rem; }
.act-list a, .act-find { justify-self: start; font-size: .9rem; color: var(--accent-text); }
.act-find { background: none; border: 1px solid var(--line); border-radius: var(--r-s); padding: 5px 10px; cursor: pointer; }
@media (max-width: 860px) { .act summary { padding: 6px 10px; } }