/* ─── NOWOŚCI W HUBIE — wygląd NH.nowe (public/ui/nowe.js) ────────────────────────────────────────────────────────
   Złoto (--nh-accent-warm) znaczy tylko „nowe”: nie myli się z granatem (wybrane), morskim (akcja) ani czerwienią (coś czeka).
   Warstwa .nh-nowe leży nad stroną (fixed), plakietki i dymek mają współrzędne z JS. Tylko tokeny. */
.nh-nowe { position: fixed; inset: 0; z-index: var(--nh-z-menu); pointer-events: none; margin: 0; padding: 0; }

/* poświata: obrys wokół elementu spokojnie narasta (1,4 s) i STOI, dopóki dymek jest otwarty — bez pulsowania
   (uwaga Soni 3.11: „za szybko przechodzi kolor”); obrys, nie cień — nie gryzie się z cieniem elementu */
.nh-nowe-halo { outline: 2px solid color-mix(in srgb, var(--nh-accent-warm) 75%, transparent); outline-offset: 5px; animation: nhNoweHalo 1.4s ease-out both; }
@keyframes nhNoweHalo { from { outline-color: color-mix(in srgb, var(--nh-accent-warm) 0%, transparent); outline-offset: 1px; } to { outline-color: color-mix(in srgb, var(--nh-accent-warm) 75%, transparent); outline-offset: 5px; } }

/* plakietka „Nowe” / „Zmienione”: nad prawym górnym rogiem, wyskakuje sprężyście; klik = dymek jeszcze raz */
.nh-nowe-badge { position: absolute; display: inline-flex; align-items: center; gap: 5px; height: 23px; margin: 0; padding: 0 11px 0 10px; border: 0; border-radius: var(--nh-r-pill);
  background: var(--nh-accent-warm); color: var(--nh-surface); font-family: var(--nh-font-head); font-weight: 600; font-size: var(--nh-text-2xs, 11px); line-height: 1; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap; cursor: pointer; pointer-events: auto; box-shadow: 0 4px 10px color-mix(in srgb, var(--nh-accent-warm) 35%, transparent);
  animation: nhNowePop .55s cubic-bezier(.16,1.12,.3,1) both; }
.nh-nowe-badge svg { width: 11px; height: 11px; fill: currentColor; }
.nh-nowe-badge:focus-visible { outline: 2px solid var(--nh-accent); outline-offset: 2px; }
@keyframes nhNowePop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }

/* dymek: znaczek · tytuł · jedno zdanie · „Rozumiem” · pasek czasu (najechanie zatrzymuje) */
.nh-nowe-tip { position: absolute; width: min(340px, calc(100% - 16px)); box-sizing: border-box; margin: 0; padding: var(--space-3) var(--space-4) 0; overflow: hidden; pointer-events: auto;
  border-radius: var(--nh-r-card); background: var(--nh-surface); border: 1px solid color-mix(in srgb, var(--nh-accent-warm) 35%, var(--nh-line)); box-shadow: var(--nh-sh-pop);
  opacity: 0; transform: translateY(12px) scale(.97); transform-origin: var(--cx, 24px) top; transition: opacity .35s ease, transform .35s ease-in; }
.nh-nowe-tip.is-above { transform-origin: var(--cx, 24px) bottom; transform: translateY(-12px) scale(.97); }
.nh-nowe-tip.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .65s cubic-bezier(.16,1.12,.3,1); }
.nh-nowe-eye { margin: 0 0 var(--space-1); font-family: var(--nh-font-head); font-weight: 600; font-size: var(--nh-text-2xs, 11px); letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--nh-accent-warm) 75%, var(--nh-navy)); }
.nh-nowe-note { margin: var(--space-2) 0 0; font-size: var(--nh-text-xs); color: var(--nh-text-2); }
.nh-nowe-h { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-family: var(--nh-font-head); font-weight: 600; font-size: var(--nh-text-md); color: var(--nh-text); }
.nh-nowe-tag { display: inline-flex; align-items: center; height: 21px; padding: 0 10px; border-radius: var(--nh-r-pill); flex: none;
  background: color-mix(in srgb, var(--nh-accent-warm) 16%, var(--nh-surface)); color: color-mix(in srgb, var(--nh-accent-warm) 70%, var(--nh-navy));
  font-family: var(--nh-font-head); font-weight: 600; font-size: var(--nh-text-2xs, 11px); letter-spacing: .05em; text-transform: uppercase; }
.nh-nowe-s { margin: var(--space-2) 0 0; font-size: var(--nh-text-sm); line-height: 1.45; color: var(--nh-text-2); }
.nh-nowe-a { display: flex; justify-content: flex-end; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0 0 var(--space-3); }
.nh-nowe-skip { height: 30px; padding: 0 var(--space-4); margin: 0; border: 1px solid var(--nh-ctl-line); border-radius: var(--nh-r-btn); background: var(--nh-surface); color: var(--nh-text);
  font-family: var(--nh-font-btn); font-weight: 600; font-size: var(--nh-text-sm); cursor: pointer; }
