:root {
  color-scheme: light;
  --bg: #f6f3ed;
  --ink: #1c2520;
  --muted: #6e756f;
  --line: #ddd4c3;
  --panel: #fffdf8;
  --green: #236b4b;
  --green-soft: #e7f1ea;
  --gold: #b7822f;
  --gold-soft: #fff2d8;
  --red: #8e3f35;
  --shadow: 0 14px 42px rgba(54, 45, 31, 0.11);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(35, 107, 75, 0.12), transparent 38%),
    linear-gradient(315deg, rgba(183, 130, 47, 0.18), transparent 34%),
    var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.shell {
  width: min(100% - 32px, 1600px);
  margin: 0 auto;
}

.masthead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 38px 0 24px;
}

.masthead-subtitle,
.panel-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1, h2, h3 { margin: 0; letter-spacing: 0; }
h1 { max-width: 920px; font-size: clamp(2rem, 5vw, 4.5rem); line-height: 0.96; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.08rem; }

.status {
  min-width: 126px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.78);
  padding: 10px 14px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.dashboard {
  display: grid;
  gap: 18px;
  padding-bottom: 40px;
}

.view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.view-tab {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: var(--shadow);
  color: var(--green);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  padding: 15px 18px;
}

.view-tab.active,
.view-tab:hover {
  border-color: var(--green);
  background: var(--green);
  color: white;
}

.view-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.view-section[hidden] { display: none; }

.panel,
.summary-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: var(--shadow);
}

.panel { padding: 18px; }

.overview-section .rosary-sessions-panel { grid-column: span 7; }
.overview-section .rosary-leaders-panel { grid-column: span 5; grid-row: span 2; }
.analytics-section > .section-heading,
.full-panel,
.summary-cards { grid-column: 1 / -1; }
.analytics-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.two-column > .panel { grid-column: span 6; }

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.panel-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.panel-heading span,
.sub {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}


.search-panel {
  grid-area: search;
  display: grid;
  grid-template-columns: 150px minmax(260px, 420px) 1fr;
  align-items: start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.search-panel label {
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 42px;
  text-transform: uppercase;
}
.search-combobox { position: relative; }
.search-combobox input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff9ef;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  padding: 11px 12px;
}
.search-combobox input:focus {
  border-color: var(--green);
  outline: 3px solid rgba(35, 107, 75, 0.12);
}
.search-dropdown {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 6px;
}
.search-option {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 2px;
  font: inherit;
  padding: 10px 12px;
  text-align: left;
}
.search-option:hover,
.search-option:focus {
  background: var(--green-soft);
  outline: none;
}
.search-option strong { font-weight: 950; }
.search-result {
  min-height: 42px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #fff9ef;
  color: var(--muted);
  font-weight: 800;
  padding: 10px 12px;
}
.search-result strong { color: var(--green); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--line); padding: 12px 8px; text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; }
td { font-weight: 700; }
.block { display: block; }

.leader-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leader-list.expanded {
  max-height: 720px;
  overflow: auto;
  padding-right: 4px;
}

.leader-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #fff9ef;
}

.rank {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: white;
  font-weight: 900;
}

.name { min-width: 0; overflow-wrap: anywhere; font-weight: 900; }
.points { color: var(--gold); font-size: 1.1rem; font-weight: 950; white-space: nowrap; }

.summary-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.summary-card { min-height: 116px; padding: 16px; }
.summary-card span,
.summary-card small { display: block; color: var(--muted); font-weight: 750; }
.summary-card strong { display: block; margin: 10px 0; overflow-wrap: anywhere; color: var(--green); font-size: clamp(1.4rem, 3vw, 2.3rem); line-height: 1; }

.combo-chart {
  min-height: 390px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff9ef;
  padding: 10px;
}

