.sun-article .sun-breadcrumb { display:flex; flex-wrap:wrap; gap:9px; margin:24px 0; font-size:.84rem; color:var(--muted); }
.sun-article .sun-breadcrumb a { color:var(--muted); }
.sun-article .legal-section p { line-height:1.8; }
.sun-article .sun-tool { overflow:hidden; border:1px solid var(--line); border-radius:18px; margin-top:18px; background:#0c151b; }
.sun-tool-head { padding:22px 24px 6px; }
.sun-tool-head h3 { font-size:1.35rem; margin:8px 0; }
.sun-controls { display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:end; padding:18px 24px; }
.sun-controls label { display:grid; gap:8px; color:var(--muted); font-size:.82rem; min-width:0; }
.sun-controls input[type=number],.sun-controls select { width:100%; min-width:0; min-height:46px; padding:10px; background:#18252c; color:var(--text); border:1px solid #55656b; border-radius:8px; font:inherit; font-size:1rem; }
.sun-controls button { min-height:46px; }
.sun-range-control { padding:0 24px 18px; }
.sun-range-control label { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.86rem; color:var(--muted); }
.sun-range-control input { display:block; width:100%; min-height:44px; accent-color:var(--accent); cursor:pointer; }
.sun-range-endpoints { display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted); }
.sun-planet-pills { display:flex; flex-wrap:wrap; gap:7px; padding:0 24px 22px; }
.sun-planet-pills button { padding:10px 13px; min-height:44px; color:var(--text); background:#18252c; border:1px solid #455960; border-radius:8px; font:inherit; font-size:.86rem; cursor:pointer; }
.sun-planet-pills [aria-pressed=true] { background:var(--accent); color:#101416; border-color:var(--accent); }
.sun-shared-scale { margin:0!important; padding:12px 24px; background:#1c2b31; color:#f6d481!important; font-size:.83rem; }
.sun-comparison { display:grid; grid-template-columns:1fr 1fr; }
.sun-comparison figure { margin:0; min-width:0; border-bottom:1px solid var(--line); }
.sun-comparison figure+figure { box-shadow:inset 1px 0 0 var(--line); }
.sun-comparison figcaption { padding:16px 20px 8px; color:var(--muted); font-size:.83rem; }
.sun-comparison figcaption strong { display:block; margin-top:8px; color:var(--text); font-size:1.3rem; }
.sun-comparison svg { display:block; width:100%; aspect-ratio:1; height:auto; background:radial-gradient(circle at center,#172a33,#080f16 70%); }
.sun-comparison .sun-grid { stroke:#9fb0aa; stroke-opacity:.14; stroke-width:1; }
.sun-comparison .sun-disk { transition:r 240ms ease; }
.sun-comparison .sun-axis { fill:#9fb0aa; font:11px system-ui,sans-serif; }
.sun-comparison .sun-comparison-value { display:block; padding:0 20px 16px; color:var(--muted); font-size:.82rem; }
.sun-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:22px 24px; margin:0; }
.sun-metrics div { padding:14px; border:1px solid var(--line); border-radius:10px; min-width:0; }
.sun-metrics dt { color:var(--muted); font-size:.76rem; line-height:1.5; }
.sun-metrics dd { margin:8px 0 0; font-size:1.12rem; font-weight:700; overflow-wrap:anywhere; }
.sun-metrics small { display:block; font-size:.76rem; font-weight:400; color:var(--muted); margin-top:6px; }
.sun-tool-notes { padding:0 24px 22px; }
.sun-tool-notes p { margin:10px 0!important; font-size:.86rem; }
.sun-status { min-height:44px; padding:14px 24px; margin:0!important; border-top:1px solid var(--line); color:var(--accent)!important; font-size:.83rem; }
.sun-table-wrap { overflow-x:auto; max-width:100%; border:1px solid var(--line); border-radius:10px; }
.sun-table { border-collapse:collapse; width:100%; font-size:.9rem; }
.sun-table caption { text-align:left; padding:14px; color:var(--muted); }
.sun-table th,.sun-table td { padding:14px 12px; text-align:left; border-bottom:1px solid var(--line); }
.sun-table thead th { background:#1b292f; }
.sun-math { padding:18px; border-left:3px solid var(--accent); border-radius:6px; background:#1a262b; line-height:1.8; }
.sun-tool :focus-visible,.sun-table-wrap:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.sun-tool [hidden] { display:none!important; }
@media(max-width:760px) { .sun-metrics { grid-template-columns:1fr 1fr; } .sun-controls { grid-template-columns:1fr 1fr; } .sun-controls button { grid-column:1/-1; } }
@media(max-width:520px) {
  .sun-tool-head { padding:14px 12px 0; }
  .sun-tool-head .label { display:none; }
  .sun-tool-head h3 { font-size:1.1rem; margin:4px 0; }
  .sun-controls { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; padding:12px; }
  .sun-controls label { font-size:.74rem; gap:6px; }
  .sun-controls input[type=number],.sun-controls select { padding:8px; }
  .sun-range-control { padding:0 12px 8px; }
  .sun-range-control label { font-size:.77rem; gap:6px; }
  .sun-range-endpoints { font-size:.7rem; }
  .sun-planet-pills { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:0 12px 10px; gap:6px; }
  .sun-planet-pills button { min-width:0; padding:9px 2px; font-size:clamp(.62rem,2.9vw,.8rem); }
  .sun-shared-scale { padding:8px 12px; font-size:.72rem; }
  .sun-comparison { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sun-comparison figcaption { height:88px; padding:10px 8px 6px; font-size:.71rem; }
  .sun-comparison figcaption strong { font-size:.94rem; line-height:1.25; margin-top:5px; }
  .sun-comparison .sun-axis { display:none; }
  .sun-comparison .sun-comparison-value { padding:8px; font-size:.7rem; line-height:1.5; overflow-wrap:anywhere; }
  .sun-scene-note { padding:10px 12px; font-size:.72rem; }
  .sun-metrics { padding:12px; gap:8px; }
  .sun-metrics dd { font-size:1rem; }
  .sun-table th,.sun-table td { padding:12px 8px; font-size:.78rem; }
}
@media(prefers-reduced-motion:reduce) { .sun-tool * { transition:none!important; animation:none!important; } }

/* Decorative motifs sit below the solar disks and never change their scale. */
.sun-clouds { display:none; }
.sun-comparison svg[data-horizon-type="clouds"] .sun-clouds { display:block; }
.sun-comparison svg[data-horizon-type="clouds"] .sun-terrain { display:none; }
.sun-tool[data-sun-scene="custom"] svg[aria-labelledby="sun-selected-title sun-selected-description"] .sun-scenery { display:none; }
.sun-scene-note { margin:0!important; padding:12px 24px; color:var(--muted)!important; border-bottom:1px solid var(--line); font-size:.78rem; }
@media(max-width:520px) and (max-height:620px) {
  .sun-tool-head h3 { font-size:.95rem; }
  .sun-scale-detail { display:none; }
  .sun-comparison figcaption { height:64px; }
  .sun-comparison figcaption strong { font-size:.82rem; }
}