/**
 * line-report.css — crowd-sourced ferry line report card.
 *
 * @version 1.1.0
 *
 * Dark mode arrives two ways on this site ([data-theme="dark"] and
 * body.dark-mode), so every themed value is a --lr-* token redefined under both
 * selectors. Falls back to site tokens with literal defaults so the card still
 * looks right if styles.css ever loads after this file.
 *
 * Option buttons are min 44x44 (mobile touch target floor) and wrap into a
 * single column under 480px — five landmark names do not fit side by side on a
 * phone, and this card is read almost entirely on phones at the terminal.
 */

/* ---- tokens ---- */
.lr-body {
  --lr-ink: var(--text-primary, #202124);
  --lr-muted: var(--text-secondary, #5f6368);
  --lr-line: #dadce0;
  --lr-chip: #fff;
  --lr-chip-hover: #f1f3f4;
  --lr-accent: var(--primary-blue, #1a73e8);
  --lr-accent-ink: #fff;
  --lr-live-bg: #fef7e0;
  --lr-live-ink: #7a5900;
  --lr-live-edge: #f9c23c;
  --lr-empty-ink: var(--text-secondary, #5f6368);
  --lr-err: #c5221f;
  --lr-ok: #137333;
  --lr-hist-bg: #f1f3f4;
}

[data-theme="dark"] .lr-body,
body.dark-mode .lr-body {
  /* Set the text tokens explicitly rather than inheriting --text-primary.
     styles.css only redefines the site tokens under [data-theme="dark"] — it
     has no body.dark-mode block at all — so a card that leaned on inheritance
     rendered dark ink on a dark chip under the second selector. Verified: with
     transitions disabled, body.dark-mode gave color #111827 on background
     #2a2d31 before these two lines existed. */
  --lr-ink: #f9fafb;
  --lr-muted: #d1d5db;
  --lr-line: #3c4043;
  --lr-chip: #2a2d31;
  --lr-chip-hover: #35393e;
  --lr-live-bg: #3a3122;
  --lr-live-ink: #fdd663;
  --lr-live-edge: #8a6d1f;
  --lr-err: #f28b82;
  --lr-ok: #81c995;
  --lr-hist-bg: #35393e;
}

/* ---- banner ---- */
.lr-banner {
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  margin-bottom: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.4;
}

.lr-banner-live {
  background: var(--lr-live-bg);
  color: var(--lr-live-ink);
  border-left: 4px solid var(--lr-live-edge);
}

.lr-banner-main { display: block; font-weight: 600; }

.lr-banner-when {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  opacity: 0.85;
  font-weight: 400;
}

.lr-banner-empty {
  background: transparent;
  color: var(--lr-empty-ink);
  border-left: 4px solid var(--lr-line);
  font-size: 0.88rem;
}

/* ---- question + options ---- */
.lr-question {
  margin: 0 0 0.6rem;
  font-weight: 600;
  color: var(--lr-ink);
  font-size: 0.95rem;
}

.lr-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lr-opt {
  flex: 1 1 auto;
  min-height: 44px;
  min-width: 44px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--lr-line);
  border-radius: 8px;
  background: var(--lr-chip);
  color: var(--lr-ink);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.lr-opt:hover:not(:disabled) { background: var(--lr-chip-hover); }

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

.lr-opt:disabled { opacity: 0.55; cursor: default; }

.lr-opt-selected,
.lr-opt-selected:hover:not(:disabled) {
  background: var(--lr-accent);
  border-color: var(--lr-accent);
  color: var(--lr-accent-ink);
  font-weight: 600;
}

/* ---- status + footnote ---- */
.lr-status {
  margin: 0.7rem 0 0;
  min-height: 1.2em;
  font-size: 0.88rem;
  color: var(--lr-muted);
}

.lr-status-ok { color: var(--lr-ok); }
.lr-status-error { color: var(--lr-err); }

/* Previous-sailing history. Deliberately quieter than the live banner — it is
   context, not a current claim, and must never be mistaken for one. */
.lr-history {
  margin: 0.7rem 0 0;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  background: var(--lr-hist-bg);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--lr-muted);
}

.lr-hist-label {
  font-weight: 600;
  color: var(--lr-ink);
}

.lr-hist-body { color: var(--lr-muted); }

.lr-note {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--lr-muted);
}

/* Collapsed-header summary. The card header's .card-preview hides itself when
   the section is open, so this only ever shows in the collapsed state. */
.lr-preview-live { font-weight: 600; color: var(--lr-live-ink); }

@media (max-width: 480px) {
  .lr-options { flex-direction: column; }
  .lr-opt { flex: 1 1 auto; width: 100%; text-align: left; }
}

/* Each component carries its own reduced-motion block on this site rather than
   one global rule (see icecream-truck.css, styles.css). The selected state is
   also carried by aria-pressed and a background change, so killing the fade
   loses no information. */
@media (prefers-reduced-motion: reduce) {
  .lr-opt { transition: none; }
}