/* "Qanday ishlaydi" — Live surface. Mahsulot ranglari (style.css qorong'i rejim), tizim shriftlari
   (3G uchun yuklab olinadigan shrift yo'q). Engine'ning [data-sc-*] qoidalariga tegilmaydi. */
:root {
  --sc-canvas: #0f1214;
  --sc-surface: #171b1e;
  --sc-ink: #e8ebe9;
  --sc-ink-soft: #a3aca8;
  --sc-accent: #3fb88a;
  --sc-accent-ink: #0b1210;
  --sc-font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sc-font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sc-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
  --sc-shadow-color: 200 30% 3%;
  --qy-up: #4cc995;
  --qy-down: #ef7b6c;
  --qy-bar-h: 3.25rem;
  color-scheme: dark;
}

.qy { letter-spacing: 0; }
.qy-num { font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.qy-muted { color: var(--sc-ink-soft); }
.qy-arrow { color: var(--sc-ink-soft); font-weight: 400; }
.up { color: var(--qy-up); }
.down { color: var(--qy-down); }
.qy-h1, .qy-h2 { font-family: var(--sc-font-display); font-weight: 700; letter-spacing: var(--sc-track-snug);
  line-height: var(--sc-leading-tight); text-wrap: balance; margin: 0; }
.qy-h1 { font-size: var(--sc-t-2xl); max-width: 16ch; }
.qy-h2 { font-size: var(--sc-t-xl); }
.qy-lead { color: var(--sc-ink-soft); max-width: 40ch; margin: var(--sc-4) 0 0; text-wrap: pretty; }
.qy-lead b { color: var(--sc-ink); font-weight: 600; }
.qy-eyebrow { margin: 0 0 var(--sc-2); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide);
  text-transform: uppercase; color: var(--sc-accent); font-weight: 600; }
.qy-panel { background: var(--sc-surface); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e2), var(--sc-edge); }
.qy-link { color: var(--sc-accent); font-weight: 600; }

.qy-skip { position: fixed; left: var(--sc-3); top: -4rem; z-index: 100; background: var(--sc-accent);
  color: var(--sc-accent-ink); padding: var(--sc-2) var(--sc-3); border-radius: var(--sc-r-sm); font-weight: 600;
  text-decoration: none; }
.qy-skip:focus { top: var(--sc-3); }
main:focus { outline: none; }

/* ── Holat qatori: ilova chrome'i, navigatsiyaning o'zi ── */
.qy-bar { position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome); height: var(--qy-bar-h);
  display: flex; align-items: center; gap: var(--sc-4); padding-inline: var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 92%, transparent); border-bottom: 1px solid var(--sc-hairline); }
.qy-mark { display: flex; align-items: center; gap: var(--sc-2); text-decoration: none; font-size: 1.05rem;
  letter-spacing: -0.02em; }
.qy-mark b { font-weight: 800; }
.qy-mark svg { width: 26px; height: 26px; }
.qy-mark__bg { fill: var(--sc-ink); } .qy-mark__truck { fill: var(--sc-canvas); } .qy-mark__wheel { fill: var(--sc-accent); }
.qy-status { margin: 0; display: flex; align-items: center; gap: var(--sc-2); font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft); white-space: nowrap; }
.qy-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-accent); }
.qy-bar__nav { margin-left: auto; display: flex; gap: var(--sc-1); }
.qy-bar__nav a { padding: var(--sc-2) var(--sc-3); border-radius: var(--sc-r-pill); text-decoration: none;
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft); transition: color var(--sc-d-fast) var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .qy-bar__nav a:hover { color: var(--sc-ink); } }
.qy-bar__nav a { white-space: nowrap; }
@media (max-width: 560px) {
  .qy-status__more { display: none; }
  .qy-bar { gap: var(--sc-3); }
  .qy-bar__nav a { padding-inline: var(--sc-2); }
}
@media (max-width: 380px) { .qy-mark span { display: none; } }

/* ── 1 · Lenta ── */
.qy-feed__stage { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sc-8); align-items: center;
  padding: calc(var(--qy-bar-h) + var(--sc-6)) var(--sc-gutter) var(--sc-6); max-width: var(--sc-maxw); margin-inline: auto; }
.qy-panel__head { display: flex; justify-content: space-between; gap: var(--sc-3); padding: var(--sc-3) var(--sc-4);
  border-bottom: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); font-weight: 600; }
.qy-panel__head .qy-muted { font-weight: 400; }
.qy-feed__window { height: min(62svh, 34rem); overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 78%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); }
.qy-feed__list { list-style: none; margin: 0; padding: 0; will-change: transform;
  transform: translate3d(0, calc(var(--sc-p, 0) * -46%), 0); }
