/* ============================================================================
   Cruise price tracker — light theme.

   A price-intelligence tool first and a travel site second: the palette stays
   calm so that prices, and the direction they moved, are the only things
   competing for attention. Green and coral are reserved exclusively for price
   movement, never for chrome, so a splash of colour always means money.
   ========================================================================= */

:root {
  /* brand */
  --navy:        #092B4C;
  --navy-soft:   #17436c;
  --blue:        #087DBF;
  --blue-dark:   #06699f;
  --blue-wash:   #EAF4FB;
  --aqua:        #26C6C8;
  --aqua-wash:   #E6F8F8;

  /* price movement — these mean one thing and nothing else */
  --down:        #20A66A;   /* price fell: good for the buyer */
  --down-wash:   #E7F6EF;
  --up:          #E9655B;   /* price rose */
  --up-wash:     #FDECEA;
  --gold:        #FFCC5C;
  --gold-wash:   #FFF6E3;

  /* surfaces */
  --bg:          #F5F8FB;
  --surface:     #FFFFFF;
  --surface-alt: #FAFCFE;
  --text:        #152B3C;
  --muted:       #697D8C;
  --border:      #DFE7ED;
  --border-soft: #EDF2F6;

  /* spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(9, 43, 76, .05);
  --shadow:    0 2px 8px rgba(9, 43, 76, .06);
  --shadow-md: 0 6px 20px rgba(9, 43, 76, .08);

  --maxw: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }

/* Inline icons size themselves to the text they sit in. Without a default an
   unsized <svg> expands to fill its container, which turns a 13px calendar
   into a 150px one the moment it appears outside a component that sized it. */
svg { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.125em; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ header */

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s5);
  padding: 0 var(--s5);
  height: 62px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  display: flex; align-items: center; gap: var(--s5);
  width: 100%; max-width: var(--maxw); margin: 0 auto;
}

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 650; font-size: 16.5px; letter-spacing: -.01em;
  color: var(--navy); white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--navy); color: #fff;
}
.brand-mark svg { width: 16px; height: 16px; }

.topbar nav { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }
.topbar nav a {
  padding: 7px 12px; border-radius: var(--r-sm);
  color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.topbar nav a:hover { background: var(--blue-wash); color: var(--navy); text-decoration: none; }
.topbar nav a.on { background: var(--navy); color: #fff; }

.topbar-meta {
  display: flex; align-items: center; gap: var(--s3);
  font-size: 12.5px; color: var(--muted); white-space: nowrap;
}
.icon-link {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--r-sm); color: var(--muted);
}
.icon-link:hover { background: var(--blue-wash); color: var(--navy); }
.icon-link svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------------ layout */

main { max-width: var(--maxw); margin: 0 auto; padding: var(--s5) var(--s5) var(--s8); }

footer {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--s5) var(--s5) var(--s7);
  color: var(--muted); font-size: 12.5px; line-height: 1.6;
  border-top: 1px solid var(--border);
}

.page-head {
  display: flex; align-items: flex-end; gap: var(--s4);
  flex-wrap: wrap; margin-bottom: var(--s5);
}
.spacer { flex: 1 1 auto; }

h1 { font-size: 27px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 var(--s1); }
h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin: var(--s6) 0 var(--s3); }
h3 { font-size: 15px; font-weight: 600; margin: 0 0 var(--s2); }
.sub { color: var(--muted); margin: 0; font-size: 14.5px; }

/* -------------------------------------------------------------------- hero */

.hero {
  background: var(--navy);
  border-radius: var(--r-lg);
  padding: var(--s7) var(--s6);
  margin-bottom: calc(var(--s6) * -1 + 4px);
  color: #fff; text-align: center;
}
.hero h1 { font-size: 34px; color: #fff; margin-bottom: var(--s2); }
.hero p { color: #B7CBDC; font-size: 16px; margin: 0 auto; max-width: 60ch; }
.hero-accent { color: var(--aqua); }

/* ------------------------------------------------------------------ search */

.searchbar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--s4);
  position: relative; z-index: 2;
}
.searchbar .field-row { align-items: flex-end; gap: var(--s3); }
.searchbar label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }

/* ------------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s4) var(--s5);
  box-shadow: var(--shadow-sm);
}
.card.flush { padding: 0; overflow: hidden; }

.grid { display: grid; gap: var(--s3); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stat { padding: var(--s4) var(--s4); }
.stat .label {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; margin-bottom: var(--s1);
}
.stat .value { font-size: 25px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.stat .note { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* cruise card ------------------------------------------------------------ */

