/* Visual language follows the CMA CGM transactional email templates: a bordered white
   sheet on a pale ground, red rules between sections, uppercase slate section labels,
   and a navy call-to-action block carrying a red button. */

:root {
  --navy: #0a1e42;
  --navy-deep: #05132c;
  --navy-mid: #1b3562;
  --red: #e4002b;
  --red-deep: #bf0024;
  --ground: #eff3f8;
  --surface: #ffffff;
  --inset: #f5f8fc;
  --line: #dbe3ee;
  --line-input: #c2cfe0;
  --text: #263447;
  --muted: #6b7c92;
  --ok: #0f7350;
  --warn: #8a5a00;
  --error: #b3001b;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  padding: 28px 20px 36px;
  font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

/* Sheet */

.sheet {
  max-width: 880px;
  margin: 0 auto;
  background: var(--surface);
  border: 2px solid var(--navy);
  border-radius: 12px;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 34px 16px;
}

.logo {
  display: block;
  width: 124px;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* The header doubles as a stage. The wordmark slides left until it meets the logo,
   uncovering the team motto; then a container emerges from behind the logo and pushes
   the wordmark back over it. Travel distances are measured in JS so the wordmark parks
   flush against the logo whatever the window width. */

/* Taller than the text it holds so the box can carry a caption under it. The logo is
   taller still, so this doesn't change the height of the header. */
.stage {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 64px;
  overflow: hidden;
}

.wordmark,
.motto,
.train {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  margin: 0;
  white-space: nowrap;
}

.wordmark,
.motto {
  right: 0;
  justify-content: flex-end;
}

/* Drawn from the logo to the motto as the wordmark clears out of the way. It is a
   full-length rule that grows from its right end; the wordmark panel sits on top of it,
   so what shows is exactly the stretch the panel has vacated. */
.trace,
.wake {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  height: 2px;
  margin-top: -1px;
  transform-origin: right center;
}

/* Shares the wordmark's timing exactly, or its near end drifts out from under the panel
   that is supposed to be hiding it. */
.trace {
  right: calc(var(--motto-w, 0px) + 14px);
  background: var(--red);
  transform: scaleX(var(--trace, 0));
  transition: transform 1.3s cubic-bezier(0.78, 0, 0.68, 0.9);
}

/* Laid down behind the box on the way out, over exactly the stretch of header the box
   has given back. */
.wake {
  width: var(--park, 0px);
  background: var(--navy);
  transform: scaleX(var(--wake, 0));
  transition: transform 1.3s cubic-bezier(0.32, 0.1, 0.22, 1);
}

/* The leading edge fades out instead of ending flat, so the motto dissolves under the
   panel rather than being sliced by it. The whole ramp overhangs the stage and is
   clipped while the stage is at rest, which keeps the motto properly hidden; the padding
   holds the text where it would otherwise sit. */
.wordmark {
  z-index: 2;
  right: -44px;
  padding-right: 44px;
  padding-left: 18px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--navy);
  background: linear-gradient(
    90deg,
    var(--surface) calc(100% - 30px),
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(var(--wordmark-x, 0px));
  transition: transform 1.3s cubic-bezier(0.78, 0, 0.68, 0.9);
}

.wordmark em {
  font-style: normal;
  color: var(--red);
}

.wordmark-dash {
  padding: 0 5px;
  color: var(--navy);
}

.motto {
  z-index: 1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--red);
}

/* Fades whatever is passing the mouth of it, so the box dissolves behind the logo
   instead of being cut off square by the edge of the stage. */
.tunnel {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px);
  mask-image: linear-gradient(90deg, transparent 0, #000 26px);
}

/* Nothing overhangs the box, so the face that meets the wordmark is the only part of
   this that ever touches it. */
.train {
  left: 0;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  background: var(--surface);
  transform: translateX(var(--train-x, -200%));
  transition: transform 1.3s cubic-bezier(0.32, 0.1, 0.22, 1);
}

.train-mark {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--red);
}

/* Set out to the width of the box so the three phrases square off with its sides. */
.train-slogan {
  display: flex;
  align-self: stretch;
  justify-content: space-between;
  font-size: 8.5px;
  font-weight: 600;
  color: var(--muted);
}

/* A CMA CGM box: corrugated navy panel with the red stripe along the bottom rail. */
.box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 140px;
  height: 28px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.11) 0 2px,
      transparent 2px 7px
    ),
    linear-gradient(180deg, #14396c, var(--navy));
  border: 1px solid var(--navy-deep);
  border-radius: 2px;
}

.box::after {
  content: '';
  position: absolute;
  right: 3px;
  bottom: 3px;
  left: 3px;
  height: 2px;
  background: var(--red);
}

.box-text {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: #fff;
}

/* The box, the wordmark and the rule all move the same distance over the same interval,
   so the box face stays glued to the panel edge for the whole shove. */
.stage.is-pushing .wordmark,
.stage.is-pushing .trace {
  transition-duration: 1.3s;
  transition-timing-function: cubic-bezier(0.32, 0.1, 0.22, 1);
}

