/* Jetsy — sign-in, in the app's console language (board.css .lx-*): the
   navy panel lit from above, a cut corner on the diagonal, thin orange
   corner brackets, mono caps in peach. Every colour is the logo pack's —
   nothing new is invented here.

   Shared by login.php, forgot.php, set-password.php AND signup.php (not in
   this round's folder): signup.php is styled through the classes it shares
   with login.php — body.authpage, .authbox, h1, .sub, label, input, button,
   .msg, .hint, .foot, .stay — and nothing in here is scoped to one page. */
:root{
  --void:#05090F;--deep:#0A1622;--panel:#0B1420;--panel2:#101D2C;--panel3:#142435;
  --line:#1C3047;--line2:#132335;
  --or:#FF6A1A;--or-lt:#FFB259;--or-dk:#D9480F;--blue:#4FA8FF;
  --ink:#E9F2FB;--ink2:#B4C8DC;--muted:#7B94AC;
  --ok:#3ED598;--warn:#FFC24D;--hot:#FF6B5E;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* the console devices, named as app.css names them */
  --console:linear-gradient(180deg,#15273A 0%,#0C1826 100%);   /* lit from above */
  --cut:3px 14px 3px 14px;      /* the chamfer — a cut corner on the diagonal */
  --cut-sm:2px 8px 2px 8px;     /* buttons, chips, inputs */
  --bracket:rgba(255,106,26,.5);
  --bloom-sm:0 0 10px rgba(255,106,26,.4);
  --hair:inset 0 0 0 1px var(--line);
}
*{box-sizing:border-box}
html{overflow-x:hidden}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* The page is a grid of two rows — the lockup block, then the box — packed
   together in the middle of the screen. (signup.php has only the box; one
   row centres the same way.) */
body.authpage{margin:0;min-height:100vh;display:grid;grid-auto-rows:max-content;
  align-content:center;justify-items:center;
  padding:max(1.2rem,env(safe-area-inset-top)) 1.2rem max(1.2rem,env(safe-area-inset-bottom));
  background:
    radial-gradient(46rem 26rem at 78% -8%,rgba(255,106,26,.16),transparent 62%),
    radial-gradient(40rem 24rem at 12% 8%,rgba(18,58,99,.7),transparent 66%),
    var(--void);
  color:var(--ink);font-family:Poppins,ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
a{color:var(--or-lt)}

/* ---------- above the box: the lockup, the chip, the line ---------- */
.authhd{width:min(100%,25rem);display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:.7rem;margin:0 0 1.15rem}
.authhd .lockup{display:block;width:13rem;max-width:72%}
.authhd .lockup img{display:block;width:100%;height:auto}
/* the badge device: navy type on orange, the small chamfer, a small bloom */
.authhd .chip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.58rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1;
  color:var(--deep);background:var(--or);border-radius:var(--cut-sm);padding:.38rem .6rem .34rem;
  box-shadow:var(--bloom-sm)}
/* the kicker voice — mono caps, peach — a size up because it is a sentence */
.authhd .tag{margin:0;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--or-lt);line-height:1.5;max-width:22rem}

/* ---------- the box: a console tile, full size ---------- */
.authbox{width:min(100%,25rem);position:relative;
  background:var(--console);
  box-shadow:var(--hair),0 30px 80px -40px #000;
  border-radius:var(--cut);
  padding:1.8rem 1.4rem 1.5rem}
/* corner brackets on the sharp corners: top-left and bottom-right */
.authbox::before,.authbox::after{content:"";position:absolute;width:9px;height:9px;
  border:1px solid var(--bracket);pointer-events:none}
.authbox::before{top:5px;left:5px;border-right:0;border-bottom:0}
.authbox::after{bottom:5px;right:5px;border-left:0;border-top:0}
/* login.php's old 64px head inside the box: out of sight — the lockup above
   the box is the mark now, and two heads is one too many. The fit round
   (26 Sep 2026) took it out of login.php's markup too; this rule stays for
   a phone still showing an older login.php. */
