/* ===========================================================================
   Efashe NEXUS - prototype simulator runtime, presentation layer
   Author: TechMonk Ecom Solutions Pvt Ltd
   Confidential - Efashe Group and TechMonk only

   Companion to assets/proto.js. Loaded by every screen after the screen's own
   shared design core, so every token it uses (--ef-blue, --ef-radius, ...) is
   already defined. Everything here is prefixed p- so nothing collides with the
   page CSS that the 83 screens already carry.
   =========================================================================== */

/* ---------- named views -------------------------------------------------- */
/* A screen state is a [data-view]. proto.js reveals exactly one per region. */
[data-view]{display:none}
[data-view].p-on{display:block}
[data-view].p-on[data-view-flex]{display:flex}

/* ---------- dialogs ------------------------------------------------------ */
.p-scrim{position:fixed;inset:0;z-index:120;display:none;overflow-y:auto;
  background:rgba(6,19,63,.52);padding:38px 16px;
  align-items:flex-start;justify-content:center;
  -webkit-backdrop-filter:saturate(140%) blur(1.5px);backdrop-filter:saturate(140%) blur(1.5px)}
.p-scrim.p-on{display:flex;animation:p-fade .16s ease both}
.p-dlg{background:#fff;border-radius:var(--ef-radius-lg);box-shadow:0 24px 64px rgba(3,10,32,.42);
  width:100%;max-width:480px;padding:24px;animation:p-rise .18s cubic-bezier(.2,.7,.3,1) both}
.p-dlg.p-wide{max-width:680px}
.p-dlg.p-slim{max-width:400px}
.p-dlg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:4px}
.p-dlg-head h3{margin:0;font-size:17px}
.p-dlg-sub{font-size:12.5px;color:var(--ef-muted);margin:2px 0 14px}
.p-dlg-foot{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:20px}
.p-dlg-foot.p-stack{flex-direction:column}
.p-dlg-foot.p-stack>*{width:100%;justify-content:center}
@keyframes p-fade{from{opacity:0}to{opacity:1}}
@keyframes p-rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.p-scrim.p-on,.p-dlg{animation:none}}

/* bottom sheet on small screens: dialogs are thumb-reachable, as in the app */
@media(max-width:640px){
  .p-scrim{padding:0;align-items:flex-end}
  .p-dlg{max-width:none;border-radius:var(--ef-radius-lg) var(--ef-radius-lg) 0 0;padding:20px 18px 26px}
  @keyframes p-rise{from{opacity:.4;transform:translateY(100%)}to{opacity:1;transform:none}}
}

/* ---------- step up: PIN ------------------------------------------------- */
.p-pin{display:flex;gap:10px;justify-content:center;margin:18px 0 6px}
.p-pin i{width:15px;height:15px;border-radius:50%;background:var(--ef-line);
  transition:background .14s ease,transform .14s ease}
.p-pin i.p-fill{background:var(--ef-blue-ink);transform:scale(1.12)}
.p-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-width:264px;margin:16px auto 0}
.p-keys button{height:52px;border:1px solid var(--ef-line);background:#fff;border-radius:var(--ef-radius-sm);
  font-family:inherit;font-size:20px;font-weight:650;color:var(--ef-ink);cursor:pointer;
  font-variant-numeric:tabular-nums}
.p-keys button:hover{background:var(--ef-tint);border-color:var(--ef-blue)}
.p-keys button:active{background:var(--ef-blue-soft)}
.p-keys button.p-key-fn{font-size:13px;font-weight:700;color:var(--ef-muted)}

