/* ============================================================================
 * 183 PWA — calendar.css
 * Split from the original single-file PWA. See styles/README.md for the
 * full layout map.
 * ========================================================================== */



/* ============================================================================
   Calendar
   ========================================================================== */

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 12px;
}

.cal-month {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text);
}

.cal-nav {
  display: flex;
  gap: 4px;
}

.cal-nav button {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--text-soft);
}
.cal-nav button:hover { border-color: var(--line-strong); color: var(--accent); }
.cal-nav button svg { width: 16px; height: 16px; }

.cal-grid {
  display: grid;
  grid-template-columns: 32px repeat(7, 1fr);
  gap: 2px;
  background: var(--bg-base);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 6px;
}

.cal-week-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  border-right: 1px dashed var(--line);
  padding-right: 2px;
  line-height: 1.1;
  gap: 2px;
}
.cal-week-num .wk-num {
  font-weight: 500;
}
.cal-week-num .wk-rollover {
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.85;
}
.cal-week-num-header {
  font-size: 0.6rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-right: none;
  font-weight: 600;
}

.cal-dow {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 0 6px;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.92rem;
  color: var(--text-soft);
  border-radius: var(--r-sm);
  position: relative;
  transition: background 120ms;
  cursor: pointer;
  background: transparent;
}

.cal-day.outside {
  color: var(--text-faint);
  opacity: 0.45;
}
.cal-day:hover { background: var(--bg-raised); }

/* Today — stronger ring around the cell so "you are here" is unmissable */
.cal-day.today {
  outline: 2px solid var(--cal-today-ring);
  outline-offset: -2px;
  color: var(--accent);
  font-weight: 700;
}

/* Past abroad — sea-green, confident */
.cal-day.abroad {
  background: var(--cal-past-abroad-bg);
  color: var(--cal-past-abroad-fg);
  font-weight: 600;
}

/* Per-day Non-SED badge — small chip in the top-right corner of any
   cell where the recorded midnight position means the day doesn't
   qualify for SED. Two reasons collapse to one visual: UK midnight
   on an abroad voyage day, or a confirmed 5-day-rule installation.
   Cell colour stays unchanged — the badge is the only signal. */
.cal-day { position: relative; } /* host for the absolute badge */

/* Default position rule (Non-SED stays in the top-right corner).
   The Travel variant overrides to bottom-right. PWA-033 splits the
   real estate so a day can show BOTH badges without a fight. */
.cal-day-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 1px 4px;
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  border-radius: 3px;
  background: var(--cal-badge-bg);
  color: var(--cal-badge-fg);
  pointer-events: none;
}

/* Non-SED variant (explicit class — same rule as default; the class
   exists so future styling can diverge per kind). Stays top-right. */
.cal-day-badge.cal-day-badge--nonsed {
  /* default position is fine; explicit selector for future divergence */
}

/* Travel badge variant — bottom-right of the cell, never competing
   with Non-SED for the corner. Amber, matching the editor's travel-
   mode tint (PWA-033c). Distinct from the cyan brand accent used
   for active voyages, so the calendar's colour vocabulary stays
   distinguishable at a glance.
   PWA-028 (introduced badge); PWA-033 (moved to bottom);
   PWA-033c (cyan → amber to reduce cyan saturation). */
.cal-day-badge.cal-day-badge--travel {
  top: auto;
  bottom: 2px;
  right: 2px;
  background: rgba(255, 184, 77, 0.92);
  color: #050a14;
}

/* Currently at sea — bright cyan with proper presence */
.cal-day.active-abroad {
  background: var(--cal-active-bg);
  color: var(--cal-active-fg);
  box-shadow: inset 0 0 0 1.5px var(--cal-active-glow);
  font-weight: 700;
}

/* In UK (past) — neutral but present */
.cal-day.uk {
  background: var(--cal-uk-bg);
  color: var(--cal-uk-fg);
}

/* Planned abroad — bold cyan stripes; reads clearly even at a glance */
.cal-day.planned-abroad {
  background-color: var(--cal-planned-abroad-bg);
  color: var(--cal-planned-abroad-fg);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 4px,
    var(--cal-planned-abroad-stripe) 4px,
    var(--cal-planned-abroad-stripe) 7px
  );
  font-weight: 600;
}

/* Planned UK (future home) — softest possible, just text */
.cal-day.planned-uk {
  background: var(--cal-planned-uk-bg);
  color: var(--cal-planned-uk-fg);
}

/* Fail day — fatter red ring, bolder number */
.cal-day.fail-day {
  outline: 2.5px solid var(--cal-fail-ring);
  outline-offset: -2px;
  color: var(--cal-fail-fg);
  font-weight: 700;
  box-shadow: 0 0 12px rgba(255, 84, 112, 0.35);
}

/* Pinned (must-be-home) — amber stripes, layered over any underlying state */
.cal-day.pinned {
  background-color: var(--cal-pinned-bg) !important;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 5px,
    var(--cal-pinned-stripe) 5px,
    var(--cal-pinned-stripe) 8px
  ) !important;
  color: var(--cal-pinned-fg) !important;
  font-weight: 600 !important;
}
.cal-day.pinned::before {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 6px var(--signal);
}

.cal-legend {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 14px 4px 8px;
}

.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.cal-legend-swatch {
  width: 14px; height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}
.cal-legend-swatch.abroad { background: var(--cal-past-abroad-bg); }
.cal-legend-swatch.active-abroad {
  background: var(--cal-active-bg);
  box-shadow: inset 0 0 0 1px var(--cal-active-glow);
}
.cal-legend-swatch.uk { background: var(--cal-uk-bg); }
.cal-legend-swatch.p-abroad {
  background-color: var(--cal-planned-abroad-bg);
  background-image: repeating-linear-gradient(
    -45deg, transparent 0, transparent 2px,
    var(--cal-planned-abroad-stripe) 2px, var(--cal-planned-abroad-stripe) 3px);
}
.cal-legend-swatch.fail { border: 1.5px solid var(--cal-fail-ring); }

.cal-summary {
  margin-top: 18px;
  padding: 14px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.cal-summary .row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 0.86rem; padding: 6px 0;
}
.cal-summary .row .k { color: var(--text-muted); }
.cal-summary .row .v { color: var(--text); font-weight: 500; }
.cal-summary .row.accent .v { color: var(--accent); }
.cal-summary .row.signal .v { color: var(--signal); }