/* ============================================================
   SCE App — light theme
   Matches the printed daily program: white card stock, colored
   category bands, Red/Blue seating cards.

   Constraints that drove this:
   1. Read on a phone by guests aged 50-70, often at arm's length.
      Nothing below 17px. Generous tap targets.
   2. NO external font CDN — a Google Fonts link needs its own
      whitelist entry and would fall back to system faces at sea.
      System stack only.
   3. Seating color OVERRIDES category color. If you're in Red
      seating, finding your show beats knowing its genre.
   ============================================================ */

:root {
  --paper:      #FFFFFF;
  --paper-2:    #F6F5F2;   /* page ground, slightly warm */
  --rule:       #DFDCD6;   /* hairlines */
  --ink:        #14161A;   /* primary text */
  --ink-2:      #5C6470;   /* secondary text */
  --ink-3:      #8A929E;   /* tertiary / disabled */

  /* Category colors — from the printed program */
  --enjoy:       #07DA00;
  --in-concert:  #000000;
  --learn:       #F3895B;
  --information: #E0E0E0;
  --red-card:    #FF3E3E;
  --blue-card:   #2900F3;

  --accent:     #2900F3;   /* interactive elements */

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rail: 66px;
  --tap: 48px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.45;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Header ---------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
}
.topbar h1 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }
.topbar .sub {
  margin-top: 2px; font-size: 12.5px; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.09em;
}

/* ---------- Day tabs ---------- */

.days {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 12px 16px; scrollbar-width: none;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.days::-webkit-scrollbar { display: none; }

.day {
  flex: 0 0 auto; min-width: 58px; min-height: var(--tap);
  padding: 7px 13px;
  border: 1px solid var(--rule); border-radius: 10px;
  text-align: center; background: var(--paper);
}
.day .n { display: block; font-size: 17px; font-weight: 650; }
.day .d { display: block; font-size: 12px; color: var(--ink-2); }
.day[aria-current="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.day[aria-current="true"] .d { color: rgba(255,255,255,.7); }

/* ---------- Theme banner ---------- */

.theme {
  padding: 11px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font-size: 14.5px; color: var(--ink-2);
}
.theme strong {
  color: var(--ink); font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.07em;
  font-size: 12.5px; margin-right: 7px;
}

/* ---------- Time rail ---------- */

.rail { position: relative; padding: 6px 16px 32px; }

.rail::before {
  content: ""; position: absolute;
  left: calc(16px + var(--rail) - 13px);
  top: 0; bottom: 32px; width: 1px; background: var(--rule);
}

.slot {
  position: relative; display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: 12px; padding: 9px 0; min-height: var(--tap);
}

.slot .time {
  text-align: right; padding-right: 14px;
  font-size: 19px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  color: var(--ink);
}
.slot .time .ampm {
  display: block; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--ink-3);
}

.slot::after {
  content: ""; position: absolute;
  left: calc(var(--rail) - 17px); top: 19px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper-2); border: 2px solid var(--rule);
}
.slot[data-live="true"]::after {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 5px rgba(41,0,243,.15);
}

/* ---------- The card ----------
   The colored edge is the whole signal: a 5px band on the left,
   exactly like the stripe down the printed cards. */

.slot .card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--information);
  border-radius: 8px;
  padding: 11px 13px;
}

.slot[data-cat="enjoy"]       .card { border-left-color: var(--enjoy); }
.slot[data-cat="in_concert"]  .card { border-left-color: var(--in-concert); }
.slot[data-cat="learn"]       .card { border-left-color: var(--learn); }
.slot[data-cat="information"] .card { border-left-color: var(--information); }

/* Seating overrides category — this is the point of the rotation */
.slot[data-seat="red"]  .card { border-left-color: var(--red-card); }
.slot[data-seat="blue"] .card { border-left-color: var(--blue-card); }

.slot .title { font-size: 17.5px; font-weight: 620; letter-spacing: -0.01em; }
.slot .performers { margin-top: 2px; font-size: 14.5px; color: var(--ink); font-weight: 500; }
.slot .meta { margin-top: 2px; font-size: 14px; color: var(--ink-2); }

.slot[data-cancelled="true"] .title {
  text-decoration: line-through; color: var(--ink-3);
}

/* ---------- Seating badge ---------- */

.seat {
  display: inline-block; margin-top: 7px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: #fff;
}
.seat[data-seat="red"]  { background: var(--red-card); }
.seat[data-seat="blue"] { background: var(--blue-card); }

