:root {
  color-scheme: light;
  --navy: #133b6d;
  --navy-soft: #28527f;
  --muted: #5c6c7c;
  --grid: #c6d0db;
  --day-rule: #e0e7ee;
  --header-fill: #eef2f6;
  --unavailable: #a5acb3;
  --unavailable-index: #b7bdc3;
  --ink: #1f2937;
  --ink-soft: #5b6470;
  --weekend-wash: rgba(245, 179, 0, 0.26);
  --weekend-hatch: rgba(180, 83, 9, 0.22);
  --today: #c62828;
  --miami: #3e8b5b;
  --tampa: #3266cc;
  --canaveral: #d6a21e;
  --jacksonville: #c44747;
  --other-port: #758595;
  --sold-out-bar: #737d88;
  --my-rate: #16a34a;
  --ship-paradise: #c9ddf8;
  --ship-freedom: #fff1b8;
  --ship-glory: #ffe08a;
  --ship-elation: #f3b8b8;
  --ship-conquest: #b8e0c5;
  --ship-sunrise: #c8ebd2;
  --ship-magic: #a9d9b7;
  --ship-horizon: #83c79a;
  --ship-mardi-gras: #f2c866;
  --ship-celebration: #ddf1c7;
  --ship-vista: #e9b94f;
  --ship-row: #dde3ea;
  --timeline-col: 24px;
  --marker-line: #1d6fb8;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #eef1f4;
  color: #15395f;
}

button,
input,
select,
textarea { font: inherit; }

button:focus-visible,
a:focus-visible,
.table-scroll:focus-visible {
  outline: 3px solid #1d6fb8;
  outline-offset: 2px;
}

/* A visible gutter on both sides at any viewport width, capped so the sheet doesn't
   stretch edge-to-edge on very wide monitors, while still using most of the screen. */
