/* ==========================================================================
   Travelfront API — price matrix console
   Loaded after app.css and built only from its tokens and components, so the
   two pages are one console in light and dark. The one new idea is the heat
   scale: each row's cheapest week is green, half as dear again is red, and
   the scale is per row because companies' search prices are not on one basis.
   ========================================================================== */

.mx-brand { color: inherit; text-decoration: none; }

.mx-api {
  max-width: 240px;
  margin-right: 6px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mx {
  max-width: 1480px;
  margin: 0 auto;
  padding: 28px var(--page-pad) 72px;
}

.mx-head h1 { margin: 0; font-size: 26px; font-weight: 680; letter-spacing: -.025em; }
.mx-head p { max-width: 72ch; margin: 6px 0 0; color: var(--text-2); }

/* ------------------------------------------------------------------ form -- */

.mx-form,
.mx-progress {
  margin-top: 20px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.mx-fields { display: flex; flex-wrap: wrap; gap: 12px; }

.mx-field { display: flex; flex: 1 1 170px; flex-direction: column; gap: 6px; min-width: 0; }
.mx-field-wide { flex: 2 1 230px; }
.mx-field-narrow { flex: 0 1 96px; min-width: 84px; }

.mx-label { font-size: 12px; font-weight: 600; color: var(--text-2); }

.mx-field select,
.mx-field input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
}
.mx-field select:disabled,
.mx-field input:disabled { opacity: .6; }
.mx-field input:invalid { border-color: var(--err-line); }

.mx-fill {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.mx-fill .mx-fields { flex: 1 1 320px; max-width: 460px; }

.mx-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-actions .btn { height: 40px; }
.mx-ic-fill { fill: currentColor; stroke: none; }
.mx-stop { color: var(--err); background: var(--err-soft); border-color: var(--err-line); }
.mx-stop:hover { background: var(--err-soft); filter: saturate(1.2); }

/* -------------------------------------------------------------- progress -- */

.mx-progress-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.mx-progress-head h2 { margin: 0; font-size: 15px; }
.mx-progress-head .hint { margin: 0; font-variant-numeric: tabular-nums; }

.mx-steps { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }

.mx-step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 8px 12px;
  font-size: 13px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
}
.mx-step-week { min-width: 116px; font-weight: 600; }
.mx-step-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mx-step[data-state="running"] .mx-step-status { color: var(--accent); }
.mx-step[data-state="done"] .mx-step-status { color: var(--text); }
.mx-step[data-state="failed"] .mx-step-status { color: var(--err); }

.mx-tag {
  padding: 1px 8px;
  font-size: 11.5px;
  font-weight: 550;
  color: var(--text-2);
  background: var(--surface-3);
  border-radius: 999px;
}
.mx-tag-err { color: var(--err); background: var(--err-soft); }

/* ---------------------------------------------------------------- result -- */

.mx-result { margin-top: 28px; }

.mx-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 12px;
}
.mx-result-head h2 { margin: 0; font-size: 18px; letter-spacing: -.015em; }
.mx-result-head .hint { margin-top: 2px; }

.mx-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-2); }
.mx-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Green at a row's cheapest week, red at half as dear again. */
.mx-sw,
.mx-c {
  background: color-mix(in oklab, var(--ok-soft), var(--err-soft) calc(var(--t, 0) * 100%));
}
.mx-sw { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--line); border-radius: 4px; }
.mx-sw-none,
.mx-c.mx-c-none {
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 5px, var(--surface-3) 5px 6px);
}
.mx-sw-empty { background: transparent; border: 1px dashed var(--line-2); }

.mx-scroll {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  -webkit-overflow-scrolling: touch;
}

.mx-grid {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  font-variant-numeric: tabular-nums;
}

.mx-grid thead th {
  padding: 8px 4px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  text-align: center;
  white-space: nowrap;
}

.mx-rowh {
  position: sticky;
  left: 0;
  z-index: 1;
  /* As narrow as its names: the weeks take the rest. */
  width: 1%;
  min-width: 112px;
  padding: 6px 12px 6px 10px;
  text-align: left;
  white-space: nowrap;
  background: var(--surface);
  /* Covers the cell spacing that would show scrolled cells beside it. */
  box-shadow: 3px 0 0 var(--surface), 4px 0 0 var(--line);
}
.mx-grid thead .mx-rowh { text-align: left; }

.mx-prov { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.mx-prov::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--p); border-radius: 50%; }
.mx-rowh-sub { display: block; margin-left: 16px; font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }

.mx-c {
  min-width: 62px;
  height: 50px;
  padding: 4px;
  text-align: center;
  border-radius: 8px;
  cursor: default;
}
.mx-c-main { display: block; font-size: 14px; font-weight: 650; line-height: 1.2; }
.mx-c-sub { display: block; font-size: 11px; line-height: 1.2; color: var(--text-2); }
.mx-c-best { box-shadow: inset 0 0 0 1.5px var(--ok); }
.mx-c-none { color: var(--text-3); }
.mx-c-none .mx-c-sub { color: var(--text-3); }
.mx-c.mx-c-empty { background: transparent; outline: 1px dashed var(--line-2); outline-offset: -3px; }
.mx-c-stale { opacity: .5; }

.mx-rank .mx-rowh { font-size: 13px; font-weight: 650; }
.mx-rank .mx-c { background: var(--surface-2); }
.mx-rank .mx-c.mx-c-top { color: var(--accent); background: var(--accent-soft); }
.mx-rank .mx-c-sub { color: inherit; opacity: .8; }

.mx-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 13px;
  border-radius: var(--r-sm);
}
.mx-note .ic { margin-top: 2px; }
.mx-note-warn { color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-line); }

.mx-others { display: grid; gap: 8px; margin-top: 18px; }

.mx-notes { margin-top: 18px; font-size: 13px; color: var(--text-2); }
.mx-notes summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.mx-notes ul { margin: 8px 0 0; padding-left: 20px; }
.mx-notes li + li { margin-top: 4px; }

.mx-empty {
  padding: 28px 20px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
}
.mx-empty strong { display: block; font-size: 15px; }
.mx-empty p { max-width: 60ch; margin: 6px auto 0; color: var(--text-2); }

.mx-routes { gap: 8px; }

@media (max-width: 760px) {
  .mx { padding-top: 20px; }
  .mx-head h1 { font-size: 22px; }
  .mx-api { display: none; }
  /* iOS zooms into any field under 16px. */
  .mx-field select,
  .mx-field input { font-size: 16px; }
  .mx-fill .mx-fields { max-width: none; }
  .mx-actions { width: 100%; }
  .mx-actions .btn { flex: 1 1 auto; }
}