.cruise-card {
  display: flex; gap: var(--s5); align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s4) var(--s5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.cruise-card:hover { box-shadow: var(--shadow); border-color: #CFDCE6; }
.cruise-card .meta { min-width: 0; flex: 1 1 auto; }
.cruise-card .ship { font-size: 16px; font-weight: 620; letter-spacing: -.01em; }
.cruise-card .itin { color: var(--text); font-size: 14px; margin-top: 1px; }
.cruise-card .facts {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  color: var(--muted); font-size: 13px; margin-top: 6px;
}
.cruise-card .facts span { display: inline-flex; align-items: center; gap: 5px; }
.facts svg { width: 13px; height: 13px; opacity: .8; }
.cruise-card .money { text-align: right; flex: 0 0 auto; }

/* ------------------------------------------------------------------ prices */

.price {
  font-size: 26px; font-weight: 680; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--navy);
}
.price-sm { font-size: 18px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price-cap { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

.change {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 13.5px; font-weight: 620; font-variant-numeric: tabular-nums;
}
.change svg { width: 12px; height: 12px; }
.change.down, .delta-down { color: var(--down); }
.change.up, .delta-up { color: var(--up); }
.change.flat { color: var(--muted); font-weight: 500; }

/* ------------------------------------------------------------------ badges */

.pill, .badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--border-soft); color: var(--muted);
}
.pill.accent, .badge.accent { background: var(--aqua-wash); color: #0d7f80; }
.pill.good,  .badge.good    { background: var(--down-wash); color: var(--down); }
.pill.bad,   .badge.bad     { background: var(--up-wash);   color: var(--up); }
.pill.warn,  .badge.warn    { background: var(--gold-wash); color: #8a6410; }
.pill.info,  .badge.info    { background: var(--blue-wash); color: var(--blue-dark); }
.pill.flat { background: var(--border-soft); color: var(--muted); }

/* deal ratings — restrained, and only shown when history justifies them */
.deal-great   { background: var(--down-wash); color: var(--down); }
.deal-good    { background: var(--blue-wash); color: var(--blue-dark); }
.deal-average { background: var(--border-soft); color: var(--muted); }
.deal-high    { background: var(--up-wash); color: var(--up); }

/* ------------------------------------------------------------------ tables */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); font-weight: 600;
  padding: var(--s3) var(--s3) var(--s2) 0;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
td {
  padding: var(--s3) var(--s3) var(--s3) 0;
  border-bottom: 1px solid var(--border-soft); vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-alt); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num:last-child, th.num:last-child { padding-right: 0; }
.card.flush table th:first-child, .card.flush table td:first-child { padding-left: var(--s5); }
.card.flush table th:last-child,  .card.flush table td:last-child  { padding-right: var(--s5); }
.table-wrap { overflow-x: auto; }

.item-name { font-weight: 600; color: var(--navy); }
.item-sub { color: var(--muted); font-size: 12.5px; }

/* ------------------------------------------------------------------- forms */

label {
  display: block; font-size: 12.5px; font-weight: 550;
  color: var(--muted); margin-bottom: 5px;
}
input[type=text], input[type=date], input[type=number], input[type=email],
input[type=password], select, textarea {
  width: 100%; padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text); font: inherit; font-size: 14.5px;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23697D8C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  background-size: 12px; padding-right: 30px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(8, 125, 191, .13);
}
input::placeholder { color: #A6B4C0; }
.field-row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end; }
.field-row > div { flex: 1 1 165px; min-width: 0; }
.checkline { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text); }
.checkline input { width: auto; }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r-sm);
  background: var(--blue); color: #fff;
  border: 1px solid var(--blue);
  font: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); text-decoration: none; }
