/* Shared component styles for landing/ pages.
   Each block is self-contained — pages opt in by adding the relevant
   classnames.  Layout (the day strip's flex/scroll container, section
   spacing) stays page-local; this file is just the leaf-level visual
   primitives that drift the most when copy-pasted. */

/* --- Day strip chip ----------------------------------------------- */
.day-chip {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--mtt-overlay) 10%, transparent);
  background: color-mix(in srgb, var(--mtt-overlay) 3%, transparent);
  color: var(--mtt-text-secondary);
  font: inherit;
  font-size: var(--mtt-fs-sm);
  font-weight: var(--mtt-fw-medium);
  padding: 8px 12px;
  min-width: 72px;
  text-align: center;
  border-radius: var(--mtt-radius-card);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  line-height: 1.25;
  flex-shrink: 0;
}
.day-chip:hover { border-color: color-mix(in srgb, var(--mtt-brand-500) 45%, transparent); color: var(--mtt-brand-300); }
/* Top slot — day of week (Mon / Tue / …). */
.day-chip .dow {
  display: block;
  color: var(--mtt-text-muted);
  font-weight: var(--mtt-fw-semibold);
  font-size: var(--mtt-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}
/* Bottom slot — Today / Yesterday label.  Renders an   on chips
   that don't have a relative label so heights stay aligned. */
.day-chip .relative {
  display: block;
  font-weight: var(--mtt-fw-semibold);
  font-size: var(--mtt-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mtt-brand-500);
  margin-top: 3px;
  min-height: 1em;
}
.day-chip.is-today { color: var(--mtt-text-display); border-color: color-mix(in srgb, var(--mtt-overlay) 22%, transparent); }
.day-chip.is-today .dow { color: var(--mtt-brand-500); }
.day-chip.is-active {
  background: color-mix(in srgb, var(--mtt-brand-500) 15%, transparent);
  border-color: color-mix(in srgb, var(--mtt-brand-500) 65%, transparent);
  color: var(--mtt-brand-300);
}
.day-chip.is-active .dow { color: var(--mtt-brand-300); }
.day-chip.is-active .relative { color: var(--mtt-brand-300); }

/* --- League filter pill ------------------------------------------- */
.league-pill {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--mtt-overlay) 14%, transparent);
  background: color-mix(in srgb, var(--mtt-overlay) 3%, transparent);
  color: var(--mtt-text-secondary);
  border-radius: var(--mtt-radius-control);
  padding: 6px 10px;
  font: inherit;
  font-size: var(--mtt-fs-xs);
  line-height: 1;
  font-weight: var(--mtt-fw-semibold);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.league-pill:hover {
  border-color: color-mix(in srgb, var(--mtt-brand-500) 40%, transparent);
  background: color-mix(in srgb, var(--mtt-brand-500) 10%, transparent);
  color: var(--mtt-on-fill);
}
.league-pill.is-active {
  border-color: color-mix(in srgb, var(--mtt-brand-500) 65%, transparent);
  background: color-mix(in srgb, var(--mtt-brand-500) 20%, transparent);
  color: var(--mtt-on-fill);
}

/* --- Section card ------------------------------------------------- */
.section {
  background: color-mix(in srgb, var(--mtt-overlay) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--mtt-overlay) 10%, transparent);
  border-radius: var(--mtt-radius-card);
  padding: 22px 22px 20px;
  margin-bottom: 20px;
}
.section h2 {
  font-size: var(--mtt-fs-sm);
  font-weight: var(--mtt-fw-semibold);
  letter-spacing: normal;
  color: var(--mtt-text-muted);
  margin-bottom: 16px;
}