.qy-row { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sc-4); padding: var(--sc-3) var(--sc-4);
  border-bottom: 1px solid var(--sc-hairline); }
.qy-row__route { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qy-row__price { font-weight: 700; text-align: right; }
.qy-row__meta, .qy-row__age { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.qy-row__age { text-align: right; white-space: nowrap; }
.qy-row--empty { display: block; color: var(--sc-ink-soft); }

/* ── 2 · Takrorlar ── */
.qy-ledger { padding-block: var(--sc-8) var(--sc-9); }
.qy-ledger__wrap { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sc-8); align-items: end; }
.qy-ledger__table { margin: 0; }
.qy-ledger__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sc-4);
  padding-block: var(--sc-3); border-bottom: 1px solid var(--sc-hairline); }
.qy-ledger__row dt { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.qy-ledger__row dd { margin: 0; font-size: clamp(1.9rem, 1.2rem + 3vw, 3.6rem); font-weight: 600; line-height: 1.1; }
.qy-ledger__row--dup dd { color: var(--sc-ink-soft); font-weight: 400; }
.qy-ledger__row--dup s { text-decoration-thickness: 2px; text-decoration-color: var(--qy-down); }
.qy-ledger__row--total { border-bottom: 0; }
.qy-ledger__row--total dt { color: var(--sc-ink); font-weight: 600; }
.qy-ledger__row--total dd { color: var(--sc-accent); font-weight: 700; }

/* ── 3 · Bitta yuk (eng sokin joy) ── */
.qy-anatomy { padding-block: var(--sc-7) var(--sc-9); }
.qy-anatomy__wrap { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sc-8); align-items: start; }
.qy-anatomy__card { position: sticky; top: calc(var(--qy-bar-h) + var(--sc-6)); display: grid; gap: var(--sc-5); }
.qy-ticket { padding: var(--sc-5); display: grid; gap: var(--sc-2); }
.qy-ticket p { margin: 0; }
.qy-ticket__route { font-size: var(--sc-t-lg); font-weight: 700; }
.qy-ticket__nums { font-size: var(--sc-t-lg); }
.qy-ticket .qy-muted { font-size: var(--sc-t-sm); }
.qy-anatomy__fields { margin: 0; display: grid; }
.qy-field { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sc-1) var(--sc-5); padding-block: var(--sc-5);
  border-bottom: 1px solid var(--sc-hairline); }
.qy-field dt { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); padding-top: 0.55rem; }
.qy-field dd { margin: 0; font-size: var(--sc-t-xl); font-weight: 650; line-height: 1.2; }
.qy-field p { grid-column: 2; margin: 0; color: var(--sc-ink-soft); max-width: 52ch; font-size: var(--sc-t-sm); }

/* ── 4 · Taxograf (cho'qqi) ── */
.qy-trip { --qy-t: 1; }                      /* JS'siz: safar tugagan holat */
.qy-trip__stage { display: flex; flex-direction: column; justify-content: center; gap: var(--sc-7);
  padding: calc(var(--qy-bar-h) + var(--sc-5)) var(--sc-gutter) var(--sc-6); max-width: var(--sc-maxw); margin-inline: auto; }
.qy-trip__head .qy-muted { margin: var(--sc-3) 0 0; max-width: 58ch; font-size: var(--sc-t-sm); }
.qy-road { position: relative; height: 4.5rem; container-type: inline-size; }
/* yo'l: uzuq chiziq; bosib o'tilgan qismi — scaleX (faqat transform, layout emas) */
.qy-road__base, .qy-road__done { position: absolute; left: 0; right: 0; top: 1.2rem; height: 3px; border-radius: 2px; }
.qy-road__base { background: repeating-linear-gradient(90deg, var(--sc-hairline-strong) 0 10px, transparent 10px 18px); }
.qy-road__done { background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(var(--qy-t)); will-change: transform; }
.qy-road__truck { position: absolute; left: 0; top: 0.1rem; width: 2.5rem; height: 2.3rem; color: var(--sc-ink);
  transform: translate3d(calc(var(--qy-t) * (100cqw - 2.5rem)), 0, 0); will-change: transform; }