.tag {
  display: inline-block; margin-top: 7px; margin-right: 6px;
  padding: 2px 9px; border: 1px solid var(--rule); border-radius: 999px;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-2);
}

/* ---------- Legend ---------- */

.legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  padding: 11px 16px;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  font-size: 12.5px; color: var(--ink-2);
}
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i {
  width: 11px; height: 11px; border-radius: 3px;
  border: 1px solid rgba(0,0,0,.14);
}

/* ---------- Bottom nav ---------- */

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--paper); border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav a {
  min-height: 60px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  font-size: 12px; letter-spacing: 0.03em; color: var(--ink-2);
}
.nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.nav .glyph { font-size: 19px; line-height: 1; }

/* ---------- Page furniture ---------- */

.wrap { padding: 20px 16px 32px; }

.empty {
  margin: 40px 16px; padding: 26px 22px;
  border: 1px dashed var(--rule); border-radius: 12px;
  text-align: center; color: var(--ink-2); background: var(--paper);
}
.empty strong { display: block; color: var(--ink); margin-bottom: 6px; }

/* display:block is load-bearing. These are often <a> elements wrapping
   <div> children. An inline element containing block children makes the
   browser fragment its background into pieces that paint in the wrong
   place, which showed up as stray white rectangles down the left edge. */
.card-block {
  display: block;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 12px; padding: 16px; margin-bottom: 12px;
}

label { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }

input[type="text"] {
  width: 100%; min-height: var(--tap); padding: 12px 14px;
  font-size: 19px; font-family: var(--sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 10px; color: var(--ink);
}

button {
  width: 100%; min-height: var(--tap); margin-top: 14px; padding: 13px;
  font-family: var(--sans); font-size: 17px; font-weight: 650;
  background: var(--accent); color: #fff; border: none; border-radius: 10px;
}

.error {
  margin-top: 12px; padding: 11px 14px; border-radius: 10px; font-size: 15px;
  background: #FDECEC; border: 1px solid #F5B5B5; color: #8A1F1F;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Artists ---------- */

.card-block.artist { display: flex; gap: 13px; align-items: center; }
.card-block.artist img {
  width: 58px; height: 58px; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto; background: var(--paper-2);
}
.artist-name { font-size: 17.5px; font-weight: 620; }
.artist-teaser { font-size: 14px; color: var(--ink-2); margin-top: 2px; }

.artist-hero {
  width: 100%; max-width: 260px; aspect-ratio: 1; object-fit: cover;
  border-radius: 12px; display: block; margin: 0 auto 16px;
}

/* Sched bios keep bold, italics and breaks; their fonts are stripped
   on import so the text inherits ours. */
.bio { font-size: 16px; line-height: 1.55; }
.bio strong { font-weight: 650; }

h2.sect {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-2); margin: 22px 0 8px;
}

/* ============================================================
   Cruise picker
   Row-per-sailing with the porthole logo, matching the way
   guests already recognise these programs from the website.
   ============================================================ */

.cruise-list { padding-bottom: 20px; }

.group-label {
  padding: 14px 16px 7px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-2); background: var(--paper-2);
}

.cruise-row-form { margin: 0; }

.cruise-row {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; margin: 0;
  background: var(--paper); border: none;
  border-bottom: 1px solid var(--rule);
  text-align: left; font: inherit; color: inherit;
  min-height: 82px; cursor: pointer; border-radius: 0;
}
.cruise-row:active { background: var(--paper-2); }

.cruise-row img,
.cruise-row .logo-fallback {
  width: 62px; height: 62px; border-radius: 12px;
  flex: 0 0 auto; object-fit: cover; background: var(--paper-2);
}
.cruise-row .logo-fallback {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; color: var(--ink-2);
  border: 1px solid var(--rule);
}

.cruise-meta { flex: 1 1 auto; min-width: 0; }
.cruise-name {
  display: block; font-size: 17.5px; font-weight: 620;
  letter-spacing: -0.01em; line-height: 1.25;
}
.cruise-dates {
  display: block; margin-top: 3px;
  font-size: 14.5px; color: var(--ink-2);
}

.cruise-row .chev {
  flex: 0 0 auto; font-size: 22px; color: var(--ink-3); line-height: 1;
}

/* Locked and past sailings stay legible — dimmed, never hidden.
   Guests should see their cruise exists before it opens. */
