/* Due colori, un Noi — primo avvio e accesso. Area layer on top of due-colori.css (approved design, 2026-10-14). */
/* Parity pass (2026-10-15): the approved mockup (v3, auth.js and the "Accesso" and
   "primo avvio" parts of style.css/style2.css) is the authority for every size,
   space, colour and move on these screens. The values below are the mockup's.
   Screens: login, account, recovery, the tour, Tu/Voi (#usOnboarding), the
   phone setup after pairing (#usDeviceSetup), the lock screen and the system
   pills. Legacy layers (auth-first-run.css, identity.css, fix4.css,
   onboarding.css, public-auth.css) are overridden here, never edited.
   Pseudo-elements stay on classes: a leaving step is painted by a copy without ids. */

/* ---------- Shared pieces ---------- */
.us-duo-a{fill:var(--us-rosa)}
.us-duo-b{fill:var(--us-lilla)}
.us-duo-n{fill:var(--us-noi)}
.us-duo-mark{display:block;width:54px;height:34px;flex:none;overflow:visible}
.us-sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

/* While onboarding, before the couple exists, the creator is rosa. */
html.us-onboarding-active .auth-overlay{--us-tu:var(--us-rosa);--us-partner:var(--us-lilla)}
html.us-onboarding-active .auth-overlay[data-us-tone="beatrice"]{--us-tu:var(--us-lilla);--us-partner:var(--us-rosa)}

/* ---------- The front door: full screen night, one column (.auth) ---------- */
.auth-overlay,
html.us-onboarding-active .auth-overlay{
  display:block;
  padding:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--us-color-bg);
  color:var(--us-color-text);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
html.us-onboarding-active .auth-overlay{display:block!important}
.auth-overlay.hidden{display:none}
/* A password sign-in in progress (app.js loginAccount): the sign-in stays on
   screen while the account is checked, then the next step takes its place as
   in the design, never an empty screen in between. */
html.us-auth-pending.us-auth-signing-in .auth-overlay:not(.hidden),
html.us-returning-device.us-auth-signing-in .auth-overlay:not(.hidden){display:block!important}

