@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg: #F5F4F0;
  --bg-card: #FAFAF8;
  --text: #2C2C2C;
  --text-muted: #8C8C8C;
  --accent: #E8D66B;
  --accent-dark: #D4C25A;
  --border: #E5E5E0;
  --grid: #EAE9E4;
  --shadow: rgba(0, 0, 0, 0.04);
  --error: #E8A598;
  --error-text: #B09090;
  --success: #98C9A8;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  line-height: 1.6;
}

/* Subtle grid background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

/* Decorative yellow circle */
body::after {
  content: '';
  position: fixed;
  top: 15%;
  right: -5%;
  width: 400px;
  height: 400px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0.15;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.container,
main {
  max-width: 800px;
  margin: 0 auto;
  padding: 4rem 2rem 2rem;
  position: relative;
  z-index: 1;
  width: 100%;
  flex: 1;
}

/* Header */
header {
  margin-bottom: 2.5rem;
  position: relative;
  text-align: center;
}

.welcome {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

h1 {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 1rem;
  color: var(--text);
}

h1 span {
  color: var(--accent-dark);
  font-weight: 600;
}

/* Fixed-width box (JS locks it to the widest word); the word swaps by rotating
   a two-faced cube on the X axis, so the next word scrolls up into view. */
#calc-type {
  display: inline-block;
  white-space: nowrap;
  perspective: 600px;
  /* Nudge so the centred cube face sits on the heading's baseline. */
  vertical-align: -0.16em;
}

#calc-type .cube {
  position: relative;
  display: block;
  height: 1em;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

#calc-type .cube.rotate {
  transform: rotateX(-90deg);
}

#calc-type .cube.no-transition {
  transition: none;
}

#calc-type .cube__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1em;
  backface-visibility: hidden;
}

/* Front face faces the viewer; top face waits a quarter-turn above it. */
#calc-type .cube__face--front {
  transform: rotateX(0deg) translateZ(0.5em);
}

#calc-type .cube__face--top {
  transform: rotateX(90deg) translateZ(0.5em);
}

@media (prefers-reduced-motion: reduce) {
  #calc-type .cube,
  #calc-type .cube.rotate {
    transition: none;
    transform: none;
  }
}

.description {
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto;
  font-weight: 400;
}

/* Input Section */
.input-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 24px var(--shadow);
  position: relative;
  overflow: hidden;
}

.input-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  opacity: 0.6;
}

.input-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.input-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  display: block;
}

.country-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

select#country {
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

select#country:hover {
  border-color: var(--accent-dark);
}

select#country:focus {
  outline: none;
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(232, 214, 107, 0.15);
}

#expression {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  font-family: inherit;
  font-size: 1.0625rem;
  color: var(--text);
  background: var(--bg);
  transition: all 0.3s ease;
  line-height: 1.6;
}

#expression:focus {
  outline: none;
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(232, 214, 107, 0.15);
}

#expression::placeholder {
  color: #C0C0B8;
}

.error {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: rgba(232, 165, 152, 0.15);
  border: 1px solid var(--error);
  color: var(--error-text);
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Results */
.results {
  margin-bottom: 2rem;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 0 0.5rem;
}

.results-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.results-meta {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 500;
  text-align: right;
}

#stale {
  color: var(--accent-dark);
  font-weight: 600;
}

/* "Read as ..." note, shown when the AI assist rewrote the query. Deliberately
   quiet but legible: it must be noticed without competing with the total. */
.interpreted {
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.interpreted code {
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  background: rgba(232, 214, 107, 0.22);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Total hero card */
.total-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.75rem 2rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 16px var(--shadow);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.total-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.total-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
}

.total {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.total .currency {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-dark);
  margin-left: 0.4rem;
  letter-spacing: 0;
}

/* Breakdown card */
.breakdown-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.25rem 1.5rem 1.5rem;
  box-shadow: 0 2px 16px var(--shadow);
}

#breakdown {
  width: 100%;
  border-collapse: collapse;
}

#breakdown th {
  text-align: left;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

#breakdown th:last-child {
  width: 2.5rem;
}

#breakdown td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

#breakdown tr:last-child td {
  border-bottom: none;
}

#breakdown .currency {
  font-weight: 600;
  color: var(--accent-dark);
}

#breakdown .converted {
  font-weight: 600;
}

.amount {
  width: 100%;
  max-width: 8rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--bg);
  transition: all 0.2s ease;
}

.amount:focus {
  outline: none;
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(232, 214, 107, 0.15);
}

/* Buttons */
button {
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

#add-row {
  margin-top: 1rem;
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  padding: 0.6rem 1.25rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
}

#add-row:hover {
  color: var(--text);
  border-color: var(--accent-dark);
  background: var(--bg);
}

/* Footnote legend for the rate markers (* overridden, † supplemented). Each
   line is shown only when the current result actually uses that marker.
   The spacing lives on the lines rather than the container so that hiding
   both collapses the legend to nothing — the common all-central-bank result
   must look exactly as it did before the legend existed. */
