/* Stage 4 · Limits on the computer. Direction B, mosaic Q1.
   Same objects as the phone. Geometry only, from 1024 px up.
   Reference language: css/v9/desktop.css. */

@media (min-width: 1024px) {
  #page-budgets .page-inner {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0 0 24px;
  }

  #bTabs {
    margin: 0 0 16px;
  }

  /* The phone list under the mosaic is a second, stretched screen. */
  #bLimitsWrap > #q1Limits ~ :not(#q1Limits) { /* sibling form of :has(#q1Limits): :has re-ran on every DOM insertion in the page (3 ms each) */
    display: none;
  }

  #bLimitsWrap,
  #q1Limits {
    min-width: 0;
  }

  #q1Limits {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  #q1Limits .q1-kpis,
  #q1Limits .q1-mosaic {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
  }

  #q1Limits .q1-kpi,
  #q1Limits .q1-qtile {
    min-width: 0;
    margin: 0;
  }

  /* 1024+: three KPIs in one row, tiles four across (the big one takes two), so the page fits 900 px. */
  #q1Limits .q1-kpi,
  #q1Limits .q1-kpi.q1-blue {
    grid-column: span 4;
  }

  /* Compact rows: the whole page has to sit in one 900 px screen. */
  #q1Limits,
  #q1Limits .q1-kpis,
  #q1Limits .q1-mosaic {
    gap: 12px;
  }

  #page-budgets .page-head,
  #bTabs {
    margin-bottom: 12px;
  }

  #q1Limits .q1-kpi {
    padding: 20px;
  }

  /* Approved Q1 tile (13.10): 28 px radius, 14/18 padding, name / figure / slider spaced by the gap. */
  #q1Limits .q1-qtile {
    padding: 20px;
    min-height: 0;
    gap: 4px;
    border-radius: 24px;
  }

  /* tiles stretched by a tall neighbour keep the sum on one level */
  #q1Limits .q1-qtile:not(.q1-tone) { justify-content: flex-start; }

  #q1Limits .q1-qtile .q1-nm {
    font: 400 13px/18px var(--sans);
    color: var(--ink-2);
  }

  #q1Limits .q1-qtile .q1-line {
    margin: 0;
    gap: 8px;
    white-space: nowrap;
    font: 400 16px/1.45 var(--sans);
  }

  #q1Limits .q1-qtile .q1-line .q1-sp {
    font: 500 24px/1.1 var(--sans);
    letter-spacing: -0.6px;
    color: var(--ink);
  }

  #q1Limits .q1-qtile .q1-line .q1-of {
    font: 400 14px/20px var(--sans);
    color: var(--ink-3);
  }

  #q1Limits .q1-qtile.q1-big .q1-line .q1-sp {
    font-size: 34px;
    letter-spacing: -1px;
  }

  #q1Limits .q1-qtile.q1-big .q1-line .q1-of {
    font-size: 16px;
  }

  #q1Limits .q1-kpi .q1-lbl {
    font: 500 13px/1.3 var(--sans);
  }

  #q1Limits .q1-kpi .q1-px,
  #q1Limits .q1-kpi .q1-onest {
    display: block;
    margin-top: 2px;
    font: 500 28px/1.15 var(--sans);
    letter-spacing: -0.03em;
  }

  #q1Limits .q1-kpi.q1-blue .q1-px {
    font-size: 36px;
    line-height: 1.05;
  }

  #q1Limits .q1-kpi .q1-s {
    margin-top: 0;
    font: 400 13px/1.25 var(--sans);
  }

  #q1Limits .q1-qtile {
    grid-column: span 3;
  }

  #q1Limits .q1-mosaic > .q1-qtile.q1-big {
    grid-column: span 6;
  }

  #q1Limits .q1-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35em;
    min-width: 0;
  }

  /* shortcut: spent figure has no currency node; the code is on the tile. */
  #q1Limits .q1-qtile[data-m4b-currency="USD"] .q1-sp::after { content: "\00a0$"; }
  #q1Limits .q1-qtile[data-m4b-currency="EUR"] .q1-sp::after { content: "\00a0€"; }
  #q1Limits .q1-qtile[data-m4b-currency="USDT"] .q1-sp::after { content: "\00a0USDT"; }

  /* Status pill: a quiet capsule, the state lives in the coloured dot (as on the phone). */
  #q1Limits .q1-qtile .q1-st {
    padding: 0 10px;
    font: 500 12px/24px var(--sans);
    background: var(--well);
    color: var(--ink-2);
  }

  #q1Limits .q1-qtile .q1-st::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sem, var(--ink-2));
    flex: none;
  }

  #q1Limits .q1-foot {
    width: fit-content;
    max-width: 100%;
    justify-content: flex-start;
    gap: 12px;
    padding: 0;
  }

  #q1Limits .q1-foot .q1-link,
  #q1Limits .q1-rm-head {
    min-height: 44px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--well);
    color: var(--ink);
    font: 500 13px/1.3 var(--sans);
    text-decoration: none;
    cursor: pointer;
    max-width: 100%;
  }

  #q1Limits .q1-subscriptions .ztsw-trigger {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 4px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    text-align: left;
  }

  #q1Limits .q1-subscriptions .ztsw-row.row4 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    height: auto;
    gap: 8px;
    margin: 0 0 4px;
    min-width: 0;
    max-width: 100%;
  }

  #q1Limits .q1-subscriptions .ztsw-w4i {
    min-width: 0;
    flex: none;
  }

  #q1Limits .q1-subscriptions .ztsw-icon.logo {
    display: block;
    width: var(--ztsw-size, 48px);
    height: var(--ztsw-size, 48px);
    border-radius: calc(var(--ztsw-size, 48px) * 0.32);
  }

  #q1Limits .q1-subscriptions .ztsw-icon.logo .ops-merchant {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }

  #q1Limits .q1-subscriptions .subscription-brand {
    display: block;
    width: 50%;
    height: 50%;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }

  #q1Limits .q1-subscriptions .ztsw-more {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--ztsw-size, 48px);
    margin-bottom: 20px;
    padding: 0 4px;
    font: 500 13px/1 var(--sans);
    color: var(--ink-2);
    white-space: nowrap;
  }

  #q1Limits .q1-subscriptions .ztsw-line {
    white-space: normal;
  }

  /* Lens slider, approved Q1 (13.10): the capsule rides the front of one-colour spent fill (overage is told
     by its position past the limit mark and by the status pill), the limit is a 1 px mark; --slw (track width in px) is kept live by ZTM4bTiles.observeLens. */
  #q1Limits .q1-qtile .q1-sl {
    margin: 0 -6px;
    --slh: 36px; /* Q1 box 39.75; the 44 px hit zone is the thumb (.q1-sl-th), which overflows transparently */
  }

  #q1Limits .q1-sl {
    --pad: 24px;
    --tw: 48px;
    --th: 32px;
    --h: 10px;
    --slh: 44px;
    --sl-shadow: rgba(15, 23, 42, 0.26);
    --f-current: var(--f-sp, 0);
    --xl: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--f-lim, 0));
    --xc: calc(var(--pad) + (100% - 2 * var(--pad)) * clamp(0, var(--f-current), 1));
    --mx: 1;
    --my: 1;
    display: block;
    height: var(--slh);
  }

  #q1Limits .q1-sl-track {
    position: absolute;
    left: 0;
    right: 0;
    top: calc((var(--slh) - var(--h)) / 2);
    height: var(--h);
    background: var(--sl-track);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
  }

  /* The fill ends in the centre of the lens; while pulled it follows the lens. */
  #q1Limits .q1-sl-track .q1-sl-spent {
    width: var(--xc);
    max-width: 100%;
  }

  /* Over the limit the one-colour fill reads in ink, not «ok» green; red stays for errors (owner layer). */
  #q1Limits .q1-qtile[data-k="over"] .q1-sl-spent { background: var(--ink); }

  #q1Limits .q1-sl-limit {
    display: block;
    position: absolute;
    z-index: 3;
    top: 1px;
    bottom: 1px;
    left: var(--xl);
    width: 1px;
    border-radius: 0;
    background: var(--sl-tick, var(--ink-3));
    pointer-events: none;
  }

  #q1Limits .q1-sl-th {
    left: var(--xc);
    width: var(--tw);
    height: 44px;
    min-height: 44px;
    margin: -22px 0 0 calc(var(--tw) / -2);
    display: block;
    overflow: visible;
    transform: none;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
  }

  /* The glass lens: a window onto the same scale, one-to-one around the capsule centre. */
  #q1Limits .q1-sl-lens {
    position: absolute;
    inset: 6px 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 0.5px rgba(15, 23, 42, 0.1), 0 1.5px 3px rgba(15, 23, 42, 0.1), 0 6px 14px -5px var(--sl-shadow);
  }

  #q1Limits .q1-sl-lens-in {
    position: absolute;
    top: calc((var(--th) - var(--h)) / 2);
    width: var(--slw, 100%);
    height: var(--h);
    left: calc(var(--tw) / 2 - var(--pad) - (var(--slw, 100%) - 2 * var(--pad)) * var(--f-current));
    background: var(--sl-track);
    border-radius: 0;
    transform-origin: calc(var(--pad) + (var(--slw, 100%) - 2 * var(--pad)) * var(--f-current)) 50%;
    transform: scale(var(--mx), var(--my));
    transition: transform var(--flight) var(--travel);
  }

  #q1Limits .q1-sl.q1-is-drag .q1-sl-lens-in {
    --mx: 1.04;
    --my: 1.04;
  }

  #q1Limits .q1-sl-lens-in .q1-sl-spent {
    width: calc(var(--pad) + (var(--slw, 100%) - 2 * var(--pad)) * var(--f-sp, 0));
    border-radius: 0;
    box-shadow: inset 0 2px 3px -1px rgba(255, 255, 255, 0.35), inset 0 -2px 3px -1px rgba(0, 0, 0, 0.12);
  }

  #q1Limits .q1-sl-body,
  #q1Limits .q1-sl-rim {
    position: absolute;
    inset: 6px 0;
    border-radius: inherit;
    pointer-events: none;
    display: block;
  }

  #q1Limits .q1-sl-body {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 1.25px 1.25px 0 -0.25px #fff, inset -1px -1px 0 -0.25px rgba(255, 255, 255, 0.75), inset 0 0 5px rgba(15, 23, 42, 0.1), inset 0 0 1px 1px rgba(255, 255, 255, 0.55);
  }

  #q1Limits .q1-sl-rim {
    opacity: 0.9;
    box-shadow: inset 3px 0 4px -2px color-mix(in srgb, var(--sl-spent) 55%, transparent), inset -3px 0 4px -2px color-mix(in srgb, var(--sl-left) 42%, transparent), inset 0 -5px 6px -4px color-mix(in srgb, var(--sl-left) 18%, transparent);
  }

  #q1Limits .q1-sl-th:focus-visible .q1-sl-body {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  html[data-theme="dark"] #q1Limits .q1-sl,
  html.dark #q1Limits .q1-sl {
    --sl-shadow: rgba(0, 0, 0, 0.6);
  }

  html[data-theme="dark"] #q1Limits .q1-sl-body,
  html.dark #q1Limits .q1-sl-body {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 1px 1px 0 -0.25px rgba(255, 255, 255, 0.7), inset -1px -1px 0 -0.25px rgba(255, 255, 255, 0.3), inset 0 0 5px rgba(0, 0, 0, 0.35);
  }

  @media (prefers-reduced-motion: reduce) {
    #q1Limits .q1-sl-lens-in {
      transition: none;
    }
  }
}

