/* ==========================================================================
   NOTAMs page: rules that belong to this page only. styles.css owns the
   boards, rows, tags, chips and ledgers; this file only teaches the row how
   to hold a NOTAM (notice first, times in the margin, number at the end).
   ========================================================================== */

/* ---- A NOTAM row ---- */
.row--notam { grid-template-columns: 1fr; grid-template-areas: "what" "when" "meta"; align-items: start; gap: .6rem .9rem; padding-block: 1rem; }
.row--notam .row__what { grid-area: what; font-family: var(--font-text); font-weight: 400; font-size: 1rem; letter-spacing: 0; line-height: 1.5; min-width: 0; }
.row--notam .row__when { grid-area: when; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.row--notam .row__meta { grid-area: meta; }
/* The times move into the margin only when the board itself is wide enough:
   a board in a two-thirds column at a tablet width is not, whatever the
   viewport says. The board is the container, not the page. */
.board--notams { container-type: inline-size; }
@container (min-width: 36rem) {
  .row--notam { grid-template-columns: 11rem minmax(0, 1fr) auto; grid-template-areas: "when what meta"; column-gap: 1.4rem; }
  .row--notam .row__when { flex-direction: column; gap: .7rem; }
}
.board__head + .rows { border-top: 0; }

/* From / Until: Zulu on the line, Eastern beneath, labels in the sign face */
.when { display: grid; gap: .05rem; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .9rem; line-height: 1.3; color: var(--paint); }
.when b { font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--paint-soft); }
.when small { font-size: .74rem; color: var(--paint-soft); }

/* The category is a painted label; closures and airspace get the filled block.
   The word carries the meaning, the fill only the weight. */
.row__cat { display: inline-flex; align-items: center; min-height: 1.6rem; padding: .1rem .55rem; border: 1px solid var(--navy); font-family: var(--font-display); font-weight: 800; font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); vertical-align: middle; }
.row--notam[data-cat="closure"] .row__cat, .row--notam[data-cat="airspace"] .row__cat { background: var(--navy); color: var(--on-navy); }
.row--notam[data-cat] .row__cat--perm { background: transparent; color: var(--navy); border-style: dashed; }

/* The notice itself: verbatim FAA text, so it is data and set in the data face */
.row__text { display: block; margin-top: .55rem; font-family: var(--font-mono); font-size: .88rem; line-height: 1.55; color: var(--paint); max-width: 80ch; overflow-wrap: anywhere; }

/* The ICAO form, folded away */
.row__raw { margin-top: .45rem; }
.row__raw summary { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 700; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.row__raw summary::-webkit-details-marker { display: none; }
.row__raw summary .i { width: 1em; height: 1em; }
.row__raw[open] summary .i { transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) { .row__raw summary .i { transition: transform .2s var(--ease-out); } }
.row__raw pre { margin: 0 0 .3rem; padding: .7rem .85rem; border: 1px solid var(--line); background: var(--board-2); font-family: var(--font-mono); font-size: .78rem; line-height: 1.5; color: var(--paint); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 80ch; }

/* ---- Board head: the count sits where LIVE would, without the signal ---- */
.count { font-family: var(--font-display); font-weight: 800; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--paint-soft); white-space: nowrap; }
.count b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1rem; color: var(--paint); }

/* The not-connected board's own heading, under the identifier */
.feed__h { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); margin-top: .2rem; }

/* ---- Freshness tag when it has slipped: a heavier frame and full ink; the
   signal colour stays reserved for LIVE ---- */
/* Tags that read as a sentence flow as text, so a separator never opens a line on its own */
.tag--line { display: inline-block; line-height: 1.5; }
.tag--fresh { font-size: .82rem; }
.tag--loud { border: var(--frame) solid var(--navy); color: var(--paint); }

/* ---- Layout helpers for this page ---- */
.boards--top { align-items: start; }
.scroll { overflow-x: auto; }
.ledger--fields th[scope="row"] { color: var(--paint); font-size: 1rem; white-space: nowrap; }
.ledger--fields td.r { white-space: nowrap; }

/* Chips are 36px tall in the system; on a touch screen this page lifts them to the 44px floor */
@media (pointer: coarse) { .chip { min-height: 2.75rem; } }