/* ======================================
   TRAVEL PANEL
   ====================================== */

.travel-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}
.travel-icon { font-size: 1.4rem; }
.travel-dest { font-size: 0.85rem; color: var(--text-primary); }
.travel-days { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; }

/* The live time to arrival, ticking beside the day count. Tabular figures so
   the digits do not jitter the line as the seconds change. */
.travel-countdown {
  color: var(--accent-gold);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.travel-countdown:not(:empty)::before { content: '\00b7'; margin: 0 0.3rem; color: var(--text-muted); }

/* Trouble on the road, drawn where the road is - see _roadMomentHtml in
   js/ui/world.js. Ember, because it is the one thing on this panel that wants
   answering today; the same colour the battle moment uses on its muster card. */
.travel-moment {
  margin-top: 0.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--accent-ember);
  border-radius: var(--radius);
  background: var(--bg-surface);
}
.travel-moment-title {
  font-size: 0.74rem;
  color: var(--accent-ember);
}
.travel-moment-note {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.15rem;
}

/* ======================================
   CALENDAR GRID
   ====================================== */

/* Two lines that stack (each carries its own bottom margin); a spaced row
   squeezed them into two ragged columns on a phone. */
.cal-header { display: block; }
#cal-sec-grid { padding: 0.75rem; }
.travel-icon:empty { display: none; }

.cal-day {
  position: relative;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--border-dim);
  background: var(--bg-surface);
  font-size: 0.72rem;
  color: var(--text-muted);
  user-select: none;
}
.cal-day.cal-past   { opacity: 0.55; }
.cal-day.cal-today  { border-color: var(--accent-gold); color: var(--accent-gold); font-weight: 700; background: rgba(212,174,90,0.06); }

.cal-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-top: 2px;
  flex-shrink: 0;
}

/* The last row of the Calendar's propose form: when it begins, how long it runs,
   and Propose (ui/events.js). On a desktop the button sits at the far end of the
   row; on a phone it takes the whole width under the two numbers, where a thumb
   finds it, instead of a short button wrapped to the right edge. */
/* THE PROPOSE FORM ITSELF. Every field in it used to carry the same 200-byte
   `style=` built from a JS constant, so the one skin the form has could not be
   read, overridden or themed from a stylesheet at all. The widths stay inline:
   they differ per field and say what the field is for. */
.ev-inp {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  color: var(--text-primary);
  padding: 0.4rem;
  box-sizing: border-box;
  font-family: var(--font-prose);
}
.ev-lbl  { font-size: 0.72rem; color: var(--text-muted); }
.ev-cap  { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.2rem; }
.ev-hint { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.25rem; }

.ev-when { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.15rem; }
.ev-propose-btn { margin-left: auto; font-size: 0.78rem; padding: 0.35rem 0.9rem; }
@media (max-width: 560px) {
  .ev-propose-btn { flex: 1 1 100%; margin-left: 0; margin-top: 0.25rem; padding-block: 0.6rem; }
}

/* The destination rows keep their dark art scrim in both themes (world.js writes
   it inline), so their lettering keeps the dark theme's inks too: in light mode
   the name measured about 3:1 on it and the day count 2:1 (2026-09-17). */
:root.light-mode .travel-dest-row {
  --accent-gold: #D4AE5A;
  --text-secondary: #C4B8A4;
  --text-muted: #9A8E80;
}
:root.light-mode .travel-pickup-note { background: rgba(0, 0, 0, 0.04) !important; }


/* -- A TAPPED DAY LANDS SOMEWHERE (the QoL pass, 2026-09-18) ----------- */
/* The calendar cells were divs with a hover title, which a phone cannot show at
   all; a day holding a gathering is a button now and walks to that gathering's
   card. This is the card saying it has been arrived at, and it fades on its
   own - prefers-reduced-motion gets the border and no animation. */
.cal-jumped { border-color: var(--accent-gold) !important; animation: calJump 1.6s ease-out; }
@keyframes calJump { 0% { box-shadow: 0 0 0 2px var(--accent-gold); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .cal-jumped { animation: none; } }
button.cal-day { font: inherit; color: inherit; }