/* Page Suivi */

.sat-id {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.sat-name {
  font-size: clamp(3rem, 1.2rem + 5vw, 6.5rem);
  overflow-wrap: anywhere;
}
.sat-name.is-long { font-size: var(--step-head); line-height: 1; }
.sat-id .readout { grid-template-columns: 1fr 1fr; column-gap: 16px; }

.map-tile { display: flex; flex-direction: column; background: var(--map-sea); }
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 12px var(--pad) 14px;
  background: var(--tile);
  margin-top: auto;
  color: var(--muted);
}
.key { display: inline-flex; align-items: center; gap: 8px; }
.key::before { content: ''; width: 22px; height: 0; border-top: 2px solid var(--muted); }
.key--future::before { border-top: 2px dashed var(--accent); }
.key--foot::before { width: 12px; height: 12px; border: 1px solid var(--accent); border-radius: 50%; }
.key--night::before { width: 14px; height: 12px; border: 0; background: var(--night-shade); outline: 1px solid var(--rule); }

.next-pass { display: grid; gap: 14px; align-content: start; }
.next-pass .head { max-width: 22ch; }
.next-pass .lead { max-width: 46ch; }
.np-count { font-size: var(--step-lead); color: var(--accent); }
#np-ics[disabled] { opacity: 0.45; cursor: default; }
#np-ics { border: 0; text-align: left; cursor: pointer; font: inherit; }

.passes-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  margin-bottom: 20px;
}

.passes-note { margin-top: 16px; max-width: 72ch; }
.data-table .vis-no { color: var(--muted); }

.skyplot { display: grid; gap: 16px; align-content: start; }
.skyplot svg { width: 100%; max-width: 360px; justify-self: center; overflow: visible; }
.skyplot text { font-family: var(--mono); font-size: 9px; fill: var(--muted); }
.sky-ring { fill: none; stroke: var(--rule); stroke-width: 0.75; }
.sky-horizon { fill: var(--tile); stroke: var(--muted); stroke-width: 1; }
.sky-track { fill: none; stroke: var(--muted); stroke-width: 1.25; stroke-dasharray: 3 3; }
.sky-visible { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sky-start { fill: var(--accent); }
.sky-end { fill: none; stroke: var(--accent); stroke-width: 2; }
.sky-now { fill: var(--ink); }

.search { display: grid; gap: 16px; align-content: start; }
.quick { display: flex; flex-wrap: wrap; gap: 4px; }
.quick button {
  border: 0;
  background: var(--tile-2);
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
  transition: background-color var(--t-hover) ease;
}
.quick button:hover { background: var(--field); }
.quick button[aria-pressed='true'] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
[data-theme='night'] .quick button[aria-pressed='true'] { background: #260906; color: var(--accent); }
.search-form { display: grid; grid-template-columns: 1fr auto; gap: 4px; }
.results { max-height: 340px; overflow-y: auto; }
.results button { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.results .num { color: var(--muted); font-size: var(--step-small); }

.about-sat { display: flex; min-height: 100%; }
.about-photo { position: relative; width: 100%; display: flex; flex-direction: column; }
.about-photo img { width: 100%; flex: 1; min-height: 280px; object-fit: cover; }
.about-photo figcaption { padding: 12px var(--pad) 14px; color: var(--muted); }
.about-elements { padding: var(--pad); width: 100%; display: grid; gap: 20px; align-content: start; }
.about-elements h2 { font-size: var(--step-lead); font-weight: 600; }
.readout--grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

@media (max-width: 1080px) {
  .sat-id { grid-column: span 12; }
  .sat-id .readout { grid-template-columns: repeat(3, 1fr); }
  .map-tile { order: -1; }
  .next-pass, .passes { grid-column: span 12; }
  #np-ics, .skyplot { grid-column: span 6; }
  .search, .about-sat { grid-column: span 12; }
}
@media (max-width: 640px) {
  .sat-id .readout { grid-template-columns: 1fr 1fr; }
  #np-ics, .skyplot { grid-column: span 12; }
  .col-dir { display: none; }
  .search-form { grid-template-columns: 1fr; }
}