/* GOODLOAD: light, Hindi-first responsive polish. No business logic.
   Screen-only so existing bill/QR print layouts remain unchanged. */
@media screen {
  :root {
    --txt2: #52617A;
    --txt3: #5E6E86;
    --acc: #B94A00;
    --shadow-sm: 0 2px 8px rgba(18,35,63,.05);
    --shadow: 0 6px 20px rgba(18,35,63,.07);
  }

  html { scroll-padding-block: 5rem 9rem; }
  .screen { min-width: 0; }
  .body, .wrap, .rbody { min-width: 0; }
  .body { padding-block-start: 1.25rem; }
  .body.has-nav { padding-bottom: calc(9rem + env(safe-area-inset-bottom)); }

  /* Wrap content rather than hiding overflow or shrinking the user's text. */
  .appbar-t, .rolebig-txt, .row-txt, .row-amt, .note,
  .tot-r, .bigamt, .lrow, .mn-t, .qr-naam, #toast b {
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }
  .appbar-t { line-height: 1.45; flex-basis: 7rem; }
  .appbar-t small { font-size: .8rem; line-height: 1.5; opacity: .9; }
  .appbar { gap: .65rem; flex-wrap: wrap; }
  .sp-in { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .secname { margin-block: .5rem .85rem; line-height: 1.5; }
  .secname::before { height: 1.25rem; }

  .rask h1 { font-size: 1.35rem; line-height: 1.5; }
  .rask p, .foot { font-size: .85rem; line-height: 1.6; }
  .rolebig { padding: .9rem; border-radius: 1rem; }
  .rolebig-t { line-height: 1.5; }
  .rolebig-en { font-size: .8rem; line-height: 1.6; }
  .rhead { border-bottom: .2rem solid var(--acc2); }
  .langbtn { position: static; margin: 0 0 .5rem auto; display: flex; width: fit-content; }

  /* ⚠️ यहाँ पहले सिर्फ़ `minmax(8rem, 1fr)` था — और यह 21 सित. को
     आँखों के सामने टूटा। `rem` फ़ोन की font setting के साथ बढ़ता
     है; "सबसे बड़े अक्षर" पर 8rem = 128px की जगह ~166px हो जाता
     था, और 360px वाले आम फ़ोन पर **दो टाइलें अँटती ही नहीं** —
     पूरा घर एक-एक टाइल की लंबी सूची बन जाता था।
     `min()` लगाने से नाप कभी पर्दे के 42% से ज़्यादा नहीं होती,
     इसलिए दो टाइलें हमेशा साथ रहती हैं। बड़े अक्षर वालों का आदर
     भी बना रहता है — अक्षर बड़े होते हैं, ढाँचा नहीं टूटता।    */
  .tiles { grid-template-columns: repeat(auto-fit, minmax(min(8rem, 42vw), 1fr)); gap: .75rem; }
  .tile { padding: 1rem .65rem; min-width: 0; box-shadow: none; }
  .tile b { font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
  .tile span { font-size: .75rem; line-height: 1.5; }
  .row { padding: .85rem; gap: .65rem; flex-wrap: wrap; }
  .row-txt { flex-basis: 7rem; }
  .row-t { font-size: .95rem; line-height: 1.55; }
  .row-s { font-size: .8rem; line-height: 1.6; }
  .row-amt { max-width: 100%; margin-inline-start: auto; font-variant-numeric: tabular-nums; }
  .row-amt small { font-size: .75rem; line-height: 1.5; }

  .fld > label { font-size: .9rem; line-height: 1.55; }
  .fld small, .fld .err { font-size: .8rem; line-height: 1.6; }
  input, select, textarea { min-width: 0; max-width: 100%; line-height: 1.5; }
  input::placeholder, textarea::placeholder { color: #66758B; }
  .frow { flex-wrap: wrap; gap: .75rem; }
  .frow > * { flex: 1 1 10rem; max-width: 100%; }
  .btn { line-height: 1.5; padding: .85rem 1rem; box-shadow: none; }
  .btn > span { min-width: 0; overflow-wrap: anywhere; }
  .btn:disabled { cursor: not-allowed; }
  .note, .kanoon { font-size: .9rem; line-height: 1.75; overflow-wrap: anywhere; }
  .note > span { min-width: 0; }
  .khali { padding: 2rem 1rem; }
  .khali span { font-size: .9rem; line-height: 1.7; }
  .item-top b { font-size: .95rem; line-height: 1.5; }

  .bigamt { flex-wrap: wrap; align-items: center; padding: 1.1rem; }
  .bigamt > * { min-width: 0; max-width: 100%; }
  .bigamt b { line-height: 1.4; font-variant-numeric: tabular-nums; }
  .bigamt span { font-size: .85rem; }
  .tot-r { flex-wrap: wrap; font-size: .9rem; }
  .tot-r > * { min-width: 0; max-width: 100%; }
  .tot-r b { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
  .sarko { width: 100%; max-width: 100%; min-width: 0; }

  .botnav-in { align-items: stretch; }
  .nbtn { font-size: .72rem; line-height: 1.5; padding: .5rem .15rem; overflow-wrap: anywhere; }
  .nbtn small { font-size: .65rem; line-height: 1.5; }
  .nbtn.on { background: rgba(255,168,61,.12); box-shadow: inset 0 .15rem var(--acc2); }
  #toast { bottom: calc(9rem + env(safe-area-inset-bottom)); }
  .mn-t { font-size: .95rem; line-height: 1.55; }
  .mn-t small { font-size: .8rem; line-height: 1.5; }

  /* Keep the composer visible when a modern mobile keyboard resizes the view. */
  #chatwin { height: 100vh; height: 100dvh; min-height: 0; }
  #chatwin .appbar, .cw-likhne { flex-shrink: 0; }
  .cw-body { min-height: 4rem; }
  .bub { font-size: 1rem; padding-bottom: .6rem; }
  .bub small { position: static; display: block; text-align: end; font-size: .75rem; }
  #cw-menu-box { max-width: calc(100% - 1.25rem); min-width: 0; }

  .qr-dabba { max-width: 100%; }
  .qr-batan { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .qr-id, .qr-pata, .qr-samjhao { font-size: .85rem; }

  /* A wrapping offline notice must occupy space, not cover the header. */
  #bina-net { position: sticky; font-size: .85rem; }
  body.net-nahi .appbar { padding-top: calc(.65rem + env(safe-area-inset-top)); }
  body.net-nahi .rhead { padding-top: calc(1rem + env(safe-area-inset-top)); }

  :focus-visible { outline: 3px solid #1B54B0; outline-offset: 3px; }
  .appbar :focus-visible, .botnav :focus-visible, .rhead :focus-visible {
    outline-color: #FFA83D;
  }
}

@media screen and (min-width: 48rem) {
  :root { --maxw: 44rem; }
  .body { padding-block-start: 1.75rem; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(min(9rem, 30vw), 1fr)); gap: 1rem; }
  .rbody { max-width: 38rem; }
  .rolebig { padding: 1.15rem; }
}

@media screen and (max-width: 22rem) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qr-batan { grid-template-columns: minmax(0, 1fr); }
  .lg-role { flex-wrap: wrap; }
  .lg-role b { flex-basis: 6rem; }
}

/* Home: the main daily task leads; remaining destinations keep their order. */
@media screen {
  .gl-home .appbar { box-shadow: none; border-bottom: .25rem solid var(--role); }
  .gl-home .body > .secname:first-child { font-size: 1.2rem; margin-bottom: 1rem; }
  .gl-home .tiles { gap: .8rem; }
  .gl-home .tile { align-items: flex-start; text-align: start; padding: 1rem; gap: .5rem; border-radius: 1rem; }
  .gl-home .tile b { font-size: 1rem; }
  .gl-home .tile > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .gl-home .tile .tile-ic { width: 2.65rem; height: 2.65rem; border-radius: .8rem; }
  .gl-home .tiles > .tile:first-child {
    grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0,1fr);
    column-gap: 1rem; padding: 1.3rem; border: 0; border-inline-start: .3rem solid var(--acc2);
    /* ⚠️ यह सादा #12233F था — तीनों role का सबसे बड़ा बटन एक जैसा
       दिखता था। अब उसमें role का अपना गहरा रंग घुला है, पर नारंगी
       icon और सफ़ेद अक्षर वैसे ही — ताकि ब्रांड एक ही रहे।     */
    background: linear-gradient(135deg, var(--role-gehra) 0%, #12233F 78%); color: #fff;
  }
  .gl-home .tiles > .tile:first-child .tile-ic { grid-row: 1 / 3; background: #FFA83D; color: #12233F; align-self: center; }
  .gl-home .tiles > .tile:first-child b { color: #fff; font-size: 1.3rem; }
  .gl-home .tiles > .tile:first-child > span:last-child { color: #DFE8F5; }
  .gl-home .tiles > .tile:first-child:focus-visible { outline-color: #B94A00; }
  .botnav { background: #fff; border-top: 1px solid #CBD5E3; box-shadow: 0 -.2rem 1rem rgba(18,35,63,.08); }
  .botnav-in { gap: .15rem; padding-left: max(.15rem, env(safe-area-inset-left)); padding-right: max(.15rem, env(safe-area-inset-right)); }
  .botnav .nbtn { color: #52617A; min-height: 3.5rem; padding: .5rem .15rem; justify-content: center; gap: .2rem; }
  /* ⚠️ बड़े अक्षर पर "Customers" बीच से टूटकर "Custom / ers" दिखता
     था — शब्द के बीच में। अब वह टूटता नहीं; जगह कम पड़े तो साफ़-साफ़
     कटता है। आधा-अधूरा शब्द टूटे हुए शब्द से बेहतर है।         */
  .botnav .nbtn small {
    opacity: 1;
    max-width: 100%; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .botnav .nbtn .ci { width: 1.4rem; height: 1.4rem; flex-shrink: 0; }
  .botnav .nbtn.on { color: #12233F; background: var(--role-halka); box-shadow: inset 0 .2rem var(--role); }
  .botnav .nbtn:active { background: #EAF0FB; }
  .botnav :focus-visible { outline-color: #1B54B0; outline-offset: -3px; }
}

@media screen and (max-width: 22rem) {
  .botnav .nbtn small { display: none; }
}

@media screen and (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* ══ घर के tile — तीन कतार में (23 सित. 2026, उपयोगकर्ता की हाँ से) ══
   पहले दो कतार थीं: 360px फ़ोन पर घर 1146px लंबा हो जाता था और
   बातचीत, ऑनलाइन सेवा, सेटिंग सरकाए बिना दिखते ही नहीं थे।
   demo में तीन कतार हैं — अब वैसा ही।

   ⚠️ नाप का हिसाब — इसे "सुधारकर" मत तोड़िए:
      • `calc((100% - 1.6rem) / 3)` — तीन से ज़्यादा कतार कभी नहीं
        (tablet पर भी तीन ही)। 1.6rem = बीच की दो खाली जगह (.8rem × 2)।
      • `min(5.25rem, 42vw)` — बड़े अक्षर (200%) पर tile अपने आप
        दो कतार में आ जाते हैं, एक-एक की लंबी सूची नहीं बनती।
        यही बात ऊपर `.tiles` वाली टिप्पणी में है।
      • 320px वाले सबसे छोटे फ़ोन पर भी तीन कतार अँटती हैं
        (नीचे का max-width:22rem वाला दो-कतार नियम घर पर नहीं लगता)।
   नया बिल / लोड बाज़ार वाला बड़ा tile पहले की तरह पूरी चौड़ाई में।  */
@media screen {
  .gl-home .tiles {
    grid-template-columns: repeat(auto-fill, minmax(max(min(5.25rem, 42vw), calc((100% - 1.6rem) / 3)), 1fr));
  }
  .gl-home .tiles > .tile:not(:first-child) { padding: .8rem .6rem; gap: .4rem; min-height: 0; }
  .gl-home .tiles > .tile:not(:first-child) b { font-size: .92rem; line-height: 1.4; }
  .gl-home .tiles > .tile:not(:first-child) > span:last-child { font-size: .72rem; line-height: 1.35; }
  .gl-home .tiles > .tile:not(:first-child) .tile-ic { width: 2.35rem; height: 2.35rem; }
}