/* Backing out is the push in reverse, and the rule it lays down tracks the box the same
   way the red one tracks the wordmark. */
.stage.is-retracting .train,
.stage.is-retracting .wake {
  transition-duration: 1.3s;
  transition-timing-function: cubic-bezier(0.78, 0, 0.68, 0.9);
}

/* Origin flips so the rule is taken back from the end it was drawn to, and it is only
   ever flipped while the rule is at full length, where the two origins agree. */
.stage.is-erasing .wake {
  transform-origin: left center;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.5, 0, 0.85, 0.4);
}

/* No sliding for anyone who asked for less motion: the motto just gets uncovered. */
.stage.is-static .wordmark {
  opacity: 0;
}

.stage.is-static .train {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .wordmark,
  .trace,
  .wake,
  .train,
  .results {
    transition: none;
  }
}

.rule {
  height: 3px;
  background: var(--red);
}

.sheet-body {
  padding: 22px 34px 26px;
}

.sheet-foot {
  padding: 0 34px 18px;
}

.sheet-foot .rule {
  margin: 0 -34px 14px;
}

.foot-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.sheet-foot h2 {
  margin: 0 0 5px;
}

.sheet-foot p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

.foot-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  gap: 9px;
}

.eva-logo {
  display: block;
  height: 40px;
  width: auto;
  user-select: none;
}

.powered {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.powered strong {
  font-weight: 700;
  color: var(--navy);
}

.powered:hover {
  color: var(--navy);
}

.powered:hover strong {
  color: var(--red);
}

.hr-mark {
  width: 13px;
  height: auto;
  margin-left: 2px;
  color: var(--navy);
}

.powered:hover .hr-mark {
  color: var(--red);
}

/* Type */

h1 {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy);
}

h2 {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.lede {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

/* Status bar */

.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.chips {
  display: flex;
  gap: 7px;
}

.chip {
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 3px;
}

.chip-outline {
  color: var(--red);
  background: #fff;
  border-color: var(--red);
}

/* The Development chip is a button: same face as the chips beside it, plus a pointer. */
.chip-toggle {
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: inherit;
  cursor: pointer;
}

.chip-toggle:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* Inset block (saved testers) */

.block {
  margin-top: 18px;
  padding: 13px 16px 12px;
  background: var(--inset);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  border-radius: 0 0 6px 6px;
}

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

.block-note {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.preset-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.preset-list:empty {
  display: none;
}

.preset {
  display: flex;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-input);
  border-radius: 4px;
}

.preset-use {
  padding: 7px 11px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.preset-use:hover {
  background: #edf3fb;
}

.preset-meta {
  display: block;
  font-weight: 400;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.preset-remove {
  width: 27px;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
  border-left: 1px solid var(--line);
  cursor: pointer;
}

.preset-remove:hover {
  color: var(--red);
  background: #fdf0f2;
}

/* Form */

.form {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.form-label {
  margin-bottom: -6px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field-row-4 {
  grid-template-columns: repeat(4, 1fr);
}

.field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
}

input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 14.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-input);
  border-radius: 5px;
  transition: border-color 0.12s, box-shadow 0.12s;
}

input::placeholder {
  color: #a4b2c4;
}

input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10, 30, 66, 0.12);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Country listbox: the native select popup is OS-drawn and cannot be themed. */

.combo {
  position: relative;
}

.combo-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 14.5px;
  color: var(--text);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line-input);
  border-radius: 5px;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.combo-button:focus-visible,
.combo-button[aria-expanded='true'] {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10, 30, 66, 0.12);
}

.combo-placeholder {
  color: #a4b2c4;
}

.combo-caret {
  flex: none;
  width: 0;
  height: 0;
  border-top: 5px solid var(--navy);
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  transition: transform 0.12s;
}

.combo-button[aria-expanded='true'] .combo-caret {
  transform: rotate(180deg);
}

/* The country list is expected to grow, so it scrolls internally and flips above the
   control when there isn't room below. */
.combo-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  max-height: min(300px, 46vh);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line-input);
  border-top: 2px solid var(--red);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 14px 32px -12px rgba(10, 30, 66, 0.35);
  scrollbar-width: thin;
  scrollbar-color: #c2cfe0 transparent;
}

.combo-list::-webkit-scrollbar {
  width: 10px;
}

.combo-list::-webkit-scrollbar-thumb {
  background: #c9d5e4;
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 999px;
}

.combo-list::-webkit-scrollbar-thumb:hover {
  background: #a9bacf;
  background-clip: content-box;
}

.combo-list.drops-up {
  top: auto;
  bottom: calc(100% + 5px);
  border-top: 1px solid var(--line-input);
  border-bottom: 2px solid var(--red);
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -14px 32px -12px rgba(10, 30, 66, 0.35);
}

.combo-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 13px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  border-left: 3px solid transparent;
}

