/* News: ruled paper cards, tabs as ink-outlined chips (red when selected), an in-page player.
   Tokens come from site.css. */

.news-hub { max-width: 1180px; }

.news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.news-head .h1 { margin-bottom: .35rem; }
.news-head .lede { margin-bottom: 0; }
.news-head-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.news-count { color: var(--ink); }

/* ---------- tabs ---------- */
.news-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--ink); }
.news-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-weight: 700; font-size: .76rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); background: var(--plate); border: 1px solid var(--ink); padding: .5rem .7rem; cursor: pointer;
}
.news-tab:hover { background: var(--ink); color: var(--paper); }
.news-tab.on { color: #FBF6EA; background: var(--red); border-color: var(--red); }
.news-tab .n { font-size: .68rem; font-weight: 400; opacity: .8; font-variant-numeric: tabular-nums; }

/* ---------- cards ---------- */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.news-card { display: flex; flex-direction: column; background: var(--plate); border: 1px solid var(--ink); overflow: hidden; }
.news-card.is-hidden { display: none; }

.news-card-media { position: relative; aspect-ratio: 16 / 9; background: #fff; border-bottom: 1px solid var(--ink); overflow: hidden; }
.news-card-thumb { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) contrast(1.02); }
.news-card-thumb--blank { background: #fff; }
.news-card-kind {
  position: absolute; left: .5rem; bottom: .5rem; z-index: 2;
  font-family: var(--mono); font-size: .64rem; line-height: 1; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink); background: var(--paper); border: 1px solid var(--ink); padding: .28rem .4rem;
}

.news-play { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
.news-play-icon { width: 44px; height: 44px; border: 1px solid var(--ink); background: var(--paper); position: relative; }
.news-play:hover .news-play-icon, .news-play:focus-visible .news-play-icon { background: var(--red); border-color: var(--red); }
.news-play-icon::before { content: ""; position: absolute; left: 17px; top: 13px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--ink); }
.news-play:hover .news-play-icon::before, .news-play:focus-visible .news-play-icon::before { border-left-color: #FBF6EA; }

.news-card-body { display: flex; flex-direction: column; gap: .45rem; padding: .7rem .8rem .8rem; flex: 1; }
.news-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; font-family: var(--mono); font-size: .7rem; line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); }
.news-badge { color: var(--ink); border: 1px solid var(--ink); padding: .15rem .35rem; }
.news-badge--youtube { color: var(--red); border-color: var(--red); }
.news-author { color: var(--ink-3); }
.news-card-title { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.news-card-title a, .news-card-title-btn { color: var(--ink); text-align: left; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.news-card-title a:hover, .news-card-title-btn:hover { color: var(--red); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.news-card-summary { margin: 0; color: var(--ink-2); font-family: var(--serif); font-size: .9rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card-actions { margin-top: auto; padding-top: .55rem; border-top: 1px solid var(--rule-2); display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.news-btn-play { padding: .45rem .7rem; font-size: .74rem; }
.news-ext { font-family: var(--mono); font-size: .72rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.news-ext:hover { color: var(--red); }

.news-empty { grid-column: 1 / -1; margin: .4rem 0 0; color: var(--ink-3); font-style: italic; font-size: .92rem; }
.news-empty.is-hidden, .news-empty[hidden] { display: none; }

/* ---------- theater modal ---------- */
.news-theater { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1.2rem; }
.news-theater[hidden] { display: none !important; }
.news-theater-backdrop { position: absolute; inset: 0; background: rgba(26, 24, 20, .5); }
.news-theater-panel { position: relative; z-index: 1; width: min(960px, 100%); background: var(--plate); border: 1px solid var(--ink); box-shadow: 0 12px 32px rgba(26, 24, 20, .3); }
.news-theater-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--plate-2); border-bottom: 1px solid var(--ink); padding: .5rem .75rem; }
.news-theater-title { margin: 0; font-family: var(--mono); font-weight: 700; font-size: .8rem; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-theater-close { font-family: var(--mono); font-weight: 700; font-size: .74rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); background: var(--plate); border: 1px solid var(--ink); padding: .4rem .55rem; cursor: pointer; flex: 0 0 auto; }
.news-theater-close:hover { background: var(--ink); color: var(--paper); }
.news-theater-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.news-theater-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 720px) {
  .news-head-meta { align-items: flex-start; width: 100%; }
  .news-filters { gap: .35rem; }
  .news-tab { flex: 1 1 calc(50% - .35rem); justify-content: space-between; }
  .news-grid { grid-template-columns: 1fr; }
  .news-theater { padding: .6rem; }
}

/* ================= Patch notes ================= */
/* ---------------------------------------------------------------------------
   Patch notes print as a supply form: a heavy outer rule, hairline cells with
   their number and name set small in the corner, lettered table columns and the
   form's own identity along the foot. Modelled on DA 17-1 and DA 3590 rather
   than invented, because the whole site is a field manual and a changelog is
   exactly the kind of thing the army would put on a numbered form.
   --------------------------------------------------------------------------- */
.pn-form { border: 2px solid var(--ink); background: var(--plate); margin-bottom: 1.6rem; }

/* a numbered block: label in the corner, value filled in beneath it */
.pn-cell { position: relative; padding: 1.05rem .55rem .4rem; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); min-width: 0; }
.pn-cell:last-child { border-right: 0; }
.pn-cell::before {
  content: attr(data-no) ". " attr(data-field);
  position: absolute; top: .25rem; left: .55rem; right: .4rem;
  font-family: var(--mono); font-size: .56rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pn-val { display: block; font-family: var(--mono); font-weight: 700; color: var(--ink); line-height: 1.25; overflow-wrap: anywhere; }
.pn-val-lg { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.pn-cell-block { border-right: 0; }

.pn-form-head { display: grid; grid-template-columns: minmax(0, 1fr) 10rem 12rem; }
.pn-form-counts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* section blocks: a ruled caption bar, then the ledger itself */
.pn-block { border-bottom: 1px solid var(--ink); }
.pn-block:last-of-type { border-bottom: 0; }
.pn-block-head {
  display: flex; align-items: baseline; gap: .45rem; margin: 0;
  padding: .3rem .55rem; border-bottom: 1px solid var(--ink); background: var(--plate-2);
  font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink);
}
.pn-block-no { color: var(--ink-3); }
.pn-block-count { margin-left: auto; font-weight: 400; letter-spacing: .04em; color: var(--ink-3); }

.pn-scroll { overflow-x: auto; }
/* Fixed layout so every block rules its columns in the same places down the page;
   auto layout sized each table to its own content and the ledger lost its spine.
   The min-width keeps the columns honest on a phone and lets the box scroll instead. */
.pn-table { width: 100%; min-width: 40rem; table-layout: fixed; border-collapse: collapse; font-size: .86rem; }
/* Percentages, not rem: in fixed layout a table wider than its stated columns
   spreads the slack across all of them, so absolute widths drifted anyway. */
.pn-table col.c-line { width: 5%; }
.pn-table col.c-item { width: 34%; }
.pn-table col.c-before, .pn-table col.c-after { width: 15%; }
.pn-table col.c-change { width: 31%; }
.pn-table td { overflow-wrap: anywhere; }
.pn-table th, .pn-table td { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule-2); padding: .3rem .5rem; text-align: left; vertical-align: top; }
.pn-table th:last-child, .pn-table td:last-child { border-right: 0; }
.pn-table tbody tr:last-child td { border-bottom: 0; }
/* column heads carry their letter underneath, the way the forms label a, b, c */
.pn-table thead th { padding: .25rem .5rem .2rem; border-bottom: 1px solid var(--ink); background: var(--plate); white-space: nowrap; }
.pn-table thead th b { display: block; font-family: var(--serif); font-weight: 600; font-size: .82rem; letter-spacing: 0; text-transform: none; color: var(--ink); }
.pn-table thead th i { display: block; font-family: var(--mono); font-style: normal; font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pn-table .num, .pn-table thead th.num { text-align: right; }
.pn-table thead th.num b, .pn-table thead th.num i { text-align: right; }
.pn-lineno { width: 3.2rem; text-align: right !important; font-family: var(--mono); font-size: .72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pn-table thead th.pn-lineno b, .pn-table thead th.pn-lineno i { text-align: right; }

.pn-before { color: var(--ink-3); text-decoration: line-through; white-space: nowrap; }
.pn-after { color: var(--ink); font-weight: 700; white-space: nowrap; }
.pn-dir { white-space: nowrap; font-family: var(--mono); font-size: .74rem; }
.pn-dir-up { color: var(--red); }
.pn-dir-down { color: var(--ink-2); }
.pn-dir-flat { color: var(--ink-3); }
.pn-note-text { font-family: var(--serif); font-style: italic; font-size: .78rem; color: var(--ink-2); margin-left: .3rem; }

/* remarks: the published note, folded away like a continuation sheet */
.pn-full { border-top: 1px solid var(--ink); }
.pn-full summary {
  padding: .35rem .55rem; cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2);
}
.pn-full summary::-webkit-details-marker { display: none; }
.pn-full summary::before { content: "+ "; color: var(--ink-3); }
.pn-full[open] summary::before { content: "‘2 "; }
.pn-full summary:hover { color: var(--red); }
.pn-body { padding: 0 .55rem .6rem; }
.pn-body h2 { font-size: .95rem; margin: 1rem 0 .3rem; }
.pn-body ul { margin: .2rem 0 .6rem 1.1rem; }
.pn-body li { margin: .15rem 0; }
.pn-body img { display: none; }          /* header art repeats the card image */

/* the foot: form number left, the caveat centred, the source right */
.pn-form-foot {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: .3rem .55rem; border-top: 2px solid var(--ink); background: var(--plate-2);
  font-family: var(--mono); font-size: .58rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
}
.pn-form-id { font-weight: 700; color: var(--ink-2); }
.pn-form-mid { flex: 1 1 auto; text-align: center; }
.pn-form-src a { color: var(--ink-2); }
.pn-form-src a:hover { color: var(--red); }

@media (max-width: 720px) {
  .pn-form-head { grid-template-columns: 1fr 1fr; }
  .pn-form-head .pn-cell-wide { grid-column: 1 / -1; border-right: 0; }
  .pn-form-head .pn-cell:nth-child(2) { border-right: 1px solid var(--ink); }
  .pn-form-counts { grid-template-columns: repeat(3, 1fr); }
  .pn-form-counts .pn-cell:nth-child(3) { border-right: 0; }
  .pn-table { font-size: .8rem; }
  .pn-form-mid { display: none; }
}

/* Notes with no tabulated numbers still need a body, or the card reads as empty. */
.pn-plain { margin: 0 0 .4rem; color: var(--ink-2); }