/* Login popup (L4 Office Drawer), opened from the landing page. Front-end only.
   Nothing typed here is sent or stored (see js/login.js). */
/* Google Sans 500 (OFL) is declared in css/fonts.css with the other fonts. */

dialog.lg{border:0;padding:0;margin:auto;background:transparent;color:inherit;overflow:visible;max-width:none;max-height:none;user-select:text;
  --err:#e8403a;--field-ink:#123b3a;--field-line:#2c3140}
dialog.lg::backdrop{background:rgba(16,33,43,.45)}
.lg-box{position:relative;overflow:auto;overscroll-behavior:contain;max-height:calc(100dvh - 48px)}
.lg [hidden]{display:none!important}
.lg h2{margin:0}
.lg p{margin:0}
/* headings that take focus on a view change (tabindex=-1) need no ring */
.lg [tabindex="-1"]:focus{outline:none}

/* close X: 44px target */
.lg-x{position:absolute;right:6px;top:6px;z-index:2;width:44px;height:44px;padding:0;border:0;background:none;color:inherit;
  font:700 20px/1 Silkscreen,monospace;cursor:pointer}

/* fields */
.lg-form{display:grid;gap:16px}
.lg-field{display:grid;gap:6px}
.lg-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.lg-label{font:700 15px/1.3 Nunito,system-ui,sans-serif}
.lg-input{width:100%;height:48px;margin:0;padding:0 14px;border:0;border-radius:0;background:#fff;color:var(--field-ink);
  font:700 17px/1 Nunito,system-ui,sans-serif;box-shadow:inset 0 0 0 3px var(--field-line),inset 0 6px 0 0 #e6e9ee}
.lg-input::placeholder{color:#6b7280;opacity:1}
.lg-input[aria-invalid="true"]{box-shadow:inset 0 0 0 3px var(--err),inset 0 6px 0 0 #fde3e2}
html .lg .lg-input{cursor:text!important}
.lg-pw{position:relative}
.lg-pw .lg-input{padding-right:76px}
.lg-eye{position:absolute;right:3px;top:3px;height:42px;min-width:68px;padding:0 10px;border:0;background:#eef2f6;color:var(--field-ink);
  font:700 13px/1 Silkscreen,monospace;cursor:pointer;box-shadow:inset 3px 0 0 0 #d3dbe4}
.lg-eye:hover{background:#e2e8ef}
.lg-err{display:flex;gap:6px;align-items:center;font:700 14px/1.35 Nunito,system-ui,sans-serif;color:var(--err)}
.lg-err::before{content:'!';content:'!' / '';flex:none;display:inline-grid;place-items:center;width:18px;height:18px;background:var(--err);color:#fff;font:700 12px/1 Silkscreen,monospace}
.lg-err:empty{display:none}
.lg-link{padding:0;border:0;background:none;color:inherit;font:700 14px/1.3 Nunito,system-ui,sans-serif;text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.lg-copy{font:700 15px/1.45 Nunito,system-ui,sans-serif}
.lg-copy strong{overflow-wrap:anywhere}

/* "or" divider */
.lg-or{display:flex;align-items:center;gap:12px;font:700 14px/1 Nunito,system-ui,sans-serif;white-space:nowrap}
.lg-or::before,.lg-or::after{content:'';flex:1;height:3px;background:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 12px);opacity:.45}

/* demo note under the success views */
.lg-demo{font:700 13px/1.4 Nunito,system-ui,sans-serif;opacity:.8}

/* Peter in the success view */
.lg-peter{display:block;width:108px;height:87px;margin:0 auto}

/* short screens (a small laptop window, a phone in landscape, an iPhone SE):
   drop the optional welcome line and tighten the fields so the sign-up button stays in view */
@media (max-height:720px){
  .lg .lg-sub.opt{display:none}
  .lg-form{gap:12px}
  .lg-input{height:44px}
  .lg-eye{height:38px}
}

/* ---------- third-party sign-in buttons ----------
   Each follows its provider's published rules at one shared 40px height (Google's standard size):
   Google    https://developers.google.com/identity/branding-guidelines
             light: #FFFFFF fill, #747775 1px inside stroke, #1F1F1F text; dark: #131314 / #8E918F / #E3E3E3;
             Google Sans Medium 14/20; 12px left of the G, 10px right of it; the G unaltered from Google's bundle.
   Microsoft https://learn.microsoft.com/en-us/entra/identity-platform/howto-add-branding-in-apps
             light: #FFFFFF, 1px #8C8C8C border, #5E5E5E text; dark: #2F2F2F, #FFFFFF text;
             Segoe UI 600 15px; 12px around the unaltered logo; redline height 41px (40px here).
   Apple     https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple
             white-with-outline on light backgrounds, white on dark; logo file from Apple Design Resources,
             file height = button height; title 43% of the button height (17px at 40px), system font.
   All three share one size and similar weight, so none is more prominent than another
   (Google: "at least as prominently"; Apple: "no smaller than other sign-in buttons"). */
.pv-list{display:grid;gap:10px}
.pv{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:40px;margin:0;padding:0 44px;border:0;border-radius:4px;
  text-decoration:none;white-space:nowrap;cursor:pointer;overflow:hidden}
.pv::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.pv img{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}
.pv:hover{filter:brightness(.96)}
.pv:active{filter:brightness(.92)}

.pv-google{background:#fff;color:#1f1f1f;font:500 14px/20px 'Google Sans',Roboto,Arial,sans-serif;letter-spacing:.25px}
.pv-google::after{box-shadow:inset 0 0 0 1px #747775}
.pv-google img{left:12px;width:20px;height:20px}
.pv-google.dark{background:#131314;color:#e3e3e3}
.pv-google.dark::after{box-shadow:inset 0 0 0 1px #8e918f}
.pv-google.dark:hover{filter:brightness(1.15)}

.pv-microsoft{background:#fff;color:#5e5e5e;font:600 15px/1 'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,sans-serif}
.pv-microsoft::after{box-shadow:inset 0 0 0 1px #8c8c8c}
.pv-microsoft img{left:11.5px;width:21px;height:21px}
.pv-microsoft.dark{background:#2f2f2f;color:#fff}
.pv-microsoft.dark::after{box-shadow:none}
.pv-microsoft.dark:hover{filter:brightness(1.2)}

.pv-apple{background:#fff;color:#000;font:500 17px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,'Helvetica Neue',Arial,sans-serif}
.pv-apple::after{box-shadow:inset 0 0 0 1px #000}
.pv-apple img{left:8px;width:28.2px;height:40px}
.pv-apple.on-dark::after{box-shadow:none}

/* The pixel tray: the buttons stay exactly as the providers
   require; only the panel around them is Oinkbound. Same look as .sso.tray in css/auth.css. */
.pv-list.tray{margin:4px;padding:16px;background:#fbf6ea;
  box-shadow:0 -4px 0 0 var(--teal-dark),0 4px 0 0 var(--teal-dark),-4px 0 0 0 var(--teal-dark),4px 0 0 0 var(--teal-dark),6px 8px 0 0 rgba(8,60,54,.18)}
@media (max-width:440px){.pv-list.tray{padding:12px}}
@media (max-height:720px){.pv-list.tray{padding:12px}}

/* ---------- L4 Office Drawer (the approved login popup) ---------- */
/* L4 Office Drawer: a panel slides in from the right on desktop (the office stays in view)
   and rises from the bottom on phones. Email and password first, Google / Microsoft / Apple
   below, and the sign-up button on the panel's own floor strip. */
dialog.l4{position:fixed;inset:0 0 0 auto;margin:0;width:440px;max-width:100vw;height:100dvh;color:var(--ink)}
dialog.l4::backdrop{background:rgba(16,33,43,.3)}
.l4 .lg-box{display:flex;flex-direction:column;height:100%;max-height:none;overflow:hidden;background:#fbf4e4;box-shadow:-6px 0 0 0 var(--teal-dark)}
.l4 section[data-view]{display:flex;flex-direction:column;flex:1;min-height:0}
.l4 .head{flex:none;display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 64px 12px 28px;background:var(--teal);box-shadow:inset 0 -6px 0 0 var(--teal-dark)}
.l4 .lg-title{font:700 24px/1.1 Silkscreen,monospace;color:var(--coin)}
.l4 .lg-x{top:14px;right:12px;color:#fff}
.l4 .lg-x:hover{color:var(--coin)}
.l4 .body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:24px 28px 28px}
.l4 .lg-sub{margin:0 0 20px;font:700 16px/1.45 Nunito,system-ui,sans-serif;color:#3d4b4a}
.l4 .lg-sub strong{color:var(--ink);overflow-wrap:anywhere}
.l4 .lg-label{color:var(--ink)}
.l4 .lg-link{color:var(--teal)}
.l4 .lg-link:hover{color:#c9347d}
.l4 .go{margin-top:6px;height:52px;width:100%;border:0;background:var(--teal);color:var(--coin);font:700 20px/1 Silkscreen,monospace;cursor:pointer;
  box-shadow:0 -4px 0 0 var(--teal-dark),0 4px 0 0 var(--teal-dark),-4px 0 0 0 var(--teal-dark),4px 0 0 0 var(--teal-dark),0 9px 0 0 var(--teal-dark)}
.l4 .go:hover{background:var(--teal-2)}
.l4 .go:active{transform:translateY(3px)}
.l4 .under{margin-top:-6px;text-align:right}
.l4 .lg-or{margin:26px 0 16px;color:#5b6b69}
/* the floor strip: wainscot green, like the office wall */
.l4 .floor{flex:none;padding:18px 28px calc(20px + env(safe-area-inset-bottom));background:#6fa38e;box-shadow:inset 0 6px 0 0 #d9c29a,inset 0 8px 0 0 #5b8c78}
.l4 .floor p{margin:0 0 10px;font:700 15px/1.3 Nunito,system-ui,sans-serif;color:#083c36}
.l4 .signup{display:block;padding:14px 16px;text-align:center;text-decoration:none;background:var(--pink);color:#fff;
  font:700 17px/1.35 Nunito,system-ui,sans-serif;text-shadow:1px 1px 0 var(--plum);
  box-shadow:0 -4px 0 0 var(--plum),0 4px 0 0 var(--plum),-4px 0 0 0 var(--plum),4px 0 0 0 var(--plum),0 9px 0 0 #c9347d,0 13px 0 0 var(--plum)}
.l4 .signup strong{white-space:nowrap}
.l4 .signup:hover{filter:brightness(1.08)}
.l4 .signup-wrap{padding-bottom:13px}
.l4 .lg-copy{color:#3d4b4a}
.l4 .lg-demo{color:#5b6b69;margin-top:12px}
.l4 .lg-back{margin-top:18px}
.l4 .lg-tip{margin-top:16px;padding:10px 12px;background:#f1e3c6;font:700 14px/1.4 Nunito,system-ui,sans-serif;box-shadow:inset 3px 0 0 var(--teal)}
.l4 .grip{display:none}
/* after a provider click: the two places the real site sends someone */
.l4 .paths{display:grid;gap:16px;margin:0 4px 18px}
.l4 .path{position:relative;display:grid;gap:3px;width:100%;margin:0;padding:12px 44px 12px 16px;border:0;background:#fff;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;
  font:700 15px/1.35 Nunito,system-ui,sans-serif;box-shadow:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark),0 7px 0 0 var(--teal-dark)}
.l4 .path b{font:700 17px/1.3 Nunito,system-ui,sans-serif;color:var(--teal)}
.l4 .path span{color:#3d4b4a}
.l4 .path::after{content:'';position:absolute;right:16px;top:50%;width:12px;height:16px;translate:0 -50%;background:var(--teal);clip-path:polygon(0 0,100% 50%,0 100%)}
.l4 .path:hover{background:#fffbe6}
.l4 .path:active{transform:translateY(3px)}
/* second login step: the emailed 6-digit code */
.l4 .lg-code{font-size:24px;letter-spacing:.3em;font-variant-numeric:tabular-nums}
.l4 .lg-resend{margin-top:18px}
.l4 .lg-resent{margin-top:6px}
.l4 .lg-resent:empty{display:none}
/* Pixel labels (the approved lettering, "type-labels" on <html>): field labels, links and short lines in Pixelify Sans;
   sentences, tips, errors and typed text stay in Nunito. The provider buttons keep the lettering each provider requires. */
.type-labels .l4 :is(.lg-label,.lg-link,.lg-or,.lg-sub.opt,.path b,.signup){font-family:'Pixelify Sans',monospace}
.type-labels .l4 :is(.lg-label,.lg-link){font-weight:600;font-size:15px}
.type-labels .l4 .lg-sub.opt{font-weight:600}
.type-labels .l4 .lg-or{font-weight:500}
.type-labels .l4 .signup{font-weight:600}
.type-labels .l4 .signup strong{font-weight:700}
.type-labels .l4 *{font-variant-ligatures:none}
@keyframes l4-in{from{translate:100% 0}}
@keyframes l4-up{from{translate:0 100%}}
dialog.l4[open]{animation:l4-in .28s steps(7)}
/* phones: a bottom sheet */
.is-phone dialog.l4{inset:auto 0 0 0;width:100vw;height:auto;max-height:92dvh}
.is-phone dialog.l4[open]{animation-name:l4-up}
.is-phone .l4 .lg-box{height:auto;max-height:92dvh;box-shadow:0 -6px 0 0 var(--teal-dark)}
.is-phone .l4 .head{position:relative;min-height:62px;padding:20px 60px 14px 18px}
.is-phone .l4 .grip{display:block;position:absolute;left:50%;top:6px;translate:-50% 0;width:44px;height:6px;background:rgba(255,255,255,.55)}
.is-phone .l4 .lg-title{font-size:22px}
.is-phone .l4 .lg-x{top:12px;right:8px}
.is-phone .l4 .body{padding:18px 18px 22px}
.is-phone .l4 .lg-sub{margin-bottom:12px}
.is-phone .l4 .lg-or{margin-bottom:14px}
.is-phone .l4 .floor{padding:16px 18px calc(18px + env(safe-area-inset-bottom))}
/* no slide with reduced motion or the site's pause toggle (pixel.js sets html.motion-off for both) */
.motion-off dialog.l4[open]{animation:none}
@media (max-height:720px){.l4 .head{min-height:58px}.l4 .body{padding-top:18px;padding-bottom:18px}.l4 .lg-or{margin:16px 0 12px}.l4 .floor{padding-top:14px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}.is-phone .l4 .lg-or{margin:12px 0 10px}.is-phone .l4 .pv-list{gap:8px}.is-phone .l4 .body{padding:12px 18px 14px}.l4 .go{height:48px}
  .is-phone .l4 .head{min-height:52px;padding-top:16px;padding-bottom:10px}
  /* the pixel tray, tighter, so all three providers still show without scrolling */
  .l4 .pv-list.tray{padding:8px;gap:8px}.l4 .lg-or:has(+ .tray){margin-bottom:10px}}

/* In the phone app (js/app-mode.js) Log in is a whole screen, not a drawer over the landing page. */
.l4 a.go{display:flex;align-items:center;justify-content:center;text-decoration:none}
.in-app dialog.l4{inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:none}
.in-app dialog.l4[open]{animation:none}
.in-app .l4 .lg-box{height:100%;max-height:none;box-shadow:none}
.in-app .l4 .grip{display:none}
.in-app .l4 .head{min-height:72px;padding:12px 64px 12px 18px}