/* Live notices: the bar under the map (news.js) and the two pages "Komunikaty dnia" and "Podsumowania dni" (rendered by the
   backend, backend/app/news_pages.py). A separate file on purpose: a changed style.css can sit in a CDN cache for hours next
   to a new index.html, and the grid below only applies when news.js has put .has-news on the body, so an old copy of either
   file next to a new one still draws a sane page. */

/* ---------- the label of AI: a chip and words (shared by the bar and the pages) ---------- */
.ai-chip { display: inline-block; padding: 0 5px; border: 1px solid var(--accent); border-radius: 4px; color: var(--accent);
  font: 700 10.5px/16px system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .04em; vertical-align: 1px; }
.ai-label { color: var(--muted); font-size: 12px; }
.ai-label.official { color: var(--text); }
.news-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- the bar ---------- */
.news-bar { grid-area: news; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 12px;
  background: var(--panel); border-top: 1px solid var(--line); font-size: 13px; line-height: 1.4; }
.news-bar[hidden], body.map-full .news-bar { display: none; }
.news-stage { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.news-row { display: flex; align-items: baseline; gap: 2px 8px; min-width: 0; }
.news-tag, .news-label { flex: none; white-space: nowrap; }
.news-tag[hidden] { display: none; }
.news-body { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* The message itself is a link to its place on the page "Komunikaty dnia" (full text, quote, the original); it reads as text, and
   underlines when pointed at. The link to the original stays beside it (news-link). */
.news-open { color: inherit; text-decoration: none; }
.news-open:hover .news-text, .news-open:focus-visible .news-text { text-decoration: underline; }
.news-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.news-source { font-weight: 650; }
.news-link { flex: none; white-space: nowrap; }
.news-unavailable { flex-wrap: wrap; }
.news-unavailable .news-text { color: var(--muted); }
.news-stale-note { color: var(--warn); font-size: 12px; }
.news-bar[data-mode="stale"] .news-row { opacity: .7; }
.news-bar[data-mode="unavailable"] { background: var(--panel-2); }
.news-controls { flex: none; display: flex; align-items: center; gap: 4px; }
.news-controls[hidden] { display: none; }
.news-btn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: var(--panel-2); color: var(--text); font: 13px/1 system-ui, sans-serif; cursor: pointer; }
.news-btn:hover { border-color: var(--muted); }
.news-bar a:focus-visible, .news-btn:focus-visible, .news-reopen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.news-close { font-size: 18px; }
.news-all { flex: none; font-size: 12px; white-space: nowrap; }
.news-all[hidden] { display: none; }
.news-bar[data-static="true"] .news-body { -webkit-line-clamp: 3; line-clamp: 3; }

/* The grid. Only while the bar is shown (body.has-news): a row under the map, in the map's column. The panel runs down the
   side and takes the height of the bar too, so that both columns still add up to the height of the window. */
body.has-news #app { grid-template-rows: auto 1fr auto; grid-template-areas: "map head" "map panel" "news panel"; }
@media (max-width: 800px) {
  /* a phone: the bar sits between the map and the panel. The map keeps its half of the window: only the panel under it gives up the room. */
  body.has-news #app { grid-template-columns: 1fr; grid-template-rows: auto 50vh auto 1fr; grid-template-rows: auto 50dvh auto 1fr;
    grid-template-areas: "head" "map" "news" "panel"; }
}
/* A phone on its side: the same as the desktop, with the panel at 300 px. */
@media (orientation: landscape) and (max-height: 500px) {
  body.has-news #app { grid-template-columns: 1fr 300px; grid-template-rows: auto 1fr auto; grid-template-areas: "map head" "map panel" "news panel"; }
}
/* Small screens (a phone, either way up): two lines that take as little height as they can. The first has the label of AI in
   words (it is never left out), "Wszystkie" and the button that closes the bar; the second has the message, cut to one line.
   The buttons of the rotation and the separate link to the original are left out: the message leads to a page that has both. */
