/* ═══ the browser view ══════════════════════════════════════════════════════
   Loaded ONLY by the /web shell. /app — the surface Telegram opens as a Mini
   App — never requests this file, so the phone column stands there at any
   window width, which is what a Mini App is supposed to look like even when
   Telegram Desktop hands it a wide one.

   That is also why these rules live in their own file rather than behind an
   `html[data-surface="web"]` prefix on every selector: the split is then a fact
   of the network (one surface downloads it, the other does not) instead of a
   specificity contest, and nothing here can leak into the Mini App because
   somebody forgot the prefix on a rule added later.

   Under 1000px nothing here applies and /web is byte-for-byte the /app layout
   — deliberately, so landing on the wrong door costs a phone user nothing.
   Above it, each screen gets the width it can actually use, which is NOT the
   same width for all of them: a login form 1180px wide is worse than one at
   460px.

   Everything below keys off body[data-screen], stamped by paint() in app.js.
   A screen with no name simply keeps the default column.

   Colours come from style.css's :root, so this file is the same in every
   storefront and each one renders it in its own skin. Nothing here hard-codes
   a hex. ═══════════════════════════════════════════════════════════════════ */
@media (min-width:1000px){

  /* ── the bar ──
     No wrapper element exists inside #hdr, so the bar is centred with padding
     instead of markup — max() keeps a sane gutter on a narrow desktop. */
  #hdr{padding:15px max(24px,calc((100% - 1180px) / 2));height:72px}
  .logo{font-size:20px;gap:11px}
  .logo-img{width:32px;height:32px}
  .logo-mark{width:24px;height:24px}

  /* The default column. Every screen below either takes this or says why. */
  #app{max-width:620px;padding:34px 24px 80px}
  h2{font-size:28px;margin-bottom:22px}

  /* ── sign in ──
     The window floats in the middle of the page instead of sitting at the top
     of a column. 72px is the sticky header above. */
  body[data-screen="auth"] #app{max-width:none;padding:0;
    min-height:calc(100vh - 72px);display:flex;flex-direction:column;
    align-items:center;justify-content:center}
  /* The children are the logo, the title, the tab strip and the card: they all
     have to agree on one width or the strip floats free of the box under it. */
  body[data-screen="auth"] #app > *{width:100%;max-width:460px}
  body[data-screen="auth"] #app > .card{padding:26px 26px 22px}

  /* ── the screens that earn more than the default column ── */
  body[data-screen="home"] #app{max-width:1180px;padding-left:34px;padding-right:34px}
  /* Rates sits just inside home. A rate row is one short line of text and one
     price: at the full 1180 the carrier name and the amount end up at opposite
     edges of the screen and the eye has to travel the whole width to pair them.
     Narrower reads as a list of comparable things. */
  body[data-screen="ratesScreen"] #app,
  body[data-screen="pointsScreen"] #app{max-width:1040px;padding-left:34px;padding-right:34px}
  /* Saved labels for the same reason: a label card is a carrier, a price and
     two buttons, so the wider the page the further the price drifts from the
     name it belongs to, and the more empty floor sits under the buttons. */
  body[data-screen="labelsScreen"] #app{max-width:940px;padding-left:34px;padding-right:34px}
  /* Forms are wide enough for two columns, and no wider. */
  body[data-screen="shipFrom"] #app,
  body[data-screen="details"] #app,
  body[data-screen="smartLabel"] #app,
  body[data-screen="settings"] #app,
  body[data-screen="supportScreen"] #app,
  body[data-screen="ticketThread"] #app{max-width:940px;padding-left:34px;padding-right:34px}

  /* ── home ──
     The hero mark is a phone device: on /web the bar above already carries the
     brand, and 104px of centred logo pushes everything the customer came for
     below the fold. It is the WRAPPER that is hidden, not the image — the image
     carries an inline style="display:block" that a stylesheet cannot outrank
     without !important. */
  body[data-screen="home"] #app > .center:first-child{display:none}
  body[data-screen="home"] .hero-word{display:none}
  #svhost:empty{display:none}

  /* The balance stops being a centred card and becomes the bar across the top
     of the dashboard: the number is the one thing a returning customer opens
     this page to read. */
  body[data-screen="home"] .card.center{display:flex;align-items:baseline;gap:22px;
    text-align:left;padding:24px 28px;margin-bottom:16px}
  body[data-screen="home"] .card.center small{font-size:12px;letter-spacing:.06em;
    text-transform:uppercase;flex:none}
  body[data-screen="home"] .balance{font-size:48px;line-height:1}
  body[data-screen="home"] .contact-card{margin-bottom:16px}

  /* Twelve tracks, so the two rows can have different rhythms. Row one is what
     people come for — buy a label, put money in. Row two is everything a
     customer touches once a month at most. Equal tiles would have claimed all
     six were equally likely. Sized by padding and never by a min-height:
     forcing them taller only puts empty floor under one word. */
  .dgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
  .dgrid .btn{margin-top:0;grid-column:span 3;text-align:left;
    padding:24px 22px;font-size:18px}
  .dgrid .btn#bn{grid-column:span 8;font-size:25px;padding:32px 28px}
  .dgrid .btn#br{grid-column:span 4;font-size:25px;padding:32px 28px}

  /* ── the quote form ──
     From and To are the same question asked twice, so they sit side by side and
     the parcel spans both. Stacked, the customer scrolls past the origin to
     reach the destination and cannot see the corridor they are pricing. */
  body[data-screen="shipFrom"] #app > .card:nth-of-type(1),
  body[data-screen="shipFrom"] #app > .card:nth-of-type(2){
    display:inline-block;width:calc(50% - 7px);vertical-align:top;margin-bottom:14px}
  body[data-screen="shipFrom"] #app > .card:nth-of-type(1){margin-right:12px}

  /* ── recipient details ──
     Sender and recipient in two columns: they are filled in one after the other
     and constantly compared. The chosen-service card above them stays full
     width — it is one line, and splitting it would put the price in a column of
     its own. nth-of-type counts DIVS, so 1 is #chsvc, 2 is sender, 3 is
     recipient. */
  body[data-screen="details"] #app > .card:nth-of-type(2),
  body[data-screen="details"] #app > .card:nth-of-type(3){
    display:inline-block;width:calc(50% - 7px);vertical-align:top;margin-bottom:14px}
  body[data-screen="details"] #app > .card:nth-of-type(2){margin-right:12px}

  /* ── smart label ──
     The two paste boxes are the same question asked twice, exactly like From
     and To above. 1 is sender, 2 is recipient, 3 is the parcel. */
  body[data-screen="smartLabel"] #app > .card:nth-of-type(1),
  body[data-screen="smartLabel"] #app > .card:nth-of-type(2){
    display:inline-block;width:calc(50% - 7px);vertical-align:top;margin-bottom:14px}
  body[data-screen="smartLabel"] #app > .card:nth-of-type(1){margin-right:12px}

  /* ── rates ──
     A rate list is scanned, not read, and every millimetre of row height is one
     fewer option visible without scrolling. */
  body[data-screen="ratesScreen"] .rate{padding:13px 20px;margin-bottom:7px}
  body[data-screen="ratesScreen"] .rate .price{font-size:24px}

  /* ── saved labels ── */
  body[data-screen="labelsScreen"] .lbl{padding:16px 20px}

  /* ── the actions at the foot of a form ──
     A full-width slab of a button is a thumb target, and there are no thumbs
     here. The primary action keeps its weight without becoming a banner. */
  body[data-screen="shipFrom"] #app > .btn,
  body[data-screen="details"] #app > .btn,
  body[data-screen="smartLabel"] #app > .btn{width:auto;min-width:280px;padding-left:34px;padding-right:34px}
}