/* DIGOUTS additions on top of styles.css (kept identical to the rokouts stylesheet). */

/* ---- iOS HOME-SCREEN SAFE AREA (status bar overlays the page) ---- */
body { padding-top: calc(70px + env(safe-area-inset-top)); }
.topnav {
  height: calc(54px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
}
.nav-menu { top: calc(54px + env(safe-area-inset-top)); }

/* ---- HEADER ---- */
.header { padding: 40px 20px; }
.header h2 { font-size: 1.4em; margin-bottom: 20px; }
.header .tags { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.header .tags .tag { margin: 0; }
.header h1.title { display: flex; align-items: center; justify-content: center; gap: 16px; }
.header h1.title img { width: 56px; height: 56px; flex: none; }

/* ---- NAV CHIPS ---- */
.header .tag.current { background: #16213e; color: #ffd966; border: 1px solid #ffd966; }

/* ---- CARDS (week days, warm-up / cool-down links) ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}
.cards.single { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto 30px; }
.card {
  display: block;
  background: #16213e;
  border: 1px solid #0f3460;
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
a.card:hover {
  border-color: #e94560;
  transform: translateY(-4px);
}
.card.today { border: 2px solid #ffd966; }
.card.rest { opacity: 0.5; }
.card .letter {
  font-size: 3em;
  font-weight: 700;
  color: #ffd966;
  letter-spacing: 4px;
  margin-bottom: 8px;
}
.card .wo-label {
  font-size: 1.1em;
  color: #aaa;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.card .wo-name {
  font-size: 1.1em;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

/* ---- WORKOUT SECTIONS ---- */
main > h2 { font-style: italic; }
table.exercises .exercise-name { white-space: pre-line; }

/* ---- SWAP CHIPS (day page): ⇄ top-right, ↺ undo top-left on a swapped card ---- */
table.exercises td { position: relative; }
table.exercises td.swapped { border-color: #ffd966; }
.card-chip {
  position: absolute;
  top: 20px;
  border: none;
  border-radius: 14px;
  padding: 5px 11px;
  font-family: inherit;
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffd966;
  background: rgba(15, 52, 96, 0.9);
  cursor: pointer;
}
.card-chip.swap { right: 20px; }
.card-chip.swap.armed { background: #e94560; color: #fff; }
.card-chip.undo { left: 20px; }
.error { text-align: center; color: #e94560; padding: 40px 20px; }

@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
  .header { padding: 30px 12px; }
  .header h1 { font-size: 1.7em; letter-spacing: 4px; }
  .header h1.title { font-size: 1.45em; letter-spacing: 3px; gap: 10px; }
  .header h1.title img { width: 36px; height: 36px; }
  .header .tags { gap: 8px; }
  .header .tag { padding: 6px 12px; }
  table.exercises { border-spacing: 8px; }
  table.exercises td { padding: 8px; }
  table.exercises .exercise-name { font-size: 0.95em; }
  .card-chip { top: 12px; padding: 4px 9px; font-size: 0.8em; }
  .card-chip.swap { right: 12px; }
  .card-chip.undo { left: 12px; }
}
@media (max-width: 360px) {
  .header h1.title { flex-direction: column; gap: 6px; }
}