/* 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;
  /* Without this, any button that forgets to set a background renders as an
     iOS default pill — light grey with pale text on this dark theme. */
  background: none;
  -webkit-appearance: none;
  appearance: none;
}
: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 { display: block; font-size: 15px; line-height: 1.35; }

.row-in {
  display: block;
  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(5, 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; }

.diag {
  margin: 12px 0 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--ink);
  color: var(--cream-2);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
  -webkit-user-select: text;
}

/* Voice model size picker */
.tiers { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }

.tier {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: none;
  text-align: left;
}

.tier-name {
  font-size: 14px;
  font-weight: 600;
  text-transform: capitalize;
}

.tier-size {
  justify-self: end;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--brass-dim);
}

.tier-blurb {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.4;
  color: var(--dim);
}

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

/* A misheard sentence can be corrected in place */
.voice-text.is-editable {
  padding: 8px 10px;
  margin-left: -10px;
  margin-right: -10px;
  border: 1px dashed var(--brass-dim);
  border-radius: 3px;
  outline: none;
}

.voice-text.is-editable:focus { border-style: solid; border-color: var(--brass); }

/* ── Travel guide ────────────────────────────────────────── */

.gcountry {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.gcountry-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass-dim);
  flex: none;
}

.gselect {
  flex: 1;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--ink-2);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}

.gselect.small { flex: none; width: 92px; font-family: var(--mono); font-size: 14px; }
.gselect:focus { outline: none; border-color: var(--brass); }

.bignum {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 14px 0 0;
  padding: 20px;
  border-radius: 4px;
  background: var(--rail);
  color: #fff;
  text-decoration: none;
}

.bignum-n { font-size: 46px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.bignum-l { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }

.numgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }

.numcell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 11px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--cream);
  text-decoration: none;
}

.numcell-l { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.numcell-n { font-size: 19px; font-weight: 650; }

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

.convinput {
  flex: 1;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 19px;
}

.convinput.wide { width: 100%; margin-top: 14px; }
.convinput:focus { outline: none; border-color: var(--brass); }
.convarrow { color: var(--brass); font-size: 18px; flex: none; }

.convresult {
  margin-top: 12px;
  padding: 14px;
  border-radius: 4px;
  background: var(--cream);
  color: #17231d;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -.015em;
}

.phraserow { display: flex; align-items: center; }
.phraserow .row { flex: 1; min-width: 0; }

.star {
  flex: none;
  width: 38px;
  height: 38px;
  border: 0;
  background: none;
  color: #3f6353;
  font-size: 19px;
  line-height: 1;
}

.star.is-on { color: var(--brass); }

.sizetable { display: flex; gap: 0; margin: 8px 0 16px; overflow-x: auto; }
.sizecol { display: flex; flex-direction: column; flex: none; min-width: 42px; }
.sizecol.labels { min-width: 34px; }

.sizecell {
  padding: 6px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  text-align: center;
  color: var(--cream-2);
}

.sizecol.labels .sizecell { color: var(--brass-dim); text-align: left; }
.sizecell.head { color: var(--brass); font-weight: 600; }

.bigcard { position: fixed; inset: 0; z-index: 45; display: flex; background: rgba(3, 12, 9, .82); }

.bigcard-panel {
  margin: auto;
  width: min(560px, calc(100vw - 24px));
  max-height: 90vh;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--brass-dim);
  border-radius: 8px;
  background: var(--ink-2);
}

.bigcard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bigcard-text { margin: 18px 0 0; font-size: 30px; line-height: 1.25; font-weight: 650; letter-spacing: -.015em; }
.bigcard-mine { margin-top: 16px; }
.bigcard-foot { margin-top: 18px; }

/* Nearby handoff grid */
.nearbygrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 14px; }

.nearbycell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--ink-2);
  color: var(--cream);
  text-align: left;
  text-decoration: none;
}

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

.nearbycell.is-on .nearbycell-n { color: var(--brass); }

