/* Read FRONTEND.md before changing this file (shared front-end component rules).
   It records why every rule carries a prefix, why the component must supply its
   own base styles, and why :hover cannot be verified with a simulated mouse. */
/* Scoped: every rule is prefixed with .kp-auth-backdrop.
   Reason: a page's own generic rules reach straight into the dialog.
   generate.html has button:hover{color:var(--ink)} at (0,1,1), which beats a
   single-class component selector at (0,1,0) -- on hover the label turned dark
   green on a dark green button and vanished. box.html has
   button{width:100%;min-height:42px}, which changed the dialog height too. */

/* Isolation: push page styles out first, then let the component rules below
   define everything again.
   One shared component is not the same as a protected one. A page's own
   input{} / button{} / font rules reach inside: the same dialog measured 64px
   inputs in generate and 80px in box, 46px different in total height, with a
   different typeface as well.
   Do not use all:revert to do this -- it also reverts the page box-sizing and
   the layout collapses. */
.kp-auth-backdrop *{box-sizing:border-box}
/* !important is required: the hidden attribute only amounts to display:none at
   (0,1,1), and the component sets display on .kp-auth-field / .kp-google at
   (0,2,0), which overrides it -- the password field and the Google button could
   not be hidden in the forgot-password view. */
.kp-auth-backdrop [hidden]{display:none!important}
.kp-auth-backdrop input,.kp-auth-backdrop button,.kp-auth-backdrop textarea,.kp-auth-backdrop select{font-family:inherit;margin:0}
.kp-auth-backdrop h1,.kp-auth-backdrop h2,.kp-auth-backdrop h3,.kp-auth-backdrop p,.kp-auth-backdrop label,.kp-auth-backdrop ul,.kp-auth-backdrop li,.kp-auth-backdrop figure{margin:0;padding:0}
/* editor.html has h2{text-transform:uppercase;letter-spacing:.1em} (09-29) */
.kp-auth-backdrop h1,.kp-auth-backdrop h2,.kp-auth-backdrop h3{text-transform:none;letter-spacing:normal}
.kp-auth-backdrop button{padding:0;border:0;background:none}
.kp-auth-lock{overflow:hidden}.kp-auth-backdrop{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:18px;background:rgba(19,31,23,.55);backdrop-filter:blur(5px)}.kp-auth-backdrop[hidden]{display:none}.kp-auth-backdrop .kp-auth-dialog{position:relative;width:min(420px,100%);max-height:calc(100vh - 36px);overflow:auto;padding:30px;border:1px solid rgba(27,42,33,.16);border-radius:18px;background:#F7F7F1;color:#1B2A21;box-shadow:0 28px 90px rgba(10,24,15,.3);font:13px/1.6 "Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.kp-auth-backdrop .kp-auth-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:#5C6B60;font-size:22px;line-height:1;cursor:pointer}.kp-auth-backdrop .kp-auth-close:hover{background:#E9ECE4}.kp-auth-backdrop .kp-auth-dialog h2{margin:0 36px 5px 0;color:#2E4A38;font-size:25px;letter-spacing:-.035em}.kp-auth-backdrop .kp-auth-intro{margin:0 0 20px;color:#5C6B60;font-size:12px}.kp-auth-backdrop .kp-google{width:100%;height:44px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid #B7C1B7;border-radius:9px;background:#fff;color:#26352B;font-weight:650;font-size:12px;font-family:inherit;cursor:pointer}.kp-auth-backdrop .kp-google:hover{background:#F1F3EE}.kp-auth-backdrop .kp-google svg{width:17px;height:17px}.kp-auth-backdrop .kp-auth-or{display:flex;align-items:center;gap:12px;margin:17px 0;color:#879188;font-size:10px}.kp-auth-backdrop .kp-auth-or:before,.kp-auth-backdrop .kp-auth-or:after{content:"";height:1px;flex:1;background:rgba(27,42,33,.13)}.kp-auth-backdrop .kp-auth-field{display:grid;gap:5px;margin:12px 0}.kp-auth-backdrop .kp-auth-field label{color:#435548;font-size:10px;font-weight:650}.kp-auth-backdrop .kp-auth-field input{width:100%;height:43px;padding:0 12px;border:1px solid #BAC5BA;border-radius:8px;background:#fff;color:#1B2A21;font-size:13px;font-family:inherit;outline:none}.kp-auth-backdrop .kp-auth-field input:focus{border-color:#5A7E63;box-shadow:0 0 0 3px rgba(72,113,82,.12)}.kp-auth-backdrop .kp-auth-submit{width:100%;height:43px;margin-top:7px;border:1px solid #2E4A38;border-radius:8px;background:#2E4A38;color:#fff;font-weight:700;font-size:12px;font-family:inherit;cursor:pointer}.kp-auth-backdrop .kp-auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:16px}.kp-auth-backdrop .kp-auth-links button{padding:0;border:0;background:none;color:#42644D;font-size:11px;font-family:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.kp-auth-backdrop .kp-auth-terms{display:flex;align-items:flex-start;gap:8px;margin:13px 0;color:#5C6B60;font-size:10px;text-wrap:balance}.kp-auth-backdrop .kp-auth-terms input{margin:3px 0 0;accent-color:#2E4A38}.kp-auth-backdrop .kp-auth-terms a{color:inherit}.kp-auth-backdrop .kp-auth-status{min-height:18px;margin:10px 0 0;color:#B33A26;font-size:10px}.kp-auth-backdrop .kp-auth-consent{margin:12px 0 0;color:#78847B;font-size:9px;text-align:center}.kp-auth-backdrop .kp-auth-consent a{color:inherit}@media(max-width:520px){.kp-auth-backdrop .kp-auth-dialog{padding:26px 20px}}

/* Hover states must be defined by the component, at a high enough weight.
   The page rule button:hover:not(:disabled){border-color:var(--pine);
   color:var(--pine)} is (0,2,1) -- one element with two pseudo-classes --
   which beats the component at (0,2,0), and the button label disappeared. */
.kp-auth-backdrop .kp-auth-dialog .kp-auth-submit:hover:not(:disabled){background:#24402F;border-color:#24402F;color:#fff}
.kp-auth-backdrop .kp-auth-dialog .kp-auth-submit:disabled{opacity:.6;cursor:default}
.kp-auth-backdrop .kp-auth-dialog .kp-google:hover{background:#F2F4EE;border-color:#A7B5A8;color:#26352B}
.kp-auth-backdrop .kp-auth-dialog .kp-auth-links button:hover{color:#2E4A38;background:none;border:0;text-decoration:underline}
.kp-auth-backdrop .kp-auth-dialog .kp-auth-close:hover{background:#E9ECE4;color:#1B2A21;border:0}
.kp-auth-backdrop .kp-auth-dialog .kp-auth-field input:hover{border-color:#8FA593}
/* Email typo hint. The button reads as a link inside the sentence. */
.kp-auth-backdrop .kp-auth-suggest{margin:2px 0 0;color:#5C6B60;font-size:11px;line-height:1.5}
.kp-auth-backdrop .kp-auth-suggest[hidden]{display:none}
.kp-auth-backdrop .kp-auth-suggest button{padding:0;border:0;background:none;color:#2E4A38;font:inherit;font-weight:650;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kp-auth-backdrop .kp-auth-dialog .kp-auth-suggest button:hover{color:#24402F;background:none;border:0;text-decoration:underline}

/* Inline mode (used by login.html): same DOM, without the backdrop and the
   close button.
   These rules must keep the .kp-auth-backdrop prefix or page styles win again. */
.kp-auth-backdrop.kp-auth-inline{position:static;inset:auto;z-index:auto;padding:0;background:none;backdrop-filter:none;display:block}
/* This width must be fixed; width:100% does not work here. The .authMain in
   login.html is display:grid + place-items:center, so children shrink to fit
   their content -- 100% would resolve against the content width, making the
   narrow sign-in view and the wider register view different sizes. */
.kp-auth-backdrop.kp-auth-inline .kp-auth-dialog{width:420px;max-width:100%;margin:0 auto;max-height:none;overflow:visible;box-shadow:0 10px 36px rgba(10,24,15,.10)}
.kp-auth-backdrop.kp-auth-inline .kp-auth-close{display:none}
.kp-auth-backdrop .kp-auth-links{margin-top:6px}.kp-auth-backdrop .kp-auth-links span{flex:1;text-align:center;color:#5C6B60;font-size:11px}.kp-auth-backdrop .kerfTermsNote a{color:inherit}