/* Page Observer */

.aim { display: flex; flex-direction: column; gap: 18px; }
.aim-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.aim-head h1 { font-weight: 600; }
.aim-pick .field { min-width: min(100%, 22rem); appearance: auto; }
.aim-read { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.aim-read dt { color: var(--muted); font-size: var(--step-small); }
.aim-read dd.num { font-size: clamp(2.75rem, 1.2rem + 5vw, 6rem); line-height: 1; letter-spacing: -0.04em; font-weight: 500; white-space: nowrap; }
.aim-read .aim-sub { font-size: var(--step-lead); margin-top: 6px; }
.aim-read .aim-sub.below { color: var(--muted); }
.aim-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 24px; }
.aim-more dt { font-size: var(--step-small); color: var(--muted); }
.aim-more dd { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.aim-actions { display: grid; gap: 10px; margin-top: auto; }
.aim-actions .button { justify-self: start; }

.dial-tile { display: grid; gap: 12px; align-content: start; justify-items: center; }
.dial, .gauge { width: 100%; max-width: 320px; }
.dial text, .gauge text { font-family: var(--mono); font-size: 12px; fill: var(--muted); }
.dial .ring { fill: var(--tile-2); }
.dial .tick { stroke: var(--rule); stroke-width: 1; }
.dial .needle { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.dial .hub { fill: var(--ink); }
.dial .cardinal { font-family: var(--font); font-size: 15px; fill: var(--ink); font-weight: 600; }
.gauge .track { fill: none; stroke: var(--tile-2); stroke-width: 14; }
.gauge .value { fill: none; stroke: var(--accent); stroke-width: 14; }
.gauge .below { stroke: var(--muted); }

.polar { display: grid; gap: 14px; align-content: start; }
.polar h2, .reticle-head h2, .deep-head h2:not(.head) { font-size: var(--step-lead); font-weight: 600; }
.polar-big { font-size: clamp(2.5rem, 1.4rem + 3vw, 4.25rem); line-height: 1; letter-spacing: -0.04em; }

.reticle-tile { display: grid; gap: 14px; align-content: start; }
.reticle-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; }
.reticle { width: 100%; max-width: 360px; justify-self: center; }
.reticle .field-of-view { fill: #121314; }
[data-theme='night'] .reticle .field-of-view { fill: #050000; }
.reticle .ring { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
[data-theme='night'] .reticle .ring { stroke: rgba(138, 46, 36, 0.45); }
.reticle .cross { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
[data-theme='night'] .reticle .cross { stroke: rgba(138, 46, 36, 0.45); }
.reticle .hour { font-family: var(--mono); font-size: 11px; fill: rgba(255, 255, 255, 0.6); }
[data-theme='night'] .reticle .hour { fill: var(--muted); }
.reticle .star { fill: var(--accent); }
.reticle .pole { fill: rgba(255, 255, 255, 0.8); }
[data-theme='night'] .reticle .pole { fill: var(--ink); }

.deep { display: grid; gap: 16px; }
.deep-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.deep-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.deep-all { display: inline-flex; align-items: center; gap: 8px; font-size: var(--step-small); }
.deep-all input { width: 18px; height: 18px; accent-color: var(--accent); }
.deep-list { display: grid; gap: 6px; }
.deep-more { justify-self: start; }
.dso {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto auto;
  gap: 4px 20px;
  align-items: center;
  padding: 12px 16px;
  background: var(--tile-2);
}
.dso.low { opacity: 0.6; }
.dso .m { font-family: var(--mono); font-size: var(--step-lead); font-weight: 500; }
.dso .what strong { display: block; font-weight: 600; }
.dso .what span { font-size: var(--step-small); color: var(--muted); }
.dso .when { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--step-small); }
.dso .when b { display: block; font-weight: 500; font-size: var(--step-body); }
.dso .moon-warn { color: var(--ink); font-weight: 600; }
.dso .button { min-height: 40px; padding: 8px 14px; background: var(--tile); }

/* Mode viseur : plein écran */
.viewfinder { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; background: var(--bg); }
.viewfinder::backdrop { background: var(--bg); }
.vf-body { height: 100%; display: grid; grid-template-rows: auto 1fr auto auto auto auto; gap: 12px; padding: 16px; max-width: 640px; margin: 0 auto; }
.vf-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vf-top h2 { font-weight: 600; }
.vf-scope { width: 100%; height: 100%; max-height: 52dvh; }
.vf-scope .bg { fill: var(--tile); }
.vf-scope .ring { fill: none; stroke: var(--rule); stroke-width: 1; }
.vf-scope .center { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.vf-scope .target { fill: var(--accent); }
.vf-scope .target.on { stroke: var(--ink); stroke-width: 3; }
.vf-guide { font-size: var(--step-head); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.vf-nums { color: var(--muted); }
.vf-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.vf-note { color: var(--muted); }

@media (max-width: 1080px) {
  .aim, .polar, .reticle-tile { grid-column: span 12; }
  .dial-tile { grid-column: span 12; grid-template-columns: 1fr 1fr; align-items: center; }
}
@media (max-width: 640px) {
  .aim-read { grid-template-columns: 1fr; }
  .dial-tile { grid-template-columns: 1fr; }
  .dso { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .dso .when { grid-column: 2; text-align: left; }
  .dso .button { grid-column: 2; justify-self: start; }
}