/* ---------- step up: OTP ------------------------------------------------- */
.p-otp{display:flex;gap:9px;justify-content:center;margin:18px 0 4px}
.p-otp input{width:44px;height:52px;text-align:center;font-size:20px;font-weight:700;
  font-variant-numeric:tabular-nums;border:1.5px solid var(--ef-line);border-radius:var(--ef-radius-sm);
  font-family:inherit;color:var(--ef-ink);background:#fff}
.p-otp input:focus{outline:none;border-color:var(--ef-blue);box-shadow:0 0 0 3px rgba(0,158,247,.18)}
.p-otp input.p-bad{border-color:var(--ef-danger);box-shadow:0 0 0 3px rgba(198,40,40,.13)}
.p-resend{text-align:center;font-size:12px;color:var(--ef-muted);margin-top:12px}
.p-resend b{font-variant-numeric:tabular-nums;color:var(--ef-ink)}
.p-resend a{font-weight:650}

/* ---------- step up: biometric ------------------------------------------- */
.p-bio{display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px 0 4px}
.p-bio-ring{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--ef-blue-ink);background:var(--ef-blue-soft);border:2px solid var(--ef-blue);
  animation:p-pulse 1.6s ease-in-out infinite}
@keyframes p-pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,158,247,.30)}50%{box-shadow:0 0 0 14px rgba(0,158,247,0)}}
@media (prefers-reduced-motion:reduce){.p-bio-ring{animation:none}}

/* ---------- processing overlay ------------------------------------------- */
.p-busy{position:fixed;inset:0;z-index:140;display:none;flex-direction:column;gap:16px;
  align-items:center;justify-content:center;background:rgba(6,19,63,.55);color:#fff;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.p-busy.p-on{display:flex}
.p-busy .p-spin{width:46px;height:46px;border-radius:50%;border:3.5px solid rgba(255,255,255,.26);
  border-top-color:var(--ef-cyan);animation:p-rot .7s linear infinite}
@keyframes p-rot{to{transform:rotate(360deg)}}
.p-busy .p-busy-t{font-size:14.5px;font-weight:650;letter-spacing:-.01em;text-align:center;
  max-width:280px;line-height:1.45}
.p-busy .p-busy-s{font-size:12px;color:var(--ef-pale)}
@media (prefers-reduced-motion:reduce){.p-busy .p-spin{animation:p-rot 2.4s linear infinite}}

/* ---------- toasts ------------------------------------------------------- */
.p-toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:78px;z-index:150;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;
  width:max-content;max-width:calc(100vw - 28px)}
.p-toast{display:flex;gap:9px;align-items:center;background:var(--ef-navy-deep);color:#fff;
  border-radius:var(--ef-radius-pill);padding:11px 18px;font-size:13px;font-weight:600;
  box-shadow:0 10px 30px rgba(3,10,32,.42);border:1px solid rgba(255,255,255,.10);
  animation:p-toast-in .2s ease both}
