/* Page Astromodélisme : même mise en page que la page Astrophoto (barre de réglages, tuiles qui se répondent). */

/* Les tuiles en grille ne s'élargissent pas au contenu (tableaux, SVG) : elles restent dans l'écran. */
.tr-wx, .tr-limits, .tr-alt, .tr-chute, .tr-drift-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }

/* Barre de réglages : titre, lieu, jour et heure du tir */
.tr-top { display: grid; grid-template-columns: 1fr auto; gap: 12px 24px; align-items: end; }
.tr-title { display: grid; gap: 4px; }
.tr-title h1 { font-weight: 600; }
.tr-when { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 16px; }
.tr-group { display: grid; gap: 4px; }
.tr-when .segmented { flex-wrap: wrap; }
.tr-when .segmented button:not([aria-pressed='true']) { background: var(--tile); }
.tr-when .field { width: auto; min-width: 7.5rem; background: var(--tile); }
.tr-when .tr-print { background: var(--tile); min-height: 44px; }

/* Champs (seuils, parachute) */
.tr-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; align-items: end; }
.tr-field { display: grid; gap: 4px; min-width: 0; }
.tr-field[hidden] { display: none; }
.tr-field .field { background: var(--bg); }
.tr-limits .button, .tr-chute .segmented { justify-self: start; }
.tr-limits .button { min-height: 44px; background: var(--tile); }
.tr-limits a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; }

/* Parachute : la tuile est une colonne ; le GO / NO GO occupe tout le bas, bord à bord, séparé du haut par la même
   bande que celle entre deux tuiles. */