.legend p {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.del {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 8px;
}

.del:hover {
  color: var(--error-text);
  background: rgba(232, 165, 152, 0.15);
}

/* Source names on the results line. Spelled out rather than left as codes;
   the abbr's title keeps the short form for anyone who wants it. */
.src {
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
  cursor: help;
}

/* Editable rate in the breakdown, mirroring Trip mode's per-leg field. */
.rate-cell {
  white-space: nowrap;
}

.rate {
  width: 6.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--bg);
  transition: all 0.2s ease;
}

.rate:focus {
  outline: none;
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(232, 214, 107, 0.15);
}

.rate-mark {
  display: inline-block;
  width: 0.75rem;
  margin-left: 0.15rem;
  color: var(--accent-dark);
  font-weight: 600;
}

/* A pair of rows for one currency: the published rate on top, the rate the
   user typed beneath it. They have to read as one item, so the divider between
   them is dropped and only the pair's lower edge keeps a border. */
#breakdown tr.is-superseded td {
  border-bottom: none;
  padding-bottom: 0.2rem;
}

#breakdown tr.row-user td {
  padding-top: 0.2rem;
}

/* The published amount is struck, not just dimmed: it is the one number in the
   table that does not add up into the total, and dimming alone reads as
   "secondary" rather than "not counted". */
#breakdown tr.is-superseded .converted {
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

#breakdown .row-echo {
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* History */
/* Capabilities */
.capabilities {
  margin-bottom: 2rem;
}

.capabilities h2 {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 1rem;
  padding: 0 0.5rem;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.capability-group h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  padding: 0 0.5rem;
}

.capability-group .example {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.capability-group .example:hover {
  border-color: var(--accent-dark);
  box-shadow: 0 2px 16px rgba(232, 214, 107, 0.08);
  transform: translateX(4px);
}

@media (max-width: 640px) {
  .capability-grid {
    grid-template-columns: 1fr;
  }
}

#history {
  margin-top: 2.5rem;
}

#history h2 {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 1rem;
  padding: 0 0.5rem;
}

#history-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Each entry is a row: the recall link grows, the delete button sits at the
   right edge and only appears on hover or keyboard focus, so the list stays
   quiet until you reach for it. */
#history-list li {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}

#history-list li a {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: all 0.2s ease;
}

.history-query {
  min-width: 0;
  word-break: break-word;
}

/* Result over timestamp, stacked at the right edge. A column, so the two never
   compete for the row's width with a long query on the left. */
.history-meta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}

.history-result {
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

/* Only currency entries carry one, so it must stay quiet enough that a list
   mixing them with unit conversions doesn't look ragged. */
.history-time {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#history-list li a:hover {
  border-color: var(--accent-dark);
  box-shadow: 0 2px 16px rgba(232, 214, 107, 0.08);
  transform: translateX(4px);
}

.history-del {
  flex-shrink: 0;
  width: 2.25rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0;
  transition: all 0.2s ease;
}

#history-list li:hover .history-del,
#history-list li:focus-within .history-del {
  opacity: 1;
}

.history-del:hover {
  color: var(--error-text);
  border-color: var(--error);
  background: rgba(232, 165, 152, 0.15);
}

.history-del:focus-visible {
  opacity: 1;
  outline: none;
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(232, 214, 107, 0.15);
}

/* Pointers are the only input where hover is meaningful; on touch the button
   has to be visible all the time or it cannot be reached at all. */
@media (hover: none) {
  .history-del {
    opacity: 1;
  }
}

/* Static content pages */
.page {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 0 4px 24px var(--shadow);
}

.page h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.page h2 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 2rem 0 0.6rem;
}

.page p {
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.page .meta {
  font-size: 0.8125rem;
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
}

.page strong {
  color: var(--text);
  font-weight: 600;
}

.page ul {
  margin: 0 0 1rem 1.25rem;
  color: var(--text-muted);
}

.page li {
  margin-bottom: 0.5rem;
}

.page a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--accent);
  transition: all 0.2s ease;
}

.page a:hover {
  color: var(--accent-dark);
  border-bottom-color: var(--accent-dark);
}

.page a.back-link {
  display: inline-block;
  margin-top: 1rem;
}

.back-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--accent);
  transition: all 0.2s ease;
}

.back-link:hover {
  color: var(--accent-dark);
  border-bottom-color: var(--accent-dark);
}

/* Footer */
footer {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  position: relative;
  z-index: 1;
}

footer a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--accent);
  transition: all 0.2s ease;
}

footer a:hover {
  color: var(--accent-dark);
  border-bottom-color: var(--accent-dark);
}

.support {
  margin-top: 1.25rem;
}

footer a.support-link {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.8125rem;
  box-shadow: 0 1px 2px var(--shadow);
}

footer a.support-link:hover {
  color: var(--text);
  border-color: var(--accent-dark);
  background: var(--accent);
}

.copyright {
  margin-top: 0.75rem;
  color: var(--text-muted);
}