.p-toast.p-t-ok{background:var(--ef-green-deep)}
.p-toast.p-t-bad{background:#8f1f1f}
.p-toast.p-out{animation:p-toast-out .22s ease both}
@keyframes p-toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes p-toast-out{to{opacity:0;transform:translateY(-6px)}}
@media(max-width:767px){.p-toasts{bottom:auto;top:112px}}

/* ---------- receipt ------------------------------------------------------ */
.p-receipt{max-width:440px;margin:0 auto;background:#fff;border:1px solid var(--ef-line);
  border-radius:var(--ef-radius);box-shadow:var(--ef-shadow);overflow:hidden}
.p-receipt-top{background:var(--ef-green-soft);border-bottom:1px solid #cbe9d5;padding:24px 22px;text-align:center}
.p-receipt-tick{width:56px;height:56px;border-radius:50%;background:var(--ef-green-ink);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.p-receipt-top h2{margin:0 0 4px;font-size:19px;color:var(--ef-green-deep)}
.p-receipt-amt{font-size:27px;font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:-.025em;color:var(--ef-navy);margin-top:6px}
.p-receipt-body{padding:18px 22px}
.p-receipt-body .p-r-line{display:flex;justify-content:space-between;gap:14px;padding:8px 0;font-size:13px;
  border-bottom:1px dashed var(--ef-line)}
.p-receipt-body .p-r-line:last-child{border-bottom:0}
.p-receipt-body .p-r-line span:first-child{color:var(--ef-muted)}
.p-receipt-body .p-r-line span:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.p-receipt-ref{background:var(--ef-tint);border-top:1px solid var(--ef-line);padding:12px 22px;
  font-size:11.5px;color:var(--ef-muted);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.p-receipt-ref b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ef-ink);
  letter-spacing:-.01em}
.p-receipt-acts{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* ---------- loading skeletons -------------------------------------------- */
.p-skel{background:linear-gradient(100deg,var(--ef-line-soft) 22%,#fff 42%,var(--ef-line-soft) 62%);
  background-size:320% 100%;border-radius:var(--ef-radius-xs);animation:p-shim 1.25s linear infinite;
  color:transparent!important;user-select:none}
.p-skel *{visibility:hidden}
@keyframes p-shim{from{background-position:150% 0}to{background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){.p-skel{animation:none;background:var(--ef-line-soft)}}
.p-skel-line{height:11px;margin:8px 0}
.p-skel-line.p-w40{width:40%}.p-skel-line.p-w60{width:60%}.p-skel-line.p-w80{width:80%}
.p-skel-tile{height:88px;margin:0}
.p-skel-chart{height:190px}

/* ---------- inline field validation -------------------------------------- */
.p-invalid{border-color:var(--ef-danger)!important;box-shadow:0 0 0 3px rgba(198,40,40,.12)!important}
.p-fielderr{font-size:11.5px;color:var(--ef-danger);font-weight:650;margin-top:4px}

/* ---------- flow bar additions ------------------------------------------ */
/* .protobar itself is defined in each screen's design core; these extend it. */
.protobar .p-pop{position:relative}
.protobar .p-menu{position:absolute;bottom:calc(100% + 10px);right:0;min-width:250px;max-width:min(78vw,340px);
  max-height:min(62vh,430px);overflow-y:auto;background:#fff;color:var(--ef-ink);
  border-radius:var(--ef-radius);box-shadow:0 18px 46px rgba(3,10,32,.36);padding:7px;display:none;
  border:1px solid var(--ef-line)}
.protobar .p-menu.p-on{display:block}
.protobar .p-menu-h{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ef-muted);padding:8px 11px 5px}
.protobar .p-menu a,.protobar .p-menu button{display:flex;width:100%;text-align:left;gap:9px;
  align-items:center;padding:8px 11px;border-radius:var(--ef-radius-xs);font-size:12.5px;font-weight:600;
  color:var(--ef-ink);background:none;border:0;cursor:pointer;font-family:inherit;line-height:1.35}
.protobar .p-menu a:hover,.protobar .p-menu button:hover{background:var(--ef-blue-soft);text-decoration:none}
.protobar .p-menu a.p-cur{background:var(--ef-navy-soft);color:var(--ef-navy);font-weight:700}
.protobar .p-menu .p-menu-n{font-size:10px;color:var(--ef-faint);font-variant-numeric:tabular-nums;
  margin-left:auto;flex:none}
.protobar .p-menu hr{border:0;border-top:1px solid var(--ef-line-soft);margin:6px 4px}
.protobar .pb-btn.p-caret::after{content:"";width:0;height:0;border:4px solid transparent;
  border-top-color:currentColor;margin-top:3px;margin-left:1px}
@media print{.p-scrim,.p-busy,.p-toasts{display:none!important}}

/* ---------- touch: the prototype bar's own labels ------------------------- */
/* The States menu headings are 9.5px and 10px, which reads on a desktop and
   not in the hand, so they lift to the same 11px floor the screens use. */
@media(max-width:1023px){
  .protobar .p-menu-h{font-size:11px}
  .protobar .p-menu .p-menu-n{font-size:11px}
  .protobar .pb-btn,.protobar .pb-x{min-height:34px}
}

/* ===========================================================================
   Responsive chrome, TechMonk
   ---------------------------------------------------------------------------
   A scroller that suppresses its own scrollbar suppresses its own content.
   Three chrome strips did exactly that. On a 390px phone .catnav-in held six
   of the eight marketplace categories off the right edge with nothing on
   screen to say they were there, .tabs did the same to section tabs, and
   .stepper cut off the steps a shopper had left to go.

   tools/responsive.mjs passed all three, because content wider than its own
   overflow-x scroller is the correct pattern for a wide data table and the
   check could not tell a table from a menu. It can now: see its nav report.

   This file loads after every screen's design core, so a plain class selector
   here wins over the same selector there. Page level <style> blocks sit in the
   body and would win over this file, so nothing below is also set in one.
   =========================================================================== */

/* ---------- marketplace category bar ------------------------------------- */
/* Desktop is unchanged: one row of categories, the promotion last. The links
   gain a wrapper so that under 900 they can become a panel of their own
   rather than a strip that runs off the edge. */
.catnav{position:relative}
.catnav-links{display:flex;gap:4px;align-items:center;min-width:0}
/* Above 900 the categories are always shown, so the checkbox has nothing to
   do and is taken out of the tab order rather than left as an invisible stop. */
.catnav .cat-toggle{display:none}
.catnav .cat-open{display:none}

@media(max-width:899px){
  /* eight categories need 861px of row. Below that the row stops scrolling
     and the categories move behind one control, so the navy bar costs a
     phone the same single row it costs a laptop. */
  .catnav-in{flex-wrap:wrap;overflow:visible;gap:5px;padding:5px 12px 6px}

  /* off screen but still reachable by keyboard, and named by its own label */
  .catnav .cat-toggle{display:block;position:absolute;width:1px;height:1px;
    margin:0;padding:0;border:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap}

  /* row one: the control that opens the menu, and the one promotion that
     earns a place beside it */
  .catnav .cat-open{order:0;display:inline-flex;align-items:center;gap:9px;
    flex:1 1 auto;min-width:0;min-height:40px;padding:0 12px;cursor:pointer;
    color:#fff;font-size:13px;font-weight:700;
    background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);
    border-radius:var(--ef-radius-xs)}
  .catnav .cat-open:hover{background:rgba(255,255,255,.16)}
  .catnav .cat-open .cat-chev{margin-left:auto;flex:none;transition:transform .16s ease}
  .catnav .cat-toggle:checked ~ .catnav-in .cat-open{background:rgba(255,255,255,.16)}
  .catnav .cat-toggle:checked ~ .catnav-in .cat-open .cat-chev{transform:rotate(180deg)}
  .catnav .cat-toggle:focus-visible ~ .catnav-in .cat-open{outline:2px solid var(--ef-cyan);
    outline-offset:2px}
  .catnav a.hot{order:1;flex:none;min-height:40px;display:inline-flex;align-items:center;gap:6px}

  /* row two: every category at once. Two columns take seven links in four
     tidy rows once the first one spans, so nothing is left hanging. */
  .catnav-links{order:2;display:none;width:100%;gap:4px;grid-template-columns:repeat(2,1fr);
    margin-top:4px;padding-top:6px;border-top:1px solid rgba(255,255,255,.14)}
  .catnav .cat-toggle:checked ~ .catnav-in .catnav-links{display:grid}
  .catnav-links a{min-height:40px;display:flex;align-items:center;font-size:13px;
    background:rgba(255,255,255,.06)}
  .catnav-links a:hover{background:rgba(255,255,255,.16)}
  /* the whole taxonomy is the widest door, so it gets the widest target */
  .catnav-links a:first-child{grid-column:1/-1;justify-content:center;
    background:rgba(255,255,255,.13);color:#fff}
  .catnav-links a:first-child:hover{background:rgba(255,255,255,.20)}
  .catnav-links a.active{background:rgba(255,255,255,.22);color:#fff}
}
/* a tablet has room for three across, which takes the same seven links in
   exactly three rows */
@media(min-width:600px) and (max-width:899px){
  .catnav-links{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .catnav .cat-open .cat-chev{transition:none}
}

/* ---------- section tabs -------------------------------------------------- */
/* The strip wraps instead of scrolling. One shared underline cannot span two
   rows, so it is dropped and each tab carries its own, with a soft fill on
   the active one because an underline alone is easy to lose in a wrapped set. */
@media(max-width:767px){
  .tabs{flex-wrap:wrap;overflow:visible;border-bottom:0;gap:2px 4px;margin-bottom:16px}
  .tab{margin-bottom:0;padding:9px 12px;font-size:13px;min-height:38px;
    display:inline-flex;align-items:center;border-bottom-width:2.5px}
  .tab.active{border-bottom-color:var(--ef-blue);background:var(--ef-blue-soft);
    border-radius:var(--ef-radius-xs) var(--ef-radius-xs) 0 0}
}

/* ---------- stepper ------------------------------------------------------- */
/* A stepper is there to say how much is left, so the last step has to be on
   screen. The steps share the width rather than holding a 110px floor, and a
   two word label wraps between the words rather than pushing the rest of the
   steps out of view. A single word never breaks: min-width:0 lets a bold
   "Documents" hang a few px over its own track instead, which the centred
   labels either side absorb, and which cannot widen the page. */
@media(max-width:767px){
  .stepper{overflow:visible}
  .step{min-width:0;font-size:11px;line-height:1.25;padding:24px 1px 0}
}

/* ---------- controls that must never be squeezed ------------------------- */
/* .lang-switch and .qty both carry overflow:hidden, which is there only to
   clip the pill's rounded corners against the fill inside it. The side effect
   is that flex reads their automatic minimum size as zero, so when a row runs
   out of room these are the items that give way, and they give way by cutting
   their own content off. On a 360px phone that took half of "RW" out of the
   topbar on 37 screens, and 44px of the language pill at 1024. Neither is a
   label the eye can guess at, so both hold their size and the rows find the
   room somewhere that can actually spare it. */
.lang-switch{flex:none}
.qty{flex:none}
/* an icon only control carries no text to hold its box open, so flex was free
   to squeeze the notification bell in the app shell topbar to 14px wide */
.iconbtn{flex:none}

/* ---------- the app shell topbar has too much in it under 1280 ----------- */
/* The sidebar takes 250px off the top row, which left that row 227px over its
   own width at 1024. Nothing said so, because the row was absorbing it: the
   search field was down to 34px, which is its own padding with no input left
   in it, and the bell to 14px. Making the language pill hold its size, above,
   is what turned that into visible page overflow and is how it was found.

   Two things give way rather than everything being squeezed: the portal name,
   which the sidebar states anyway, and the search field, because a 34px field
   is not a field. Both come back at 1280, where the row has the room. The
   storefront and the wallet keep their search at every width: neither carries
   a sidebar, so neither is short of it. */
@media(max-width:1279px){
  .main-col .topbar .searchbar{display:none}
  .main-col .brand .sub{display:none}
}
/* and above that it gets a width of its own rather than splitting the slack
   with the spacer beside it, which is how it ended up at 34px */
@media(min-width:1280px){
  .main-col .topbar .searchbar{flex:0 1 220px}
}

@media(max-width:767px){
  /* the app shell topbar was 21px over a 360px phone once the hamburger and
     the avatar were counted, so the pill's own padding and the row's gaps
     give that back rather than any label being cut. Each language link is
     still 30 by 40, well over the 24px target floor. */
  .lang-switch a{padding:10px 7px}
  .topbar-in{gap:6px}
  .brand .ef-lockup{height:19px}
}

/* ---------- clearance under the flow bar --------------------------------- */
/* The bar is fixed at bottom:18px at every width, so the end of the document
   always passes under it. Under 767 the design core already reserves room for
   that; above 767 it did not, so the bar sat on the last rows of 21 screens at
   768 and on the TechMonk credit strip on 81 of them at 1024, with no way to
   scroll either clear. The reservation now holds at every width. */
@media(min-width:768px){
  body{padding-bottom:80px}
}
/* At 768 the bar itself wrapped to two rows, 69px instead of 52px, which put
   it 7px past that reservation and back on top of the credit strip. The screen
   name is decoration, as the design core already says of it on phones, so it
   is what gives way and the bar holds to one row up to the same 900 the topbar
   uses for dropping its own search. */
@media(max-width:899px){
  .protobar .pb-name{display:none}
}