/* ===========================================================================
   mp.css — Meri Pehchaan 2.0
   Adopted 28 Aug 2026 from the approved design sheets; every hex re-checked
   against the shipped UX4G 3.0.18 token dump (primary 100 #dcd4ff · 300 #a391ff
   · 900 #24145c · cyan-800 #006d75 · green-300 #80da88).
   Additions on top of UX4G 3.0.18. Nothing here duplicates a shipped class.
   Load AFTER https://cdn.ux4g.gov.in/UX4G@3.0.18/index.css

   Colour law (docs/02 §8): purple + neutral only. UX4G's shipped CSS consumes
   its secondary/amber palette in zero components, so it is not used here
   either. Status hues mean status: orange warns, green confirms, red is
   danger, cyan informs. The mark is always single-colour currentColor.
   =========================================================================== */

@layer ux4g-components {

/* --- tokens used only by these additions -------------------------------- */
:root {
  --mp-mark-size-md: 20px;   /* inside a 44px control */
  --mp-mark-size-lg: 20px;   /* inside a 48px control — docs/05 §5.1 */
  --mp-mark-gap: 8px;        /* mark to label, both sizes */
  --mp-clear-space: 3;       /* multiples of one tick length, standalone use */
}

/* ===========================================================================
   1. ux4g-btn-meripehchaan — the sign-in button
   Geometry taken from the design system (design-system/, sheet 02), which is
   the source these screens are built from.

     lg  48px  padding 12px 16px  16px/1.25  — the sign-in default, UX4G lg
     md  44px  padding 10px 16px  15px/1.25  — the minimum touch target
     mark 20px · gap 8px · radius 8 · min-width 200 · width 100%

   Label, resolved. The design system sets the verb alone — "Sign in" — and
   records the trade as untested: "with the name gone, the mark is the only
   thing distinguishing this from Send OTP". Where a department's own sign-in
   controls sit beside ours that ambiguity is real, and it reaches the
   accessibility tree too, so:

   The label is the VERB ALONE — Sign in · Continue · Verify · Authorise. The mark
   carries the brand, so the label never repeats it, and the button stays one
   short line. And the button shows ONE language: the design system switches on
   `lang`, it does not stack. Stacking turned a control into a paragraph.

   Never "Login with", never "Powered by", never a sub-IdP name, never the mark
   without a label, never the label without the mark, and never this button for
   navigation — it means "authenticate with Meri Pehchaan", nothing else.
   =========================================================================== */

/* One verb, one language, in the reader's script. mp.js rewrites [data-verb]
   from MP_I18N and stamps the lang attribute, which is what selects the right
   Noto face and the 1.8 line-height below. */
.ux4g-btn-meripehchaan,
.ux4g-btn-meripehchaan-outline,
.ux4g-btn-meripehchaan-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mp-mark-gap);
  min-width: 200px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
.ux4g-btn-meripehchaan.ux4g-btn-lg,
.ux4g-btn-meripehchaan-outline.ux4g-btn-lg,
.ux4g-btn-meripehchaan-dark.ux4g-btn-lg {
  min-height: 48px;
  padding: 12px 16px;
  font-size: 16px;
}
/* Indic scripts need the taller line box; Latin does not. */
.ux4g-btn-meripehchaan [lang]:not([lang="en"]) { line-height: 1.8; }

.ux4g-btn-meripehchaan .ux4g-btn-icon,
.ux4g-btn-meripehchaan-outline .ux4g-btn-icon,
.ux4g-btn-meripehchaan-dark .ux4g-btn-icon {
  flex: none;
  width: var(--mp-mark-size-lg);
  height: var(--mp-mark-size-lg);
  color: currentColor;
}