.cruise-row.locked img,
.cruise-row.locked .logo-fallback { opacity: .45; }
.cruise-row.locked .cruise-name { color: var(--ink-2); }
.cruise-row.locked .chev { font-size: 15px; }
.cruise-row.past img { opacity: .6; }

/* ---------- Bottom sheet ---------- */

.sheet-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10,14,20,.42);
}

.sheet {
  position: fixed; z-index: 91;
  left: 0; right: 0; bottom: 0;
  background: var(--paper);
  border-radius: 18px 18px 0 0;
  padding: 24px 22px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 34px rgba(0,0,0,.2);
}
.sheet h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.01em; }
.sheet p { margin: 0 0 6px; font-size: 16px; line-height: 1.5; }
.sheet .sheet-sub { color: var(--ink-2); font-size: 14.5px; margin-bottom: 18px; }

.btn-primary {
  width: 100%; min-height: var(--tap); padding: 13px;
  font-family: var(--sans); font-size: 17px; font-weight: 650;
  background: var(--accent); color: #fff;
  border: none; border-radius: 10px; cursor: pointer;
}

@media (min-width: 560px) {
  .sheet {
    left: 50%; bottom: 50%; right: auto;
    transform: translate(-50%, 50%);
    width: 420px; border-radius: 16px;
  }
}

/* ============================================================
   Account, notifications, chat
   ============================================================ */

.nav.nav-4 { grid-template-columns: repeat(4, 1fr); }
.nav a { position: relative; }

.badge {
  position: absolute; top: 8px; right: 50%; transform: translateX(20px);
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--red-card); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.badge.inline { position: static; transform: none; margin-left: auto; }

.toast {
  padding: 12px 16px; background: #E8F4EA;
  border-bottom: 1px solid #BFDCC6; font-size: 15px; color: #1E4527;
}

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

.profile {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 0 20px;
}
.avatar {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 650; flex: 0 0 auto;
}
.avatar.anon { background: var(--rule); color: var(--ink-2); font-size: 27px; }
.profile-name { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }
.profile-sub { font-size: 14.5px; color: var(--ink-2); margin-top: 2px; }

/* ---------- Settings rows ---------- */

.rows {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 12px; overflow: hidden; margin-bottom: 22px;
}
.row {
  width: 100%; display: flex; align-items: center; gap: 13px;
  padding: 14px 15px; min-height: 56px;
  background: var(--paper); border: none;
  border-bottom: 1px solid var(--rule);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.rows .row:last-child { border-bottom: none; }
.row:active { background: var(--paper-2); }
.row[disabled] { opacity: .6; cursor: default; }
.row-ic { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.row-label { flex: 1 1 auto; font-size: 16.5px; }
.row-chev { color: var(--ink-3); font-size: 20px; line-height: 1; }

.btn-quiet {
  width: 100%; min-height: var(--tap); padding: 13px;
  font-family: var(--sans); font-size: 16.5px; font-weight: 600;
  background: var(--paper); color: var(--red-card);
  border: 1px solid var(--rule); border-radius: 10px; cursor: pointer;
}

.note { font-size: 14.5px; color: var(--ink-2); margin: 0 0 12px; }
.hint { text-transform: none; letter-spacing: 0; color: var(--ink-3); }

.card-block label { margin-top: 14px; }
.card-block label:first-child { margin-top: 0; }
.card-block input[type="text"],
.card-block input[type="email"],
.card-block input[type="password"] {
  width: 100%; min-height: var(--tap); padding: 12px 14px;
  font-size: 17px; font-family: var(--sans);
  letter-spacing: normal; text-transform: none;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 10px; color: var(--ink);
}

/* ---------- Notifications ---------- */

.notif-title { font-size: 17px; font-weight: 620; }
.notif-body { font-size: 15.5px; margin-top: 4px; line-height: 1.5; }
.notif-time { font-size: 13.5px; color: var(--ink-3); margin-top: 8px; }
.notif-link {
  display: inline-block; margin-top: 8px;
  font-size: 15px; font-weight: 600; color: var(--accent);
}

.empty.coming strong { font-size: 18px; }

/* ---------- Sheet steps ---------- */

.steps { margin: 4px 0 12px; padding-left: 22px; }
.steps li { margin-bottom: 9px; font-size: 16px; line-height: 1.45; }

/* ---------- Back button in the header ---------- */

.topbar-back {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.topbar-back h1 { margin-right: 0; }

.back-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  min-height: 36px; padding: 7px 12px 7px 9px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper); color: var(--ink-2);
  font-size: 14.5px; font-weight: 600;
}
.back-btn:active { background: var(--paper-2); }

/* ---------- Row completion tick ---------- */

.row-done {
  flex: 0 0 auto; margin-left: auto;
  font-size: 17px; font-weight: 700; line-height: 1;
  color: #0E8A2E;
}
.row[disabled] .row-label { color: var(--ink-2); }

/* Nav glyphs are inline SVG now, not emoji. */
.nav .glyph { display: flex; align-items: center; justify-content: center; }
.avatar.anon { background: var(--rule); }

/* ============================================================
   My Schedule, chat
   ============================================================ */

.nav.nav-5 { grid-template-columns: repeat(5, 1fr); }
.nav.nav-5 a { font-size: 11px; }

/* ---------- Star ---------- */

.slot { grid-template-columns: var(--rail) 1fr auto; }

.star {
  align-self: center; flex: 0 0 auto;
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; margin: 0;
  min-height: 44px;
}
.star svg { fill: none; stroke: var(--ink-3); stroke-width: 1.4; }
.star.on svg { fill: var(--learn); stroke: var(--learn); }

.day-head {
  padding: 16px 0 6px calc(var(--rail) + 12px);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2);
}

