/* Digital Hub V151 · one page while signed out (opening page + sign-in), only the Hub once signed in;
   sign-in without a passkey on any device: e-mail link, phone via QR code from a signed-in computer */
/* ── one page while signed out, only the Hub once signed in ── */
:is(html,#l150) .x150-landing[hidden],:is(html,#l150) body:not(.x150-signed-out) .x150-landing{display:none!important}
body.x150-signed-out #loginView{scroll-margin-top:0}
body.x150-signed-out #loginView:not([hidden]){border-top:1px solid var(--h7-line)}

/* sign-in: passkey is optional; the ways to sign in without one */
.x150-passkey-link{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:42px;border:1px dashed var(--h7-line);border-radius:12px;background:transparent;
  color:var(--h7-ink-2);font:inherit;font-size:13.5px;font-weight:650;cursor:pointer}
.x150-passkey-link svg{width:17px;height:17px;color:var(--h7-blue)}
.x150-passkey-link:hover{background:var(--h7-soft);color:var(--h7-ink)}
.x150-passkey-link:focus-visible{outline:2px solid var(--h7-blue);outline-offset:2px}
.x150-ways{border:1px solid var(--h7-line);border-radius:12px;background:var(--h7-panel)}
.x150-ways summary{cursor:pointer;padding:11px 14px;font-size:13.5px;font-weight:700;color:var(--h7-blue);list-style-position:inside}
.x150-ways summary:focus-visible{outline:2px solid var(--h7-blue);outline-offset:2px;border-radius:12px}
.x150-ways ul{list-style:none;margin:0;padding:0 14px 12px;display:grid;gap:10px}
.x150-ways li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start}
.x150-ways li>svg{width:30px;height:30px;padding:6px;box-sizing:border-box;border-radius:9px;background:var(--h7-blue-tint);color:var(--h7-blue)}
.x150-ways strong{display:block;font-size:13.5px;color:var(--h7-ink)}
.x150-ways span{display:block;font-size:12.5px;line-height:1.45;color:var(--h7-muted)}
.x150-ways em{font-style:normal;font-weight:700;color:var(--h7-ink-2)}

/* link / phone windows */
.x150-win-body{display:grid;gap:14px;align-content:start}
.x150-state{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;padding:14px;border-radius:14px;border:1px solid var(--h7-line);background:var(--h7-panel)}
.x150-state:not(:has(.x149-ic)){grid-template-columns:minmax(0,1fr)}
.x150-state strong{display:block;font-size:15px;color:var(--h7-ink);overflow-wrap:anywhere}
.x150-state span{display:block;font-size:13.5px;line-height:1.45;color:var(--h7-muted)}
.x150-state.is-bad{border-color:color-mix(in srgb,var(--h7-red) 40%,var(--h7-line));background:var(--h7-red-tint)}
.x150-state.is-good{border-color:color-mix(in srgb,var(--h7-green) 40%,var(--h7-line));background:var(--h7-green-tint)}
.x150-pair{display:grid;justify-items:center;gap:4px;padding:18px;border-radius:16px;background:var(--h7-panel);border:1px solid var(--h7-line)}
.x150-pair span{font-size:12px;font-weight:720;letter-spacing:.06em;text-transform:uppercase;color:var(--h7-muted)}
.x150-pair b{font-size:54px;line-height:1;font-weight:800;letter-spacing:.06em;color:var(--h7-blue)}
.x150-pair-help{margin:0;font-size:14px;line-height:1.5;color:var(--h7-ink-2);text-align:center}
.x150-wait,.x150-qr-status{display:flex;align-items:center;gap:8px;margin:0;font-size:13.5px;color:var(--h7-muted)}
.x150-wait svg{width:18px;height:18px;color:var(--h7-green)}
.x150-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--h7-line);border-top-color:var(--h7-blue);animation:x150spin .8s linear infinite;flex:0 0 auto}
@keyframes x150spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.x150-spin{animation-duration:2.4s}}
/* computer: QR code for the phone */
.x150-phone-host:not(:empty){margin-top:14px;display:grid;gap:12px}
.x150-qr-wrap{display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;align-items:center}
.x150-qr{width:180px;height:180px;padding:8px;box-sizing:border-box;border-radius:14px;background:#fff;border:1px solid var(--h7-line)}
.x150-qr svg{display:block;width:100%;height:100%}
.x150-qr-steps{margin:0;padding-left:20px;display:grid;gap:6px;font-size:13.5px;line-height:1.45;color:var(--h7-ink-2)}
.x150-qr-alt summary{cursor:pointer;font-size:13px;font-weight:650;color:var(--h7-blue)}
.x150-qr-alt p{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--h7-muted)}
.x150-qr-alt code{overflow-wrap:anywhere}
.x150-approve{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--h7-blue) 40%,var(--h7-line));background:var(--h7-blue-tint)}
.x150-approve strong{display:block;font-size:14.5px;color:var(--h7-ink)}
.x150-approve span{display:block;font-size:13.5px;color:var(--h7-ink-2)}
.x150-num{font-size:18px;color:var(--h7-blue)}
.x150-approve-btns{display:flex;gap:8px}
.h150-phone-link{appearance:none;display:block;width:100%;margin-top:10px;padding:6px 0 0;border:0;background:none;font:inherit;font-size:13px;font-weight:650;color:var(--h7-blue);text-align:center;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){
  .x150-qr-wrap{grid-template-columns:minmax(0,1fr);justify-items:center}
  .x150-approve{grid-template-columns:minmax(0,1fr)}
  .x150-approve-btns .btn{flex:1}
}
.x150-link-hint{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--h7-muted)}
.x150-link-hint svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--h7-blue)}