/* Daily Picks Lite v0.3.5 (Optimized for Lazy & Non-blocking Rendering) */
:root{
  --bg1:#F5F1E8; /* warm cream */
  --bg2:#E8DCC0; /* beige */
  --glass-teal:#20B2AA;
  --text:#2F4F4F; /* deep navy slate */
  --accent:#D2691E; /* terracotta */
  --teal2:#48CAE4; /* turquoise */
  --wood:#8B4513; /* warm brown */
  --glass: rgba(32,178,170,0.15);
  --border: rgba(255,255,255,0.3);
}
/* Page back gradient wrapper spacing */
.dpl-wrap{ max-width:1000px; margin:1rem auto; padding:0 10px; }
.dpl-card{ padding:12px; color:var(--text); background: linear-gradient(180deg, var(--bg1), var(--bg2)); border-radius:20px; }
.glass{ backdrop-filter: blur(15px); box-shadow:0 15px 35px rgba(0,0,0,0.1); border:1px solid var(--border); }

/* Small reusable glass */
.glass-mini{ background: var(--glass); border:1px solid var(--border); border-radius: 16px; }

/* Header */
.dpl-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.35rem; }
.dpl-header .label{ display:flex; align-items:center; gap:.45rem; padding:.35rem .6rem; color:var(--accent); font-family: var(--serif, serif); }
.icon-palette{ color: var(--accent); }

.color-dots{ display:flex; gap:.4rem; margin:.2rem 0 .5rem; }
.color-dots span{ width:12px; height:12px; border-radius:50%; background: var(--c, var(--accent)); box-shadow:0 2px 8px rgba(0,0,0,.15); }

/* Hero */
.dpl-hero{ margin:.4rem 0 .7rem; min-height:72px; }
.hero-card{ display:grid; grid-template-columns: 110px 1fr; gap:.75rem; align-items:center; padding:.5rem; transition:transform .25s ease, box-shadow .25s ease; }
.hero-card img{ width:100%; height:110px; object-fit:cover; border-radius:12px; }
.hero-card h3{ margin:.05rem 0; font-size:clamp(.98rem,.9rem + .4vw,1.15rem); font-family: var(--serif, serif); color: var(--text); }
.hero-card a{ color:var(--text); text-decoration:none; border-bottom:1px dashed transparent; }
.hero-card a:hover{ border-color:var(--accent); }
.metas{ opacity:.9; font-size:.88rem; color: var(--text); }
.meta{ color: var(--wood); }

/* Hover glow */
.hover-glow:hover{ box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 0 0 2px rgba(210,105,30,.35) inset; transform: translateY(-2px); }

/* Calendar */
.dpl-calendar{ padding:.5rem; }
.cal-top{ display:flex; align-items:center; justify-content:center; gap:.75rem; margin-bottom:.4rem; }
.cal-title{ margin:0; font-size:1rem; font-family: var(--serif, serif); color:var(--wood); }
.nav-btn{ width:36px; height:36px; border-radius:10px; background: var(--glass); border:1px solid var(--border); color:var(--text); cursor:pointer; font-size:18px; line-height:34px; transition: background .2s ease, box-shadow .2s ease; }
.nav-btn:hover{ box-shadow:0 0 0 2px var(--teal2) inset; }
.grid{ display:grid; grid-template-columns: repeat(7, minmax(34px,1fr)); gap:.45rem; }
.weekday{ text-align:center; opacity:.85; font-size:.8rem; font-family: var(--serif, serif); color: var(--wood); }
.day{ position:relative; background: var(--glass); color:var(--text); padding:.55rem 0; border-radius:10px; border:1px solid var(--border); cursor:pointer; transition: background .2s ease, transform .15s ease; }
.day:hover{ transform: translateY(-1px); background: rgba(72,202,228,0.15); }
.day.has{ outline:1px solid rgba(72,202,228,.55); }
.day.active{ box-shadow: inset 0 0 0 2px var(--accent); }
.day .dot{ position:absolute; width:6px; height:6px; border-radius:50%; background:var(--accent); right:6px; bottom:6px; display:none; }
.day.has .dot{ display:block; }
.legend{ margin-top:.3rem; font-size:.85rem; display:flex; gap:.5rem; align-items:center; color: var(--text); }
.legend .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); }

/* Nearby */
.dpl-nearby-wrap h3{ margin:.6rem 0 .4rem; padding:.3rem .6rem; color:var(--text); font-family: var(--serif, serif); }
.chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.chip{ display:flex; align-items:center; gap:.35rem; padding:.35rem .5rem; background: var(--glass); border:1px solid var(--border); border-radius:999px; color:var(--text); text-decoration:none; font-size:.9rem; transition: transform .15s ease, box-shadow .2s ease; }
.chip:hover{ transform: translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.12); }
.chip img{ width:20px; height:20px; border-radius:50%; object-fit:cover; }

/* Focus */
:where(.dpl-card button,.dpl-card a):focus-visible{ outline:2px solid var(--teal2); outline-offset:2px; }

/* Responsive */
@media (max-width:720px){
  .hero-card{ grid-template-columns: 92px 1fr; }
  .hero-card img{ height:92px; }
  .grid{ grid-template-columns: repeat(7, minmax(30px,1fr)); }
  .nav-btn{ width:34px; height:34px; line-height:32px; }
}