.nearbycell:active { background: var(--panel); }
.nearbycell-i { color: var(--brass); font-size: 17px; line-height: 1; }
.nearbycell-n { font-size: 14px; font-weight: 600; }
.nearbycell-t { font-family: var(--mono); font-size: 10px; color: var(--dim); }
a.go { text-align: center; text-decoration: none; display: inline-block; }

/* Map */
.mapholder {
  height: 46vh;
  min-height: 240px;
  margin: 14px 0 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--ink);
  overflow: hidden;
}

.mapholder:not(.is-live) { display: grid; place-items: center; }

.mapmark {
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .6);
  cursor: pointer;
}

.mapmark.is-self { background: var(--rail); width: 16px; height: 16px; }
.maplibregl-popup-content { font-family: var(--sans); font-size: 13px; color: #17231d; }

/* Weather */
.wxnow { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.wxglyph { font-size: 34px; color: var(--brass); line-height: 1; }
.wxtemp { font-size: 34px; font-weight: 650; letter-spacing: -.02em; display: block; line-height: 1; }
.wxlabel { font-size: 13px; color: var(--cream-2); }

.wxdays { display: flex; gap: 4px; margin-top: 16px; overflow-x: auto; }

.wxday {
  flex: 1;
  min-width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px;
  border: 1px solid var(--line);
  border-radius: 3px;
}

.wxday-n { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.wxday-g { color: var(--brass); font-size: 15px; line-height: 1; }
.wxday-t { font-size: 14px; font-weight: 650; }
.wxday-l { font-size: 11px; color: var(--dim); }
.wxday-p { font-family: var(--mono); font-size: 9px; color: var(--brass-dim); }

/* Packing */
.packrow { display: flex; align-items: flex-start; gap: 11px; padding: 11px 2px; font-size: 15px; line-height: 1.35; }
.packrow input { margin: 1px 0 0; width: 19px; height: 19px; accent-color: var(--brass); flex: none; }
.packrow.is-done span { color: var(--dim); text-decoration: line-through; }


/* ── Layout corrections ──────────────────────────────────── */

/* Horizontal chip row. One line, scrolls sideways, bleeds to the screen edge. */
.chips {
  display: flex;
  gap: 6px;
  margin: 0 calc(var(--pad) * -1) 4px;
  padding: 12px var(--pad) 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-padding-left: var(--pad);
}

.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--ink-2);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

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

/* Was locked to three columns, which left the two-cell Daylight card short. */
.numgrid {
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
}

/* Native arrow was removed by -webkit-appearance:none and never replaced. */
.gselect {
  background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%),
                    linear-gradient(135deg, var(--brass) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.gselect.small { padding-right: 26px; background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; }

/* An empty slab told you nothing. */
.mapholder:not(.is-live)::before {
  content: "Map not loaded";
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #4d6b5c;
}

/* Five tabs need tighter labels or "CAMERA" clips on a narrow phone. */
.tab {
  font-size: 8px;
  letter-spacing: .04em;
  padding: 0 2px;
}

.tab span { white-space: nowrap; }
.tab svg { width: 20px; height: 20px; }

@media (max-width: 360px) {
  .tab { font-size: 7px; letter-spacing: 0; }
}

/* The brass rule is positioned for the translation plate's header height; the
   big phrase card has a shorter one. */
.bigcard .plate::before { top: 34px; }

/* Bill splitter */
.splitrow { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.convinput.narrow { flex: none; width: 74px; text-align: center; }
.pctrow { display: flex; gap: 6px; margin-top: 8px; }

/* Watch-out list */
.watchlist { margin: 12px 0 0; padding: 0; list-style: none; }

.watchlist li {
  position: relative;
  padding: 9px 0 9px 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cream-2);
}

.watchlist li::before {
  content: "!";
  position: absolute;
  left: 2px;
  top: 9px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--rail);
}

/* UV band */
.uvrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 11px 12px;
  border-left: 3px solid var(--brass);
  border-radius: 3px;
  background: var(--panel);
}

.uv-n { font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--brass); flex: none; }
.uv-band { display: block; font-size: 14px; font-weight: 600; }
.uv-advice { display: block; font-size: 12px; line-height: 1.45; color: var(--cream-2); }
.uvrow.uv-very-high, .uvrow.uv-extreme { border-left-color: var(--rail); }
.uvrow.uv-very-high .uv-n, .uvrow.uv-extreme .uv-n { color: var(--rail); }

