/* ==========================================================================
   17n polish: loaded LAST (after nebo-theme.css). Layout fixes found by the overflow sweep
   (text running out of cards, sticky header showing through on phones) + motion.
   Rollback = drop this file's <link> from base.html.
   ========================================================================== */

/* ---------------------------------------------------------------- top bar */
/* Phones: the 3-row header was sticky AND transparent, so it floated over the page while scrolling. */
@media (max-width: 767px) {
  .nb-topbar { position: relative; top: auto; }
}
/* Wider screens: keep it sticky, but on a frosted background so text never shows through it. */
@media (min-width: 768px) {
  .nb-topbar {
    top: 0;
    margin: -22px calc(-1 * clamp(16px, 2vw, 28px)) 20px;
    padding: 16px clamp(16px, 2vw, 28px) 14px;
    border-radius: 0 0 24px 24px;
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    transition: box-shadow .3s var(--ease-out), background-color .3s var(--ease-out);
  }
  .nb-topbar.is-stuck { box-shadow: 0 1px 0 var(--line), 0 14px 30px -22px rgb(0 0 0 / .55); }
}
@media (min-width: 768px) and (prefers-reduced-transparency: reduce) {
  .nb-topbar { background: var(--surface); }
}

/* server switch: labels were glued to the top of 42px pills and the current server had no pill */
.segmented__opt { display: inline-flex; align-items: center; justify-content: center; gap: 2px; text-decoration: none; }
.segmented__opt.is-active { background: var(--panel); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
.segmented__opt:not(.is-active):hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.segmented__opt { transition: color .25s var(--ease-out), background-color .25s var(--ease-out), box-shadow .25s var(--ease-out); }

/* ---------------------------------------------------------------- cards side by side */
/* auto-fill left empty tracks, so two cards got ~300px each next to empty space and nicks broke in half */
.groups { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.users-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

/* label / value lists: the label column was a fixed 150px and the rule also hit every div inside a value */
.card > dl.kv { container-type: inline-size; }
dl.kv > div { grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); column-gap: 14px; }
dl.kv dd div { display: block; }
dl.kv dd div.row-inline { display: flex; }
dl.kv dd { overflow-wrap: anywhere; word-break: normal; }
dl.kv dd .badge { white-space: normal; max-width: 100%; }
dl.kv dd .btn { white-space: normal; max-width: 100%; text-align: center; }
@container (max-width: 360px) {
  dl.kv > div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}

/* any long unbroken thing (gpci, HWID, URLs) wraps instead of pushing out of its box */
.card p, .card li, .card dd, .flash, .sus-caution, .brief-step, .step p { overflow-wrap: anywhere; }
h1 { overflow-wrap: anywhere; }
.head > div { min-width: 0; }

/* ---------------------------------------------------------------- tables */
/* «Подозрения»: the evidence column was squeezed to ~80px by the buttons column */
table.grid td:has(> details.sus-ev) { min-width: 300px; }
[data-suspects] td.acts { white-space: normal; min-width: 150px; }
[data-suspects] td.acts .btn { margin: 2px 0; }
.scroll-x { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* ---------------------------------------------------------------- dashboard on phones */
@media (max-width: 860px) {
  .action { white-space: normal; text-align: center; line-height: 1.15; min-width: 0; }
  .action span { overflow-wrap: anywhere; }
}
@media (max-width: 420px) {
  .action { font-size: .78rem; padding: 0 4px; }
}
/* «Регистрации»: 7 days are rendered, the grid had 6 columns, so today wrapped onto a second row */
.nb-bars { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bars__bar { max-width: 100%; }
/* the line above the bars is a flex row, so «Последний: Nick» split into columns */
p.insights__text { display: block; }
.hero-band__card .srv-card { min-width: 0; }
.hero-band__card .srv-card * { min-width: 0; }

/* ---------------------------------------------------------------- touch: no sticky hover */
@media (hover: none) {
  .btn:hover, .chip:hover, .sidenav-item:hover, tr.rowlink:hover td { transform: none; }
}

/* ==========================================================================
   Motion. Everything below is off for prefers-reduced-motion (nebo base.css also zeroes durations).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* page content rises in, block by block */
  @keyframes pz-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes pz-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pz-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes pz-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes pz-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 55%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
  @keyframes pz-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

  .wrap > * { animation: pz-rise .55s var(--ease-out) backwards; }
  .wrap > :nth-child(2) { animation-delay: .04s; }
  .wrap > :nth-child(3) { animation-delay: .08s; }
  .wrap > :nth-child(4) { animation-delay: .12s; }
  .wrap > :nth-child(5) { animation-delay: .16s; }
  .wrap > :nth-child(6) { animation-delay: .2s; }
  .wrap > :nth-child(n+7) { animation-delay: .24s; }
  .groups > *, .dash-grid > * { animation: pz-rise .55s var(--ease-out) backwards; }
  .groups > :nth-child(2), .dash-grid > :nth-child(2) { animation-delay: .07s; }
  .groups > :nth-child(3), .dash-grid > :nth-child(3) { animation-delay: .14s; }
  .groups > :nth-child(n+4), .dash-grid > :nth-child(n+4) { animation-delay: .2s; }

  /* buttons and chips: lift on hover, press on click */
  .btn, .chip, .nb-btn, .nb-icon-btn, .icon-btn, .action, .pnum, .tabs a, .seg-item {
    transition: transform .35s var(--ease-spring), background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .25s var(--ease-out), opacity .2s;
  }
  @media (hover: hover) {
    .btn:hover, .nb-btn:hover, .action:hover { transform: translateY(-1px); }
    .chip:hover { transform: translateY(-1px); }
    .card:has(> table) tr:hover td { transition: background-color .15s; }
  }
  .btn:active, .nb-btn:active, .nb-icon-btn:active, .icon-btn:active, .chip:active, .action:active, .tabbar__item:active, .sidenav-item:active { transform: scale(.96); transition-duration: .08s; }

  /* menu + tab bar */
  .sidenav-item { transition: color .25s var(--ease-out), background-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .35s var(--ease-spring); }
  @media (hover: hover) { .sidenav-item:not(.is-active):hover { background: color-mix(in srgb, var(--ink) 5%, transparent); } }
  .sidenav-item .ico { transition: transform .45s var(--ease-spring); }
  @media (hover: hover) { .sidenav-item:hover .ico { transform: translateX(2px) rotate(-4deg); } }
  .tabbar__item { transition: color .2s var(--ease-out), transform .3s var(--ease-spring); }
  .tabbar__item.is-active .ico { animation: pz-pop .45s var(--ease-spring) backwards; }
  .nav-count.red { animation: pz-ping 1.6s var(--ease-out) 1s 3; }

  /* dropdowns, popovers, dialogs, toasts */
  .menu, .me[open] .popover, .item-results { animation: pz-drop .22s var(--ease-out); transform-origin: top right; }
  .modal:not([hidden]) { animation: pz-fade .2s var(--ease-out); }
  .modal-box, .palette-box { animation: pz-pop .32s var(--ease-spring); }
  .palette:not([hidden]) { animation: pz-fade .18s var(--ease-out); }
  .toast { animation: pz-pop .35s var(--ease-spring); }
  details[open] > :not(summary) { animation: pz-rise .35s var(--ease-out) backwards; }
  details > summary { transition: color .2s; }
  .flash { animation: pz-rise .45s var(--ease-out) backwards; }

  /* charts and bars grow in */
  .chart svg { animation: pz-wipe 1.1s var(--ease-out) .1s backwards; }
  @keyframes pz-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  table.rich .bar, progress.fwbar { transform-origin: left center; animation: pz-grow .8s var(--ease-out) backwards; }
  @keyframes pz-grow { from { transform: scaleX(0); } }

  /* live tables while loading */
  .chart.loading svg { animation: pz-fade .6s ease-in-out infinite alternate; }

  /* page-to-page: chrome stays put, content slides */
  .sidebar { view-transition-name: pz-sidebar; }
  .tabbar { view-transition-name: pz-tabbar; }
  .wrap { view-transition-name: pz-content; }
  ::view-transition-old(pz-content) { animation: pz-out .18s var(--ease-out) both; }
  ::view-transition-new(pz-content) { animation: pz-in .4s var(--ease-out) both; }
  @keyframes pz-out { to { opacity: 0; transform: translateY(-6px); } }
  @keyframes pz-in { from { opacity: 0; transform: translateY(10px); } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .sidebar { view-transition-name: none; }
}