@media (max-width: 800px), (orientation: landscape) and (max-height: 500px) {
  .news-bar { flex-wrap: wrap; row-gap: 2px; padding: 5px 12px 6px; min-height: 0; }
  .news-tag { order: 1; flex: 1 1 auto; }
  .news-all { order: 2; }
  .news-close { order: 3; margin: -3px 0; }  /* the button is taller than its line, so that a thumb finds it */
  .news-stage { order: 4; flex-basis: 100%; }
  .news-controls { display: none; }
  .news-row:not(.news-unavailable) > .news-link { display: none; }
  .news-row { flex-wrap: wrap; }  /* with less motion the label stands in the row and the text goes under it when it does not fit */
  .news-body { -webkit-line-clamp: 1; line-clamp: 1; }
  .news-bar[data-static="true"] .news-body { -webkit-line-clamp: 2; line-clamp: 2; }
  .ai-label { font-size: 11px; }
}
/* The full-screen map has no bar, no header and no panel (more specific than style.css and the rules above). */
body.map-full.has-news #app { grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "map"; }
@media (prefers-reduced-motion: no-preference) {
  .news-row { animation: news-in .25s ease-out; }
}
@keyframes news-in { from { opacity: 0; } }  /* the end is the row's own opacity (a stale row is dimmed) */

/* ---------- the links to the pages, at the top of the panel ---------- */
.news-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 12px; padding: 0 0 10px;
  border-bottom: 1px solid var(--line); font-size: 13px; }
.news-links[hidden] { display: none; }
.news-links-label { color: var(--muted); }
.news-links ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.news-links li:not([hidden]) ~ li:not([hidden])::before { content: "·"; margin: 0 8px; color: var(--muted); }  /* only between two that show */
.news-links a { font-weight: 600; }
.news-reopen { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.news-reopen[hidden] { display: none; }

/* ---------- the pages ---------- */
.news-nav { margin: 6px 0 14px; font-size: 14px; }
.news-nav a[aria-current="page"] { color: var(--text); font-weight: 650; text-decoration: none; }
.news-warning { margin-top: 12px; }
.news-warning h2 { margin-top: 0; }
.news-day { margin-top: 26px; }
.news-day h2 { margin-bottom: 4px; }
.news-day h3 { font-size: 15px; margin: 16px 0 6px; }
.news-list { list-style: none; margin: 8px 0 0; padding: 0; }
.news-sources { list-style: decimal; padding-left: 26px; }
.legal .news-list li { margin: 10px 0; }
.news-item { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.news-item[data-ai-generated="false"] { border-left: 3px solid var(--muted); }
/* Arriving from the bar (or from a footnote of a summary): the message in the address is the one that stands out. */
.news-item { scroll-margin-top: 16px; }
.news-item:target { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.news-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; }
.news-meta time { color: var(--muted); font-variant-numeric: tabular-nums; }
.news-item .news-text { margin: 6px 0 4px; }
.news-item .news-link { margin: 4px 0 0; font-size: 13px; }
.news-quote { margin: 8px 0 0; padding: 6px 10px; border-left: 3px solid var(--line); color: var(--muted); font-size: 13px; }
.news-quote p { margin: 0 0 4px; }
.news-quote footer { font-size: 12px; }
.news-summary { margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.news-summary h3 { margin-top: 6px; }
.ai-note { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.news-sections { list-style: none; margin: 8px 0 0; padding: 0; }
.news-sections h4 { margin: 10px 0 2px; font-size: 14px; }
.news-sections p { margin: 0; }
.news-ref { margin-left: 2px; font-size: 11px; }
.news-range, .news-report { margin-top: 14px; }
.news-stale { margin-top: 12px; border-color: var(--warn); }
.news-unavailable:not(.news-row), .news-disabled { margin-top: 16px; }