/* --- Back link ---------------------------------------------------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mtt-text-soft);
  text-decoration: none;
  font-size: var(--mtt-fs-base);
  font-weight: var(--mtt-fw-medium);
  margin-bottom: 24px;
  transition: color 0.15s;
}
.back-link:hover { color: var(--mtt-brand-300); }
.back-link::before { content: "\2190"; }

/* --- Pack breadcrumb ---------------------------------------------- */
.pack-breadcrumb-bar {
  flex-shrink: 0;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 12px 36px 0;
}
.pack-breadcrumb-bar[hidden] { display: none; }
.pack-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  list-style: none;
  color: var(--mtt-text-muted);
  font-size: var(--mtt-fs-sm);
  line-height: 1.35;
}
.pack-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pack-breadcrumb li + li::before {
  content: "/";
  color: var(--mtt-text-soft);
  flex: 0 0 auto;
}
.pack-breadcrumb a {
  color: var(--mtt-text-secondary);
  text-decoration: none;
  border-radius: var(--mtt-radius-sm);
}
.pack-breadcrumb a:hover { color: var(--mtt-brand-300); }
.pack-breadcrumb a:focus-visible {
  outline: 2px solid var(--mtt-brand-300);
  outline-offset: 3px;
}
.pack-breadcrumb__calendar {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -12px;
  border: 0;
  border-radius: var(--mtt-radius-md);
  background: transparent;
  color: var(--mtt-text-secondary);
  cursor: pointer;
  font-size: var(--mtt-fs-title);
  line-height: 1;
}
.pack-breadcrumb__calendar:hover { color: var(--mtt-brand-300); }
.pack-breadcrumb__calendar:focus-visible {
  outline: 2px solid var(--mtt-brand-300);
  outline-offset: 3px;
}
.pack-breadcrumb [aria-current="page"] {
  color: var(--mtt-text-display);
  font-weight: var(--mtt-fw-semibold);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.has-pack-calendar-modal { overflow: hidden; }
.pack-breadcrumb-calendar[hidden] { display: none; }
.pack-breadcrumb-calendar {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.pack-breadcrumb-calendar__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}
.pack-breadcrumb-calendar__dialog {
  position: relative;
  z-index: 1;
  width: min(420px, calc(100vw - 32px));
  margin: 12vh auto 0;
  border: 1px solid color-mix(in srgb, var(--mtt-overlay) 12%, transparent);
  border-radius: var(--mtt-radius-lg);
  background: var(--mtt-surface-base);
  color: var(--mtt-text-primary);
  box-shadow: var(--mtt-shadow-modal);
  overflow: hidden;
}
.pack-breadcrumb-calendar__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--mtt-overlay) 9%, transparent);
}
.pack-breadcrumb-calendar__eyebrow {
  margin-bottom: 4px;
  color: var(--mtt-brand-300);
  font-size: var(--mtt-fs-xs);
  font-weight: var(--mtt-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pack-breadcrumb-calendar__head h2 {
  margin: 0;
  color: var(--mtt-text-display);
  font-size: var(--mtt-fs-xl);
  font-weight: var(--mtt-fw-semibold);
  line-height: 1.2;
}
.pack-breadcrumb-calendar__close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -10px -10px 0 0;
  border: 0;
  border-radius: var(--mtt-radius-md);
  background: transparent;
  color: var(--mtt-text-muted);
  cursor: pointer;
  font-size: var(--mtt-fs-2xl);
  line-height: 1;
}
.pack-breadcrumb-calendar__close:hover { color: var(--mtt-text-display); }
.pack-breadcrumb-calendar__close:focus-visible {
  outline: 2px solid var(--mtt-brand-300);
  outline-offset: 3px;
}
.pack-breadcrumb-calendar__body {
  padding: 18px 20px 20px;
  background: var(--mtt-surface-base);
}
.pack-breadcrumb-calendar__monthbar {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.pack-breadcrumb-calendar__month {
  color: var(--mtt-text-display);
  font-size: var(--mtt-fs-base);
  font-weight: var(--mtt-fw-semibold);
  text-align: center;
}
.pack-breadcrumb-calendar__nav {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--mtt-overlay) 12%, transparent);
  border-radius: var(--mtt-radius-md);
  background: var(--mtt-surface-panel);
  color: var(--mtt-text-display);
  cursor: pointer;
  font-size: var(--mtt-fs-xl);
  line-height: 1;
}
.pack-breadcrumb-calendar__nav:hover {
  border-color: color-mix(in srgb, var(--mtt-overlay) 24%, transparent);
  color: var(--mtt-brand-300);
}
.pack-breadcrumb-calendar__weekdays,
.pack-breadcrumb-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.pack-breadcrumb-calendar__weekdays {
  margin-bottom: 8px;
  color: var(--mtt-text-muted);
  font-size: var(--mtt-fs-xs);
  font-weight: var(--mtt-fw-semibold);
  text-align: center;
}
.pack-breadcrumb-calendar__day {
  min-width: 0;
  height: 44px;
  border: 1px solid transparent;
  border-radius: var(--mtt-radius-md);
  background: var(--mtt-surface-panel);
  color: var(--mtt-text-secondary);
  cursor: pointer;
  font-size: var(--mtt-fs-sm);
  font-weight: var(--mtt-fw-semibold);
}
.pack-breadcrumb-calendar__day:hover {
  border-color: var(--mtt-brand-300);
  color: var(--mtt-text-display);
}
.pack-breadcrumb-calendar__day.is-outside {
  opacity: 0.45;
}
.pack-breadcrumb-calendar__day.is-today {
  border-color: color-mix(in srgb, var(--mtt-brand-300) 50%, transparent);
}
.pack-breadcrumb-calendar__day.is-selected {
  background: var(--mtt-brand-500);
  border-color: var(--mtt-brand-300);
  color: var(--mtt-on-brand);
}
.pack-breadcrumb-calendar__nav:focus-visible,
.pack-breadcrumb-calendar__day:focus-visible {
  outline: 2px solid var(--mtt-brand-300);
  outline-offset: 3px;
}
@media (max-width: 899px) {
  .pack-breadcrumb-bar { padding: 10px 32px 0; }
  .pack-breadcrumb {
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .pack-breadcrumb::-webkit-scrollbar { display: none; }
  .pack-breadcrumb-calendar__dialog {
    width: min(420px, calc(100vw - 24px));
    margin-top: 10vh;
  }
  .pack-breadcrumb-calendar__body { padding: 16px; }
  .pack-breadcrumb-calendar__weekdays,
  .pack-breadcrumb-calendar__grid { gap: 4px; }
}