/* SKJ Translator
   Visual direction: enamel railway signage. Bottle-green ground, cream plates,
   brass hairlines, monospace for anything the machine says about itself. */

:root {
  --ink:        #08201b;
  --ink-2:      #0d2a22;
  --panel:      #133428;
  --panel-2:    #18402f;
  --line:       #2a5341;
  --cream:      #f4efe2;
  --cream-2:    #d9d3c3;
  --dim:        #94aa9c;
  --brass:      #d9a13b;
  --brass-dim:  #8a6a2c;
  --rail:       #c8483a;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --r: 4px;
  --pad: 16px;
  --tabs-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body {
  display: flex;
  flex-direction: column;
  /* Faint horizontal ruling, like a painted sign wiped clean. */
  background-image: repeating-linear-gradient(
    180deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 6px
  );
}

button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* Several components set display, which would otherwise beat the UA rule. */
[hidden] { display: none !important; }

/* ── Top bar ─────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--pad) 10px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
}

.brand { display: flex; align-items: baseline; gap: 8px; }

.brand-mark {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink);
  background: var(--brass);
  padding: 3px 6px 2px;
  border-radius: 2px;
}

.brand-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.net {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

.net-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brass);
}

.net[data-state="offline"] .net-dot { background: var(--dim); }
.net[data-state="busy"]    .net-dot { background: var(--rail); animation: pulse 1.1s ease-in-out infinite; }

@keyframes pulse { 50% { opacity: 0.25; } }

/* ── Language pair ───────────────────────────────────────── */

.pairbar {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}

.pair-side {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 14px 11px;
  background: none;
  border: 0;
  text-align: left;
}

.pair-side:last-of-type { text-align: right; align-items: flex-end; }

.pair-role {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dim);
}

.pair-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pair-code {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
}

.swap {
  display: grid;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--brass);
}

.swap svg { width: 20px; height: 20px; }
.swap:active { background: var(--panel); }
.swap.is-turning svg { animation: turn 0.35s ease; }

@keyframes turn { to { transform: rotate(180deg); } }

/* ── Views ───────────────────────────────────────────────── */

#main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--tabs-h) + var(--safe-b) + 18px);
}

.view { display: none; padding: var(--pad); }
.view.is-active { display: block; }

.lede {
  margin: 2px 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cream-2);
}

/* ── Editor ──────────────────────────────────────────────── */

.editor {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-2);
}

#input {
  display: block;
  width: 100%;
  min-height: 96px;
  max-height: 40vh;
  padding: 14px;
  border: 0;
  border-radius: var(--r) var(--r) 0 0;
  background: none;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.45;
  resize: none;
}

#input::placeholder { color: #5f7a6d; }
#input:focus { outline: none; }
.editor:focus-within { border-color: var(--brass-dim); }

.editor-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px 7px 14px;
  border-top: 1px solid var(--line);
}

.counter { font-family: var(--mono); font-size: 10px; color: var(--dim); }
.editor-actions { display: flex; gap: 4px; }