.ux4g-btn-meripehchaan            { background: #4a2bc2; color: #fafafa; border-color: #4a2bc2; }
.ux4g-btn-meripehchaan:hover      { background: #3d239f; }
.ux4g-btn-meripehchaan:active     { background: #301c7d; transform: translateY(1px); }

.ux4g-btn-meripehchaan-outline        { background: #ffffff; color: #4a2bc2; border-color: #a391ff; }
.ux4g-btn-meripehchaan-outline:hover  { background: #c0b3ff; }
/* #4a2bc2 on the #a391ff active fill is 3.3:1, so the label darkens for that
   state only — 5.07:1. The documented fill is unchanged. */
.ux4g-btn-meripehchaan-outline:active { background: #a391ff; color: #301c7d; transform: translateY(1px); }

.ux4g-btn-meripehchaan-dark        { background: #171717; color: #fafafa; border-color: #171717; }
.ux4g-btn-meripehchaan-dark:hover  { background: #262626; }
.ux4g-btn-meripehchaan-dark:active { background: #404040; transform: translateY(1px); }

.ux4g-btn-meripehchaan:focus-visible,
.ux4g-btn-meripehchaan-outline:focus-visible,
.ux4g-btn-meripehchaan-dark:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fafafa, 0 0 0 4px #4a2bc2;
}

.ux4g-btn-meripehchaan:disabled,
.ux4g-btn-meripehchaan-outline:disabled,
.ux4g-btn-meripehchaan-dark:disabled {
  background: #e5e5e5;
  color: #737373;
  border-color: #d9d9d9;
  cursor: not-allowed;
  transform: none;
}

/* Loading steps the mark one tick per 250ms rather than spinning it smoothly,
   so it reads as a mechanism turning rather than a generic spinner. */
.ux4g-btn-meripehchaan[aria-busy="true"] { cursor: progress; }
.ux4g-btn-meripehchaan[aria-busy="true"] .ux4g-btn-icon { animation: mp-tick 3s steps(12) infinite; }
@keyframes mp-tick { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ux4g-btn-meripehchaan[aria-busy="true"] .ux4g-btn-icon { animation: none; }
}

/* Degraded: the hub is unreachable. It becomes the OUTLINE variant carrying an
   info icon in place of the mark, whatever the caller asked for — the hub being
   down is not a reason to keep shouting in a filled button. A note sits below
   it, and the department's own form expands. Not an error: a redirection. */
.ux4g-btn-meripehchaan--degraded,
.ux4g-btn-meripehchaan.is-degraded {
  background: #ffffff; color: #737373; border-color: #d9d9d9; cursor: not-allowed;
}
.ux4g-btn-meripehchaan.is-degraded .ux4g-btn-icon { display: none; }
.ux4g-btn-meripehchaan.is-degraded::before {
  content: "info";
  font-family: "Material Symbols Outlined";
  font-size: 20px; line-height: 1; font-feature-settings: "liga";
  color: #006d75; flex: none;
}
[data-theme="dark"] .ux4g-btn-meripehchaan.is-degraded::before { color: #13c2c2; }

/* ===========================================================================
   2. ux4g-chip-pehchaan — the tier chip
   Tier is purple depth, never a second hue, and the label always names it so
   status is never carried by colour alone (docs/02 §8.4).
   =========================================================================== */
.ux4g-chip-pehchaan {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
}
.ux4g-chip-pehchaan .ux4g-btn-icon { width: 16px; height: 16px; flex: none; }

.ux4g-chip-pehchaan--shabda    { background: #dcd4ff; color: #301c7d; border-color: #c0b3ff; }
.ux4g-chip-pehchaan--anumaan   { background: #a391ff; color: #24145c; border-color: #4a2bc2; }
.ux4g-chip-pehchaan--pratyaksh { background: #4a2bc2; color: #fafafa; border-color: #4a2bc2; }
.ux4g-chip-pehchaan--adhikrit  { background: #4a2bc2; color: #fafafa; border-color: #4a2bc2;
                                 box-shadow: 0 0 0 2px #24145c; }

/* ===========================================================================
   3. ux4g-input-pehchaan — the Pehchaan-filled field
   The mark in the prefix slot means: you did not type this, and it is official.
   =========================================================================== */
.ux4g-input-pehchaan {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid #c0b3ff;
  border-radius: 8px;
  background: #f2efff;
}
.ux4g-input-pehchaan .ux4g-btn-icon { width: 20px; height: 20px; flex: none; color: #4a2bc2; }
.ux4g-input-pehchaan input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-weight: 600; }
.ux4g-input-pehchaan__verified { flex: none; display: inline-flex; align-items: center; gap: 6px;
                                 font-size: 12px; font-weight: 600; color: #00522c; }

/* ===========================================================================
   4. ux4g-btn-pehchaan-sign — approve-on-phone, for high-stakes actions
   =========================================================================== */
.ux4g-btn-pehchaan-sign {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #fafafa;
}
.ux4g-btn-pehchaan-sign__number {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: 8px;
  background: #4a2bc2; color: #fafafa;
  font-size: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   5. ux4g-banner-acting-for — delegation banner
   UX4G warning tokens, because acting-for is a warning state and not a tint.
   =========================================================================== */
.ux4g-banner-acting-for {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid #d9d9d9;
  box-shadow: inset 3px 0 0 #fa8c16;
  border-radius: 8px;
  background: #fafafa;
}
.ux4g-banner-acting-for .ux4g-icon-outlined { flex: none; color: #ad4e00; }
.ux4g-banner-acting-for__meta { font-size: 12px; color: #525252; }

/* ===========================================================================
   6. ux4g-badge-pehchaan-ready — conformance badge for relying services
   Developer portal and optionally a portal footer. Never inside a form.
   =========================================================================== */
.ux4g-badge-pehchaan-ready {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px solid #4a2bc2;
  border-radius: 8px;
  color: #4a2bc2;
  font-size: 14px;
  font-weight: 600;
}
.ux4g-badge-pehchaan-ready--inverse { background: #301c7d; border-color: #301c7d; color: #fafafa; }
.ux4g-badge-pehchaan-ready .ux4g-btn-icon { width: 22px; height: 22px; flex: none; }

/* ===========================================================================
   7. Bilingual and multi-script
   One stack ordered by script, so twelve languages need no per-language rule.
   =========================================================================== */
.ux4g-btn-meripehchaan,
.ux4g-btn-meripehchaan-outline,
.ux4g-btn-meripehchaan-dark,
.ux4g-chip-pehchaan {
  font-family: 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Bengali',
               'Noto Sans Gujarati', 'Noto Sans Gurmukhi', 'Noto Sans Kannada',
               'Noto Sans Malayalam', 'Noto Sans Oriya', 'Noto Sans Tamil',
               'Noto Sans Telugu', system-ui, sans-serif;
}
[lang]:not([lang="en"]) { line-height: 1.8; }

/* ===========================================================================
   8. Dark mode — data-theme="dark", the UX4G way
   =========================================================================== */
[data-theme="dark"] .ux4g-btn-meripehchaan            { background: #a391ff; color: #1a0e3d; border-color: #a391ff; }
[data-theme="dark"] .ux4g-btn-meripehchaan:hover      { background: #c0b3ff; }
[data-theme="dark"] .ux4g-btn-meripehchaan:active     { background: #dcd4ff; }

[data-theme="dark"] .ux4g-btn-meripehchaan-outline        { background: transparent; color: #c0b3ff; border-color: #6a4eff; }
[data-theme="dark"] .ux4g-btn-meripehchaan-outline:hover  { background: #301c7d; }
[data-theme="dark"] .ux4g-btn-meripehchaan-outline:active { background: #24145c; color: #dcd4ff; }

[data-theme="dark"] .ux4g-btn-meripehchaan-dark        { background: #fafafa; color: #171717; border-color: #fafafa; }
[data-theme="dark"] .ux4g-btn-meripehchaan-dark:hover  { background: #e5e5e5; }

[data-theme="dark"] .ux4g-btn-meripehchaan:focus-visible,
[data-theme="dark"] .ux4g-btn-meripehchaan-outline:focus-visible,
[data-theme="dark"] .ux4g-btn-meripehchaan-dark:focus-visible { box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 4px #a391ff; }

[data-theme="dark"] .ux4g-btn-meripehchaan:disabled,
[data-theme="dark"] .ux4g-btn-meripehchaan-outline:disabled,
[data-theme="dark"] .ux4g-btn-meripehchaan-dark:disabled { background: #262626; color: #737373; border-color: #404040; }

[data-theme="dark"] .ux4g-chip-pehchaan--shabda  { background: #24145c; color: #c0b3ff; border-color: #301c7d; }
[data-theme="dark"] .ux4g-chip-pehchaan--anumaan { background: #301c7d; color: #dcd4ff; border-color: #4a2bc2; }
[data-theme="dark"] .ux4g-chip-pehchaan--adhikrit{ box-shadow: 0 0 0 2px #c0b3ff; }

[data-theme="dark"] .ux4g-input-pehchaan { background: #24145c; border-color: #301c7d; }
[data-theme="dark"] .ux4g-input-pehchaan .ux4g-btn-icon { color: #c0b3ff; }
[data-theme="dark"] .ux4g-input-pehchaan__verified { color: #80da88; }

[data-theme="dark"] .ux4g-banner-acting-for { background: #171717; border-color: #404040; }
[data-theme="dark"] .ux4g-banner-acting-for .ux4g-icon-outlined { color: #ffc973; }
[data-theme="dark"] .ux4g-banner-acting-for__meta { color: #a1a1a1; }

[data-theme="dark"] .ux4g-badge-pehchaan-ready { border-color: #c0b3ff; color: #c0b3ff; }

[data-theme="dark"] .ux4g-btn-pehchaan-sign { background: #171717; border-color: #404040; }
[data-theme="dark"] .ux4g-btn-pehchaan-sign__number { background: #a391ff; color: #1a0e3d; }

/* ===========================================================================
   9. Bilingual by ordering, not swapping
   Both languages sit in the markup on every label. The control changes which
   one LEADS — nothing is hidden from a screen reader and no label is ever
   untranslated. Twelve scripts need no per-language rule: one font stack
   ordered by script, and the browser picks the face from the glyphs present.
   =========================================================================== */
.mp-bi { display: inline-flex; flex-direction: column; align-items: inherit; line-height: 1.25; }
/* One language at a time, chosen in the accessibility bar and remembered on the device.
   Hindi when Hindi is chosen; English for every other choice until that copy exists. */
.mp-bi > [lang], .ux4g-chip-pehchaan > [lang] { display: none; }
.mp-bi > [lang]:not([lang="en"]) { line-height: 1.8; }
[data-lang="hi"] .mp-bi > [lang="hi"], [data-lang="hi"] .ux4g-chip-pehchaan > [lang="hi"] { display: block; }
:root:not([data-lang="hi"]) .mp-bi > [lang]:not([lang="hi"]), :root:not([data-lang="hi"]) .ux4g-chip-pehchaan > [lang]:not([lang="hi"]) { display: block; }
.ux4g-chip-pehchaan > [lang] { display: none; }
.ux4g-chip-pehchaan > [lang]:not([lang="hi"]) { display: inline; }
[data-lang="hi"] .ux4g-chip-pehchaan > [lang]:not([lang="hi"]) { display: none; }
[data-lang="hi"] .ux4g-chip-pehchaan > [lang="hi"] { display: inline; }

/* ===========================================================================
   10. Prototype-only chrome: the undo toast and the phone bezel
   =========================================================================== */
.mp-toast {
  position: fixed; inset-inline: 16px; bottom: 16px; z-index: 1090;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 560px; margin-inline: auto; padding: 14px 16px;
  border-radius: 8px; background: #171717; color: #fafafa;
  font-size: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.24);
}
.mp-toast .ux4g-btn-text-primary { color: #c0b3ff; background: none; border: 0; font-weight: 600; cursor: pointer; }
.mp-phone-frame {
  width: 360px; max-width: 100%; border: 10px solid #171717; border-radius: 28px;
  background: #ffffff; overflow: hidden;
}
[data-theme="dark"] .mp-phone-frame { background: #0a0a0a; border-color: #404040; }

} /* @layer ux4g-components */

/* Tier names in running text follow the page language too. */
.mp-tier[lang="hi"] { display: none; }
[data-lang="hi"] .mp-tier[lang="hi"] { display: inline; }
[data-lang="hi"] .mp-tier:not([lang="hi"]) { display: none; }