/* ========================================
   KANZ — Daily Tab
   Layered on top of the-watch.css. Adds only
   the daily-specific bits: qibla button (acts as
   the divider between prayer times and gem),
   horizontal compass strip (expandable inline),
   and the gem-section spacing.

   All colors / fonts pull from variables.css —
   warm dark, aged-brass accents, Playfair Display.
   ======================================== */

/* ---- Wrapper inherits .watch styling, just removes any extra padding */
.daily {
  padding-bottom: var(--space-md);
}

/* ---- Compact overrides for the Daily tab so the gem card sits
       comfortably in the viewport alongside prayer times. The
       Watch view is roomy by design; Daily is dense by design. */
.watch.daily {
  padding-top: var(--space-sm);
}
.watch.daily .watch__header {
  margin-bottom: var(--space-sm);
}
.watch.daily .watch__title {
  font-size: var(--text-lg);
}
.watch.daily .watch__city {
  margin-top: 2px;
  font-size: var(--text-xs);
}
.watch.daily .watch__countdown {
  margin-top: 6px;
}

/* PRAYER TIMES on the Daily tab use a 2-column grid instead of the
   stacked single column the Watch view uses. Halves the vertical bulk
   while keeping the active-prayer treatment (brass left-border + soft
   gradient) and the muted styling for Midnight/Tahajjud. */
.watch.daily .watch-times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-md);
  row-gap: 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.watch.daily .watch-time-row {
  padding: 9px var(--space-sm);
  min-height: 38px;
  /* Per-row borders are too noisy in 2-column mode — the wrapper has
     top + bottom rules, and a single horizontal divider mid-grid keeps
     the dual-list feel without grid-line clutter. */
  border-bottom: none;
  /* Light vertical divider between the two columns, only on left-side
     cells. The grid lays out left-to-right row-by-row, so odd-numbered
     children (1, 3, 5...) are the left column. */
}
.watch.daily .watch-time-row:nth-child(odd) {
  border-right: 1px solid rgba(168, 144, 80, 0.12);
}
/* Horizontal rule between row pairs */
.watch.daily .watch-time-row:nth-child(n+3) {
  border-top: 1px solid rgba(168, 144, 80, 0.10);
}
.watch.daily .watch-time-row__label,
.watch.daily .watch-time-row__time {
  font-size: var(--text-sm);
}
/* Active-prayer brass treatment carries over but the left-border now
   sits flush to the cell edge so it reads inside the grid cleanly. */
.watch.daily .watch-time-row--active {
  border-left: 2px solid var(--aged-brass);
  padding-left: calc(var(--space-sm) - 2px);
}

/* Shurooq (sunrise) — intermediate fade. Halfway between full-color
   obligatory prayers and the muted italic Midnight/Tahajjud rows.
   Stays upright (no italic) so it still reads as a fixed time anchor. */
.watch.daily .watch-time-row--secondary .watch-time-row__label,
.watch.daily .watch-time-row--secondary .watch-time-row__time {
  color: var(--text-light);
}

/* ---- Qibla zone — a divider between prayer times and gem.
       Default: a thin button with brass rule + label "Qibla".
       Expanded: horizontal compass strip with brass ticks,
                 gold qibla pip, alignment glow. */
.daily-qibla {
  margin: var(--space-sm) 0;
}

/* Collapsed state — a button styled as a divider line with a brass label. */
.daily-qibla-btn {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-sm);
  background: none;
  border: none;
  padding: var(--space-sm) 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-display);
  color: var(--aged-brass);
  letter-spacing: 0.16em;
  transition: opacity var(--transition-fast);
}
.daily-qibla-btn:hover { opacity: 0.85; }
.daily-qibla-btn:active { opacity: 0.7; }

.daily-qibla-btn__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168, 144, 80, 0.45), transparent);
}

.daily-qibla-btn__center {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
}

.daily-qibla-btn__glyph {
  display: inline-flex;
  color: var(--aged-brass);
  opacity: 0.85;
}

.daily-qibla-btn__label {
  letter-spacing: 0.4em;
  margin-right: -0.4em; /* compensate trailing letter-spacing */
}