@media (min-width: 1440px) {
  #q1Limits .q1-kpi.q1-blue {
    grid-column: span 5;
  }

  #q1Limits .q1-kpis > .q1-kpi:nth-child(2) {
    grid-column: span 4;
  }

  #q1Limits .q1-kpis > .q1-kpi:nth-child(3) {
    grid-column: span 3;
  }

  #q1Limits .q1-qtile,
  #q1Limits .q1-mosaic > .q1-qtile:nth-last-child(-n+3),
  #q1Limits .q1-mosaic > .q1-qtile:nth-last-child(-n+2) {
    grid-column: span 3;
  }

  #q1Limits .q1-mosaic > .q1-qtile.q1-big {
    grid-column: span 6;
  }
}

@media (min-width: 1680px) {
  #q1Limits,
  #q1Limits .q1-kpis,
  #q1Limits .q1-mosaic {
    gap: 20px;
  }

  #q1Limits .q1-kpi.q1-blue {
    grid-column: span 4;
  }

  #q1Limits .q1-kpis > .q1-kpi:nth-child(2) {
    grid-column: span 5;
  }

  #q1Limits .q1-kpis > .q1-kpi:nth-child(3) {
    grid-column: span 3;
  }

  #q1Limits .q1-qtile,
  #q1Limits .q1-mosaic > .q1-qtile:nth-last-child(-n+3),
  #q1Limits .q1-mosaic > .q1-qtile:nth-last-child(-n+2) {
    grid-column: span 2;
  }

  #q1Limits .q1-mosaic > .q1-qtile.q1-big {
    grid-column: span 4;
  }
}