.authbox .mark{display:none}
.authbox .mark img{display:block;width:100%;height:auto}
.authbox h1{margin:0;font-size:1.7rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.authbox .sub{margin:.35rem 0 1.3rem;color:var(--muted);font-size:.9rem}
.authbox form{display:flex;flex-direction:column;gap:.85rem}
/* forgot.php and set-password.php have no .sub line: give the form, or a
   message, the room under the heading that login.php's .sub provides */
.authbox h1+form,.authbox .hint+form{margin-top:1rem}
.authbox h1+.msg{margin-top:.8rem}
.authbox label{display:flex;flex-direction:column;gap:.32rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
/* inputs: navy insets with the small chamfer and an orange focus ring —
   the same box the app's forms use. 16px so iOS does not zoom the page. */
.authbox input,.authbox select,.authbox textarea{font:inherit;font-family:Poppins,ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:1rem;text-transform:none;letter-spacing:0;color:var(--ink);
  background:var(--deep);border:0;box-shadow:var(--hair);
  padding:.72rem .8rem;border-radius:var(--cut-sm);width:100%;color-scheme:dark}
/* the 44px touch height is for boxes he types in — not a checkbox or radio
   (signup.php may have ones that are not .stay) */
.authbox input:not([type=checkbox]):not([type=radio]),.authbox select,.authbox textarea{min-height:44px}
.authbox textarea{resize:vertical}
.authbox input::placeholder,.authbox textarea::placeholder{color:var(--muted);opacity:1}
.authbox input:focus,.authbox select:focus,.authbox textarea:focus{outline:0;box-shadow:inset 0 0 0 1px var(--or),0 0 0 3px rgba(255,106,26,.18)}
/* the primary button: solid orange, navy type, the small chamfer, a little bloom */
.authbox button{margin-top:.3rem;border:0;cursor:pointer;background:var(--or);color:var(--deep);
  font-weight:600;font-size:.95rem;padding:.8rem 1rem;min-height:44px;
  border-radius:var(--cut-sm);box-shadow:var(--bloom-sm);
  transition:filter .15s}
.authbox button:hover{filter:brightness(1.08)}
.authbox button:active{filter:brightness(.94)}
.authbox button:focus-visible{outline:2px solid var(--or-lt);outline-offset:3px}
/* messages: status colours for status — the error in --hot, the good news in --ok */
.msg{margin:0 0 1rem;padding:.65rem .8rem;border-radius:var(--cut-sm);font-size:.86rem;line-height:1.45}
.msg.bad{background:rgba(255,107,94,.09);box-shadow:inset 0 0 0 1px rgba(255,107,94,.34);
  color:var(--hot)}
.msg.ok{background:rgba(62,213,152,.09);box-shadow:inset 0 0 0 1px rgba(62,213,152,.32);
  color:var(--ok)}
.hint{margin:1rem 0 0;font-size:.78rem;color:var(--muted);line-height:1.55}
.hint strong{color:var(--or-lt)}
.foot{margin:1.1rem 0 0;padding-top:.9rem;border-top:1px solid var(--line2);
  font-size:.78rem;color:var(--muted)}
.foot a,.hint a,.authbox a{color:var(--or-lt)}

/* "keep me signed in" — a checkbox beside its label, not stacked like the
   text fields above it */
/* "keep me signed in" — a checkbox beside its label, not stacked like the
   text fields above it. Written as .authbox .stay so it outranks the
   .authbox label rule (which is what stacked it before): a row, in Poppins,
   sentence case — this is a sentence he reads, not a field name. */
.stay,.authbox label.stay{display:flex;flex-direction:row;align-items:center;gap:.6rem;margin:.2rem 0 .1rem;
  font-family:Poppins,ui-sans-serif,system-ui,-apple-system,sans-serif;font-size:.85rem;
  letter-spacing:0;text-transform:none;color:var(--ink2);cursor:pointer;min-height:44px}
.stay input,.authbox .stay input{width:20px;height:20px;min-height:0;flex:none;accent-color:var(--or);margin:0;
  padding:0;border-radius:3px;box-shadow:none;background:none}
.stay span{line-height:1.3}

/* ===== fit round · 26 Sep 2026 · every screen fits the phone — appended at integration (agent 9) ===== */

/* ----- fit round · 00-v1 · Leticia's first fixes, the status-bar mechanics rewritten by 01-shell ----- */
/* ---------- belt and braces ----------
   Joe, 26 Sep 2026: the first sign-in after the look round showed the old
   auth.css (cached by the phone) under the new login.php: a full-width
   lockup, the box past the screen edge. login.php now versions the link,
   and these keep the page inside the screen even if a stylesheet is ever
   stale again. */
.authbox{max-width:100%;box-sizing:border-box}
.authbox *,.authhd *{max-width:100%;box-sizing:border-box}
.authhd .lockup{width:13rem;max-width:72%}
.authhd .lockup img{width:100%;height:auto}
.authbox .mark{display:none!important}

/* ----- fit round · 08-signin · the sign-in pages on the phone ----- */
/* ---------- 08-signin: the sign-in pages on the phone (fit round) ----------
   login.php, forgot.php, set-password.php. Joe signs out INSIDE the
   home-screen app, so these pages sit under the same see-through status bar
   as the dashboard. Every rule is scoped to body.authpage / .authbox, which
   only these three pages use. */

/* Sign-in pages, home-screen app: the lockup started exactly at the bottom
   edge of the status bar — flush under "12:48" on a 375 iPhone SE, where the
   page is taller than the screen. Now there is a small gap under the status
   bar. In Safari the inset is 0 and this is the same 1.2rem as before. */
body.authpage{padding-top:max(1.2rem,calc(env(safe-area-inset-top,0px) + .75rem))}

/* Sign-in pages, home-screen app: once the page scrolls (the SE, a red
   message, the keyboard up) the lockup and the heading slid up under the
   clock. A strip the height of the status bar now covers them, painted with
   the page's own glow so that at the top of the page nothing changes: the
   glow is sized to one screen (100vh) on the page and on the strip, so the
   two line up to the pixel. In Safari the strip is 0px tall. */
body.authpage{background-size:100% 100vh;background-repeat:no-repeat}
body.authpage::before{content:"";position:fixed;top:0;left:0;right:0;z-index:5;
  height:env(safe-area-inset-top,0px);pointer-events:none;
  background:
    radial-gradient(46rem 26rem at 78% -8%,rgba(255,106,26,.16),transparent 62%),
    radial-gradient(40rem 24rem at 12% 8%,rgba(18,58,99,.7),transparent 66%),
    var(--void);
  background-size:100% 100vh;background-repeat:no-repeat}

/* Sign-in pages: the orange button's words fell back to the phone's system
   font (a button does not take the page's font unless told to). The
   dashboard's buttons are Poppins; so is this one now. */
.authbox button{font-family:inherit}

/* Sign-in page on a 375 phone: "Back to the / website" broke in the middle
   of the link. A link at the foot of the box now moves down whole. */
.authbox .foot a{white-space:nowrap}

/* Choose a new password, when the two did not match: the red message sat
   glued to the "For Happy Brush Painters · email" line above it. Same gap
   as auth.css gives a message straight under the heading. */
.authbox .hint+.msg{margin-top:.8rem}

/* Forgotten password and "That's set": the last line in the box ("Back to
   sign in", "Go to the sign-in page") is a plain paragraph, and its own
   bottom margin added a 16px empty band above the box's padding. */
.authbox>:last-child{margin-bottom:0}

/* ===== v313 · 6 Oct 2026 · the sign-in pages in the website's look (Joe 1:45pm: "upgrade this page") =====
   The same tokens as getjetsy.com: navy #071A2E, panels #0F2E4D, orange for home services, blue for restaurants,
   sentence-case labels, rounded panels. Applies to login.php, forgot.php, set-password.php and signup.php. */
:root{--bg:#071A2E;--bg2:#0A2540;--pnl:#0F2E4D;--pnl2:#133A60;--ln:#1F4A74;--bl:#4FA8FF;--bl2:#7CC0FF;--or2:#FF8A45}
html{background:#071A2E}
body.authpage{background:radial-gradient(40rem 26rem at 85% -10%,rgba(255,106,26,.2),transparent 62%),radial-gradient(40rem 26rem at 0% 0%,rgba(46,109,168,.35),transparent 66%),var(--bg);background-size:100% 100vh;background-repeat:no-repeat;background-color:var(--bg)}
body.authpage::before{background:var(--bg)}
.authhd{width:min(100%,27rem);align-items:stretch;text-align:left;gap:1rem;margin:0 0 1.1rem}
.ahbar{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.authhd .ahbar .lockup{width:9.5rem;max-width:55%}
.ahback{color:var(--ink2)!important;text-decoration:none;font-size:.88rem;font-weight:600;min-height:44px;display:inline-flex;align-items:center;padding:0 .2rem;white-space:nowrap}
.ahback:hover,.ahback:focus-visible{color:#fff!important}
.ahtwo{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.ahp{display:flex;align-items:center;gap:.45rem;padding:.6rem .7rem;border-radius:12px;font-size:.84rem;font-weight:700;color:var(--ink);background:rgba(255,255,255,.04);line-height:1.25}
.ahp.hs{box-shadow:inset 0 0 0 1.5px rgba(255,106,26,.7)}
.ahp.rs{box-shadow:inset 0 0 0 1.5px rgba(79,168,255,.7)}
.ahp .ic{font-size:1.15rem;line-height:1;flex:0 0 auto}
.authbox{width:min(100%,27rem);background:linear-gradient(180deg,var(--pnl2),var(--pnl));border-radius:22px;box-shadow:inset 0 0 0 1px var(--ln),0 40px 80px -40px rgba(0,0,0,.9);padding:1.7rem 1.35rem 1.4rem}
.authbox::before,.authbox::after{display:none}
.authbox h1{font-size:1.9rem;font-weight:800;letter-spacing:-.03em}
.authbox .sub{color:var(--ink2);font-size:.95rem}
.authbox label{font-family:Poppins,ui-sans-serif,system-ui,-apple-system,sans-serif!important;text-transform:none!important;letter-spacing:0!important;font-size:.88rem!important;font-weight:600;color:var(--ink2)!important}
.authbox input:not([type=checkbox]):not([type=radio]),.authbox select,.authbox textarea{background:rgba(7,26,46,.75);border-radius:12px;min-height:50px;box-shadow:inset 0 0 0 1px var(--ln)}
.authbox button{border-radius:4px 20px 4px 20px;min-height:52px;font-weight:800;font-size:1.02rem;color:#1B0B00;box-shadow:0 12px 30px -12px rgba(255,106,26,.75)}
.authbox a{color:var(--or-lt)}
.hint{font-size:.82rem}
.ahnew{margin:1.3rem 0 0;padding:1rem;border-radius:16px;background:rgba(7,26,46,.55);box-shadow:inset 0 0 0 1px var(--ln)}
.ahnew p{margin:0 0 .7rem;font-weight:700;font-size:.92rem;color:var(--ink)}
.ahnb{display:grid;gap:.5rem}
.authbox .ahnb .nb{display:flex;align-items:center;justify-content:center;text-align:center;min-height:46px;padding:.5rem .8rem;border-radius:12px;font-weight:700;font-size:.92rem;text-decoration:none}
.authbox .ahnb .nb.hs{color:#FFD2B5;box-shadow:inset 0 0 0 1.5px var(--or)}
.authbox .ahnb .nb.rs{color:#04203A;background:var(--bl)}
.authbox .ahnb .nb:focus-visible,.ahback:focus-visible{outline:2px solid #fff;outline-offset:2px}
.foot{font-size:.84rem;line-height:1.9;border-top-color:rgba(31,74,116,.7)}
@media (min-width:560px){.ahnb{grid-template-columns:1fr 1fr}}
html:has(body.authpage){background:#071A2E}