/* =========================================================
   Wallpaper View — fullscreen live display
   ========================================================= */

.wallpaper-body{
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  background:
    radial-gradient(ellipse at top right, rgba(125,107,174,.18), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(232,176,84,.12), transparent 55%),
    var(--bg-0);
}

.wp-back-link{
  position:fixed; top:20px; left:20px; z-index:20;
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-1); border:1px solid var(--border);
  color:var(--text-2); text-decoration:none;
  transition:all var(--transition-fast);
  opacity:.55;
}
.wp-back-link:hover{ opacity:1; color:var(--accent-gold); border-color:var(--accent-gold); }

.wp-shell{
  max-width:1400px; margin:0 auto;
  padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 48px);
  display:flex; flex-direction:column;
  gap: clamp(24px, 4vw, 48px);
  min-height:100vh;
  min-height:100dvh;
  justify-content:center;
}

/* ---- Hero ---- */
.wp-hero{ text-align:center; }
.wp-clock{
  font-family:var(--font-mono);
  font-size:clamp(48px, 11vw, 128px);
  font-weight:700;
  color:var(--text-1);
  letter-spacing:2px;
  line-height:1;
  text-shadow:0 0 40px rgba(232,176,84,.25);
}
.wp-date{
  font-size:clamp(14px, 2.2vw, 22px);
  color:var(--text-2);
  margin-top:10px;
  font-weight:500;
}
.wp-quote{
  font-family:var(--font-display);
  font-size:clamp(13px, 1.6vw, 17px);
  color:var(--accent-gold);
  margin-top:18px;
  font-style:italic;
  opacity:.9;
}

/* ---- Grid ---- */
.wp-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "ring next status status"
    "timeline timeline calendar calendar";
  gap: clamp(14px, 2vw, 22px);
}
@media (max-width:980px){
  .wp-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "ring next"
      "status status"
      "timeline timeline"
      "calendar calendar";
  }
}
@media (max-width:600px){
  .wp-grid{
    grid-template-columns: 1fr;
    grid-template-areas: "ring" "next" "status" "timeline" "calendar";
  }
}
@media (min-width:1800px){
  .wp-grid{ grid-template-columns: repeat(6, 1fr); }
}

.wp-card{
  background:rgba(19,27,46,.55);
  backdrop-filter: blur(14px);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding: clamp(16px, 2vw, 24px);
  box-shadow:var(--shadow-1);
}
body.light .wp-card{ background:rgba(255,255,255,.65); }

.wp-ring-card{ grid-area:ring; display:flex; align-items:center; justify-content:center; }
.wp-ring-card .ring-wrap{ width:clamp(100px, 12vw, 160px); height:clamp(100px, 12vw, 160px); }
.wp-ring-card .dawn-ring{ width:100%; height:100%; }

.wp-next-card{ grid-area:next; display:flex; flex-direction:column; justify-content:center; gap:6px; }
.wp-label{ font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-3); font-weight:600; }
.wp-next-title{ font-size:clamp(16px, 2vw, 22px); font-weight:700; color:var(--text-1); }
.wp-countdown{ font-family:var(--font-mono); font-size:clamp(18px, 2.4vw, 28px); color:var(--accent-teal); font-weight:600; }

.wp-status-card{ grid-area:status; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.wp-status-row{ display:flex; gap:10px; flex-wrap:wrap; }
.wp-status-pill{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-weight:700; font-size:15px;
  padding:8px 16px; border-radius:10px;
}
.wp-status-pill.done{ background:rgba(79,209,197,.14); color:var(--accent-teal); }
.wp-status-pill.pending{ background:rgba(232,176,84,.14); color:var(--accent-gold); }
.wp-status-pill.missed{ background:rgba(232,99,111,.14); color:var(--accent-rose); }
.wp-weather{ font-size:13px; color:var(--text-3); display:flex; align-items:center; gap:6px; }

.wp-timeline-card{ grid-area:timeline; max-height:340px; overflow-y:auto; }
.wp-timeline-card h3{ font-size:13px; color:var(--text-2); margin-bottom:12px; font-weight:600; }

.wp-calendar-card{ grid-area:calendar; }
.wp-calendar-card .calendar-nav{ margin-bottom:10px; }
.wp-calendar-card .cal-day{ cursor:default; }