/* assets/login-popup.css — the hidden admin sign-in: a glassy cream + sage card, as a popup over the homepage starfield and as the /admin/ page.
   Self-hosted JetBrains Mono (declared by the page), nothing loaded from elsewhere. Inputs are 16 px so iOS does not zoom. */
#orb { touch-action: manipulation; }   /* three quick taps on the orb must not be read as a double-tap zoom */

.sl { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; color: #3d3a35; font: 16px/1.45 "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, monospace; }
dialog.sl { width: min(380px, calc(100vw - 24px)); margin: auto; }   /* the homepage resets every margin, which would pin the dialog top-left */
dialog.sl::backdrop { background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { dialog.sl::backdrop { background: rgba(0, 0, 0, .8); } }

.sl-card { position: relative; box-sizing: border-box; padding: 30px 26px 24px; border-radius: 14px; color: #3d3a35;
  font: 16px/1.45 "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, monospace;
  background: rgba(238, 241, 230, .97); border: 1px solid rgba(63, 107, 85, .2); box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.sl-title { margin: 0 0 20px; padding-right: 40px; font-size: 1.25rem; font-weight: 500; letter-spacing: .06em; color: #3d3a35; }
.sl-form { display: grid; gap: 14px; margin: 0; }
.sl-field { display: grid; gap: 6px; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #56635a; }
.sl-field input { box-sizing: border-box; width: 100%; min-height: 46px; padding: 10px 14px; font: inherit; font-size: 16px; letter-spacing: normal; text-transform: none;
  color: #3d3a35; background: #e0eadd; border: 1.5px solid #56635a; border-radius: 8px; }
.sl-field input:focus-visible, .sl-submit:focus-visible, .sl-close:focus-visible, .sl-back a:focus-visible { outline: 3px solid #3f6b53; outline-offset: 2px; }
.sl-error { margin: 0; padding: 8px 12px; border-left: 4px solid #b4544c; border-radius: 6px; background: #f6e8e5; color: #7a2f29; font-size: .85rem; }
.sl-error[hidden] { display: none; }
.sl-submit { min-height: 46px; padding: 10px 16px; font: inherit; font-size: .9rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  border: 0; border-radius: 8px; background: #4a7660; color: #fff; }
.sl-submit:hover { background: #3f6b53; }
.sl-submit:disabled { opacity: .7; cursor: progress; }
.sl-close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: #3d3a35; font-size: 26px; line-height: 1; cursor: pointer; }
.sl-close:hover { background: #e0eadd; }
.sl-back { margin: 18px 0 0; text-align: center; font-size: .8rem; letter-spacing: .08em; }
.sl-back a { color: #56635a; text-decoration: none; }
.sl-back a:hover { color: #3d3a35; }
dialog.sl[open] .sl-card { animation: sl-in .18s ease-out; }
@keyframes sl-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.sl[open] .sl-card { animation: none; } }

/* The /admin/ page: the same card on the cream the admin area has always used */
body.sl-page { margin: 0; min-height: 100vh; box-sizing: border-box; display: grid; place-items: center; padding: 16px; background: #d3e0d0; color: #3d3a35;
  font-family: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, monospace; }
body.sl-page main { width: min(380px, 100%); }
body.sl-page .sl-card { background: #e6efe3; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }