/* GOODLOAD — "आप कौन हैं?" वाला पर्दा
   ═══════════════════════════════════════════════════════════════
   ── सबसे बड़ा नियम ────────────────────────────────────────────
   तीनों role **बिना scroll किए** एक साथ दिखने चाहिए। ग्राहक पहली
   बार app खोले और नीचे वाला role ढूँढने के लिए उँगली घुमाए — यह
   नहीं होना चाहिए।

   इसीलिए हर नाप vh (screen की ऊँचाई) के हिसाब से घटती-बढ़ती है।
   छोटी screen पर चीज़ें अपने आप सिमट जाती हैं।

   ── रंग ───────────────────────────────────────────────────────
   ऊपर का हिस्सा सादा गहरा काला-नीला #12233F — demo (9-new-design)
   से लिया गया, कोई gradient नहीं। नीचे हल्का।
   ═══════════════════════════════════════════════════════════════ */

/* ⚠ यहाँ display मत लिखना। पर्दा दिखाना-छिपाना 03-dhaancha.css
   का काम है (.screen / .screen.active)। #role की ताक़त ज़्यादा होती है,
   इसलिए यहाँ display लिखने से role वाला पर्दा हमेशा चिपका रह जाता है।
   यह गलती एक बार हो चुकी है — दोबारा मत कीजिए। */
#role{
  background:#F3F5F9;
}

/* ── ऊपर: सिर्फ़ logo और नाम ─────────────────────────────── */
.rhead{
  position:relative;
  background:#12233F;
  color:#fff;
  text-align:center;
  border-radius:0 0 1.4rem 1.4rem;
  padding-block:calc(clamp(14px, 4.6vh, 46px) + env(safe-area-inset-top))
               clamp(14px, 4.6vh, 46px);
  padding-inline:1rem;
}

.rhead-logo{
  width:clamp(50px, 10vh, 82px);
  height:clamp(50px, 10vh, 82px);
  aspect-ratio:1;
  margin:0 auto clamp(6px, 1.7vh, 15px);
  border-radius:28%;
  background:#fff;
  box-shadow:0 .6rem 1.4rem rgba(0,0,0,.35);
  display:grid; place-items:center;
}
.rhead-logo svg{ width:62%; height:62%; }

.rhead-name{
  font-size:clamp(1.3rem, 5.6vw, 1.6rem);
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.15;
}
.rhead-name .amber{ color:var(--acc2); }

/* भाषा — कोने में, छोटी, पर छूने लायक़ */
.langbtn{
  position:absolute;
  top:calc(.55rem + env(safe-area-inset-top));
  right:.55rem;
  display:inline-flex; align-items:center; gap:.3rem;
  min-height:2.75rem;
  padding:.35rem .7rem;
  border-radius:1.4rem;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-size:.75rem; font-weight:700;
}
.langbtn:active{ background:rgba(255,255,255,.24); }
.langbtn .ci{ width:var(--ic-sm); height:var(--ic-sm); }

/* ── नीचे: role चुनने का हिस्सा ──────────────────────────── */
.rbody{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;          /* बची जगह ऊपर-नीचे बराबर बँटे */
  gap:clamp(8px, 2vh, 18px);
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(10px, 2.6vh, 22px) clamp(12px, 3.5vw, 20px)
          calc(clamp(10px, 2.6vh, 22px) + env(safe-area-inset-bottom));
}

.rask{ text-align:center; }
.rask h1{
  font-size:clamp(1.05rem, 4.6vw, 1.3rem);
  font-weight:800;
  color:#0E1D33;
}
.rask p{
  font-size:clamp(.72rem, 3.1vw, .8rem);
  font-weight:600;
  color:var(--txt3);
  margin-top:.15rem;
}

.rolelist{
  display:flex;
  flex-direction:column;
  gap:clamp(7px, 1.6vh, 13px);
}

/* ── role का बटन — एक लाइन, सिमटा हुआ ───────────────────── */
.rolebig{
  display:flex;
  align-items:center;
  gap:clamp(9px, 2.6vw, 13px);
  width:100%;
  text-align:start;
  background:#fff;
  border:1px solid var(--border);
  border-inline-start:4px solid var(--rc);
  border-radius:14px;
  padding:clamp(9px, 1.9vh, 14px) clamp(10px, 2.6vw, 14px);
  box-shadow:var(--shadow-sm);
  transition:transform .14s cubic-bezier(.34,1.4,.64,1), box-shadow .18s;
}
.rolebig:active{ transform:scale(.98); box-shadow:0 1px 5px rgba(10,33,68,.14); }