/* Spending */
.spendtotal {
  margin: 14px 0 0;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--brass);
}

/* Medical */
.medfield { display: block; margin-top: 12px; }
.medlabel {
  display: block;
  margin-bottom: 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass-dim);
}

.medcard { margin-top: 18px; }

.medrow {
  padding: 9px 0;
  border-top: 1px solid rgba(0, 0, 0, .12);
}

.medrow:first-child { border-top: 0; }
.medrow-k {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6a6250;
}

.medrow-v { display: block; margin-top: 2px; font-size: 21px; font-weight: 600; line-height: 1.25; }

/* Long-form reading in the full-screen card */
.readtext {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cream-2);
  white-space: pre-wrap;
}

.bigcard-panel .chips { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

/* Address input */
.addrinput {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  resize: none;
}

.addrinput:focus { outline: none; border-color: var(--brass); }

.tier.is-risky { border-style: dashed; }
.tier.is-risky .tier-size { color: var(--rail); }

/* Mental-arithmetic multiplier */
.multbox {
  margin-top: 14px;
  padding: 13px 14px;
  border-left: 3px solid var(--brass);
  border-radius: 3px;
  background: var(--panel);
}

.mult-l {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass-dim);
}

.mult-n {
  display: block;
  margin: 4px 0 3px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--brass);
}

.mult-d { display: block; font-size: 13px; line-height: 1.45; color: var(--cream-2); }

/* Currency calculator */
.calcdisplay {
  margin-top: 14px;
  padding: 14px;
  border-radius: 4px;
  background: var(--cream);
  color: #17231d;
  text-align: right;
}

.calc-expr {
  display: block;
  min-height: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: #7a7263;
}

.calc-local { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.calc-home { display: block; min-height: 17px; font-size: 15px; font-weight: 550; color: #6a6250; }

.calcpad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }

.calckey {
  padding: 15px 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--ink-2);
  color: var(--cream);
  font-size: 19px;
  font-weight: 600;
}

.calckey:active { background: var(--panel); }
.calckey.is-op { color: var(--brass); }
.calckey.is-clear { color: var(--rail); }
.calckey.is-eq { grid-column: span 2; background: var(--brass); color: #241703; border-color: transparent; }
.calckey.is-add { grid-column: span 2; font-size: 14px; font-family: var(--mono); letter-spacing: .05em; }

/* Shop equivalents */
.shophome { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--dim); }
.shophome-l {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass-dim);
}

.shophere { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }
.shophere-l {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass-dim);
}

.shophere-v { display: block; margin-top: 3px; font-size: 15px; line-height: 1.5; }

/* Flashcards */
.cardface { min-height: 210px; display: flex; flex-direction: column; }

.flash-meta {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-dim);
}

.flash-prompt {
  margin: 16px 0 0;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
}

.flash-answer {
  margin: 14px 0 0;
  padding: 14px;
  border-radius: 4px;
  background: var(--cream);
  color: #17231d;
  font-size: 23px;
  font-weight: 650;
  line-height: 1.25;
  min-height: 1.25em;
}

.flash-answer.is-hidden { background: var(--panel-2); }
.flash-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 16px; }

.flash-btn {
  flex: 1;
  padding: 14px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--ink-2);
  color: var(--cream);
  font-size: 14px;
  font-weight: 600;
}

.flash-btn.is-again { border-color: var(--rail); color: #f2b3ac; }
.flash-btn.is-got { border-color: transparent; background: var(--brass); color: #241703; }

/* Menu decoder */
.menuhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 2px 0;
  border: 0;
  text-align: left;
}

.menuhead-t { font-size: 16px; font-weight: 600; }

.menuhead-c {
  flex: none;
  min-width: 26px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 10px;
  text-align: center;
  color: var(--brass-dim);
}