.ghost {
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.ghost:hover { color: var(--cream); border-color: var(--line); }
.ghost.tiny { padding: 3px 7px; font-size: 10px; }

.go {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  padding: 15px;
  border: 0;
  border-radius: var(--r);
  background: var(--brass);
  color: #241703;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.go:disabled { background: var(--panel-2); color: var(--dim); }
.go:not(:disabled):active { transform: translateY(1px); }
.go.compact { width: auto; margin: 0; padding: 10px 16px; font-size: 13px; }

/* ── Result plate ─ the signature element ────────────────── */

.plate {
  position: relative;
  margin-top: 18px;
  padding: 14px 15px 16px;
  border-radius: var(--r);
  background: var(--cream);
  color: #17231d;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 8px 22px -14px rgba(0, 0, 0, 0.8);
}

/* Brass hairline, the way an enamel plate is screwed to a wall. */
.plate::before {
  content: "";
  position: absolute;
  left: 15px; right: 15px; top: 40px;
  height: 1px;
  background: var(--brass);
  opacity: 0.5;
}

.plate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 26px;
}

.plate-route {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #6a6250;
}

.plate-tools { display: flex; gap: 2px; }

.plate-btn {
  display: grid;
  place-items: center;
  width: 32px; height: 28px;
  border: 0;
  border-radius: 3px;
  background: none;
  color: #4a5750;
}

.plate-btn svg { width: 19px; height: 19px; }
.plate-btn:hover { background: rgba(0, 0, 0, 0.06); }
.plate-btn[aria-pressed="true"] { color: var(--brass-dim); }

.plate-btn.wide {
  width: auto;
  height: auto;
  margin-top: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 11px;
}

.plate-text {
  margin: 16px 0 0;
  font-size: 21px;
  line-height: 1.38;
  font-weight: 500;
  letter-spacing: -0.012em;
  white-space: pre-wrap;
  word-break: break-word;
}

.plate-note {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  color: #7a7263;
}

.plate.is-working .plate-text { opacity: 0.55; }

/* Words drop into place like a departure board settling. */
.flip {
  display: inline-block;
  animation: flip-in 260ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes flip-in {
  from { opacity: 0; transform: translateY(-0.32em) rotateX(52deg); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .flip { animation: none; }
  .swap.is-turning svg { animation: none; }
  .net[data-state="busy"] .net-dot { animation: none; }
}

/* ── Lists ───────────────────────────────────────────────── */

.strip { margin-top: 26px; }

.strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dim);
}

.strip-list { margin: 0; padding: 0; list-style: none; }

.strip-list li { border-top: 1px solid var(--line); }
.strip-list li:last-child { border-bottom: 1px solid var(--line); }

.row {
  display: block;
  width: 100%;
  padding: 11px 2px;
  border: 0;
  background: none;
  text-align: left;
}

.row-out { font-size: 15px; line-height: 1.35; }

.row-in {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--dim);
}

.row-tag {
  float: right;
  margin-left: 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--brass-dim);
}

/* ── Camera ──────────────────────────────────────────────── */

.cam {
  position: relative;
  aspect-ratio: 3 / 4;
  max-height: 58vh;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #04120e;
  overflow: hidden;
}

.cam video,
.cam .shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cam[data-mode="idle"] video { opacity: 0; }
.cam .shot { position: absolute; inset: 0; }
.boxes { position: absolute; inset: 0; }

.box {
  position: absolute;
  display: flex;
  align-items: center;
  padding: 2px 4px;
  border-left: 2px solid var(--brass);
  border-radius: 2px;
  background: var(--cream);
  color: #17231d;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.15;
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.7);
}

.box.is-pending {
  background: rgba(244, 239, 226, 0.6);
  color: #4a5750;
  font-family: var(--mono);
  font-size: 10px;
}

.cam-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  padding: 20px;
  background: linear-gradient(180deg, transparent, rgba(4, 18, 14, 0.9) 55%);
}

.cam-empty-title { margin: 0; font-size: 17px; font-weight: 600; }

.cam-empty-body {
  margin: 0 0 6px;
  max-width: 30ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cream-2);
}

.cam-status {
  position: absolute;
  left: 10px; right: 10px; top: 10px;
  padding: 7px 10px;
  border-radius: 3px;
  background: rgba(8, 32, 27, 0.9);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.cam-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 16px;
}

.cam-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.cam-side svg { width: 22px; height: 22px; }
.cam-side:disabled { opacity: 0.34; }

.shutter {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  border: 0;
  border-radius: 50%;
  background: var(--brass);
  color: #241703;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.shutter-ring {
  position: absolute;
  inset: -6px;
  border: 1px solid var(--brass-dim);
  border-radius: 50%;
}

.shutter:disabled { background: var(--panel-2); color: var(--dim); }
.shutter:not(:disabled):active { transform: scale(0.96); }

.cam-toggle {
  display: flex;
  gap: 6px;
  margin-top: 16px;
}

.seg {
  flex: 1;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: none;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.seg.is-on {
  border-color: var(--brass);
  background: var(--panel);
  color: var(--cream);
}

/* ── Voice ───────────────────────────────────────────────── */

.voice { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.voice-turn {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-2);
}

.voice-turn.is-out {
  border-color: transparent;
  background: var(--cream);
  color: #17231d;
}

.voice-role {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dim);
}

.voice-text {
  margin: 7px 0 0;
  font-size: 18px;
  line-height: 1.4;
  min-height: 1.4em;
}

.voice-turn:not(.is-out) .voice-text { color: var(--cream-2); }