/* Tabs — a segmented control above the input card, sharing the pill language
   of the region picker so the two modes read as one product. */
.tabs {
  display: flex;
  width: fit-content;
  gap: 0.25rem;
  margin: 0 auto 1.25rem;
  padding: 0.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
}

.tab {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.45rem 1.1rem;
  border-radius: 100px;
}

.tab:hover {
  color: var(--text);
}

.tab.is-active {
  background: var(--accent);
  color: var(--text);
}

.tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 214, 107, 0.35);
}

/* Trip form. The five fields read as one sentence — "you have 100000 in RUB,
   leaving from Russia, travelling to Georgia, you want GEL" — so they get one
   row wherever there is room for it, with the country pickers given the extra
   width their labels need. Below that they reflow into pairs. */
.trip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.85rem;
}

@media (min-width: 760px) {
  .trip-grid {
    grid-template-columns: 1.1fr 0.7fr 1.4fr 1.4fr 0.7fr;
  }
}

.trip-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.trip-field input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
  background: var(--bg);
  transition: all 0.2s ease;
}

.trip-field input:focus {
  outline: none;
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(232, 214, 107, 0.15);
}

.trip-field input::placeholder {
  color: #C0C0B8;
}

/* The shared .input-section clips its content so its accent bar follows the
   rounded corners — which would also crop the country dropdown to the height
   of the card. The trip card can't clip, so it paints the same bar as a
   background instead: backgrounds honour border-radius on their own, no
   overflow needed, and the two cards stay pixel-identical. */
.trip-card {
  overflow: visible;
  background-image: linear-gradient(rgba(232, 214, 107, 0.6), rgba(232, 214, 107, 0.6));
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: top;
}

.trip-card::before {
  content: none;
}

/* Country combobox. The list floats over the card rather than pushing it
   open, so the route table below doesn't jump every time you search. */
.combo {
  position: relative;
}

.combo-list {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 15rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
  /* .trip-field styles its label — uppercase, tracked out, muted. The list is
     content, not a label, so it opts back out of all of it. */
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--text);
}

.combo-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  font-size: 0.875rem;
  cursor: pointer;
}

.combo-option.is-active {
  background: rgba(232, 214, 107, 0.28);
}

.combo-option[aria-selected="true"] .combo-name {
  font-weight: 600;
}

.combo-cur {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.combo-empty {
  padding: 0.4rem 0.55rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.trip-code {
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Shown when both ends of the trip resolve to one rate source, where every
   route is the same trade written three ways. Quiet but unmissable: it is the
   reason the table below has no winner. */
.notice {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: rgba(232, 214, 107, 0.18);
  border: 1px solid var(--accent);
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1.5;
}

.total-note {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Route table */
#trip-routes {
  width: 100%;
  border-collapse: collapse;
}

#trip-routes th {
  text-align: left;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

#trip-routes th:not(:first-child),
#trip-routes td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}

#trip-routes td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.route-row {
  cursor: pointer;
}

.route-row:hover {
  background: rgba(232, 214, 107, 0.08);
}

.route-toggle {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  padding: 0 0.4rem 0 0;
  line-height: 1;
}

.route-name {
  font-weight: 600;
}

.route-result {
  font-weight: 600;
}

.route-delta {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.route-delta.is-worse {
  color: var(--error-text);
}

/* An unpriceable route stays in the table rather than vanishing: its legs are
   still editable, and typing the missing rate brings it back. */
.route-row.is-out .route-name,
.route-row.is-out .route-result {
  color: var(--text-muted);
  font-weight: 500;
}

.route-note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--error-text);
}

.route-legs > td {
  background: var(--bg);
  padding: 0.5rem 0.75rem 0.75rem;
}

.leg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  padding: 0.45rem 0;
  font-size: 0.875rem;
}

.leg + .leg {
  border-top: 1px dashed var(--border);
}

.leg-where {
  min-width: 7rem;
  font-weight: 600;
  color: var(--accent-dark);
}

/* Which bank priced this leg. Now that legs can come from different central
   banks it is the detail that explains why the routes differ at all. */
.leg-src {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-decoration: none;
  cursor: help;
}

.leg-flow {
  flex: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.leg-rate-field {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.leg-rate {
  width: 7.5rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--bg-card);
  transition: all 0.2s ease;
}

.leg-rate:focus {
  outline: none;
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(232, 214, 107, 0.15);
}

.leg-mark {
  width: 0.75rem;
  color: var(--accent-dark);
  font-weight: 600;
}

/* Responsive */
@media (max-width: 640px) {
  .container,
  main {
    padding: 2rem 1rem;
  }

  .trip-grid {
    grid-template-columns: 1fr 1fr;
  }

  .leg {
    align-items: flex-start;
  }

  .leg-where {
    min-width: 100%;
  }

  h1 {
    font-size: 2rem;
  }

  .input-section {
    padding: 1.5rem;
  }

  .input-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .total {
    font-size: 1.85rem;
  }

  .page {
    padding: 1.5rem;
  }
}