.combo-chart svg { min-width: 900px; width: 100%; height: 360px; display: block; }
.chart-axis { stroke: rgba(28, 37, 32, 0.38); stroke-width: 1; }
.chart-grid { stroke: rgba(110, 117, 111, 0.2); stroke-width: 1; }
.chart-text { fill: var(--muted); font-size: 12px; font-weight: 800; }
.chart-title-left { fill: var(--green); font-size: 12px; font-weight: 900; }
.chart-title-right { fill: var(--gold); font-size: 12px; font-weight: 900; }
.chart-bar { fill: var(--green); opacity: 0.86; cursor: pointer; }
.chart-bar:hover,
.chart-bar.active { opacity: 1; filter: drop-shadow(0 4px 8px rgba(35, 107, 75, 0.28)); }
.chart-line { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.chart-point { fill: var(--gold); stroke: white; stroke-width: 2; cursor: pointer; }
.chart-point:hover,
.chart-point.active { r: 6; }

.bar-chart { display: grid; gap: 12px; }
.bar-row { display: grid; gap: 6px; }
.bar-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bar-label { min-width: 0; overflow: hidden; color: var(--ink); font-size: 0.9rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.bar-value { color: var(--muted); font-size: 0.84rem; font-weight: 850; white-space: nowrap; }
.bar-track { height: 13px; overflow: hidden; border-radius: 999px; background: var(--green-soft); }
.bar-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--gold)); }

.drilldown-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.drilldown-stat {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff9ef;
  padding: 12px;
}

.drilldown-stat span { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 850; text-transform: uppercase; }
.drilldown-stat strong { display: block; margin-top: 6px; color: var(--green); font-size: 1.35rem; }