.mic {
  position: relative;
  display: grid;
  place-items: center;
  gap: 2px;
  width: 132px; height: 132px;
  margin: 10px 0;
  border: 1px solid var(--brass-dim);
  border-radius: 50%;
  background: var(--panel);
  color: var(--brass);
}

.mic svg { width: 34px; height: 34px; position: relative; }

.mic-hint {
  position: relative;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--dim);
}

.mic-level {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--brass);
  opacity: 0.16;
  transform: scale(0);
  transition: transform 90ms linear;
}

.mic.is-live { border-color: var(--rail); color: var(--cream); }
.mic.is-live .mic-level { background: var(--rail); opacity: 0.3; }
.mic:disabled { opacity: 0.5; }

/* ── Cards ───────────────────────────────────────────────── */

.card {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-2);
}

.card.quiet { background: none; }

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.card-title { margin: 0; font-size: 16px; font-weight: 600; }

.card-sub {
  margin: 2px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
}

.card-note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cream-2);
}

.card-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }

.tag {
  flex: none;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

.tag.is-ready { border-color: var(--brass); color: var(--brass); }
.tag.is-busy { border-color: var(--rail); color: var(--rail); }

.meter {
  height: 3px;
  margin-top: 14px;
  background: var(--panel-2);
  border-radius: 2px;
  overflow: hidden;
}

.meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--brass);
  transition: width 200ms linear;
}

.switch {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--cream-2);
}

.switch input { margin: 2px 0 0; accent-color: var(--brass); width: 18px; height: 18px; }

.fineprint {
  margin: 22px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
  color: #6f8479;
}

/* ── Tabs ────────────────────────────────────────────────── */

.tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(var(--tabs-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  border-top: 1px solid var(--line);
  background: var(--ink-2);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  background: none;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tab svg { width: 21px; height: 21px; }
.tab.is-active { color: var(--brass); }

/* ── Sheet ───────────────────────────────────────────────── */

.sheet { position: fixed; inset: 0; z-index: 40; }

.sheet-scrim { position: absolute; inset: 0; background: rgba(3, 12, 9, 0.72); }

.sheet-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--brass-dim);
  border-radius: 10px 10px 0 0;
  background: var(--ink-2);
  padding-bottom: var(--safe-b);
  animation: rise 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes rise { from { transform: translateY(14px); opacity: 0; } }

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--line);
}

.sheet-head h2 { margin: 0; font-size: 15px; font-weight: 600; }

.sheet-list {
  margin: 0;
  padding: 4px 0 12px;
  list-style: none;
  overflow-y: auto;
}

.opt {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 13px var(--pad);
  border: 0;
  background: none;
  text-align: left;
}

.opt-name { font-size: 16px; }
.opt-native { font-size: 13px; color: var(--dim); }
.opt-code { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--brass-dim); }
.opt.is-on { background: var(--panel); }
.opt.is-on .opt-name { color: var(--brass); font-weight: 600; }

.opt-divider {
  padding: 16px var(--pad) 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dim);
}

/* ── Toast ───────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabs-h) + var(--safe-b) + 14px);
  z-index: 50;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  box-shadow: 0 10px 26px -14px #000;
}

.toast.is-bad { border-color: var(--rail); color: #f6d2cd; }

/* ── Wider screens ───────────────────────────────────────── */

@media (min-width: 720px) {
  :root { --pad: 24px; }
  .view { max-width: 620px; margin: 0 auto; padding-top: 24px; }
  .pairbar { max-width: 620px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .cam { aspect-ratio: 4 / 3; }
  .plate-text { font-size: 24px; }
}

/* Budget cap inputs */
.capfield {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
}

.capfield input {
  width: 56px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 13px;
  text-align: center;
}

.capfield input:focus { outline: none; border-color: var(--brass); }
.card-foot { flex-wrap: wrap; }
.switch strong { color: var(--cream); font-weight: 650; }

/* Byte breakdown */
.breakdown { margin: 12px 0 0; padding: 0; list-style: none; }

.breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .05em;
  color: var(--dim);
}

.breakdown li b { color: var(--cream); font-weight: 500; }
.breakdown li.zero b { color: var(--brass-dim); }

.textfield {
  width: 100%;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 13px;
}

.textfield:focus { outline: none; border-color: var(--brass); }
.textfield::placeholder { color: #5f7a6d; }