.clash {
  margin-top: 7px; padding: 5px 9px; border-radius: 7px;
  background: #FDF0E6; border: 1px solid #F0C9A8;
  font-size: 13px; color: #8A4B1F;
}

.btn-primary.block { display: block; text-align: center; text-decoration: none; }

/* ---------- Chat list ---------- */

.row.thread { gap: 12px; }
.thread-av {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--rule); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 650; font-size: 17px; flex: 0 0 auto;
}
.thread-av.lounge { background: var(--accent); color: #fff; }
.thread-main { flex: 1 1 auto; min-width: 0; }
.thread-title { display: block; font-size: 16.5px; font-weight: 600; }
.thread-preview {
  display: block; font-size: 14px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.search { margin-bottom: 14px; }
.search input {
  width: 100%; min-height: var(--tap); padding: 12px 14px;
  font-size: 16.5px; font-family: var(--sans);
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--paper); color: var(--ink);
}

/* ---------- Thread ---------- */

.thread-scroll {
  padding: 14px 16px 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* leave room for the composer, the tools row and the tab bar */
  max-height: calc(100vh - 260px);
}

.msg { margin-bottom: 12px; max-width: 82%; }
.msg.mine { margin-left: auto; text-align: right; }

.msg-name {
  font-size: 12.5px; font-weight: 650; color: var(--ink-2);
  margin-bottom: 3px; padding-left: 3px;
}
.bubble {
  display: inline-block; text-align: left;
  padding: 10px 13px; border-radius: 16px;
  background: var(--paper); border: 1px solid var(--rule);
  font-size: 16px; line-height: 1.45; white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg.mine .bubble {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.bubble.gone {
  background: transparent; border-style: dashed;
  color: var(--ink-3); font-style: italic;
}
.msg.mine .bubble.gone { color: var(--ink-3); }
.msg-time { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; padding: 0 4px; }

.composer {
  position: fixed; left: 0; right: 0;
  bottom: calc(60px + env(safe-area-inset-bottom));
  display: flex; gap: 8px; align-items: flex-end;
  padding: 9px 12px;
  background: var(--paper); border-top: 1px solid var(--rule);
  z-index: 25;
}
.composer textarea {
  flex: 1 1 auto; resize: none;
  min-height: 42px; max-height: 120px; padding: 10px 13px;
  font-family: var(--sans); font-size: 16px; line-height: 1.35;
  border: 1px solid var(--rule); border-radius: 20px;
  background: var(--paper-2); color: var(--ink);
}
.composer button {
  flex: 0 0 auto; width: 42px; height: 42px; min-height: 42px;
  margin: 0; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border: none;
}

.thread-tools {
  position: fixed; left: 0; right: 0;
  bottom: calc(122px + env(safe-area-inset-bottom));
  display: flex; gap: 16px; justify-content: center;
  padding: 6px 12px; z-index: 24;
}
.link-btn {
  width: auto; margin: 0; padding: 4px 6px; min-height: 32px;
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; color: var(--ink-3);
  text-decoration: underline;
}
.link-btn.danger { color: var(--red-card); }

.sheet textarea {
  width: 100%; padding: 11px 13px; margin-bottom: 4px;
  font-family: var(--sans); font-size: 16px;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--paper); color: var(--ink); resize: vertical;
}
.sheet .check { margin: 10px 0 14px; }