.tr-chute { display: flex; flex-direction: column; gap: 12px; }
.tr-chute > .segmented, .tr-chute > .tr-toggle { align-self: flex-start; }
/* Double déploiement : interrupteur, même style que les boutons « Auto » d'Astrophoto. */
.tr-toggle { border: 0; background: var(--tile-2); color: var(--ink); padding: 10px 14px; min-height: 44px; cursor: pointer; font-size: var(--step-small); }
.tr-toggle[aria-pressed='true'] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
[data-theme='night'] .tr-toggle[aria-pressed='true'] { background: #260906; color: var(--accent); }
#ch-warn { color: var(--ink); }
.tr-go {
  flex: 1 1 auto; display: grid; align-content: center; gap: 6px; min-height: 180px;
  margin: 8px calc(-1 * var(--pad)) calc(-1 * var(--pad)); padding: var(--pad);
  border-top: var(--gap) solid var(--bg); background: var(--tile-2);
}
.tr-go-word { font-size: clamp(2.75rem, 1.6rem + 3.4vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.tr-go-when { font-size: var(--step-lead); font-weight: 500; }
.tr-go-detail .num { white-space: nowrap; }
.tr-go-note { opacity: 0.8; }
/* GO : le vert de l'accent ; NO GO : un rouge de même clarté, texte sombre dans les deux cas (contraste ≥ 5:1). */
.tr-go[data-state='go'] { background: var(--accent); color: var(--accent-ink); }
.tr-go[data-state='nogo'] { background: #d0705f; color: #0c0d0d; }
.tr-go[data-state='wait'] .tr-go-word { color: var(--muted); }
/* Thème rouge : tout reste très sombre. GO : fond des boutons principaux, mot en accent ; NO GO : fond noir et
   cadre rouge sombre. Le mot lui-même dit l'état, la couleur ne fait que le souligner. */
[data-theme='night'] .tr-go[data-state='go'] { background: #260906; color: var(--accent); }
[data-theme='night'] .tr-go[data-state='nogo'] { background: #000; color: var(--ink); box-shadow: inset 0 0 0 2px #5c1d16; }

/* Résultats en grands chiffres */
.tr-big { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px 24px; }
.tr-big div { display: grid; gap: 2px; }
.tr-big dt { font-size: var(--step-small); color: var(--muted); }
.tr-big dd { font-family: var(--mono); font-variant-numeric: tabular-nums slashed-zero; font-size: var(--step-lead); line-height: 1.15; }
.tr-big dd .txt { font-family: var(--font); font-size: var(--step-small); color: var(--muted); display: block; }

/* Météo de tir : heures dans les seuils mises en avant, comme les nuits sans Lune d'Astrophoto */
.tr-wx-table td, .tr-wx-table th { padding-block: 7px; }
.tr-wx-table td { font-size: 0.9rem; white-space: nowrap; }
.tr-wx-table tr[data-ok='true'] td:first-child { color: var(--accent); font-weight: 500; }
.tr-wx-table tr[data-ok='true'] td { background: var(--field); }
.tr-wx-table td.bad { color: var(--ink); text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 0.2em; }
.tr-wx-table tr:not([data-ok='true']) td:not(.bad) { color: var(--muted); }
.tr-wx-table tr:not([data-ok='true']) td:first-child { color: var(--ink); }

/* Graphique vitesse / altitude */
.tr-alt-svg { width: 100%; height: auto; display: block; }
.ta-grid { stroke: var(--rule); stroke-width: 1; }
.ta-label { font-family: var(--mono); font-size: 13px; fill: var(--muted); }
.ta-unit { font-family: var(--font); font-size: 13px; fill: var(--muted); }
.ta-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.ta-dot { fill: var(--ink); }
.ta-arrow { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ta-open { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 5; }
.ta-open-label { font-family: var(--font); font-size: 13px; fill: var(--accent); }

/* Dérive : résultats à gauche, schéma vu de dessus à droite */
.tr-drift { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 40px; align-items: center; }
.tr-drift-svg { width: 100%; max-width: 420px; height: auto; display: block; justify-self: center; }
.td-ring { fill: none; stroke: var(--rule); stroke-width: 1; }
.td-axis { stroke: var(--rule); stroke-width: 1; }
.td-path { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 4; }
.td-pad { fill: var(--ink); }
.td-land { fill: var(--accent); }
.td-text { font-family: var(--font); font-size: 14px; fill: var(--muted); }
.td-num { font-family: var(--mono); font-size: 13px; fill: var(--muted); }
.td-scale { stroke: var(--ink); stroke-width: 2; }
.td-zone { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.td-var { fill: none; stroke: var(--muted); stroke-width: 1.5; }

/* Dérive heure par heure */
.tr-hours { display: grid; gap: 8px; margin-top: 8px; }
.tr-hours h3 { font-weight: 600; }
.tr-hours-svg { width: 100%; height: auto; display: block; cursor: pointer; }
.th-ok { fill: var(--muted); }
.th-bad { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.th-sel { fill: var(--accent); }

@media (max-width: 1080px) {
  .tr-wx, .tr-limits { grid-column: span 12; }
}
@media (max-width: 860px) {
  .tr-alt, .tr-chute { grid-column: span 12; }
  .tr-drift { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tr-top { grid-template-columns: 1fr; }
  .tr-when .field { min-width: 0; }
  .tr-fields { grid-template-columns: 1fr 1fr; }
  .tr-wx-table th:nth-child(6), .tr-wx-table td:nth-child(6) { display: none; }
}

/* Thème rouge : rien de vif. */
[data-theme='night'] .tr-wx-table tr[data-ok='true'] td { background: #120303; }

/* ---------- Fiche de tir : seulement à l'impression, noir sur blanc quel que soit le thème ---------- */
.tr-sheet { display: none; }
@media print {
  /* Marges dans la fiche plutôt que dans la page : Chromium peindrait la marge de la page du fond du thème sombre. */
  @page { size: A4; margin: 0; }
  :root, :root[data-theme='night'] {
    --bg: #fff; --tile: #fff; --tile-2: #fff; --field: #fff; --ink: #000; --muted: #444; --accent: #000;
    --accent-ink: #fff; --rule: #999;
  }
  :root { color-scheme: light; }
  html, body { background: #fff !important; color: #000; }
  body > :not(.tr-sheet) { display: none !important; }
  .tr-sheet { padding: 12mm; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; gap: 0 14pt; align-items: start; font-size: 9.5pt; line-height: 1.3; }
  .ts-head, .ts-go, .ts-foot, .ts-wide { grid-column: 1 / -1; }
  .ts-block { break-inside: avoid; }
  .tr-sheet h1 { font-size: 18pt; font-weight: 700; margin: 0; }
  .tr-sheet h2 { font-size: 10.5pt; font-weight: 700; margin: 8pt 0 2pt; break-after: avoid; }
  .ts-head p { margin: 2pt 0 0; }
  .ts-go { display: flex; align-items: baseline; gap: 12pt; margin: 6pt 0 0; padding: 3pt 8pt; border: 2pt solid #000; font-size: 18pt; font-weight: 700; }
  .ts-go span { font-size: 10pt; font-weight: 400; }
  .ts-nogo { border-style: dashed; }
  .ts-table { border-collapse: collapse; width: 100%; break-inside: avoid; }
  .ts-table th, .ts-table td { border-bottom: 0.5pt solid #999; padding: 1.5pt 6pt 1.5pt 0; text-align: left; vertical-align: top; font-weight: 400; }
  .ts-table tbody th { width: 45%; color: #444; }
  .ts-table thead th { color: #444; }
  .ts-table td { font-family: var(--mono); font-size: 8.5pt; }
  .ts-cur td { font-weight: 700; }
  .ts-drift { display: grid; grid-template-columns: 1fr 40mm; gap: 8pt; align-items: start; break-inside: avoid; }
  .ts-schema { width: 40mm; height: 40mm; }
  .ts-foot { margin-top: 10pt; font-size: 8.5pt; color: #444; }
  .ts-foot p { margin: 2pt 0; }
}