.combo-option:hover,
.combo-option.is-active {
  background: #eff4fb;
  border-left-color: var(--red);
}

.combo-option[aria-selected='true'] {
  font-weight: 700;
  color: var(--navy);
  background: #e8effa;
}

.combo-option-meta {
  flex: none;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted);
}

.combo-group {
  position: sticky;
  top: 0;
  padding: 9px 13px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--inset);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Planned markets: visible so testers can see the roadmap, but not selectable. */
.combo-option.is-upcoming {
  font-size: 12.5px;
  color: #9fadbf;
  cursor: default;
}

.combo-option.is-upcoming:hover {
  background: none;
  border-left-color: transparent;
}

.combo-option.is-upcoming .combo-option-meta {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #b6c2d1;
}

/* Countries with several candidate voices: the row shows a chevron and opens a second
   column beside it on hover (or tap). Only a voice is selectable, never the bare row. */
.combo-option.has-voices .combo-option-meta::after {
  content: '›';
  margin-left: 8px;
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
}

.combo-option.has-voices[aria-expanded='true'] {
  background: #eff4fb;
  border-left-color: var(--red);
}

.combo-flyout {
  position: absolute;
  z-index: 31;
  min-width: 200px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line-input);
  border-top: 2px solid var(--red);
  border-radius: 0 6px 6px 6px;
  box-shadow: 0 14px 32px -12px rgba(10, 30, 66, 0.35);
}

.combo-flyout.is-overlay {
  border-radius: 0 0 6px 6px;
}

.combo-suboption {
  padding-right: 16px;
}

.hint {
  font-size: 11.5px;
  color: var(--muted);
}

.field-error {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--error);
}

.field-error:empty {
  display: none;
}

.field.has-error .hint {
  display: none;
}

/* Derived summary, mirroring the DEPART / ARRIVEE pair in the emails */

.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0;
  background: var(--inset);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}

.summary > div {
  padding: 12px 18px;
  border-right: 1px solid var(--line);
}

.summary > div:last-child {
  border-right: 0;
}

.summary dt {
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.summary dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  overflow-wrap: anywhere;
}

.summary-email {
  font-size: 13.5px;
  overflow-wrap: normal;
}

/* Call-to-action block */

.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 16px 22px;
  background: var(--navy);
  border-top: 3px solid var(--red);
  border-radius: 0 0 8px 8px;
}

.cta-copy {
  min-width: 0;
}

.cta-label {
  color: #8ea4c4;
}

.cta-title {
  margin: 5px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.cta-note {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #a9bcd6;
}

.cta-actions {
  display: flex;
  align-items: center;
  flex: none;
  gap: 10px;
}

/* Buttons */

.btn {
  padding: 11px 20px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s;
}

a.btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  color: #fff;
  background: var(--red);
}

.btn-primary:hover:not(:disabled) {
  background: var(--red-deep);
}

/* Sits on the navy call-to-action block */
.btn-outline {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.42);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

.btn-block {
  width: 100%;
}

.btn-quiet {
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  background: var(--surface);
  border-color: var(--line-input);
}

.btn-quiet:hover {
  background: var(--inset);
  border-color: var(--navy-mid);
}

.btn-link {
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  background: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-link:hover {
  color: var(--red);
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Notices */

.notice {
  margin: 0;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid;
  border-left-width: 3px;
  border-radius: 4px;
}

.notice-error {
  color: var(--error);
  background: #fdf1f3;
  border-color: #f0c6ce;
  border-left-color: var(--red);
}

.notice-warn {
  color: var(--warn);
  background: #fdf7ea;
  border-color: #ecd9ac;
  border-left-color: #d99a00;
}

.notice-ok {
  color: var(--ok);
  background: #eef8f3;
  border-color: #bfe0d0;
  border-left-color: var(--ok);
}

.notice-ok p {
  margin: 0;
}

/* Results open downwards out of the call-to-action instead of above it, so triggering a
   call never shifts the card the button sits in. The negative margin swallows the form
   gap while this is closed; the matching one inside it is part of what unfolds. */
.results {
  height: 0;
  margin-top: -16px;
  overflow: hidden;
  transition: height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.results .notice {
  margin-top: 16px;
}

.reference {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px !important;
  padding-top: 8px;
  border-top: 1px solid #bfe0d0;
}

.reference-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

.reference code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--navy);
  overflow-wrap: anywhere;
}

/* The login form shouldn't stretch across the full width of the sheet. */
#login-view {
  max-width: 480px;
  margin: 0 auto;
}

@media (max-width: 840px) {
  .field-row-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  body {
    padding: 20px 12px 36px;
  }

  .sheet-head,
  .sheet-body {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sheet-foot {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sheet-foot .rule {
    margin-left: -20px;
    margin-right: -20px;
  }

  .field-row,
  .field-row-4 {
    grid-template-columns: 1fr;
  }

  .cta {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-actions .btn {
    justify-content: center;
    white-space: normal;
  }

  .foot-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}