/* F4IOZ — two small tools: « Visible à l'œil nu » (/sat/visible) and « Décode une trame APRS » (/outils/aprs).
   One screen on a desktop (the lists and the decoded blocks scroll inside their card); stacked on a phone. */

/* ---------- Visible à l'œil nu */
.visible-form { margin-bottom: 14px; }
.visible-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
.visible-grille > .card { margin: 0; }
.visible-phrase { font-size: 15px; line-height: 1.55; margin: 0 0 10px; }
.visible-eclat { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.visible-ciel { display: block; width: 100%; max-width: 300px; margin: 4px auto 0; }
.visible-ciel .g { fill: none; stroke: var(--border-strong); stroke-width: .7; }
.visible-ciel .c { fill: var(--text-muted); font: 600 9px var(--font-sans); text-anchor: middle; }
.visible-ciel .e { fill: var(--text-muted); font: 7px var(--font-mono); }
.visible-ciel .tout { fill: none; stroke: var(--text-muted); stroke-width: 1.2; stroke-dasharray: 2 3; }
.visible-ciel .vu { fill: none; stroke: var(--amber); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.visible-ciel .deb { fill: var(--amber); }
.visible-ciel .max { fill: var(--panel); stroke: var(--amber); stroke-width: 1.6; }
.visible-ciel .fin { fill: var(--panel); stroke: var(--amber); stroke-width: 2; }
.visible-ciel .ombre { fill: var(--text-muted); stroke: var(--panel); stroke-width: 1; }
.visible-table td, .visible-table th { white-space: nowrap; }
.visible-table td .dim { font-size: 12px; margin-left: 4px; }
.visible-regles { margin: 12px 0 0; max-width: 980px; }
/* One screen on a desktop (the shell's « ecran »): the grid takes the height left, each card scrolls inside itself, the sky shrinks. */
@media (min-width: 1100px) and (min-height: 640px) {
  body.outil-page .page-head p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.outil-page .visible-form, body.outil-page .aprs-form { margin-bottom: 10px; }
  body.outil-page .visible-form .card-body, body.outil-page .aprs-form .card-body { padding: 8px 14px; }
  body.outil-page .visible-grille { flex: 1; min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
  body.outil-page .visible-grille > .card { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  body.outil-page .visible-grille > .card > .card-body { min-height: 0; overflow: auto; padding: 10px 14px; }
  body.outil-page .visible-prochain > .card-body { display: flex; flex-direction: column; }
  body.outil-page .visible-prochain .visible-ciel { flex: 1 1 0; min-height: 120px; max-height: 300px; height: auto; }
  body.outil-page .visible-prochain .visible-phrase { font-size: 14px; }
  body.outil-page .visible-regles { flex: none; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
}
@media (max-width: 899px) { .visible-grille { grid-template-columns: 1fr; } }

/* ---------- Décode une trame APRS */
.aprs-form { margin-bottom: 14px; }
.aprs-form .aprs-champ { flex: 1 1 520px; min-width: 0; }
.aprs-form .aprs-champ input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 13px; }
.aprs-exemples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 16px 12px; font-size: 12.5px; }
.aprs-exemples a.pill { text-decoration: none; }
.aprs-exemples a.pill:hover { border-color: var(--accent); color: var(--accent); }
.aprs-grille { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.aprs-grille.sans-carte { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.aprs-blocs { min-width: 0; }
.aprs-blocs > * { margin: 0 0 12px; }
.aprs-blocs > .card { flex-shrink: 0; }
.aprs-bloc .card-body { padding: 8px 14px 10px; }
.aprs-bloc dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 13px; }
.aprs-bloc dt { color: var(--text-muted); font-weight: 600; }
.aprs-bloc dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.aprs-bloc dd code { font: 600 13px var(--font-mono); color: var(--text); white-space: pre-wrap; }
.aprs-bloc dd .dim { display: block; font-size: 12px; }
.aprs-erreur, .aprs-avert { margin: 0; padding: 9px 12px; border-radius: var(--r-m); font-size: 13.5px; }
.aprs-erreur { border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--text); }
.aprs-avert { border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); background: color-mix(in srgb, var(--amber) 9%, transparent); }
.aprs-carte-c { margin: 0; }
#aprs-carte { height: 340px; border-radius: var(--r-m); overflow: hidden; background: var(--m-ocean); }
.aprs-aide { max-width: 980px; }
.aprs-aide code { font-family: var(--font-mono); }
@media (min-width: 1100px) and (min-height: 640px) {
  body.outil-page .aprs-grille, body.outil-page .aprs-aide { flex: 1; min-height: 0; }
  body.outil-page .aprs-grille { align-items: stretch; grid-template-rows: minmax(0, 1fr); }
  body.outil-page .aprs-blocs { min-height: 0; overflow: auto; padding-right: 4px; scrollbar-width: thin; }
  body.outil-page .aprs-carte-c { min-height: 0; display: flex; flex-direction: column; }
  body.outil-page .aprs-carte-c > .card-body { flex: 1; min-height: 0; display: flex; }
  body.outil-page #aprs-carte { flex: 1; height: auto; min-height: 200px; }
  body.outil-page .aprs-exemples { padding-bottom: 8px; }
}
@media (max-width: 899px) { .aprs-grille { grid-template-columns: 1fr; } }