/* W8 · Aligned category/status headers and balanced subscription columns. */
@media (min-width: 1024px) {
  #q1Limits .q1-qtile .q1-nm { display: flex; flex-wrap: nowrap; gap: 8px; min-height: 18px; }
  #q1Limits .q1-qtile .q1-nm > .q1-st { margin-block: -3px; } /* 24 px pill must not grow the 18 px name line (Q1 tile 139) */
  #q1Limits .q1-qtile .q1-nm > .q1-nm-t { min-width: 0; }
  #page-budgets #bSubsWrap .r8-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-budgets #bSubsWrap .card { margin: 0; }
  #page-budgets #bSubsWrap .ztsw-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; }
  #page-budgets #bSubsWrap .ztsw-grp-row { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
  #page-budgets #bSubsWrap .sub-row:not(.live-sub-row) { grid-template-columns: 40px minmax(0, 1fr); }
}
/* 1024-1439 tiles are ~230 px: a tighter pill keeps name and status on one row in every tile. */
@media (min-width: 1024px) and (max-width: 1439px) {
  #q1Limits .q1-qtile:not(.q1-big) { padding-inline: 12px; }
  #q1Limits .q1-qtile:not(.q1-big) .q1-nm { gap: 4px; }
  #q1Limits .q1-qtile:not(.q1-big) .q1-nm > .q1-nm-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* gate 4 P2: the status dot stays on every tile (1440 shows it on all 9) */
  #q1Limits .q1-qtile:not(.q1-big) .q1-st { padding-inline: 6px; gap: 3px; }
}
@media (min-width: 1680px) {
  #page-budgets #bSubsWrap .sub-row:not(.live-sub-row) { grid-template-columns: 40px minmax(0, 1fr) auto; }
  #page-budgets #bSubsWrap .sub-amt { grid-column: 3; text-align: right; }
  #page-budgets #bSubsWrap .sub-actions { justify-content: flex-end; }
}

@media (min-width: 1680px) {
  #page-budgets #bSubsWrap .sub-row.live-sub-row { grid-template-columns: minmax(0, 1fr) auto; }
  #page-budgets #bSubsWrap .live-sub-row > .sub-info { grid-column: 1; }
  #page-budgets #bSubsWrap .live-sub-row > .sub-amt { grid-column: 2; text-align: right; }
  #page-budgets #bSubsWrap .live-sub-row > .sub-actions { grid-column: 1 / -1; justify-content: flex-start; }
}