.nh-nowe-skip:hover { background: var(--nh-field); }
.nh-nowe-skip:focus-visible { outline: 2px solid var(--nh-accent); outline-offset: 2px; }
.nh-nowe-ok { height: 30px; padding: 0 var(--space-4); margin: 0; border: 0; border-radius: var(--nh-r-btn); background: var(--btn-primary-bg); color: var(--btn-primary-fg);
  font-family: var(--nh-font-btn); font-weight: 600; font-size: var(--nh-text-sm); cursor: pointer; }
.nh-nowe-ok:hover { background: var(--btn-primary-bg-hover); }
.nh-nowe-ok:focus-visible { outline: 2px solid var(--nh-accent); outline-offset: 2px; }
.nh-nowe-bar { height: 3px; margin: 0 calc(-1 * var(--space-4)); background: var(--nh-accent-warm); transform-origin: left; animation: nhNoweTime var(--nh-nowe-t, 9s) linear forwards; }
.nh-nowe-tip:hover .nh-nowe-bar, .nh-nowe-tip:focus-within .nh-nowe-bar { animation-play-state: paused; }
@keyframes nhNoweTime { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* „Co nowego” przy awatarze (decyzja Soni 3.11): przycisk jak SMS (ui/topbar.css .topbar-sms), złota gwiazdka i liczba */
#noweTopbarBtn .nh-icon { --icon-color: var(--nh-accent-warm); }
.topbar-sms .nh-news-n { background: var(--nh-accent-warm); }
.topbar-sms .nh-news-n[hidden] { display: none; }
@media (max-width: 640px) { .global-topbar #noweTopbarBtn { order: -1; } }   /* telefon: sama gwiazdka z liczbą w 1. wierszu, jak SMS */
.nh-news { position: absolute; width: min(360px, calc(100% - 16px)); box-sizing: border-box; margin: 0; padding: var(--space-1) 0 var(--space-2); pointer-events: auto;
  border-radius: var(--nh-r-card); background: var(--nh-surface); border: 1px solid var(--nh-line); box-shadow: var(--nh-sh-pop);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: right top; transition: opacity .2s ease, transform .3s cubic-bezier(.22,.8,.24,1); }
/* lista nie wychodzi pod dół ekranu: warstwa jest przyklejona, więc dłuższa lista przewija się sama (od góry listy do dolnego
   menu telefonu albo paska gestów, większe z dwóch; --mobile-nav-h zawiera już pasek gestów); --nh-news-top ustawia NH.nowe
   (newsPlace). Szerokości listy i dymku = % warstwy (fixed, bez paska przewijania), nie 100vw: przy klasycznym pasku
   przewijania 100vw jest o ~15 px szersze niż ekran i lista wystawała w lewo (przegląd kodu 3.11). */
.nh-news { max-height: calc(100vh - var(--nh-news-top, 0px) - max(var(--mobile-nav-h, 0px), env(safe-area-inset-bottom, 0px)) - var(--space-2));
  max-height: calc(100dvh - var(--nh-news-top, 0px) - max(var(--mobile-nav-h, 0px), env(safe-area-inset-bottom, 0px)) - var(--space-2));
  overflow-y: auto; overscroll-behavior: contain; }
.nh-news.is-open { opacity: 1; transform: none; }
/* telefon (zgłoszenie Soni 3.11): gwiazdka stoi w środku paska, więc lista na całą szerokość, po 8 px od krawędzi (jak dymek) */
@media (max-width: 640px) { .nh-news { width: calc(100% - 2 * var(--space-2)); transform-origin: center top; } }
.nh-news-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-4); }
.nh-news-h b { font-family: var(--nh-font-head); font-weight: 600; font-size: var(--nh-text-md); color: var(--nh-text); }
.nh-news-h span { font-size: var(--nh-text-xs); color: var(--nh-text-2); }
.nh-news-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: start; width: 100%; margin: 0; padding: var(--space-3) var(--space-4);
  border: 0; border-top: 1px solid var(--nh-line-soft); background: transparent; text-align: left; font-family: var(--nh-font-body); cursor: pointer; }
.nh-news-row:hover, .nh-news-row:focus-visible { background: var(--nh-row-select); }
.nh-news-row:focus-visible { outline: 2px solid var(--nh-accent); outline-offset: -2px; }
.nh-news-row .nh-nowe-tag { grid-row: span 2; margin-top: 1px; }
.nh-news-row b { font-family: var(--nh-font-head); font-weight: 600; font-size: var(--nh-text-sm); color: var(--nh-text); }
.nh-news-row.is-unread b::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: var(--space-2); border-radius: 50%; background: var(--nh-accent-warm); vertical-align: middle; }
.nh-news-d { font-size: var(--nh-text-xs); color: var(--nh-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nh-news-s { grid-column: 2 / 4; font-size: var(--nh-text-sm); line-height: 1.4; color: var(--nh-text-2); }

@media (prefers-reduced-motion: reduce) {
  .nh-nowe-halo, .nh-nowe-badge, .nh-nowe-bar { animation: none; }
  .nh-news, .nh-news.is-open { transition: opacity .15s ease; transform: none; }
  .nh-nowe-tip, .nh-nowe-tip.is-in, .nh-nowe-tip.is-above { transition: opacity .15s ease; transform: none; }
}
@media print { .nh-nowe { display: none; } }