/* .auth{padding:28px 22px 26px}: brand, body in the middle, foot at the bottom. */
html .auth-overlay .auth-card,
.us-setup-card{
  --us-auth-top:calc(max(14px,var(--us-safe-top,0px)) + 14px);
  --us-auth-side-l:max(22px,var(--us-safe-left,0px));
  --us-auth-side-r:max(22px,var(--us-safe-right,0px));
  position:relative;
  isolation:auto;
  display:flex;
  flex-direction:column;
  width:min(100%,460px);
  min-width:0;
  min-height:100%;
  max-height:none;
  margin:0 auto;
  padding:var(--us-auth-top) var(--us-auth-side-r) calc(max(12px,var(--us-safe-bottom,0px)) + 14px) var(--us-auth-side-l);
  overflow:visible;
  border:0!important;
  border-radius:0;
  background:transparent!important;
  box-shadow:none;
  color:var(--us-color-text);
  font:400 15px/1.5 var(--us-font-ui);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
html .auth-overlay .auth-card::before{display:none}
.auth-overlay .auth-logo,
.auth-overlay .us-auth-context{display:none!important}

/* .brand: the two circles (54×34) and, on the right, the eyebrow. */
.us-auth-brand{display:flex;align-items:center;height:34px;flex:none}
/* On the tour the eyebrow is "Salta", 44px tall: the row grows with it. */
html .auth-overlay.us-tour-active .us-auth-brand{height:44px}

html .auth-overlay .auth-step>.tiny,
.us-setup-card>.tiny{
  position:absolute;
  top:var(--us-auth-top);
  right:var(--us-auth-side-r);
  max-width:calc(100% - 120px);
  height:34px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  text-align:right;
  color:var(--us-color-text);
  font:700 11px/1.5 var(--us-font-ui);
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* .a-prog: 3px, 14px under the brand row. Tu · Voi · Notifiche · Posizione. */
.us-ob-progress{
  position:absolute;
  left:var(--us-auth-side-l);
  right:var(--us-auth-side-r);
  top:calc(var(--us-auth-top) + 45px);
  height:3px;
  border-radius:3px;
  background:var(--us-color-line);
  overflow:hidden;
}
#usOnboarding .us-ob-progress[hidden]{display:none!important}
.us-ob-progress i{
  display:block;
  height:100%;
  width:calc(var(--us-progress,0) * 100%);
  border-radius:inherit;
  background:var(--us-tu);
  /* .6s e-out as in the design, once the old step has gone (onboarding.js
     sets the wait: 0 when the step is drawn after it, 180 ms under a copy). */
  transition:width .6s cubic-bezier(.2,.8,.2,1) var(--us-ob-delay,0ms),background-color .4s var(--us-ob-delay,0ms);
}

/* .a-body: gap 14, padding 20 (14 on the numbered steps), centred between the
   brand and the foot. Two spacers do the centring; the foot cancels one gap. */
html .auth-overlay .auth-step{display:none}
html .auth-overlay :is(.auth-step.active,.us-step-ghost),
.us-setup-body{
  display:flex;
  flex-direction:column;
  flex:1 0 auto;
  justify-content:flex-start;
  gap:14px;
  min-width:0;
  margin:0;
  padding:0;
}
html .auth-overlay :is(.auth-step.active,.us-step-ghost)::before,
html .auth-overlay :is(.auth-step.active,.us-step-ghost)::after,
.us-setup-body::before,
.us-setup-body::after{content:"";display:block;flex:1 0 6px;order:-1}
html .auth-overlay :is(.auth-step.active,.us-step-ghost)::after,
.us-setup-body::after{order:50}
html .auth-overlay :is(#usOnboarding.active,.us-step-ghost.us-ob-step)::before,
html .auth-overlay :is(#usOnboarding.active,.us-step-ghost.us-ob-step)::after,
.us-setup-body::before,
.us-setup-body::after{flex-basis:0px}
html .auth-overlay .us-auth-foot{order:60;margin-top:-14px}
/* The leaving copy of a step, painted over the old place while it fades. */
html .auth-overlay .us-step-ghost,
.us-setup .us-step-ghost{position:absolute;z-index:3;pointer-events:none}
.us-setup .us-step-ghost{display:flex;flex-direction:column;gap:14px}
.us-setup .us-step-ghost::before,.us-setup .us-step-ghost::after{content:"";display:block;flex:1 0 0px;order:-1}
.us-setup .us-step-ghost::after{order:50}

/* Type: h2 44/1 (40 on the numbered steps), the lead 16px. */
html .auth-overlay .auth-card h2,
.us-setup h2{
  margin:0;
  max-width:100%;
  color:var(--us-color-text);
  font:400 44px/1 var(--us-font-display);
  letter-spacing:-.02em;
  text-align:left;
  text-wrap:balance;
  overflow-wrap:break-word;
}
html .auth-overlay #usOnboarding h2,
html .auth-overlay .us-ob-step h2,
.us-setup h2{font-size:40px}
html .auth-overlay .auth-card h2 em,
.us-setup h2 em{font-style:italic;color:var(--us-tu)}
html .auth-overlay .auth-card h2:focus{outline:none}
html .auth-overlay .auth-card h2:focus-visible,
.us-setup h2:focus-visible{outline:2px solid var(--us-noi);outline-offset:4px;border-radius:6px}
html .auth-overlay .auth-card .us-auth-lede,
.us-setup .us-auth-lede{
  max-width:none;
  margin:0;
  text-align:left;
  color:var(--us-color-text-2);
  font:400 16px/1.5 var(--us-font-ui);
}
.us-setup .us-auth-lede:empty{display:none}

/* .field: label 12px, input 52px on the night, radius 16. */
html .auth-overlay .us-auth-field{display:grid;gap:6px;margin:0;min-width:0}
html .auth-overlay .us-auth-field[hidden]{display:none}
html .auth-overlay .us-auth-field>span,
html .auth-overlay .us-ob-bday legend{
  display:block;
  margin:0;
  padding:0;
  color:var(--us-color-text-3);
  font:700 12px/1.5 var(--us-font-ui);
  letter-spacing:.1em;
  text-transform:uppercase;
}
html .auth-overlay .auth-card input:not([type="checkbox"]),
html .auth-overlay .auth-card textarea,
html .auth-overlay .auth-card select{
  width:100%;
  min-height:52px;
  margin:0;
  padding:0 14px;
  border-radius:16px;
  background-color:var(--us-color-bg)!important;
  border:1px solid var(--us-color-line-strong)!important;
  color:var(--us-color-text);
  font:400 16px/1.5 var(--us-font-ui);
  letter-spacing:normal;
  box-shadow:none;
  color-scheme:dark;
}
html .auth-overlay .auth-card input::placeholder,
html .auth-overlay .auth-card textarea::placeholder{color:var(--us-color-text-3);opacity:1}
html .auth-overlay .auth-card :is(input,textarea,select):focus{outline:none;box-shadow:none}
html .auth-overlay .auth-card :is(input,textarea,select):focus-visible{outline:2px solid var(--us-noi);outline-offset:3px}
html .auth-overlay .auth-card input:disabled,
html .auth-overlay .auth-card select:disabled{opacity:.6}
html .auth-overlay .mc3-help,
#usOnboarding .mc3-help{margin:0;color:var(--us-color-text-3);font:400 12px/1.5 var(--us-font-ui)}

/* .btns: primary 52px (16px, 700), ghost 48px; 8px apart, 4px after the field. */
html .auth-overlay .us-auth-primary,
html .auth-overlay #mc3ShareCode,
html .auth-overlay #mc3Retry,
html .auth-overlay #usVerifyBack,
.us-setup .us-auth-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  min-height:52px;
  margin:4px 0 0;
  padding:0 18px;
  border:0;
  border-radius:999px;
  background:var(--us-tu)!important;
  color:var(--us-inchiostro)!important;
  font:700 16px/1.2 var(--us-font-ui);
  letter-spacing:normal;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:none;
}
/* onboarding.css gives every #usOnboarding button 44px: the design's primary is 52. */
html .auth-overlay #usOnboarding :is(.us-auth-primary,#mc3Retry){min-height:52px}
/* The design's disabled button: .45, no other change (fix4.css dims every
   disabled button to .58 and desaturates it, both !important). */
html .auth-overlay :is(.us-auth-primary,#mc3ShareCode,#mc3CopyCode,#mc3Retry,#usVerifyResend):disabled,
.us-setup .us-auth-primary:disabled,
.us-setup .us-setup-secondary:disabled{opacity:.45!important;filter:none}
/* A link never dims (the design's .link): while something works it is only out of reach. */
html .auth-overlay :is(.us-auth-link,.mc3-back,.us-ob-link):disabled,
.us-setup .us-auth-link:disabled{opacity:1!important;filter:none}
/* busy(): only the pressed button dims and says what is happening; the rest
   waits without changing (it is disabled all the same). */
html .auth-overlay #usOnboarding[data-us-busy] :is(button,input,select,textarea):disabled:not([data-us-busy]){opacity:1!important;filter:none}
html .auth-overlay #mc3BackCreate,
html .auth-overlay #mc3BackJoin,
html .auth-overlay #mc3CopyCode,
html .auth-overlay :is(#usGoogleSignIn,#usGoogleSignUp),
html .auth-overlay #usVerifyResend,
html .auth-overlay #mc3Waiting.has-code #mc3Generate,
.us-setup .us-setup-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:48px;
  margin:-6px 0 0;
  padding:0 18px;
  border-radius:999px;
  border:1px solid var(--us-color-line-strong);
  background:transparent!important;
  color:var(--us-color-text)!important;
  font:600 15px/1.2 var(--us-font-ui);
  text-decoration:none;
  box-shadow:none;
}
.us-setup .us-setup-secondary[hidden]{display:none}

/* 18+ and the Terms (1.0 A1, after the mockup): a real checkbox in my colour. */
html .auth-overlay .us-auth-consent{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-height:44px;
  margin:0;
  padding:4px 0;
  color:var(--us-color-text-2);
  font:400 14px/1.45 var(--us-font-ui);
  cursor:pointer;
}
html .auth-overlay .auth-card .us-auth-consent input{
  flex:none;
  width:22px;
  min-height:0;
  height:22px;
  margin:0;
  padding:0;
  border-radius:6px;
  accent-color:var(--us-tu);
  color-scheme:dark;
  cursor:pointer;
}
html .auth-overlay .us-auth-consent input:focus-visible{outline:2px solid var(--us-noi);outline-offset:2px}
html .auth-overlay .us-auth-consent a{color:var(--us-color-text);text-decoration:none}
html .auth-overlay .us-auth-consent a[href]{text-decoration:underline;text-underline-offset:3px}

/* .link: 14px 600 underlined, 40px in the flow, a 44px target. */
html .auth-overlay .us-auth-link,
html .auth-overlay #usOnboarding .mc3-back:not(#mc3BackCreate):not(#mc3BackJoin),
html .auth-overlay #mc3Revoke,
html .auth-overlay #mc3Refresh{
  position:relative;
  align-self:center;
  width:auto;
  min-height:44px;
  margin:-2px 0;
  padding:0;
  border:0;
  background:none!important;
  color:var(--us-color-text)!important;
  font:600 14px/1.2 var(--us-font-ui);
  text-decoration:underline;
  text-underline-offset:3px;
  box-shadow:none;
}
html .auth-overlay .us-auth-foot.us-auth-link,
html .auth-overlay #usOnboarding .mc3-back.us-auth-foot{margin:-16px 0 -2px}
html .auth-overlay .us-auth-link[hidden],
html .auth-overlay #usOnboarding .mc3-back[hidden]{display:none}
/* .a-links: centred, 8px apart, a dot between. */
html .auth-overlay .us-auth-links{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 8px;margin:0}
html .auth-overlay .us-auth-links[hidden]{display:none!important}
html .auth-overlay .us-auth-links .us-auth-link+.us-auth-link::before,
html .auth-overlay .mc3-actions .us-ob-link+.us-ob-link:not([hidden])::before{
  content:"·";
  display:inline-block;
  margin-right:8px;
  color:var(--us-color-text-3);
  text-decoration:none;
}
html .auth-overlay .mc3-actions .us-ob-link[hidden]+.us-ob-link::before{content:none}

/* .a-st: a quiet box under the fields, red or green when it matters. */
html .auth-overlay .auth-status,
.us-setup .auth-status{
  min-height:0;
  margin:0;
  padding:10px 14px;
  border-radius:14px;
  background:var(--us-color-surface);
  text-align:left;
  color:var(--us-color-text-2);
  font:600 14px/1.5 var(--us-font-ui);
}
/* Empty (or a hint the lead already says), it leaves the flow but stays for screen readers. */
html .auth-overlay .auth-status:empty,
html .auth-overlay .auth-status[data-kind="hint"],
.us-setup .auth-status:empty{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
html .auth-overlay .auth-status[data-kind="error"],
.us-setup .auth-status[data-kind="error"]{color:var(--us-rosso);background:color-mix(in srgb,var(--us-rosso) 10%,var(--us-color-surface))}
html .auth-overlay .auth-status[data-kind="success"],
.us-setup .auth-status[data-kind="success"]{color:var(--us-verde);background:color-mix(in srgb,var(--us-verde) 10%,var(--us-color-surface))}

/* Verify: .a-ic, the envelope in my colour. */
.us-auth-icon{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border-radius:20px;
  background:color-mix(in srgb,var(--us-tu) 16%,transparent);
}
.us-auth-icon::before{
  content:"";
  width:30px;
  height:30px;
  background:var(--us-tu);
  -webkit-mask:url("/assets/icons/phosphor/envelope-simple-regular.svg") center/contain no-repeat;
  mask:url("/assets/icons/phosphor/envelope-simple-regular.svg") center/contain no-repeat;
}
html .auth-overlay #usVerifyBack{order:4}
html .auth-overlay #usVerifyResend{order:5;display:inline-flex}

/* .install: "Tieni US sul telefono", the foot of the login. */
html .auth-overlay .us-auth-install{
  flex:none;
  margin:0;
  padding:12px 12px 12px 14px;
  border:1px solid var(--us-color-line);
  border-radius:20px;
  background:var(--us-color-surface);
  text-align:left;
}
html .auth-overlay .us-auth-install[hidden],
html .auth-overlay.us-tour-active .us-auth-install{display:none!important}
html .auth-overlay .us-auth-install-row{display:flex;align-items:center;gap:12px}
.us-auth-install-icon{
  position:relative;
  width:38px;
  height:38px;
  flex:none;
  border-radius:12px;
  background:var(--us-color-surface-2);
}
.us-auth-install-icon::before{
  content:"";
  position:absolute;
  inset:9px;
  background:var(--us-color-text-2);
  -webkit-mask:url("/assets/icons/phosphor/device-mobile-regular.svg") center/contain no-repeat;
  mask:url("/assets/icons/phosphor/device-mobile-regular.svg") center/contain no-repeat;
}
html .auth-overlay .us-auth-install-copy{flex:1;min-width:0;display:block}
html .auth-overlay .us-auth-install-copy b{display:block;color:var(--us-color-text);font:600 14px/1.5 var(--us-font-ui)}
html .auth-overlay .us-auth-install-copy small{display:inline;color:var(--us-color-text-3);font:400 12px/1.5 var(--us-font-ui)}
/* .mini-btn.g: 40px, 44px target. */
html .auth-overlay .us-auth-install-btn{
  position:relative;
  flex:none;
  min-height:40px;
  margin:0;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--us-color-line-strong);
  background:transparent;
  color:var(--us-color-text-2);
  font:700 14px/1 var(--us-font-ui);
  box-shadow:none;
}
html .auth-overlay .us-auth-install-btn::after{content:"";position:absolute;inset:-2px 0}
html .auth-overlay .us-auth-install-help{
  margin:10px 0 0;
  padding:10px 14px;
  border:0;
  border-radius:14px;
  background:var(--us-color-surface-2);
  color:var(--us-color-text-2);
  font:400 13px/1.45 var(--us-font-ui);
}

/* Focus rings: 2px orchidea, 3px out (the mockup's). The legacy rings
   (identity.css pink outline, fix4.css halo, both !important) stay out. */
html .auth-overlay button:focus-visible,
.us-setup button:focus-visible{outline:2px solid var(--us-noi);outline-offset:3px}
html .auth-overlay :is(button,input,textarea,select):focus-visible,
.us-setup :is(button,input,textarea,select):focus-visible,
.us-app-lock button:focus-visible{outline:2px solid var(--us-noi)!important;outline-offset:3px;box-shadow:none!important}
/* A tap shows only the press, never the phone's own highlight (the mockup's button rule). */
.auth-overlay,.us-setup,.us-app-lock{-webkit-tap-highlight-color:transparent}

/* ---------- The tour: three cards (.auth.is-tour) ---------- */
html .auth-overlay.us-tour-active .auth-step{display:none!important}
.us-tour{display:flex;flex-direction:column;flex:1 0 auto;gap:10px;min-width:0}
.us-tour::before,.us-tour::after{content:"";display:block;flex:1 0 0px;order:-1}
.us-tour::before{flex-basis:0px}
.us-tour::after{order:50;flex-basis:0px}
/* .a-body padding 10px 0 4px: the spacers carry it, the foot cancels the gap. */
.us-tour .us-tour-view{order:0;margin-top:-4px}
.us-tour .us-tour-dots{order:1;margin-bottom:-6px}
html .auth-overlay .us-tour .us-auth-foot{margin-top:-10px}
.us-tour[hidden]{display:none}
.us-tour-skip{
  position:absolute;
  top:var(--us-auth-top);
  right:calc(var(--us-auth-side-r) - 2px);
  min-height:44px;
  min-width:44px;
  margin:0;
  padding:0 2px 0 12px;
  border:0;
  background:none;
  color:var(--us-color-text-2);
  font:700 11px/1.5 var(--us-font-ui);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.us-tour-view{display:block;min-width:0;margin:0 calc(var(--us-auth-side-r) * -1) 0 calc(var(--us-auth-side-l) * -1)}
.us-tour-track{
  display:flex;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;
}
.us-tour-track::-webkit-scrollbar{display:none}
.us-tour-track:focus-visible{outline:2px solid var(--us-noi);outline-offset:-4px;border-radius:24px}
.us-tour-slide{
  flex:0 0 100%;
  min-width:0;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  display:grid;
  justify-items:center;
  align-content:center;
  gap:12px;
  padding:0 26px;
  text-align:center;
}
html .auth-overlay .us-tour-slide h2{font-size:40px;text-align:center}
html .auth-overlay .us-tour-slide .us-auth-lede{max-width:31ch;text-align:center}
.us-tour-vis{position:relative;width:240px;height:180px;display:grid;place-items:center;margin-bottom:6px}
.us-tour-vis svg{width:240px;height:180px;overflow:visible}
/* .t-dots: 32px buttons (44px targets), the current one long, in my colour. */
.us-tour-dots{display:flex;justify-content:center}
/* The design's dots sit 32px apart in a 32px row; each target is 44px (−6px margins keep the layout). */
.us-tour-dots button{position:relative;display:grid;place-items:center;width:44px;height:44px;margin:-6px;padding:0;border:0;background:none}
.us-tour-dots button::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:9px;
  background:var(--us-color-text-3);
  transition:width .35s var(--us-ease-standard),background-color .35s;
}
.us-tour-dots button[aria-current="true"]::before{width:22px;background:var(--us-tu)}
/* .a-foot of the tour: Avanti, then "Ho già un account". */
html .auth-overlay .us-tour-actions{display:grid;gap:10px;justify-items:stretch;text-align:center}
html .auth-overlay .us-tour-actions .us-auth-primary{margin:0}
html .auth-overlay .us-tour-actions .us-auth-link{justify-self:center;margin:-2px 0}
.t1-a{fill:var(--us-rosa)}
.t1-b{fill:var(--us-lilla)}
.t1-n{fill:var(--us-noi)}
.t1-a,.t1-b,.t1-n,.t1-w,.t2-a,.t2-b,.t2-l{transform-box:fill-box;transform-origin:center}
.t1-w{fill:none;stroke:var(--us-noi);stroke-width:2;opacity:0}
.t2-a{fill:var(--us-rosa)}
.t2-b{fill:var(--us-lilla)}
.t2-arc{fill:none;stroke:var(--us-color-text-3);stroke-width:1.6;stroke-dasharray:2 6;stroke-linecap:round}
.t2-h{fill:var(--us-rosa)}
.t2-bl{fill:color-mix(in srgb,var(--us-rosa) 14%,var(--us-color-surface));stroke:color-mix(in srgb,var(--us-rosa) 40%,transparent)}
.t2-br{fill:color-mix(in srgb,var(--us-lilla) 14%,var(--us-color-surface));stroke:color-mix(in srgb,var(--us-lilla) 40%,transparent)}
.t2-l{fill:var(--us-color-text-2)}
.t2-d{fill:var(--us-color-text-3);opacity:0}
/* Two of your photos, tilted: painted on the phone, before any account. */
.t3-p{position:absolute;left:50%;top:50%;width:76px;height:100px;margin:-50px 0 0 -38px;object-fit:cover;border-radius:16px;border:3px solid var(--us-color-surface);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.t3-p:not([src]){visibility:hidden}
.t3-pl{transform:translate(-82px,14px) rotate(-12deg)}
.t3-pr{transform:translate(82px,8px) rotate(10deg)}
.t3-ring{position:relative;width:150px;height:150px}
.t3-ring svg{width:150px;height:150px}
.t3-tr{fill:var(--us-color-surface);stroke:var(--us-color-line-strong);stroke-width:7}
.t3-r{fill:none;stroke:var(--us-noi);stroke-width:7;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:22;transform:rotate(-90deg);transform-origin:75px 75px}
/* Something done together: a heart rises (no points outside the Sintonia bar). */
.t3-x{position:absolute;right:30px;top:12px;color:var(--us-noi);font:800 13px/1.5 var(--us-font-ui);opacity:0}
.t3-c{
  position:absolute;
  left:50%;
  bottom:-4px;
  translate:-50% 0;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:var(--us-color-elevated);
  border:1px solid var(--us-color-line-strong);
  color:var(--us-color-text);
  font:700 12px/1.5 var(--us-font-ui);
  white-space:nowrap;
}
.t3-c i{width:7px;height:7px;border-radius:50%;background:var(--us-noi)}

/* ---------- Tu, Voi, your colour, the invite (#usOnboarding, .auth.is-step) ---------- */
/* The forms let their fields join the step's column, so the status line can
   sit under the fields and above the buttons, as on the mockup:
   title 1 · lead 2 · fields 3 · status 4 · primary 5 · ghost 6 · foot 9. */
html .auth-overlay #usOnboarding :is(#mc3Me,#mc3Create,#mc3Join,#mc3Choice,#mc3Color):not([hidden]){display:contents}
html .auth-overlay .us-ob-step>h2{order:1}
html .auth-overlay .us-ob-step>.us-auth-lede{order:2}
html .auth-overlay .us-ob-step .us-auth-field,
html .auth-overlay .us-ob-step .us-ob-bday,
html .auth-overlay .us-ob-step .mc3-help,
html .auth-overlay .us-ob-step .us-ob-pick-card,
html .auth-overlay .us-ob-step .us-ob-venn,
html .auth-overlay .us-ob-step .us-ob-color>.us-auth-lede,
html .auth-overlay .us-ob-step #mc3Waiting{order:3}
html .auth-overlay .us-ob-step>.auth-status{order:4}
html .auth-overlay .us-ob-step .us-auth-primary,
html .auth-overlay .us-ob-step #mc3Retry{order:5}
html .auth-overlay .us-ob-step :is(#mc3BackCreate,#mc3BackJoin){order:6}
html .auth-overlay .us-ob-step .us-auth-foot{order:60}
html .auth-overlay #usOnboarding.active,
html .auth-overlay .us-step-ghost.us-ob-step{gap:14px}
html .auth-overlay #usOnboarding.active{padding:0}
/* Esci only where nothing else leads back to it: Tu, the invite and the error. */
html .auth-overlay #usOnboarding[data-view="choice"] #mc3Exit,
html .auth-overlay #usOnboarding[data-view="create"] #mc3Exit,
html .auth-overlay #usOnboarding[data-view="join"] #mc3Exit,
html .auth-overlay #usOnboarding[data-view="color"] #mc3Exit{display:none}
/* The foot cancels one gap (the link rule's −2px would otherwise win here). */
html #authOverlay.auth-overlay #usOnboarding :is(#mc3BackMe,#mc3Exit).mc3-back.us-auth-foot{margin:-16px 0 -2px}

/* Il tuo compleanno: two selects, .8fr and 1.4fr. */
#usOnboarding .us-ob-bday{display:grid;gap:6px;min-width:0;margin:0;padding:0;border:0}
/* A floated legend is a plain grid item: the 6px under it, as under every label. */
#usOnboarding .us-ob-bday legend{float:left;width:100%}
.us-ob-bday-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:8px}
/* Insieme dal (beta fix 28/10): day, month, year in the same selects. */
.us-ob-date-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);gap:8px}
.us-ob-date-row .us-ob-select::after{right:9px}
html .auth-overlay .auth-card .us-ob-date-row .us-ob-select select{padding-left:11px;padding-right:28px}
.us-ob-select{position:relative;display:block;min-width:0}
.us-ob-select::after{
  content:"";
  position:absolute;
  right:13px;
  top:50%;
  width:16px;
  height:16px;
  margin-top:-8px;
  background:rgba(247,239,233,.55);
  pointer-events:none;
  -webkit-mask:url("/assets/icons/phosphor/caret-down-regular.svg") center/contain no-repeat;
  mask:url("/assets/icons/phosphor/caret-down-regular.svg") center/contain no-repeat;
}
html .auth-overlay .auth-card .us-ob-select select{padding-right:38px;-webkit-appearance:none;appearance:none}
.us-ob-select select option{background:#17111c;color:#f7efe9}

/* .pick: two cards, 16px in, radius 22. */
html .auth-overlay #usOnboarding .us-ob-pick-card{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:0;
  margin:-4px 0 0;
  padding:16px;
  border-radius:22px;
  border:1px solid var(--us-color-line);
  background:var(--us-color-surface)!important;
  color:var(--us-color-text)!important;
  text-align:left;
  box-shadow:none;
}
html .auth-overlay #usOnboarding .us-ob-pick-card+.us-ob-pick-card{margin-top:-4px}
html .auth-overlay #usOnboarding #mc3ChooseCreate{margin-top:0}
.us-ob-pick-card .us-duo-mark{width:58px;height:36px}
.us-ob-pick-icon{display:grid;place-items:center;width:58px;height:36px;flex:none}
/* The mockup's key is its own stroke drawing (ring low left, stem up to the
   right), not a Phosphor glyph: the Phosphor key, file unchanged, is mirrored
   across its diagonal so it lies the same way (ring low left, teeth below). */
.us-ob-pick-icon::before{
  content:"";
  width:28px;
  height:28px;
  transform:matrix(0,1,1,0,0,0);
  background:var(--us-partner);
  -webkit-mask:url("/assets/icons/phosphor/key-regular.svg") center/contain no-repeat;
  mask:url("/assets/icons/phosphor/key-regular.svg") center/contain no-repeat;
}
.us-ob-pick-copy{display:block;min-width:0}
.us-ob-pick-copy b{display:block;font:400 21px/1.5 var(--us-font-display)}
.us-ob-pick-copy small{color:var(--us-color-text-3);font:400 13px/1.5 var(--us-font-ui)}

/* The invite code, typed or pasted: 80px, upper case, a little air. */
html .auth-overlay .auth-card #mc3JoinCode{
  display:block;
  height:80px;
  min-height:0;
  padding:13px 14px;
  line-height:1.5;
  resize:none;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}

/* Your colour: .ob-venn, the two circles and who is who. */
.us-ob-color{display:contents}
.us-ob-venn{display:grid;justify-items:center;gap:8px;justify-self:center;align-self:center;margin:2px 0 4px}
.us-ob-venn[hidden]{display:none}
.us-ob-venn svg{width:200px;height:120px;overflow:visible}
.ov-a{fill:var(--us-rosa)}
.ov-b{fill:var(--us-lilla)}
.ov-n{fill:var(--us-noi)}
.ov-a,.ov-b,.ov-n,.ov-wait,.ov-halo{transform-box:fill-box;transform-origin:center}
.ov-wait{fill:none;stroke-width:2;stroke-dasharray:3 7;stroke-linecap:round}
.ov-wait-a{stroke:var(--us-rosa)}
.ov-wait-b{stroke:var(--us-lilla)}
.ov-wait.is-gone{opacity:0}
.ov-halo{fill:none;stroke:var(--us-noi);stroke-width:2;opacity:0}
.ov-l{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;color:var(--us-color-text-2);font:600 13px/1.5 var(--us-font-ui)}
.ov-l>span{display:inline-flex;align-items:center;gap:6px}
.ov-dot{width:9px;height:9px;border-radius:50%;flex:none}
.ov-dot-a{background:var(--us-rosa)}
.ov-dot-b{background:var(--us-lilla)}
.us-ob-flood{position:fixed;inset:0;z-index:5;pointer-events:none}

/* The invite: .inv (status, "Il nuovo codice", the code), the buttons, the links, the notes. */
html .auth-overlay #mc3Waiting:not([hidden]){display:flex;flex-direction:column;gap:14px}
#mc3Waiting .us-inv-st{order:1}
#mc3Waiting #mc3CodeArea{order:2}
#mc3Waiting .us-ob-invite-actions{order:4}
#mc3Waiting .us-ob-invite-help{order:5}
#mc3Waiting .us-ob-note{order:6}
html .auth-overlay #usOnboarding .us-inv-st{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:16px;
  border-radius:22px;
  border:1px solid var(--us-color-line);
  background:var(--us-color-surface);
  color:var(--us-color-text-2);
  font:600 13px/1.5 var(--us-font-ui);
}
html .auth-overlay #usOnboarding .us-inv-st:empty{display:none}
.us-inv-st::before{
  content:"";
  flex:none;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--us-ambra);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--us-ambra) 22%,transparent);
}
.us-inv-st:is([data-status="revoked"],[data-status="expired"])::before{background:var(--us-rosso);box-shadow:0 0 0 3px color-mix(in srgb,var(--us-rosso) 22%,transparent)}
.us-inv-st:is([data-status="none"],[data-status="used"])::before{background:var(--us-color-text-3);box-shadow:none}
html .auth-overlay #usOnboarding .has-code .us-inv-st{border-bottom:0;border-radius:22px 22px 0 0;padding-bottom:0}
html .auth-overlay #mc3CodeArea:not([hidden]){display:flex;flex-direction:column;gap:14px;margin-top:-14px}
#mc3CodeArea .us-auth-field{
  gap:10px;
  padding:10px 16px 16px;
  border:1px solid var(--us-color-line);
  border-top:0;
  border-radius:0 0 22px 22px;
  background:var(--us-color-surface);
}
html .auth-overlay #mc3CodeArea .us-auth-field>span{font-size:11px;letter-spacing:.14em;line-height:1.5}
/* The code in groups of five (the field under it keeps the plain code for copying and screen readers). */
html .auth-overlay .auth-card #mc3Code{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0!important;opacity:0;pointer-events:none}
html .auth-overlay .auth-card #mc3Code:focus{position:static;width:100%;height:auto;opacity:1;pointer-events:auto;background:transparent!important;font:600 19px/1.5 ui-monospace,"SF Mono","Roboto Mono",Menlo,monospace;letter-spacing:.06em}
html .auth-overlay .auth-card #mc3Code:focus+.us-inv-code{display:none}
.us-inv-code{
  display:block;
  color:var(--us-color-text);
  font:600 19px/1.5 ui-monospace,"SF Mono","Roboto Mono",Menlo,monospace;
  letter-spacing:.06em;
  word-spacing:.3em;
  overflow-wrap:anywhere;
}
/* Condividi leads (1.0 A2, after the mockup), Copia codice beside it. */
html .auth-overlay #mc3CodeArea .mc3-code-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px}
html .auth-overlay #mc3CodeArea .mc3-code-actions button{min-height:52px;margin:0;padding:0 12px}
html .auth-overlay #mc3Waiting .mc3-actions{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 8px}
html .auth-overlay #mc3Waiting #mc3Generate{flex:1 0 100%;margin:0 0 4px}
html .auth-overlay #mc3Waiting.has-code #mc3Generate{margin:-6px 0 4px}
html .auth-overlay #mc3Waiting .mc3-help{text-align:center}
html .auth-overlay #mc3Waiting .mc3-actions>button,
html .auth-overlay #mc3CodeArea>*,
html .auth-overlay #mc3CodeArea .us-auth-field{order:0}
html .auth-overlay #mc3Waiting .us-ob-invite-help{margin-top:-6px}