.empty,
.error { color: var(--muted); font-weight: 750; }
.error { color: var(--red); }
.chart-empty { display: grid; min-height: 240px; place-items: center; border: 1px dashed var(--line); border-radius: 12px; background: #fff9ef; text-align: center; }

@media (max-width: 1200px) {
  .overview-section .rosary-sessions-panel,
  .overview-section .rosary-leaders-panel,
  .two-column > .panel { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  .masthead { align-items: start; flex-direction: column; }
  .search-panel { grid-template-columns: 1fr; }
  .search-panel label { line-height: 1; }
  .view-tabs,
  .summary-cards { grid-template-columns: 1fr; }
  .drilldown-summary { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .shell { width: min(100% - 20px, 1600px); }
  .panel { padding: 14px; }
  th, td { padding: 10px 6px; }
}

/* Layout refinements */
.masthead-copy { min-width: 0; }
.masthead-side {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mascot {
  width: 76px;
  height: 76px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.92);
  box-shadow: var(--shadow);
}
.mini-mascot {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 14px;
}
.compact-heading { align-items: center; margin-bottom: 10px; }
.upcoming-panel { grid-column: 1 / -1; }
.upcoming-empty {
  margin: 0;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #fff9ef;
  color: var(--muted);
  font-weight: 850;
  padding: 14px;
}

.overview-section {
  align-items: stretch;
  grid-template-areas:
    "upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming"
    "search search search search search search search search search search search search"
    "sessions sessions sessions sessions sessions sessions sessions leaders leaders leaders leaders leaders"
    "sessions sessions sessions sessions sessions sessions sessions leaders leaders leaders leaders leaders";
}
.overview-section .upcoming-panel { grid-area: upcoming; }
.overview-section .search-panel { grid-area: search; }
.overview-section .rosary-sessions-panel {
  grid-area: sessions;
  min-height: 560px;
}
.overview-section .rosary-leaders-panel {
  grid-area: leaders;
  grid-row: leaders;
}
.overview-section .rosary-leaders-panel .leader-list.expanded { max-height: 680px; }

.session-drilldown {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
}
.session-drilldown-title {
  margin: 0;
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.session-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.session-pill {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff9ef;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  padding: 10px 12px;
  text-align: left;
}
.session-pill span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}
.session-pill.active,
.session-pill:hover {
  border-color: var(--green);
  background: var(--green-soft);
}

@media (max-width: 1200px) {
  .overview-section {
    grid-template-areas:
      "upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming"
      "search search search search search search search search search search search search"
      "sessions sessions sessions sessions sessions sessions sessions leaders leaders leaders leaders leaders"
      "sessions sessions sessions sessions sessions sessions sessions leaders leaders leaders leaders leaders";
  }
}

@media (max-width: 920px) {
  .masthead-side { width: 100%; justify-content: space-between; }
  .overview-section { grid-template-areas:
    "upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming"
    "search search search search search search search search search search search search"
    "sessions sessions sessions sessions sessions sessions sessions sessions sessions sessions sessions sessions"
    "leaders leaders leaders leaders leaders leaders leaders leaders leaders leaders leaders leaders";
  }
}

/* Mass Finder */
.view-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mass-finder-section > * { grid-column: 1 / -1; }
.mass-search-panel { overflow: hidden; }
.secondary-action {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff9ef;
  color: var(--green);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  padding: 12px 14px;
}
.secondary-action:hover { border-color: var(--green); background: var(--green-soft); }
.secondary-action:disabled,
.mass-location-grid button:disabled { cursor: not-allowed; opacity: 0.58; }
.mass-location-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
}
.mass-location-grid input,
.mass-toolbar input,
.mass-toolbar select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff9ef;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  padding: 12px 14px;
}
.mass-location-grid input:focus,
.mass-toolbar input:focus,
.mass-toolbar select:focus {
  border-color: var(--green);
  outline: 3px solid rgba(35, 107, 75, 0.12);
}
.mass-location-grid button:not(.secondary-action) {
  border: 0;
  border-radius: 12px;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 950;
  padding: 13px 18px;
}
.mass-status {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.5;
}
.mass-status.good { color: var(--green); }
.mass-status.bad { color: var(--red); }
.mass-start-panel,
.mass-empty {
  border-style: dashed;
  text-align: center;
  padding: 34px 20px;
}
.mass-toolbar {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr 0.85fr 0.7fr;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: var(--shadow);
  padding: 14px;
}
.mass-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.mass-summary-cards .summary-card {
  padding: 16px;
}
.mass-summary-cards .summary-card span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mass-summary-cards .summary-card strong {
  display: block;
  margin-top: 7px;
  color: var(--green);
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  line-height: 1.05;
}
.mass-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.mass-church-card {
  display: grid;
  gap: 14px;
}
.mass-card-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}
.mass-distance {
  border-radius: 999px;
  background: var(--gold-soft);
  color: #6f4b16;
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 950;
  padding: 7px 10px;
}
.mass-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff9ef;
  padding: 12px;
}
.mass-details-grid strong {
  display: block;
  color: var(--green);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.mass-details-grid span {
  color: var(--ink);
  font-size: 0.93rem;
  font-weight: 750;
  line-height: 1.35;
}
.mass-links { display: flex; flex-wrap: wrap; gap: 8px; }
.mass-links a {
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  font-weight: 950;
  padding: 8px 11px;
  text-decoration: none;
}
.mass-links a:hover { background: var(--green); color: #fff; }
.mass-schedule-label { margin-top: 2px; }
.mass-times { display: grid; gap: 8px; }
.mass-time-row {
  display: grid;
  grid-template-columns: 88px 92px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdf8;
  padding: 10px 12px;
}
.mass-time-row > span:first-child,
.mass-time-row strong {
  color: var(--green);
  font-weight: 950;
}
.mass-time-row em {
  display: inline-block;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: #6f4b16;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 950;
  padding: 2px 6px;
}
.mass-time-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}

@media (display-mode: standalone) {
  body { overscroll-behavior-y: contain; }
}

@media (max-width: 980px) {
  .view-tabs,
  .mass-location-grid,
  .mass-toolbar,
  .mass-summary-cards,
  .mass-results,
  .mass-details-grid { grid-template-columns: 1fr; }
  .mass-time-row { grid-template-columns: 1fr; }
}