.qy-road__truck svg { width: 100%; height: 100%; fill: currentColor; }
.qy-road__truck circle { fill: var(--sc-accent); }
.qy-road__city { position: absolute; bottom: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.qy-road__city--to { right: 0; }
.qy-meters { display: flex; flex-wrap: wrap; gap: var(--sc-4) var(--sc-9); align-items: baseline; }
.qy-meter { margin: 0; display: flex; align-items: baseline; gap: var(--sc-3); }
.qy-meter__v { font-size: clamp(3rem, 1.4rem + 7vw, 8rem); font-weight: 700; line-height: 1; letter-spacing: -0.045em; }
.qy-meter__u { font-size: var(--sc-t-lg); color: var(--sc-ink-soft); }
.qy-meter--fare .qy-meter__v { color: var(--sc-accent); }
.qy-seal { border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-4); display: grid; gap: var(--sc-2);
  font-size: var(--sc-t-sm); }
.qy-seal p { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sc-1) var(--sc-3); align-items: baseline; }
.qy-seal a { color: var(--sc-accent); font-weight: 600; }

/* ── 5 · Yo'nalishlar ── */
.qy-routes__stage { display: flex; align-items: center; padding-top: var(--qy-bar-h); }
.qy-rail { display: flex; gap: var(--sc-4); align-items: stretch; padding-inline: var(--sc-gutter); width: max-content; }
.qy-rail__lead { width: min(24rem, 78vw); align-self: center; padding-right: var(--sc-6); }
.qy-rail__lead .sc-body { margin-top: var(--sc-3); font-size: var(--sc-t-sm); }
.qy-label { width: clamp(15rem, 22vw, 18.5rem); padding: var(--sc-5); display: grid; align-content: start; gap: var(--sc-5); }
.qy-label h3 { margin: 0; font-size: var(--sc-t-lg); line-height: 1.25; }
.qy-label h3 a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .qy-label h3 a:hover { text-decoration: underline; } }
.qy-label dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4) var(--sc-3); }
.qy-label dt { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.qy-label dd { margin: 0; font-weight: 650; }
.qy-rail__note { width: min(18rem, 70vw); align-self: center; padding-left: var(--sc-5); display: grid; gap: var(--sc-3); }

/* ── 6 · Forma ── */
.qy-close { padding-block: var(--sc-6) var(--sc-7); }      /* pinned act'dan keyin: qisqa (devices.md §8) */
.qy-close__wrap { display: grid; gap: var(--sc-9); }
.qy-search { display: grid; gap: var(--sc-5); max-width: 52rem; }
.qy-search__fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--sc-3); align-items: end; }
.qy-search label { display: grid; gap: var(--sc-2); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.qy-search input { width: 100%; min-width: 0; font-size: 1.125rem; color: var(--sc-ink); background: var(--sc-surface);
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md); padding: 0.85rem 1rem;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out); }
.qy-search input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }
.qy-search input:focus { border-color: var(--sc-accent); outline: none; }
.qy-search input:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.qy-search .qy-muted { margin: 0; font-size: var(--sc-t-sm); }
.qy-btn { font-weight: 700; font-size: 1rem; white-space: nowrap; border: 0; cursor: pointer; min-height: 3.2rem;
  padding: 0 var(--sc-5); border-radius: var(--sc-r-md); background: var(--sc-accent); color: var(--sc-accent-ink);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), filter var(--sc-d-fast) var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .qy-btn:hover { filter: brightness(1.08); } }
.qy-btn:active { transform: translateY(1px); }
.qy-foot { font-size: var(--sc-t-sm); border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-5); }
.qy-foot p { margin: 0 0 var(--sc-2); }
.qy-foot a { color: var(--sc-accent); }

/* ── Telefon: kompozitsiya qaytadan ── */
@media (max-width: 860px) {
  .qy-feed__stage { grid-template-columns: 1fr; gap: var(--sc-5); align-content: start;
    padding-top: calc(var(--qy-bar-h) + var(--sc-5)); }
  .qy-h1 { font-size: var(--sc-t-xl); }
  .qy-lead { margin-top: var(--sc-3); font-size: var(--sc-t-sm); }
  .qy-feed__window { height: 52svh; }
  .qy-ledger__wrap, .qy-anatomy__wrap { grid-template-columns: 1fr; gap: var(--sc-6); }
  .qy-anatomy__card { position: static; }
  .qy-field { grid-template-columns: 1fr; }
  .qy-field dt { padding-top: 0; }
  .qy-field p { grid-column: 1; }
  .qy-trip__stage { gap: var(--sc-6); justify-content: center; }
  .qy-meters { flex-direction: column; gap: var(--sc-2); }
  .qy-search__fields { grid-template-columns: 1fr; }
  .qy-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .qy-feed__list { transform: none; }
  .qy-feed__window { overflow-y: auto; mask-image: none; -webkit-mask-image: none; }
}