.rolebig-ic{
  width:clamp(42px, 8vh, 47px);
  height:clamp(42px, 8vh, 47px);
  aspect-ratio:1;
  flex:none;
  border-radius:30%;
  background:var(--tint);
  color:#12365F;
  display:grid; place-items:center;
}
.rolebig-ic .ci{ width:55%; height:55%; }

/* min-width:0 — लंबा नाम डिब्बे से बाहर न निकले */
.rolebig-txt{ flex:1; min-width:0; }
.rolebig-t{
  display:block;
  font-size:clamp(.98rem, 4.3vw, 1.1rem);
  font-weight:800;
  color:#0E1D33;
  line-height:1.25;
}
.rolebig-en{
  display:block;
  font-size:clamp(.7rem, 3vw, .78rem);
  font-weight:700;
  color:#C2410C;      /* तीनों की हिंदी लाइन एक ही रंग — नई demo से */
  line-height:1.35;
  margin-top:.1rem;
}

.rolebig-go{
  flex:none;
  width:1.75rem; height:1.75rem;
  border-radius:50%;
  background:#12233F;   /* तीर सबका एक ही गहरा नीला — नई demo से */
  color:#fff;
  font-size:1.05rem;
  line-height:1;
  display:grid; place-items:center;
  padding-bottom:.1rem;
}

.foot{
  text-align:center;
  font-size:clamp(.66rem, 2.8vw, .72rem);
  font-weight:600;
  color:var(--txt3);
}

/* ── आड़ा फ़ोन — ऊपर का हिस्सा और सिकोड़ दो ── */
@media (orientation:landscape) and (max-height:30rem){
  .rhead{ padding-block:calc(8px + env(safe-area-inset-top)) 8px; border-radius:0 0 1rem 1rem; }
  .rhead-logo{ width:38px; margin-bottom:4px; }
  .rhead-name{ font-size:1.05rem; }
  .rask p{ display:none; }            /* आड़े में जगह कम — छोटी लाइन छिपा दो */
  .foot { display:none; }
  .rbody{ gap:8px; padding-block:8px; }
  .rolelist{ gap:6px; }
}


/* ══ हर role की अपनी पहचान — पूरी app में ═══════════════════
   ⚠️ पहले तीनों का रंग सिर्फ़ **चुनने वाले पर्दे** पर दिखता था
      (ऊपर `.rolebig` का `--rc`)। चुनने के बाद हर पर्दा एक जैसा
      गहरा नीला हो जाता था — तीन अलग कारोबार, एक ही चेहरा।
      व्यापारी को दुकान दिखती है, ट्रांसपोर्टर को बाज़ार, गाड़ी
      मालिक को गाड़ियाँ — पर देखने में तीनों एक।

      अब वही रंग पूरी app में चलता है।

   ⚠️ नारंगी (`--acc`) को हाथ नहीं लगाया। वह **"यह करना है"** वाला
      रंग है — बड़ा बटन, `+`, सहेजिए। role का रंग **"आप कौन हैं"**
      बताता है। दोनों के काम अलग हैं, दोनों को मिलाइए मत।

   ⚠️ गाड़ी मालिक का रंग यहाँ `#1B54B0` है, जबकि चुनने वाले पर्दे
      पर `#12233F` है। वजह: `#12233F` ऊपर की पट्टी का अपना रंग ही
      है — उसी पर धार बनाते तो कुछ दिखता ही नहीं। यह उसी नीले
      परिवार का चमकीला रूप है, और app के अपने रंगों में पहले से
      है (`--p2`)।                                               */
body{
  --role:       #12233F;   /* जब तक role पता न हो */
  --role-halka: #EAEFF7;
  --role-gehra: #12233F;
}
body[data-role="vyapari"]{
  --role:       #6A1B9A;   /* बैंगनी — दुकान */
  --role-halka: #F4EAF8;
  --role-gehra: #2E1046;
}
body[data-role="transporter"]{
  --role:       #00838F;   /* हरा-नीला — माल ढुलाई */
  --role-halka: #E4F6F8;
  --role-gehra: #063A42;
}
body[data-role="gaadi-malik"]{
  --role:       #1B54B0;   /* नीला — गाड़ियाँ */
  --role-halka: #E8EFFB;
  --role-gehra: #10305F;
}

/* ऊपर की पट्टी पर हर पर्दे पर एक पतली धार — चाहे कोई भी पर्दा हो */
.appbar{ box-shadow:inset 0 -3px 0 var(--role), 0 2px 10px rgba(10,33,68,.18); }