/* ============ Admin — installable app: start-up screen, notices, install & «remember me» ============
   Loaded after admin.css. Stage B (motion) animates these hooks; nothing here moves on its own except
   the start-up mark, which stays still under reduced motion. */
:root{
  /* One line of notice; pwa.js sets --notice-h on body to the real height while a notice shows. */
  --notice-min-h:calc(44px + env(safe-area-inset-top, 0px));
  --notice-h:var(--notice-min-h);
  --notice-z:var(--z-banner, 95);
  --warn:#8a4b06; --warn-soft:#fff4e0; --warn-line:#f2d3a3;
  --ok:#1f6b3a; --ok-soft:#e8f5ec; --ok-line:#bfe0ca;
}

/* ---------- start-up screen ---------- */
.admin-page .boot{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:24px max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background:var(--bg);text-align:center}
.admin-page .boot[hidden]{display:none}
.admin-page .boot .login-mark{width:56px;height:56px;margin:0;border-radius:16px;box-shadow:var(--shadow-lg)}
.admin-page .boot .login-mark svg{width:30px;height:30px}
.admin-page .boot-offline{max-width:360px;width:100%;background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:24px 22px 20px;box-shadow:var(--shadow-lg)}
.admin-page .boot-offline[hidden]{display:none}
.admin-page .boot-offline h1{font-family:'Inter',sans-serif;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.admin-page .boot-offline p{margin:8px 0 18px;color:var(--ink-soft);font-size:13.5px;line-height:1.5}
.admin-page .boot-offline .actions{display:flex;gap:8px;justify-content:center}
.admin-page .boot-offline .actions .btn{flex:1;height:44px}
@media (prefers-reduced-motion: no-preference){
  .admin-page .boot:not(.is-offline) .login-mark{animation:boot-breathe 1.2s ease-in-out infinite alternate}
}
@keyframes boot-breathe{from{transform:scale(1)}to{transform:scale(1.06)}}

/* ---------- top notices (offline banner, update bar) ----------
   Fixed above everything but dialogs' toasts; while one shows, the header and pages move down by its
   height so nothing is covered. The offline banner wins over the update bar. */
.admin-page .top-notice{position:fixed;top:0;left:0;right:0;z-index:var(--notice-z);display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--notice-min-h);padding:calc(6px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 6px max(14px, env(safe-area-inset-left, 0px));
  font-size:13px;font-weight:600;line-height:1.35;text-align:center;border-bottom:1px solid var(--line)}
.admin-page .top-notice[hidden]{display:none}
.admin-page .net-banner{background:var(--warn-soft);color:var(--warn);border-bottom-color:var(--warn-line)}
.admin-page .net-banner.is-online{background:var(--ok-soft);color:var(--ok);border-bottom-color:var(--ok-line)}
.admin-page .net-banner::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:currentColor}
.admin-page .update-bar{background:var(--paper);color:var(--ink);box-shadow:var(--shadow)}
.admin-page .update-bar .btn.sm{height:32px}
.admin-page .update-bar .icon-btn{width:32px;height:32px}
.admin-page #netBanner:not([hidden]) ~ #updateBar{display:none}
body.has-top-notice .abar{top:var(--notice-h)}
body.has-top-notice :is(.admin,.login-wrap,.boot){padding-top:var(--notice-h)}
/* Notices sit above dialogs: a dialog taller than the screen starts below the notice, never under it. */
body.has-top-notice.admin-page .modal-bg{padding-top:calc(var(--notice-h) + 10px)}

/* ---------- install buttons & «remember me» ---------- */
.admin-page .install-btn[hidden]{display:none}
.admin-page .login-card .install-btn{margin-top:10px}
.admin-page .login-card .check.remember{justify-content:flex-start;min-height:44px;margin:2px 0 4px;color:var(--ink-soft);font-weight:500;cursor:pointer}
.admin-page .login-card .check.remember input{width:18px;height:18px}

/* iOS «add to home screen» steps */
.admin-page .install-steps{margin:6px 0 4px;padding-left:22px;color:var(--ink);font-size:14px;line-height:1.55}
.admin-page .install-steps li{margin:6px 0}

@media(max-width:640px){
  /* The install button takes the place of the account pill so the bar never overflows at 360px. */
  .admin-page .abar.can-install #whoami{display:none}
  .admin-page .abar .install-btn span{display:none}
  .admin-page .update-bar{justify-content:space-between;text-align:left}
}