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

/* ---- iOS HOME-SCREEN SAFE AREA ----
   iOS 26+ draws a "Liquid Glass" blur over the top of a home-screen web app (strong on iOS 27). It
   paints the status bar in the fixed nav's color instead only when the page stays out of the status
   bar area, so the pages' viewport meta has no viewport-fit=cover (WebKit: no obscured top inset, no
   color extension view, blur stays). Without cover, env(safe-area-inset-top) is 0 and these rules
   fall back to the plain styles.css sizes. */
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; }
.nowrap { white-space: nowrap; } /* hyphenated words, LIBRARY: banner */

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

/* ---- CARDS (link tiles) ---- */
.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;
}