.availability-report {
  width: min(1780px, calc(100% - 48px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 24px 30px 46px;
  background: #fff;
  box-shadow: 0 0 24px rgba(16, 47, 87, 0.08);
}

h1,
h2,
p { margin-top: 0; }

.report-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 9px;
  border-bottom: 1px solid #aeb9c4;
}

h1 {
  margin-bottom: 4px;
  color: var(--navy);
  font-size: clamp(1.5rem, 2.15vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.report-subtitle,
.section-heading p,
.report-note {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.25;
}

.report-subtitle { margin-bottom: 0; }

.refresh-form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
  gap: 4px;
}

.refresh-form button {
  border: 1px solid #173e67;
  border-radius: 2px;
  padding: 7px 11px;
  background: var(--navy);
  color: #fff;
  font-size: 0.67rem;
  font-weight: 700;
  cursor: pointer;
}

.refresh-form button:hover { background: var(--navy-soft); }
.refresh-form button:disabled { cursor: wait; opacity: 0.65; }

.check-controls,
.vifp-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.check-label {
  color: var(--muted);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.month-picker {
  border: 1px solid var(--grid);
  border-radius: 2px;
  padding: 6px 5px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.62rem;
}

.month-picker:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}

.vifp-optin {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 0.58rem;
  cursor: pointer;
}

/* The personalized check is secondary to the public one in weight as well as in order:
   it is the only control that can send the account number anywhere. */
.refresh-form button.vifp-check-btn {
  padding: 5px 8px;
  border-color: var(--grid);
  background: #fff;
  color: var(--navy);
  font-size: 0.58rem;
}

.refresh-form button.vifp-check-btn:hover { background: var(--header-fill); }
.refresh-form button.vifp-check-btn:disabled { cursor: not-allowed; opacity: 0.5; }

.refresh-timestamp {
  color: var(--muted);
  font-size: 0.58rem;
}

.refresh-announcement {
  min-height: 1em;
  color: var(--muted);
  font-size: 0.57rem;
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 14px 0 20px;
  border: 1px solid var(--grid);
}

.summary-cell {
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7px 10px;
  text-align: center;
  background: #f4f7fa;
  border-right: 1px solid var(--grid);
}

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

.summary-value {
  color: var(--navy);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1;
}

.summary-label {
  margin-top: 5px;
  color: #426082;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.refresh-state { font-size: 0.84rem; letter-spacing: 0.04em; }
.refresh-state-failed { color: #a42626; }

.report-section { break-inside: avoid; }

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 5px;
}

.section-heading h2 {
  margin-bottom: 2px;
  color: var(--navy);
  font-size: 0.83rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.section-heading p { margin-bottom: 0; }

.source-note {
  margin: 0 0 2px;
  color: #506a83;
  font-size: 0.55rem;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.table-scroll {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

th,
td {
  border-right: 1px solid var(--grid);
  border-bottom: 1px solid var(--grid);
}

tr:last-child > * { border-bottom: 0; }
tr > *:last-child { border-right: 0; }

/* Metadata columns are fixed and compact; the date grid takes every remaining pixel. */
.overlap-table {
  width: 100%;
  min-width: 1280px;
  table-layout: fixed;
  border: 1px solid var(--grid);
  font-size: 0.78rem;
}

.row-number-column { width: 30px; }
.from-column { width: 74px; }
.ship-column { width: 112px; }
.dates-column { width: 76px; }
.nights-column { width: 40px; }
.status-column { width: 118px; }

.overlap-table thead th {
  position: relative;
  height: 34px;
  padding: 2px 3px;
  background: #eef2f6;
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  vertical-align: middle;
}

/* Source column headers sit flush left over the left block. */
.overlap-table thead th.from-column,
.overlap-table thead th.ship-column,
.overlap-table thead th.dates-column { text-align: left; padding-left: 5px; }

.overlap-table thead th.row-number-column,
.overlap-table thead th.nights-column { font-size: 0.6rem; padding-inline: 1px; }
.row-number-cell {
  padding-inline: 1px !important;
  color: var(--ink-soft);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.overlap-table tbody tr { height: 20px; }

.overlap-table tbody th,
.overlap-table tbody td:not(.timeline-track) {
  overflow: hidden;
  padding: 1px 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The source sets its left block in regular weight, flush left; only status words are bold. */
.from-cell { font-weight: 400; text-align: left; }
.ship-cell { font-weight: 400; text-align: left; }
.dates-cell { text-align: left; }
.nights-cell,
.status-cell { text-align: center; }
.status-cell { font-weight: 400; font-size: 0.6rem; letter-spacing: -0.01em; }

/* Red = sold out, green = listed for the first time, purple = came back after being
   sold out. !important is deliberate: the ambient per-row ship/gray background rules
   below (tr.status-available > :not(.timeline-track), etc.) have higher specificity
   (0,3,2) than any plain class combination on this one cell, and this cell must always
   show its own state color regardless of the row's ship or availability styling. */
.status-cell.state-out { background: #d1495b !important; color: #fff !important; }
.status-cell.state-in { background: #1f9d55 !important; color: #fff !important; }
.status-cell.state-returned { background: #7c3aed !important; color: #fff !important; }

/* A sailing whose public state changed since the previous refresh gets a neon-pink
   outline around the whole row (not just the status cell) so it reads at a glance. */
tr[data-sailing-row].row-changed {
  outline: 3px solid #ff10f0;
  outline-offset: -3px;
}

.status-cell[role="button"] {
  cursor: pointer;
}

.status-cell[role="button"]:hover {
  box-shadow: inset 0 0 0 2px var(--navy, #133b6d);
}

.status-cell[role="button"]:focus-visible {
  outline: 2px solid var(--navy, #133b6d);
  outline-offset: 1px;
}

.status-cell.state-out .flip-badge,
.status-cell.state-in .flip-badge,
.status-cell.state-returned .flip-badge {
  background: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
}

/* "Public" means no personalized rate exists for this sailing: a deliberate prompt to
   go look the price up manually, not a number to trust as-is. */
.from-cell.is-public-only {
  color: #a15c00;
  font-style: italic;
  font-weight: 700;
}

/* Sailings that keep switching between listed and sold out carry a count. It must read
   as a separate token, not run into the date beside it. */
.flip-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 7px;
  background: rgba(19, 59, 109, 0.14);
  color: var(--navy);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: 1px;
}

.status-unavailable .flip-badge,
.status-sold_out .flip-badge { background: rgba(255, 255, 255, 0.34); color: #fff; }

.status-unavailable .from-cell,
.status-sold_out .from-cell,
.status-unavailable .status-cell,
.status-sold_out .status-cell { font-weight: 700; }

/* Status words are longer than a price and must not ellipsize in the From column. */
.status-unavailable .from-cell,
.status-sold_out .from-cell {
  font-size: 0.62rem;
  letter-spacing: -0.01em;
}

.date-column { position: relative; }

/* The source report keeps its date header clean; caution shading starts below it. */
.date-column.is-weekend { background: var(--header-fill); }

.date-label {
  display: block;
  color: var(--ink-soft);
  font-size: 0.66rem;
  font-weight: 400;
  line-height: 1.1;
  white-space: nowrap;
}

.date-dow {
  display: block;
  color: #5c6c7c;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.date-column.is-weekend .date-dow { color: #9a7430; font-weight: 700; }

.date-column.is-cutoff::after,
.timeline-day.is-cutoff::after {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: -1px;
  left: 0;
  width: 2px;
  background: var(--today);
  content: "";
  pointer-events: none;
}

/* Fixed owner-requested reference lines, distinct from the departure-month cutoff:
   drawn through the center of the marked day rather than on a column boundary. */
.date-column.is-marker::after,
.timeline-day.is-marker::after {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: -1px;
  left: 50%;
  width: 2px;
  background: var(--marker-line);
  content: "";
  pointer-events: none;
  transform: translateX(-1px);
}

.timeline-day.is-marker::after { bottom: 0; }

.timeline-track { height: 20px; padding: 0; }

/* The track's own right border makes 100% a pixel narrower than the header columns it
   spans, so the grid is widened by exactly that border to stay on the date scale. */
.timeline-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--timeline-days), minmax(0, 1fr));
  width: calc(100% + 1px);
  /* Collapsed borders are split between neighbours, so the track's content starts half a
     pixel in from the header column it must line up with. */
  margin-left: -0.5px;
  height: 100%;
}

.timeline-day {
  position: relative;
  grid-row: 1;
  border-right: 1px solid var(--day-rule);
}

.timeline-day:last-of-type { border-right: 0; }

/* Source caution weekend: a soft amber wash under sparse hatching, not a heavy fill. */
.timeline-day.is-weekend {
  background-image:
    repeating-linear-gradient(135deg, var(--weekend-hatch) 0 1px, transparent 1px 7px),
    linear-gradient(var(--weekend-wash), var(--weekend-wash));
}

.timeline-day.is-cutoff::after { bottom: 0; }

.sailing-bar {
  z-index: 2;
  align-self: center;
  grid-column: var(--bar-start) / span var(--bar-span);
  grid-row: 1;
  height: 11px;
  margin-inline: 1px;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
}

.port-miami { background-color: var(--miami); }
.port-tampa { background-color: var(--tampa); }
.port-canaveral { background-color: var(--canaveral); }
.port-jacksonville { background-color: var(--jacksonville); }
.port-other { background-color: var(--other-port); }
.port-soldout { background-color: var(--sold-out-bar); }

.ship-celebration { --ship-row: var(--ship-celebration); }
.ship-conquest { --ship-row: var(--ship-conquest); }
.ship-elation { --ship-row: var(--ship-elation); }
.ship-freedom { --ship-row: var(--ship-freedom); }
.ship-glory { --ship-row: var(--ship-glory); }
.ship-horizon { --ship-row: var(--ship-horizon); }
.ship-magic { --ship-row: var(--ship-magic); }
.ship-mardi-gras { --ship-row: var(--ship-mardi-gras); }
.ship-paradise { --ship-row: var(--ship-paradise); }
.ship-sunrise { --ship-row: var(--ship-sunrise); }
.ship-vista { --ship-row: var(--ship-vista); }

.overlap-table tbody tr.status-available > :not(.timeline-track),
.overlap-table tbody tr.status-available .timeline-track,
.overlap-table tbody tr.status-available .timeline-grid {
  background-color: var(--ship-row);
}

.overlap-table tbody tr.status-unavailable > *,
.overlap-table tbody tr.status-sold_out > *,
.overlap-table tbody tr.status-unavailable .timeline-grid,
.overlap-table tbody tr.status-sold_out .timeline-grid {
  background-color: var(--unavailable);
  color: #fff;
}

/* Sold-out bars stay visible in one flat gray, above the caution wash so it cannot tint them. */
.status-unavailable .sailing-bar,
.status-sold_out .sailing-bar { z-index: 3; opacity: 0.55; }

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 25px;
  margin-top: 8px;
  color: #4b6178;
  font-size: 0.58rem;
}

.legend > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.legend-swatch,
.legend-line {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(16, 47, 87, 0.18);
}

/* Rows priced from the personalized account are marked so the source of a rate is
   never ambiguous against the public one. */
.from-cell.is-my-rate,
.rate-cell.is-my-rate {
  position: relative;
  color: #12603a;
  font-weight: 700;
}

.rate-public { color: var(--ink-soft); }
.my-rate-key { background: var(--my-rate); }

.legend-line { width: 2px; border: 0; background: var(--today); }
.legend-line.marker-key { background: var(--marker-line); }
.weekend-key { background: #f5b300; }
.unavailable-key { background: var(--unavailable); }

.report-note {
  margin: 6px 0 0;
  font-size: 0.57rem;
}

.index-section {
  margin-top: 28px;
  padding-top: 7px;
  border-top: 1px solid #ccd6df;
}

.index-running-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  color: #4f6680;
  font-size: 0.55rem;
}

.index-heading { margin-bottom: 4px; }

.ship-key {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  width: 100%;
  margin: 6px 0;
  border: 1px solid var(--grid);
}

.ship-key-item {
  min-width: 0;
  padding: 4px 3px;
  border-right: 1px solid var(--grid);
  color: #173b60;
  font-size: 0.68rem;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
}

.ship-key-item:last-child { border-right: 0; }
.ship-key-item.ship-celebration { background: var(--ship-celebration); }
.ship-key-item.ship-conquest { background: var(--ship-conquest); }
.ship-key-item.ship-elation { background: var(--ship-elation); }
.ship-key-item.ship-freedom { background: var(--ship-freedom); }
.ship-key-item.ship-glory { background: var(--ship-glory); }
.ship-key-item.ship-horizon { background: var(--ship-horizon); }
.ship-key-item.ship-magic { background: var(--ship-magic); }
.ship-key-item.ship-mardi-gras { background: var(--ship-mardi-gras); }
.ship-key-item.ship-paradise { background: var(--ship-paradise); }
.ship-key-item.ship-sunrise { background: var(--ship-sunrise); }
.ship-key-item.ship-vista { background: var(--ship-vista); }

.index-table {
  width: 100%;
  min-width: 1280px;
  table-layout: fixed;
  border: 1px solid var(--grid);
  font-size: 0.78rem;
}

.index-table thead th {
  padding: 4px 5px;
  background: var(--header-fill);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: left;
}

/* Row height comes from padding, not a fixed value, so a wrapped itinerary cannot clip. */
.index-table tbody th,
.index-table tbody td {
  overflow: hidden;
  padding: 6px 5px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.index-table th:nth-child(1), .index-table td:nth-child(1) { width: 34px; text-align: center; }
.index-table th:nth-child(2), .index-table td:nth-child(2) { width: 116px; }
.index-table th:nth-child(3), .index-table td:nth-child(3) { width: 118px; }
.index-table th:nth-child(4), .index-table td:nth-child(4) { width: 125px; }
.index-table th:nth-child(5), .index-table td:nth-child(5) { width: 112px; }
.index-table th:nth-child(6), .index-table td:nth-child(6) { width: 88px; text-align: right; }
.index-table th:nth-child(7), .index-table td:nth-child(7) { width: 88px; text-align: right; }
/* Sized for the longest real transition label ("Became unavailable Aug 5, 2026"), not just the fixture. */
.index-table th:nth-child(8), .index-table td:nth-child(8) { width: 250px; }
/* Carnival's own itinerary titles run long; wrap here instead of clipping real product copy. */
.index-table th:nth-child(9), .index-table td:nth-child(9) {
  width: auto;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

.index-table tbody tr.status-available .index-ship-cell { background: var(--ship-row); }

/* The index page uses a lighter gray with dark text than the overlap grid. */
.index-table tbody tr.status-unavailable > *,
.index-table tbody tr.status-sold_out > * {
  background: var(--unavailable-index);
  color: #1d3552;
}

.index-status { font-weight: 800; }

.empty-row {
  padding: 20px !important;
  background: #f5f7f8;
  color: var(--muted);
  text-align: center !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  .availability-report { padding: 18px 14px 36px; }
  .report-header { align-items: stretch; flex-direction: column; gap: 12px; }
  .refresh-form { align-items: flex-start; }
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-cell { min-height: 56px; border-bottom: 1px solid var(--grid); }
  .summary-cell:nth-child(2n) { border-right: 0; }
  .summary-cell:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .source-note { text-align: left; white-space: normal; }
  .legend { gap: 6px 12px; }
  .index-running-header { display: none; }
}

@media print {
  body { background: #fff; }
  .availability-report { width: 100%; padding: 0; box-shadow: none; }
  .refresh-form { display: none; }
}