/* Wrapper + palette */
.mid-fa { --fa-teal:#60C5BF; --fa-magenta:#C35AA2; --fa-gray:#808080; --fa-accent:#F68C1F; color:#111; }
.mid-fa .screen-reader-text{position:absolute;left:-9999px;}

/* Hero */
.mid-fa .fa-hero { border:2px solid #eee; border-radius:14px; padding:12px; margin:10px 0 16px; background:#fff; }
.mid-fa .fa-hero.full-moon-day { border-color: var(--fa-accent); }
.mid-fa .fa-hero.new-moon-day { border-color: var(--fa-gray); }
.mid-fa .fa-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.mid-fa .fa-station-name { font-weight:600; }
.mid-fa .fa-select { padding:6px 8px; border-radius:8px; border:1px solid #ddd; background:#fff; }
.mid-fa .fa-meta { display:flex; gap:12px; flex-wrap:wrap; font-size:0.95rem; color:#222; }
.mid-fa .fa-moon-tag .fa-emoji{margin-right:4px;}

.mid-fa .fa-hero-grid { display:grid; grid-template-columns: 140px 1fr 260px; gap:12px; align-items:center; }
@media (max-width: 800px){ .mid-fa .fa-hero-grid { grid-template-columns: 1fr; } }

.fa-score { display:flex; align-items:center; justify-content:center; }
.fa-ring .ring-bg { fill:none; stroke:#eee; stroke-width:10; }
.fa-ring .ring-val { fill:none; stroke: var(--fa-accent); stroke-width:10; stroke-linecap:round; transform:rotate(-90deg); transform-origin:60px 60px; }
.fa-ring .ring-caption { font-size:10px; fill:#666; }
.fa-ring .ring-score { font-size:22px; font-weight:700; fill:#111; }
.fa-ring .ring-label { font-size:11px; fill:#444; }

.fa-chart { position:relative; }
.fa-spark { width:100%; height:auto; display:block; }
.fa-spark .curve { fill:none; stroke:#111; stroke-width:2; }
.fa-spark .grid { stroke:#f1f1f1; stroke-width:1; }
.fa-spark .tick { font-size:10px; fill:#555; }
.fa-spark .now-dot { fill:red; stroke:white; stroke-width:1.5; }
.fa-spark .rect-major { fill: var(--fa-teal); opacity:0.20; }
.fa-spark .rect-minor { fill: var(--fa-magenta); opacity:0.15; }

/* Scale bands */
.fa-spark .band-high { fill:#eefaf7; }   /* top */
.fa-spark .band-med  { fill:#f6c6ff !important; }   /* middle */
.fa-spark .band-low  { fill:#eefaf7; }   /* bottom */
.fa-spark .y-label { font-size:10px; fill:#666; }

.fa-legend { margin-top:6px; display:flex; gap:16px; font-size:0.95rem;}
.fa-legend .dot.major:before{content:""; display:inline-block; width:12px;height:12px; background:var(--fa-teal); opacity:.6; margin-right:6px; border-radius:3px;}
.fa-legend .dot.minor:before{content:""; display:inline-block; width:12px;height:12px; background:var(--fa-magenta); opacity:.6; margin-right:6px; border-radius:3px;}
.fa-legend .dot.scale:before{content:""; display:inline-block; width:12px;height:12px; background:#ddd; margin-right:6px; border-radius:3px;}

.fa-bests .fa-best-title { font-weight:600; margin-bottom:2px; }
.fa-bests .fa-best-row { background:#fafafa; border:1px solid #eee; padding:6px 8px; border-radius:8px; margin-bottom:6px; }

/* Planner */
.fa-planner-title { margin:14px 0 8px; }
.fa-grid-cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap:10px; }
.fa-card { border:1px solid #eee; border-radius:12px; padding:10px; background:#fff; transition:box-shadow .15s ease; }
.fa-card:hover { box-shadow:0 2px 10px rgba(0,0,0,.06); }
.fa-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.fa-card-date { font-weight:600; font-size:0.8rem; }
.fa-card-moon { font-size:0.8rem; color:#222; }
.fa-card-score-wrap { display:flex; align-items:baseline; gap:8px; margin:4px 0; background-color: #f68c1f; padding: 2px 5px; border-radius: 5px; }
.fa-card-score { font: 700 20px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial; color:#fff; }
.fa-card-score-label { font-size:12px; color:#fff; }
.fa-card-windows .row { padding:3px 6px; border-radius:6px; margin:3px 0; background:#fafafa; border:1px solid #eee; }
.fa-card-windows .row.major { border-color: var(--fa-teal); }
.fa-card-windows .row.minor { border-color: var(--fa-magenta); }
.fa-card-windows .row.none { color:#777; }

/* Moon slug hooks (for future styling) */
.moon-phase.full-moon {}
.moon-phase.new-moon {}
.moon-phase.first-quarter {}
.moon-phase.last-quarter {}
.moon-phase.waxing-gibbous {}
.moon-phase.waning-gibbous {}
.moon-phase.waxing-crescent {}
.moon-phase.waning-crescent {}

.mid-fa-error { border:1px solid #f3d4c6; background:#fff7f3; color:#7a2e17; padding:10px; border-radius:10px; }

.fa-debug { margin-top:14px; }
.fa-pre { background:#0b1020; color:#d7e3ff; padding:10px; border-radius:10px; overflow:auto; max-height:280px; }