/* Sign-in, family verification, pending access, account, and administrator cards.
   Colours, fields, and buttons come from forms.css tokens (linked on every page that uses this sheet). */
.auth-locked .app-shell{filter:blur(16px) saturate(.75);transform:scale(1.01);pointer-events:none;user-select:none}
.auth-gate{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;background:radial-gradient(circle at 50% 18%,rgba(213,180,110,.1),transparent 34rem),rgba(4,6,10,.84);backdrop-filter:blur(10px);font-family:var(--form-ui-font,Inter,system-ui,sans-serif)}
.auth-card{width:min(520px,100%);border:1px solid var(--form-panel-line);border-radius:var(--form-panel-radius);padding:34px;background:var(--form-panel-bg);box-shadow:var(--form-panel-shadow);color:var(--form-ink)}
.auth-brand-mark{position:relative;width:44px;height:44px;margin-bottom:22px}
.auth-brand-mark i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--form-accent);box-shadow:0 0 18px rgba(var(--form-accent-rgb),.45)}
.auth-brand-mark i:nth-child(1){left:3px;top:18px}.auth-brand-mark i:nth-child(2){left:18px;top:3px}.auth-brand-mark i:nth-child(3){right:3px;top:18px}.auth-brand-mark i:nth-child(4){left:18px;bottom:3px}
.auth-brand-mark:before,.auth-brand-mark:after{content:"";position:absolute;inset:9px 10px;border:1px solid rgba(var(--form-accent-rgb),.48);transform:rotate(45deg)}
.auth-brand-mark:after{inset:14px 15px;border-color:rgba(var(--form-accent-rgb),.22)}
.auth-eyebrow{margin:0 0 10px;color:var(--form-kicker);font:800 10px/1.2 var(--form-ui-font);letter-spacing:.18em;text-transform:uppercase}
.auth-card h1{margin:0;color:var(--form-title);font:500 clamp(34px,6vw,54px)/.98 var(--form-display-font);letter-spacing:-.04em}
.auth-copy{margin:18px 0 0;color:var(--form-label);font:400 15px/1.65 var(--form-ui-font)}
.auth-copy strong{color:var(--form-title)}
.auth-form{display:grid;gap:8px;margin-top:24px}
.auth-form label{margin-top:8px;color:var(--form-label);font:750 11px/1.3 var(--form-ui-font);letter-spacing:.035em}
.auth-form input,.auth-form textarea{width:100%;min-height:var(--field-min-height);border:1px solid var(--field-line);border-radius:var(--field-radius);padding:0 13px;background:var(--field-bg);color:var(--field-ink);font:var(--field-font);outline:none;resize:vertical}
.auth-form textarea{padding:12px 13px}
.auth-form input::placeholder,.auth-form textarea::placeholder{color:var(--field-placeholder)}
.auth-form input:focus,.auth-form textarea:focus{border-color:var(--field-focus-line);outline:2px solid var(--field-focus-ring);outline-offset:1px}
.auth-card button{min-height:var(--btn-min-height);border:1px solid var(--btn-primary-line);border-radius:var(--btn-radius);padding:0 16px;background:var(--btn-primary-bg);color:var(--btn-primary-ink);font:var(--btn-font);font-size:13px;cursor:pointer;transition:background .18s ease,border-color .18s ease}
.auth-card button:hover{background:var(--btn-primary-hover-bg)}
.auth-card button:focus-visible{outline:2px solid var(--form-accent);outline-offset:2px}
.auth-form button{margin-top:10px}
.auth-card button:disabled{opacity:.55;cursor:wait}
.auth-card .auth-secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-ink);border-color:var(--btn-secondary-line)}
.auth-card .auth-secondary:hover{background:var(--btn-secondary-hover-bg)}
.auth-fineprint{margin:17px 0 0;color:var(--form-help);font:500 11px/1.5 var(--form-ui-font)}
.auth-notice{margin-top:18px;padding:12px 14px;border:1px solid var(--form-success-line);border-radius:var(--field-radius);background:var(--form-success-bg);color:var(--form-success);font:600 12px/1.45 var(--form-ui-font)}
.auth-notice.error,.password-auth-message.error{border-color:var(--form-error-line);background:var(--form-error-bg);color:var(--form-error)}
.auth-account-line{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:23px;padding-top:18px;border-top:1px solid var(--form-divider);color:var(--form-help);font:500 12px/1.4 var(--form-ui-font)}
.auth-account-line button{min-height:38px;padding:0 12px;background:var(--btn-secondary-bg);color:var(--btn-secondary-ink);border-color:var(--btn-secondary-line)}
.auth-account-line button:hover{background:var(--btn-secondary-hover-bg)}
.auth-button-row{display:flex;gap:10px;margin-top:24px}.auth-button-row button{flex:1}
.auth-status-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--form-divider);font:500 13px/1.3 var(--form-ui-font);color:var(--form-muted)}
.auth-status-row:first-of-type{margin-top:24px;border-top:1px solid var(--form-divider)}
.auth-status-row strong{color:var(--form-title);text-transform:capitalize}
.account-mode{background:rgba(4,6,10,.7)}

