/*
 * Sign-in screens: the admin's sign in, forgot password, choose your password and first time setup, and the client's
 * sign in and choose your password. The markup is app/auth_brand.php. Wide screens: the brand panel on the left, filled
 * with the site's own screenshots, and the page's own form on the right, standing in a browser window like the ones
 * every build is shown in on the home and Work pages. Phones: the panel is a band and the window rises over its edge.
 * Loaded after each page's own styles, so these rules win. The colours are the site's own: the night and gold of the
 * marketing pages (marketing.css) for clients, the admin's forest green for staff, the stone of the day sections for
 * the form side. After changing this file, raise AUTH_BRAND_CSS_V in app/auth_brand.php.
 */
.signin{
  --n0:#0C0C0B;--tx:#F1EEE4;--tx2:#B3AE9C;--tx3:#8A8574;--edge:rgba(234,214,163,.12);
  --acc:#D6B878;--acc2:#F0DDAE;--acc-rgb:214,184,120;--acc-ink:#735D30;
  min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  background:#F1EFE8;color:var(--tx);font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
.signin--client-key{--acc:#F0DDAE;--acc2:#F7E9C6;--acc-rgb:240,221,174}
.signin--admin-in,.signin--admin-key{--acc:#8FAB86;--acc2:#B0C7A6;--acc-rgb:143,171,134;--acc-ink:#33422F;--edge:rgba(176,199,166,.13)}
body:has(.signin){margin:0;background:#F1EFE8}
.signin *,.signin *::before,.signin *::after{box-sizing:border-box}

/* ---------------------------------------------------------------- the brand panel */
.signin-panel{position:sticky;top:0;align-self:start;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:28px;
  height:100vh;height:100dvh;min-height:560px;padding:clamp(28px,3.9vw,56px);background:var(--n0)}
.signin-panel::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.sg-art{position:absolute;inset:0;z-index:-2;pointer-events:none}

.sg-mark{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;min-height:44px;text-decoration:none;
  font:600 1.14rem/1.2 "Fraunces","Iowan Old Style",Georgia,serif;color:var(--tx)}
.sg-mark:hover{color:var(--tx);text-decoration:none}
.sg-mark img{width:30px;height:30px;display:block;flex:none}
.sg-mark em{font-style:normal;color:#D6B878}
.sg-words{margin-top:auto;max-width:38rem}
.sg-eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 20px;font:700 12px/1.4 "Public Sans",-apple-system,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.sg-eyebrow svg{width:13px;height:13px;flex:none}
.sg-tag{margin:0;font:600 clamp(2.5rem,4.1vw,4.1rem)/1.02 "Fraunces","Iowan Old Style",Georgia,serif;letter-spacing:-.028em;
  color:var(--tx);text-wrap:balance}
.sg-tag em{display:block;margin-top:.06em;font-style:italic;font-weight:500;color:var(--acc)}
.sg-tag.sg-long{font-size:clamp(2.3rem,3.5vw,3.5rem)}
.sg-sub{margin:22px 0 0;max-width:30rem;font:400 17px/1.6 "Public Sans",-apple-system,sans-serif;color:var(--tx2)}
.sg-foot{display:flex;justify-content:space-between;gap:16px;padding-top:18px;border-top:1px solid var(--edge);
  font:600 11px/1.4 "Public Sans",-apple-system,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--tx3)}

/* one screenshot in a browser window, the site's own frame (marketing.css .browser) */
.sg-shot{margin:0;border-radius:14px;overflow:hidden;background:#1A1916;border:1px solid rgba(240,221,174,.14);
  box-shadow:0 40px 80px -36px rgba(0,0,0,.85)}
.sg-shot-bar{display:flex;align-items:center;gap:6px;padding:8px 11px;background:#232220}
.sg-shot-bar i{width:9px;height:9px;border-radius:50%;background:#4A4740;flex:none}
.sg-shot-bar u{margin-left:8px;max-width:58%;padding:3px 9px;border-radius:6px;background:#171614;color:#A9A594;text-decoration:none;
  font:500 10px/1.3 "IBM Plex Mono",ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}

/* 1. client sign in: a tilted wall of the live builds, edge to edge, the words on the dark at its foot */
.sg-wall{overflow:hidden}
.sg-wall-in{position:absolute;left:50%;top:44%;width:142%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  transform:translate(-50%,-50%) perspective(2200px) rotateX(26deg) rotateZ(-13deg)}
.sg-col{display:flex;flex-direction:column;gap:22px}
.sg-col:nth-child(1){transform:translateY(6%)}
.sg-col:nth-child(2){transform:translateY(-12%)}
.sg-col:nth-child(3){transform:translateY(-3%)}
.signin--client-in .signin-panel::after{
  background:linear-gradient(180deg,rgba(12,12,11,.82) 0%,rgba(12,12,11,.18) 17%,rgba(12,12,11,0) 32%,rgba(12,12,11,.55) 52%,rgba(12,12,11,.94) 70%,#0C0C0B 100%),
    radial-gradient(60% 40% at 30% 100%,rgba(var(--acc-rgb),.16),transparent 70%)}

/* 2. client password: the client's own pages in one large window rising from the lower corner, its top edge lit */
.signin--client-key .signin-panel{background:radial-gradient(80% 60% at 78% 100%,#2A2114 0%,#14110C 48%,#0B0A08 100%)}
.signin--client-key .sg-words{margin-top:clamp(36px,8vh,96px)}
.signin--client-key .sg-foot{margin-top:auto}
.sg-rise .sg-shot{position:absolute}
.sg-rise .sg-front{width:86%;left:30%;top:50%;transform:rotate(-7deg);transform-origin:0 0;
  border-color:rgba(var(--acc-rgb),.5);
  box-shadow:0 -1px 0 rgba(var(--acc-rgb),.9),0 -24px 90px -18px rgba(var(--acc-rgb),.55),0 0 0 6px rgba(var(--acc-rgb),.06),0 70px 120px -30px #000}
.sg-rise .sg-back{width:52%;left:4%;top:68%;transform:rotate(-12deg);transform-origin:0 0;filter:brightness(.62) saturate(.85)}
.signin--client-key .signin-panel::after{
  background:linear-gradient(0deg,rgba(11,10,8,.97) 0%,rgba(11,10,8,.88) 11%,rgba(11,10,8,.4) 19%,rgba(11,10,8,0) 30%),
    radial-gradient(46% 30% at 70% 52%,rgba(var(--acc-rgb),.2),transparent 70%)}

/* 3. admin sign in: the admin screens fanned out like a hand of cards above the words */
.signin--admin-in .signin-panel{background:radial-gradient(90% 60% at 60% 30%,#16201A 0%,#0D120F 50%,#090B0A 100%)}
.sg-fan .sg-shot{position:absolute;width:56%;transform-origin:50% 120%}
.sg-fan .sg-a{left:2%;top:15%;transform:rotate(-12deg)}
.sg-fan .sg-b{left:24%;top:10%;transform:rotate(-1deg)}
.sg-fan .sg-c{left:46%;top:15%;transform:rotate(10deg)}
.signin--admin-in .signin-panel::after{
  background:linear-gradient(180deg,rgba(9,11,10,.75) 0%,rgba(9,11,10,0) 13%,rgba(9,11,10,0) 42%,rgba(9,11,10,.9) 56%,#090B0A 70%),
    radial-gradient(50% 36% at 56% 40%,rgba(var(--acc-rgb),.22),transparent 72%)}

/* 4. admin password: the same screens, larger, pushed into the top corner of a darker panel */
.signin--admin-key .signin-panel{background:#060807}
.signin--admin-key .sg-fan .sg-shot{width:80%;transform-origin:0 0;filter:brightness(.46) saturate(.8)}
.signin--admin-key .sg-fan .sg-a{left:62%;top:-17%;transform:rotate(-8deg)}
.signin--admin-key .sg-fan .sg-b{left:40%;top:-1%;transform:rotate(-8deg);filter:brightness(.62) saturate(.85)}
.signin--admin-key .sg-fan .sg-c{left:14%;top:17%;transform:rotate(-8deg);filter:brightness(.86) saturate(.9);
  border-color:rgba(var(--acc-rgb),.5);
  box-shadow:0 -1px 0 rgba(var(--acc-rgb),.95),0 -24px 90px -18px rgba(var(--acc-rgb),.5),0 0 0 6px rgba(var(--acc-rgb),.06),0 60px 120px -30px #000}
.signin--admin-key .signin-panel::after{
  background:linear-gradient(180deg,rgba(6,8,7,0) 44%,rgba(6,8,7,.88) 60%,#060807 72%),
    radial-gradient(40% 34% at 100% 0%,rgba(var(--acc-rgb),.26),transparent 72%)}

/* ---------------------------------------------------------------- the form side: stone, and a browser window */
.signin-main{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  min-width:0;padding:clamp(28px,4.6vw,64px) clamp(16px,4vw,56px) 20px;color:#1D1D1B;
  background:radial-gradient(70% 50% at 50% 30%,#FBFAF6 0%,rgba(251,250,246,0) 70%),#F1EFE8;
  /* the light side's colours, for the admin's names and the public site's, whichever theme or colour scheme is set */
  --bg:#F1EFE8;--panel:#FFFFFF;--panel-2:#F6F5F0;--raise:#FFFFFF;--field:#F5F3EE;--line:#E3E0D7;--line-2:#D3D0C4;
  --field-line:#DAD6CB;--ink:#1D1D1B;--dim:#5B5847;--faint:#8B876F;--charcoal:#111110;--link:var(--acc-ink);--link-hover:#111110;
  --bad:#B4432F;--surface:#F4F3EE;--surface-raised:#FFFFFF;--stone:#EAE8E2;--stone-2:#E1DFD6;--stone-3:#D3D0C4;--ink-dim:#5B5847;
  --ink-faint:#8B876F;--brass:#B99A5B;--brass-2:#8E7440;--brass-soft:#EEE2C4;--line-soft:#DEDCD3}
.sg-check{width:100%;max-width:470px;margin:0;padding:13px 18px;border-radius:14px;background:#F7E1DB;border:1px solid #ECC3B8;
  color:#6B2214;font:600 15px/1.45 "Public Sans",-apple-system,sans-serif}

.sg-win{width:100%;max-width:470px;background:#FFFFFF;border:1px solid #E3E0D7;border-radius:20px;overflow:hidden;
  box-shadow:0 1px 2px rgba(28,29,30,.05),0 30px 60px -30px rgba(40,34,20,.42),0 90px 120px -70px rgba(40,34,20,.35)}
.sg-win-bar{display:flex;align-items:center;gap:7px;height:46px;padding:0 15px;background:#1A1916}
.sg-win-bar i{width:11px;height:11px;border-radius:50%;background:#4A4740;flex:none}
.sg-win-bar span{display:flex;align-items:center;gap:7px;min-width:0;flex:1;height:28px;margin-left:9px;padding:0 11px;border-radius:8px;
  background:#100F0D;color:#A9A594;font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;white-space:nowrap;overflow:hidden}
.sg-win-bar span svg{flex:none;color:var(--acc)}
.sg-win-bar span b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.sg-win-body{padding:34px 34px 30px}
.sg-win-body main,.sg-win-body .authwrap{display:block;min-height:0;padding:0;margin:0}
.sg-win-body .authwrap>*{max-width:none}

/* the page's own heading, words and card, set on the window */
.signin .cp{max-width:none;margin:0;padding:0;font-size:16px;line-height:1.6;text-align:left}
.signin .authcard{background:none;border:0;border-radius:0;padding:0;text-align:left;box-shadow:none}
.signin .cp h1,.signin .authcard h1{margin:0 0 10px;font:600 clamp(1.75rem,2.3vw,2.1rem)/1.1 "Fraunces","Iowan Old Style",Georgia,serif;
  letter-spacing:-.022em;color:#111110;text-align:left}
.signin .cp .lead,.signin .authcard .sub{margin:0 0 26px;font-size:16px;line-height:1.6;color:#5B5847;text-align:left}
.signin .cp .card{margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.signin .cp .fine{margin:24px 0 0;padding-top:18px;border-top:1px solid #E3E0D7;font-size:14.5px;line-height:1.6;color:#6A6655}
.signin .cp .fine b{color:#1D1D1B}
.signin .cp-center{padding-top:0;text-align:left}
.signin .cp-center p{margin-left:0;margin-right:0}
.signin .authcard form,.signin .cp form{display:flex;flex-direction:column;gap:18px;text-align:left}
.signin .cp .field{display:flex;flex-direction:column;gap:7px;margin:0}
.signin-main label,.signin .cp .field label,.signin .authcard form label{display:block;margin:0 0 7px;font:600 14.5px/1.35 "Public Sans",-apple-system,sans-serif;color:#2A2925}
.signin .cp .field label{margin:0}
.signin-main .hint,.signin .cp .field .hint{font-size:13.5px;line-height:1.5;color:#6A6655}
.signin-main input:not([type=hidden]):not([type=checkbox]):not([type=radio]){display:block;width:100%;height:56px;margin:0;padding:0 18px;
  border:1px solid #E3E0D7;border-radius:15px;background:#F5F3EE;color:#1D1D1B;box-shadow:none;
  font:400 16px/1.2 "Public Sans",-apple-system,sans-serif;transition:border-color .15s,background .15s,box-shadow .15s}
.signin-main input:not([type=hidden]):hover{border-color:#D3D0C4}
.signin-main input:not([type=hidden]):focus{outline:none;background:#FFFFFF;border-color:var(--acc-ink);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.28)}
.signin-main .cf-turnstile{margin:2px 0 0!important;min-height:65px}

/* pill buttons: gold for clients (the site's "Start a project"), night for staff */
.signin-main form button[type=submit],.signin-main form button:not([type]),.signin-main .btn{display:inline-flex;align-items:center;
  justify-content:center;width:100%;min-height:56px;margin:4px 0 0;padding:0 28px;border:0;border-radius:999px;cursor:pointer;
  font:700 16px/1.2 "Public Sans",-apple-system,sans-serif;letter-spacing:.01em;text-decoration:none;
  color:#15140F;background:linear-gradient(180deg,#F0DDAE,#D6B878 55%,#C6A55F);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 16px 34px -16px rgba(156,125,66,.85);transition:transform .15s,box-shadow .2s,filter .2s}
.signin-main form button:hover,.signin-main .btn:hover{filter:brightness(1.04);text-decoration:none;color:#15140F;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 20px 40px -16px rgba(156,125,66,.95)}
.signin-main form button:active,.signin-main .btn:active{transform:scale(.98)}
.signin--admin-in .signin-main form button,.signin--admin-key .signin-main form button,
.signin--admin-in .signin-main .btn,.signin--admin-key .signin-main .btn{color:#F1EEE4;background:linear-gradient(180deg,#2A2925,#141412);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 16px 34px -16px rgba(17,17,16,.7)}
.signin--admin-in .signin-main form button:hover,.signin--admin-key .signin-main form button:hover,
.signin--admin-in .signin-main .btn:hover,.signin--admin-key .signin-main .btn:hover{color:#FFFFFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 20px 40px -16px rgba(17,17,16,.8)}
.signin-main :focus-visible{outline:2px solid var(--acc-ink);outline-offset:3px}

/* links, notes and the admin's own extras */
.signin-main a{color:var(--acc-ink);text-decoration:underline;text-decoration-color:rgba(var(--acc-rgb),.7);text-underline-offset:.22em}
.signin-main a:hover{color:#111110}
.signin .authcard .foot{margin:22px 0 0;font-size:15px;color:#5B5847;text-align:center}
.signin .authcard .foot a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.signin .authcard .foot a.btn{color:#F1EEE4;text-decoration:none}
.signin .authcard .flash,.signin .lg-err,.signin .sp-err{margin:0 0 20px;padding:13px 16px;border:1px solid #ECC3B8;border-left:4px solid #C0523F;
  border-radius:14px;background:#F7E1DB;color:#5A1D12;font-weight:600;font-size:15px;line-height:1.5}
.signin .authcard .adv{margin-top:20px;color:#5B5847;font-size:14.5px}
.signin .authcard .adv summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#2A2925}
.signin .authcard .adv code{font-size:.9em;color:#2A2925;background:#F1EFE8;padding:1px 6px;border-radius:6px}
.signin .muted{color:#5B5847}

.sg-end{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;max-width:470px;margin-top:auto;padding-top:10px;
  color:#6A6655;font-size:14px;text-align:center}
.signin-main .sg-end .pew-credit a{color:#4A473E;text-decoration:none;opacity:.8}
.sg-help{margin:0}
.sg-help a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.signin-main>.sg-check{margin-top:auto}
.signin-main>.sg-check+.sg-win,.signin-main>.sg-win:first-child{margin-top:0}
.signin-main>.sg-win:first-child{margin-top:auto}

/* ---------------------------------------------------------------- phones: the panel becomes a band, the window rises over it */
@media (max-width:880px){
  .signin{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .signin-panel{min-height:0;gap:18px;padding:calc(16px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 84px max(20px,env(safe-area-inset-left))}
  .sg-mark{font-size:1.06rem}
  .sg-words{max-width:none}
  .sg-eyebrow{margin-bottom:12px;font-size:11px;letter-spacing:.17em}
  .sg-tag{font-size:clamp(1.95rem,8.6vw,2.7rem);line-height:1.04}
  .sg-tag.sg-long{font-size:clamp(1.8rem,7.9vw,2.45rem)}
  .sg-sub,.sg-foot{display:none}
  .signin-main{justify-content:flex-start;margin-top:-56px;padding:0 max(16px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    background:transparent}
  .signin-main>.sg-win:first-child,.signin-main>.sg-check{margin-top:0}
  .sg-win{box-shadow:0 1px 2px rgba(28,29,30,.06),0 24px 50px -24px rgba(20,18,12,.55)}
  .sg-win-bar{height:42px}
  .sg-win-body{padding:26px 22px 24px}
  .sg-end{margin-top:6px}

  /* the pictures get their own strip between the logo and the words, so they never cross either */
  .signin-panel{position:relative;height:auto;min-height:0;align-self:stretch}
  .sg-art{top:66px;bottom:auto;height:136px;overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 70%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 70%,transparent 100%)}
  .sg-words,.signin--client-key .sg-words{margin-top:148px}
  .signin-panel::after,.signin--client-in .signin-panel::after,.signin--client-key .signin-panel::after,
  .signin--admin-in .signin-panel::after,.signin--admin-key .signin-panel::after{background:radial-gradient(70% 40% at 50% 40%,rgba(var(--acc-rgb),.14),transparent 70%)}
  .sg-shot{border-radius:8px;box-shadow:0 18px 30px -18px rgba(0,0,0,.9)}
  .sg-shot-bar{gap:3px;padding:4px 6px}
  .sg-shot-bar i{width:5px;height:5px}
  .sg-shot-bar u{display:none}
  .sg-wall-in{left:50%;top:50%;width:150%;gap:10px;transform:translate(-50%,-50%) rotateZ(-12deg)}
  .sg-col{gap:10px}
  .sg-rise .sg-front{width:62%;left:34%;top:30px;transform:rotate(-6deg);transform-origin:0 0}
  .sg-rise .sg-back{display:block;width:40%;left:2%;top:46px;transform:rotate(-10deg)}
  .sg-fan .sg-shot,.signin--admin-key .sg-fan .sg-shot{width:42%;transform-origin:50% 120%}
  .sg-fan .sg-a{left:6%;top:28px;transform:rotate(-11deg)}
  .sg-fan .sg-b{left:29%;top:18px;transform:rotate(-1deg)}
  .sg-fan .sg-c{left:52%;top:28px;transform:rotate(9deg)}
  .signin--admin-key .sg-fan .sg-shot{width:58%;transform-origin:0 0}
  .signin--admin-key .sg-fan .sg-a{left:56%;top:-2px;transform:rotate(-8deg)}
  .signin--admin-key .sg-fan .sg-b{left:32%;top:16px;transform:rotate(-8deg)}
  .signin--admin-key .sg-fan .sg-c{left:8%;top:34px;transform:rotate(-8deg)}
}
@media (max-width:380px){
  .signin-main{padding-left:12px;padding-right:12px}
  .sg-win-body{padding:24px 16px 22px}
}
@media (prefers-reduced-motion:reduce){.signin *{transition:none!important}}