/* ==========================================================================
   Skylark — Planes over your house

   Builds on /stats.css (direction B, DESIGN.md) and /history/history.css,
   which carry the tokens, tiles, charts, map and controls. Only what this page
   adds is here, and every value comes from those tokens. Amber is the low end
   of the altitude scale and the approach, green the climb-out.
   ========================================================================== */

.omh-search { display: grid; gap: var(--sp-2); max-width: 560px; }
.omh-search-row { display: flex; gap: var(--sp-3); min-width: 0; }
.omh-search input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-raise);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font: var(--fs-base) var(--font-prose);
}
.omh-search input::placeholder { color: var(--muted); }
.omh-search input:focus-visible { outline: 2px solid var(--text-dim); outline-offset: 1px; }
.omh-search button,
.omh-results button,
.omh-period select {
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-raise);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font: var(--fs-sm) var(--font-mono);
  cursor: pointer;
}
.omh-search button:hover, .omh-search button:focus-visible,
.omh-results button:hover, .omh-results button:focus-visible { border-color: var(--text-dim); }
.local-actions button:disabled, .omh-search button:disabled { color: var(--muted); cursor: default; border-color: var(--line); }

.omh-results { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-2); max-width: 560px; }
.omh-results button { width: 100%; text-align: left; font-family: var(--font-prose); font-size: var(--fs-sm); overflow-wrap: anywhere; }

.omh-status { font-size: var(--fs-sm); color: var(--text-dim); margin: 0 0 var(--sp-4); min-height: 1.4em; overflow-wrap: anywhere; }
.card .omh-privacy { margin-top: var(--sp-5); }

/* The answer leads: prose, a size up, the first sentence the loudest. */
.omh-headline { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); max-width: 62ch; }
.omh-headline p { font-family: var(--font-prose); font-size: var(--fs-base); line-height: 1.5; color: var(--text-dim); }
.omh-headline p:first-child { font-size: var(--fs-num-sm); line-height: 1.4; color: var(--text); }

.omh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .omh-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.omh-tiles .tile[hidden] { display: none; }
.omh-period { padding: var(--sp-5) 0 0; }

.omh-paths { display: grid; gap: var(--sp-5); }
.omh-paths .omh-lead { font-family: var(--font-prose); font-size: var(--fs-base); color: var(--text); max-width: 62ch; }
.omh-path { display: grid; gap: var(--sp-3); padding-left: var(--sp-5); border-left: 2px solid var(--accent); }
.omh-path--departure { border-left-color: var(--live); }
@media (min-width: 900px) {
  .omh-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-8); align-items: start; }
  .omh-paths .omh-lead { grid-column: 1 / -1; }
}
.card .omh-path .sub-head { margin: 0; }
.omh-path .summary { font-family: var(--font-prose); }

/* Lowest report each day, against the 3° approach height. */
.chart .low-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 1; }
.chart .glide { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 4 4; }
.legend .sw--low { background: var(--accent); border-radius: 50%; }
.legend .sw--glide { width: 14px; height: 0; border-top: 1px dashed var(--text-dim); border-radius: 0; background: none; }

.omh-model { margin-top: var(--sp-4); }
.omh-model li { font-size: var(--fs-xs); }

.omh-model li { flex-direction: column; gap: var(--sp-1); }
.omh-model .v { text-align: left; max-width: 72ch; }