/* ---- Expanded compass — horizontal strip with brass treatment. */
.daily-compass {
  position: relative;
  border-top: 1px solid rgba(168, 144, 80, 0.22);
  border-bottom: 1px solid rgba(168, 144, 80, 0.22);
  padding: var(--space-md) 0 var(--space-sm);
  text-align: center;
  animation: dailyCompassFade 240ms ease;
  background: linear-gradient(180deg, rgba(168, 144, 80, 0.04), transparent 70%);
}
@keyframes dailyCompassFade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.daily-compass__readout {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-body);
  margin-bottom: 10px;
}
.daily-compass__readout-label {
  font-size: var(--text-xs);
  color: var(--text-lighter);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.daily-compass__readout-degree {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--aged-brass);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.daily-compass__strip {
  position: relative;
  height: 28px;
  overflow: hidden;
  margin: 0 calc(var(--space-sm) * -1);
  mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.daily-compass__ribbon {
  position: relative;
  width: 1440px; /* 360° × 4px */
  height: 100%;
  will-change: transform;
  transition: transform 110ms linear;
}

.daily-compass__tick {
  position: absolute;
  bottom: 0;
  width: 1px;
  background: var(--aged-brass);
  transform: translateX(-50%);
  opacity: 0.4;
}
.daily-compass__tick--minor    { height: 7px;  opacity: 0.25; }
.daily-compass__tick--major    { height: 12px; opacity: 0.45; }
.daily-compass__tick--cardinal { height: 18px; opacity: 0.95; width: 1.5px; }

.daily-compass__cardinal {
  position: absolute;
  top: 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  color: var(--text);
  transform: translateX(-50%);
  line-height: 1;
}

.daily-compass__qibla-pip {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 4px rgba(168, 144, 80, 0.6));
  pointer-events: none;
}

.daily-compass__center {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.daily-compass__status {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-lighter);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 8px;
  transition: color 220ms ease;
}

.daily-compass--aligned {
  background: linear-gradient(180deg, rgba(168, 144, 80, 0.10), transparent 80%);
}
.daily-compass--aligned .daily-compass__status {
  color: var(--aged-brass);
}
.daily-compass--aligned .daily-compass__qibla-pip {
  filter: drop-shadow(0 0 8px rgba(212, 176, 103, 0.95));
}

/* ---- Gem section — same component as Home, just spacing tightened.
       Inherits all styling from views.css home-section / daily-gem-card. */
/* The gem section is rendered as a SIBLING of .watch.daily, so it
   already inherits the full content-area width. Just give it a small
   top breath after the qibla divider. */
.daily-gem-section {
  margin-top: var(--space-md);
}

/* Force the smallest Arabic size on the "Today's Gem" card wherever it
   appears (Home + Daily both use id="daily-gem-card"). Other gem cards
   in Vault / Facet / Field Guide / Treasury still respect the user's
   global Arabic-text-size preference. 1.2rem matches the slider's
   `min` in preferences.js — the gem stays glance-sized in both spots
   irrespective of how big the user has scaled Arabic everywhere else. */
#daily-gem-card .gem-card__arabic,
.daily-gem-section .gem-card__arabic {
  font-size: 1.2rem !important;
  line-height: 1.9 !important;
}

/* Transliteration is always hidden on Daily's gem (the user's global
   transliteration preference still applies everywhere else). Daily
   shows Arabic + translation only — keeps the card glance-sized. */
.daily-gem-section .gem-card__transliteration {
  display: none !important;
}

/* ---- Day Mark — silent glowing rule above the "Daily" title that
       quietly tells you what kind of day this is in the Islamic
       calendar. Color + glow are driven by inline CSS variables set
       in JS so each day type can have its own palette without
       multiplying selectors here.

       Day types and palette (set in app.js getDayMark()):
         • White day (13/14/15)            — pure white
         • Ramadan (whole month)            — warm brass
         • Last 10 of Ramadan               — brighter brass-gold
         • First 8 of Dhul-Hijjah           — soft gold
         • Day of Arafah (9 Dhul-Hijjah)    — emerald
         • Eid al-Adha + Days of Tashriq    — gold
         • Eid al-Fitr (1 Shawwal)          — gold
         • Day of Ashura (10 Muharram)      — soft red

       The mark pulses softly so it reads as a living indicator rather
       than a static line — easy to notice in the corner of the eye
       but never demanding attention. */
.daily-day-mark {
  display: block;
  width: 36px;
  height: 2px;
  margin: 0 auto var(--space-sm);
  background: var(--mark-color, #ffffff);
  border-radius: 2px;
  box-shadow:
    0 0 6px var(--mark-glow, rgba(255, 255, 255, 0.55)),
    0 0 14px var(--mark-glow, rgba(255, 255, 255, 0.4)),
    0 0 22px var(--mark-glow, rgba(255, 255, 255, 0.25));
  animation: dailyMarkPulse 2.6s ease-in-out infinite;
  cursor: help;
}
@keyframes dailyMarkPulse {
  0%, 100% {
    opacity: 0.78;
    box-shadow:
      0 0 5px var(--mark-glow, rgba(255, 255, 255, 0.5)),
      0 0 10px var(--mark-glow, rgba(255, 255, 255, 0.3));
  }
  50% {
    opacity: 1;
    box-shadow:
      0 0 9px var(--mark-glow, rgba(255, 255, 255, 0.7)),
      0 0 20px var(--mark-glow, rgba(255, 255, 255, 0.5)),
      0 0 32px var(--mark-glow, rgba(255, 255, 255, 0.28));
  }
}

/* Eid days deserve a slightly faster, brighter pulse — celebratory feel
   without becoming flashy. */
.daily-day-mark--eid-fitr,
.daily-day-mark--eid-adha {
  width: 44px;
  animation-duration: 2.0s;
}

/* Last 10 of Ramadan — slightly wider mark to mirror its weight in the
   month. Same soft cadence as the rest. */
.daily-day-mark--last-10-ramadan {
  width: 42px;
}

/* Top-left info + Top-right gear — both absolutely positioned so the
   header underneath stays perfectly centered on "Daily" and the city.
   The wrapper takes z-index 2 so its child legend (z-index 50 inside)
   visually overlays the sibling gem section (z-index 1) when expanded
   instead of tucking behind it. */
.watch.daily {
  position: relative;
  z-index: 2;
}
.daily-gem-section {
  position: relative;
  z-index: 1;
}

.daily-corner-info {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-lighter);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-fast), opacity var(--transition-fast);
  opacity: 0.7;
  z-index: 2;
}
.daily-corner-info:hover,
.daily-corner-info:focus-visible {
  color: var(--aged-brass);
  opacity: 1;
}