/* Password-first sign-in and password settings (testing-auth.js). */
.password-auth-message{margin-top:14px;padding:12px 14px;border:1px solid var(--form-success-line);border-radius:var(--field-radius);background:var(--form-success-bg);color:var(--form-success);font:600 12px/1.45 var(--form-ui-font)}
.password-auth-message:empty,.password-auth-message[hidden]{display:none}
.auth-method-divider{display:flex;align-items:center;gap:12px;margin:18px 0 0;color:var(--form-hint);font:700 10px/1.2 var(--form-ui-font);letter-spacing:.14em;text-transform:uppercase}
.auth-method-divider::before,.auth-method-divider::after{content:"";flex:1;height:1px;background:var(--form-divider)}
.auth-card .auth-method-toggle{width:100%;margin-top:12px}
.magic-link-wrap{margin-top:16px}
.magic-link-wrap[hidden]{display:none}
.magic-link-note{margin:0;color:var(--form-help);font:500 12px/1.5 var(--form-ui-font)}
.testing-password-settings{margin-top:18px;padding-top:18px;border-top:1px solid var(--form-divider)}

@media(max-width:620px){.auth-gate{place-items:start center;height:100dvh;padding:max(14px,env(safe-area-inset-top)) 14px max(48px,env(safe-area-inset-bottom));scroll-padding-bottom:calc(160px + env(safe-area-inset-bottom))}.auth-card{margin:0;padding:26px 22px}.auth-card h1{font-size:40px}.auth-button-row{flex-direction:column}}

/* Keep authentication layouts self-contained when this stylesheet is used alone. */
.auth-gate,.auth-gate *{box-sizing:border-box}
.auth-gate{z-index:2000;touch-action:pan-y pinch-zoom}

@media(any-pointer:coarse){
  .auth-form input,.auth-form textarea{min-height:48px;font-size:16px}
  .auth-card button{min-height:44px}
}

@media(max-width:620px),(any-pointer:coarse) and (max-height:500px){
  .auth-gate{
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    place-items:start center;
    padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
    scroll-padding-bottom:calc(120px + env(safe-area-inset-bottom));
  }
  .auth-card{width:100%;max-width:520px}
  .auth-form input,.auth-form textarea{min-height:48px;font-size:16px}
  .auth-card button{min-height:44px}
}

@media(any-pointer:coarse) and (max-height:500px){
  .auth-gate{align-content:start;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .auth-card{padding:20px}
  .auth-brand-mark{margin-bottom:14px}
  .auth-card h1{font-size:clamp(30px,8vw,40px)}
  .auth-copy{margin-top:12px;line-height:1.45}
}

.auth-admin-option{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:13px;width:100%;margin-top:18px;padding:14px!important;border:1px solid var(--form-accent-line)!important;background:var(--form-accent-soft)!important;color:var(--form-ink)!important;text-align:left}
.auth-admin-option:hover{border-color:var(--form-accent-strong)!important;background:var(--btn-outline-hover-bg)!important}
.auth-admin-option__icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--form-accent-line);border-radius:12px;background:var(--form-accent-soft)}
.auth-admin-option__icon svg{width:22px;height:22px;fill:none;stroke:var(--form-accent-text);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.auth-admin-option__copy{min-width:0}
.auth-admin-option__copy strong,.auth-admin-option__copy small{display:block}
.auth-admin-option__copy strong{color:var(--form-title);font:750 14px/1.25 var(--form-ui-font)}
.auth-admin-option__copy small{margin-top:4px;color:var(--form-help);font:500 12px/1.35 var(--form-ui-font)}
.auth-admin-option__count{display:grid;place-items:center;min-width:28px;height:28px;padding:0 7px;border-radius:999px;background:#d69b69;color:#1b120a;font:800 12px/1 var(--form-ui-font)}
.auth-admin-option__arrow{color:var(--form-accent-text);font:700 20px/1 var(--form-ui-font)}

/* The classic theme is carried by the forms.css tokens. */
body.classic-tree-mode .auth-gate{background:rgba(45,30,17,.72)}
body.classic-tree-mode .account-mode{background:rgba(45,30,17,.6)}