/* The login page and the staff gate of the test page in Naldano glass: glass.css on the tokens of tokens.css, both
   copied from Naldano/brand and never retyped here. The garden room (data-room="garden"): garden green leads,
   terracotta only marks a problem. Every screen has at most two glass layers: the card with the step's title and the
   card with its form. Fields, the key and the QR code sit on solid surfaces. */
:root{
  --login-alert:light-dark(var(--atelier-ink),var(--plaster));
  --login-alert-ground:light-dark(color-mix(in srgb,var(--plaster) 55%,var(--page)),color-mix(in oklab,var(--atelier-ink) 26%,var(--night)));
}
p{margin:0}
.noscript{max-width:440px;margin:16px auto;padding:16px 20px;background:var(--glass-solid);border-radius:var(--glass-radius-l)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Wide screens: the title card and the form beside it, in the middle of the ground. */
.stage{display:grid;grid-template-columns:440px minmax(0,540px);place-content:center;align-items:center;gap:24px;min-height:100vh;min-height:100dvh;padding:24px}
.stage.wide{grid-template-columns:440px minmax(0,800px)}
.intro{align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:16px;padding:36px 40px 26px;text-align:center}
.wordmark{height:24px;width:auto}
.intro-text{display:flex;flex-direction:column;align-items:center;gap:14px;margin:auto 0}
.intro .g-title{font-size:clamp(40px,4.1vw,60px)}
.lead{max-width:36ch;color:var(--glass-text-2)}
.intro-foot{display:grid;gap:6px;justify-items:center}
.help{font-size:var(--text-small);color:var(--glass-text-2);text-decoration:none}
.help:hover{color:var(--glass-text);text-decoration:underline;text-underline-offset:3px}
.note{font:italic var(--text-note)/1.3 var(--serif);color:var(--glass-text-2)}
.panel{display:flex;flex-direction:column;gap:20px;padding:36px 40px;animation:g-rise var(--glass-base) var(--glass-ease) both}

/* Forms */
.form{display:flex;flex-direction:column;gap:18px}
.panel .g-input{min-height:50px;padding:11px 16px;font-size:17px}
.password{position:relative}
.panel .password .g-input{padding-right:112px}
.reveal{position:absolute;top:50%;right:6px;translate:0 -50%;min-height:36px;padding:0 12px;font-size:14px}
.panel .code{font:500 24px/1 var(--mono);letter-spacing:.42em;text-align:center;padding-left:calc(16px + .42em)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:2px}
.link{padding:0;border:0;background:none;font:inherit;font-size:var(--text-small);color:var(--glass-text-accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link:hover{color:var(--glass-text)}
.g-btn:disabled{cursor:progress}
:is(.problem,.gate-error){padding:10px 14px;font-size:var(--text-small);color:var(--login-alert);background:var(--login-alert-ground);border-left:3px solid currentColor;border-radius:var(--glass-radius-s)}
.notice{padding:10px 14px;font-size:var(--text-small);background:var(--glass-solid-2);border-left:3px solid var(--glass-accent);border-radius:var(--glass-radius-s)}
.hint,.aside{font-size:var(--text-small);color:var(--glass-text-2)}
.hint.warn{color:var(--login-alert)}

/* Two columns in the wide card: the first sign-in and the new password after "Passwort vergessen". */
.columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.column{display:flex;flex-direction:column;gap:16px;min-width:0}
.columns>.column:first-child{padding-right:36px}
.columns>.column+.column{padding-left:36px;border-left:1px solid var(--glass-line)}
h2{display:flex;align-items:center;gap:12px;margin:0;font:500 var(--text-entry)/1.15 var(--serif);letter-spacing:-.01em}
.number,.steps li::before{display:grid;place-items:center;flex:none;width:30px;height:30px;border:1px solid var(--glass-control-line);border-radius:50%;font:500 13px/1 var(--sans)}

/* The live checklist of the password rules. */
.checklist{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:var(--text-small);color:var(--glass-text-2)}
.checklist li{position:relative;padding-left:28px}
.checklist li::before{content:"";position:absolute;top:2px;left:0;width:18px;height:18px;border:1.5px solid var(--glass-control-line);border-radius:50%;
  transition:background-color var(--glass-base) var(--glass-ease),border-color var(--glass-base) var(--glass-ease)}
.checklist li.ok{color:var(--glass-text)}
.checklist li.ok::before{background:var(--glass-accent);border-color:var(--glass-accent)}
.checklist li.ok::after{content:"";position:absolute;top:7px;left:5px;width:8px;height:5px;border:solid var(--glass-on-accent);border-width:0 0 2px 2px;rotate:-45deg}

/* The factor choice and the number after its fixed +49. */
.choice{display:grid;gap:10px;min-width:0;margin:0;padding:0;border:0}
.option{display:grid;grid-template-columns:18px minmax(0,1fr);gap:2px 12px;padding:14px 16px;border:1px solid var(--glass-line);border-radius:var(--glass-radius-m);
  background:var(--glass-field);cursor:pointer;transition:border-color var(--glass-base) var(--glass-ease),box-shadow var(--glass-base) var(--glass-ease)}
.option:hover{border-color:var(--glass-control-line)}
/* An option not offered yet: visible, greyed and inert, its words still at AA. */
.option.unavailable,.option.unavailable:hover{border-style:dashed;border-color:var(--glass-line);background:var(--glass-well);cursor:not-allowed}
.option.unavailable .option-title{color:var(--glass-text-2)}
.option.chosen{border-color:var(--glass-accent);box-shadow:inset 0 0 0 1px var(--glass-accent),var(--glass-shadow-s)}
.option .g-radio{grid-row:1/span 2;margin-top:3px}
.option-title{font-weight:500}
.option-text{font-size:var(--text-small);color:var(--glass-text-2)}
.tag{margin-left:10px;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--glass-text-accent);vertical-align:2px}
.tel{position:relative;font-size:17px}
.tel-prefix{position:absolute;top:50%;left:17px;translate:0 -50%;line-height:1;color:var(--glass-text);pointer-events:none}
.panel .prefixed .g-input{padding-left:calc(17px + 2.05em)}

/* The authenticator setup: the large QR code on its paper plate, the key as text, the first code. The steps stand in
   the title card. The code's own quiet zone is the plate's margin. */
.setup{display:flex;flex-direction:column;align-items:center;gap:14px}
.setup .g-qr{padding:0;overflow:hidden}
.g-qr svg.qr{width:clamp(300px,23.6vw,340px)}
.qr-ground{fill:var(--page)}
.qr-modules{fill:currentColor}
.secret-label{font-size:var(--text-small);color:var(--glass-text-2)}
.secret{width:100%;margin-top:-6px;padding:9px 14px;font:16px/1.5 var(--mono);letter-spacing:.06em;word-spacing:.25em;text-align:center;overflow-wrap:anywhere;
  background:var(--glass-field);border:1px solid var(--glass-line);border-radius:var(--glass-radius-s);user-select:all}
.setup .form{width:100%}
.open-app,.phone-only{display:none}
.steps{display:grid;gap:12px;margin:6px 0 0;padding:0;list-style:none;counter-reset:step;font-size:var(--text-small);text-align:left}
.steps li{position:relative;min-height:30px;padding-left:42px;counter-increment:step}
.steps li::before{content:counter(step);position:absolute;top:-4px;left:0}

/* Forced colours: the marks keep their meaning as system colours. */
@media (forced-colors:active){
  .checklist li.ok::before{forced-color-adjust:none;background:Highlight;border-color:Highlight}
  .checklist li.ok::after{forced-color-adjust:none;border-color:HighlightText}
  .option.chosen{outline:2px solid Highlight;outline-offset:-2px}
  .option.unavailable,.option.unavailable .option-title,.option.unavailable .option-text{color:GrayText;border-color:GrayText}
}

/* Below 1180 px the title card and the form stand one above the other. */
@media (max-width:1180px){
  .stage,.stage.wide{grid-template-columns:minmax(0,640px);justify-content:center;align-content:center;padding:24px 16px}
  .stage.wide{grid-template-columns:minmax(0,800px)}
  .intro{justify-self:center;width:min(440px,100%)}
}
/* Touch screens open the key in the authenticator app on the same phone. */
@media (hover:none),(pointer:coarse){
  .open-app{display:inline-flex}
}
/* Phones: compact, one column, the first sign-in in two parts. */
@media (max-width:760px){
  .phone-only{display:flex}
  .link.phone-only{display:inline}
  .parts.part-1>.column+.column,.parts.part-2>.column:first-child{display:none}
  .stage,.stage.wide{display:flex;flex-direction:column;justify-content:flex-start;gap:8px;padding:8px}
  .intro{width:100%;gap:6px;padding:20px 18px 12px}
  .wordmark{height:22px}
  .intro-text{gap:6px;margin:0}
  .intro .g-title{font-size:32px}
  .lead,.aside{font-size:15px;line-height:1.5}
  .help-label,.note{display:none}
  .help{font-size:14px}
  .panel{gap:14px;padding:16px}
  .g-btn--large{min-height:48px}
  .form,.column{gap:12px}
  .panel .g-input{min-height:46px;padding:9px 14px;font-size:16px}
  .tel{font-size:16px}
  .tel-prefix{left:15px}
  .panel .prefixed .g-input{padding-left:calc(15px + 2.05em)}
  .columns{grid-template-columns:minmax(0,1fr)}
  .columns>.column:first-child{padding-right:0}
  .columns>.column+.column{padding-left:0;border-left:0}
  h2{font-size:21px}
  .checklist{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;font-size:14px}
  .checklist li{padding-left:24px}
  .checklist li::before{width:16px;height:16px}
  .checklist li.ok::after{top:6px;left:4px;width:7px;height:4px}
  .hint{font-size:14px;line-height:1.45}
  .option{padding:12px 14px}
  .g-qr svg.qr{width:240px}
  .setup{gap:8px}
  .secret-label{font-size:14px;line-height:1.4}
  .secret{padding:6px 8px;font-size:13px;line-height:1.35;letter-spacing:0;word-spacing:.1em}
  .steps{gap:5px;margin-top:2px;font-size:14px;line-height:1.3}
  .steps li{min-height:24px;padding-left:34px}
  .steps li::before{top:-2px;width:24px;height:24px;font-size:12px}
}

/* The staff gate of the test login page (infra/terraform/login/gate.js.tftpl). */
.gate-stage{display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:16px}
.gate-card{width:min(440px,100%);display:grid;justify-items:center;gap:14px;padding:36px clamp(20px,5vw,40px) 32px;text-align:center}
.gate-card .wordmark{margin-bottom:6px}
.gate-card .g-title{font-size:clamp(32px,6vw,42px)}
.gate-card>p:not(.g-label){color:var(--glass-text-2)}
.gate-form{display:grid;gap:10px;width:100%;margin-top:8px;text-align:left}
.gate-form .g-btn{width:100%;margin-top:6px}