/* Legend panel opens beneath the info button. Shows each day-mark
   color with a swatch matching the actual glow palette. Capped to
   70dvh with internal scroll so expanding both chevron sections never
   clips content below the bottom nav. z-index sits above the gem
   card and qibla zone but below the bottom nav. */
.daily-legend {
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 320px;
  max-height: 70vh;
  max-height: 70dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: var(--space-md) var(--space-md) 12px;
  background: rgba(28, 25, 23, 0.98);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  z-index: 50;
  font-family: var(--font-body);
  animation: dailyLegendIn 200ms ease both;
}
@keyframes dailyLegendIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.daily-legend[hidden] { display: none; }

.daily-legend__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--aged-brass);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

/* Each section is a native <details> for free a11y. The summary becomes
   a chevron-row, content reveals beneath it. Two sections stack — both
   can be open at once so the user can compare the legend with the
   Hijri-rollover note in the same view. */
.daily-legend__sec {
  border-top: 1px solid rgba(168, 144, 80, 0.12);
}
.daily-legend__sec:first-of-type {
  border-top: none;
}
.daily-legend__sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: var(--text-xxs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.daily-legend__sec-head::-webkit-details-marker { display: none; }
.daily-legend__sec[open] .daily-legend__sec-head { color: var(--aged-brass); }
.daily-legend__chev {
  color: var(--aged-brass);
  opacity: 0.6;
  transition: transform var(--transition-base);
  font-size: var(--text-sm);
}
.daily-legend__sec[open] .daily-legend__chev {
  transform: rotate(180deg);
  opacity: 1;
}

.daily-legend__list {
  list-style: none;
  margin: 4px 0 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--text);
}
.daily-legend__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}
.daily-legend__swatch {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}
.daily-legend__sub {
  color: var(--text-lighter);
  font-size: 0.92em;
  font-style: italic;
  margin-left: 4px;
}

.daily-legend__hint {
  margin-top: 4px;
  padding: 6px 0;
  font-size: 0.72rem;
  color: var(--text-lighter);
  font-style: italic;
  line-height: 1.45;
}
.daily-legend__hint--body {
  padding: 4px 0 8px;
  font-style: normal;
  color: var(--text-light);
}
.daily-legend__today {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-light);
}
.daily-legend__today strong {
  color: var(--aged-brass);
  font-weight: var(--weight-semibold);
}
.daily-legend__today--none {
  color: var(--text-lighter);
  font-style: italic;
}
.daily-corner-gear {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-lighter);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-fast), opacity var(--transition-fast);
  opacity: 0.7;
  z-index: 2;
}
.daily-corner-gear:hover,
.daily-corner-gear:focus-visible {
  color: var(--aged-brass);
  opacity: 1;
}

/* Center the city line under "Daily" — was previously left-anchored
   with an inline gear; now the wrapper is text-center via watch__header. */
.watch.daily .watch__city {
  text-align: center;
}

/* Hijri date on the Daily tab — sits between the title and the city.
   Lives here (not in the global header) so chrome up top stays focused
   on the slogan. Sized smaller than city, brass-tinted to read as a
   secondary calendar anchor. */
.watch.daily .watch__hijri {
  margin: 6px 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--aged-brass);
  opacity: 0.85;
}

.daily-gem-loading {
  padding: var(--space-md);
  text-align: center;
  color: var(--text-lighter);
  font-style: italic;
  font-size: var(--text-sm);
  border: 1px dashed rgba(168, 144, 80, 0.25);
  border-radius: 8px;
}

/* The daily wrapper inside .watch has slightly tighter top breathing room
   so the header sits closer to the screen top. */
.watch.daily .watch__header {
  margin-bottom: var(--space-md);
}