/* IUNU sign-in and account pages.
   Colour tokens and type families from the IUNU style guide (revision 1). The rest is one system:
   - one spacing scale (8, 16, 24, 32, 48, 64) and three groups per screen: identity, task, action
   - one alignment axis: everything centred; labels float inside the fields
   - one accent: gold marks the primary action only
   - no browser artifacts: autofill, validation bubbles and focus all styled as our own
   - messages appear only when there is something to say, and slide open instead of shifting the page */
:root{
  --gold:#FFB955; --gold-hover:#FFAD3B; --ink:#181818;
  --paper:#FFFFFF; --field:#F5F5F5; --field-line:#E4E4E4; --line:#E2E2E2; --panel:#F7F7F7;
  --text:#181818; --text-2:#4B4B4B; --text-3:#767676;
  --ok:#3C7A3E; --error:#B3261E; --focus:rgba(227,155,46,.30); --focus-line:#E39B2E;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px;
  --r:12px; --ease:cubic-bezier(.2,.8,.2,1);
  --gap-mark:15px; --gap-title:24px;   /* mark to title, title to content */
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root{
  --paper:#141414; --field:#1F1F1F; --field-line:#2C2C2C; --line:#2A2A2A; --panel:#1F1F1F;
  --text:#F3F3F3; --text-2:#B9B9B9; --text-3:#8C8C8C;
  --gold:#F5B455; --gold-hover:#FFC06A;
  --ok:#7CC47F; --error:#F2A39B; --focus:rgba(245,180,85,.22); --focus-line:#F5B455;
  color-scheme:dark;
}}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);
  font:400 16px/1.5 "Source Sans 3","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
button{font:inherit;color:inherit}

/* Page: a single 360 px column whose top sits a little above the optical centre */
.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:max(var(--s6),13vh) var(--s3) var(--s6)}
.card{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center}

/* The header group: the IUNU mark sits directly on the title (one message: sign in to Crop Simulator) */
.brand{display:block;line-height:0;text-decoration:none;margin-bottom:var(--gap-mark)}
.brand .mark{height:72px;width:auto;display:block}
.brand .mark path[fill="#000000"]{fill:var(--text)}

/* Views: one at a time, arriving with a short fade and rise */
.view{width:100%;display:flex;flex-direction:column;align-items:center}
.view:not([hidden]){animation:enter .36s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* The title, at most one line of help under it */
h1{font:600 20px/1.3 Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:0;margin:0;text-align:center;text-wrap:balance}
.sub{margin:var(--s1) 0 0;color:var(--text-2);text-align:center;font-size:16px;line-height:1.45;text-wrap:pretty;max-width:34ch}
.sub b{color:var(--text);font-weight:600}

/* The action */
form{width:100%;display:flex;flex-direction:column;gap:11px;margin-top:var(--gap-title)}
/* an empty message slot inside a form takes no gap of its own */
form > .msg:not(.show){margin-top:-11px}

/* Fields: filled, with the label inside; it floats up when the field has focus or a value */
.field{position:relative;width:100%}
.field input{display:block;width:100%;height:56px;padding:22px 16px 6px;border-radius:var(--r);border:1px solid var(--field-line);
  background:var(--field);color:var(--text);font:400 16px/1.25 "Source Sans 3",sans-serif;outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;-webkit-appearance:none;appearance:none}
.field label{position:absolute;left:17px;top:18px;font:400 16px/20px "Source Sans 3",sans-serif;color:var(--text-3);pointer-events:none;
  transform-origin:left top;transition:transform .16s var(--ease),color .16s}
.field input:focus + label,.field input:not(:placeholder-shown) + label{transform:translateY(-10px) scale(.75);color:var(--text-2)}
.field input:-webkit-autofill + label{transform:translateY(-10px) scale(.75);color:var(--text-2)}
.field input:focus{border-color:var(--focus-line);box-shadow:0 0 0 4px var(--focus);background:var(--paper)}
.field input::placeholder{color:transparent}
.field.reveal-field input{padding-right:52px}
.field.invalid input{border-color:var(--error)}
/* Autofilled fields look exactly like typed ones (no browser tint) */
.field input:-webkit-autofill,.field input:-webkit-autofill:hover,.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);caret-color:var(--text);-webkit-box-shadow:0 0 0 40px var(--field) inset;transition:background-color 100000s}
.field input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 40px var(--paper) inset,0 0 0 4px var(--focus)}
.reveal{position:absolute;right:8px;top:8px;width:40px;height:40px;border:0;border-radius:10px;background:none;color:var(--text-3);
  display:grid;place-items:center;cursor:pointer;padding:0;transition:color .15s}
.reveal:hover{color:var(--text)}
.reveal svg{width:20px;height:20px}
.reveal .off{display:none}
.reveal[aria-pressed="true"] .on{display:none}
.reveal[aria-pressed="true"] .off{display:block}

/* Messages: closed until there is something to say, then slide open (nothing below jumps) */
.msg{display:grid;grid-template-rows:0fr;width:100%;transition:grid-template-rows .22s var(--ease),opacity .22s;opacity:0}
.msg > span{overflow:hidden;font-size:15px;line-height:1.4;text-align:center;color:var(--text-2)}
.msg.show{grid-template-rows:1fr;opacity:1}
.msg.show > span{padding:4px 0}
.msg.error > span{color:var(--error)}
.msg.ok > span{color:var(--ok)}
.view > .msg.show{margin-top:var(--s2)}