/* ---------- The phone setup after pairing (#usDeviceSetup) ---------- */
.us-setup{
  position:fixed;
  inset:0;
  z-index:var(--us-layer-auth);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--us-color-bg);
  color:var(--us-color-text);
}
/* It appears at once: a visibility transition (the reduced-motion "all .01ms"
   included) would keep the heading unfocusable for a frame. */
.us-setup,.us-setup-card,.us-setup-body,#usSetupTitle{transition:none}
.us-setup[hidden]{display:none}
.us-setup.is-pending .us-setup-body,
.us-setup.is-pending .us-setup-card>.tiny,
.us-setup.is-pending .us-ob-progress{visibility:hidden}
/* "Entra in US": the setup fades, the intro covers the app on its own. */
.us-setup.is-intro{background:transparent;overflow:hidden}
.us-setup.is-intro .us-setup-card>:not(.us-setup-intro){visibility:hidden}
.us-setup-body>[hidden]{display:none!important}
.us-setup-body>*{order:0}
.us-setup-actions{display:grid;gap:8px;margin-top:4px}
.us-setup-actions .us-auth-primary{margin:0}
.us-setup .us-setup-actions .us-setup-secondary{margin:0}

/* Notifiche: .np, what arrives. */
.us-setup-push{display:grid;gap:8px;margin:2px 0}
.us-setup-note{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 13px;
  border-radius:20px;
  border:1px solid var(--us-color-line-strong);
  background:var(--us-color-surface);
  text-align:left;
}
.us-setup-note+.us-setup-note{opacity:.82}
.us-setup-note-icon{
  width:34px;
  height:34px;
  flex:none;
  border-radius:9px;
  background:url("/assets/derived/runtime/us-symbol-256-v1.png") center/contain no-repeat;
}
.us-setup-note>span:last-child{flex:1;min-width:0;color:var(--us-color-text-2);font:400 13px/1.5 var(--us-font-ui)}
.us-setup-note small{display:block;color:var(--us-color-text-3);font-size:11px;line-height:1.5}
.us-setup-note b{display:block;color:var(--us-color-text);font:600 14px/1.5 var(--us-font-ui)}

