/* ============================================================
 * Graph views
 * The 24-hour and year graph boxes, their legends, and the golden-hour/twilight layer-toggle checkboxes.
 * ============================================================ */
/* ---------- Toggle Controls ---------- */
.layer-toggle{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--ink-dim); cursor:pointer; margin-left:4px;}
.layer-toggle input{accent-color:var(--gold); cursor:pointer;}

/* ---------- Graph view ---------- */
.graph-controls{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.graph-box{
  background:var(--bg-panel); border:1px solid var(--line-soft); border-radius:var(--radius); padding:18px;
}
.graph-legend{display:flex; gap:18px; margin-top:12px; flex-wrap:wrap;}
.legend-item{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-dim);}
.legend-swatch{width:12px; height:12px; border-radius:3px;}
.legend-line{display:inline-block; width:18px; height:2px; border-radius:1px; vertical-align:middle;}
.legend-line-dashed{display:inline-block; width:18px; height:0; border-top:2px dashed var(--ink-faint); vertical-align:middle;}