/* The menu of UX spec section 4 and the top strip of every screen (S1, U4, U10; package 5). Only the tokens of
   app.css. Status by word + colour + shape (D29): live - filled circle, delay - triangle, stale - diamond,
   no connection - ring, nothing measured - dash. */

/* menu: five sections fit beside the brand down to tablet width; the section of a sub-page is marked too */
.nav a[aria-current="true"] { color: var(--text); background: var(--panel-2); }
.nav a[aria-current="true"]::after { content: ""; position: absolute; left: 0.55em; right: 0.55em; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--grad); }
@media (max-width: 1300px) and (min-width: 721px) {
  .nav { order: 0; flex: 1 1 auto; margin: 0; padding-bottom: 0; }
}
.subnav { margin-top: var(--s3); }

/* the strip */
.topstrip { border-top: 1px solid var(--border); font-size: 0.84rem; }
.ts-in { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s4); }
.ts-item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3em 0.4em; min-height: 2.75rem;
  color: var(--muted); font-weight: 600; }
.ts-item b { color: var(--text); font-weight: 750; }
details.ts-item { position: relative; display: block; }
details.ts-item > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 0.4em;
  min-height: 2.75rem; padding: 0 0.45em; margin: 0 -0.45em; border-radius: var(--radius-sm); cursor: pointer;
  list-style: none; }
details.ts-item > summary::-webkit-details-marker { display: none; }
details.ts-item > summary::after { content: ""; width: 0.45em; height: 0.45em; margin-left: 0.15em;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-25%); }
details.ts-item[open] > summary::after { transform: rotate(-135deg) translateY(-25%); }
details.ts-item > summary:hover { background: var(--panel-2); }
.ts-k { color: var(--muted); }
.ts-pair { white-space: nowrap; }
details.ts-money > summary { column-gap: 0.9em; }
.ts-scroll { overflow-x: auto; max-width: 100%; }
.ts-pop { position: absolute; top: 100%; left: 0; z-index: 20; width: max-content;
  max-width: min(36rem, calc(100vw - 32px)); padding: var(--s3) var(--s4); background: var(--panel);
  border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  font-weight: 500; color: var(--text); }
.ts-pop-end { left: auto; right: 0; }
.ts-pop p { margin: var(--s2) 0 0; }
.ts-pop .table-wrap, .ts-pop .grid { margin: 0; }
.ts-table { font-size: 0.86rem; }
.ts-list { margin: 0; padding-left: 1.1em; }
.ts-queue { padding: 0 0.7em; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text); }
.ts-queue:hover { text-decoration: none; background: var(--panel-2); }
.ts-queue.hot { border-color: var(--warn); background: var(--warn-bg); }
.ts-queue.hot > b { color: var(--warn); }
.ts-near { color: var(--text); font-weight: 600; }
.ts-fresh { gap: 0.3em var(--s3); }
.fresh { display: inline-flex; align-items: center; gap: 0.35em; white-space: nowrap; color: var(--text); }
.fresh .dot { flex: none; width: 0.62em; height: 0.62em; background: currentColor; }
.fresh .fresh-word { font-weight: 750; }
.fresh .fresh-age { color: var(--muted); font-weight: 500; }
.fresh.live .dot, .fresh.live .fresh-word { color: var(--ok); }
.fresh.live .dot { border-radius: 50%; }
.fresh.delay .dot, .fresh.delay .fresh-word { color: var(--warn); }
.fresh.delay .dot { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.fresh.stale .dot, .fresh.stale .fresh-word { color: var(--bad); }
.fresh.stale .dot { transform: rotate(45deg); width: 0.52em; height: 0.52em; }
.fresh.offline .dot, .fresh.offline .fresh-word { color: var(--bad); }
.fresh.offline .dot { background: transparent; border: 2px solid currentColor; border-radius: 50%; }
.fresh.none .dot { height: 2px; width: 0.62em; color: var(--muted); }
.fresh.none .fresh-word { color: var(--muted); font-weight: 600; }
.offline-banner a { color: var(--text); text-decoration: underline; }

.nav a, .subnav a { display: inline-flex; align-items: center; min-height: 2.75rem; }  /* U10: taps >= 44 px */
@media (max-width: 1024px) {
  .tabs a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}
@media (max-width: 720px) {
  .ts-in { gap: 0 var(--s3); }
  details.ts-item[open] { width: 100%; }
  .ts-pop, .ts-pop-end { position: static; width: auto; max-width: none; margin: 0 0 var(--s2); box-shadow: none; }
  .ts-pop .grid th, .ts-pop .grid td { padding: 0.35em 0.45em; }
}

/* U4: a button marked data-ux="order-confirm" blocked by static/ux/strip.js in «Устарели» or «Нет связи» */
.stale-note { display: inline-block; margin-left: var(--s2); color: var(--warn); font-size: 0.86rem; }

/* U10 on every screen at phone widths: buttons and disclosures are tap targets of at least 44x44 px */
@media (max-width: 720px) {
  main button, main .btn, main summary, main input[type="submit"], main input[type="button"] {
    min-height: 2.75rem; min-width: 2.75rem; }
  main summary { padding-block: 0.7em; }  /* a block: the disclosure keeps its marker */
}