/* GOODLOAD — instrument-puck icon treatment
   ═══════════════════════════════════════════════════════════════
   ऐप का खास दृश्य संकेत: माल/गाड़ी के dashboard जैसे छोटे, enamel
   pucks। इन्हें सिर्फ़ रास्ता चुनने वाली जगहों पर रखा गया है—हर text
   और card पर सजावट नहीं—ताकि काम करते समय नज़र पहले icon, फिर नाम पर
   जाए। यह CSS-only है; किसी screen-reader label या click target को नहीं
   बदलता।                                                       */

:root {
  --puck-edge: rgba(20, 48, 88, .18);
  --puck-low: rgba(11, 32, 68, .20);
  --puck-shine: rgba(255, 255, 255, .94);
}

/* ── उठे हुए icon puck ───────────────────────────────────── */
.tile-ic,
.rolebig-ic,
.row-ic {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--puck-edge);
  background:
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,0) 42%),
    linear-gradient(160deg, color-mix(in srgb, var(--tint, #EAF0FB) 82%, white), var(--tint, #EAF0FB));
  box-shadow:
    inset 0 1px 0 var(--puck-shine),
    inset 0 -3px 5px rgba(10, 33, 68, .12),
    0 4px 0 rgba(10, 33, 68, .08),
    0 8px 13px rgba(10, 33, 68, .12);
}
.tile-ic::before,
.rolebig-ic::before,
.row-ic::before {
  content: '';
  position: absolute;
  inset: 2px 3px auto;
  height: 32%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,0));
  pointer-events: none;
  z-index: -1;
}
.tile-ic::after,
.rolebig-ic::after,
.row-ic::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
  pointer-events: none;
  z-index: 1;
}
.tile-ic .ci,
.rolebig-ic .ci,
.row-ic .ci {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.8));
}

/* color-mix नए browser में बेहतर tint देता है; पुराने Android को ऊपर का
   मूल --tint background मिलता है और वह कार्यक्षमता नहीं खोता। */
@supports not (background: color-mix(in srgb, white, black)) {
  .tile-ic, .rolebig-ic, .row-ic { background: var(--tint, #EAF0FB); }
}

/* ── ऊपर की पट्टी के tools: धातु-जैसे, पर बहुत छोटे ───────── */
.appbar .ib {
  border: 1px solid rgba(255,255,255,.20);
  background: linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 0 rgba(0,0,0,.18);
}
.appbar .ib:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.22);
}
.appbar .ib:focus-visible {
  box-shadow: var(--ring), inset 0 1px 0 rgba(255,255,255,.24), 0 2px 0 rgba(0,0,0,.18);
}

/* बड़े पैसे वाले पट्टे पर एक बहुत हल्की instrument-line; आंकड़ों की
   readability के लिए text के ऊपर कुछ नहीं आता। */
.bigamt {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(120deg, rgba(255,255,255,.12), transparent 38%),
    #12233F;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(10,33,68,.16);
}
.bigamt::after {
  content: '';
  position: absolute;
  width: 10rem;
  height: 10rem;
  inset: auto -4rem -7rem auto;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  box-shadow: 0 0 0 1.2rem rgba(255,255,255,.035), 0 0 0 2.4rem rgba(255,255,255,.025);
  pointer-events: none;
}
.bigamt > * { position: relative; z-index: 1; }

/* Hover सिर्फ़ mouse/trackpad पर; touch पर कोई अनचाहा उछाल नहीं। */
@media (hover:hover) and (pointer:fine) {
  .tile:hover .tile-ic,
  .rolebig:hover .rolebig-ic,
  .row:hover .row-ic {
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 var(--puck-shine),
      inset 0 -3px 5px rgba(10,33,68,.12),
      0 5px 0 rgba(10,33,68,.07),
      0 10px 16px rgba(10,33,68,.14);
  }
}

@media (prefers-reduced-motion:no-preference) {
  .tile-ic, .rolebig-ic, .row-ic, .appbar .ib {
    transition: transform .16s ease, box-shadow .16s ease;
  }
}