/* Posizione: .tv-place, two dots and the distance between them. */
.us-setup-place{position:relative;height:84px;display:grid;place-items:center}
.us-setup-place svg{width:100%;max-width:290px;height:84px;overflow:visible}
.pl-h,.pl-d,.pl-ln{transform-box:fill-box;transform-origin:center}
.pl-hr{fill:color-mix(in srgb,var(--us-rosa) 20%,transparent)}
.pl-hl{fill:color-mix(in srgb,var(--us-lilla) 20%,transparent)}
.pl-line{fill:none;stroke:var(--us-color-text-3);stroke-width:2.4;stroke-dasharray:1 7;stroke-linecap:round}
/* .pl-chip: no kilometres before the first reading, the two arrows instead. */
.pl-chip{
  position:absolute;
  left:50%;
  top:50%;
  translate:-50% -50%;
  display:grid;
  place-items:center;
  width:62px;
  height:42px;
  border-radius:999px;
  border:1px solid var(--us-color-line-strong);
  background:var(--us-color-surface-2);
}
.pl-chip-icon{
  width:22px;
  height:22px;
  background:var(--us-color-text);
  -webkit-mask:url("/assets/icons/phosphor/arrows-left-right-regular.svg") center/contain no-repeat;
  mask:url("/assets/icons/phosphor/arrows-left-right-regular.svg") center/contain no-repeat;
}
.us-setup-points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.us-setup-points li{display:flex;align-items:flex-start;gap:12px;color:var(--us-color-text-2);font:400 14px/1.4 var(--us-font-ui)}
.us-setup-points b{display:block;color:var(--us-color-text);font-weight:600}
.us-setup-point-icon{
  width:20px;
  height:20px;
  flex:none;
  margin-top:1px;
  background:var(--us-tu);
  -webkit-mask:var(--us-setup-icon) center/contain no-repeat;
  mask:var(--us-setup-icon) center/contain no-repeat;
}
.us-setup-point-icon--distance{--us-setup-icon:url("/assets/icons/phosphor/arrows-left-right-regular.svg")}
.us-setup-point-icon--pin{--us-setup-icon:url("/assets/icons/phosphor/map-pin-regular.svg")}
.us-setup-point-icon--lock{--us-setup-icon:url("/assets/icons/phosphor/shield-regular.svg")}