/* The primary action: the one gold thing on the page */
.primary{position:relative;width:100%;height:50px;margin-top:4px;border:0;border-radius:var(--r);background:var(--gold);color:var(--ink);
  font:600 15px/1 Montserrat,sans-serif;letter-spacing:.01em;cursor:pointer;display:flex;align-items:center;justify-content:center;
  text-decoration:none;transition:background .15s,transform .1s var(--ease),opacity .15s}
form > .primary{margin-top:7px}
.primary:hover{background:var(--gold-hover)}
.primary:active{transform:scale(.985)}
.primary:disabled{background:var(--field);color:var(--text-3);cursor:default;transform:none}
.primary.busy{color:transparent;pointer-events:none}
.primary.busy::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid rgba(24,24,24,.22);border-top-color:var(--ink);
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* A lone action under the text (no form) */
.action{width:100%;margin-top:var(--gap-title)}

/* Quiet secondary links under the action */
.links{display:flex;flex-direction:column;align-items:center;gap:var(--s1);margin-top:20px}
.link{background:none;border:0;padding:6px 8px;border-radius:8px;font:400 15px/1.3 "Source Sans 3",sans-serif;color:var(--text-2);cursor:pointer;text-decoration:none;transition:color .15s}
.link:hover{color:var(--text)}
:focus-visible{outline:2px solid var(--focus-line);outline-offset:3px}
input:focus-visible{outline:none}

/* Six-box code entry */
.code{display:flex;justify-content:center;gap:8px;margin-top:var(--gap-title)}
.code input{width:46px;height:58px;padding:0;text-align:center;font:500 24px/1 "JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color:var(--text);background:var(--field);border:1px solid var(--field-line);border-radius:var(--r);caret-color:var(--focus-line);outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;-webkit-appearance:none;appearance:none}
.code input:focus{border-color:var(--focus-line);box-shadow:0 0 0 4px var(--focus);background:var(--paper)}
.code input:nth-child(3){margin-right:12px}
.code.shake{animation:shake .4s var(--ease)}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.code.done input{border-color:var(--ok)}

/* Authenticator set-up: three steps on one quiet rail */
.steps{list-style:none;margin:var(--gap-title) 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:var(--s3)}
.steps > li{display:grid;grid-template-columns:24px 1fr;column-gap:14px;align-items:start;text-align:left}
.steps .n{width:24px;height:24px;border-radius:50%;background:var(--panel);border:1px solid var(--line);color:var(--text-2);
  font:600 12px/22px Montserrat,sans-serif;text-align:center}
.steps b{display:block;font-weight:600;font-size:16px;line-height:24px}
.steps p{margin:2px 0 0;color:var(--text-2);font-size:15px;line-height:1.45}
.qr{margin-top:14px;display:inline-block;background:#FFFFFF;padding:10px;border-radius:14px;border:1px solid var(--line);line-height:0}
.qr img{display:block;width:168px;height:168px;image-rendering:pixelated}
.addapp{margin-top:14px}
details.cant{margin-top:10px}
details.cant summary{cursor:pointer;color:var(--text-2);font-size:15px;list-style:none;display:inline-block;padding:4px 0}
details.cant summary::-webkit-details-marker{display:none}
details.cant summary:hover{color:var(--text)}
details.cant[open] summary{color:var(--text)}
.keyrow{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.key{font:500 14px/1.4 "JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;background:var(--field);border:1px solid var(--field-line);
  border-radius:10px;padding:8px 12px;letter-spacing:.04em;user-select:all}
.copy{border:1px solid var(--field-line);background:var(--paper);border-radius:10px;height:36px;padding:0 14px;
  font:600 13px/1 Montserrat,sans-serif;cursor:pointer;transition:border-color .15s}
.copy:hover{border-color:var(--text-3)}
.steps .code{justify-content:flex-start;margin-top:12px;gap:6px}
.steps .code input{width:40px;height:50px;font-size:20px}
.steps .code input:nth-child(3){margin-right:10px}

/* Password strength: five segments and the rules as small chips */
.strength{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:4px}
.meter{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.meter i{height:3px;border-radius:2px;background:var(--field-line);transition:background .25s}
.meter i.on{background:var(--gold)}
.meter.full i{background:var(--ok)}
.rules{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.rules li{font-size:13px;line-height:1;padding:7px 10px 7px 24px;border-radius:999px;background:var(--field);color:var(--text-3);position:relative;transition:color .2s}
.rules li::before{content:"";position:absolute;left:10px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--field-line);transition:all .2s}
.rules li.met{color:var(--text)}
.rules li.met::before{background:none;width:9px;height:5px;margin-top:-4px;border-radius:0;border-left:1.8px solid var(--ok);border-bottom:1.8px solid var(--ok);transform:rotate(-45deg)}

/* Success: a drawn tick */
/* On a success screen the tick takes the mark's place: one emblem per screen */
body.success .brand{display:none}
.tick{display:block;width:72px;height:72px;margin:0 auto var(--gap-mark)}
.tick circle{fill:none;stroke:var(--ok);stroke-width:2;stroke-dasharray:164;stroke-dashoffset:164;animation:draw .6s var(--ease) .05s forwards}
.tick path{fill:none;stroke:var(--ok);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:34;stroke-dashoffset:34;animation:draw .35s var(--ease) .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* Signed in */
.avatar{width:56px;height:56px;border-radius:50%;background:var(--panel);border:1px solid var(--line);color:var(--text);display:grid;place-items:center;
  font:600 20px/1 Montserrat,sans-serif;margin:0 auto var(--s3)}
.note{margin-top:var(--s4);color:var(--text-3);font-size:15px;text-align:center}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important}
  .tick circle,.tick path{stroke-dashoffset:0}
}
@media (max-width:400px){
  .page{padding-top:var(--s5)}
  .code{gap:6px}
  .code input{width:42px;height:54px}
}