.btn svg { width: 15px; height: 15px; }
.btn.navy { background: var(--navy); border-color: var(--navy); }
.btn.navy:hover { background: var(--navy-soft); border-color: var(--navy-soft); }
.btn.ghost {
  background: var(--surface); color: var(--text); border-color: var(--border);
}
.btn.ghost:hover { background: var(--surface-alt); border-color: #CFDCE6; }
.btn.save { background: var(--down); border-color: var(--down); }
.btn.save:hover { background: #1b8f5b; border-color: #1b8f5b; }
.btn.danger { background: var(--surface); color: var(--up); border-color: #F3C7C3; }
.btn.danger:hover { background: var(--up-wash); }
.btn.small { padding: 6px 11px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* sort / filter chips */
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip {
  padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); font-size: 13px; font-weight: 550;
}
.chip:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ----------------------------------------------------------------- notices */

.notice {
  background: var(--blue-wash); border: 1px solid #CCE4F3;
  border-radius: var(--r-md); padding: var(--s3) var(--s4);
  font-size: 14px; color: #10537d; margin-bottom: var(--s4);
}
.notice.warn { background: var(--gold-wash); border-color: #F6E2B4; color: #7d5a0e; }
.notice.bad  { background: var(--up-wash);   border-color: #F5CDC9; color: #A63A31; }
.notice code { background: rgba(9,43,76,.07); padding: 1px 5px; border-radius: 4px; font-size: 13px; }

.empty {
  padding: var(--s7) var(--s4); text-align: center;
  color: var(--muted); font-size: 14.5px; line-height: 1.7;
}

/* ------------------------------------------------------------------- chart */

.chart-shell { position: relative; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .band { fill: var(--blue-wash); }
.chart .line { fill: none; stroke: var(--blue); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart .axis { stroke: var(--border); stroke-width: 1; }
.chart .grid-line { stroke: var(--border-soft); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 11px; }
.chart .marker { fill: var(--surface); stroke: var(--blue); stroke-width: 2.5; }
.chart .target-line { stroke: var(--down); stroke-dasharray: 4 4; stroke-width: 1.5; }
.chart .low-line { stroke: var(--aqua); stroke-dasharray: 3 4; stroke-width: 1.5; }

.chart-tip {
  position: absolute; pointer-events: none; opacity: 0;
  transform: translate(-50%, -120%);
  background: var(--navy); color: #fff;
  padding: 7px 10px; border-radius: var(--r-sm);
  font-size: 12.5px; line-height: 1.45; white-space: nowrap;
  box-shadow: var(--shadow-md); transition: opacity .1s ease;
}
.chart-tip strong { font-variant-numeric: tabular-nums; }

.legend { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: var(--s3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.band-key { width: 11px; height: 11px; border-radius: 3px; background: var(--blue-wash); display: inline-block; }
.days { display: flex; gap: var(--s2); }

/* ------------------------------------------------------------------- login */

.login-wrap { max-width: 360px; margin: 14vh auto; }

/* --------------------------------------------------------------- utilities */

.muted { color: var(--muted); }
.right { text-align: right; }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.stack { display: grid; gap: var(--s3); }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }
.small { font-size: 13px; }
.inline { display: inline; }
.quiet { color: var(--muted); }
.accent { color: var(--aqua); }
.up { color: var(--up); }
.down { color: var(--down); }
.good { color: var(--down); }
.bad { color: var(--up); }
.low { color: var(--aqua); }
hr { border: none; border-top: 1px solid var(--border); margin: var(--s5) 0; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding: var(--s6) var(--s4); }
  .hero h1 { font-size: 27px; }
}

@media (max-width: 720px) {
  .topbar { height: auto; padding: var(--s2) var(--s4); }
  .topbar-inner { flex-wrap: wrap; gap: var(--s2); }
  .topbar nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 2px; margin-left: 0; }
  .topbar-meta { margin-left: auto; }
  main { padding: var(--s4) var(--s4) var(--s7); }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 23px; }
  .hero h1 { font-size: 24px; }
  .hero p { font-size: 14.5px; }

  /* A price comparison is only useful side by side, so the table keeps every
     cabin column and scrolls. Pinning the first column means you can still see
     which sailing you are reading once you have scrolled to Suite. */
  .card.flush table th:first-child,
  .card.flush table td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border-soft);
  }
  .card.flush table tbody tr:hover td:first-child { background: var(--surface-alt); }

  /* Prices must stay legible when a card stacks. */
  .cruise-card { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .cruise-card .money { text-align: left; display: flex; align-items: baseline; gap: var(--s3); }
  .field-row > div { flex: 1 1 100%; }
}


/* ------------------------------------------------------- password rules */

.pw-rules {
  list-style: none; margin: var(--s2) 0 0; padding: 0;
  display: grid; gap: 5px; font-size: 13px; color: var(--muted);
}
.pw-rules li { display: flex; align-items: center; gap: 8px; }
.pw-tick {
  width: 15px; height: 15px; border-radius: 4px; flex: 0 0 auto;
  border: 1.5px solid var(--border); background: var(--surface);
  position: relative; transition: background .12s ease, border-color .12s ease;
}
/* Green here is the one exception to "colour means price": a satisfied rule
   is the same kind of signal, and a tick that stayed grey would be useless. */
.pw-rules li.ok { color: var(--down); }
.pw-rules li.ok .pw-tick { background: var(--down); border-color: var(--down); }
.pw-rules li.ok .pw-tick::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}


/* ------------------------------------------------------- mini bar charts */

.minibars { display: flex; align-items: flex-end; gap: 3px; width: 100%; }
.minibar { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.minibar-fill {
  width: 100%; border-radius: 2px 2px 0 0; min-height: 2px;
  background: var(--blue); transition: opacity .12s ease;
}
.minibar:hover .minibar-fill { opacity: .75; }
.axis-row {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted); margin-top: 5px;
}