/* Tutto pronto: .ready-list, what is set, with a tick. */
.us-setup-ready{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.us-setup-ready li{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:20px;
  border:1px solid var(--us-color-line);
  background:var(--us-color-surface);
}
.us-setup-ready li>span:nth-child(2){flex:1;min-width:0}
.us-setup-ready b{display:block;color:var(--us-color-text);font:600 15px/1.5 var(--us-font-ui);overflow-wrap:anywhere}
.us-setup-ready small{display:block;color:var(--us-color-text-3);font:400 12.5px/1.5 var(--us-font-ui)}
.us-setup-ready-icon{
  position:relative;
  width:36px;
  height:36px;
  flex:none;
  border-radius:12px;
  background:var(--us-color-surface-2);
}
.us-setup-ready-icon::before{
  content:"";
  position:absolute;
  inset:8.5px;
  background:var(--us-color-text-2);
  -webkit-mask:var(--us-setup-icon) center/contain no-repeat;
  mask:var(--us-setup-icon) center/contain no-repeat;
}
.us-setup-ready-icon--user{--us-setup-icon:url("/assets/icons/phosphor/user-regular.svg")}
.us-setup-ready-icon--heart{--us-setup-icon:url("/assets/icons/phosphor/heart-regular.svg")}
.us-setup-ready-icon--bell{--us-setup-icon:url("/assets/icons/phosphor/bell-regular.svg")}
.us-setup-ready-icon--pin{--us-setup-icon:url("/assets/icons/phosphor/map-pin-regular.svg")}
.us-setup-ready-icon--widget{--us-setup-icon:url("/assets/icons/phosphor/squares-four-regular.svg")}
/* The widget offer (Android, 1.0 F5): one small pill in the row. */
.us-setup-ready .us-setup-ready-action{
  flex:none;
  min-height:44px;
  margin:0;
  padding:0 14px;
  border:0;
  border-radius:999px;
  background:var(--us-tu);
  color:var(--us-inchiostro);
  font:700 13.5px/1.15 var(--us-font-ui);
  box-shadow:none;
  max-width:46%;
}
.us-setup-ready .us-setup-ready-action[aria-disabled="true"]{opacity:.6}
.us-setup-ready .us-setup-ready-action:focus-visible{outline:2px solid var(--us-noi);outline-offset:2px}
.us-setup-ready li>i[hidden]{display:none}
.us-setup-ready li.is-ok .us-setup-ready-icon{background:color-mix(in srgb,var(--us-tu) 14%,var(--us-color-surface-2))}
.us-setup-ready li.is-ok .us-setup-ready-icon::before{background:var(--us-tu)}
.us-setup-ready li>i{
  position:relative;
  width:26px;
  height:26px;
  flex:none;
  border-radius:50%;
  border:1.5px dashed var(--us-color-line-strong);
}
.us-setup-ready li.is-ok>i{border:0;background:var(--us-tu)}
.us-setup-ready li.is-ok>i::before{
  content:"";
  position:absolute;
  inset:5.5px;
  background:var(--us-inchiostro);
  -webkit-mask:url("/assets/icons/phosphor/check-bold.svg") center/contain no-repeat;
  mask:url("/assets/icons/phosphor/check-bold.svg") center/contain no-repeat;
}

/* "Entra in US" (.intro): two circles meet, become the logo, then the app. */
.us-setup-intro{position:fixed;inset:0;z-index:7;display:grid;place-items:center;background:var(--us-color-bg);isolation:isolate;pointer-events:none}
.us-setup-intro[hidden]{display:none}
.us-setup-intro .c{position:absolute;left:50%;top:46%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;mix-blend-mode:screen}
.us-setup-intro .c.a{background:var(--us-rosa)}
.us-setup-intro .c.b{background:var(--us-lilla)}
.us-setup-intro .logo{
  position:relative;
  width:96px;
  height:96px;
  background:url("/assets/derived/runtime/us-symbol-256-v1.png") center/contain no-repeat;
  opacity:0;
}
.us-setup-intro .word{
  position:absolute;
  left:0;
  right:0;
  top:calc(46% + 96px);
  text-align:center;
  color:var(--us-color-text-2);
  font:italic 400 22px/1.5 var(--us-font-display);
  opacity:0;
}

/* ---------- Small and short screens ---------- */
@media (max-width:360px){
  html .auth-overlay .auth-card h2{font-size:38px}
  html .auth-overlay #usOnboarding h2,
  .us-setup h2,
  html .auth-overlay .us-tour-slide h2{font-size:35px}
  .us-tour-vis{transform:scale(.88);margin:-10px 0 -6px}
}
@media (max-height:640px){
  html .auth-overlay .auth-card h2{font-size:36px}
  html .auth-overlay #usOnboarding h2,
  .us-setup h2,
  html .auth-overlay .us-tour-slide h2{font-size:32px}
  .us-tour-vis{width:200px;height:150px}
  .us-tour-vis svg{width:200px;height:150px}
}

/* ---------- Reduced motion: nothing slides, nothing grows ---------- */
:root[data-us-motion="reduced"] .us-ob-progress i,
:root[data-us-motion="reduced"] .us-tour-dots button::before{transition:none}
@media (prefers-reduced-motion:reduce){
  .us-ob-progress i,.us-tour-dots button::before{transition:none}
}

/* ---------- Lock screen (#usAppLock, .lock-screen) ---------- */
html.us-app-lock-pending .us-app-lock,
html.us-app-locked .us-app-lock,
html.us-app-lock-leaving .us-app-lock{background:var(--us-color-bg)}
.us-app-lock-card{width:auto;max-width:100%;display:grid;justify-items:center;gap:12px;animation:none}
.us-app-lock .us-app-lock-icon{
  position:relative;
  display:grid;
  place-items:center;
  width:84px;
  height:84px;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--us-tu) 35%,transparent);
  background:color-mix(in srgb,var(--us-tu) 14%,var(--us-color-surface));
}
.us-app-lock .us-app-lock-icon::before{
  content:"";
  width:40px;
  height:40px;
  background:var(--us-tu);
  -webkit-mask:url("/assets/icons/phosphor/fingerprint-regular.svg") center/contain no-repeat;
  mask:url("/assets/icons/phosphor/fingerprint-regular.svg") center/contain no-repeat;
}
.us-app-lock .us-app-lock-title{
  margin:0;
  color:var(--us-color-text);
  font:400 34px/1.5 var(--us-font-display);
  letter-spacing:normal;
}
.us-app-lock .us-app-lock-copy{margin:0;max-width:none;color:var(--us-color-text-2);font:400 15px/1.5 var(--us-font-ui)}
.us-app-lock .us-app-lock-copy[hidden]{display:none}
.us-app-lock .us-app-lock-actions{width:min(300px,100%);margin:4px 0 0;display:grid;gap:8px}
.us-app-lock .us-app-lock-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  min-height:52px;
  margin:0;
  padding:0 18px;
  border:0;
  border-radius:999px;
  background:var(--us-tu)!important;
  color:var(--us-inchiostro)!important;
  font:700 16px/1.2 var(--us-font-ui);
  box-shadow:none;
}
.us-app-lock[data-mode="locked"] .us-app-lock-primary::before{
  content:"";
  width:18px;
  height:18px;
  background:currentColor;
  -webkit-mask:url("/assets/icons/phosphor/fingerprint-regular.svg") center/contain no-repeat;
  mask:url("/assets/icons/phosphor/fingerprint-regular.svg") center/contain no-repeat;
}
.us-app-lock .us-app-lock-primary:disabled{opacity:.45!important;filter:none}
.us-app-lock .us-app-lock-secondary{
  justify-self:center;
  min-height:44px;
  margin:-2px 0;
  padding:0;
  background:none;
  color:var(--us-color-text-2);
  font:600 14px/1.2 var(--us-font-ui);
  text-decoration:underline;
  text-underline-offset:3px;
}
.us-app-lock .us-app-lock-secondary[hidden]{display:none}
.us-app-lock .us-app-lock-secondary:focus-visible,
.us-app-lock .us-app-lock-primary:focus-visible{outline:2px solid var(--us-noi);outline-offset:3px;border-radius:999px}
/* .a-st: the error box, in its place above the buttons. */
.us-app-lock .us-app-lock-status{
  order:-1;
  min-width:220px;
  min-height:0;
  margin:0;
  padding:10px 14px;
  border-radius:14px;
  background:color-mix(in srgb,var(--us-rosso) 10%,var(--us-color-surface));
  color:var(--us-rosso);
  font:600 14px/1.5 var(--us-font-ui);
}
.us-app-lock .us-app-lock-status:empty{display:none}
/* The status goes above the buttons only when it says something (no empty row). */
.us-app-lock-card>.us-app-lock-status:not(:empty){grid-row:4}
.us-app-lock-card:has(>.us-app-lock-status:not(:empty))>.us-app-lock-actions{grid-row:5}

/* ---------- System pills: offline, back online, update (fix4.js) ---------- */
/* .toast.is-quiet and .toast with an action: in from 14px above, in 360ms. */
#appStatusBar:not([hidden]),
#appUpdateBar:not([hidden]){animation:us-pill-in .36s cubic-bezier(.22,1.15,.36,1) both}
@keyframes us-pill-in{from{opacity:0;translate:0 -14px}to{opacity:1;translate:0 0}}
/* Back online: the cloud (also on the copy that fades out, fix4.js). */
#appStatusBar[data-kind="online"]::before,
.us-pill-ghost[data-kind="online"]::before{
  width:16px!important;
  height:16px!important;
  border-radius:0;
  background:currentColor!important;
  -webkit-mask:url("/assets/icons/phosphor/cloud-regular.svg") center/contain no-repeat;
  mask:url("/assets/icons/phosphor/cloud-regular.svg") center/contain no-repeat;
}
:root[data-us-motion="reduced"] :is(#appStatusBar,#appUpdateBar):not([hidden]){animation:us-pill-fade .2s linear both}
@keyframes us-pill-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  :is(#appStatusBar,#appUpdateBar):not([hidden]){animation:us-pill-fade .2s linear both}
}