/* sunmoon.css */
.sm-city-list{display:flex;flex-direction:column;gap:20px;margin-top:16px;}
.sm-city-card{background:var(--clr-bg2);border:1px solid var(--clr-border);border-radius:var(--rxl);overflow:hidden;box-shadow:var(--sh);}
.sm-card-hdr{display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--clr-bg3);border-bottom:1px solid var(--clr-border);}
.sm-card-hdr .city-name{font-size:15px;font-weight:700;color:var(--clr-text);}
.sm-card-hdr .country-name{font-size:12px;color:var(--clr-text2);}
.sm-rm{margin-left:auto;background:none;border:none;color:var(--clr-text3);font-size:16px;cursor:pointer;padding:2px 6px;border-radius:4px;transition:color .15s;}
.sm-rm:hover{color:#c62828;}

/* Sun arc */
.sun-section{padding:16px 18px 10px;}
.sun-section h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--clr-text2);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.sun-arc-wrap{position:relative;height:90px;margin:0 0 12px;}
.sun-arc-svg{width:100%;height:90px;}
.sun-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:8px;}
.fact{background:var(--clr-bg3);border-radius:var(--rlg);padding:10px 12px;text-align:center;}
.fact-icon{font-size:22px;margin-bottom:3px;}
.fact-val{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--clr-brand);}
.fact-lbl{font-size:10px;color:var(--clr-text2);margin-top:2px;}

/* Divider */
.sm-divider{height:1px;background:var(--clr-border);margin:0 18px;}

/* Moon section */
.moon-section{padding:14px 18px 16px;}
.moon-section h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--clr-text2);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.moon-arc-wrap{position:relative;height:70px;margin:0 0 12px;}
.moon-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;}
.moon-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(100,100,200,.1);border:1px solid rgba(100,100,200,.2);border-radius:20px;padding:3px 10px;font-size:12px;color:var(--clr-text2);margin-top:8px;}

/* Timeline bar (for sun/moon) */
.tl-bar{height:10px;border-radius:5px;background:var(--clr-bg3);position:relative;overflow:visible;margin:4px 0;}
.tl-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,#f59e0b,#f97316);}
.tl-fill.moon-fill{background:linear-gradient(90deg,#818cf8,#c084fc);}
.tl-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--clr-brand);box-shadow:0 2px 6px rgba(0,0,0,.2);z-index:2;}
.tl-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--clr-text3);margin-top:3px;font-family:var(--mono);}

/* Empty state */
.sm-empty{text-align:center;padding:48px 20px;color:var(--clr-text3);}
.sm-empty i{font-size:40px;margin-bottom:12px;display:block;}

@media(max-width:600px){
  .sun-facts,.moon-facts{grid-template-columns:repeat(3,1fr);}
  .fact-val{font-size:12px;}
}